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/
I (Geoff) have been guilty of at least one of the buggy React code examples that @elliotclydenz not only shows, but solves, here.
https://css-tricks.com/three-buggy-react-code-examples-and-how-to-fix-them/
The State Of Web Workers In 2021
https://css-tricks.com/the-state-of-web-workers-in-2021/
If you're tired of working with the same horizontal and vertical navs, @rpsthecoder has some ideas using CSS shapes.
https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/
Serverless Functions as Proxies
https://css-tricks.com/serverless-functions-as-proxies/
Paul Ratcliffe takes a fresh look at skip links and how to use them in 2021.
https://css-tricks.com/a-deep-dive-on-skipping-to-content/
"CSS Module Scripts" are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS.
https://css-tricks.com/css-modules-the-native-ones/
Pretty darn cool how @bret_cameron was able to combine code and music theory to make a playable synth keyboard.
https://css-tricks.com/how-to-code-a-playable-synth-keyboard/
A Shared ESLint Configuration
https://css-tricks.com/a-shared-eslint-configuration/
Conjuring Generative Blobs With The CSS Paint API by @georgedoescode
https://css-tricks.com/conjuring-generative-blobs-with-the-css-paint-api/
GitHub Explains the Open Graph Images
https://css-tricks.com/github-explains-the-open-graph-images/
So you want to self-publish books and courses on programming? @lorendsr gets down to brass tacks on what it takes.
https://css-tricks.com/so-you-want-to-self-publish-books-and-courses-on-programming/
Developer-Friendly Passwordless Auth
https://css-tricks.com/developer-friendly-passwordless-auth/
