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.
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.
backdrop-filter, and scroll snapping. Expect more navigation bars to have blurred backgrounds. :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.The loved documentation builder library now brings plugins, theming support and single page application support with React on the client side as well.
The frameworks supported are NuxtJS, VueJS, Vite, Astro, Svelte, Preact, ESLint, Rollup and Sharp. All great choices.
There is a build in extension for Chrome from the Webpage test team that can help recording tests.
The new browserlist website is amazing.
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.
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)"
Addy Osmani hints that Priority Hints for your hero image can make the sites load much faster and increase perceived performance for the site.
If you want to learn accessibility testing and use a Mac for development/testing, this is a great tutorial to start with.
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.
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.
I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no
— Adam Wathan (@adamwathan) August 15, 2022@apply😬
The behavior is outrageously complicated, everyone struggles to build the right mental model of what it’s supposed to do, and it encourages bad CSS architecture.
iMessage should not benefit from bullying. Texting should bring us together, and the solution exists. Let’s fix this as one industry. 💚💙 https://t.co/18k8RNGQw4
— Android (@Android) January 8, 2022