You don’t necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let’s bring it to mobile and use the phone itself rather than a cursor.
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn’t get cut off.
I can easily imagine a job interview question being “What’s the difference between TypeScript and Zod and in what circumstances do you need each?”
They are both type validation libraries. Would you ever need both? The short answer is that TypeScript is great but can’t help you at runtime, where you might get data from an API or user input. Zod can help there.
Hassan Djirdeh has a good article Zod + TypeScript: Schema Validation Made Easy. Worth grokking for sure.
Holy cow there are a lot of JavaScript engines. These are the big ones like V8 that Chrome uses or JavaScriptCore that Safari uses, but also purposefully lightweight engines like QuickJS for “embedding”.
(I’m also just realizing that domains like this, zoo.js.org, anybody can have because js.org is literally for JavaScript-based projects and you can subdomain off it. There are tons of them, like rising stars).
Huh. Today I learned (from Alex MacArthur): you can access the current <script> element from a script (if it’s not type="module") with document.currentScript. Meaning you can put configuration data as attributes on it and pluck them off and use them. Like:
<h1 id="setMePlease"></h1>
<script data-some-value="foo">
const scriptData = document.currentScript.dataset;
setMePlease.textContent = scriptData.someValue;
</script>Code language: HTML, XML (xml)React Hooks have been around for years, but most codebases still use them the same way: a bit of
useState, an overworkeduseEffect, and a lot of patterns that get copy-pasted without much thought. […]
Before reaching for
useEffect, ask yourself:
- Is this driven by something external (network, DOM, subscriptions)?
- Or can I compute this during render?
If it’s the latter, tools like
useMemo,useCallback, or framework-provided primitives will make your component a lot less fragile.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.