What is the Value of Browser Diversity?
https://css-tricks.com/what-is-the-value-of-browser-diversity/
PostCSS 8.0 “President Ose” was released! Changes:
The main feature is the new plugin API. Migration guide:
https://github.com/postcss/postcss/releases/tag/8.0.0
https://evilmartians.com/chronicles/postcss-8-plugin-migration
🎬 VIDEO ALERT! 🎬
My fellow Cascadians, the videos of the talks from our meet-up last week are now available! 🥳
Check the playlist out, enjoy the incredible talent of
@5t3ph, @cassiecodes and @argyleink and please SMASH that subscribe button!
https://www.youtube.com/playlist?list=PLkKNUEV9943M_nX4-V5kVr0B3pjp5sqhM
Virtual Event Registrations with Wufoo Forms
https://css-tricks.com/virtual-event-registrations-with-wufoo-forms/
SVG Daily Tip #17
By animating the viewBox of your SVG, you can create a camera effect 🎥
x & y, make the camera moves.
width & height, make the camera zoom.
Animation & source code:
#SVGTipOfTheDay#SVG
Louis Hoebregts: SVG Daily Tip #16
You can use JavaScript to know the length of an SVG path with the method getTotalLength.
Very useful for hand drawing animations✍️
Animation & source code:
#SVGTipOfTheDay#SVG
https://codepen.io/Mamboleoo/pen/QWNjdby
https://twitter.com/Mamboleoo/status/1292779801854582786
Winamp Skin Museum
https://css-tricks.com/winamp-skin-museum/
content-visibility: the new CSS property that boosts your rendering performance
https://css-tricks.com/content-visibility-the-new-css-property-that-boosts-your-rendering-performance/
Interaction Media Features and Their Potential (for Incorrect Assumptions)
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
.logo {
display: flex;
place-items: center;
gap: .5ch;
font-size: 20vmin;
}
.logo > img {
max-block-size: 1.25em;
}
🤩 logo img height is 125% of a responsive font-size (20vmin) letter M.. relative units are so cool!
https://codepen.io/argyleink/pen/VwaQGxB
Using a brightness() filter to generically highlight content
https://css-tricks.com/using-a-brightness-filter-to-generically-highlight-content/
How to Get Handwriting Animation With Irregular SVG Strokes
https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/
Defining “View Source”
https://css-tricks.com/defining-view-source/
Proportional Resizing with CSS Variables by @shadeed9
.rect {
–size: 186px;
–aspect-ratio: 2.35;
width: var(–size);
height: calc(var(–size) / var(–aspect-ratio));
}
https://ishadeed.com/snippet/proportional-resizing-css-variables/
oh hey, the @toolsday podcast’s latest episode covers new and experimental#CSS
and who doesn’t need more @Una and @chrisdhanaraj in their#podcast feed, subscribe if you haven’t 🙆♀️
https://spec.fm/podcasts/toolsday/2shqs8x7
Try to build your idea with HTML and CSS and JavaScript and see how far you get. Just Google every single thing you don’t know. Start with “how to make a HTML page” Then “how to make text colored in HTML”. Then “how to make a button in HTML”
Great advice in Makebook by @levelsio
Setting up and Customizing the Ant Design System in a Nuxt App
https://css-tricks.com/setting-up-and-customizing-the-ant-design-system-in-a-nuxt-app/
How CSS Perspective Works
https://css-tricks.com/how-css-perspective-works/
