Monday, April 22, 2024
HomeJavaScriptNet Weekly #101 | Stefan Judis Net Growth

Net Weekly #101 | Stefan Judis Net Growth


Do you wish to meet up with all the brand new CSS options? After which wish to set up a technique to make use of them in manufacturing? Or make a fantastic impression whenever you onboard a brand new job?

All of the solutions and way more are included on this week’s Net Weekly!

Our buddies at Google launched a brand new WebDev time period at Google.io — “the baseline”. Normally, I am no fan of recent tech lingo (MPA anybody? 😅), however I can get behind this one.

The baseline describes options supported within the present and former variations of all main browsers (Chrome, Edge, Firefox, and Safari). In order that it replaces the mouthful “function ABC is cross-browser supported”.

Grid entry on MDN showing that the feature is in the baseline.

And the time period is not solely a Google effort however a collaboration of Apple, Microsoft, and Mozilla. Prepare as a result of we are able to anticipate many new baseline widgets like these already on MDN. Nice work!

Rachel Andrew next to a slide presenting at Google.io.

If you wish to study extra in regards to the baseline, Rachel Andrew provides extra particulars in her Google.io session. 👏

One thing that made me smile this week

Gather up the news and get ready to write, share what happened, try to make it bright. What's the best way to deliver the story. Spread the knowledge, make it worth the glory.

To be honest, this generated electro tune about writing Net Weekly is pretty poor, however I recognize the bot’s try. 😅

Take heed to Net Weekly electro

function showLoading(promise) {   navigation.addEventListener(     'navigate',     (event) => {       event.intercept({         scroll: 'manual',         handler: () => promise,       })     },     { once: true }   )   return navigation.navigate(location.href).finished }  // show browser loading UI showLoading(new Promise((r) => setTimeout(r, 1500)))

Here is a helpful snippet from the way forward for JavaScript navigations (Chromium-only proper now) to show the native browser loading spinner. 💯

It’s going to be most essential for framework authors, however hey—it is cool, however.

Use native UI

phind – AI seek for builders

phind — The AI search engine for developers.

Disclaimer: I’ve used phind just for just a few code questions, however I preferred that it exhibits the sources resulting in a solution.

Let’s examine if I will undertake it for code-related “googling”.

Let the robots seek for you

 The problem with sticky menus and what to do instead

The next is perhaps a controversial one. Adam Silver shared why sticky navs harm person expertise. I discovered myself nodding alongside whereas studying.

Keep away from sticky navs

TIL: There’s a regular to disable terminal colours

Command-line software which adds ANSI color to its output by default should check for a NO_COLOR environment variable that, when present and not an empty string (regardless of its value), prevents the addition of ANSI color.

Do you know there’s a regular to disable shade codes in CLI instruments? Now you do, and it is outlined at no-color.org.

I simply love all these single-purpose domains! 💙

Respect person preferences

The great bizarre net – Animated Drawings

A man dancing next to animated drawings.

I plugged Jesse Smith’s “Animated Drawings” undertaking earlier than, nevertheless it’s too good to not share it once more. If you wish to animate your children’ drawings, this device is for you!

Animate drawings

What are your favourite web corners? Ship them my method, and I will embody them in Net Weekly!

How I Landed My Dream Job – That Didn’t Exist

Dear hiring team, if you read my CV before reading this cover letter, you probably already know that I'm overqualified for this position with over 5 years of experience in People Ops. Even so, I wanted to apply and see if you'd be open for a profile like mine.

Kaylie Boogaerts, our Director of Folks at Checkly, advised me her story of getting the job over espresso the opposite day, and it is a good one. Why? She utilized and later signed a job that wasn’t even open. 👏

How did she do it? She was daring, ready, and knew what she was on the lookout for. Her weblog publish contains tons of job-hunting recommendation!

Get your dream job

The one factor to do when onboarding a brand new job

In the final 2 minutes: ask who else you should talk to. Write down every name they give you.

And in the event you land your new job, here is a trick that may make you stand out.

I’ve began just a few new jobs in my profession, and onboarding practices differ loads! If issues are well-defined, you may get a listing of individuals you need to discuss to. However you possibly can stage issues up! Preserve monitor of all of the names dropped in conversations and introduce your self independently. You will be stunned how a lot this observe helps!

Andrew Bosworth describes a extra formalized onboarding method that he calls the profession chilly begin algorithm. It is value testing not solely whenever you’re onboarding!

Give your self a head begin

A slide titled "I/O 2023 CSS & UI"

Quick’n’candy: do you wish to meet up with all the brand new CSS options? The Chrome devrels put collectively a listing with all the things you have to know!

Use the brand new and glossy

Fashionable CSS function testing

Testing Feature Support for Modern CSS

And to hold on: suppose you wish to reside on the brand new reducing CSS edge; Stephanie Eckles wrote a deep dive explaining check new CSS options earlier than utilizing them.

And if you wish to keep away from discovering out the assist, Stephanie additionally launched a brand new JS library to do it for you!

Check CSS function assist

6 CSS snippets shining in 2023

.panel {   container: layers-panel / inline-size; }  .card {   padding: 1rem; }  @container layers-panel (min-width: 20rem) {   .card {     padding: 2rem;   } }

Talking of CSS—Adam Argyle shared helpful baseline CSS snippets. When you aren’t utilizing container queries, scroll snapping, or logical properties but, this publish is for you!

Use fashionable CSS

Random MDN – initial-letter

Paragraphs with bigger initial letters.

From the limitless MDN information archive…

Do you know that initial-letter: 3 2 is legitimate CSS? It really works in all browsers however Firefox, and you should use it to boost your paragraphs!

Elevate the preliminary letter

TIL recap – picture lazy loading will depend on JavaScript execution

Why doesn't lazy load work without JS? There's only one reason why we can't have nice things: of course, it's for tracking prevention.

Here is a stunning reality from the HTML spec: loading=lazy will depend on JavaScript execution. What? Yeah, I’ve thought the identical.

Be taught in regards to the lazy-loading enjoyable reality

Three worthwhile tasks to take a look at

Uptime 99.99% resulting in 52m yearly downtime.

Suppose your manufacturing API guarantees an uptime of 99.99%; how lengthy can or not it’s down through the yr? It is 52 minutes. 😲 uptime.is is a helpful device for evaluating SLAs.

Be sure about downtimes

Amelia Wattenberger shared that she would not assume all these chat / LLM interfaces are the longer term. Why? They do not information the person and the outcomes lack course. I agree. 💯

Good instruments make it clear how they need to be used.

A tune that makes you cease coding

Fatboy Slim cover showing a boy with wings wearing a shirt "I'm #1 so why try harder"

This week’s monitor is Fatboy Slim’s legendary “Proper Right here Proper Now”. There’s no more to say than that it is one among these tracks made for the ages!

Take heed to “Proper Right here Proper Now”

Writing Net Weekly takes me roughly 5 hours each week, and I pay actual cash for sending over 3.7k emails. When you get pleasure from it, take into account supporting me on Patreon. ♥️

Or inform your pals about it:

When you’re not a subscriber, change that! 😉

And with that, deal with your self – mentally, bodily, and emotionally.

I will see you subsequent week! 👋

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments