No. 808, Monday, January 22, 2024 View in browser
|
 |
Olá, frontend friends! ????
|
Hope your weekend was great! We’re kicking off the week with awesome frontend articles and some interesting findings.
In case you missed it, Noam Rosenthal, a Google engineer currently co-editing the CSS view-transitions spec, has created a cool helper library called Velvette. Check out his article on our blog to see how Velvette makes tackling CSS view-transitions challenges easy. Don’t miss it!
Happy reading!
|
|
|
|
Meet Divi AI – your smart sidekick integrated into Divi, the most loved WordPress theme on the planet. It crafts content, writes code, and designs images right in the builder. With special knowledge about every Divi element, it creates top-notch, tailored content, blending the skills of a writer, web developer, and digital artist. Take your website to the next level effortlessly with Divi and Divi AI!
|
|
|
A Heat Map tool, Heat.js, provides extensive customization options to address various needs. It is designed to be lightweight, aiming for efficient performance while offering a range of settings.
|
|
|
|
|
|
|
|
|
|
|
|
Dialog Box is a generative art project inspired by early Mac OS. This project offers users a nostalgic journey through the digital age, featuring a playful interface with two buttons and infused with the essence of 80s and 90s pop culture.
|
|
|
|
|
|
|
|
|
|
|
|
Insights into the demographics, work experiences, development tools, and preferences of web game developers based on 491 submitted responses.
|
|
|
|
|
|
|
|
|
|
|
|
Bill is trapped in 1999 on GeoCities! He made this time portal so you future people can visit his site.
|
|
|
|
|
|
|
|
|
|
|
This dashboard monitors technical issues impacting Firefox’s competitiveness against first-party browsers in major software platforms. It evaluates security, stability, performance, and functionality, proposing adjustments to foster a more equitable landscape.
|
|
|
|
|
|
|
|
|
|
|
|
Tim Kellogg discusses developing a social media client using HTMX, highlighting the ease of creating a pluggable framework for social media algorithms and plugins that span UI, backend, and database components, ultimately viewing HTMX as a configuration language that contributes to program composability.
|
|
|
|
|
|
|
|
|
|
|
|
Ryan Finni explains CSS Motion Path, showcasing examples such as animating a square along an SVG path and text along a curved line, concluding with a React component demonstrating a car icon moving along a path based on page scrolling.
|
|
|
|
|
|
|
|
|
|
|
|
Kim Tidwell writes about a collaboration between Monotype and Neurons to explore cultural differences in perceiving meaning and emotion in fonts, sharing initial findings that reveal preferences and associations in typefaces across countries.
|
|
|
|
|
|
|
|
|
|
|
A nice math crossword game where you can drag and drop numbers to fill in the blanks and move on to the next level if you get it right.
|
|
|
|
|
|
|
|
|
|
|
In the upcoming week, Certified Fresh Events will host theJam.dev 2024, an exciting and complimentary online event. This two-day conference encompasses a wide array of topics, including web development, AI, serverless architecture, frameworks, and extends beyond just the Jamstack.
|
|
|
|
|
|
|
|
|
|
|
Learn about Nightshade, a tool designed to transform images into “poison” samples, making them unsuitable for unauthorized model training, with the goal of deterring model trainers from using unlicensed data and increasing the cost of such training.
|
|
|
|
|
|
|
|
|
|
|
|
Google engineer Noam Rosenthal who is currently co-editing the CSS view-transitions spec, shows how to effortlessly implement smooth CSS view-transitions with Velvette, a useful library designed to tackle common challenges and enhance user experiences in web applications.
|
|
|
|
|
|
|
|
|
|
|
???? Behind the Pixel
|
 |
Today we are taking a look an adorable pulse animation! The border does a pulse move, and three tiny objects tag along.
Now, let’s peek behind the scenes! If you look at the element closely, you’ll see a CSS animation doing its thing on a pseudo element. Why use a pseudo element? Well, it’s a smart move if you want only the border to do the cute pulse dance without messing with the button text.
|
 |
Wondering how the icons move? There’s another animation they all share.
|
 |
And which way do they go? It’s all set in variables for each icon child! Pretty clever, right?
|
 |
|
Video Vault
|
|
|
|
|
|
|
|
|
|
Demo Corner
|
|
|
|
|
|
❓Did you know that…
|
…in June 1994, Louis Montulli at Netscape invented the HTTP cookie? The first real-world use of cookies checked if visitors to Netscape’s site had been there before. Montulli patented the technology in 1995. Interestingly, it was not widely known by the public until a Financial Times article on February 12, 1996, which sparked media attention and discussions about privacy, leading to U.S. Federal Trade Commission hearings in 1996 and 1997.
|
|
|
|
|
|
And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!
|
|
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.
|
|
|
|
