No. 812, Monday, February 5, 2024 View in browser |
 |
Olá, frontend friends! 👋 |
Isn't it amazing how quickly the web evolves? There's always something new and exciting on the horizon!
Take, for example, the Navigation API, a new proposal aimed at standardizing client-side routing for single-page applications. I'm incredibly excited about the possibilities it opens up, alongside View Transitions. Bramus gives us a sneak peek in his demo.
Happy Monday! |
|
|
|
| Jeffrey Zeldman reflects on his identity as a creative, acknowledging the complexities and challenges inherent in the creative process, from moments of instant inspiration to periods of agonizing self-doubt and procrastination, ultimately emphasizing the intrinsic value and power of creativity despite its inherent struggles and uncertainties. |
|
|
|
|
|
|
|
|
|
| In this two-part exploration of web components, Brecht is delving into basics, terminology, and a tutorial on creating a "for-love" web component while acknowledging the growing buzz and complexity surrounding the topic. |
|
|
|
|
|
|
|
|
|
| Manav Rathi writes about his realization that Apple doesn't prioritize developers and shares frustrations with Apple and Google, ultimately advocating for writing code for the web. |
|
|
|
|
|
|
|
|
|
| Learn about the Navigation API, a new proposal aimed at standardizing client-side routing for single-page applications, which aims to overhaul the existing History API for better user interactions and code simplification. |
|
|
|
|
|
|
|
|
|
| A great demo by Bramus built with the new Navigation API and View Transitions. Read more here. |
|
|
|
|
|
|
|
|
|
| Rachel Andrew on Interop 2024, a collaborative effort among key browser vendors and stakeholders aimed at enhancing web platform interoperability through tests and benchmarks focusing on various features such as CSS Nesting, HTTPS URLs for WebSocket, and Relative Color Syntax. |
|
|
|
|
|
|
|
|
|
| Ruud van Asseldonk discusses his frustrations with existing configuration languages like HCL, YAML, and Ansible, leading them to create their own configuration language called Ruud's Configuration Language (RCL), which draws inspiration from Nix and Python while addressing issues of abstraction and functionality. |
|
|
|
|
|
|
|
|
|
| Andy Bell writes about the prevalent usage of React in web development, reflecting on its strengths and weaknesses, while mentioning concerns about its dependence on large tech companies and the importance of careful project planning and decision-making. |
|
|
|
|
|
|
|
|
|
| Raymond Camden discusses his debut presentation on generative AI at TheJam.dev, inspired by author John Birmingham and his own use of GenAI for writing, exploring how GenAI suggests blog post titles and provides one-sentence summaries for blog descriptions, demonstrating examples with code snippets. |
|
|
|
|
|
|
|
|
|
| Boardzilla offers a platform for playing and crafting board games directly in your web browser. It simplifies the process of defining game rules and presents players with a user-friendly interface for accessing their available choices. |
|
|
|
|
|
|
|
|
|
| Untranslatable is an indie project that uncovers unique words and expressions from around the world. It goes beyond translation, explaining their usage and cultural significance. |
|
|
|
|
|
|
|
|
|
| Twine is a multiplatform RSS reader app built using Kotlin and Compose Multiplatform. It features an nice user interface and experience to browse through the feeds, and supports Material 3 content based dynamic theming. |
|
|
|
|
|
|
|
|
|
💙 Coffee for creativity! Help cover Codrops' monthly costs and keep the inspiration brewing. Your support makes a real difference. 🙏 |
🔍 Behind the Pixel |
 | Animated noise is really subtle and sexy… and super popular at the moment! Today, let's take a sneak peek behind the scenes at Tasca d'Almerita and discover how the amazing folks at Adoratorio® Studio created those grainy moving pixels.
When we inspect, we can see that there is a large layer with a semi transparent PNG of noise which gets animated: |  | What is the animation? The animation involves steps and translates the noise layer by varying amounts in different directions: |  | And just like that, we have our animated noise! |
|
|
|
|
|
|
|
|
|
|
Video Vault |
|
|
|
|
Animation Spotlight |  | |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
| | Maxime Heckel's ingenious experiment that shows a physics interaction when the browser is resized. |
|
|
|
|
|
|
|
|
|
| | A toggle that doesn't leave you any choice as it rolls back on its own! By Jon Kantner. |
|
|
|
|
|
|
|
|
|
| | Alvaro Montoro didn't use any images or JS for this demo, just a single HTML tag styled with CSS. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…back in 1992, after their show at the CERN Hardronic Festival, a colleague of Tim Berners-Lee was asked for a few scanned photos of "The Horrible CERN Girls" to be published on a new system Tim had just invented called the "World Wide Web"? With only a vague idea of what it was, the colleague scanned some photos on their Mac and FTPed them to Tim's now-famous "info.cern.ch". Little did they know, they were about to pass a historical milestone. That very upload became the first-ever picture of a band to be clicked on in a web browser! |
|
|
|
|
|
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. |
|
|
