This content originally appeared on DEV Community and was authored by Florian Rappl
This year I started a new series on LinkedIn - "Advanced Links for Frontend". Each issue has 10 links to outstanding posts / articles. This bundle contains the links from the last 5 issues (issue 41 to issue 45).
I hope you enjoy this collection. Let me know in the comments which of these articles is your favorite (and why).
Issue 41
Poppin’ In (https://css-tricks.com/poppin-in/) by Geoff Graham
The popover API is great - along with the dialog API and view transitions I envision a future where we can build web apps just as we wanted to.
Rooster.js (https://github.com/Microsoft/roosterjs) by Microsoft
I just recently came across this - it's good (but not perfect). Turns it - its the one lib used for the input fields in Azure DevOps.
What's Next for ASP.NET Core and Blazor (https://visualstudiomagazine.com/Articles/2024/06/18/blazor-qa.aspx) by David Ramel
Let me guess: More convenience and performance?
The Problem of JavaScript Code Delivery (https://redmonk.com/kholterhoff/2024/06/25/the-problem-of-javascript-code-delivery/) by Kate Holterhoff
I did not have a problem beforehand, but now I have two...
Remix v2.10 (https://remix.run/docs/en/main/start/changelog) by Remix Team
The fog of war should have been there from the beginning. It's one of the reasons why SSR is done in the first place.
How to publish a JavaScript package in 2024 (https://www.youtube.com/watch?v=nl4B1asyMdI) by Luca Casonato
After playing around with jsr for a bit I have to say: Two steps forward, one step backwards. But overall the direction is sound.
New .NET 9 Templates for Blazor Hybrid, .NET MAUI (https://visualstudiomagazine.com/Articles/2024/06/20/net-9-preview-5.aspx) by David Ramel
I guess this is changed with every .NET release so I am not surprised. But some good changes ahead.
Why Google Sheets ported its calculation worker from JavaScript to WasmGC (https://web.dev/case-studies/google-sheets-wasmgc) by Michael Thomas and Thomas Steiner
WasmGC is the missing link that will enable languages with a GC to have WASM as a first-class target.
Putting an event loop in your event loop (https://encore.dev/blog/event-loops) by André Eriksson
Never thought I'd like to put an event loop inside an event loop, but now I know why.
New JavaScript Set methods (https://developer.mozilla.org/en-US/blog/javascript-set-methods/) by Brian Smith
Finally I can make full Venn diagrams just with in-built methods. Wonderful!
Issue 42
Enhancing The New York Times Web Performance with React 18 (https://open.nytimes.com/enhancing-the-new-york-times-web-performance-with-react-18-d6f91a7c5af8) by The NYT Open Team
I'm surprised it was not "with Svelte". Still, good article - great suggestions.
The 3 Types of CSS Utility Classes (https://www.jameskerr.blog/posts/3-types-of-css-utility-classes/) by James Kerr
Luckily, this one is not about Tailwind. Thanks James!
Exploring Randomness In JavaScript (https://www.bennadel.com/blog/4669-exploring-randomness-in-javascript.htm) by Ben Nadel
TL;DR: For practical purposes stay at Math.random, but for security needs use crypto.
The many faces of undefined in JavaScript (https://mortoray.com/the-many-faces-of-undefined-in-javascript/) by Edaqa Mortoray
Honestly, I like undefined - but I don't like null.
Web Performance Guide (https://www.speedcurve.com/web-performance-guide/) by Steve Souders et al.
This is a wonderful guide with all concepts and recommendations aggregated.
ECMAScript 2024 JavaScript standard approved (https://www.iwnfoworld.com/article/2514147/ecmascript-2024-javascript-standard-approved.html) by Paul Krill
I promise with resolvers that we wait async for unicode strings to be well formed, just to group by regular expressions with advanced features.
A webassembly sandbox to safely execute Javascript inside of Javascript/Typescript applications (https://sebastianwessel.github.io/quickjs/) by Sebastian Wessel
We've really come full circle - but this one fulfills a real need in my opinion. Fantastic!
How we tamed Node.js event loop lag: a deepdive (https://trigger.dev/blog/event-loop-lag) by Eric Allam
I never saw the issue, but now I know how I could handle it.
Drop-in semantic styling library in pure CSS (https://matcha.mizu.sh/) by Simon Lecoq
These semantic styling libraries always give me such a desire to use them - but once I use them I just feel too limited. Maybe that's just me.
State-of-the-art JavaScript utility library (https://es-toolkit.slash.page) by Sojin Park
This is a actually fantastic project - awesome job!
Issue 43
Batman-Comic.CSS (https://dev.to/alvaromontoro/batman-comiccss-hh1) by @alvaromontoro
Useful? A bit. Magical? Definitely! Would be even better with Star Trek characters?! You bet!
code-pen Web Component (https://darn.es/code-pen-web-component/) by David Darnes
Just allow to play with anything.
vitest 2.0.0 (https://github.com/vitest-dev/vitest/releases/tag/v2.0.0) by Vitest Team
If you haven't heard - vitest is ideal replacement for Jest.
Responsive bar charts in HTML and CSS (https://9elements.com/blog/responsive-bar-charts-in-html-and-css/) by Mathias Schäfer
Grid to the rescue! Really love this!
How To Improve INP: Yield Patterns (https://kurtextrem.de/posts/improve-inp) by Jacob Groß
Outstanding write-up - super underrated topic. Must read!
The Magic of Clip Path (https://emilkowal.ski/ui/the-magic-of-clip-path) by Emil Kowalski
I was sceptical first, but the image comparison example totally sold me. Magical!
How to hack your Google Lighthouse scores in 2024 (https://blog.sentry.io/how-to-hack-your-google-lighthouse-scores-in-2024/) by Salma Alam-Naylor
It's all about knowing your hacks I guess.
Sneaky React Memory Leaks: How the React compiler won't save you (https://schiener.io/2024-07-07/react-closures-compiler) by Kevin Schiener
Bottom line: Stupid code will remain stupid code - independent if it went through a compiler or not.
Deno 1.45: Workspace and Monorepo Support (https://deno.com/blog/v1.45) by Deno Team
And with this one we are another step closer to be a suitable Node.js replacement.
@property: Next-gen CSS variables now with universal browser support (https://web.dev/blog/at-property-baseline) by Una Kravets
Actually, this is the first article where I see the value of the @property syntax vs plain variables.
Issue 44
How Zustand Was Born (https://blog.axlight.com/posts/how-zustand-was-born) by @dai_shi
Well, it was all a bit different than I imagined, but I'm happy how it all worked out.
CSS One-Liners to Improve (Almost) Every Project (https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project) by Alvaro Montoro
This should be on your radar - once any kind of page is "finished" look at this list and apply what could be beneficial. Personally, I think wrapping the headings in a more balanced way should be on by default.
Fine-grained Markdown (https://v1.codehike.org/blog/fine-grained-markdown) by Rodrigo Pombo
I get the point, but personally I am not sold. Would love to hear your opinion.
Netlify and Astro are partnering! (https://www.netlify.com/blog/netlify-astro-are-partnering/) by Matt Biilmann
I was waiting for this to happen. My only hope is that Astro remains quite open to run pretty much everywhere.
Get the screen width & height without JavaScript (https://css-tip.com/screen-dimension/) by Temani Afif
This is the greatest most useless thing I've seen in a while. Super creative. But why and when would I need it?
Hono v4.5 (https://github.com/honojs/hono/releases/tag/v4.5.0) by Yusuke Wada
Some great changes in there. One thing I love is that they actually come from the future and already have React 19 compat in there (granted, it seems pretty much sealed right now - so the likelihood of changes is low).
Intent to Ship: CSS interpolate-size property and calc-size() function (https://groups.google.com/a/chromium.org/g/blink-dev/c/FjyMSSaSPEg/m/yzlLscFKBQAJ) by David Baron
Long story short: You can finally animate to height: auto. Why do you care? Because this will remove another class of unnecessary containers and hacks, just to get your accordions animating nicely.
So you think you know box shadows? (https://dgerrells.com/blog/how-not-to-use-box-shadows) by David Gerrells
I never said I know box shadows, but looking at the article I am quite sure that I have no clue what David is talking about. But the Star Trek block-image got me. Wonderful work!
A TypeScripter's Take on Zig (https://effectivetypescript.com/2024/07/17/advent2023-zig/) by Dan Vanderkam
Zig is one of those things I follow even though I am not using it. Maybe one of these days I find the time...
How to make complex Chrome extensions: a zero gravity guide (https://evilmartians.com/chronicles/how-to-make-complex-chrome-plugins-a-zero-gravity-guide) by Nina Torgunakova and Travis Turner
I think there is a bit more to it than described, but the article goes into some (more exotic but potentially crucial) things such as background workers, secure storage, error reporting - really worth reading if you plan to make a manifest v3 extension.
Issue 45
Build a team-based task manager with Next.js, Neon, and Clerk (https://clerk.com/blog/build-a-team-based-task-manager-with-organizations) by Brian Morrison II
This is literally the Todo MVC of RBAC. Actually a great one!
CSS Grid Areas (https://ishadeed.com/article/css-grid-area/) by Ahmad Shadeed
I have to admit that at this point Ahmad is my favorite author for these CSS articles. Superb job!
A guide to reading and writing Node.js streams (https://blog.platformatic.dev/a-guide-to-reading-and-writing-nodejs-streams) by Matteo Collina
Who if not Matteo can write such a guide? Covers pretty much all the essentials you need to know!
Embracing Functional CSS: Have we moved on? (https://www.browserlondon.com/blog/2024/07/15/embracing-functional-css-have-we-moved-on/) by Oliver Creswell
Alright, so now the Tailwind-category of CSS frameworks is called functional CSS (I am not yet sure why its called like that, but I'm fine with it).
The Pitfalls of In-App Browsers (https://frontendmasters.com/blog/the-pitfalls-of-in-app-browsers/) by Paul Esch-Laurent
Having worked on mobile apps that went through the exact same scenarios as described I can only describe my pain of not being able to send back the article 7 years when I needed it. Well done!
Node.js adds support for TypeScript (https://github.com/nodejs/node/pull/53725) by Marco Ippolito
It's too early to pop the champagne (experimental flags tend to never vanish...) but this is a massive step forward. Called it!
Providing Type Definitions for CSS with @property (https://moderncss.dev/providing-type-definitions-for-css-with-at-property/) by Stephanie Eckles
The at-property is now becoming a hot thing. We've seen some (was it 3 or 4) articles mentioned in this series beforehand.
getComputedStyle: The good, the bad and the ugly parts (https://dev.to/nikneym/getcomputedstyle-the-good-the-bad-and-the-ugly-parts-1l34) by @nikneym
It's actually a good article for an underrated topic. As I'm working with this directly I can only tell you that you are better off if you never need it (getComputedStyle and similar functions).
Going flat with ESLint (https://changelog.com/jsparty/332) with Josh Goldberg
Really interesting discussion - a good pod cast episode that makes long train rides actually way more interesting.
A new path for Privacy Sandbox on the web (https://privacysandbox.com/news/privacy-sandbox-update/) by Anthony Chavez
Third-party cookies will be a thing of the past. The privacy sandbox is Google's approach of providing privacy without losing ad revenue. A delicate dance on a knife's edge.
Conclusion
These are all outstanding articles by masterful authors. I enjoyed reading them all - I hope you did find something in there, too.
👉 Follow me on LinkedIn, Twitter, or here for more to come.
🙏 Thanks to all the authors and contributors for their hard work!
This content originally appeared on DEV Community and was authored by Florian Rappl
Florian Rappl | Sciencx (2024-07-30T15:09:43+00:00) 🧠 50 Awesome WebDev Articles. Retrieved from https://www.scien.cx/2024/07/30/%f0%9f%a7%a0-50-awesome-webdev-articles/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.