 |
 |
|
Welcome to Collective #794 |
AI-powered tools are really taking off right now. The speed of development is quite insane. Kind of feels like a revolution, doesn't it?
But, let's be real, it's removing/changing jobs, and it's happening super fast. Some say becoming a Machine Learning Engineer is the move. Someone's gotta take care of the AI, right? Or, maybe not?
Here's the scoop: AI might take over the world, but it might never quite get CSS. Who really does? 😉 |
|
Anyway, let’s learn, no matter what! |
|
|
Automate your builds and deployment so you can focus on your code. Build and host static site generators & single page applications with Deploy Now.
Find out more 👉 |
|
|
|
|
| Now you can sketch up your UI and convert it into code. Well, kind of. Is this the beginning of the end? Check out some more examples that went viral. |
|
|
|
|
|
|
|
|
|
| An app that converts a screenshot to HTML/Tailwind CSS. It uses GPT-4 Vision to generate the code, and DALL-E 3 to generate similar looking images. By Abi Raja. |
|
|
|
|
|
|
|
|
|
| Adam Argyle shows how to use CSS scroll driven animation to enable gradient progress fill in an `input[type=range]`. |
|
|
|
|
|
|
|
|
|
| This article discusses the pervasive digital recording and storage of personal information, the challenges of anonymizing data, and the risks of location surveillance, emphasizing the need for user privacy protection and informed consent in data collection practices. |
|
|
|
|
|
|
|
|
|
| Charlie Holtz has utilized GPT-4-vision and a python script from ElevenLabs to produce an impressive narration of himself in the style of a nature documentary, as if voiced by David Attenborough. |
|
|
|
|
|
|
|
|
|
| Lee Robinson from Vercel outlines tips for scaling large software projects, covering monorepos, feature flags, incremental builds, skew protection, and adopting new technology. He recommends using tools like Turborepo and Vercel to streamline workflows. |
|
|
|
|
|
|
|
|
|
| Thomas Stringer discusses the challenges of open source software maintenance, including lack of compensation for contributors. He proposes a model tying compensation to contributions and usage, and suggests companies contribute money and developer time to support the ecosystem. |
|
|
|
|
|
|
|
|
|
| With this you can extend built-in Three.js materials to support infinite, non-repeating, seamless texture tiling. By Casey Primozic. |
|
|
|
|
|
|
|
|
|
| This article By Ahmad Shadeed explores the implementation of native CSS nesting in major browsers, detailing its benefits for front-end developers, providing examples, and addressing potential bugs while emphasizing its potential to enhance CSS writing. |
|
|
|
|
|
|
|
|
|
| Zack Leatherman discusses his changing views on creating web components. He describes different open-source HTML components, their sizes, CSS, and JavaScript details, and reflects on what he's learned. He also discusses the nuances of Shadow DOM and the complexities of the web component landscape. |
|
|
|
|
|
|
|
|
|
| Last week's OpenAI DevDay introduced GPTs, allowing ChatGPT Plus users to create custom chatbots with unique configurations. Simon Willison summarizes the interesting bits. |
|
|
|
|
|
|
|
|
|
| Read how this state-of-the-art model delivers 10-day weather predictions at unprecedented accuracy in under one minute. |
|
|
|
|
|
|
|
|
|
| The Chrome for Developers team showcases what the web can do in this interactive card experience. |
|
|
|
|
|
|
|
|
|
|
|
Behind the Pixel 🔎 |
 |
In this section, Manoela examines small design and animation details and takes a peek under the hood to see how they are accomplished. |
I really love curved text animations. This one is a really cute one and it’s quite simple to achieve. eDesign Interactive has this nice animation on their marketing page and you can see the curved text being hidden on scroll. How did they do it?
When we inspect, we can see that there is a textPath which is curved along the path that follows: |
 |
The path has a 15px stroke in the background color. By animating the stroke-dashoffset, the line animation covers the curved text. It's a clever technique! |
|
|
Video Vault |
|
|
|
 | | Desire Creative Agency's Dribbble shot displays a super nice design and interaction details, complete with a variety of unique hover effects. The landing page offers a refreshing look and showcases thoughtful micro-animations. The layout was designed by Sonya Baikova and the motion by Marina Shevlyakova. |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
|
|
❓Did you know that… |
…in the early days of the World Wide Web, the concept of web browsers was not as standardized as it is today. Before the dominance of the browsers we know today, there were several lesser-known ones. One such early browser was "ViolaWWW," created by Pei-Yuan Wei in 1992. ViolaWWW was notable for being the first to support scripting and stylesheets. It eventually faded into obscurity as other browsers gained popularity, but its influence on the development of web browsers is a part of internet history that is not as widely recognized. |
|
|
|
|
|
|
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. |
|
|
|
