Sunday, April 28, 2024
HomeJavaScriptInternet Weekly #80 | Stefan Judis Internet Growth

Internet Weekly #80 | Stefan Judis Internet Growth


Are you aware that with Safari 16 (launched September 12), three long-awaited browser options at the moment are cross-browser supported? Or that CSS supplies a option to model language-specific citation characters? Oooooor, why the CSS url() perform would not work with customized properties?

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

And earlier than we get began, welcome to the 91 new subscribers! I am tremendous excited to have you ever round! 👋

3k subscribers, webweekly.electronic mail and the noonies

On a private observe: so many thrilling issues occurred final week!

First, this tiny e-newsletter handed 3000 subscribers! 🎉 It is absurd that 3000 individuals obtain an electronic mail from me weekly. Thanks all for studying alongside!

Second, motivated by all this, I lastly took the time to “devsign” and arrange webweekly.electronic mail.

Screenshot of the new redesigned webweekly.email landing page

It looks like a “actual” e-newsletter now. Let me know what you concentrate on my design abilities. It additionally features a testimonials part and I am all ears if in case you have one thing to share. 😉

Tech Tutorial Teacher of the Year — A tutorial article writer that Hackers found the most useful

And lastly, the Hackernoon publication runs their yearly Noonies awards, and so they nominated me as “Tech tutorial trainer of the yr”. You probably have a second, give me an upvote.

Is not it cool that we now have the talents to create our personal little corners of the web? Purchase a site, push some HTML and do no matter you need. There are not any guidelines in your web site.

Do not you may have the time to write down long-form posts? Publish a single sentence. Do you wish to be foolish? Go for it. Are you on the lookout for a spot to play with this new CSS property? Your web site is your playground.

As Robin Rendle places it, your web site is a spot to weblog your coronary heart. I really like all the pieces about this sentence!

And whereas I am following manner too many tech blogs (💙 RSS), I really like studying unfiltered ideas. No matter you set on the market would not should be polished, distinctive, or a world-changing thought: it is your nook of the web. Publish no matter is sensible to you. Your web site is no matter you need it to be.

If you happen to’re working a weblog sharing your ideas with the world, I would love so as to add it to my RSS rotation!

One thing that made me smile this week

Sketch update dialog welcoming all the figma users

Sadly, the screenshot above is only a meme, and Sketch did not pull off such a product launch stunt.

Final week’s hottest drama: the massive participant aquires the underdog. After all, I am talking about Adobe and Figma. The design group was fairly upset.

I am not frightened or mad about this acquisition. Keep in mind when Microsoft purchased GitHub and (!) npm? Many of us threatened to go away the ecosystem, however nothing modified.

On the intense aspect, this acquisition fired up the meme manufacturing unit, and a few very humorous stuff was flying round on social media. 👇

Verify all of the memes

The lacking shorthand for logical properties

"margin: 1em 1.5em 2em 0.5em;" – Those values get applied to margin-top, margin-right, margin-bottom, and margin-left, not the logical equivalents (block-start, inline-end, block-end, and inline-start).

Do you guess on logical properties already? I’ve to confess that I barely use them, and the lacking shorthand is one motive for this. Jeremy Keith explains the downsides of those moderately new CSS properties.

Use the logical

A 💙 for Vanilla JavaScript implementations

Hot Take: As an industry we should consider pure JavaScript as an option for more projects.

How a lot code does it take to write down the favored TodoMVC instance in vanilla JavaScript? Marc Grabanski carried out it in roughly 170 traces. 👏

Marc shared many scorching takes and JavaScript methods, corresponding to consumer enter sanitization with textcontent, occasion delegation, and insertAdjacentHTML to keep away from DOM destruction.

Go the vanilla manner

The net is soooo good nowadays

Chris Coyier on stage

Internet growth modified a lot over the previous couple of years. Grids, layouts, fonts, container queries, animations… you title it. Chris Coyier gave a whirlwind discuss overlaying the most recent and biggest.

Get pleasure from the brand new

TIL — url() would not work with customized properties

.something {   /* this doesn't work */   --image: "https://jo.com/image.jpg";   background: url(var(--image)); }

Although it appears logical, I discovered you’ll be able to’t use the url() CSS perform with customized properties. Why? url() contains legacy performance that we will not take away, and it prevents customized property utilization. Fortunately, src() will assist out ultimately. Be taught extra about url() on the weblog.

Be taught in regards to the CSS legacy

A word that should exist: When someone a little too far away holds a door open for you, but that makes you have to run so as not to keep them waiting, and actually you would've found it easier to just open the door yourself.

German is my first language. It is a horrible language to be taught, however it’s pleasant that we now have many phrases that do not exist in different languages:

  • Ohrwurm (“ear worm”) — a melody of a track caught in your head for an prolonged interval.
  • Kopfkino (“head cinema”) — enjoying out a whole scene in your thoughts.
  • Verschlimmbessern — an try at enhancing one thing however making it worse.

I really like that generally a single phrase describes a whole scenario or feeling. The next web site lists phrases that needs to be included in any language.

Invent new phrases

Chrome DevTools color picker showing contrast ratios lines on the color spectrum.

What do you assume? What number of methods do the Chrome DevTools present to fiddle with distinction ratio?

Adam Argyle shares eight (!) alternative ways to examine distinction ratio! 👏

Measure your distinction ratios

The quantity enter’s downsides

1. When the number input contains an invalid value and you retrieve the value, you get a blank string. 2. Valid numbers include more than just digits (i.e,. scientific notation like the letter e). 3. The min/max attributes can easily be bypassed. 4. Different browsers accept different characters.

I am all for utilizing semantic HTML and the proper parts, however I wasn’t conscious the quantity HTML aspect has so many quirks. 😥

Be taught extra about inputs

When you create a cover letter or CV or any other document - think about the reader's user experience. This isn't an exercise in writing beautiful prose in iambic pentameter. This isn't the time to stroke your own ego. You are making it easy for the reviewer to quickly see if you meet the requirements for each section.

This is a professional tip from Terence Eden that applies to greater than writing CVs and canopy letters — optimize no matter you write for the particular person studying it.

Apply with focus

Browser support info for requestSubmit, showPicker and overscroll=behavior

The brand new Safari 16 launch comes with three new internet platform options that at the moment are cross-browser supported.

Logical OR assignment (||=) — The logical OR assignment (x ||= y) operator only assigns if x is falsy.

From the limitless information archive known as MDN…

Do you know you can reassign a falsy variable with a nifty oneliner?

a.title ||= 'title is empty.';

Now you do!

Assign logically

TIL recap – language-specific CSS quotes

blockquote::before {   content: open-quote; }  blockquote::after {   content: close-quote; }

You may love this TIL put up in case your web site contains quotes in a number of languages. Use open-quote and close-quote to show the proper citation characters in your CSS.

Quote the correct manner

Three helpful tasks to take a look at

Ok !So screenshot with a drawing that says "Hello you! it's great to see you!"

“Okay! So” is an easy-to-use app to place your ideas down on “paper” rapidly. I really like its model! 💯

Fast-draw your ideas

Manuel Matuzovic was on a talking tour currently, and his glorious discuss “Misplaced in Translation” contains this week’s quote.

We’re wrongfully downplaying the complexity of HTML because of the simplicity of its syntax.

A track that makes you cease coding

Cover: Sofa Surfers — Feel good

Couch Surfer’s “Really feel good” by some means entered my radio, and this driving guitar is simply too good.

Take heed to “Really feel good”

Writing Internet Weekly takes me roughly 5 hours each week, and I pay actual cash for sending over 3k emails. If you happen to take pleasure in it, take into account supporting me on Patreon. ♥️

Or inform your mates about it:

If you happen to’re not a subscriber, change that! 😉

And with that, care for 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