Thursday, March 28, 2024
HomeJavaScriptInternet Weekly #81 | Stefan Judis Internet Improvement

Internet Weekly #81 | Stefan Judis Internet Improvement


Are you aware that VS Code has a built-in model management system outdoors of Git? Or that SVG filters could be inlined in CSS? Or that you would be able to quickly discover all render-blocking sources through JavaScript?

All of the solutions and rather more are included on this week’s Internet Weekly. 🙈 Get pleasure from!

Welcome to the 44 new subscribers! I am tremendous excited to have you ever round! 👋

As you could know, I like making lists. 🙈

My weblog contains a number of hyperlink lists, and even my most profitable open supply mission, Tiny Helpers, is only a public checklist.

Every time I really feel one thing could possibly be helpful sooner or later, I simply have the urge to place it someplace. I would want it, proper? One might additionally say this text is simply that — a listing.

And regardless that I attempted Obsidian and Notion, none of those data base methods caught with me. I desire the great things to be accessible and public.

And whereas I am enthusiastic about hyperlink lists, I am always failing about life-enhancing lists. Life-what?

Get your work recognized: write a brag document

I like Julia Evans’ method to writing a brag doc. The concept is to maintain observe of all of your accomplishments. The compiled checklist provides you with a powerful argument when discussing your subsequent promotion.

However do you have to cease at work-related issues?

My list of lists

Mike Crittenden advocates for sustaining many different lists to navigate life.

  • A stress checklist to deal with probably the most hectic factor first on the day.
  • A gratitude checklist to understand life.
  • A suck checklist to know what to repair.
  • A present concepts checklist to create nice presents in your family members.

Sustaining all these is sort of some work and desires a powerful behavior recreation, however I am satisfied they’re price it.

And most of them do not belong to the general public, so I suppose I will arrange Notion a 3rd time now. 🤷‍♂️

One thing that made me smile this week

Tweet from Rach Smith sharing a TikTok with the first lines "when you have a bad day..."

Watch this video when you’ve a foul day, and all the pieces’s an excessive amount of.🤣

  • Are you up for a brand new VS Code theme, themes.vscode.one has loads to select from.
  • What number of methods are there to make tables accessible? w3.org lists three. Are you aware all of them?
  • OpenInTerminal is a macOS app to open your present Finder listing in your terminal or VS Code.

An online element to create SVG artwork

A CSS doodle showing some custom code and a generated maze.

This one’s wild! Yuan Chuan is constructing an online element to create SVG artwork. And that is cool by itself, however whereas being at it, why not invent a brand new language leaning on CSS syntax to attract these artsy SVG components? 🤯 Some individuals are simply superior!

Doodle away!

Comparison of a foto of a landscape with the original on the left and an applied CSS/SVG filter on the right. The filtered one has a dreamy artsy look.

After discovering Yuan’s weblog, I began looking and located this dreamy CSS/SVG blur impact. SVG filters are extremely versatile and highly effective when you perceive how they work (I do not 🙈).

Dream a bit of

Enjoyable reality: you can even inline SVG filters in your CSS.

Highlights of the Internet Almanac 2022

Tweet: .@HTTPArchive's annual state of the web report — the Web Almanac — is out!  As every year, I'll give it a read and share interesting facts below...

Yearly, the oldsters behind HTTP Archive come collectively and analyze the most-visited web sites to guage the state of the online in their Internet Almanac report.

Following my very own custom, I learn the report and shared attention-grabbing info on Twitter.

Would you’ve thought 71% of font-size declarations are nonetheless outlined in px? Me neither! Uncover extra enjoyable info on the weblog.

Analyze the state of the online

What would you do if somebody pretends to be you

So I previewed the document and it was scary. It was a document intended for someone to have a cheat sheet for an interview on how to act as me.

Connor Tumbleson wakened at some point to be taught that somebody was making use of for jobs in his title. And this individual additionally confirmed as much as the job interviews pretending to be him. He went on the thriller hunt to seek out out what was taking place, and it is a thrilling story a few huge rip-off.

Disclaimer: sadly, Connor could not resolve the puzzle fully but.

Be careful for the scams

discover all render-blocking sources

// get all resources window.performance.getEntriesByType('resource')   // only consider the blocking ones   .filter(({renderBlockingStatus}) =>        renderBlockingStatus === 'blocking')   // log their names   .forEach(({name}) => console.log(name))

Thus far, inspecting a website and discovering render-blocking sources has been difficult as a result of it’s important to know what you are on the lookout for. However there’s assist: Chrome 107 (at the moment in beta) ships with a nifty Useful resource Timing enhancement!

Uncover render-blocking

check if a font is out there

document.fonts.check('12px ui-serif');

Jim Nielsen went on the journey to learn how to check if Apple’s “San Francisco” font is out there through CSS. It is a superb learn, regardless that he needed to attain for a JavaScript answer on the finish.

Be taught extra about font help

TIL — VS Code saves all saved file variations

Example showing the VS Code timeline and that it's stores all file saving states.

Austin Gil made me rethink one among my VS Code workflows.

As an instance I work on the identical file for some time and uncover that I deleted a couple of traces of code, which might come in useful now. Sadly, they did not make it right into a git commit. What do I do?

I fastidiously hit CMD+Z to return within the native file historical past, copy the snippet, after which go ahead once more with CMD+Shift+Z.

I can not be the one one doing this, or? 🤔

This is an enormous TIL: VS Code shops all saved variations within the timeline panel and retains them throughout restarts. Whooot!

Do not press CMD+Z on a regular basis

Random MDN – The Font Loading API

FontFaceSet — The FontFaceSet interface of the CSS Font Loading API manages the loading of font-faces and querying of their download status.

Talking of JavaScript font APIs: doc.fonts can do far more than checking if a font is out there. Be taught extra about it on MDN.

Use doc.fonts

TIL recap – adverse zeros, NaN and Object.is

Object.is(-0, 0);    // false Object.is(NaN, NaN); // true

A couple of years in the past, I realized about adverse JavaScript zeros, which led me down the trail to Object.is. Be taught extra about one more JavaScript quirk on the weblog.

Evaluate with Object.is

Three helpful initiatives to take a look at

Alfredo showing a color pallette

Did you ever attempt to make a shade translucent however struggled to maintain its brightness and tone? Alfredo transforms opaque colours into their clear counterparts, retaining their look on darkish and vibrant backgrounds.

Design with transparency

REM from Frontend Mastery regarded on the historical past of JavaScript frameworks, and the article kicks off with some clever phrases.

In the event you’re on the bleeding edge, you might be normally the one bleeding.

A music that makes you cease coding

Feist - My Moon My Man (Boys Noize Remix)

This week’s observe is a remix of Feist’s “My Moon My Man”. The snarky electro observe is one among my all-time favorites.

Hearken to “My moon My man”

And that is all, mates!

Writing Internet Weekly takes me roughly 5 hours each week, and I pay actual cash for sending over 3k emails. In the event you get pleasure from it, contemplate supporting me on Patreon. ♥️

Or inform your mates about it:

In the event you’re not a subscriber, change that! 😉

And with that, deal with your self – mentally, bodily, and emotionally. I will see you subsequent time! 👋



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments