Have you ever heard of width: stretch? Do you embrace baseline widgets in your weblog? And do you optimize your websites’ community waterfall with fetchpriority?
Activate the Internet Weekly tune and discover the standard net dev goodness beneath. Get pleasure from!
Christopher listens to “Flume – SKY SKY 1.3”
I like the everyday Flume type and the start of the singing which makes me at all times smile. It by no means fails to make me glad!
Do you need to share your favourite music with the Internet Weekly neighborhood? Hit reply; there may be just one extra music left within the queue. 😱
Do you utilize CSS resets? I admit I am often simply YOLO’ing it as a result of the inconsistencies throughout browsers aren’t so unhealthy as of late. However two CSS reset posts this week taught me some issues.
First, here is Mayank advocating for utilizing a @layer reset {}.
I am not totally offered on @layer, however I wasn’t conscious that layered kinds have decrease specificity than unlayered kinds.
And second, here is Jake’s tackle the matter.
![:not([class]) { h1&, h2&, h3&, h4&, h5&, h6& { margin-block: 0.75em; line-height: 1.25; text-wrap: balance; letter-spacing: -0.05ch; } }](https://images.ctfassets.net/f20lfrunubsq/hhP633DEVr3nG9jRMLghD/db2386b62d628e45a25e0047525dfb8e/Screenshot_2024-11-04_at_18.17.06.png)
This publish consists of the standard styling preferences (all the things’s additionally included in a @reset layer). However take a look at this. 👆 This can be a sensible means of resetting kinds. Jake makes use of native CSS nesting, :not and the attribute selector to solely apply reset kinds to parts with out a outlined class. It is like a conditional CSS reset. 🤯
Do you reset your CSS? Do you’ve got favourite methods of doing issues? If that’s the case, let me know; possibly I am going to rethink adopting CSS resets.
What if I informed you you possibly can play Pacman along with your face? Effectively… Nolan constructed simply that and explains how he created it.
I am nonetheless a considerably “glad” Copilot consumer. I do not depend on it an excessive amount of and deal with it like a superb however drunk good friend. Generally beautiful, generally useful, and generally speaking absolute nonsense.
Many individuals round me use Cursor as of late. And whereas I am going to stay skeptical, Tom shared his expertise, and I’d attempt Cursor very quickly.
When you’re a Internet Weekly common, you have in all probability seen a lot of the issues included in Adam’s slide deck, nevertheless it’s nonetheless a improbable overview of what is doable in CSS as of late.
Two weeks in the past, I shared the dialogue in regards to the competing masonry requirements (grid-template-rows: masonry vs show: masonry). This week, Ahmad shared some legitimate arguments for making the brand new structure a part of CSS grid by evaluating each approaches in observe.
Make up your thoughts about masonry
Once you’re betting on customized parts, there’s at all times the query of the place to name customElements. Ought to the script along with your factor class do it? Must you register the element after loading the category?
Why not each? Nathan shared a sensible thought to make the registering versatile.
This publish jogged my memory of Mayank’s method of together with a static register methodology in your HTMLElement class. Additionally sensible!
Wowza! Would you take pleasure in getting Internet Weekly straight to your inbox?
Let’s fake I did not spend a number of hours on Sunday to beat my very own file enjoying this recreation, okay? 😅
Oliver shared a show property I have never seen earlier than — width: stretch. The stretch worth units a component’s width to its margin field. Did you ever attempt to type a button full-width to finish up doing calc(100% – 20px) (or related)? stretch does this for you. It stretches the factor to the complete width minus the utilized margin.
I am amazed but additionally confused by this; you possibly can anticipate a observe up publish hopefully subsequent week.
Roman’s writing is one in all my absolute favorites as a result of his posts usually embrace a lot CSS magic that I am blown away. Chris commented on a publish I’ve open for 5 months now that describes tips on how to make your browser automagically set a becoming font measurement simply with CSS (Chromium-only).
If you wish to be taught the nitty-gritty particulars, head to Roman’s weblog. It is filled with next-level CSS nerdiness.
Make your textual content match
Oh and btw, I up to date my blogroll. When you’ve got an RSS feed to observe I would like to put your weblog in my studying rotation.
With Chrome 130, box-decoration-break: clone made it into cross-browser territory. This publish is for you should you’re cursing kinds which are reduce off when an inline factor spans a number of strains.
There was additionally a brand new Firefox launch, and the fetchpriority HTML attribute made it into the baseline. However earlier than you slap fetchpriority="excessive" on all the things, be sure that to know the way it works.
From the limitless MDN data archive…
I am at present rebuilding the Internet Weekly touchdown web page and used popover for the primary time. It is nothing however fantastic to outline UI interactions proper in HTML.
And should you’re studying about popovers, be sure that to test Hidde’s publish on dialogs and popovers. It is lengthy however price it.
![let numbers = [ 1, 2, 3, 4 ]; delete numbers[ 1 ]; numbers.forEach((value, index) => console.log(value, index)); // 1, 0 // 3, 2 // 4, 3](https://images.ctfassets.net/f20lfrunubsq/3tW23VTdLGNwJSh3FRVJE7/6b1c20e4ccbd75c0f43f0627ea30cd8d/Screenshot_2024-11-04_at_17.33.41.png)
Do you know that JavaScript arrays can have holes? If not, you’ll find extra about this JS quirk on the weblog.
Do not put holes in your arrays
When you’re prepared for a brand new monospace font, “Coding Font” reveals you a number of fonts side-by-side. Select left, proper, left, left… and your new favourite will likely be in entrance of you.
Uncover your favourite coding font
I plugged the XOXO talks final week, and here is a beautiful quote from Molly White’s “Web3 Is Going Simply Nice” discuss.
The online is the individuals who use it.
💙 If that’s the case, possibly you need to share it with your folks in your favourite social community. Internet Weekly is at 5.4k subscribers proper now and reaching 6k can be the proper Christmas reward for me. 😊
Beloved this electronic mail? Hated this electronic mail? I need to hear about it!
When you assume one thing wants enchancment or one thing sparked some pleasure, reply to this electronic mail as a result of I need to know extra!
And with that, care for your self – mentally, bodily, and emotionally.
I am going to see you subsequent week! 👋
