Should masonry be part of CSS grid?
An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.
https://ishadeed.com/article/css-grid-masonry/
An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.
https://ishadeed.com/article/css-grid-masonry/
The <details> and <summary> elements are getting an upgrade
It's going to be easier to style the '' and '' elements
https://blog.stephaniestimac.com/posts/2024/10/html-details-and-summary-update/
It's going to be easier to style the '' and '' elements
https://blog.stephaniestimac.com/posts/2024/10/html-details-and-summary-update/
❤1👏1
How to Code a Subtle Shader Background Effect with React Three Fiber
Learn how to create an interactive shader background effect using React Three Fiber and Drei in four simple steps.
https://tympanus.net/codrops/2024/10/31/how-to-code-a-subtle-shader-background-effect-with-react-three-fiber/
Learn how to create an interactive shader background effect using React Three Fiber and Drei in four simple steps.
https://tympanus.net/codrops/2024/10/31/how-to-code-a-subtle-shader-background-effect-with-react-three-fiber/
❤1
Pure CSS simple parallax on scroll (responsive, accessible)
https://codepen.io/thebabydino/pen/abgOxaW?editors=1100
https://codepen.io/thebabydino/pen/abgOxaW?editors=1100
codepen.io
Pure CSS simple parallax on scroll (responsive, accessible)
A pure CSS version using scroll-driven and scroll-triggered animations. You can see all my other demos using pure CSS scroll tricks [under this tag](ht...
The most effective ways to improve Core Web Vitals
A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals
https://web.dev/articles/top-cwv
A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals
https://web.dev/articles/top-cwv
How we shrunk our Javascript monorepo git size by 94%
We really did this! We work in a very large Javascript monorepo at Microsoft we colloquially call 1JS. Using some new changes to the git client it went from 178GB to 5GB.
https://www.jonathancreamer.com/how-we-shrunk-our-git-repo-size-by-94-percent/
We really did this! We work in a very large Javascript monorepo at Microsoft we colloquially call 1JS. Using some new changes to the git client it went from 178GB to 5GB.
https://www.jonathancreamer.com/how-we-shrunk-our-git-repo-size-by-94-percent/
11 HTML best practices for login & sign-up forms
Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.
https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.
https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
❤1
Next.js 15 is officially stable and ready for production.
Next.js 15 introduces React 19 support, caching improvements, a stable release for Turbopack in development, new APIs, and more.
https://nextjs.org/blog/next-15
Next.js 15 introduces React 19 support, caching improvements, a stable release for Turbopack in development, new APIs, and more.
https://nextjs.org/blog/next-15
Angular’s Approach to Partial Hydration
There’s a lot of talk about partial hydration, but Angular found confusion over the term and little actual framework support for it.
https://thenewstack.io/angulars-approach-to-partial-hydration/
There’s a lot of talk about partial hydration, but Angular found confusion over the term and little actual framework support for it.
https://thenewstack.io/angulars-approach-to-partial-hydration/
The New Stack
Angular’s Approach to Partial Hydration
There’s a lot of talk about partial hydration, but Angular found confusion over the term and little actual framework support for it.
5 Cool Things To Do with DevTools AI Assistance
Learn about fun and exciting use-cases of the new AI assistance panel in DevTools
https://developer.chrome.com/blog/5-cool-things-to-do-with-ai-assistance?hl=en
Learn about fun and exciting use-cases of the new AI assistance panel in DevTools
https://developer.chrome.com/blog/5-cool-things-to-do-with-ai-assistance?hl=en
How to Update :root CSS Variable with Javascript
Learn how to update :root CSS variables with JavaScript in Vue.js using the Composition API. Explore best practices like batching, debouncing, and scoped styles with practical code examples to enhance performance.
https://vueschool.io/articles/vuejs-tutorials/how-to-update-root-css-variable-with-javascript/
Learn how to update :root CSS variables with JavaScript in Vue.js using the Composition API. Explore best practices like batching, debouncing, and scoped styles with practical code examples to enhance performance.
https://vueschool.io/articles/vuejs-tutorials/how-to-update-root-css-variable-with-javascript/
👍1
Fun with Custom Cursors
Two ways to change the default mouse cursor appearance.
https://www.letsbuildui.dev/articles/fun-with-custom-cursors/
Two ways to change the default mouse cursor appearance.
https://www.letsbuildui.dev/articles/fun-with-custom-cursors/
You can use text-wrap: balance; on icons
A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example: This very long headline ends with a single word Having a dangling word doesn't always look great. Using text-wrap:balance …
https://shkspr.mobi/blog/2024/10/you-can-use-text-wrap-balance-on-icons/
A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example: This very long headline ends with a single word Having a dangling word doesn't always look great. Using text-wrap:balance …
https://shkspr.mobi/blog/2024/10/you-can-use-text-wrap-balance-on-icons/
Terence Eden’s Blog
You can use text-wrap: balance; on icons
A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example: This very long headline ends with a single word Having a dangling…
How to Build Your Own Wheel of Names with React and TypeScript
A while ago, I stumbled upon a website listing various coding challenges, and I decided to give some a try. Last week, I came across one that involved building a "Wheel of Names." It reminded me of a similar project I built years ago using Flash and ...
https://www.freecodecamp.org/news/build-your-own-wheel-of-names/
A while ago, I stumbled upon a website listing various coding challenges, and I decided to give some a try. Last week, I came across one that involved building a "Wheel of Names." It reminded me of a similar project I built years ago using Flash and ...
https://www.freecodecamp.org/news/build-your-own-wheel-of-names/
❤1
Using Protocol Buffers in JavaScript: Efficient Binary Format
Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.
https://jsdev.space/protocol-buffers-js/
Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.
https://jsdev.space/protocol-buffers-js/
👍1
How To Speed Up Your Vue App With Server Side Rendering
Vue is a framework built for client-side applications. Learn how to optimize page load performance with server side rendering.
https://www.debugbear.com/blog/vue-ssr
Vue is a framework built for client-side applications. Learn how to optimize page load performance with server side rendering.
https://www.debugbear.com/blog/vue-ssr
❤2
Newly Stable Next.js Compiler Faster, Supports Larger Builds
After two years, Next.js Turbopack is ready for frontend shops to use. It’s faster than Webpack, with a boost from new cache capabilities.
https://thenewstack.io/newly-stable-next-js-compiler-faster-supports-larger-builds/
After two years, Next.js Turbopack is ready for frontend shops to use. It’s faster than Webpack, with a boost from new cache capabilities.
https://thenewstack.io/newly-stable-next-js-compiler-faster-supports-larger-builds/
The New Stack
Newly Stable Next.js Compiler Faster, Supports Larger Builds
After two years, Next.js Turbopack is ready for frontend shops to use. It’s faster than Webpack, with a boost from new cache capabilities.
Implementing and Using Monitoring Tracking Points in JavaScript
Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.
https://jsdev.space/tracking-points-js/
Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.
https://jsdev.space/tracking-points-js/
React Compiler Beta Release
The library for web and native user interfaces
https://react.dev/blog/2024/10/21/react-compiler-beta-release#roadmap-to-stable
The library for web and native user interfaces
https://react.dev/blog/2024/10/21/react-compiler-beta-release#roadmap-to-stable
Framer: Sites Now Become Interactive 50% Faster
This week, we’ve started rolling out an update that makes most Framer sites interactive 50% faster.
https://www.framer.com/blog/sites-interactive-faster/
This week, we’ve started rolling out an update that makes most Framer sites interactive 50% faster.
https://www.framer.com/blog/sites-interactive-faster/