Internet Weekly is again after a protracted and scorching summer time break. Let me let you know: I am excited! It was good to take a breather, however I have to admit I missed sending out your weekly dose of Frontend goodness.
And within the meantime, Internet Weekly handed 5k subscribers. It is wild that so many individuals learn alongside once I hit “ship” later. This tiny facet venture slowly appears like a “actual publication”.
đ Thanks all for studying alongside, however let’s get to it!
Are you aware which you can set different textual content for generated CSS content material? Or that CSS letter-spacing not solely provides area between characters? Or do you wrestle with debugging INP and are in search of higher instruments?
Activate the Internet Weekly tune and discover all of the solutions beneath. Take pleasure in!
Do you need to share your favourite tune with the Internet Weekly group? Hit reply; there may be another tune left within the queue. đą
In case you’re pondering of reimplementing native HTML components in JavaScript, suppose twice. Browsers present a ton of keyboard and accessibility options. Recreating all these tiny particulars is hard. And I imply actually powerful!
For instance, have a look at a hyperlink â a traditional <a href="#'> aspect. Including a click on handler to replace a URL with JS is rapidly completed. That is what a hyperlink does, proper?
What if I instructed you that hyperlinks include varied keyboard accessibility options? And to make it even more durable, these range throughout browsers and working techniques.
Eric collected all the keyboard shortcuts that work on a focused link. Do you know you possibly can obtain a goal URL with a couple of keystrokes? I did not.
All these hyperlink keyboard shortcuts remind me of the refined difference of button keyboard events fired when pressing ENTER or SPACE.
Is not it wild that urgent a button with ENTER and SPACE behaves otherwise?
So, the following time you consider reimplementing native browser performance, you higher have a superb motive for it and have a look at all the main points. Browsers present fairly dang a lot hidden options.
Let’s fake I did not play with this cookie monster for 5 minutes…
![// match all emojis except pile of poo const pattern = /[p{RGI_Emoji}--q{đŠ}]/v; pattern.test('đ') // true pattern.test('đŠ') // false](https://images.ctfassets.net/f20lfrunubsq/78OgUXSuMxvw19HP2bWL41/2a3abfc9e4ae54ee416d1b6c5bc00419/Screenshot_2024-09-01_at_19.37.16.png)
The ultimate model of the following ECMAScript spec was permitted, and PaweĹ summarized what it’s essential to know. It contains new regex and promise options, Object, and low-level language options.
Write cutting-edge JavaScript today
Max shares a core lesson of excellent UX: present suggestions near the place an motion occurred. I could not pinpoint it earlier than, however this submit made me notice what bugs me within the YouTube UI.
What occurs should you set letter-spacing: 10px on a headline? There will probably be 10px of area between the characters. Straightforward. And that is appropriate, however there may even be 10px on the outer fringe of the final character.
Juan shares some properly nerdy particulars concerning the “easy” CSS property.
CSS has change into such a powerhouse. Here is some critical eye sweet from Adam. This carousel makes use of animation-timeline (Chromium-only proper now) to use this stunning depth impact.
Chrome may even begin delivery new scroll events (scrollSnapChange and scrollSnapChanging) soon.
Wowza! Would you get pleasure from getting Web Weekly straight to your inbox?
Here is an absolute web basic: do you surprise the way it seems while you slap somebody with an eel? You are welcome.
You in all probability know that you should use :nth-child to match aspect relying on the place within the DOM. However do you know which you can additionally sneak within the of key phrase?
If that is information to you, Bramus has you lined!
In case you work together with the clipboard from JavaScript, the content material may be saved with completely different mime varieties. There’s textual content/plain, textual content/html or picture/png. However what if you wish to copy one other kind?
Alex goes on an exquisite journey, wanting into varied copy and pasting strategies.
In case you’re battling bettering perf metrics, there’s information. Chrome’s latest Canary comes with improved tooling, and Umar summarizes all the things it’s essential to know.
The inert HTML attribute went into baseline over a 12 months in the past, but it isn’t supported in React. However will probably be in React 19 â if you wish to use it in the present day, Mayank describes hacks some workarounds.
From the limitless MDN data archive…
Are you aware that there is a text-underline-position CSS property? It accepts auto, from-font, below and even left and proper.
Trick query: what is the return worth of the g perform from above? If lastly is not in your each day toolbox, you may be stunned…
With Safari 17 and Firefox 128, different textual content for generated CSS content material made it into the baseline. And whereas it is in all probability nonetheless a bit early to make use of it with out fallback, it is an enormous step ahead for hiding all these Unicode characters from assistive know-how. đŞ
In case you’re in search of handsome loading spinners, you may discover one on Whirl!
Eric shared this nice definition of various design rules whereas explaining how to size WCAG-compliant action elements properly.
Responsive Design is about designing for an unknown system. Inclusive Design is about designing for an unknown person.
đ If that’s the case, be a part of 13 different Internet Weekly readers and give back with a small monthly donation on Patreon.
And if GitHub sponsors is extra your jam, I simply set it up, too. An enormous shoutout goes to Simon â thanks for supporting Internet Weekly by way of GitHub sponsors!
Liked this electronic mail? Hated this electronic mail? I need to hear about it!
In case you suppose one thing wants enchancment or one thing sparked some pleasure, reply to this email because I want to know more!
And with that, maintain your self – mentally, bodily, and emotionally.
I will see you subsequent week! đ
