Saturday, February 15, 2025
HomeJavaScriptNet Weekly #139 | Stefan Judis Net Improvement

Net Weekly #139 | Stefan Judis Net Improvement


Guten Tag! Guten Tag! 👋

How large should motion parts be to be WCAG-compliant? What is the distinction between CSS :host, :host() and :host-content()? And do you have to undertake multi-keyword show values like show: block grid?

Activate the Net Weekly tune and discover all of the solutions under. Take pleasure in!

Do you need to share your favourite track with the Net Weekly neighborhood? Hit reply; 🚨 there’s just one extra track left within the queue.

Fast announcement: Net Weekly will take a 3-4 weeks break. 🏝️

I obtained into freelance and self-employment in the beginning of the yr. I really like working with a number of clients, and the enterprise goes very properly, too. And but, I nonetheless really feel extra drained each week proper now and should catch my breath for a second to care for myself.

I want you a splendid summer season (if it is summer season the place you’re), and I will speak to you once more in mid-August!

Here is Temani explaining that typed CSS variables (@property) are simpler to debug, assist default values and will be validated. Good things!

@property --color {   syntax: 'color';   inherits: true;   initial-value: #586de7;  }

However @property appears so verbose when defining theme and international variables. For a “native” property, the verbose syntax would not hassle me, however once I should outline 20, 30, 40 of those, that is a number of code to put in writing.

May there be a shorter approach to create typed CSS properties in bulk? I do not know.

Will I now drop all my short-and-tight :root props in favor of long-but-typed @property properties? I am uncertain and the lazy man in me is not satisfied both.

What’s your take?

One thing that made me smile this week

Browser showing the URL bar including "very.large.horse" next to a horse.

There’s nothing to see right here however a horse that grows while you add subdomains to the massive.horse area.

Bump up the horse

WCAG-compliant component dimension

To element sizes 24 by 24 pixels (not WCAG conformant) and 44 by 44 pixels (WCAG conformant)

Eric shared all the pieces you should know concerning the WCAG success standards “2.5.8 Goal Dimension (Minimal)” and “2.5.5 Goal Dimension (enhanced)”.

It is a gorgeous learn explaining why component goal dimension issues.

The submit additionally included this gem. 💯

Responsive Design is about designing for an unknown gadget. Inclusive Design is about designing for an unknown person.

Preserve issues accessible

Underrated CSS grid options

Interactive grid demo showing how to position elements using `grid-area`

Template areas are by far my favourite CSS grid characteristic. Should you’re not utilizing them right this moment, you are lacking out. However don’t fret; Ahmad revealed an in-depth information with many interactive demos to clarify the ideas.

Use grid’s to its full potential

The present state of invokers

Example HTML including the `commandfor` and `command` attributes.

Think about a world the place you would write some HTML and declaratively outline UI interactions. And I am not solely speaking about opening a popover (as a result of that is already attainable). I am speaking about easy interactions like beginning a video or making a component go fullscreen — to implement these right this moment, we nonetheless want to put in writing customized JavaScript.

However there’s work carried out behind the scenes, and I am unable to await invokers to reach.

Peak into the longer term

The right way to stow your dotfiles

Visualisation of dotfiles living in home and a `dotfiles` directory.

Three weeks in the past, I shared tips on how to use a naked Git repo to handle your dotfiles. Net Weekly reader Gabriel pointed me in direction of GNU Stow as a substitute method.

It is one other useful approach to deal with all these config recordsdata.

Stow your configs

Thanks, Gabriel! 🫵

You are midway by!

Wowza! Would you take pleasure in getting Net Weekly straight to your inbox?

The fantastic bizarre internet – Draw an iceberg…

Iceberger — Draw an iceberg and see how it will float.

… and see the way it will float.

Visualize physics

Browser actions to make sure your privateness

Private browsing 2.0

Are you aware that (some) browsers supply options to change URLs, robotically block scripts and restrict cookie lifetime values to strengthen your on-line privateness?

As at all times, Apple positions itself because the privateness savior, and this submit explains what’s included in “Non-public Shopping 2.0”.

Be in non-public

Nasty in-app browser habits

Because in-app browsers are embedded within a native mobile app, the app developer has control & visibility into the in-app browsing activity. it extends into being able to inject code into the in-app browser which is a major privacy&security concern.

Are you aware that everytime you open an in-app browser from a local app, it will probably inject customized JavaScript into the location you are ? Yep, it is wild. If you wish to study extra, Paul describes the present state of in-app browser affairs.

Perceive in-app browsers

Wait, what's the difference between :host, :host(), and :host-context()?!

Okay, I used to be shocked to seek out out that there are three totally different host styling choices as of late. Andrico explains the variations.

Fashion the host

Do you write in depth commit messages?

An extensive git commit message spanning multiple lines.

Hand to the guts: do you write in depth commit messages past the frequent one-liner?

It is humorous as a result of I can spend fairly a while drafting an ideal PR description to ease the code assessment course of. However from a Git documentation standpoint, it is a wasted effort as a result of no person will navigate to GitHub to have a look at previous PRs. Or does somebody do this? And what when you transfer away from GitHub?

Jamie writes in depth commit messages, and I just like the method of utilizing Git commit templates to ease into good commit conventions.

Commit extensively

Random MDN – multi-keyword show values

A mapping of single- and multi-keyword display properties (e.g. "block" is "block flow").

From the limitless MDN information archive…

Are you aware that show: block is just about the identical as show: block circulate? Or that show: grid is brief for show: block grid?

Yep, that is proper — multi-keyword show values are a factor, and even MDN would not present compatibility information on the docs web page; the syntax is browser-browser supported as of late.

Be particular when displaying

TIL recap – scaling stroke-width

Example showing how to disable the scaling of stroke width

Should you’re scaling SVG parts, you might need seen that path widths scale with the component’s dimension. Should you make your component twice as broad, the stroke width will probably be doubled, too. All of your sharp outlines might be tousled then.

However guess what? You may flip off the SVG stroke width scaling!

Preserve the stroke width

Interop dashboards from beginning and mid 2024. Interop increased from 65 to 75.

Rachel reported on the present state of this yr’s interop initiative.

Should you’re unaware of Interop, it’s a collaboration between browser distributors and different good people to outline new options that ought to work throughout all browsers. Everyone then works in direction of delivery the brand new options in a given yr. And it is going fairly properly as a result of new browser options land in all engines briefly time frames as of late.

This yr, Interop 2024 consists of @property and relative coloration syntax (each reached the baseline final week), but additionally styleable scrollbars, popover, font-size-adjust and CSS text-wrap. The present state seems to be promising, and hopefully, we are able to safely use all these new options throughout browsers by the tip of the yr.

Should you’re curious — poke across the interop dashboard. It is nice for studying the place we stand and discovering options within the works.

Three helpful tasks to take a look at

Squoosh app showing the dialog "drop OR paste"

This helper is not new, however I exploit it every day at work. Squoosh is a high-quality web site and progressive internet app that helps optimize photos and squeeze (learn squoosh) the final bytes out of them.

Avoid wasting bytes

Did you study one thing from this subject?

💙 In that case, be part of 14 different Net Weekly readers and assist me with a small month-to-month donation.

I could not agree extra with Sophia.

Nice cooks style their meals, and nice software program engineers assessment their changesets.

Beloved this electronic mail? Hated this electronic mail? I need to hear about it!

Should 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 will see you subsequent week! 👋

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments