JavaScript Every Month

Web in August 2022

Sep 4, 2022Originally sent via Buttondown

Hey September!

The text-to-image AI are ruling the world and captcha suffers. This month, most people have received access to some version of a text to image AI. If you don't know what these does, they translate the text you provide a visual representation. Most of these AI can imitate artists or convert between different art styles.

If you are a user of Internet, you already know this - captchas are getting more and more complicated. It's got a global community of people training Google's AI. But since the advent of DALL-E, Stable Diffusion and others, we know that this isn't sustainable.

Captchas have since then resorted to more and more complex problems - asking to identifying smiling cats or dogs with eyes closed. Not to mention the criticism that somehow captchas are used globally but most of the terminology is American.

Releases

Astro 1

Astro is the popular framework that arrived on the scene promoting islands approach. This promotes shipping as less JavaScript as possible for a page (the parts that require are islands) and building the rest on a server or build time. Astro has started adoption on corporate sites like Firebase, Trivago using it over their (separate from original) marketing sites. Read the launch post as Astro gets to the stable v1.

Browser Releases

Firefox 103 brings awaited CSS features like backdrop-filter, and scroll snapping. Expect more navigation bars to have blurred backgrounds.
Chrome 105 has support for the very discussed :has selector and HTML Santizer API. You would probably have to wait before Santizer API is supported everywhere before usage. If you would like to learn about the :has selector, Jen Simmons has a comprehensive blog on the topic on Webkit blog.

Docusaurus 2.0

The loved documentation builder library now brings plugins, theming support and single page application support with React on the client side as well.

Chrome Framework Fund

The frameworks supported are NuxtJS, VueJS, Vite, Astro, Svelte, Preact, ESLint, Rollup and Sharp. All great choices.

Introducing the New WebPageTest Recorder Chrome Extension

There is a build in extension for Chrome from the Webpage test team that can help recording tests.

Browserlist

The new browserlist website is amazing.

Crawlee

I have been envious of Python for it's developed frameworks like Scrapy for web scraping. With Crawlee, NodeJS gets a start and a good one at that.

Tutorials

NPM Dependency Selector Syntax

NPM has introduced CSS like syntax for selecting dependencies in your project, this will enable you to filter down on the dependencies based on various different parameters used in the project.

For eg.

If I wanted to find all react versions not-defined as a peer dependency I can run:

npm query "#react:not(.peer)"

Tip - Use fetchpriority=high to load your LCP hero image sooner

Addy Osmani hints that Priority Hints for your hero image can make the sites load much faster and increase perceived performance for the site.

Mac VoiceOver Testing the Simple Way

If you want to learn accessibility testing and use a Mac for development/testing, this is a great tutorial to start with.

ESLint Flat Configuration

ESLint's new release starts testing out their flat configuration which evens out much of the complexity in writing a configuration file. The different structures and syntaxes are condensed out into one flat hierarchy one after the other. This is good read for API design as well.

In the Spotlight 🔦

Media queries have forever confused me, I will be the first to admit that I can't tell the difference between min-width and max-width queries without looking them up on MDN first.

But CSS Media Queries Level 4 is set to change all that by introducing Range Queries. The good news is that there is already native support from Chrome and Firefox, so it's just Safari slacking.

/* Earlier - Between sm and md (Tailwind breakpoints) */
@media (min-width: 640px) and (max-width: 768px) {
}

/* Applying range query */
@media (640px <= width <= 768px) {
}

You can also apply min-width and max-width (height is also a possibility) as earlier and they will be evaluated with equivalent syntax for range queries.

There is also a special syntax for specifying negation which I think is pretty cool, for the times you need to say not mobile.

@media not (width <= 640px) {
}

There is also a PostCSS plugin if your toolchain already involves post processing - you can start using it today.

https://twitter.com/adamwathan/status/1559250403547652097

In Other News

Design the Next iPhone - Sometimes websites that push the barrier are just good fun, this one pushes every button there is.
Inside the software that will become the next battle front in US-China chip war - We always talk about oil, minerals or lately semiconductors when it comes to stakes during a war. But what about software? Can it trigger or hold war?
Twilio hackers breached over 130 organizations during months-long hacking spree - Hackers impersonated mail and contact as coming from Twilio support to compromise at least 130 organizations.
How Discord Supercharges Network Disks For Extreme Low Latency - Discord talks about owning their infrastructure and creating a super disk.
Engineering manager or individual contributor: Which path is right for you? - Should all engineers end their careers as managers? Is that the only ladder available? Jason Lengstorf evaluates.
Man who built ISP instead of paying Comcast $50K expands to hundreds of homes - A network engineer build an ISP because the other providers weren't up to his hopes. The government is now paying him to expand his network to other homes around.
Apple becomes first tech giant to explicitly ban caste discrimination, trains managers on Indian caste system

https://twitter.com/Android/status/1479875457667448837

Looking Forward

Svelte Summit - Sept 8-9
JSConf Korea - Sept 16-17
Grace Hopper Celebration - Sept 20 - 23
Inclusive Design 24 - Sept 22
React India - Sept 23-24 (I'm attending, come say Hi! if you are around)

Wake me up when September Ends