It's been a busy week with good reads. Do you need GraphQL? Quill RTE, Biome vs. Prettier, a deep dive into CSS in React Server Components, and a Qwik vs. Next.js overview. Also, the first-ever CSS game, how to test HTML with CSS, and Gap vs. Margin. Does the Design System help?
This post is from the co-founder of GraphQL company, and that fact itself piqued some interest.
https://mxstbr.com/thoughts/graphql/
Quill is an open-source API-driven Rich Text Editor developed and maintained by Slab.
In v2, Quill moved to TypeScript and Vitest for unit testing and migrated the website to Gatsby. The last one is a bit strange when there are Astro, Vue, Svelte, and Next.js.
Biome claims it is 35x faster than Prettier and can replace Prettier and ESLint.
v1.7 provides an easy way to migrate from ESLint and Prettier.
https://biomejs.dev/blog/biome-v1-7/
Next.js 13.4 became the first React framework to be built on React Server Components. However, not all previously used components will work nicely. In this long read, Josh will explain many exciting details and how to fix CSS-IN-JS.
https://www.joshwcomeau.com/react/css-in-rsc/
Also, Next.js has 1 million monthly active developers and released v14.2
https://nextjs.org/blog/next-14-2
While on the Next.js subject, here are next-view-transitions for the Next.js to be used in the App Router.
https://github.com/shuding/next-view-transitions
https://www.cmrg.me/blog/rsc-part-1-the-backstory
https://outshift.cisco.com/blog/qwik-vs-nextjs
https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber
This is some new level of CSS usage, with very smartly used scroll and snap features.
https://dev.to/warkentien2/desert-racer-worlds-first-css-only-swipe-aware-game-4j0h
DEMO: https://000699350.deployed.codepen.website/pages/home/home.html#color-1
https://heydonworks.com/article/testing-html-with-modern-css/
https://frontendmasters.com/blog/gap-is-the-new-margin/
The best way to add images to the website was around 2007. You simply use an image tag and call it a day. With all the screen sizes, screen density and responsiveness, this task feels complicated unless automated.
https://danburzo.ro/responsive-images-html/
This is a good and surprising resource. Many features are missing, and some are old. For example, the SVG favicon (9 years), Web Notifications (12 years), and so on.
This is quite a handy source if you struggle to find a proper name for a Thing.
https://classnames.paulrobertlloyd.com/
Does the Design System help to avoid friction between Designers and Developers?
https://ethanmarcotte.com/wrote/the-design-systems-between-us/
Comment on Mastodon