Saturday, December 2, 2023
HomeJavaScriptNet Weekly #114 | Stefan Judis Net Improvement

Net Weekly #114 | Stefan Judis Net Improvement

Do your React useEffect hooks embody race circumstances? Have you ever heard of the perspective() CSS operate? Would you employ Subsequent.js?

This week’s Net Weekly consists of all of the solutions and rather more. Take pleasure in!

With macOS Sonoma, it is doable to “set up” net pages as Safari net apps with the brand new “add to dock” characteristic.

Safari "add to dock" menu item under "file"

I exploit Chrome (for work) and Firefox (for personal), so why would I care? I exploit Gmail, Google Calendar and Twitter as standalone Chrome apps to get them out of my tab bar. However they’ve some annoyances.

Chrome install app dialog.

I gave “add to dock” a spin, and I am going to keep on with it. This is why:

  1. I can spin up an put in net app with out kicking off the bottom browser. If I set up a Safari net app, it is its personal factor. It has its personal cookies, historical past and may be opened independently. It all the time bugged me {that a} Chrome app spins up Chrome, too.
  2. As stated, I exploit a number of browsers and Picky because the default browser to determine which browser ought to show a brand new hyperlink. This by no means labored in Chrome net apps. Hyperlinks are all the time opened in Chrome as a result of it appears to be only a fancy Chrome window. In Safari net apps, I can open hyperlinks in Firefox, Chrome, or no matter I like. Great.

What are the downsides? Extensions aren’t working in Safari Net Apps. Bummer. Additionally, badging would not appear to work to indicate unread notifications or an indicator that one thing occurred.

Will I keep on with Safari Net Apps for now? Yep, and I hope all these too-long ignored PWA options will land in Safari finally.

One thing that made me smile this week

Screenshot of MySpace Tom

Do you bear in mind MySpace Tom? Or the Million Greenback web site that bought pixels for promoting? Neal Agarwal takes you by the hand by means of web historical past!

Go to the traditional net

Strikethrough accessibility

Two ecommerce products with strikethrough text

How do you make strikethrough textual content accessible for all? It is difficult.

Make issues accessible

useEffect race circumstances

Example showing how to prevent a 'useEffect' race condition

This is a fast reminder that useEffect is open to race circumstances. It is an older put up, however Max Rozen explains the way to safe your React uncomfortable side effects.

Do not run into the race

After studying Max’s put up, I began studying the React docs, and so they’re wonderful as of late. Listed here are two nice pages to be taught extra or refresh your React skillz.

If we want that sort of longevity, we need to avoid dependencies that we don’t control and stick to standards that we know won’t break. If we want our work to be accessible in five or ten or even 20 years, we need to use the web with no layers in between.

Instruments and frameworks come and go. Jake Lazaroff makes the case for net elements as an answer that is there to remain.🌶️

Guess on the platform

A Couple of New CSS functions I'd never heard of

I’ve no thought how Chris retains observe of all issues CSS, however apparently, light-dark(), xywh(), spherical() and perspective() are a factor in CSS land.

Degree up your CSS

The great bizarre net – World Inhabitants Stats

Do you think you belong to the young or old? Your the 4,828,831,991 person alive on the planet. This means that you are older than 60% of the world's population and older than 40% of all people in Germany.

I suppose I am not that younger anymore.😅 provides you a glance into the world’s inhabitants and the place you stand.

Examine your self with the world

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

Git tip: automagically load challenge configs

A gitconfig that requires different files depending on the git directory

For the freelance of us: Garrit Franke describes how he manages a number of git identities (SSH keys and stuff) for various purchasers relying on the challenge listing. Good!

Make Git smarter

Subsequent.js — the great & the dangerous

Are you evaluating Subsequent.js and prepared for some opinions, popcorn and scorching takes?

Why I won't use Next.js

Kent C. Dodds revealed “Why I do not use Subsequent.js”. And he is criticizing that Subsequent depends on a React canary launch, there’s an excessive amount of magic and that it isn’t counting on net requirements. Do all his arguments maintain?

Why I'm using Next.js

Vercel’s Lee Robinson did not allow us to wait and took the mic to answer with “Why I am Utilizing Subsequent.js” just a few days later. I am no every day Subsequent.js consumer, so it is onerous to take a stand right here. Do you might have ideas on the subject? I would love to listen to them!

However I like the way in which Kent and Lee work together with one another. Positive, it is advertising. However each have huge followings and will simply begin some scorching “Mine is healthier than yours” drama, however as a substitute, they constructively write about it.

On the finish: no matter you employ might be superb.

Random MDN – Object.groupBy

Object.groupBy example

From the limitless MDN data archive…

Do you know you possibly can group array entries with a nifty JS one-liner?

Nicely… Virtually. Firefox 119 adopted Chrome and shipped Object.groupBy. Solely Safari’s lacking, however don’t be concerned. groupBy is not too onerous to polyfill.

Group it

Example of HTML that includes an anchor with the "ping" attribute

Have you learnt that HTML has a local solution to observe hyperlink clicks? That is what the ping attribute is for. 💪

Observe with the platform

Multiple details elements that were transformed to an accordeon by using the "name" attribute

We’re proper within the HTML revolution. dialog shipped. popover is nearly cross-browser supported (Firefox is lacking with a flagged implementation). And now there’s one other replace within the browser maker pipeline.

particulars components with related identify attributes will turn out to be native accordions. Thus far, so good. However…

⚠️ After sharing this characteristic on social media, I realized there is a massive BUT!. Are accordions consumer sample, in any case?

Unique accordions permit guests to see just one factor at a time. There is not any solution to open a number of sections directly. You possibly can’t learn and reference totally different open sections. This habits may be inaccessible and a irritating consumer expertise. Baking an accessibility / UX antipattern into the platform encourages utilizing not thought-throw UI patterns.

To work round this, individuals add “Collapse/Broaden all” buttons to their customized accordion implementations. However how do you do that with the native implementations when it is solely allowed to have one open component?

I admit I’ve by no means thought of all this issues. WebDev is difficult. 😅

Because of Eric Eggert and Sara Soueidan for his or her suggestions.

Three useful tasks to take a look at

  • google/wireit – Oldie, however goldie — improve your npm/pnpm/yarn scripts to make them smarter and extra environment friendly.
  • tsparticles/tsparticles – Create particle results, confetti explosions and fireworks animations.
  • usebruno/bruno – Opensource IDE for exploring and testing APIs.

Photopea is my web-based Photoshop substitute since perpetually. The identical of us have now launched a brand new instrument to edit and create vector information. Say good day to Vectorpea.

Vector all of the issues

Everyone knows what Aaron Francis is speaking about, proper? 😅

The perfect half about being 90% carried out with a challenge is that you just’re nearly midway completed!

Cherished this e mail? Hated this e mail? Need to share sources? I need to hear about it!

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

I am going to see you subsequent week! 👋



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments