Are you conscious that the ::details-content pseudo-element is coming to the online? Or have you ever used the Image in Image API already? And are you aware that emojis have completely different meanings on this planet?
Activate the Internet Weekly tune and discover all of the solutions beneath. Take pleasure in!
Do you need to share your favourite music with the Internet Weekly group? Hit reply; there may be just one extra music left within the queue.
This week, I stumbled upon Antoine’s portfolio website (disclaimer: there’s a whole lot of movement), and wow! What. A. Magnificence!
I might love to find extra #badass developer portfolios. In the event you can consider one, please ship it my manner. Perhaps we will accumulate and share a number of subsequent week!
Use at your personal threat: these emojis’ passive-aggressiveness reached a brand new degree.
Kudos to Phil, who shared this gem on Bluesky.
I exploit Git’s bisect command solely every year, nevertheless it’s all the time magical if I do. In the event you uncover a brand new bug or a regression, you should use the command to carry out a binary search over a commit vary. Git will then ask you if the commit is nice or dangerous, and you will find the defective commit very quickly!
Discover out when one thing broke
Have you ever used the Image-in-Image API already? It is a pretty new API supported in Chromium and Webkit that permits you to come out floating home windows whereas staying on prime of the opposite home windows. It is an ideal net addition for video calls and streaming websites. And it nearly screams for wildly artistic demos — have you ever seen any?
Josh printed a brand new information on container queries, and whereas it begins sluggish, the part on CSS containment is simply nice.
Be taught extra about container queries
If you wish to study much more, Roma is on a every day running a blog journey and has collected extra container question articles.
Due to Ahmad, I now perceive once you would use overflow: clip (I feel). If you have not used this overflow worth but, this text is properly value your time!
Wowza! Would you get pleasure from getting Internet Weekly straight to your inbox?
Are you able to see it? There? Proper within the center?
Yeah, that is a screenshot of my weblog listed on onemillionscreenshots. The positioning lists, you guessed it, a million screenshots and tries to group all of the websites.
It is, after all, a little bit of promo for the underlying screenshot API, however I nonetheless love poking across the net this fashion.
Kevin shared cutting-edge CSS options to animate particulars parts utilizing interpolate-size (Chromium-only), ::details-content (shipped in final Chrome), and transition-behavior: allow-discrete (supported in trendy browsers).
And also you may now say, “Maintain on, Stefan! I am unable to use all this but!” And that may be appropriate, however I agree with Kevin’s take. All of the practices proven within the video will be handled as progressive enhancement, and if a particulars component is not animating, I do not assume it is a large deal.
Our buddies on the BBC went on a thriller treasure hunt for a bug that solely appeared on their website when it was on a second monitor.
The rationale was a not well-known reality of a mouse occasion’s screenX property.
In a multiscreen setting, screens aligned horizontally can be handled as a single machine, and so the vary of the screenX worth will enhance to the mixed width of the screens.
Nicely… at present I realized!
In the event you’re inquisitive about how they mounted this conduct on the BBC, Josh additionally posted a follow-up explaining how they resolved this mystical discovery!
Adam and Bramus from the Chrome DevRels have been busy producing high-quality video supplies. I have not had the time to look at them totally, however figuring out each of them, I am positive the movies are chefkiss.
Eric described the completely different sorts of focus, and it was a terrific lesson on utilizing tabindex accurately.
Have you learnt that the ✌️ signal does not stand for victory or peace globally? In Australia, it is the counterpart to giving somebody the center finger. Tremendous fascinating!
Eric lists some “icon enjoyable details”.
On that notice, in case you marvel why the “rising chart” emoji comes with a crimson line, you’ll be able to learn extra about it on the weblog.
From the limitless MDN data archive…
I really like some good outdated Unicode nerdery. JavaScript code factors are UTF-16 encoded. Some characters, like Emojis, have such a excessive code level quantity that they are represented with two code factors (so-called surrogate pairs).
'a'.size;
'🫣'.size;
Issues grow to be tough once you manipulate or cut up these pairs, and you find yourself having lone surrogates in your strings. Some strategies like encodeURI will throw and reject your malformed strings.
const someString = '🫣'[0];
encodeURI(someString);
New Javascript strategies may also help out right here.
const someString = '🫣'[0];
someString.isWellFormed();
someString.toWellFormed();
encodeURI(someString.toWellFormed());
toWellFormed takes these lone surrogates and replaces them with the Unicode alternative character “�”. Good to know!
I realized that fetch helps a keepalive possibility so to use it as a versatile sendBeacon alternative. And the most effective factor is that it will enter the baseline quickly!
Getting ready in your subsequent job interview is anxious and intimidating. The GreatFrontEnd prepares you to shine, and so they’re at the moment operating a Black Friday sale that’s 30% off. Test it out!
Everyone knows that operating npm set up pulls in tens of millions of traces of code. But, I like a challenge’s dependencies. pkg-graph is one other one in every of these bundle visualizers, and I really like you can management the dependency depth. This manner, you’ll be able to examine the direct dependencies.
Manuel, who runs Individuals & Blogs, shared this little gem in a publish about social media. And it is so true!
Internet Weekly is a small publication, and I child you not; each reply or tiny gesture makes my day. And although I’d nonetheless owe a few of you a solution (sorry, Carlos 😅), each message appears like a real connection to me.
I could not think about how it will be if I might obtained a whole bunch of emails after sending out Internet Weekly. 🫣
Human connections can solely occur at a small scale and low velocity.
💙 In that case, be a part of 16 different Internet Weekly readers and provides again with a small month-to-month donation on Patreon or GitHub Sponsors.
An enormous thanks goes to George for sponsoring Internet Weekly on a beneficiant tier for a whole 12 months. Thanks buddy!
Beloved this electronic mail? Hated this electronic mail? I need to hear about it!
In the event 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, handle your self – mentally, bodily, and emotionally.
I am going to see you subsequent week! 👋
