Happy Friday! This week's roundup brings posts about SPA, Svelte CLI, strict equality operator and the exciting adventure of Monorepo, which has a size of 178GB. For CSS World, there is a great deep dive (twice) into Container Queries and a great post about how browsers render a website.
https://rodrigoluglio.github.io/vscode-theme-generator/
Excellent explanation of all and in between SPA, SSR, CSR, MPA, and what are their good/bad parts.
https://jakelazaroff.com/words/whats-a-single-page-app
https://svelte.dev/blog/sv-the-svelte-cli
https://cloudfour.com/thinks/generating-random-mazes-with-javascript/
ApexCharts uses the SVG.js library as its main engine, and it was long overdue for an update. So, this version does exactly that.
https://github.com/apexcharts/apexcharts.js/releases
https://www.jonathancreamer.com/how-we-shrunk-our-git-repo-size-by-94-percent/
When comparing two values in JavaScript, it is a good practice to use === instead of ==, and for good reason. But how big is that reason? Below is the implemented function that does exactly that and shows all the necessary checks to get this to work.
https://evanhahn.com/re-implementing-javascript-double-equals-in-javascript/
Visualise dependencies.
https://github.com/sverweij/dependency-cruiser
https://css-tricks.com/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations/
Another fantastic post for Josh. Despite what Josh says about usage, it seems like the trend is currently up, according to Google Chrome stats. I find CQs very helpful for styling components where I have no control over how clients will use them. In any case, an interesting point is that CQs were initially not possible to implement as child el changes would impact parent el, which would cause a loop.
https://www.joshwcomeau.com/css/container-queries-introduction/
CQ is already very powerful. However, if you add quantity queries with has() and grid, it gives unexpected power to style any component with pixel perfection (almost).
https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/
Very interesting use of CSS custom properties to achieve that nice animated scroll effect.
https://frontendmasters.com/blog/scroll-driven-sections/
https://jakelazaroff.com/words/my-modern-css-reset/
https://css-tricks.com/come-to-the-light-dark-side/
Very detailed story, and when you put it that way, it makes you appreciate websites which open <300ms
https://abhisaha.com/blog/exploring-browser-rendering-process
Comment on Mastodon