"Basically, any time you run across some cool front-end thing, there might be an opportunity to make an interactive generator for that thing." —@johnpolacek
https://css-tricks.com/building-a-cool-front-end-thing-generator/
So, you have a reusable web component. And you have a CMS. @storykaboom shows how to make them work together in a WP setup.
https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/
Wanna see a whiter white?
https://css-tricks.com/wanna-see-a-whiter-white/
Where's the line between Static vs. Dynamic vs. Jamstack? @mikeneumegen says it's a lot blurrier than at first glance.
https://css-tricks.com/static-vs-dynamic-vs-jamstack-wheres-the-line/
Napkin: Sorta like Zapier, except you write code (if you want to) to make easy-to-build cloud functions that can be triggered by anything from RSS to HTTP requests to Slack messages.
https://css-tricks.com/napkin/
The little "View Source" tool by Neatnik makes it possible to view source on a mobile device!
https://css-tricks.com/view-source-on-mobile/
Parsing, processing, enhancing, and converting Markdown needs code. @KittyGiraudel has a way to keep Markdown out of the client in a Next.js application.
https://css-tricks.com/responsible-markdown-in-next-js/
One of the smaller and, yet for some reason, super exciting things about CSS nesting is how we'll be able to nest media queries.
https://css-tricks.com/css-nesting-specificity-and-you/
Cross-origin iframes are basically the heart of how CodePen works. You write code, we execute it for you in an iframe that doesn't share the same domain as CodePen itself, as the first line of defense. We didn't hear any heads up or anything.
https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/
Re Just another great post by @ChallengesCss
Great overview from Bramus on new units like lvh, svh, nd dvh, among others.
https://css-tricks.com/the-large-small-and-dynamic-viewports/
Recent Nuxt releases are taking the developer experience to the next level, with some newer features that speed up and simplify developer processes. @sarah_edo shows us what's new in this post!
https://css-tricks.com/new-nuxt-features-past-v2-10/
RT Josh W. Comeau
New blog post: ⭐️ “The World of CSS Transforms” ⭐️
The `transform` property is ridiculously versatile. It can help with so many otherwise-challenging layouts and effects, IF you understand it well.
That's what this post is all about! Check it out:
→
https://www.joshwcomeau.com/css/transforms/
Exploring the CSS Paint API: Image Fragmentation Effect
https://css-tricks.com/exploring-the-css-paint-api-image-fragmentation-effect/
RT Adam Argyle
user adaptive frosted glass 😎
```#css
.adaptive-glass {
--glass-lightness: 100%;
background: hsl(0 0% var(--glass-lightness) / 50%);
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
}
```
https://codepen.io/argyleink/pen/qBmJyvv
RT Adam Argyle
#CSS `:focus-visible`
Lets the browser decide whether or not to show focus
Video shows the difference between `:focus` and `:focus-visible` when Javascript is used to focus buttons after mouse interaction
tldr;
less concerns / better UX
Learn more
https://web.dev/learn/css/pseudo-classes/#:focus-:focus-within-and-:focus-visible
"SVG Gobbler is a browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image."
https://css-tricks.com/svg-gobbler/
Inspecting compiled CSS is one of those things we all know is a god idea but I'd bet few do. @andyford did it and significantly improved a Sass loop with custom properties.
https://css-tricks.com/efficient-infinite-utility-helpers-using-inline-css-custom-properties-and-calc/
"[...] truly consider all other options before using a [browser window] breakpoint. Ask, is the component expected to always be related to the page size (headers, modals, etc.)? Then a breakpoint might be acceptable."
– @donniedamato
https://css-tricks.com/gridless-design/
