Security can be an intimidating topic for web developers. The vocabulary is rich and full of acronyms. Trends evolve quickly as hackers and analysts play a perpetual cat-and-mouse game. Vulnerabilities stem from little details we cannot afford to spend too much time on during our day-to-day operations.JavaScript developers already have a lot to take with the emergence of a new wave of innovative architectures, such as React Server Components, Next.js App Router, or Astro islands.So, lets have a focused approach. What we need is to be able to detect and palliate the most common security issues. A top ten of the most common vulnerabilities would be ideal.Meet The OWASP Top 10Guess what: there happens to be such a top ten of the most common vulnerabilities, curated by experts in the field! It is provided by the OWASP Foundation, and its an extremely valuable resource for getting started with security. OWASP stands for Open Worldwide Application Security Project. Its a nonprofit foundation whose goal is to make software more secure globally. It supports many open-source projects and produces high-quality education resources, including the OWASP top 10 vulnerabilities list.We will dive through each item of the OWASP top 10 to understand how to recognize these vulnerabilities in a full-stack application.Note: I will use Next.js as an example, but this knowledge applies to any similar full-stack architecture, even outside of the JavaScript ecosystem.Lets start our countdown towards a safer web!Number 10: Server-Side Request Forgery (SSRF)You may have heard about Server-Side Rendering, aka SSR. Well, you can consider SSRF to be its evil twin acronym.Server-Side Request Forgery can be summed up as letting an attacker fire requests using your backend server. Besides hosting costs that may rise up, the main problem is that the attacker will benefit from your servers level of accreditation. In a complex architecture, this means being able to target your internal private services using your own corrupted server.Here is an example. Our app lets a user input a URL and summarizes the content of the target page server-side using an AI SDK. A mischievous user passes localhost:3000 as the URL instead of a website theyd like to summarize. Your server will fire a request against itself or any other service running on port 3000 in your backend infrastructure. This is a severe SSRF vulnerability!Youll want to be careful when firing requests based on user inputs, especially server-side.Number 9: Security Logging And Monitoring FailuresI wish we could establish a telepathic connection with our beloved Node.js server running in the backend. Instead, the best thing we have to see what happens in the cloud is a dreadful stream of unstructured pieces of text we name logs.Yet we will have to deal with that, not only for debugging or performance optimization but also because logs are often the only information youll get to discover and remediate a security issue.As a starter, you might want to focus on logging the most important transactions of your application exactly like you would prioritize writing end-to-end tests. In most applications, this means login, signup, payouts, mail sending, and so on. In a bigger company, a more complete telemetry solution is a must-have, such as Open Telemetry, Sentry, or Datadog.If you are using React Server Components, you may need to set up a proper logging strategy anyway since its not possible to debug them directly from the browser as we used to do for Client components.Number 8: Software And Data Integrity FailuresThe OWASP top 10 vulnerabilities tend to have various levels of granularity, and this one is really a big family. Id like to focus on supply chain attacks, as they have gained a lot of popularity over the years.You may have heard about the Log4J vulnerability. It was very publicized, very critical, and very exploited by hackers. Its a massive supply chain attack.In the JavaScript ecosystem, you most probably install your dependencies using NPM. Before picking dependencies, you might want to craft yourself a small list of health indicators. Is the library maintained and tested with proper code?Does it play a critical role in my application?Who is the main contributor?Did I spell it right when installing?For more serious business, you might want to consider setting up a Supply Chain Analysis (SCA) solution; GitHubs Dependabot is a free one, and Snyk and Datadog are other famous actors.Number 7: Identification And Authentication FailuresHere is a stereotypical vulnerability belonging to this category: your admin password is leaked. A hacker finds it. Boom, game over. Password management procedures are beyond the scope of this article, but in the context of full-stack web development, lets dive deep into how we can prevent brute force attacks using Next.js edge middlewares.Middlewares are tiny proxies written in JavaScript. They process requests in a way that is supposed to be very, very fast, faster than a normal Node.js endpoint, for example. They are a good fit for handling low-level processing, like blocking malicious IPs or redirecting users towards the correct translation of a page.One interesting use case is rate limiting. You can quickly improve the security of your applications by limiting peoples ability to spam your POST endpoints, especially login and signup.You may go even further by setting up a Web Applications Firewall (WAF). A WAF lets developers implement elaborate security rules. This is not something you would set up directly in your application but rather at the host level. For instance, Vercel has released its own WAF in 2024.Number 6: Vulnerable And Outdated ComponentsWe have discussed supply chain attacks earlier. Outdated components are a variation of this vulnerability, where you actually are the person to blame. Sorry about that.Security vulnerabilities are often discovered ahead of time by diligent security analysts before a mean attacker can even start thinking about exploiting them. Thanks, analysts friends! When this happens, they fill out a Common Vulnerabilities and Exposure and store that in a public database.The remedy is the same as for supply chain attacks: set up an SCA solution like Dependabot that will regularly check for the use of vulnerable packages in your application.Halfway breakI just want to mention at this point how much progress we have made since the beginning of this article. To sum it up:We know how to recognize an SSRF. This is a nasty vulnerability, and it is easy to accidentally introduce while crafting a super cool feature.We have identified monitoring and dependency analysis solutions as important pieces of support software for securing applications.We have figured out a good use case for Next.js edge middlewares: rate limiting our authentication endpoints to prevent brute force attacks.Its a good time to go grab a tea or coffee. But after that, come back with us because we are going to discover the five most common vulnerabilities affecting web applications!Number 5: Security MisconfigurationThere are so many configurations that we can mismanage. But lets focus on the most insightful ones for a web developer learning about security: HTTP headers.You can use HTTP response headers to pass on a lot of information to the users browser about whats possible or not on your website.For example, by narrowing down the Permissions-Policy headers, you can claim that your website will never require access to the users camera. This is an extremely powerful protection mechanism in case of a script injection attack (XSS). Even if the hacker manages to run a malicious script in the victims browser, the latter will not allow the script to access the camera.I invite you to observe the security configuration of any template or boilerplate that you use to craft your own websites. Do you understand them properly? Can you improve them? Answering these questions will inevitably lead you to vastly increase the safety of your websites!Number 4: Insecure DesignI find this one funny, although a bit insulting for us developers.Bad code is literally the fourth most common cause of vulnerabilities in web applications! You cant just blame your infrastructure team anymore.Design is actually not just about code but about the way we use our programming tools to produce software artifacts. In the context of full-stack JavaScript frameworks, I would recommend learning how to use them idiomatically, the same way youd want to learn a foreign language. Its not just about translating what you already know word-by-word. You need to get a grasp of how a native speaker would phrase their thoughts.Learning idiomatic Next.js is really, really hard. Trust me, I teach this framework to web developers. Next is all about client and server logic hybridization, and some patterns may not even transfer to competing frameworks with a different architecture like Astro.js or Remix.Hopefully, the Next.js core team has produced many free learning resources, including articles and documentation specifically focusing on security.I recommend reading Sebastian Markbges famous article How to Think About Security in Next.js as a starting point. If you use Next.js in a professional setting, consider organizing proper training sessions before you start working on high-stakes projects.Number 3: InjectionInjections are the epitome of vulnerabilities, the quintessence of breaches, and the paragon of security issues. SQL injections are typically very famous, but JavaScript injections are also quite common. Despite being well-known vulnerabilities, injections are still in the top 3 in the OWASP ranking!Injections are the reason why forcing a React component to render HTML is done through an unwelcoming dangerouslySetInnerHTML function.React doesnt want you to include user input that could contain a malicious script.The screenshot below is a demonstration of an injection using images. It could target a message board, for instance. The attacker misused the image posting system. They passed a URL that points towards an API GET endpoint instead of an actual image. Whenever your websites users see this post in their browser, an authenticated request is fired against your backend, triggering a payment!As a bonus, having a GET endpoint that triggers side-effects such as payment also constitutes a risk of Cross-Site Request Forgery (CSRF, which happens to be SSRF client-side cousin).Even experienced developers can be caught off-guard. Are you aware that dynamic route parameters are user inputs? For instance, [language]/page.jsx in a Next.js or Astro app. I often see clumsy attack attempts when logging them, like language being replaced by a path traversal like ../../../../passwords.txt.Zod is a very popular library for running server-side data validation of user inputs. You can add a transform step to sanitize inputs included in database queries, or that could land in places where they end up being executed as code.Number 2: Cryptographic FailuresA typical discussion between two developers that are in deep, deep trouble: We have leaked our database and encryption key. What algorithm was used to encrypt the password again? AES-128 or SHA-512? I dont know, arent they the same thing? They transform passwords into gibberish, right? Alright. We are in deep, deep trouble.This vulnerability mostly concerns backend developers who have to deal with sensitive personal identifiers (PII) or passwords. To be honest, I dont know much about these algorithms; I studied computer science way too long ago.The only thing I remember is that you need non-reversible algorithms to encrypt passwords, aka hashing algorithms. The point is that if the encrypted passwords are leaked, and the encryption key is also leaked, it will still be super hard to hack an account (you cant just reverse the encryption).In the State of JavaScript survey, we use passwordless authentication with an email magic link and one-way hash emails, so even as admins, we cannot guess a users email in our database.And number 1 is...Such suspense! We are about to discover that the top 1 vulnerability in the world of web development is...Broken Access Control! Tada.Yeah, the name is not super insightful, so let me rephrase it. Its about people being able to access other peoples accounts or people being able to access resources they are not allowed to. Thats more impressive when put this way.A while ago, I wrote an article about the fact that checking authorization within a layout may leave page content unprotected in Next.js. Its not a flaw in the frameworks design but a consequence of how React Server Components have a different model than their client counterparts, which then affects how the layout works in Next.Here is a demo of how you can implement a paywall in Next.js that doesnt protect anything.// app/layout.jsx// Using cookie-based authentication as usualasync function checkPaid() { const token = cookies.get("auth_token"); return await db.hasPayments(token);}// Running the payment check in a layout to apply it to all pages// Sadly, this is not how Next.js works!export default async function Layout() { // this won't work as expected!! const hasPaid = await checkPaid(); if (!hasPaid) redirect("/subscribe"); // then render the underlying page return <div>{children}</div>;}// this can be accessed directly// by adding RSC=1 to the request that fetches it!export default function Page() { return <div>PAID CONTENT</div>}What We Have Learned From The Top 5 VulnerabilitiesMost common vulnerabilities are tightly related to application design issues: Copy-pasting configuration without really understanding it.Having an improper understanding of the framework we use in inner working. Next.js is a complex beast and doesnt make our life easier on this point!Picking an algorithm that is not suited for a given task.These vulnerabilities are tough ones because they confront us to our own limits as web developers. Nobody is perfect, and the most experienced developers will inevitably write vulnerable code at some point in their lives without even noticing. How to prevent that? By not staying alone! When in doubt, ask around fellow developers; there are great chances that someone has faced the same issues and can lead you to the right solutions.Where To Head Now?First, I must insist that you have already done a great job of improving the security of your applications by reading this article. Congratulations!Most hackers rely on a volume strategy and are not particularly skilled, so they are really in pain when confronted with educated developers who can spot and fix the most common vulnerabilities.From there, I can suggest a few directions to get even better at securing your web applications:Try to apply the OWASP top 10 to an application you know well, either a personal project, your companys codebase, or an open-source solution.Give a shot at some third-party security tools. They tend to overflow developers with too much information but keep in mind that most actors in the field of security are aware of this issue and work actively to provide more focused vulnerability alerts.Ive added my favorite security-related resources at the end of the article, so youll have plenty to read!Thanks for reading, and stay secure!Resources For Further LearningAn interactive demo of an SSRF in a Next.js app and how to fix itOWASP Top 10An SSRF vulnerability that affected Next.js image optimization systemObserve React Server Components using Open TelemetryOpenTelemetry and open source Telemtry standard Log4J vulnerabilitySetting up rate limiting in a middleware using a Redis serviceVercel WAF annoucementMitre CVE databaseAn interactive demo of a CSRF vulnerability in a Next.js app and how to fix itA super complete guide on authentication specifically targeting web appsServer form validation with zod in Next.js (Astro has it built-in)Sanitization with zodSecure statically rendered paid content in Next.js and how layouts are a bad place to run authentication checksSmashing Magazine articles related to security (almost 50 matches at the time of writing!)This article is inspired by my talk at React Advanced London 2024, Securing Server-Rendered Applications: Next.js case, which is available to watch as a replay online.

Content testing is a simple way to test the clarity and understanding of the content on a page be it a paragraph of text, a user flow, a dashboard, or anything in between. Our goal is to understand how well users actually perceive the content that we present to them.Its not only about finding pain points and things that cause confusion or hinder users from finding the right answer on a page but also about if our content clearly and precisely articulates what we actually want to communicate.This article is part of our ongoing series on UX. You can find more details on design patterns and UX strategy in Smart Interface Design Patterns with live UX training coming up soon. Free preview.Banana TestingA great way to test how well your design matches a users mental model is Banana Testing. We replace all key actions with the word Banana, then ask users to suggest what each action could prompt.Not only does it tell you if key actions are understood immediately and if they are in the right place but also if your icons are helpful and if interactive elements such as links or buttons are perceived as such.Content HeatmappingOne reliable technique to assess content is content heatmapping. The way we would use it is by giving participants a task, then asking them to highlight things that are clear or confusing. We could define any other dimensions or style lenses as well: e.g., phrases that bring more confidence and less confidence.Then we map all highlights into a heatmap to identify patterns and trends. You could run it with print-outs in person, but it could also happen in Figjam or in Miro remotely as long as your tool of choice has a highlighter feature.Run Moderated Testing SessionsThese little techniques above help you discover content issues, but they dont tell you what is missing in the content and what doubts, concerns, and issues users have with it. For that, we need to uncover user needs in more detail.Too often, users say that a page is clear and well-organized, but when you ask them specific questions, you notice that their understanding is vastly different from what you were trying to bring into spotlight.Such insights rarely surface in unmoderated sessions its much more effective to observe behavior and ask questions on the spot, be it in person or remote.Test Concepts, Not WordsBefore testing, we need to know what we want to learn. First, write up a plan with goals, customers, questions, script. Dont tweak words alone broader is better. In the session, avoid speaking aloud as its usually not how people consume content. Ask questions and wait silently.After the task is completed, ask users to explain the product, flow, and concepts to you. But: dont ask them what they like, prefer, feel, or think. And whenever possible, avoid the word content in testing as users often perceive it differently.Choosing The Right Way To TestThere are plenty of different tests that you could use:Banana test Replace key actions with bananas, ask to explain.Cloze test Remove words from your copy, ask users to fill in the blanks.Reaction cards Write up emotions on 25 cards, ask users to choose.Card sorting Ask users to group topics into meaningful categories.Highlighting Ask users to highlight helpful or confusing words.Competitive testing Ask users to explain competitors pages.When choosing the right way to test, consider the following guidelines:Do users understand?Interviews, highlighting, Cloze testDo we match the mental model?Banana testing, Cloze testWhat word works best?Card sorting, A/B testing, tree testingWhy doesnt it work?Interviews, highlighting, walkthroughsDo we know user needs?Competitive testing, process mappingWrapping UpIn many tasks, there is rarely anything more impactful than the careful selection of words on a page. However, its not only the words alone that are being used but the voice and tone that you choose to communicate with customers.Use the techniques above to test and measure how well people perceive content but also check how they perceive the end-to-end experience on the site.Quite often, the right words used incorrectly on a key page can convey a wrong message or provide a suboptimal experience. Even though the rest of the product might perform remarkably well, if a user is blocked on a critical page, they will be gone before you even blink.Useful ResourcesPractical Guide To Content Testing, by IntuitHow To Test Content With Users, by Kate MoranFive Fun Ways To Test Words, by John SaitoA Simple Technique For Evaluating Content, by Pete GaleNew: How To Measure UX And Design ImpactMeet Measure UX & Design Impact (8h), a new practical guide for designers and UX leads to measure and show your UX impact on business. Use the code IMPACT to save 20% off today. Jump to the details. Video + UX TrainingVideo onlyVideo + UX Training$495.00 $799.00Get Video + UX Training25 video lessons (8h) + Live UX Training.100 days money-back-guarantee.Video only$250.00$395.00Get the video course25 video lessons (8h). Updated yearly.Also available as a UX Bundle with 2 video courses.

This article is a sponsored by DebugBearLoading your website HTML quickly has a big impact on visitor experience. After all, no page content can be displayed until after the first chunk of the HTML has been loaded. Thats why the Time to First Byte (TTFB) metric is important: it measures how soon after navigation the browser starts receiving the HTML response.Generating the HTML document quickly plays a big part in minimizing TTFB delays. But actually, theres a lot more to optimizing this metric. In this article, well take a look at what else can cause poor TTFB and what you can do to fix it.What Components Make Up The Time To First Byte Metric?TTFB stands for Time to First Byte. But where does it measure from?Different tools handle this differently. Some only count the time spent sending the HTTP request and getting a response, ignoring everything else that needs to happen first before the resource can be loaded. However, when looking at Googles Core Web Vitals, TTFB starts from the time when the users start navigating to a new page. That means TTFB includes:Cross-origin redirects,Time spent connecting to the server,Same-origin redirects, andThe actual request for the HTML document.We can see an example of this in this request waterfall visualization.The server response time here is only 183 milliseconds, or about 12% of the overall TTFB metric. Half of the time is instead spent on a cross-origin redirect a separate HTTP request that returns a redirect response before we can even make the request that returns the websites HTML code. And when we make that request, most of the time is spent on establishing the server connection.Connecting to a server on the web typically takes three round trips on the network:DNS: Looking up the server IP address.TCP: Establishing a reliable connection to the server.TLS: Creating a secure encrypted connection.What Network Latency Means For Time To First ByteLets add up all the network round trips in the example above:2 server connections: 6 round trips.2 HTTP requests: 2 round trips.That means that before we even get the first response byte for our page we actually have to send data back and forth between the browser and a server eight times!Thats where network latency comes in, or network round trip time (RTT) if we look at the time it takes to send data to a server and receive a response in the browser. On a high-latency connection with a 150 millisecond RTT, making those eight round trips will take 1.2 seconds. So, even if the server always responds instantly, we cant get a TTFB lower than that number.Network latency depends a lot on the geographic distances between the visitors device and the server the browser is connecting to. You can see the impact of that in practice by running a global TTFB test on a website. Here, Ive tested a website thats hosted in Brazil. We get good TTFB scores when testing from Brazil and the US East Coast. However, visitors from Europe, Asia, or Australia wait a while for the website to load.What Content Delivery Networks Mean for Time to First ByteOne way to speed up your website is by using a Content Delivery Network (CDN). These services provide a network of globally distributed server locations. Instead of each round trip going all the way to where your web application is hosted, browsers instead connect to a nearby CDN server (called an edge node). That greatly reduces the time spent on establishing the server connection, improving your overall TTFB metric.By default, the actual HTML request still has to be sent to your web app. However, if your content isnt dynamic, you can also cache responses at the CDN edge node. That way, the request can be served entirely through the CDN instead of data traveling all across the world.If we run a TTFB test on a website that uses a CDN, we can see that each server response comes from a regional data center close to where the request was made. In many cases, we get a TTFB of under 200 milliseconds, thanks to the response already being cached at the edge node.How To Improve Time To First ByteWhat you need to do to improve your websites TTFB score depends on what its biggest contributing component is.A lot of time is spent establishing the connection: Use a global CDN.The server response is slow: Optimize your application code or cache the responseRedirects delay TTFB: Avoid chaining redirects and optimize the server returning the redirect response.Keep in mind that TTFB depends on how visitors are accessing your website. For example, if they are logged into your application, the page content probably cant be served from the cache. You may also see a spike in TTFB when running an ad campaign, as visitors are redirected through a click-tracking server.Monitor Real User Time To First ByteIf you want to get a breakdown of what TTFB looks like for different visitors on your website, you need real user monitoring. That way, you can break down how visitor location, login status, or the referrer domain impact real user experience.DebugBear can help you collect real user metrics for Time to First Byte, Google Core Web Vitals, and other page speed metrics. You can track individual TTFB components like TCP duration or redirect time and break down website performance by country, ad campaign, and more.ConclusionBy looking at everything thats involved in serving the first byte of a website to a visitor, weve seen that just reducing server response time isnt enough and often wont even be the most impactful change you can make on your website.Just because your website is fast in one location doesnt mean its fast for everyone, as website speed varies based on where the visitor is accessing your site from.Content Delivery Networks are an incredibly powerful way to improve TTFB. Even if you dont use any of their advanced features, just using their global server network saves a lot of time when establishing a server connection.

I dont know how it is for other designers, but when I start a new project, theres always this moment where I just sit there and stare. Nothing. No idea. Empty.People often think that creativity is some kind of magic that suddenly comes out of nowhere, like a lightning strike from the sky. But I can tell you thats not how it works at least not for me. Ive learned how to hack my creativity. Its no longer random but more like a process. And one part of that process led me to create what we now call the Hero Section.The Birth Of The Hero SectionIf Im being honest, I dont even know exactly how I came up with the name Hero. It felt more like an epiphany than a conscious decision. At the time, I was working on the Brooklyn theme, and Bootstrap was gaining popularity. I wasnt a huge fan of Bootstrap, not because its bad, but because I found it more complicated to work with than writing my own CSS. Ninety-five percent of the CSS and HTML in Brooklyn is custom-written, devoid of any framework.But there was one part of Bootstrap that stuck with me: the Jumbotron class. The name felt a bit odd, but I understood its purpose to create something big and attention-grabbing. That stuck in my mind, and like lightning, the word Hero came to me.Why Hero? A hero is a figure that demands attention. Its bold, strong, and memorable, which is everything I wanted Brooklyns intro section to be. At first, I envisioned a Hero Button. Still, I realized the concept could be much broader: it could encompass the entire intro section, setting the tone for the website and drawing the visitors focus to the most important message.The term Banner was another option, but it felt generic and uninspired. A Hero, on the other hand, is a force to reckon with. So, I committed to the idea.From Banner To Hero SectionBack in 2013, most websites called their intro sections a Banner or Header. At best, youd see a single image with a title, maybe a subtitle, and a button. Sliders were also popular, cycling through multiple banners with different content. But I wanted Brooklyns intro to be more than just a banner it had to make a lasting impression.So, I redefined it:HTML StructureI named the section <section class="hero">. This wasnt just a banner or a slider; it was a Hero Section.CSS CustomizationEverything within the section followed the Hero concept: .hero-slogan, .hero-title, .hero-description, .hero-btn. I coded it all from scratch, making sure it had a cohesive and distinct identity.Marketing LanguageI didnt stop at the code. I used the word Hero everywhere, including Brooklyns documentation, the theme description, the landing page, and the featured images.At the time, Brooklyn was attracting tens of thousands of visitors per day on ThemeForest, which is the storefront I use to make the theme available for sale. It quickly became a top seller, selling like hotcakes. Naturally, people started asking, Whats a Hero Section? It was a new term, and I loved explaining the concept.The Hero Section had become sort of like a hook that made Brooklyn more alluring, and we sold a lot of copies of the theme because of it.What I Didnt Know About The Heros FutureAt the time, I intentionally used the term Hero in Brooklyns code and marketing because I wanted it to stand out. I made sure it was everywhere: in the <section> tags, in class names like .hero-title and .hero-description, and on Brooklyns landing page and product description.But honestly, I didnt realize just how big the term would become. I wasnt thinking about carving it into stone or reserving it as something unique to Brooklyn. That kind of forward-thinking wasnt on my radar back then. All I wanted was to grab attention and make Brooklyn stand out.Over time, we kept adding new variations to the Hero Section. For example, we introduced the Hero Video, allowing users to add video backgrounds to their Heroes something that felt bold and innovative at the time. We also added the Hero Slider, a simple image slider within the Hero Section, giving users more flexibility to create dynamic intros.Brooklyn even had a small Hero Builder integrated directly into the theme something I believe is still unique to this day.Looking back, its clear I missed an opportunity to cement the Hero Section as a signature feature of Brooklyn. Once I saw other authors adopting the term, I stopped emphasizing Brooklyns role in popularizing it. I thought the concept spoke for itself.How The Hero Went MainstreamOne of the most fascinating things about the Hero Section is how quickly the term caught on. Brooklyns popularity gave the Hero Section massive exposure. Designers and developers started noticing it, and soon, other theme authors began adopting the term in their products.Brooklyn wasnt just another theme. It was one of the top sellers on ThemeForest, the worlds largest marketplace for digital goods, with millions of users. And I didnt just use the term Hero once or twice I used it everywhere: descriptions, featured images, and documentation. I made sure people saw it. Before long, I noticed that more and more themes used the term to describe large intro sections in their work.Today, the Hero Section is everywhere. Its a standard in web design recognized by designers and developers worldwide. While I cant say I invented the concept, Im proud to have played a key role in bringing it into the mainstream.Lessons From Building A HeroCreating the Hero Section taught me a lot about design, creativity, and marketing. Here are the key takeaways:Start Simple: The Hero Section started as a simple idea a way to focus attention. You dont need a complex plan to create something impactful.Commit to Your Ideas: Once I decided on the term Hero, I committed to it in the code, the design, and the marketing. Consistency made it stick.Bold Names Matter: Naming the section Hero instead of Banner gave it a personality and purpose. Names can define how users perceive a design.Constantly Evolve: Adding features like the Hero Video and Hero Slider kept the concept fresh and adaptable to user needs.Dont Ignore Your Role: If you introduce something new, own it. I should have continued promoting Brooklyn as a Hero pioneer to solidify its legacy.Inspiration Isnt Magic; Its Hard WorkInspiration often comes from unexpected places. For me, it came from questioning a Bootstrap class name and reimagining it into something new. The Hero Section wasnt just a product of creative brilliance it was the result of persistence, experimentation, and a bit of luck.Whats the one element youve created that youre most proud of? Id love to hear your stories in the comments below!

When Ethan Marcotte conceived RWD, web technologies were far less mature than today. As web developers, we started to grasp how to do things with floats after years of stuffing everything inside table cells. There werent many possible ways to achieve a responsive site. There were two of them: fluid grids (based on percentages) and media queries, which were a hot new thing back then.What was lacking was a real layout system that would allow us to lay things out on a page instead of improvising with floating content. We had to wait several years for Flexbox to appear. And CSS Grid followed that.Undoubtedly, new layout systems native to the browser were groundbreaking 10 years ago. They were revolutionary enough to usher in a new era. In her talk Everything You Know About Web Design Just Changed at the An Event Apart conference in 2019, Jen Simmons proposed a name for it: Intrinsic Web Design (IWD). Lets disarm that fancy word first. According to the Merriam-Webster dictionary, intrinsic means belonging to the essential nature or constitution of a thing. In other words, IWD is a natural way of doing design for the web. And that boils down to using CSS layout systems for laying out things. Thats it.It does not sound that groundbreaking on its own. But it opens a lot of possibilities that werent earlier available with float-based layouts or table ones. We got the best things from both worlds: two-dimensional layouts (like tables with their rows and columns) with wrapping abilities (like floating content when there is not enough space for it). And there are even more goodies, like mixing fixed-sized content with fluid-sized content or intentionally overlapping elements:Native layout systems are here to make the browser work for you dont hesitate to use that to your advantage.Start With Semantic HTMLHTML is the backbone of the web. Its the language that structures and formats the content for the user. And it comes with a huge bonus: it loads and displays to the user, even if CSS and JavsScript fail to load for whatever reason. In other words, the website should still make sense to the user even if the CSS that provides the layout and the JavsScript that provides the interactivity are no-shows. A website is a text document, not so different from the one you can create in a text processor, like Word or LibreWriter.Semantic HTML also provides important accessibility features, like headings that are often used by screen-reader users for navigating pages. This is why starting not just with any markup but semantic markup for meaningful structure is a crucial step to embracing native web features.Use Fluid Type With Fluid SpaceWe often need to adjust the font size of our content when the screen size changes. Smaller screens mean being able to display less content, and larger screens provide more affordance for additional content. This is why we ought to make content as fluid as possible, by which I mean the content should automatically adjust based on the screens size. A fluid typographic system optimizes the contents legibility when its being viewed in different contexts.Nowadays, we can achieve truly fluid type with one line of CSS, thanks to the clamp() function:font-size: clamp(1rem, calc(1rem + 2.5vw), 6rem);The maths involved in it goes quite above my head. Thankfully, there is a detailed article on fluid type by Adrian Bece here on Smashing Magazine and Utopia, a handy tool for doing the maths for us. But beware there be dragons! Or at least possible accessibility issues. By limiting the maximum font size, we could break the ability to zoom the text content, violating one of the WCAGs requirements (though there are ways to address that).Fortunately, fluid space is much easier to grasp: if gaps (margins) between elements are defined in font-dependent units (like rem or em), they will scale alongside the font size. Yet rest assured, there are also caveats.Always Bet On Progressive EnhancementYes, thats this over-20-year-old technique for creating web pages. And its still relevant today in 2025. Many interesting features have limited availability like cross-page view transitions. They wont work for every user, but enabling them is as simple as adding one line of CSS:@view-transition { navigation: auto; }It wont work in some browsers, but it also wont break anything. And if some browser catches up with the standard, the code is already there, and view transitions start to work in that browser on your website. Its sort of like opting into the feature when its ready.Thats progressive enhancement at its best: allowing you to make your stairs into an escalator whenever its possible.It applies to many more things in CSS (unsupported grid is just a flow layout, unsupported masonry layout is just a grid, and so on) and other web technologies.Trust The BrowserTrust it because it knows much more about how safe it is for users to surf the web. Besides, its a computer program, and computer programs are pretty good at calculating things. So instead of calculating all these breakpoints ourselves, take their helping hand and allow them to do it for you. Just give them some constraints. Make that <main> element no wider than 60 characters and no narrower than 20 characters and then relax, watching the browser make it 37 characters on some super rare viewport youve never encountered before. It Just Works.But trusting the browser also means trusting the open web. After all, these algorithms responsible for laying things out are all parts of the standards.Ditch The Physical CSSThats a bonus point from me. Layout systems introduced the concept of logical CSS. Flexbox does not have a notion of a left or right side it has a start and an end. And that way of thinking lurked into other areas of CSS, creating the whole CSS Logical Properties and Values module. After working more with layout systems, logical CSS seems much more intuitive than the old physical one. It also has at least one advantage over the old way of doing things: it works far better with internationalized content.And I know that sounds crazy, but it forces a change in thinking about websites. If you dont know the most basic information about your content (the font size), you cant really apply any concrete numbers to your layout. You can only think in ratios. If the font size equals , your heading could equal 2, the main column 60, some text input 10, and so on. This way, everything should work out with any font size and, by extension, scale up with any font size.Weve already been doing that with layout systems we allow them to work on ratios and figure out how big each part of the layout should be. And weve also been doing that with rem and em units for scaling things up depending on font size. The only thing left is to completely forget the 1rem = 16px equation and fully embrace the exciting shores of unknown dimensions.But that sort of mental shift comes with one not-so-straightforward consequence. Not setting the font size and working with the user-provided one instead fully moves the power from the web developer to the browser and, effectively, the user. And the browser can provide us with far more information about user preferences.Thanks to the modern CSS, we can respond to these things. For example, we can switch to dark mode if the user prefers one, we can limit motion if the user requests it, we can make clickable areas bigger if the device has a touch screen, and so on. By having this kind of dialogue with the browser, exchanging information (it gives us data on the user, and we give it hints on how to display our content), we empower the user in the result. The content would be displayed in the way they want. That makes our website far more inclusive and accessible.After all, the users know what they need best. If they set the default font size to 64 pixels, they would be grateful if we respected that value. We dont know why they did it (maybe they have some kind of vision impairment, or maybe they simply have a screen far away from them); we only know they did it and we respect that.And thats responsive design for me.

This article is a sponsored by StoryblokWhen computers first started talking to each other, the methods were remarkably simple. In the early days of the Internet, systems exchanged files via FTP or communicated via raw TCP/IP sockets. This direct approach worked well for simple use cases but quickly showed its limitations as applications grew more complex.# Basic socket server exampleimport socketserver_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server_socket.bind(('localhost', 12345))server_socket.listen(1)while True: connection, address = server_socket.accept() data = connection.recv(1024) # Process data connection.send(response)The real breakthrough in enabling complex communication between computers on a network came with the introduction of Remote Procedure Calls (RPC) in the 1980s. RPC allowed developers to call procedures on remote systems as if they were local functions, abstracting away the complexity of network communication. This pattern laid the foundation for many of the modern integration approaches we use today.At its core, RPC implements a client-server model where the client prepares and serializes a procedure call with parameters, sends the message to a remote server, the server deserializes and executes the procedure, and then sends the response back to the client.Heres a simplified example using Pythons XML-RPC.# Serverfrom xmlrpc.server import SimpleXMLRPCServerdef calculate_total(items): return sum(items)server = SimpleXMLRPCServer(("localhost", 8000))server.register_function(calculate_total)server.serve_forever()# Clientimport xmlrpc.clientproxy = xmlrpc.client.ServerProxy("http://localhost:8000/")try: result = proxy.calculate_total([1, 2, 3, 4, 5])except ConnectionError: print("Network error occurred")RPC can operate in both synchronous (blocking) and asynchronous modes.Modern implementations such as gRPC support streaming and bi-directional communication. In the example below, we define a gRPC service called Calculator with two RPC methods, Calculate, which takes a Numbers message and returns a Result message, and CalculateStream, which sends a stream of Result messages in response.// protobufservice Calculator { rpc Calculate(Numbers) returns (Result); rpc CalculateStream(Numbers) returns (stream Result);}Modern Integrations: The Rise Of Web Services And SOAThe late 1990s and early 2000s saw the emergence of Web Services and Service-Oriented Architecture (SOA). SOAP (Simple Object Access Protocol) became the standard for enterprise integration, introducing a more structured approach to system communication.<?xml version="1.0"?><soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope"> <soap:Header> </soap:Header> <soap:Body> <m:GetStockPrice xmlns:m="http://www.example.org/stock"> <m:StockName>IBM</m:StockName> </m:GetStockPrice> </soap:Body></soap:Envelope>While SOAP provided robust enterprise features, its complexity, and verbosity led to the development of simpler alternatives, especially the REST APIs that dominate Web services communication today.But REST is not alone. Lets have a look at some modern integration patterns.RESTful APIsREST (Representational State Transfer) has become the de facto standard for Web APIs, providing a simple, stateless approach to manipulating resources. Its simplicity and HTTP-based nature make it ideal for web applications.First defined by Roy Fielding in 2000 as an architectural style on top of the Webs standard protocols, its constraints align perfectly with the goals of the modern Web, such as performance, scalability, reliability, and visibility: client and server separated by an interface and loosely coupled, stateless communication, cacheable responses.In modern applications, the most common implementations of the REST protocol are based on the JSON format, which is used to encode messages for requests and responses.// Requestasync function fetchUserData() { const response = await fetch('https://api.example.com/users/123'); const userData = await response.json(); return userData;}// Response{ "id": "123", "name": "John Doe", "_links": { "self": { "href": "/users/123" }, "orders": { "href": "/users/123/orders" }, "preferences": { "href": "/users/123/preferences" } }}GraphQLGraphQL emerged from Facebooks internal development needs in 2012 before being open-sourced in 2015. Born out of the challenges of building complex mobile applications, it addressed limitations in traditional REST APIs, particularly the issues of over-fetching and under-fetching data.At its core, GraphQL is a query language and runtime that provides a type system and declarative data fetching, allowing the client to specify exactly what it wants to fetch from the server.// graphqltype User { id: ID! name: String! email: String! posts: [Post!]!}type Post { id: ID! title: String! content: String! author: User! publishDate: String!}query GetUserWithPosts { user(id: "123") { name posts(last: 3) { title publishDate } }}Often used to build complex UIs with nested data structures, mobile applications, or microservices architectures, it has proven effective at handling complex data requirements at scale and offers a growing ecosystem of tools.WebhooksModern applications often require real-time updates. For example, e-commerce apps need to update inventory levels when a purchase is made, or content management apps need to refresh cached content when a document is edited. Traditional request-response models can struggle to meet these demands because they rely on clients polling servers for updates, which is inefficient and resource-intensive.Webhooks and event-driven architectures address these needs more effectively. Webhooks let servers send real-time notifications to clients or other systems when specific events happen. This reduces the need for continuous polling. Event-driven architectures go further by decoupling application components. Services can publish and subscribe to events asynchronously, and this makes the system more scalable, responsive, and simpler.import fastify from 'fastify';const server = fastify();server.post('/webhook', async (request, reply) => { const event = request.body; if (event.type === 'content.published') { await refreshCache(); } return reply.code(200).send();});This is a simple Node.js function that uses Fastify to set up a web server. It responds to the endpoint /webhook, checks the type field of the JSON request, and refreshes a cache if the event is of type content.published.With all this background information and technical knowledge, its easier to picture the current state of web application development, where a single, monolithic app is no longer the answer to business needs, but a new paradigm has emerged: Composable Architecture.Composable Architecture And Headless CMSsThis evolution has led us to the concept of composable architecture, where applications are built by combining specialized services. This is where headless CMS solutions have a clear advantage, serving as the perfect example of how modern integration patterns come together. Headless CMS platforms separate content management from content presentation, allowing you to build specialized frontends relying on a fully-featured content backend. This decoupling facilitates content reuse, independent scaling, and the flexibility to use a dedicated technology or service for each part of the system.Take Storyblok as an example. Storyblok is a headless CMS designed to help developers build flexible, scalable, and composable applications. Content is exposed via API, REST, or GraphQL; it offers a long list of events that can trigger a webhook. Editors are happy with a great Visual Editor, where they can see changes in real time, and many integrations are available out-of-the-box via a marketplace.Imagine this ContentDeliveryService in your app, where you can interact with Storybloks REST API using the open source JS Client:import StoryblokClient from "storyblok-js-client";class ContentDeliveryService { constructor(private storyblok: StoryblokClient) {} async getPageContent(slug: string) { const { data } = await this.storyblok.get(cdn/stories/${slug}, { version: 'published', resolve_relations: 'featured-products.products' }); return data.story; } async getRelatedContent(tags: string[]) { const { data } = await this.storyblok.get('cdn/stories', { version: 'published', with_tag: tags.join(',') }); return data.stories; }}The last piece of the puzzle is a real example of integration.Again, many are already available in the Storyblok marketplace, and you can easily control them from the dashboard. However, to fully leverage the Composable Architecture, we can use the most powerful tool in the developers hand: code.Lets imagine a modern e-commerce platform that uses Storyblok as its content hub, Shopify for inventory and orders, Algolia for product search, and Stripe for payments.Once each account is set up and we have our access tokens, we could quickly build a front-end page for our store. This isnt production-ready code, but just to get a quick idea, lets use React to build the page for a single product that integrates our services.First, we should initialize our clients:import StoryblokClient from "storyblok-js-client";import { algoliasearch } from "algoliasearch";import Client from "shopify-buy";const storyblok = new StoryblokClient({ accessToken: "your_storyblok_token",});const algoliaClient = algoliasearch( "your_algolia_app_id", "your_algolia_api_key",);const shopifyClient = Client.buildClient({ domain: "your-shopify-store.myshopify.com", storefrontAccessToken: "your_storefront_access_token",});Given that we created a blok in Storyblok that holds product information such as the product_id, we could write a component that takes the productSlug, fetches the product content from Storyblok, the inventory data from Shopify, and some related products from the Algolia index:async function fetchProduct() { // get product from Storyblok const { data } = await storyblok.get(cdn/stories/${productSlug}); // fetch inventory from Shopify const shopifyInventory = await shopifyClient.product.fetch( data.story.content.product_id ); // fetch related products using Algolia const { hits } = await algoliaIndex.search("products", { filters: category:${data.story.content.category}, });}We could then set a simple component state:const [productData, setProductData] = useState(null);const [inventory, setInventory] = useState(null);const [relatedProducts, setRelatedProducts] = useState([]);useEffect(() => // ... // combine fetchProduct() with setState to update the state // ... fetchProduct();}, [productSlug]);And return a template with all our data:<h1>{productData.content.title}</h1><p>{productData.content.description}</p><h2>Price: ${inventory.variants[0].price}</h2><h3>Related Products</h3><ul> {relatedProducts.map((product) => ( <li key={product.objectID}>{product.name}</li> ))}</ul>We could then use an event-driven approach and create a server that listens to our shop events and processes the checkout with Stripe (credits to Manuel Spigolon for this tutorial):const stripe = require('stripe')module.exports = async function plugin (app, opts) { const stripeClient = stripe(app.config.STRIPE_PRIVATE_KEY) server.post('/create-checkout-session', async (request, reply) => { const session = await stripeClient.checkout.sessions.create({ line_items: [...], // from request.body mode: 'payment', success_url: "https://your-site.com/success", cancel_url: "https://your-site.com/cancel", }) return reply.redirect(303, session.url) })// ...And with this approach, each service is independent of the others, which helps us achieve our business goals (performance, scalability, flexibility) with a good developer experience and a smaller and simpler application thats easier to maintain.ConclusionThe integration between headless CMSs and modern web services represents the current and future state of high-performance web applications. By using specialized, decoupled services, developers can focus on business logic and user experience. A composable ecosystem is not only modular but also resilient to the evolving needs of the modern enterprise.These integrations highlight the importance of mastering API-driven architectures and understanding how different tools can harmoniously fit into a larger tech stack.In todays digital landscape, success lies in choosing tools that offer flexibility and efficiency, adapt to evolving demands, and create applications that are future-proof against the challenges of tomorrow.If you want to dive deeper into the integrations you can build with Storyblok and other services, check out Storybloks integrations page. You can also take your projects further by creating your own plugins with Storybloks plugin development resources.

As designers, we are always on the lookout for some fresh inspiration, and well, sometimes, the best inspiration lies right in front of us. With that in mind, we embarked on our wallpapers adventure more than thirteen years ago. The idea: to provide you with a new batch of beautiful and inspiring desktop wallpapers every month. This February is no exception, of course.The wallpapers in this post were designed by artists and designers from across the globe and come in versions with and without a calendar for February 2025. And since so many unique wallpaper designs have seen the light of day since we first started this monthly series, we also added some February oldies but goodies from our archives to the collection so maybe youll spot one of your almost-forgotten favorites in here, too?This wallpapers post wouldnt have been possible without the kind support of our wonderful community who tickles their creativity each month anew to keep the steady stream of wallpapers flowing. So, a huge thank-you to everyone who shared their designs with us this time around! If you too would like to get featured in one of our next wallpapers posts, please dont hesitate to submit your design. We cant wait to see what youll come up with! Happy February!You can click on every image to see a larger preview.We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit your wallpaper design! Feeling inspired? We are always looking for creative talent and would love to feature your desktop wallpaper in one of our upcoming posts. Join inFall In Love With YourselfWe dedicate February to Frida Kahlo to illuminate the world with color. Fall in love with yourself, with life and then with whoever you want. Designed by Veronica Valenzuela from Spain.previewwith calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Sweet ValentineEveryone deserves a sweet Valentines Day, no matter their relationship status. Its a day to celebrate love in all its forms self-love, friendship, and the love we share with others. A little kindness or just a little chocolate can make anyone feel special, reminding us that everyone is worthy of love and joy. Designed by LibraFire from Serbia.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440MochiDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Cyber VoodooDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Pop Into FunBlow the biggest bubbles, chew on the sweetest memories, and let your inner kid shine! Celebrate Bubble Gum Day with us and share the joy of every POP! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440BelieveBelieve reminds us to trust ourselves and our potential. It fuels faith, even in challenges, and drives us to pursue our dreams. Belief unlocks strength to overcome obstacles and creates possibilities. Its the foundation of success, starting with the courage to believe. Designed by Hitesh Puri from Delhi, India.previewwith calendar: 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440PlantsI wanted to draw some very cozy place, both realistic and cartoonish, filled with little details. A space with a slightly unreal atmosphere that some great shops or cafes have. A mix of plants, books, bottles, and shelves seemed like a perfect fit. I must admit, it took longer to draw than most of my other pictures! But it was totally worth it. Watch the making-of. Designed by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Love Is In The PlayForget Lady and the Tramp and their spaghetti kiss, cause Snowflake and Cloudy are enjoying their bliss. The cold and chilly February weather made our kitties knit themselves a sweater. Knitting and playing, the kitties tangled in the yarn and fell in love in your neighbors barn. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Farewell, WinterAlthough I love winter (mostly because of the fun winter sports), there are other great activities ahead. Thanks, winter, and see you next year! Designed by Igor Izhik from Canada.previewwithout calendar: 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600True LoveDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160BalloonsDesigned by Xenia Latii from Germany.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Magic Of MusicDesigned by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880FebpurraryI was doodling pictures of my cat one day and decided I could turn it into a fun wallpaper because a cold, winter night in February is the perfect time for staying in and cuddling with your cat, your significant other, or both! Designed by Angelia DiAntonio from Ohio, USA.previewwithout calendar: 320x480, 800x480, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Dog Year AheadDesigned by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Good Times AheadDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Romance Beneath The WavesThe 14th of February is just around the corner. And love is in the air, water, and everywhere! Designed by Teodora Vasileva from Bulgaria.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1280x720, 1280x960, 1280x1024, 1400x1050, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440February FernsDesigned by Nathalie Ouederni from France.previewwithout calendar: 320x480, 1024x768, 1280x1024, 1440x900, 1680x1200, 1920x1200, 2560x1440The Great BeyondDesigned by Lars Pauwels from Belgium.previewwithout calendar: 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 Its A Cupcake Kind Of DaySprinkles are fun, festive, and filled with love especially when topped on a cupcake! Everyone is creative in their own unique way, so why not try baking some cupcakes and decorating them for your sweetie this month? Something homemade, like a cupcake or DIY craft, is always a sweet gesture. Designed by Artsy Cupcake from the United States.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x800, 1280x1024, 1366x768, 1440x900, 1600x1200, 1680x1200, 1920x1200, 1920x1440, 2560x1440SnowDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1024x768.jpg title="Snow - 1024x768">1024x768, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1152x864.jpg title="Snow - 1152x864">1152x864, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x720.jpg title="Snow - 1280x720">1280x720, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x800.jpg title="Snow - 1280x800">1280x800, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x960.jpg title="Snow - 1280x960">1280x960, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1440x900.jpg title="Snow - 1440x900">1440x900, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1600x1200.jpg title="Snow - 1600x1200">1600x1200, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1680x1050.jpg title="Snow - 1680x1050">1680x1050, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1080.jpg title="Snow - 1920x1080">1920x1080, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1200.jpg title="Snow - 1920x1200">1920x1200, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1440.jpg title="Snow - 1920x1440">1920x1440, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-2560x1440.jpg title="Snow - 2560x1440">2560x1440, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1366x768.jpg title="Snow - 1366x768">1366x768, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-2880x1800.jpg title="Snow - 2880x1800">2880x1800Share The Same Orbit!I prepared a simple and chill layout design for February called Share The Same Orbit! which suggests to share the love orbit. Designed by Valentin Keleti from Romania.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Dark TemptationA dark romantic feel, walking through the city on a dark and rainy night. Designed by Matthew Talebi from the United States.previewwithout calendar: 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Ice Cream LoveMy inspiration for this wallpaper is the biggest love someone can have in life: the love for ice cream! Designed by Zlatina Petrova from Bulgaria.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Lovely DayDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Time ThiefWho has stolen our time? Maybe the time thief, so be sure to enjoy the other 28 days of February. Designed by Colorsfera from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1260x1440, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440In Another Place At The Same TimeFebruary is the month of love par excellence, but also a different month. Perhaps because it is shorter than the rest or because it is the one that makes way for spring, but we consider it a special month. It is a perfect month to make plans because we have already finished the post-Christmas crunch and we notice that spring and summer are coming closer. That is why I like to imagine that maybe in another place someone is also making plans to travel to unknown lands. Designed by Vernica Valenzuela from Spain.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440French FriesDesigned by Doreen Bethge from Germany.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Frozen WorldsA view of two frozen planets, lots of blue tints. Designed by Rutger Berghmans from Belgium.previewwithout calendar: 1280x800, 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440Out There, Theres Someone Like YouI am a true believer that out there in this world there is another person who is just like us, the problem is to find her/him. Designed by Maria Keller from Mexico.previewwithout calendar: 320x480, 640x480, 640x1136, 750x1334, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1242x2208, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Greben IcebreakerDanube is Europes second largest river, connecting ten different countries. In these cold days, when ice paralyzes rivers and closes waterways, a small but brave icebreaker called Greben (Serbian word for reef) seems stronger than winter. It cuts through the ice on erdap gorge (Iron Gate) the longest and biggest gorge in Europe thus helping the production of electricity in the power plant. This is our way to give thanks to Greben! Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440SharpI was sick recently and squinting through my blinds made a neat effect with shapes and colors. Designed by Dylan Baumann from Omaha, NE.previewwithout calendar: 320x480, 640x480, 800x600, 1024x1024, 1280x1024, 1600x1200, 1680x1200, 1920x1080, 1920x1440, 2560x1440On The Light SideDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160, printable PDFFebreweryI live in Madison, WI, which is famous for its breweries. Wisconsin even named their baseball team The Brewers. If you like beer, brats, and lots of cheese, its the place for you! Designed by Danny Gugger from the United States.previewwithout calendar: 320x480, 1020x768, 1280x800, 1280x1024, 1136x640, 2560x1440Love Angel VaderValentines Day is coming? Noooooooooooo! Designed by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x960, 1024x768, 1024x1024, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1050, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Made In JapanSee the beautiful colors, precision, and the nature of Japan in one picture. Designed by Fatih Yilmaz from the Netherlands.previewwithout calendar: 1280x720, 1280x960, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1440, 2560x1440, 3840x2160GroundhogThe Groundhog emerged from its burrow on February 2. If it is cloudy, then spring will come early, but if it is sunny, the groundhog will see its shadow, will retreat back into its burrow, and the winter weather will continue for six more weeks. Designed by Oscar Marcelo from Portugal.previewwithout calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440

I recently wrote for Smashing Magazine about how UX leaders face increasing pressure to deliver more with limited resources. Let me show you how a digital playbook can help meet this challenge by enhancing our works visibility while boosting efficiency.While a design system ensures visual coherence, a digital playbook lays out the strategic and operational framework for how digital projects should be executed and managed. Heres why a digital playbook deserves a place in your organizations toolbox and what it should include to drive meaningful impact.What Is A Digital Playbook?A digital playbook is essentially your organizations handbook for navigating the complexities of digital work. As a user experience consultant, I often help organizations create tools like this to streamline their processes and improve outcomes. Its a collection of strategies, principles, and processes that provide clarity on how to handle everything from website creation to content management and beyond. Think of it as a how-to guide for all things digital.Unlike rigid rulebooks that feel constraining, youll find that a playbook evolves with your organizations unique culture and challenges. You can use it to help stakeholders learn, standardize your work, and help everybody be more effective. Let me show you how a playbook can transform the way your team works.Why You Need A Digital PlaybookHave you ever faced challenges like these?Stakeholders with conflicting expectations of what the digital team should deliver.Endless debates over project priorities and workflows that stall progress.A patchwork of tools and inconsistent policies that create confusion.Uncertainty about best practices, leading to inefficiencies and missed opportunities.Let me show you how a playbook can help you and your team in four key ways:It helps you educate your stakeholders by making digital processes transparent and building trust. Ive found that when you explain best practices clearly, everyone gets on the same page quickly.Youll streamline your processes with clear, standardized workflows. This means less confusion and faster progress on your projects.Your digital team gains more credibility as you step into a leadership role. Youll be able to show your real value to the organization.Best of all, youll reduce friction in your daily work. When everyone understands the policies, youll face fewer misunderstandings and conflicts.A digital playbook isnt just a tool; its a way to transform challenges into opportunities for greater impact.But, no doubt you are wondering, what exactly goes into a digital playbook?Key Components Of A Digital PlaybookEvery digital playbook is unique, but if youve ever wondered where to start, here are some key areas to consider. Lets walk through them together.Engaging With The Digital TeamHave you ever had people come to you too late in the process or approach you with solutions rather than explaining the underlying problems? A playbook can help mitigate these issues by providing clear guidance on:How to request a new website or content update at the right time;What information you require to do your job;What stakeholders need to consider before requesting your help.By addressing these common challenges, youre not just reducing your frustrations youre educating stakeholders and encouraging better collaboration.Digital Project LifecycleMost digital projects can feel overwhelming without a clear structure, especially for stakeholders who may not understand the intricacies of the process. Thats why its essential to communicate the key phases clearly to those requesting your teams help. For example:Discovery: Explain how your team will research goals, user needs, and requirements to ensure the project starts on solid ground.Prototyping: Highlight the importance of testing initial concepts to validate ideas before full development.Build: Detail the process of developing the final product and incorporating feedback.Launch: Set clear expectations for rolling out the project with a structured plan.Management: Clarify how the team will optimize and maintain the product over time.Retirement: Help stakeholders understand when and how to phase out outdated tools or content effectively.Ive structured the lifecycle this way to help stakeholders understand what to expect. When they know whats happening at each stage, it builds trust and helps the working relationship. Stakeholders will see exactly what role you play and how your team adds value throughout the process.Publishing Best PracticesWriting for the web isnt the same as traditional writing, and its critical for your team to help stakeholders understand the differences. Your playbook can include practical advice to guide them, such as:Planning and organizing content to align with user needs and business goals.Crafting content thats user-friendly, SEO-optimized, and designed for clarity.Maintaining accessible and high-quality standards to ensure inclusivity.By providing this guidance, you empower stakeholders to create content thats not only effective but also reflects your teams standards.Understanding Your UsersHelping stakeholders understand your audience is essential for creating user-centered experiences. Your digital playbook can support this by including:Detailed user personas that highlight specific needs and behaviors.Recommendations for tools and methods to gather and analyze user data.Practical tips for ensuring digital experiences are inclusive and accessible to all.By sharing this knowledge, your team helps stakeholders make decisions that prioritize users, ultimately leading to more successful outcomes.Recommended ResourcesStakeholders often are unaware of the wealth of resources that can help them improve their digital deliverables. Your playbook can help by recommending trusted solutions, such as:Tools that enable stakeholders to carry out their own user research and testing.Analytics tools that allow stakeholders to track the performance of their websites.A list of preferred suppliers in case stakeholders need to bring in external experts.These recommendations ensure stakeholders are equipped with reliable resources that align with your teams processes.Policies And GovernanceUncertainty about organizational policies can lead to confusion and missteps. Your playbook should provide clarity by outlining:Accessibility and inclusivity standards to ensure compliance and user satisfaction.Data privacy and security protocols to safeguard user information.Clear processes for prioritizing and governing projects to maintain focus and consistency.By setting these expectations, your team establishes a foundation of trust and accountability that stakeholders can rely on.Of course, you can have the best digital playbook in the world, but if people dont reference it, then it is a wasted opportunity.Making Your Digital Playbook StickIt falls to you and your team to ensure as many stakeholders as possible engage with your playbook. Try the following:Make It Easy to FindHow often do stakeholders struggle to find important resources? Avoid hosting the playbook in a forgotten corner of your intranet. Instead, place it front and center on a well-maintained, user-friendly site thats accessible to everyone.Keep It EngagingLets face it nobody wants to sift through walls of text. Use visuals like infographics, short explainer videos, and clear headings to make your playbook not only digestible but also enjoyable to use. Think of it as creating a resource your stakeholders will actually want to refer back to.Frame It as a ResourceA common pitfall is presenting the playbook as a rigid set of rules. Instead, position it as a helpful guide designed to make everyones work easier. Highlight how it can simplify workflows, improve outcomes, and solve real-world problems your stakeholders face daily.Share at Relevant MomentsDont wait for stakeholders to find the playbook themselves. Instead, proactively share relevant sections when theyre most needed. For example, send the discovery phase documentation when starting a new project or share content guidelines when someone is preparing to write for the website. This just-in-time approach ensures the playbooks guidance is applied when it matters most.Start Small, Then ScaleCreating a digital playbook might sound like a daunting task, but it doesnt have to be. Begin with a few core sections and expand over time. Assign ownership to a specific team or individual to ensure it remains updated and relevant.In the end, a digital playbook is an investment. It saves time, reduces conflicts, and elevates your organizations digital maturity.Just as a design system is critical for visual harmony, a digital playbook is essential for operational excellence.Further Reading On SmashingMagDesign Patterns Are A Better Way To Collaborate On Your Design System, Ben ClemensDesign Systems: Useful Examples and Resources, Cosima MielkeBuilding Components For Consumption, Not Complexity (Part 1), Luis OuriachTaking The Stress Out Of Design System Management, Masha Shaposhnikova

Animating from and to display: none; was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldnt do this in CSS is explained in the new CSS Transitions Level 2 specification:In Level 1 of this specification, transitions can only start during a style change event for elements that have a defined before-change style established by the previous style change event. That means a transition could not be started on an element that was not being rendered for the previous style change event.In simple terms, this means that we couldnt start a transition on an element that is hidden or that has just been created.What Does transition-behavior: allow-discrete Do?allow-discrete is a bit of a strange name for a CSS property value, right? We are going on about transitioning display: none, so why isnt this named transition-behavior: allow-display instead? The reason is that this does a bit more than handling the CSS display property, as there are other discrete properties in CSS. A simple rule of thumb is that discrete properties do not transition but usually flip right away between two states. Other examples of discrete properties are visibility and mix-blend-mode. Ill include an example of these at the end of this article.To summarise, setting the transition-behavior property to allow-discrete allows us to tell the browser it can swap the values of a discrete property (e.g., display, visibility, and mix-blend-mode) at the 50% mark instead of the 0% mark of a transition.What Does @starting-style Do?The @starting-style rule defines the styles of an element right before it is rendered to the page. This is highly needed in combination with transition-behavior and this is why:When an item is added to the DOM or is initially set to display: none, it needs some sort of starting style from which it needs to transition. To take the example further, popovers and dialog elements are added to a top layer which is a layer that is outside of your document flow, you can kind of look at it as a sibling of the <html> element in your pages structure. Now, when opening this dialog or popover, they get created inside that top layer, so they dont have any styles to start transitioning from, which is why we set @starting-style. Dont worry if all of this sounds a bit confusing. The demos might make it more clearly. The important thing to know is that we can give the browser something to start the animation with since it otherwise has nothing to animate from.A Note On Browser SupportAt the moment of writing, the transition-behavior is available in Chrome, Edge, Safari, and Firefox. Its the same for @starting-style, but Firefox currently does not support animating from display: none. But remember that everything in this article can be perfectly used as a progressive enhancement.Now that we have the theory of all this behind us, lets get practical. Ill be covering three use cases in this article:Animating from and to display: none in the DOM.Animating dialogs and popovers entering and exiting the top layer.More discrete properties we can handle.Animating From And To display: none In The DOMFor the first example, lets take a look at @starting-style alone. I created this demo purely to explain the magic. Imagine you want two buttons on a page to add or remove list items inside of an unordered list.This could be your starting HTML:<button type="button" class="btn-add"> Add item</button><button type="button" class="btn-remove"> Remove item</button><ul role="list"></ul>Next, we add actions that add or remove those list items. This can be any method of your choosing, but for demo purposes, I quickly wrote a bit of JavaScript for it:document.addEventListener("DOMContentLoaded", () => { const addButton = document.querySelector(".btn-add"); const removeButton = document.querySelector(".btn-remove"); const list = document.querySelector('ul[role="list"]'); addButton.addEventListener("click", () => { const newItem = document.createElement("li"); list.appendChild(newItem); }); removeButton.addEventListener("click", () => { if (list.lastElementChild) { list.lastElementChild.classList.add("removing"); setTimeout(() => { list.removeChild(list.lastElementChild); }, 200); } });});When clicking the addButton, an empty list item gets created inside of the unordered list. When clicking the removeButton, the last item gets a new .removing class and finally gets taken out of the DOM after 200ms.With this in place, we can write some CSS for our items to animate the removing part:ul { li { transition: opacity 0.2s, transform 0.2s; &.removing { opacity: 0; transform: translate(0, 50%); } } }This is great! Our .removing animation is already looking perfect, but what we were looking for here was a way to animate the entry of items coming inside of our DOM. For this, we will need to define those starting styles, as well as the final state of our list items.First, lets update the CSS to have the final state inside of that list item:ul { li { opacity: 1; transform: translate(0, 0); transition: opacity 0.2s, transform 0.2s; &.removing { opacity: 0; transform: translate(0, 50%); } } }Not much has changed, but now its up to us to let the browser know what the starting styles should be. We could set this the same way we did the .removing styles like so:ul { li { opacity: 1; transform: translate(0, 0); transition: opacity 0.2s, transform 0.2s; @starting-style { opacity: 0; transform: translate(0, 50%); } &.removing { opacity: 0; transform: translate(0, 50%); } } }Now weve let the browser know that the @starting-style should include zero opacity and be slightly nudged to the bottom using a transform. The final result is something like this:But we dont need to stop there! We could use different animations for entering and exiting. We could, for example, update our starting style to the following:@starting-style { opacity: 0; transform: translate(0, -50%);}Doing this, the items will enter from the top and exit to the bottom. See the full example in this CodePen:See the Pen @starting-style demo - up-in, down-out [forked] by utilitybend.When To Use transition-behavior: allow-discreteIn the previous example, we added and removed items from our DOM. In the next demo, we will show and hide items using the CSS display property. The basic setup is pretty much the same, except we will add eight list items to our DOM with the .hidden class attached to it: <button type="button" class="btn-add"> Show item </button> <button type="button" class="btn-remove"> Hide item </button><ul role="list"> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li> <li class="hidden"></li></ul>Once again, for demo purposes, I added a bit of JavaScript that, this time, removes the .hidden class of the next item when clicking the addButton and adds the hidden class back when clicking the removeButton:document.addEventListener("DOMContentLoaded", () => { const addButton = document.querySelector(".btn-add"); const removeButton = document.querySelector(".btn-remove"); const listItems = document.querySelectorAll('ul[role="list"] li'); let activeCount = 0; addButton.addEventListener("click", () => { if (activeCount < listItems.length) { listItems[activeCount].classList.remove("hidden"); activeCount++; } }); removeButton.addEventListener("click", () => { if (activeCount > 0) { activeCount--; listItems[activeCount].classList.add("hidden"); } });});Lets put together everything we learned so far, add a @starting-style to our items, and do the basic setup in CSS:ul { li { display: block; opacity: 1; transform: translate(0, 0); transition: opacity 0.2s, transform 0.2s; @starting-style { opacity: 0; transform: translate(0, -50%); } &.hidden { display: none; opacity: 0; transform: translate(0, 50%); } } }This time, we have added the .hidden class, set it to display: none, and added the same opacity and transform declarations as we previously did with the .removing class in the last example. As you might expect, we get a nice fade-in for our items, but removing them is still very abrupt as we set our items directly to display: none.This is where the transition-behavior property comes into play. To break it down a bit more, lets remove the transition property shorthand of our previous CSS and open it up a bit:ul { li { display: block; opacity: 1; transform: translate(0, 0); transition-property: opacity, transform; transition-duration: 0.2s; } }All that is left to do is transition the display property and set the transition-behavior property to allow-discrete:ul { li { display: block; opacity: 1; transform: translate(0, 0); transition-property: opacity, transform, display; transition-duration: 0.2s; transition-behavior: allow-discrete; /* etc. */ } }We are now animating the element from display: none, and the result is exactly as we wanted it:We can use the transition shorthand property to make our code a little less verbose:transition: opacity 0.2s, transform 0.2s, display 0.2s allow-discrete;You can add allow-discrete in there. But if you do, take note that if you declare a shorthand transition after transition-behavior, it will be overruled. So, instead of this:transition-behavior: allow-discrete;transition: opacity 0.2s, transform 0.2s, display 0.2s;we want to declare transition-behavior after the transition shorthand:transition: opacity 0.2s, transform 0.2s, display 0.2s;transition-behavior: allow-discrete;Otherwise, the transition shorthand property overrides transition-behavior.See the Pen @starting-style and transition-behavior: allow-discrete [forked] by utilitybend.Animating Dialogs And Popovers Entering And Exiting The Top LayerLets add a few use cases with dialogs and popovers. Dialogs and popovers are good examples because they get added to the top layer when opening them.What Is That Top Layer?Weve already likened the top layer to a sibling of the <html> element, but you might also think of it as a special layer that sits above everything else on a web page. It's like a transparent sheet that you can place over a drawing. Anything you draw on that sheet will be visible on top of the original drawing.The original drawing, in this example, is the DOM. This means that the top layer is out of the document flow, which provides us with a few benefits. For example, as I stated before, dialogs and popovers are added to this top layer, and that makes perfect sense because they should always be on top of everything else. No more z-index: 9999! But its more than that:z-index is irrelevant: Elements on the top layer are always on top, regardless of their z-index value.DOM hierarchy doesnt matter: An elements position in the DOM doesnt affect its stacking order on the top layer.Backdrops: We get access to a new ::backdrop pseudo-element that lets us style the area between the top layer and the DOM beneath it.Hopefully, you are starting to understand the importance of the top layer and how we can transition elements in and out of it as we would with popovers and dialogues.Transitioning The Dialog Element In The Top LayerThe following HTML contains a button that opens a <dialog> element, and that <dialog> element contains another button that closes the <dialog>. So, we have one button that opens the <dialog> and one that closes it.<button class="open-dialog" data-target="my-modal">Show dialog</button><dialog id="my-modal"> <p>Hi, there!</p> <button class="outline close-dialog" data-target="my-modal"> close </button></dialog>A lot is happening in HTML with invoker commands that will make the following step a bit easier, but for now, lets add a bit of JavaScript to make this modal actually work:// Get all open dialog buttons.const openButtons = document.querySelectorAll(".open-dialog");// Get all close dialog buttons.const closeButtons = document.querySelectorAll(".close-dialog");// Add click event listeners to open buttons.openButtons.forEach((button) =< { button.addEventListener("click", () =< { const targetId = button.getAttribute("data-target"); const dialog = document.getElementById(targetId); if (dialog) { dialog.showModal(); } });});// Add click event listeners to close buttons.closeButtons.forEach((button) =< { button.addEventListener("click", () =< { const targetId = button.getAttribute("data-target"); const dialog = document.getElementById(targetId); if (dialog) { dialog.close(); } });});Im using the following styles as a starting point. Notice how Im styling the ::backdrop as an added bonus!dialog { padding: 30px; width: 100%; max-width: 600px; background: #fff; border-radius: 8px; border: 0; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; &::backdrop { background-image: linear-gradient( 45deg in oklab, oklch(80% 0.4 222) 0%, oklch(35% 0.5 313) 100% ); }}This results in a pretty hard transition for the entry, meaning its not very smooth:Lets add transitions to this dialog element and the backdrop. Im going a bit faster this time because by now, you likely see the pattern and know whats happening:dialog { opacity: 0; translate: 0 30%; transition-property: opacity, translate, display; transition-duration: 0.8s; transition-behavior: allow-discrete; &[open] { opacity: 1; translate: 0 0; @starting-style { opacity: 0; translate: 0 -30%; } }}When a dialog is open, the browser slaps an open attribute on it:<dialog open> ... </dialog>And thats something else we can target with CSS, like dialog[open]. So, in this case, we need to set a @starting-style for when the dialog is in an open state.Lets add a transition for our backdrop while were at it:dialog { /* etc. */ &::backdrop { opacity: 0; transition-property: opacity; transition-duration: 1s; } &[open] { /* etc. */ &::backdrop { opacity: 0.8; @starting-style { opacity: 0; } } }}Now youre probably thinking: A-ha! But you should have added the display property and the transition-behavior: allow-discrete on the backdrop!But no, that is not the case. Even if I would change my backdrop pseudo-element to the following CSS, the result would stay the same: &::backdrop { opacity: 0; transition-property: opacity, display; transition-duration: 1s; transition-behavior: allow-discrete; }It turns out that we are working with a ::backdrop and when working with a ::backdrop, were implicitly also working with the CSS overlay property, which specifies whether an element appearing in the top layer is currently rendered in the top layer. And overlay just so happens to be another discrete property that we need to include in the transition-property declaration:dialog { /* etc. */&::backdrop { transition-property: opacity, display, overlay; /* etc. */}Unfortunately, this is currently only supported in Chromium browsers, but it can be perfectly used as a progressive enhancement.And, yes, we need to add it to the dialog styles as well:dialog { transition-property: opacity, translate, display, overlay; /* etc. */&::backdrop { transition-property: opacity, display, overlay; /* etc. */}See the Pen Dialog: starting-style, transition-behavior, overlay [forked] by utilitybend.Its pretty much the same thing for a popover instead of a dialog. Im using the same technique, only working with popovers this time:See the Pen Popover transition with @starting-style [forked] by utilitybend.Other Discrete PropertiesThere are a few other discrete properties besides the ones we covered here. If you remember the second demo, where we transitioned some items from and to display: none, the same can be achieved with the visibility property instead. This can be handy for those cases where you want items to preserve space for the elements box, even though it is invisible.So, heres the same example, only using visibility instead of display.See the Pen Transitioning the visibility property [forked] by utilitybend.The CSS mix-blend-mode property is another one that is considered discrete. To be completely honest, I cant find a good use case for a demo. But I went ahead and created a somewhat trite example where two mix-blend-modes switch right in the middle of the transition instead of right away.See the Pen Transitioning mix-blend-mode [forked] by utilitybend.Wrapping UpThats an overview of how we can transition elements in and out of the top layer! In an ideal world, we could get away without needing a completely new property like transition-behavior just to transition otherwise un-transitionable properties, but here we are, and Im glad we have it.But we also got to learn about @starting-style and how it provides browsers with a set of styles that we can apply to the start of a transition for an element thats in the top layer. Otherwise, the element has nothing to transition from at first render, and wed have no way to transition them smoothly in and out of the top layer.

Svelte occupies a curious space within the web development world. Its been around in one form or another for eight years now, and despite being used by the likes of Apple, Spotify, IKEA, and the New York Times, it still feels like something of an upstart, maybe even a black sheep. As creator Rich Harris recently put it,If React is Taylor Swift, were more of a Phoebe Bridges. Shes critically acclaimed, and youve heard of her, but you probably cant name that many of her songs. Rich HarrisThis may be why the release of Svelte 5 in October this year felt like such a big deal. It tries to square the circle of convention and innovation. Can it remain one of the best-loved frameworks on the web while shaking off suspicions that it cant quite rub shoulders with React, Vue, and others when it comes to scalability? Whisper it, but they might just have pulled it off. The post-launch reaction has been largely glowing, with weekly npm downloads doubling compared to six months ago. Still, Im not in the predictions game. The coming months and years will be the ultimate measure of Svelte 5. And why speculate on the most pressing questions when I can just ask Rich Harris myself? He kindly took some time to chat with me about Svelte and the future of web development.Not Magic, But MagicalSvelte 5 is a ground-up rewrite. I dont want to get into the weeds here key changes are covered nicely in the migration guide but suffice it to say the big one where day-to-day users are concerned is runes. At times, magic feeling $ has given way to the more explicit $state, $derived, and $effect.A lot of the talk around Svelte 5 included the sentiment that it marks the maturation of the framework. To Harris and the Svelte team, it feels like a culmination, with lessons learned combined with aspirations to form something fresh yet familiar. This does sort of feel like a new chapter. Im trying to build something that you dont feel like you need to get a degree in it before you can be productive in it. And that seems to have been carried through with Svelte 5. Rich HarrisAlthough raw usage numbers arent everything, seeing the uptick in installations has been a welcome signal for Harris and the Svelte team.For us, success is definitely not based around adoption, though seeing the number go up and to the right gives us reassurance that were doing the right thing and were on the right track. Even if its not the goal, it is a useful indication. But success is really people building their apps with this framework and building higher quality, more resilient, more accessible apps. Rich HarrisThe tenets of a Svelte philosophy outlined by Harris earlier this year reinforce the point:The web matters.Optimise for vibes.Dont optimise for adoption.HTML, The Mother Language.Embrace progress.Numbers lie.Magical, not magic.Dream big.No one cares.Design by consensus.Click the link above to hear these expounded upon, but you get the crux. Svelte is very much a qualitative project. Although Svelte performs well in a fair few performance metrics itself, Harris has long been a critic of metrics like Lighthouse being treated as ends in themselves. Fastest doesnt necessarily mean best. At the end of the day, we are all in the business of making quality websites.Frameworks are a means to that end, and Harris sees plenty of work to be done there. Software Is BrokenEvery milestone is a cause for celebration. Its also a natural pause in which to ask, Now what? For the Svelte team, the sights seem firmly set on shoring up the quality of the web. A conclusion that we reached over the course of a recent discussion is that most software in the world is kind of terrible. Things are not good. Half the stuff on my phone just doesnt work. It fails at basic tasks. And the same is true for a lot of websites. The number of times Ive had to open DevTools to remove the disabled attribute from a button so that I can submit a form, or been unclear on whether a payment went through or not. Rich HarrisThis certainly meshes with my experience and, doubtless, countless others. Between enshittification, manipulative algorithms, and the seemingly endless influx of AI-generated slop, its hard to shake the feeling that the web is becoming increasingly decadent and depraved. So many pieces of software that we use are just terrible. Theyre just bad software. And its not because software engineers are idiots. Our main priority as toolmakers should be to enable people to build software that isnt broken. As a baseline, people should be able to build software that works. Rich HarrisThis sense of responsibility for the creation and maintenance of good software speaks to the Svelte teams holistic outlook and also looks to influence priorities going forward.Brave New WorldPart of Svelte 5 feels like a new chapter in the sense of fresh foundations. Anyone whos worked in software development or web design will tell you how much of a headache ground-up rewrites are. Rebuilding the foundations is something to celebrate when you pull it off, but it also begs the question: What are the foundations for?Harris has his eyes on the wider ecosystem around frameworks.I dont think theres a lot more to do to solve the problem of taking some changing application state and turning it into DOM, but I think theres a huge amount to be done around the ancillary problems. How do we load the data that we put in those components? Where does that data live? How do we deploy our applications? Rich HarrisIn the short to medium term, this will likely translate into some love for SvelteKit, the web application framework built around Svelte. The framework might start having opinions about authentication and databases, an official component library perhaps, and dev tools in the spirit of the Astro dev toolbar. And all these could be precursors to even bigger explorations.I want there to be a Rails or a Laravel for JavaScript. In fact, I want there to be multiple such things. And I think that at least part of Sveltes long-term goal is to be part of that. There are too many things that you need to learn in order to build a full stack application today using JavaScript. Rich HarrisWhy Dont We Have A Laravel For JavaScript? by Theo BrowneWhy We Dont Have a Laravel For JavaScript... Yet by Vince CangerOnwardAlthough Svelte has been ticking along happily for years, the release of version 5 has felt like a new lease of life for the ecosystem around it. Every day brings new and exciting projects to the front page of the /r/sveltejs subreddit, while this years Advent of Svelte has kept up a sense of momentum following the stable release.Below are just a handful of the Svelte-based projects that have caught my eye:webvm: Virtual Machine for the Web number-flow: An animated number component for React, Vue, and Sveltesveltednd: A lightweight, flexible drag and drop library for Svelte 5 applicationsThrelte 8 Despite the turbulence and inescapable sense of existential dread surrounding much tech, this feels like an exciting time for web development. The conditions are ripe for lovely new things to emerge.And as for Svelte 5 itself, what does Rich Harris say to those who might be on the fence?I would say you have nothing to lose but an afternoon if you try it. We have a tutorial that will take you from knowing nothing about Svelte or even existing frameworks. You can go from that to being able to build applications using Svelte in three or four hours. If you just want to learn Svelte basics, then thats an hour. Try it. Rich HarrisFurther Reading On SmashingMagHow To Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit, Sriram ThiagarajanWeb Development Is Getting Too Complex, And It May Be Our Fault, Juan Diego RodrguezVanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering, Frederik DohrThe Hype Around Signals, Atila Fassina

This article is a sponsored by StoryblokOpen source is the backbone of modern software development. As someone deeply involved in both community-driven and company-driven open source, Ive had the privilege of experiencing its diverse approaches firsthand. This article dives into what modern OSS (Open Source) authoring looks like, focusing on front-end JavaScript libraries such as TresJS and tools Ive contributed to at Storyblok.But let me be clear:Theres no universal playbook for OSS. Every language, framework, and project has its own workflows, rules, and culture and thats okay. These variations are what make open source so adaptable and diverse.The Art Of OSS AuthoringAuthoring an open-source project often begins with scratching your own itch solving a problem you face as a developer. But as your experiment gains traction, the challenge shifts to addressing diverse use cases while maintaining the simplicity and focus of the original idea.Take TresJS as an example. All I wanted was to add 3D to my personal Nuxt portfolio, but at that time, there wasnt a maintained, feature-rich alternative to React Three Fiber in VueJS. So, I decided to create one. Funny enough, after two years after the librarys launch, my portfolio remains unfinished.Community-driven OSS Authoring: Lessons From TresJSContinuing with TresJS as an example of a community-driven OSS project, the community has been an integral part of its growth, offering ideas, filing issues (around 531 in total), and submitting pull requests (around 936 PRs) of which 90% eventually made it to production. As an author, this is the best thing that can happen its probably one of the biggest reasons I fell in love with open source. The continuous collaboration creates an environment where new ideas can evolve into meaningful contributions.However, it also comes with its own challenges. The more ideas come in, the harder it becomes to maintain the projects focus on its original purpose.As authors, its our responsibility to keep the vision of the library clear even if that means saying no to great ideas from the community.Over time, some of the most consistent collaborators became part of a core team, helping to share the responsibility of maintaining the library and ensuring it stays aligned with its original goals.Another crucial aspect of scaling a project, especially one like TresJS, which has grown into an ecosystem of packages, is the ability to delegate. The more the project expands, the more essential it becomes to distribute responsibilities among contributors. Delegation helps in reducing the burden of the massive workload and empowers contributors to take ownership of specific areas. As a core author, its equally important to provide the necessary tools, CI workflows, and clear conventions to make the process of contributing as simple and efficient as possible. A well-prepared foundation ensures that new and existing collaborators can focus on what truly matters pushing the project forward.Company-driven OSS Authoring: The Storyblok PerspectiveNow that weve explored the bright spots and challenges of community-driven OSS lets jump into a different realm: company-driven OSS.I had experience with inner-source and open-source in previous companies, so I already had a grasp of how OSS works in the context of a company environment. However, my most meaningful experience would come later, specifically earlier this year, when I switched my role from DevRel to a full-time Developer Experience Engineer, and I say full-time because before taking the role, I was already contributing to Storybloks SDK ecosystem.At Storyblok, open source plays a crucial role in how we engage with developers and how they seamlessly use our product with their favorite framework. Our goal is to provide the same developer experience regardless of the flavor, making the experience of using Storyblok as simple, effective, and enjoyable as possible.To achieve this, its crucial to balance the needs of the developer community which often reflect the needs of the clients they work for with the companys broader goals. One of the things I find more challenging is managing expectations. For instance, while the community may want feature requests and bug fixes to be implemented quickly, the companys priorities might dictate focusing on stability, scalability, and often strategic integrations. Clear communication and prioritization are key to maintaining healthy alignment and trust between both sides.One of the unique advantages of company-driven open source is the availability of resources:Dedicated engineering time,Infrastructure (which many OSS authors often cannot afford),Access to knowledge from internal teams like design, QA, and product management.However, this setup often comes with the challenge of dealing with legacy codebases typically written by developers who may not be familiar with OSS principles. This can lead to inconsistencies in structure, testing, and documentation that require significant refactoring before the project can align with open-source best practices.Navigating The Spectrum: Community vs. CompanyI like to think of community-driven OSS as being like jazz musicfreeform, improvised, and deeply collaborative. In contrast, company-driven OSS resembles an orchestra, with a conductor guiding the performance and ensuring all the pieces fit together seamlessly.The truth is that most OSS projects if not the vast majority exist somewhere along this spectrum. For example, TresJS began as a purely community-driven project, but as it matured and gained traction, elements of structured decision-making more typical of company-driven projects became necessary to maintain focus and scalability. Together with the core team, we defined a vision and goals for the project to ensure it continued to grow without losing sight of its original purpose.Interestingly, the reverse is also true: Company-driven OSS can benefit significantly from the fast-paced innovation seen in community-driven projects.Many of the improvements Ive introduced to the Storyblok ecosystem since joining were inspired by ideas first explored in TresJS. For instance, migrating the TresJS ecosystem to pnpm workspaces demonstrated how streamlined dependency management could improve development workflows like playgrounds and e2e an approach we gradually adapted later for Storybloks ecosystem.Similarly, transitioning Storyblok testing from Jest to Vitest, with its improved performance and developer experience, was influenced by how testing is approached in community-driven projects. Likewise, our switch from Prettier to ESLints v9 flat configuration with auto-fix helped consolidate linting and formatting into a single workflow, streamlining developer productivity.Even more granular processes, such as modernizing CI workflows, found their way into Storyblok. TresJSs evolution from a single monolithic release action to granular steps for linting, testing, and building provided a blueprint for enhancing our pipelines at Storyblok. We also adopted continuous release practices inspired by pkg.pr.new, enabling faster delivery of incremental changes and testing package releases in real client projects to gather immediate feedback before merging the PRs.That said, TresJS also benefited from my experiences at Storyblok, which had a more mature and battle-tested ecosystem, particularly in adopting automated processes. For example, we integrated Dependabot to keep dependencies up to date and used auto-merge to reduce manual intervention for minor updates, freeing up contributors time for more meaningful work. We also implemented an automatic release pipeline using GitHub Actions, inspired by Storybloks workflows, ensuring smoother and more reliable releases for the TresJS ecosystem.The Challenges of Modern OSS AuthoringThroughout this article, weve touched on several modern OSS challenges, but if one deserves the crown, its managing breaking changes and maintaining compatibility. We know how fast the pace of technology is, especially on the web, and users expect libraries and tools to keep up with the latest trends. Im not the first person to say that hype-driven development can be fun, but it is inherently risky and not your best ally when building reliable, high-performance software especially in enterprise contexts.Breaking changes exist. Thats why semantic versioning comes into play to make our lives easier. However, it is equally important to balance innovation with stability. This becomes more crucial when introducing new features or refactoring for better performance, breaking existing APIs. One key lesson Ive learned particularly during my time at Storyblok is the importance of clear communication. Changelogs, migration guides, and deprecation warnings are invaluable tools to smoothen the transition for users.A practical example:My first project as a Developer Experience Engineer was introducing @storyblok/richtext, a library for rich-text processing that (at the time of writing) sees around 172k downloads per month. The library was crafted during my time as a DevRel, but transitioning users to it from the previous rich-text implementation across the ecosystem required careful planning. Since the library would become a dependency of the fundamental JS SDK and from there propagate to all the framework SDKs together with my manager, we planned a multi-month transition with a retro-compatible period before the major release. This included communication campaigns, thorough documentation, and gradual adoption to minimize disruption.Despite these efforts, mistakes happened and thats okay. During the rich-text transition, there were instances where updates didnt arrive on time or where communication and documentation were temporarily out of sync. This led to confusion within the community, which we addressed by providing timely support on GitHub issues and Discord. These moments served as reminders that even with semantic versioning, modular architectures, and meticulous planning, OSS authoring is never perfect. Mistakes are part of the process.And that takes us to the following point.ConclusionOpen-source authoring is a journey of continuous learning. Each misstep offers a chance to improve, and each success reinforces the value of collaboration and experimentation.Theres no perfect way to do OSS, and thats the beauty of it. Every project has its own set of workflows, challenges, and quirks shaped by the community and its contributors. These differences make open source adaptable, dynamic, fun, and, above all, impactful. No matter if youre building something entirely new or contributing to an existing project, remember that progress, not perfection, is the goal.So, keep contributing, experimenting, and sharing your work. Every pull request, issue, and idea you put forward brings value &mdashp not just to your project but to the broader ecosystem.Happy coding!

There seemed to be a hot minute when the tech industry understood the value of idle tinkering and made a point of providing side project time as an explicit working perk. The concept endures Im lucky enough to work somewhere that has it but it seems to have been outpaced in recent years by the endless charge toward efficiency.This seems a shame. We cant optimize our way to quality solutions and original ideas. To try is a self-defeating fantasy. The value of side project time is hard to overstate, and more workplaces should not just provide it but actively encourage it. Heres why.What Is Side Project Time?Side project time pops up under different names. At the Guardian, its 10% time, for example. Whatever the name, it amounts to the same thing: dedicated space and time during working hours for people to work on pet projects, independent learning, and personal development.Google founders Larry Page and Sergey Brin famously highlighted the practice as part of the companys initial public offering in 2004, writing:We encourage our employees, in addition to their regular projects, to spend 20% of their time working on what they think will most benefit Google. This empowers them to be more creative and innovative. Many of our significant advances have happened in this manner. For example, AdSense for content and Google News were both prototyped in 20% time. Most risky projects fizzle, often teaching us something. Others succeed and become attractive businesses. Larry Page and Sergey BrinThe extent to which Google still supports the practice 20 years on is hazy, and though other tech big hitters talk a good game, it doesnt seem terribly widespread. The concept threatened to become mainstream for a while but has receded.The OdeThere are countless benefits to side project time, both on an individual and corporate level. Whether your priorities are personal growth or making lines, it ought to be on your radar.IndividualsOn an individual level, side project time frees up people to explore ideas and concepts that interest them. This is good in itself. We all, of course, hope to nurture existing skills and develop new ones in our day-to-day work. Sometimes day to day work provides that. Sometimes it doesnt. In either case, side project time opens up new avenues for exploration.It is also a space in which the waters can clear. Ive previously written about the lessons of zen philosophy as they relate to pet project maintenance, with a major aspect being the value of not doing. Getting things done isnt always the same as making things better.The fog of constant activity or productivity can actually keep us from seeing better solutions to problems. Side project time makes for clearer minds to take back with us into the day-to-day grind.Dedicated side project time facilitates personal growth, exploration, and learning. This is obviously good for the individual, but for the project too, because where are the benefits going to be felt?CompaniesThere are a couple of examples of similar company outlooks Id like to highlight. One is Pixars philosophy as outlined by co-founder Ed Catmull of protecting ugly babies, i.e. rough, unformed ideas:A new thing is hard to define; its not attractive, and it requires protection. When I was a researcher at DARPA, I had protection for what was ill-defined. Every new idea in any field needs protection. Pixar is set up to protect our directors ugly baby. Ed CatmullHe goes on to point out that they must eventually stand on their own two feet if they are to step out of the sandbox, but that formative time is vital to their development.The mention of DARPA (the Defense Advanced Research Projects Agency), a research and development agency, highlights this outlook, with Bell Labs being one of its shining examples. Its work has received ten Nobel Prizes and five Turing Awards over the years.As journalist Jon Gertner summarised in The Idea Factory: Bell Labs and the Great Age of American Innovation:It is now received wisdom that innovation and competitiveness are closely linked. But Bell Labs history demonstrates that the truth is actually far more complicatedcreative environments that foster a rich exchange of ideas are far more important in eliciting new insights than are the forces of competition. Jon GertnerIts a long-term outlook. One Bell employee recalled: When I first came, there was the philosophy: look, what youre doing might not be important for ten years or twenty years, but thats fine, well be there then.The cynic might say side project time is research and development for companies without the budget allocation. Even if there is some truth to that, I think the former speaks to a more entwined culture. Its not innovation over here with these people and business as usual over there with those other people.Side project time is also a cultural statement: you and your interests are valuable here. It encourages autonomy and innovation. If we only did OKRs with proven value, then original thinking would inevitably fade away.And lets be frank: even in purely Machiavellian terms, it benefits employers. Youll be rewarded with happier, more knowledgeable employees and higher retention. You may even wind up with a surprising new product.Give It A SpinSide project time is a slow burner but an invaluable thing to cultivate. Any readers in a position to try side project time will reap the benefits in time. Some of the best things in life come from idle tinkering. Let people do their thing. Give their ideas space to grow, and they will. And they might just be brilliant.Further ReadingSide Project Programs Can Have Major Benefits for Employers by Tammy XuWhat made Bell Labs special? by Andrew Gelman (PDF)Why Bell Labs Was So Important To Innovation In The 20th Century, Forbes Googles 20% rule shows exactly how much time you should spend learning new skillsand why it works, Dorie ClarkCreativity, Inc. by Ed Catmull

Its not too far-fetched to say AI is a pretty handy tool that we all rely on for everyday tasks. It handles tasks like recognizing faces, understanding or cloning speech, analyzing large data, and creating personalized app experiences, such as music playlists based on your listening habits or workout plans matched to your progress. But heres the catch:Where AI tool actually lives and does its work matters a lot.Take self-driving cars, for example. These types of cars need AI to process data from cameras, sensors, and other inputs to make split-second decisions, such as detecting obstacles or adjusting speed for sharp turns. Now, if all that processing depends on the cloud, network latency connection issues could lead to delayed responses or system failures. Thats why the AI should operate directly within the car. This ensures the car responds instantly without needing direct access to the internet.This is what we call On-Device AI (ODAI). Simply put, ODAI means AI does its job right where you are on your phone, your car, or your wearable device, and so on without a real need to connect to the cloud or internet in some cases. More precisely, this kind of setup is categorized as Embedded AI (EMAI), where the intelligence is embedded into the device itself.Okay, I mentioned ODAI and then EMAI as a subset that falls under the umbrella of ODAI. However, EMAI is slightly different from other terms you might come across, such as Edge AI, Web AI, and Cloud AI. So, whats the difference? Heres a quick breakdown: Edge AIIt refers to running AI models directly on devices instead of relying on remote servers or the cloud. A simple example of this is a security camera that can analyze footage right where it is. It processes everything locally and is close to where the data is collected.Embedded AIIn this case, AI algorithms are built inside the device or hardware itself, so it functions as if the device has its own mini AI brain. I mentioned self-driving cars earlier another example is AI-powered drones, which can monitor areas or map terrains. One of the main differences between the two is that EMAI uses dedicated chips integrated with AI models and algorithms to perform intelligent tasks locally.Cloud AIThis is when the AI lives and relies on the cloud or remote servers. When you use a language translation app, the app sends the text you want to be translated to a cloud-based server, where the AI processes it and the translation back. The entire operation happens in the cloud, so it requires an internet connection to work.Web AIThese are tools or apps that run in your browser or are part of websites or online platforms. You might see product suggestions that match your preferences based on what youve looked at or purchased before. However, these tools often rely on AI models hosted in the cloud to analyze data and generate recommendations.The main difference? Its about where the AI does the work: on your device, nearby, or somewhere far off in the cloud or web.What Makes On-Device AI UsefulOn-device AI is, first and foremost, about privacy keeping your data secure and under your control. It processes everything directly on your device, avoiding the need to send personal data to external servers (cloud). So, what exactly makes this technology worth using?Real-Time ProcessingOn-device AI processes data instantly because it doesnt need to send anything to the cloud. For example, think of a smart doorbell it recognizes a visitors face right away and notifies you. If it had to wait for cloud servers to analyze the image, thered be a delay, which wouldnt be practical for quick notifications.Enhanced Privacy and SecurityPicture this: You are opening an app using voice commands or calling a friend and receiving a summary of the conversation afterward. Your phone processes the audio data locally, and the AI system handles everything directly on your device without the help of external servers. This way, your data stays private, secure, and under your control.Offline FunctionalityA big win of ODAI is that it doesnt need the internet to work, which means it can function even in areas with poor or no connectivity. You can take modern GPS navigation systems in a car as an example; they give you turn-by-turn directions with no signal, making sure you still get where you need to go.Reduced LatencyODAI AI skips out the round trip of sending data to the cloud and waiting for a response. This means that when you make a change, like adjusting a setting, the device processes the input immediately, making your experience smoother and more responsive. The Technical Pieces Of The On-Device AI PuzzleAt its core, ODAI uses special hardware and efficient model designs to carry out tasks directly on devices like smartphones, smartwatches, and Internet of Things (IoT) gadgets. Thanks to the advances in hardware technology, AI can now work locally, especially for tasks requiring AI-specific computer processing, such as the following:Neural Processing Units (NPUs)These chips are specifically designed for AI and optimized for neural nets, deep learning, and machine learning applications. They can handle large-scale AI training efficiently while consuming minimal power.Graphics Processing Units (GPUs)Known for processing multiple tasks simultaneously, GPUs excel in speeding up AI operations, particularly with massive datasets.Heres a look at some innovative AI chips in the industry: Product Organization Key Features Spiking Neural Network Chip Indian Institute of Technology Ultra-low power consumption Hierarchical Learning Processor Ceromorphic Alternative transistor structure Intelligent Processing Units (IPUs) Graphcore Multiple products targeting end devices and cloud Katana Edge AI Synaptics Combines vision, motion, and sound detection ET-SoC-1 Chip Esperanto Technology Built on RISC-V for AI and non-AI workloads NeuRRAM CEALeti Biologically inspired neuromorphic processor based on resistive RAM (RRAM) These chips or AI accelerators show different ways to make devices more efficient, use less power, and run advanced AI tasks.Techniques For Optimizing AI ModelsCreating AI models that fit resource-constrained devices often requires combining clever hardware utilization with techniques to make models smaller and more efficient. Id like to cover a few choice examples of how teams are optimizing AI for increased performance using less energy.Metas MobileLLMMetas approach to ODAI introduced a model built specifically for smartphones. Instead of scaling traditional models, they designed MobileLLM from scratch to balance efficiency and performance. One key innovation was increasing the number of smaller layers rather than having fewer large ones. This design choice improved the models accuracy and speed while keeping it lightweight. You can try out the model either on Hugging Face or using vLLM, a library for LLM inference and serving.QuantizationThis simplifies a models internal calculations by using lower-precision numbers, such as 8-bit integers, instead of 32-bit floating-point numbers. Quantization significantly reduces memory requirements and computation costs, often with minimal impact on model accuracy.PruningNeural networks contain many weights (connections between neurons), but not all are crucial. Pruning identifies and removes less important weights, resulting in a smaller, faster model without significant accuracy loss.Matrix DecompositionLarge matrices are a core component of AI models. Matrix decomposition splits these into smaller matrices, reducing computational complexity while approximating the original models behavior.Knowledge DistillationThis technique involves training a smaller model (the student) to mimic the outputs of a larger, pre-trained model (the teacher). The smaller model learns to replicate the teachers behavior, achieving similar accuracy while being more efficient. For instance, DistilBERT successfully reduced BERTs size by 40% while retaining 97% of its performance.Technologies Used For On-Device AIWell, all the model compression techniques and specialized chips are cool because theyre what make ODAI possible. But whats even more interesting for us as developers is actually putting these tools to work. This section covers some of the key technologies and frameworks that make ODAI accessible.MediaPipe SolutionsMediaPipe Solutions is a developer toolkit for adding AI-powered features to apps and devices. It offers cross-platform, customizable tools that are optimized for running AI locally, from real-time video analysis to natural language processing.At the heart of MediaPipe Solutions is MediaPipe Tasks, a core library that lets developers deploy ML solutions with minimal code. Its designed for platforms like Android, Python, and Web/JavaScript, so you can easily integrate AI into a wide range of applications.MediaPipe also provides various specialized tasks for different AI needs:LLM Inference APIThis API runs lightweight large language models (LLMs) entirely on-device for tasks like text generation and summarization. It supports several open models like Gemma and external options like Phi-2.Object DetectionThe tool helps you Identify and locate objects in images or videos, which is ideal for real-time applications like detecting animals, people, or objects right on the device.Image SegmentationMediaPipe can also segment images, such as isolating a person from the background in a video feed, allowing it to separate objects in both single images (like photos) and continuous video streams (like live video or recorded footage).LiteRTLiteRT or Lite Runtime (previously called TensorFlow Lite) is a lightweight and high-performance runtime designed for ODAI. It supports running pre-trained models or converting TensorFlow, PyTorch, and JAX models to a LiteRT-compatible format using AI Edge tools.Model ExplorerModel Explorer is a visualization tool that helps you analyze machine learning models and graphs. It simplifies the process of preparing these models for on-device AI deployment, letting you understand the structure of your models and fine-tune them for better performance. You can use Model Explorer locally or in Colab for testing and experimenting.ExecuTorchIf youre familiar with PyTorch, ExecuTorch makes it easy to deploy models to mobile, wearables, and edge devices. Its part of the PyTorch Edge ecosystem, which supports building AI experiences for edge devices like embedded systems and microcontrollers.Large Language Models For On-Device AIGemini is a powerful AI model that doesnt just excel in processing text or images. It can also handle multiple types of data seamlessly. The best part? Its designed to work right on your devices.For on-device use, theres Gemini Nano, a lightweight version of the model. Its built to perform efficiently while keeping everything private.What can Gemini Nano do?Call Notes on Pixel devicesThis feature creates private summaries and transcripts of conversations. It works entirely on-device, ensuring privacy for everyone involved.Pixel Recorder appWith the help of Gemini Nano and AICore, the app provides an on-device summarization feature, making it easy to extract key points from recordings.TalkBackEnhances the accessibility feature on Android phones by providing clear descriptions of images, thanks to Nanos multimodal capabilities. Note: Its similar to an application we built using LLaVA in a previous article.Gemini Nano is far from the only language model designed specifically for ODAI. Ive collected a few others that are worth mentioning: Model Developer Research Paper Octopus v2 NexaAI On-device language model for super agent OpenELM Apple ML Research A significant large language model integrated within iOS to enhance application functionalities Ferret-v2 Apple Ferret-v2 significantly improves upon its predecessor, introducing enhanced visual processing capabilities and an advanced training regimen MiniCPM Tsinghua University A GPT-4V Level Multimodal LLM on Your Phone Phi-3 Microsoft Phi-3 Technical Report: A Highly Capable Language Model Locally on Your Phone The Trade-Offs of Using On-Device AIBuilding AI into devices can be exciting and practical, but its not without its challenges. While you may get a lightweight, private solution for your app, there are a few compromises along the way. Heres a look at some of them: Limited ResourcesPhones, wearables, and similar devices dont have the same computing power as larger machines. This means AI models must fit within limited storage and memory while running efficiently. Additionally, running AI can drain the battery, so the models need to be optimized to balance power usage and performance.Data and UpdatesAI in devices like drones, self-driving cars, and other similar devices process data quickly, using sensors or lidar to make decisions. However, these models or the system itself dont usually get real-time updates or additional training unless they are connected to the cloud. Without these updates and regular model training, the system may struggle with new situations. BiasesBiases in training data are a common challenge in AI, and ODAI models are no exception. These biases can lead to unfair decisions or errors, like misidentifying people. For ODAI, keeping these models fair and reliable means not only addressing these biases during training but also ensuring the solutions work efficiently within the devices constraints.These aren't the only challenges of on-device AI. It's still a new and growing technology, and the small number of professionals in the field makes it harder to implement.ConclusionChoosing between on-device and cloud-based AI comes down to what your application needs most. Heres a quick comparison to make things clear: Aspect On-Device AI Cloud-Based AI Privacy Data stays on the device, ensuring privacy. Data is sent to the cloud, raising potential privacy concerns. Latency Processes instantly with no delay. Relies on internet speed, which can introduce delays. Connectivity Works offline, making it reliable in any setting. Requires a stable internet connection. Processing Power Limited by device hardware. Leverages the power of cloud servers for complex tasks. Cost No ongoing server expenses. Can incur continuous cloud infrastructure costs. For apps that need fast processing and strong privacy, ODAI is the way to go. On the other hand, cloud-based AI is better when you need more computing power and frequent updates. The choice depends on your projects needs and what matters most to you.

Illustration has been used for 10,000 years. One of the first ever recorded drawings was of a hand silhouette found in Spain, that is more than 66,000 years old. Fast forward to the introduction of the internet, around 1997, illustration has gradually increased in use. Popular examples of this are Googles daily doodles and the Red Bull energy drink, both of which use funny cartoon illustrations and animations to great effect.Typically, illustration was done using pencils, chalk, pens, etchings, and paints. But now everything is possible you can do both analog and digital or mixed media styles.As an example, although photography might be the most popular method to communicate visuals, it is not automatically the best default solution. Illustration offers a wider range of styles that help companies engage and communicate with their audience. Good illustrations create a mood and bring to life ideas and concepts from the text. To put it another way, visualisation.Good illustrations can also help give life to information in a better way than just using text, numbers, or tables.How do we determine what kind of illustration or style would be best? How should illustration complement or echo your corporate identity? What will your main audience prefer? What about the content, what would suit and highlight the content best, and how would it work for the age range it is primarily for? Before we dive into the examples, lets discuss the qualities of good illustration and the importance of understanding your audience. The rubric below will help you make good choices for your audiences benefit. What Makes A Good IllustrationVisualises something from the content (something that does not exist or has been described but not visualised).Must be aesthetically pleasing, interesting, and stimulating to look at (needs to have qualities and harmonies between colour, elements, proportions, and subject matter).Must have a feel, mood, dramatic edge, or attitude (needs to create a feeling and describe or bring to life an environment).The illustration should enhance and bring to life what is described in text and word form.Explains or unpacks what is written in any surrounding text and makes it come to life in an unusual and useful way (the illustration should complement and illuminate the content so readers better understand the content).Just look at what we are more often than not presented with.The importance of knowing about different audiencesIt is really important to know and consider different audiences. Not all of us are the same and have the same physical, cognitive, education, or resources. Our writing, designs, and illustrations need to take into account users make-up and capabilities.There are some common categories of audiences:Child,Teenager,Middle-aged,Ageing,Prefer a certain style (goth, retro, modern, old fashioned, sporty, branded).Below are interesting examples of illustrations, in no particular order, that show how different styles communicate and echo different qualities and affect mood and tone.WatercolourGood for formal, classy, and sophisticated imagery that also lends itself to imaginative expression. It is a great example of texture and light that delivers a really humane and personal feel that you would not get automatically by using software.StrengthsFeeling, emotion, and sense of depth and texture.Drawing With Real-life objectsA great option for highly abstract concepts and compositions with a funny, unusual, and unreal aspect. You can do some really striking and clever stuff with this style to engage readers in your content.StrengthsConceptual play.Surreal PhotomontagePerfect for abstract hybrid illustration and photo illustration with a surreal fantasy aspect. This is a great example of merging different imagery together to create a really dramatic, scary, and visually arresting new image that fits the musicians work as well.StrengthsConceptual mixing and merging, leading to new unseen imagery.CartoonWell-suited for showing fun or humorous aspects, creating concepts with loads of wit and cleverness. New messages and forms of communication can be created with this style.StrengthsConceptual.Cartoon With Block ColourWorks well for showing fun, quirky, or humorous aspects and concepts, often with loads of wit and cleverness. The simplicity of style can be quite good for people who struggle with more advanced imagery concepts, making it quite accessible.StrengthsSimplicity and unclutteredness.Clean VectorDesigned for clean and clear illustrations that are all-encompassing and durable. Due to the nature of this illustration style, it works quite well for a wide range of people as it is not overly stylistic in one direction or another.StrengthsRealism, conceptual, and widely pleasing.Textured Vintage Clean VectorBest suited for imagining rustic imagery, echoing a vintage feel. This a great example of how texture and non-cleanliness can create and enhance the feeling of the imagery; it is very Western and old-fashioned, perfect for the core meaning of the illustration.StrengthsAged feeling and rough impression.PictogramHighly effective for clean, legible, quickly recognizable imagery and concepts, especially at small sizes as well. It is no surprise that many pictograms are to be seen in quick viewing environments such as airports and show imagery that has to work for a wide range of people.StrengthsLegibility, speed of comprehension (accessibility).Abstract GeometricA great option for visually attractive and abstract imagery and concepts. This style lends itself to much customising and experimentation from the illustrator, giving some really cool and visually striking results.StrengthsVisual stimulation and curiosity.Lithography EtchingIdeal for imagery that has an old, historic, and traditional feel. Has a great feel achieved through sketchy markings, etchings, and a greyscale colour palette. You would not automatically get this from software, but given the right context or maybe an unusual juxtaposed context (like the clash against a modern, clean, fashionable corporate identity), it could work really well.StrengthsRealism and old tradition.3D gradientIt serves as a great choice for highly realistic illustration with a friendly, widely accessible character element. This style is not overly stylistic and lends itself to being accepted by a wider range of people.StrengthsWidely acceptable and appropriate.Sci-fi Comic Book And Pop ArtIts especially useful for high-impact, bright, animated, and colourful concepts. Some really cool, almost animated graphic communication can be created with this style, which can also be put to much humorous use. The boldness and in-your-face style promote visual engagement.StrengthsAnimation.TatooWell-suited for bold block-coloured silhouettes and imagery. It is so bold and impactful, and there is still loads of detail there, creating a really cool and sharp illustration. The illustration works well in black and white and would be further enhanced with colour.StrengthsDirectness and clarity.PencilPerfect for humane, detailed imagery with plenty of feeling and character. The sketchy style highlights unusual details and lends itself to an imaginative feeling and imagery.StrengthsHumane and detailed imaginative feeling.GradientEspecially useful for highly imaginative and fantasy imagery. By using gradients and a light-to-dark color palette, the imagery really has depth and says, Take me away on a journey.StrengthsFantasy (through depth of colour) and clean feeling.CharcoalIt makes an excellent option for giving illustration a humane and tangible feel, with echoes of old historical illustrations. The murky black-and-white illustration really has an atmosphere to it.StrengthsHumane and detailed feeling.WoodcutIt offers great value for block silhouette imagery that has presence, sharpness, and impact. Is colour even needed? The black against the light background goes a long way to communicating the imagery.StrengthsStriking and clear.FashionA great option for imagery that has motion and flare to it, with a slight feminine feel. No wonder this style of illustration is used for fashion illustrations, great for expressing lines and colours with motion, and has a real fashion runway flare.StrengthsMotion and expressive flare.CaricatureIdeal for humorous imagery and illustration with a graphic edge and clarity. The layering of light and dark elements really creates an illustration with depth, perfect for playing with the detail of the character, not something you would automatically get from a clean vector illustration. It has received more thought and attention than clean vector illustration typically does.StrengthsDetail and humour.PaintIt serves as a great choice for traditional romantic imagery that has loads of detail, texture, and depth of feeling. The rose flowers are a good example of this illustration style because they have so much detail and colour shades.StrengthsTradition and emotions.ChalkWell-suited for highly sketchy imagery to make something an idea or working concept. The white lines against the black background have an almost animated effect and give the illustrations real movement and life. This style is a good example of using pure lines in illustration but to great effect.StrengthsHand-realised and animation.Illustration Sample CardHow To Start Doing IllustrationThere are plenty of options, such as using pencils, chalk, pens, etchings, and paints, then possibly scanning in. You can also use software like Illustrator, Photoshop, Procreate, Corel Painter, Sketch, Inkscape, or Figma. But no matter what tools you choose, theres one essential ingredient youll always need, and that is a mind and vision for illustration.Recommended ResourcesAssociation of Illustrators20 Best Illustration Agents In The UK, And The Awesome Illustrators They Represent, Tom MayIts Nice ThatBehance Illustration

As expected from anyone who has ever tried building anything solo, my goal was not to build an app but the app the one app thats so good you wonder how you ever survived without it. I had everything in place: wireframes, a to-do list, project structure you name it. Then I started building. Just not the product. I started with the landing page for it, which took me four days, and I hadnt even touched the apps core features yet. The idea itself was so good I had to start marketing it right away!I found myself making every detail perfect: every color, shadow, gradient, font size, margin, and padding had to be spot on. I dont even want to say how long the logo took.Spoiler:No one cares about your logo.Why did I get so stuck on something that was never even part of the core app I wanted so badly to build? Why wasnt I nagging myself to move on when I clearly needed to?The reality of solo development is that there is no one to tell you when to stop or simply say, Yo, this is good enough! Move on. Most users dont care whether a login button is yellow or green. What they want (and need) is a button that works and solves their problem when clicking it.Test Early And OftenUnnecessary tweaks, indecisive UI decisions, and perfectionism are the core reasons I spend more time on things than necessary.Like most solo developers, I also started with the hope of pushing out builds with the efficiency of a large-scale team. But it is easier said than done.When building solo, you start coding, then you maybe notice a design flaw, and you switch to fixing it, then a bug appears, and you try fixing that, and voil the day is gone. There comes a time when it hits you that, You know what? Its time to build messy. Thats when good intentions of project and product management go out the window, and thats when I find myself working by the seat of my pants rather than plowing forward with defined goals and actionable tasks that are based on good UI/UX principles, like storyboards, user personas, and basic prioritization.This realization is something you have to experience to grasp fully. The trick Ive learned is to focus on getting something out there for people to see and then work on actual feedback. In other words,Its more important to get the idea out there and iterate on it than reaching for perfection right out of the gate.Because guess what? Even if you have the greatest app idea in the world, youre never going to make it perfect until you start receiving feedback on it. Youre no mind reader as much as we all want to be one and some insights (often the most relevant) can only be received through real user feedback and analytics. Sure, your early assumptions may be correct, but how do you know until you ship them and start evaluating them?Nowadays, I like to tell others (and myself) to work from hypotheses instead of absolutes. Make an assertion, describe how you intend to test it, and then ship it. With that, you can gather relevant insights that you can use to get closer to perfection whatever that is.Strength In Recognizing WeaknessLets be real: Building a full application on your own is not an easy feat. Id say its like trying to build a house by yourself; it seems doable, but the reality is that it takes a lot more hands than the ones you have to make it happen. And not only to make it happen but to make it happen well. Theres only so much one person can do, and admitting your strengths and weaknesses up-front will serve you well by avoiding the trap that you can do it all alone.I once attempted to build a project management app alone. I knew it might be difficult, but I was confident. Within a few days, this simple project grew legs and expanded with new features like team collaboration, analytics, time tracking, and custom reports being added, many of which I was super excited to make.Building a full app takes a lot of time. Think about it; youre doing the work of a team all alone without any help. Theres no one to provide you with design assets, content, or back-end development. No stakeholder to swoop and poop on your ideas (which might be a good thing). Every decision, every line of code, and every design element is 100% on you alone.It is technically possible to build a full-featured app solo, but when you think about it, theres a reason why the concept of MVP exists. Take Instagram, for example; it wasnt launched with reels, stories, creators insights, and so on. It started with one simple thing: photo sharing.All Im trying to say is start small, launch, and let users guide the evolution of the product. And if you can recruit more hands to help, that would be even better. Just remember to leverage your strengths and reinforce your weaknesses by leaning on other peoples strengths.Yes, Think Like an MVPThe concept of a minimum viable product (MVP) has always been fascinating to me. In its simplest form, it means building the basic version of your idea that technically works and getting it in front of users. Yes, this is such a straightforward and widely distributed tip, but its still one of the hardest principles for solo developers to follow, particularly for me.I mentioned earlier that my genius app idea grew legs. And lots of them. I had more ideas than I knew what to do with, and I hadnt even written a reasonable amount of code! Sure, this app could be enhanced to support face ID, dark mode, advanced security, real-time results, and a bunch of other features. But all these could take months of development for an app that youre not even certain users want.Ive learned to ask myself: What would this project look like if it was easy to build?. Its so surreal how the answer almost always aligns with what users want. If you can distill your grand idea into a single indispensable idea that does one or two things extremely well, I think youll find as I have that the final result is laser-focused on solving real user problems.Ship the simplest version first. Dark mode can wait. All you need is a well-defined idea, a hypothesis to test, and a functional prototype to validate that hypothesis; anything else is probably noise.Handle Imperfection GracefullyYou may have heard about the Ship it Fast approach to development and instantly recognize the parallels between it and what Ive discussed so far. In a sense, Ship it Fast is ultimately another way of describing an MVP: get the idea out fast and iterate on it just as quickly.Some might disagree with the ship-fast approach and consider it reckless and unprofessional, which is understandable because, as developers, we care deeply about the quality of our work. However,The ship-fast mentality is not to ignore quality but to push something out ASAP and learn from real user experiences. Ship it now perfect it later.Thats why I like to tell other developers that shipping an MVP is the safest, most professional way to approach development. It forces you to stay in scope and on task without succumbing to your whimsies. I even go so far as to make myself swear an Oath of Focus at the start of every project.I, Vayo, hereby solemnly swear (with one hand on this design blueprint) to make no changes, no additions, and no extra features until this app is fully built in all its MVP glory. I pledge to avoid the temptations of endless tweaking and the thoughts of just one more feature.Only when a completed prototype is achieved will I consider any new features, enhancements, or tweaks.Signed,Vayo, Keeper of the MVPRemember, theres no one there to hold you accountable when you develop on your own. Taking a brief moment to pause and accepting that my first version wont be flawless helps put me in the right headspace early in the project.Prioritize What MattersI have noticed that no matter what I build, theres always going to be bugs. Always. If Google still has bugs in the Google Notes app, trust me, then its fine for a solo developer to accept that bugs will always be a part of any project.Look at flaky tests. For instance, you could run a test over 1,000 times and get all greens, and then the next day, you run the same test, an error shows. Its just the nature of software development. And for the case of endlessly adding features, it never ends either. Theres always going to be a new feature that youre excited about. The challenge is to curb some of that enthusiasm and shelve it responsibly for a later time when it makes sense to work on it.Ive learned to categorize bugs and features into two types: intrusive and non-intrusive. Intrusive are those things that prevent projects from functioning properly until fixed, like crashes and serious errors. The non-intrusive items are silent ones. Sure, they should be fixed, but the product will work just fine and wont prevent users from getting value if they arent addressed right away.You may want to categorize your bugs and features in other ways, and Ive seen plenty of other examples, including:High value, low value;High effort, low effort;High-cost, low-cost;Need to have, nice to have.Ive even seen developers and teams use these categorizations to create some fancy priority score that considers each category. Whatever it is that helps you stay focused and on-task is going to be the right approach for you more than what specific category you use.Live With Your StackHeres a classic conundrum in development circles:Should I use React? Or NextJS? Or wait, how about Vue? I heard its more optimized. But hold on, I read that React Redux is dead and that Zustand is the new hot tool.And just like that, youve spent an entire day thinking about nothing but the tech stack youre using to build the darn thing.We all know that an average user could care less about the tech stack under the hood. Go ahead and ask your mom what tech stack WhatsApp is built on, and let me know what she says. Most times, its just us who obsesses about tech stacks, and that usually only happens when were asked to check under the hood.I have come to accept that there will always be new tech stacks released every single day with the promise of 50% performance and 10% less code. That new tool might scale better, but do I actually have a scaling problem with my current number of zero users? Probably not.My advice:Pick the tools you work with best and stick to those tools until they start working against you.Theres no use fighting something early if something you already know and use gets the job done. Basically, dont prematurely optimize or constantly chase the latest shiny object.Do Design Before The First Line of CodeI know lots of solo developers out there suck at design, and Im probably among the top 50. My design process has traditionally been to open VS Code, create a new project, and start building the idea in whatever way comes to mind. No design assets, comps, or wireframes to work with just pure, unstructured improvisation. Thats not a good idea, and its a habit Im actively trying to break. These days, I make sure to have a blueprint of what Im building before I start writing code. Once I have that, I make sure to follow through and not change anything to respect my Oath of Focus.I like how many teams call comps and wireframes project artifacts. They are pieces of evidence that provide a source of truth for how something looks and works. You might be the sort of person who works better with sets of requirements, and thats totally fine. But having some sort of documentation that you can point back to in your work is like having a turn-by-turn navigation on a long road trip its indispensable for getting where you need to go.And what if youre like me and dont pride yourself on being the best designer? Thats another opportunity to admit your weaknesses up-front and recruit help from someone with those strengths. That way, you can articulate the goal and focus on what youre good at.Give Yourself TimelinesPersonally, without deadlines, Im almost unstoppable at procrastinating. Ive started setting time limits when building any project, as it helps with procrastination and makes sure something is pushed out at a specified time. Although this wont work without accountability, I feel the two work hand in hand.I set a 23 week deadline to build a project. And no matter what, as soon as that time is up, I must post or share the work in its current state on my socials. Because of this, Im not in my comfort zone anymore because I wont want to share a half-baked project with the public; Im conditioned to work faster and get it all done. Its interesting to see the length of time you can go if you can trick your brain.I realize that this is an extreme constraint, and it may not work for you. Im just the kind of person who needs to know what my boundaries are. Setting deadlines and respecting them makes me a more disciplined developer. More than that, it makes me work efficiently because I stop overthinking things when I know I have a fixed amount of time, and that leads to faster builds.ConclusionThe best and worst thing about solo development is the solo part. Theres a lot of freedom in working alone, and that freedom can be inspiring. However, all that freedom can be intoxicating, and if left unchecked, it becomes a debilitating hindrance to productivity and progress. Thats a good reason why solo development isnt for everyone. Some folks will respond a lot better to a team environment.But if you are a solo developer, then I hope my personal experiences are helpful to you. Ive had to look hard at myself in the mirror many days to come to realize that I am not a perfect developer who can build the perfect app alone. It takes planning, discipline, and humility to make anything, especially the right app that does exactly the right thing. Ideas are cheap and easy, but stepping out of our freedom and adding our own constraints based on progress over perfection is the secret sauce that keeps us moving and spending our time on those essential things.Further Reading On SmashingMagWhats The Perfect Design Process?, Vitaly FriedmanDesign Under Constraints: Challenges, Opportunities, And Practical Strategies, Paul BoagImproving The Double Diamond Design Process, Andy BuddUnexpected Learnings From Coding Artwork Every Day For Five Years, Saskia Freeke

This article is a sponsored by DebugBearI was chatting with DebugBears Matt Zeunert and, in the process, he casually mentioned this thing called Tight Mode when describing how browsers fetch and prioritize resources. I wanted to nod along like I knew what he was talking about but ultimately had to ask: What the heck is Tight mode?What I got back were two artifacts, one of them being the following video of Akamai web performance expert Robin Marx speaking at We Love Speed in France a few weeks ago:Tight Mode discriminates resources, taking anything and everything marked as High and Medium priority. Everything else is constrained and left on the outside, looking in until the body is firmly attached to the document, signaling that blocking scripts have been executed. Its at that point that resources marked with Low priority are allowed in the door during the second phase of loading.Theres a big caveat to that, but well get there. The important thing to note is thatChrome And Safari Enforce Tight ModeYes, both Chrome and Safari have some working form of Tight Mode running in the background. That last image illustrates Chromes Tight Mode. Lets look at Safaris next and compare the two.Look at that! Safari discriminates High-priority resources in its initial fetch, just like Chrome, but we get wildly different loading behavior between the two browsers. Notice how Safari appears to exclude the first five PNG images marked with Medium priority where Chrome allows them. In other words, Safari makes all Medium- and Low-priority resources wait in line until all High-priority items are done loading, even though were working with the exact same HTML. You might say that Safaris behavior makes the most sense, as you can see in that last image that Chrome seemingly excludes some High-priority resources out of Tight Mode. Theres clearly some tomfoolery happening there that well get to.Wheres Firefox in all this? It doesnt take any extra tightening measures when evaluating the priority of the resources on a page. We might consider this the classic waterfall approach to fetching and loading resources.Chrome And Safari Trigger Tight Mode DifferentlyRobin makes this clear as day in his talk. Chrome and Safari are both Tight Mode proponents, yet trigger it under differing circumstances that we can outline like this: Chrome Safari Tight Mode triggered While blocking JS in the <head> is busy. While blocking JS or CSS anywhere is busy. Notice that Chrome only looks at the document <head> when prioritizing resources, and only when it involves JavaScript. Safari, meanwhile, also looks at JavaScript, but CSS as well, and anywhere those things might be located in the document regardless of whether its in the <head> or <body>. That helps explain why Chrome excludes images marked as High priority in Figure 2 from its Tight Mode implementation it only cares about JavaScript in this context.So, even if Chrome encounters a script file with fetchpriority="high" in the document body, the file is not considered a High priority and it will be loaded after the rest of the items. Safari, meanwhile, honors fetchpriority anywhere in the document. This helps explain why Chrome leaves two scripts on the table, so to speak, in Figure 2, while Safari appears to load them during Tight Mode.Thats not to say Safari isnt doing anything weird in its process. Given the following markup:<head> <!-- two high-priority scripts --> <script src="script-1.js"></script> <script src="script-1.js"></script> <!-- two low-priority scripts --> <script src="script-3.js" defer></script> <script src="script-4.js" defer></script></head><body> <!-- five low-priority scripts --> <img src="image-1.jpg"> <img src="image-2.jpg"> <img src="image-3.jpg"> <img src="image-4.jpg"> <img src="image-5.jpg"></body>you might expect that Safari would delay the two Low-priority scripts in the <head> until the five images in the <body> are downloaded. But thats not the case. Instead, Safari loads those two scripts during its version of Tight Mode.Chrome And Safari ExceptionsI mentioned earlier that Low-priority resources are loaded in during the second phase of loading after Tight Mode has been completed. But I also mentioned that theres a big caveat to that behavior. Lets touch on that now.According to Patricks article, we know that Tight Mode is the initial phase and constraints loading lower-priority resources until the body is attached to the document (essentially, after all blocking scripts in the head have been executed). But theres a second part to that definition that I left out:In tight mode, low-priority resources are only loaded if there are less than two in-flight requests at the time that they are discovered.A-ha! So, there is a way for low-priority resources to load in Tight Mode. Its when there are less than two in-flight requests happening when theyre detected.Wait, what does in-flight even mean?Thats whats meant by less than two High- or Medium-priority items being requested. Robin demonstrates this by comparing Chrome to Safari under the same conditions, where there are only two High-priority scripts and ten regular images in the mix:<head> <!-- two high-priority scripts --> <script src="script-1.js"></script> <script src="script-1.js"></script></head><body> <!-- ten low-priority images --> <img src="image-1.jpg"> <img src="image-2.jpg"> <img src="image-3.jpg"> <img src="image-4.jpg"> <img src="image-5.jpg"> <!-- rest of images --> <img src="image-10.jpg"></body>Lets look at what Safari does first because its the most straightforward approach:Nothing tricky about that, right? The two High-priority scripts are downloaded first and the 10 images flow in right after. Now lets look at Chrome:We have the two High-priority scripts loaded first, as expected. But then Chrome decides to let in the first five images with Medium priority, then excludes the last five images with Low priority. What. The. Heck.The reason is a noble one: Chrome wants to load the first five images because, presumably, the Largest Contentful Paint (LCP) is often going to be one of those images and Chrome is hedging bets that the web will be faster overall if it automatically handles some of that logic. Again, its a noble line of reasoning, even if it isnt going to be 100% accurate. It does muddy the waters, though, and makes understanding Tight Mode a lot harder when we see Medium- and Low-priority items treated as High-priority citizens.Even muddier is that Chrome appears to only accept up to two Medium-priority resources in this discriminatory process. The rest are marked with Low priority.Thats what we mean by less than two in-flight requests. If Chrome sees that only one or two items are entering Tight Mode, then it automatically prioritizes up to the first five non-critical images as an LCP optimization effort.Truth be told, Safari does something similar, but in a different context. Instead of accepting Low-priority items when there are less than two in-flight requests, Safari accepts both Medium and Low priority in Tight Mode and from anywhere in the document regardless of whether they are located in the <head> or not. The exception is any asynchronous or deferred script because, as we saw earlier, those get loaded right away anyway.How To Manipulate Tight ModeThis might make for a great follow-up article, but this is where Ill refer you directly to Robins video because his first-person research is worth consuming directly. But heres the gist:We have these high-level features that can help influence priority, including resource hints (i.e., preload and preconnect), the Fetch Priority API, and lazy-loading techniques.We can indicate fetchpriority=`"high"andfetchpriority="low"` on items.<img src="lcp-image.jpg" fetchpriority="high"><link rel="preload" href="defer.js" as="script" fetchpriority="low"Using fetchpriority="high" is one way we can get items lower in the source included in Tight Mode. Using fetchpriority="low is one way we can get items higher in the source excluded from Tight Mode.For Chrome, this works on images, asynchronous/deferred scripts, and scripts located at the bottom of the <body>.For Safari, this only works on images.Again, watch Robins talk for the full story starting around the 28:32 marker.Thats Tight ModeIts bonkers to me that there is so little information about Tight Mode floating around the web. I would expect something like this to be well-documented somewhere, certainly over at Chrome Developers or somewhere similar, but all we have is a lightweight Google Doc and a thorough presentation to paint a picture of how two of the three major browsers fetch and prioritize resources. Let me know if you have additional information that youve either published or found Id love to include them in the discussion.

The list of attributes available in HTML is long and well-documented. Even if you havent memorized them (and theres totally nothing wrong with an author er random person off the street, who has), there are a bunch of places where HTML attributes youre familiar with will have different or more specific jobs. Lets take a look.nameYou may have heard of the name attribute, giving a name/label to information sent through a form. And more specifically you may have used it to bring together a set of radio buttons, but you can also use it with the details element to have only one of a set of accordions open at a time.Like if you have more than one refrigerator in the office at work, any respectable person would only open one door at a time. Right, Bob?<details name="office-kitchen"> <summary>Refrigerator 1</summary> Lunches, condiments, yogurt et al.</details><details name="office-kitchen"> <summary>Refrigerator 2</summary> More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.</details><details name="office-kitchen"> <summary>Refrigerator 3</summary> Cookie dough someone bought from somebodys childs fundraiser, expired milk, unidentifiable meat et al.</details>See the Pen Name [forked] by Undead Institute.titleYouve probably heard of the universal attribute title. Its typically thought of as the built-in tooltip text, but three elements have special semantics for the title attribute: input and the rarely used gems, the definition (dfn) element, and the abbreviation (abbr) element.If youre using a pattern attribute on an input to provide some regex-based error correction, then you should definitely tell the user how to meet the criteria youre using. The title attribute can be used both as a tooltip and as the message shown when the user doesnt meet that criteria.<form method="post" action="#"> <label>Who took my <em>well labeled</em> yogurt from the company fridge? I know it was you, Bob.<br> <input type="text" pattern="Bob [A-Za-z].+" title="There are many Bobs. The only question is which one it was. Please limit your answers to Bob and his/her last name."> </label><br> <button type="submit">Submit</submit></form>See the Pen Title - Input [forked] by Undead Institute.For a dfn element, if you use the title attribute, then it has to include the term being defined. dfn should still have text in it, but it can be an abbreviation or a different form of the term.<p><dfn title="Office Yogurt Thief">OYG</dfn>s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.</p>See the Pen Title - dfn [forked] by Undead Institute.A title on an abbr element not only sets the tooltip but explicitly has the expansion of the abbreviation or acronym. As it says in the spec: "The [title] attribute, if specified, must contain an expansion of the abbreviation, and nothing else." Thats the specifications equivalent of threatening a mafia hit if you arent careful with your title attributes. You have been warned, Bob.When dealing with a suspected yogurt thief, we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with the problem.See the Pen Title - abbr [forked] by Undead Institute.valueThe value attribute is well known for setting default values on inputs, but you can also use it on a list item (li) within an ordered list (ol) to change the number of that item and all that follow it. It only takes integers, but you can use it no matter what type of ordered list you use (numeric, alphabetical, or Roman numerals).<h1>Favorite Co-workers</h1><ol> <li>Tina</li> <li>Keesha</li> <li>Carlos</li> <li>Jamal</li> <li>Scott</li> <li value="37">Bob</li> <li>Bobbie</li> <li>Bobby</li> <li>"Rob"</li></ol>See the Pen Value [forked] by Undead Institute.datetimeYou might have used a datetime attribute on a time element to provide a machine-readable format of the time and/or date represented in the time elements text: <time datetime="2024-12-09">Dec. 12, 2024</time>The same attribute can also be used with the ins and del elements (used for notating an addition/insertion and deletion of content, respectively). The datetime attribute on ins and del provides a machine-readable date (and optionally a time) for when the change was made. You can show it to the visitor if you like, but its mainly intended for private use. Check out the edits of the original version of an earlier example:When dealing with a <ins datetime="2024-11-17">suspected</ins> yogurt thief <del datetime="2024-11-17">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17">Bob</del> <ins datetime="2024-11-17">the problem</ins>.See the Pen Datetime [forked] by Undead Institute.As an added note, screenreaders do not announce the datetime attribute in this context.citeSticking with our oft-neglected friends ins and del, the cite attribute that you use on blockquote and q elements to provide a URL of the source of the quotation can also be used on ins and del to provide the URL of a document explaining the changes.When dealing with a <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">suspected</ins> yogurt thief <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">Bob</del> <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">the problem</ins>.See the Pen Cite [forked] by Undead Institute.Again, these dates are not announced in assistive tech, like screen readers.multipleYou probably know the multiple attribute as that more-than-meets-the-eye attribute that transforms a dropdown menu into a multi-select box, like a co-worker who lets you choose two donuts from the box. (Im lookin at you, Tina.) But it has two other uses as well. You can add it to both a file input and an email input to accept multiple files and emails, respectively.<form method="post" action="#"> <label>Upload complaint forms (about Bob) <input type="file" multiple> </label><br> <label>Email all of Bobs bosses: <input type="email" multiple></label><br> <button type="submit">Submit</submit></form>Just be sure that the emails are comma-separated.See the Pen Multiple [forked] by Undead Institute.forIn your travels across the internet, youve probably come across the for attribute when its used to associate a label element with a form field (input, select, textarea, etc.), but you can also use it to explicitly associate the elements of a calculation with an output element.Unlike a label-input relationship, which is a one-to-one relationship (i.e., one label for one field), the for attribute used on an output can hold an unordered, space-separated list of IDs of the fields that contributed to the calculation.<form method="post" action="#" id="comeuppance"> <fieldset><legend>Defendant name</legend> <label>First Name: <input name="fname" type="text"></label> <label>Last Name: <input name="lname" type="text"></label> </fieldset> <label>Number of yogurts stolen (unlabeled): <input name="numunlbld" id="numstolen-unlbld" type="number"> </label> * <label>Unlabeled Multiplier: <input name="multiunlbld" id="multi-unlbld" type="number" value="0.5"> </label> + <label>Number of yogurts stolen (labeled): <input name="numlbld" id="numstolen-lbld" type="number"> </label> * <label>Labeled Multiplier: <input name="multilbld" id="multi-lbld" type="number" value="1.5"> </label> = <label>Suggested prison term (in years): <output id="answer" for="numstolen-unlbld numstolen-lbld multi-unlbld multi-lbld"></output> </label></form>See the Pen For [forked] by Undead Institute.targetJust like you can use a target attribute to open a link in a new tab/window, you can use the same target attribute and value _blank to have a form open the response in a new tab/window.<form method="post" action="#" id="comeuppance" target="_blank"> [...]</form>disabledYou may have used the disabled attribute to knock out an individual form field, but you can also use it to disable every descendant of a fieldset element. No matter what HR says and its innocent-until-proven-guilty ethos, we all know Bob did it. Dont we?<form method="post" action="#" id="comeuppance"> <fieldset disabled><legend>Defendant name</legend> <label>First Name: <input name="fname" type="text" value="Bob"></label> <label>Last Name: <input name="lname" type="text" value="McBobberson"></label> </fieldset> [...]</form>See the Pen Disabled [forked] by Undead Institute.Attribute SelectorsWhile not technically an HTML tip, attributes can also be used as selectors in CSS. You put square brackets around the attribute name and youll select all elements that contain that attribute.<style> [title] { background-color: red; }</style><h1>List of <del>Suspects</del><ins>Co-workers</ins></h1><ol> <li>Fred</li> <li>Rhonda</li> <li>Philomina</li> <li>Cranford</li> <li>Scott</li> <li title="the guilty one">Bob</li> <li>Bobbie</li> <li>Bobby</li> <li>"Rob"</li></ol>See the Pen Attribute Selector [forked] by Undead Institute.Theres actually a whole lot more you can do with attribute selectors, but thats the topic of another article literally.Wrapping UpOkay, now that weve learned some trivia we can use to properly prosecute Bobs office and yogurtorial transgressions, do you have a favorite HTML attribute I didnt discuss? Show off your personal life-of-the-party energy in the comments. (And, yes, cool people have a favorite HTML attribute really cool people right? Right?? Right!?!?!?!?!)

This article is a sponsored by CloudwaysProduct launches and sales typically attract large volumes of traffic. Too many concurrent server requests can lead to website crashes if youre not equipped to deal with them. This can result in a loss of revenue and reputation damage. The good news is that you can maximize availability and prevent website crashes by designing websites specifically for these events. For example, you can switch to a scalable cloud-based web host, or compress/optimize images to save bandwidth. In this article, well discuss six ways to design websites for high-traffic events like product drops and sales:Compress and optimize images,Choose a scalable web host,Use a CDN,Leverage caching,Stress test websites,Refine the backend.Lets jump right in!How To Design For High-Traffic EventsLets take a look at six ways to design websites for high-traffic events, without worrying about website crashes and other performance-related issues.1. Compress And Optimize ImagesOne of the simplest ways to design a website that accommodates large volumes of traffic is to optimize and compress images. Typically, images have very large file sizes, which means they take longer for browsers to parse and display. Additionally, they can be a huge drain on bandwidth and lead to slow loading times.You can free up space and reduce the load on your server by compressing and optimizing images. Its a good idea to resize images to make them physically smaller. You can often do this using built-in apps on your operating system.There are also online optimization tools available like Tinify, as well as advanced image editing software like Photoshop or GIMP:Image format is also a key consideration. Many designers rely on JPG and PNG, but adaptive modern image formats like WebP can reduce the weight of the image and provide a better user experience (UX). You may even consider installing an image optimization plugin or an image CDN to compress and scale images automatically. Additionally, you can implement lazy loading, which prioritizes the loading of images above the fold and delays those that arent immediately visible. 2. Choose A Scalable Web HostThe most convenient way to design a high-traffic website without worrying about website crashes is to upgrade your web hosting solution.Traditionally, when you sign up for a web hosting plan, youre allocated a pre-defined number of resources. This can negatively impact your website performance, particularly if you use a shared hosting service.Upgrading your web host ensures that you have adequate resources to serve visitors flocking to your site during high-traffic events. If youre not prepared for this eventuality, your website may crash, or your host may automatically upgrade you to a higher-priced plan. Therefore, the best solution is to switch to a scalable web host like Cloudways Autonomous:This is a fully managed WordPress hosting service that automatically adjusts your web resources based on demand. This means that youre able to handle sudden traffic surges without the hassle of resource monitoring and without compromising on speed.With Cloudways Autonomous your website is hosted on multiple servers instead of just one. It uses Kubernetes with advanced load balancing to distribute traffic among these servers. Kubernetes is capable of spinning up additional pods (think of pods as servers) based on demand, so theres no chance of overwhelming a single server with too many requests.High-traffic events like sales can also make your site a prime target for hackers. This is because, in high-stress situations, many sites enter a state of greater vulnerability and instability. But with Cloudways Autonomous, youll benefit from DDoS mitigation and a web application firewall to improve website security. 3. Use A CDNAs youd expect, large volumes of traffic can significantly impact the security and stability of your sites network. This can result in website crashes unless you take the proper precautions when designing sites for these events. A content delivery network (CDN) is an excellent solution to the problem. Youll get access to a collection of strategically-located servers, scattered all over the world. This means that you can reduce latency and speed up your content delivery times, regardless of where your customers are based. When a user makes a request for a website, theyll receive content from a server thats physically closest to their location. Plus, having extra servers to distribute traffic can prevent a single server from crashing under high-pressure conditions. Cloudflare is one of the most robust CDNs available, and luckily, youll get access to it when you use Cloudways Autonomous.You can also find optimization plugins or caching solutions that give you access to a CDN. Some tools like Jetpack include a dedicated image CDN, which is built to accommodate and auto-optimize visual assets.4. Leverage CachingWhen a user requests a website, it can take a long time to load all the HTML, CSS, and JavaScript contained within it. Caching can help your website combat this issue.A cache functions as a temporary storage location that keeps copies of your web pages on hand (once theyve been requested). This means that every subsequent request will be served from the cache, enabling users to access content much faster.The cache mainly deals with static content like HTML which is much quicker to parse compared to dynamic content like JavaScript. However, you can find caching technologies that accommodate both types of content.There are different caching mechanisms to consider when designing for high-traffic events. For example, edge caching is generally used to cache static assets like images, videos, or web pages. Meanwhile, database caching enables you to optimize server requests. If youre expecting fewer simultaneous sessions (which isnt likely in this scenario), server-side caching can be a good option. You could even implement browser caching, which affects static assets based on your HTTP headers. There are plenty of caching plugins available if you want to add this functionality to your site, but some web hosts provide built-in solutions. For example, Cloudways Autonomous uses Cloudflares edge cache and integrated object cache.5. Stress Test WebsitesOne of the best ways to design websites while preparing for peak traffic is to carry out comprehensive stress tests.This enables you to find out how your website performs in various conditions. For instance, you can simulate high-traffic events and discover the upper limits of your servers capabilities. This helps you avoid resource drainage and prevent website crashes.You might have experience with speed testing tools like Pingdom, which assess your website performance. But these tools dont help you understand how performance may be impacted by high volumes of traffic.Therefore, youll need to use a dedicated stress test tool like Loader.io:This is completely free to use, but youll need to register for an account and verify your website domain. You can then download your preferred file and upload it to your server via FTP. After that, youll find three different tests to carry out. Once your test is complete, you can take a look at the average response time and maximum response time, and see how this is affected by a higher number of clients. 6. Refine The BackendThe final way to design websites for high-traffic events is to refine the WordPress back end.The admin panel is where you install plugins, activate themes, and add content. The more of these features that you have on your site, the slower your pages will load.Therefore, its a good idea to delete any old pages, posts, and images that are no longer needed. If you have access to your database, you can even go in and remove any archived materials.On top of this, its best to remove plugins that arent essential for your website to function. Again, with database access, you can get in there and delete any tables that sometimes get left behind when you uninstall plugins via the WordPress dashboard.When it comes to themes, youll want to opt for a simple layout with a minimalist design. Themes that come with lots of built-in widgets or rely on third-party plugins will likely add bloat to your loading times. Essentially, the lighter your back end, the quicker it will load.ConclusionProduct drops and sales are a great way to increase revenue, but these events can result in traffic spikes that affect a sites availability and performance. To prevent website crashes, youll have to make sure that the sites you design can handle large numbers of server requests at once. The easiest way to support fluctuating traffic volumes is to upgrade to a scalable web hosting service like Cloudways Autonomous. This way, you can adjust your server resources automatically, based on demand. Plus, youll get access to a CDN, caching, and an SSL certificate. Get started today!

In 2024, Artificial Intelligence (AI) hit the limelight with major advancements. The problem with reaching common knowledge and so much public attention so quickly is that the term becomes ambiguous. While we all have an approximation of what it means to use AI in something, its not widely understood what infrastructure having AI in your project, product, or feature entails.So, lets break down the concepts that make AI tick. How is data stored and correlated, and how are the relationships built in order for an algorithm to learn how to interpret that data? As with most data-oriented architectures, it all starts with a database.Data As CoordinatesCreating intelligence, whether artificial or natural, works in a very similar way. We store chunks of information, and we then connect them. Multiple visualization tools and metaphors show this in a 3-dimensional space with dots connected by lines on a graph. Those connections and their intersection are what make up for intelligence. For example, we put together chocolate is sweet and nice and drinking hot milk makes you warm, and we make hot chocolate.We, as human beings, dont worry too much about making sure the connections land at the right point. Our brain just works that way, declaratively. However, for building AI, we need to be more explicit. So think of it as a map. In order for a plane to leave CountryA and arrive at CountryB it requires a precise system: we have coordinates, we have 2 axis in our maps, and they can be represented as a vector: [28.3772, 81.5707].For our intelligence, we need a more complex system; 2 dimensions will not suffice; we need thousands. Thats what vector databases are. Our intelligence can now correlate terms based on the distance and/or angle between them, create cross-references, and establish patterns in which every term occurs.A specialized database that stores and manages data as high-dimensional vectors. It enables efficient similarity searches and semantic matching.Querying Per ApproximationAs stated in the last session, matching the search terms (your prompt) to the data is the exercise of semantic matching (it establishes the pattern in which keywords in your prompt are used within its own data), and the similarity search, the distance (angular or linear) between each entry. Thats actually a roughly accurate representation. What a similarity search does is define each of the numbers in a vector (thats thousands of coordinates long), a point in this weird multi-dimensional space. Finally, to establish similarity between each of these points, the distance and/or angles between them are measured.This is one of the reasons why AI isnt deterministic we also arent for the same prompt, the search may produce different outputs based on how the scores are defined at that moment. If youre building an AI system, there are algorithms you can use to establish how your data will be evaluated. This can produce more precise and accurate results depending on the type of data. The main algorithms used are 3, and Each one of them performs better for a certain kind of data, so understanding the shape of the data and how each of these concepts will correlate is important to choosing the correct one. In a very hand-wavy way, heres the rule-of-thumb to offer you a clue for each:Cosine SimilarityMeasures angle between vectors. So if the magnitude (the actual number) is less important. Its great for text/semantic similarityDot ProductCaptures linear correlation and alignment. Its great for establishing relationships between multiple points/features.Euclidean DistanceCalculates straight-line distance. Its good for dense numerical spaces since it highlights the spatial distance.INFOWhen working with non-structured data (like text entries: your tweets, a book, multiple recipes, your products documentation), cosine similarity is the way to go.Now that we understand how the data bulk is stored and the relationships are built, we can start talking about how the intelligence works let the training begin!Language ModelsA language model is a system trained to understand, predict, and finally generate human-like text by learning statistical patterns and relationships between words and phrases in large text datasets. For such a system, language is represented as probabilistic sequences.In that way, a language model is immediately capable of efficient completion (hence the quote stating that 90% of the code in Google is written by AI auto-completion), translation, and conversation. Those tasks are the low-hanging fruits of AI because they depend on estimating the likelihood of word combinations and improve by reaffirming and adjusting the patterns based on usage feedback (rebalancing the similarity scores).As of now, we understand what a language model is, and we can start classifying them as large and small.Large Language Models (LLMs)As the name says, use large-scale datasets &mdash with billions of parameters, like up to 70 billion. This allows them to be diverse and capable of creating human-like text across different knowledge domains.Think of them as big generalists. This makes them not only versatile but extremely powerful. And as a consequence, training them demands a lot of computational work.Small Language Models (SLMs)With a smaller dataset, with numbers ranging from 100 million to 3 billion parameters. They take significantly less computational effort, which makes them less versatile and better suited for specific tasks with more defined constraints. SLMs can also be deployed more efficiently and have a faster inference when processing user input.Fine-TunningFine-tuning an LLM consists of adjusting the models weights through additional specialized training on a specific (high-quality) dataset. Basically, adapting a pre-trained model to perform better in a particular domain or task.As training iterates through the heuristics within the model, it enables a more nuanced understanding. This leads to more accurate and context-specific outputs without creating a custom language model for each task. On each training iteration, developers will tune the learning rate, weights, and batch-size while providing a dataset tailored for that particular knowledge area. Of course, each iteration depends also on appropriately benchmarking the output performance of the model.As mentioned above, fine-tuning is particularly useful for applying a determined task with a niche knowledge area, for example, creating summaries of nutritional scientific articles, correlating symptoms with a subset of possible conditions, etc.Fine-tuning is not something that can be done frequently or fast, requiring numerous iterations, and it isnt intended for factual information, especially if dependent on current events or streamed information.Enhancing Context With InformationMost conversations we have are directly dependent on context; with AI, it isnt so much different. While there are definitely use cases that dont entirely depend on current events (translations, summarization, data analysis, etc.), many others do. However, it isnt quite feasible yet to have LLMs (or even SLMs) being trained on a daily basis.For this, a new technique can help: Retrieve-Augmented Generation (RAG). It consists of injecting a smaller dataset into the LLMs in order to provide it with more specific (and/or current) information. With a RAG, the LLM isnt better trained; it still has all the generalistic training it had before but now, before it generates the output, it receives an ingest of new information to be used.INFORAG enhances the LLMs context, providing it with a more comprehensive understanding of the topic.For an RAG to work well, data must be prepared/formatted in a way that the LLM can properly digest it. Setting it up is a multi-step process:RetrievalQuery external data (such as web pages, knowledge bases, and databases).Pre-ProcessingInformation undergoes pre-processing, including tokenization, stemming, and removal of stop words.Grounded GenerationThe pre-processed retrieved information is then seamlessly incorporated into the pre-trained LLM. RAG first retrieves relevant information from a database using a query generated by the LLM. Integrating an RAG to an LLM enhances its context, providing it with a more comprehensive understanding of the topic. This augmented context enables the LLM to generate more precise, informative, and engaging responses.Since it provides access to fresh information via easy-to-update database records, this approach is mostly for data-driven responses. Because this data is context-focused, it also provides more accuracy to facts. Think of a RAG as a tool to turn your LLM from a generalist into a specialist.Enhancing an LLM context through RAG is particularly useful for chatbots, assistants, agents, or other usages where the output quality is directly connected to domain knowledge. But, while RAG is the strategy to collect and inject data into the language models context, this data requires input, and that is why it also requires meaning embedded.EmbeddingTo make data digestible by the LLM, we need to capture each entrys semantic meaning so the language model can form the patterns and establish the relationships. This process is called embedding, and it works by creating a static vector representation of the data. Different language models have different levels of precision embedding. For example, you can have embeddings from 384 dimensions all the way to 3072.In other words, in comparison to our cartesian coordinates in a map (e.g., [28.3772, 81.5707]) with only two dimensions, an embedded entry for an LLM has from 384 to 3072 dimensions.Lets BuildI hope this helped you better understand what those terms mean and the processes which encompass the term AI. This merely scratches the surface of complexity, though. We still need to talk about AI Agents and how all these approaches intertwine to create richer experiences. Perhaps we can do that in a later article let me know in the comments if youd like that!Meanwhile, let me know your thoughts and what you build with this!Further Reading on SmashingMagUsing AI For Neurodiversity And Building Inclusive Tools, Pratik JoglekarHow To Design Effective Conversational AI Experiences: A Comprehensive Guide, Yinjian HuangWhen Words Cannot Describe: Designing For AI Beyond Conversational Interfaces, Maximillian PirasAIs Transformative Impact On Web Design: Supercharging Productivity Across The Industry, Paul Boag

Component-specific styling, styling parents based on their children, relative colors the web platform is going through exciting times, and many things that required JavaScript in the past can today be achieved with one simple line of HTML and CSS.As we are moving towards 2025, its a good time to revisit some of the incredible new technologies that are broadly available and supported in modern browsers today. Lets dive right in and explore how they can simplify your day-to-day work and help you build modern UI components.Table of ContentsBelow youll find quick jumps to topics you may be interested in, or skip the table of contents. anchor-positioning auto field-sizing container queries <dialog> exclusive accordions :focus-visible :has hidden=until-found high-definition colors <hr> in select inputmode min(), max(), clamp() relative colors responsive videos scroll behavior scroll snap text-wrap: balance :user-valid and :user-invalid View Transitions APICSS Container Queries And Style QueriesComponent-specific styling? What has long sounded like a dream to any developer, is slowly but surely becoming reality. Thanks to container queries, we can now query the width and style of the container in which components live.As Una Kravets points out in her introduction to style queries, this currently only works with CSS custom property values, but there are already some real-world use cases where style queries shine: They come in particularly handy when you have a reusable component with multiple variations or when you dont have control over all of your styles but need to apply changes in certain cases.If you want to dive deeper into whats possible with container style queries and the things we can maybe look forward to in the future, also be sure to take a look at Geoff Grahams post. He dug deep into the more nuanced aspects of style queries and summarized the things that stood out to him.No More Typographic Orphans And WidowsWe all know those headlines where the last word breaks onto a new line and stands there alone, breaking the visual and looking, well, odd. Of course, theres the good ol <br> to break the text manually or a <span> to divide the content into different parts. But have you heard of text-wrap: balance already?By applying the text-wrap: balance property, the browser will automatically calculate the number of words and divide them equally between two lines perfect for page titles, card titles, tooltips, modals, and FAQs, for example. Ahmad Shadeed wrote a helpful guide to text-wrap: balance in which he takes a detailed look at the property and how it can help you make your headlines look more consistent.When dealing with large blocks of text, such as paragraphs, you might want to look into text-wrap: pretty to prevent orphans on the last line.Auto Field-Sizing For FormsFinding just the right size for an input field usually involves a lot of guesswork or JavaScript to count characters and increase the fields height or width as a user enters text. CSS field-sizing is here to change that. With field-sizing, we can auto-grow inputs and text areas, but also auto-shrink short select menus, so the form always fits content size perfectly. All we need to make it happen is one line of CSS.Adam Argyle summarized everything you need to know about field-sizing, exploring in detail how field-sizing affects different <form> elements. To prevent your input fields from becoming too small or too large, it is also a good idea to insert some additional styles that keep them in shape. Adam shares a code snippet that you can copy-and-paste right away.Making Hidden Content SearchableAccordions are a popular UI pattern, but they come with a caveat: The content inside the collapsed sections is impossible to search with find-in-page search. By using the hidden=until-found attribute and the beforematch event, we can solve the problem and even make the content accessible to search engines.As Joey Arhar explains in his guide to making collapsed content searchable, you can replace the styles that hide the section with the hidden=until-found attribute. If your page also has another state that needs to be kept in sync with whether or not your section is revealed, he recommends adding a beforematch event listener. It will be fired on the hidden=until-found element right before the element is revealed by the browser.Styling Groups Within Select MenusIts a small upgrade for the <select> element, but a mighty one: We can now add <hr> into the list of select options, and they will appear as separators to help visually break up the options in the list.If you want to refine things further, also be sure to take a look at <optgroup>. The HTML element lets you group options within a <select> element by adding a subheading for each group.Simpler Snapping For Scrollable ContainersSometimes, you need a quick and easy way to make an element a scrollable container. CSS scroll snap makes it possible. The CSS feature enables us to create a well-controlled scrolling experience that lets users precisely swipe left and right and snap to a specific item in the container. No JavaScript required.Ahmad Shadeed wrote a practical guide that walks you step by step through the process of setting up a container with scroll snap. You can use it to create image galleries, avatar lists, or other components where you want a user to scroll and snap through the content, whether its horizontally or vertically.Anchor Positioning For Tooltips And PopoversWhether you use it for footnotes, tooltips, connector lines, visual cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API enables us to natively position elements relative to other elements, known as anchors.In her introduction to the CSS Anchor Positioning API, Una Kravets summarized in detail how anchor positioning works. She takes a closer look at the mechanism behind anchor positioning, how to tether to one and multiple anchors, and how to size and position an anchor-positioned element based on the size of its anchor. Browser support is still limited, so you might want to use the API with some precautions. Unas guide includes what to watch out for.High-Definition Colors With OKLCH And OKLABWith high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to 50% more colors, the times of RGB/HSL might be over soon. To get you familiar with the new color spaces, Vitaly wrote a quick overview of what you need to know.Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in design systems. OKLCH/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesnt support them yet.Relative Colors In CSSLets say you have a background color and want to reduce its luminosity by 25%, or you want to use a complementary color without having to calculate it yourself. The relative color syntax (RCS) makes it possible to create a new color based on a given color.To derive and compute a new color, we can use the from keyword for color functions (color(), hsl(), oklch(), etc.) to modify the values of the input color. Adam Argyle shares some code snippets of what this looks like in practice, or check the spec for more details.Smooth Transitions With The View Transitions APIThere are a number of use cases where a smooth visual transition can make the user experience more engaging. When a thumbnail image on a product listing page transitions into a full-size image on the product detail page, for example, or when you have a fixed navigation bar that stays in place as you navigate from one page to another. The View Transitions API helps us create seamless visual transitions between different views on a site.View transitions can be triggered not only on a single document but also between two different documents. Both rely on the same principle: The browser takes snapshots of the old and new states, the DOM gets updated while rendering is suppressed, and the transitions are powered by CSS Animations. The only difference lies in how you trigger them, as Bramus Van Damme explains in his guide to the View Transitions API. A good alternative to single page apps that often rely on heavy JavaScript frameworks.Exclusive AccordionsThe exclusive accordion is a variation of the accordion component. It only allows one disclosure widget to be open at the same time, so when a user opens a new one, the one that is already open will be closed automatically to save space. Thanks to CSS, we can now create the effect without a single line of JavaScript.To build an exclusive accordion, we need to add a name attribute to the <details> elements. When this attribute is used, all <details> elements that have the same name value form a semantic group and behave as an exclusive accordion. Bramus Van Damme summarized in detail how it works.Live And Late ValidationWhen we use :valid and :invalid to apply styling based on a users input, theres a downside: a form control that is required and empty will match :invalid even if a user hasnt started interacting with it yet. To prevent this from happening, we usually had to write stateful code that keeps track of input a user has changed. But not anymore.With :user-valid and :user-invalid, we now have a native CSS solution that handles all of this automatically. Contrary to :valid and :invalid, the :user-valid and :user-invalid pseudo-classes give users feedback about mistakes only after they have changed the input. :user-valid and :user-invalid work with input, select, and textarea controls.Smooth Scrolling BehaviorImagine you have a scrolling box and a series of links that target an anchored position inside the box. When a user clicks on one of the links, it will take them to the content section inside the scrolling box with a rather abrupt jump. The scroll-behavior property makes the scrolling transition a lot smoother, only with CSS.When setting the scroll-behavior value to smooth, the scrolling box will scroll in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. Of course, you can also use scroll-behavior: auto, and the scrolling box will scroll instantly.Making Focus VisibleFocus styles are essential to help keyboard users navigate a page. However, for mouse users, it can be irritating when a focus ring appears around a button or link as they click on it. :focus-visible is here to help us create the best experience for both user groups: It displays focus styles for keyboard users and hides them for mouse users.:focus-visible applies while an element matches the :focus pseudo-class and the User Agent determines via heuristics that the focus should be made visible on the element. Curious how it works in practice? MDN Web Docs highlights the differences between :focus and :focus-visible, what you need to consider accessibility-wise, and how to provide a fallback for old browser versions that dont support :focus-visible. Styling Parents Based On ChildrenHistorically, CSS selectors have worked in a top-down fashion, allowing us to style a child based on its parent. The new CSS pseudo-class :has works the other way round: We can now style a parent based on its children. But thats not all yet. Josh W. Comeau wrote a fantastic introduction to :has in which he explores real-world use cases that show what the pseudo-class is capable of.:has is not limited to parent-child relationships or direct siblings. Instead, it lets us style one element based on the properties or status of any other element in a totally different container. And it can be used as a sort of global event listener, as Josh shows to disable scrolling on a page when a modal is open or to create a JavaScript-free dark mode toggle, for example.Interpolate Between Values For Type And SpacingCSS comparison functions min(), max(), and clamp() are today supported in all major browsers, providing us with an effective way to create dynamic layouts with fluid type scales, grids, and spacing systems.To get you fit for using the functions in your projects right away, Ahmad Shadeed wrote a comprehensive guide in which he explains everything you need to know about min(), max(), and clamp(), with practical examples and use cases and including all the points of confusion you might encounter.If youre looking for a quick and easy way to create fluid scales, the Fluid Type Scale Calculator by Utopia has got your back. All you need to do is define min and max viewport widths and the number of scale steps, and the calculator provides you with a responsive preview of the scale and the CSS code snippet.Reliable Dialog And PopoverIf youre looking for a quick way to create a modal or popup, the <dialog> HTML element finally offers a native (and accessible!) solution to help you get the job done. It represents a modal or non-modal dialog box or other interactive component, such as a confirmation prompt or a subwindow used to enter data.While modal dialog boxes interrupt interaction with a page, non-modal dialog boxes allow interaction with the page while the dialog is open. Adam Argyle published some code snippets that show how <dialog> can block pop-ups and popovers for non-blocking menus, out of the box.Responsive HTML Video And AudioIn 2014, media attribute support for HTML video sources was deleted from the HTML standard. Last year, it made a comeback, which means that we can use media queries for delivering responsive HTML videos.Scott Jehl summarized how responsive HTML video and even audio works, what you need to consider when writing the markup, and what other types of media queries can be used in combination with HTML video.The Right Virtual Keyboard On MobileIts a small detail, but one that adds to a well-considered user experience: displaying the most comfortable touchscreen keyboard to help a user enter their information without having to switch back and forth to insert numbers, punctuation, or special characters like an @ symbol.To show the right keyboard layout, we can use inputmode. It instructs the browser which keyboard to display and supports values for numeric, telephone, decimal, email, URL, and search keyboards. To further improve the UX, we can add the enterkeyhint attribute: it adjusts the text on the Enter key. If no enterkeyhint is used, the user agent might use contextual information from the inputmode attribute.A Look Into The FutureAs we are starting to adopt all of these shiny new front-end features in our projects, the web platform is, of course, constantly evolving and there are some exciting things on the horizon already! For example, we are very close to getting masonry layout, fully customizable drop-downs with <selectmenu>, and text-box trimming for adjusting fonts to be perfectly aligned within the grid. Kudos to all the wonderful people who are working tirelessly to push the web forward! In the meantime, we hope you found something helpful in this post that you can apply to your product or application right away. Happy tinkering!Smashing Weekly NewsletterYou want to stay on top of whats happening in the world of front-end and UX? With our weekly newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. Every issue is curated, written, and edited with love and care. No third-party mailings or hidden advertising.Also, when you subscribe, you really help us pay the bills. Thank you for your kind support!

The new year is the perfect occasion to tidy up your desktops and start on a fresh, clean slate. No clutter, just the things you really need and plenty of space for whats about to come. So how about some new desktop wallpapers to make the makeover complete and spark your inspiration this January?More than thirteen years ago, we started our monthly wallpapers series to bring you a new collection of beautiful and unique desktop wallpapers every month. And, of course, this month is no exception.In this post, youll find January wallpapers to inspire, make you smile, or just to cater for some happy pops of color on a dark winter day. All of them are created with love by artists and designers from across the globe and can be downloaded for free. A big thank you to everyone who shared their designs with us you are truly smashing! Have a happy and healthy 2025, everyone!You can click on every image to see a larger preview.We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit your wallpaper design! Feeling inspired? We are always looking for creative talent and would love to feature your desktop wallpaper in one of our upcoming posts. We cant wait to see what youll come up with!Happy New Year 86Designed by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Who Wants To Be KingDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Bird Bird Bird BirdJust four birds, ready for winter. Designed by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Celebrate Squirrel Appreciation Day!Join us in honoring our furry little forest friends this Squirrel Appreciation Day! Whether theyre gathering nuts, building cozy homes, or brightening up winter days with their playful antics, squirrels remind us to treasure natures small wonders. Lets show them some love today! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Cheerful Chimes CityDesigned by Design Studio from India.previewwithout calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440A Fresh StartDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Cold Penguins!The new year is here! We waited for it like penguins. We look at the snow and enjoy it! Designed by Veronica Valenzuela from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Open The Doors Of The New YearJanuary is the first month of the year and usually the coldest winter month in the Northern hemisphere. The name of the month of January comes from ianua, the Latin word for door, so this month denotes the door to the new year and a new beginning. Lets open the doors of the new year together and hope it will be the best so far! Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Boom!Designed by Elise Vanoorbeek from Belgium.previewwithout calendar: 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Winter LeavesDesigned by Nathalie Ouederni from France.previewwithout calendar: 320x480, 1024x768, 1280x1024, 1440x900, 1600x1200, 1680x1200, 1920x1200, 2560x1440Start SomewhereIf we wait until were ready, well be waiting for the rest of our lives. Start today somewhere, anywhere. Designed by Shawna Armstrong from the United States.previewwithout calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Peaceful MountainsWhen all the festivities are over, all we want is some peace and rest. Thats why I made this simple flat art wallpaper with peaceful colors. Designed by Jens Gilis from Belgium.previewwithout calendar: 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Be Awesome TodayA little daily motivation to keep your cool during the month of January. Designed by Amalia Van Bloom from the United States.previewwithout calendar: 640x960, 1024x768, 1280x800, 1280x1024, 1440x900, 1920x1200, 2560x1440YogabearDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Winter GetawayWhat could be better, than a change of scene for a week? Even if you are too busy, just think about it. Designed by Igor Izhik from Canada.previewwithout calendar: 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600Don Quijote, Here We Go!This year we are going to travel through books, and you couldnt start with a better one than Don Quijote de la Mancha! Designed by Veronica Valenzuela Jimenez from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440The Little ParadoxDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160A New BeginningI wanted to do a lettering-based wallpaper because I love lettering. I chose January because for a lot of people the new year is perceived as a new beginning and I wish to make them feel as positive about it as possible! The idea is to make them feel like the new year is (just) the start of something really great. Designed by Carolina Sequeira from Portugal.previewwithout calendar: 320x480, 1280x1024, 1680x1050, 2560x1440Happy Hot Tea MonthYou wake me up to a beautiful day; lift my spirit when Im feeling blue. When Im home you relieve me of the long days stress. You help me have a good time with my loved ones; give me company when Im all alone. Youre none other than my favourite cup of hot tea. Designed by Acodez IT Solutions from India.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Dont Forget Your VitaminsDiscover the seasonal fruits and vegetables. In January: apple and banana enjoying the snow! Designed by Vitaminas Design from Spain.previewwithout calendar: 320x480, 1280x800, 1280x1024, 1440x900, 1920x1080, 2560x1440Dare To Be YouThe new year brings new opportunities for each of us to become our true selves. I think that no matter what you are like this little monster you should dare to be the true you without caring what others may think. Happy New Year! Designed by Maria Keller from Mexico.previewwithout calendar: 320x480, 640x480, 640x1136, 750x1334, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1242x2208, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440, 2880x1800Angel In SnowDesigned by Brainer from Ukraine.previewwithout calendar: 800x600, 1024x768, 1152x864, 1280x800, 1280x960, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1260, 1920x1200, 1920x1440SnowmanDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 Oaken JanuaryIn our country, Christmas is celebrated in January when oak branches and leaves are burnt to symbolize the beginning of the new year and new life. Its the time when we gather with our families and celebrate the arrival of the new year in a warm and cuddly atmosphere. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Rubber Ducky DayWinter can be such a gloomy time of the year. The sun sets earlier, the wind feels colder, and our heating bills skyrocket. I hope to brighten up your month with my wallpaper for Rubber Ducky Day! Designed by Ilya Plyusnin from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The Early January BirdJanuary is the month of a new beginning, hope, and inspiration. Thats why it reminds me of an early bird. Designed by Zlatina Petrova from Bulgaria.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440A New StartThe new year brings hope, festivity, lots and lots of resolutions, and many more goals that need to be achieved. Designed by Damn Perfect from India.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Wolf MonthWolf-month (in Dutch wolfsmaand) is another name for January. Designed by Chiara Faes from Belgium.previewwithout calendar: 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440

Many design leaders find themselves in an impossible situation. On one side, senior management have read articles trumpeting the incredible ROI of user experience design. McKinsey tells us that design-led companies achieve 56% higher returns to shareholders. Forrester reports that every dollar invested in UX brings 100 dollars in return.Yet the reality I encounter when talking to design leaders is very different. Most are desperately under-resourced, with tiny teams expected to support hundreds of projects across their organizations. The result? Were spread so thin that we can barely scratch the surface of what needs doing.The problem isnt just about resources. Its about expectations and how we define our role. Too often, we position ourselves (or are positioned by others) as implementors the people who do the user research, create the prototypes, and run the usability tests. But with the scale of digital touching every corner of our organizations, thats simply not sustainable.Time For A New ApproachWe need to stop trying to do everything ourselves and instead focus on empowering others across the organization to improve the user experience. In other words, we need to become true leaders rather than just practitioners.This isnt about giving up control or lowering standards. Its about maximizing our impact by working through others. Think about it: would you rather be directly involved in 10% of projects or have some influence over 90% of them?What Does This Look Like In Practice?First, we need to shift our mindset from doing to enabling. This means:Offering targeted services rather than trying to be involved in everything;Providing coaching and mentoring to help others understand UX principles;Creating resources that empower others to make better UX decisions;Setting standards and guidelines that can scale across the organization.Lets break down each of these areas.Targeted ServicesInstead of trying to be involved in every project, focus on providing specific, high-value services that can make the biggest impact. This might include:Running discovery phases for major initiativesBy strategically initiating discovery phases for critical projects, you ensure that they start with a strong, user-focused foundation. This can involve tools like the Strategic User-Driven Project Assessment (SUPA), which helps validate ideas by assessing audience value, user needs, feasibility, and risks before committing to major investments. SUPA ensures projects are not just built right but are the right ones to build.Project-Specific UX GuidanceRegular feedback on design assets throughout a project keeps UX principles front and center. This can be achieved by offering UX audits, periodic check-ins to assess progress, or design reviews at key milestones.Facilitating workshops and problem-solving sessionsLeading targeted workshops or brainstorming sessions empowers teams to overcome design challenges on their own with your guidance. These tailored sessions help teams understand how to make better user-centered decisions and solve issues themselves, spreading UX capabilities beyond your team.The key is to be strategic about where you spend your time, focusing on activities that will have the greatest ripple effect across the organization.Coaching And MentoringOne of the most effective ways to scale your impact is through coaching. This could include:UX Office HoursDesignate times where anyone in the organization can drop in to get quick UX advice. This informal setting can solve small issues before they snowball and helps stakeholders learn as they go.One-on-One or Group CoachingScheduled check-ins with individuals or teams are great opportunities to address challenges directly, mentor those who need extra support, and ensure alignment with best practices. Regular 1:1 or group coaching keeps UX priorities on track and provides valuable guidance when and where its needed most.Tailored Problem-Solving SessionsProviding bespoke guidance for specific challenges that teams encounter empowers them to tackle design obstacles while internalizing the principles of good UX. These problem-solving sessions can be invaluable in ensuring teams can autonomously address future problems.The goal isnt to turn everyone into UX experts but to help them understand enough to make better decisions in their daily work.Its also important to recognize that others might not initially deliver work at the same level of quality that you would. This is okay. The primary goal is to get people engaged and excited about UX. If we criticize them every time they fall short of perfection, we risk undermining their enthusiasm. Instead, we need to foster a supportive environment where improvement happens over time.Creating ResourcesDevelop tools and resources that help others apply UX principles independently. For example:Design SystemsCreate and maintain a comprehensive design system that integrates UX best practices into the UI across the organization. A well-crafted design system ensures that everyone, from developers to designers, aligns on consistent best practices, making it easier for teams to work independently while still maintaining high standards. This includes reusable code components, clear documentation, and alignment between design and development.UX Tool SuiteProviding teams with pre-selected tools for user research, prototyping, and user testing helps maintain quality and saves time. With tools for everything from user research to usability testing, you provide the resources teams need to conduct UX activities on their own without extensive onboarding.Research RepositoryMaintain a centralized repository of user research findings that can be accessed by anyone across the organization. A well-organized research repository can reduce duplication of effort, provide insights across different initiatives, and allow teams to learn from each others findings. This promotes consistent application of user insights across projects.Supplier ListsProviding a vetted list of suppliers and external agencies helps ensure consistency when work is outsourced. It provides quick access to high-quality resources, mitigates risk, and builds trust with suppliers who understand your standards.Self-Service Training ResourcesCreate a library of on-demand training materials that teams can access when needed. This should include video tutorials, interactive exercises, case studies, and step-by-step guides for common UX tasks like conducting user interviews, creating personas, or running usability tests. Unlike scheduled workshops, self-paced learning allows people to access knowledge exactly when they need it, leading to better retention and practical application.These resources should be practical and accessible, making it easy for teams to do the right thing.Setting StandardsCreate a framework that guides UX decisions across the organization:Design PrinciplesEstablish core design principles that align with your organizations values and user-centered goals. These principles help ensure consistency and clarity in decision-making. For example, define around six to ten principles that stakeholders across the organization have voted on and agreed upon, ensuring broader buy-in and consistent decision-making.Policies for UXDevelop clear policies that standardize processes like work requests, user research and testing, and stakeholder involvement. These policies help set expectations, keep efforts aligned with organizational goals, and make it easier for non-UX professionals to understand and comply with best practices.Project Prioritization PoliciesHaving clear guidelines on how projects are prioritized ensures that UX gets the attention it needs in the planning stages, preventing it from being overlooked or marginalized. Establish policies that align project value to user needs and organizational priorities.The key is to make these standards helpful rather than bureaucratic they should enable better work, not create unnecessary obstacles.Bringing It All TogetherAll of these elements should come together in what I call a UX Playbook a single source of truth that contains everything teams need to deliver better user experiences. This isnt just another document to gather dust; its a living resource that demonstrates your value as a leader and helps others get started on their UX journey.The shift from practitioner to leader isnt easy. It requires letting go of some control and trusting others to carry forward UX principles. But its the only way to create lasting change at scale.If youre struggling with this transition, I am running a workshop on design leadership in February. I would love to discuss your situation there.

What makes an incredible project? Is it the client? The type of project? An exorbitant budget? While those things help to create the environment in which a great project can thrive, what truly makes a project something powerful is you.No, this isnt some pep talk on why you are the ultimate weapon but yes, you are if you want to be. I am simply a web and product designer writing down my observations in order to give others the tools to make their project experiences all the better for it.Still with me? Let me tell you about what Ive discovered over the years working as an agency designer.There are three approaches that have completely changed the way my projects run from start to finish. I have found that since implementing all three, my work and my interactions with clients and coworkers have blossomed. Here they are:Unlearn previous experiences through Reframing.Tap into your background with Connection Paths.Take up your own space. Period.In this article, you will find explanations of each approach and connected practical examples as well as real-life ones from my project work at Fueled + 10up to show you how they can be applied to projects. With that said, lets dive in.Approach 1: Unlearn Previous Experiences Through ReframingWhile some of the things that we have learned over the years spent in design are invaluable, amidst those previous experiences, there are also the ones that hold us back.Unlearning ingrained lessons is not an easy thing to do. Rather, I challenge you to reframe them and get into the habit of asking yourself, Am I stopping short creatively because I have always gone this far? or Am I associating an implied response from others due to a previous experience and therefore not doing enough for the project?Let me give you some examples of thoughts that may arise on a given project and how you can reframe them in a better way.Initial ThoughtIve designed cards thousands of times. Therefore, there are only so many ways you can do it.As you know, in 99.9% of website design projects, a card design is required. It may seem that every possible design ever imagined has been created up to this point a fair reasoning, isnt it? However, stifling yourself from the very get-go with this mentality will only serve to produce expected and too-well-known results.Reframed ThoughtInstead, you could approach this scenario with the following reframed thought: Ive designed cards thousands of times, so let me take what Ive learned, do some more exploration, and iterate on what could push these cards further for this particular project.With this new outlook, you may find yourself digging deeper to pull on creative threads, inevitably resulting in adaptive thinking. A good exercise to promote this is the Crazy 8s design exercise. In this format, you can pull forth rapid ideas some good, some not so good and see what sticks. This method is meant to get your brain working through a simple solution by tackling it from multiple angles.Real-Life ExampleHere is a real-life example from one of my projects in which I had to explore cards on a deeper level. This clients website was primarily made up of cards of varying content and complexity. In the initial stages of design, I worked to define how we could differentiate cards, with prominence in size, imagery, and color, as well as motion and hover effects.What I landed on was a flexible system that had three tiers and harmonized well together. Knowing they had content that they wanted to be highlighted in a distinctive way, I created a Featured Card and tied it to the brand identity with the cutout shape in the image masking. I also included the glass effect on top to allude to the brands science background and ensure the text was accessible. For the Stacked Card, I introduced a unique hover effect pattern: depending on where the card was in a given grid, it would determine the cards hover color. Lastly, for the Horizontal Card, I wanted to create something that had equal emphasis on the image and content and that could also stand alone well, even without an image.While these cards include what most cards usually do, the approach I took and the visual language used was unique to the client. Instead of working on these too quickly, I ventured down a different path that took a little more thought, which led me to a result that felt in tune with the clients needs. It also pushed me outside of what I knew to be the standard, straightforward approach.Initial ThoughtFast is better. Clients and project teams want me to be fast, so its okay if I cut down on exploration.In most projects, speed is indeed rewarded. It keeps the project within its budget constraints, the project managers are happy, and ultimately, the clients are happy, too. However, what it can end up doing instead is generating errors in the process and hindering design exploration.Reframed ThoughtIn this scenario, you can reframe this like so:I like to work fast because I want the team to be successful. In addition, I want to make sure I have not only produced high-quality work but also explored whether this is the best and most creative solution for the project.With this new outlook, you are still looking out for what clients and project teams want (successful outcomes), but you have also enriched the experience by fully executing your design expertise rather than just churning out work. One recommendation here is to always ensure you are communicating with your project team about the budget and timelines. Keeping yourself aware of these key goals will allow you to pace when to push for more exploration and when to dial it in.Real-Life ExampleI experienced this on a project of mine when a clients piece of feedback seemed clear-cut, but as we entered a third round of design surrounding it, it revealed that it was much more complicated.The client, Cleveland Public Library, had approved a set of wireframes for their homepage that illustrated a very content-heavy hero, but when it came to the design phase, they were delighted by a simpler, more bold design for a block that I created in my preliminary design explorations. At first, I thought it was obvious: lets just give them a dialed-in, simple hero design and be done with it. I knew the hours were precious on this project, and I wanted to save time for later on as we got into the finer design details of the pages. However, this was an error on my part.After taking a step back and removing speed as a key factor during this phase of the project, I found the solution they actually needed: a content-heavy hero showcasing the breadth of their offerings, melded with the boldness of the more pared-down design. And guess what? This variant was approved instantly!Now that I have shown you two examples of how to unlearn previous experiences, I hope you can see the value of reframing those moments in order to tap into a more uninhibited and unexplored creative path. Of course, you should expect that it will take several implementations to start feeling the shift towards inherent thinking even I need to remind myself to pause and reframe, like in the last example. Rome wasnt built in a day, as they say!Try ThisI challenge you to identify a few moments on a recent project where you could have paused, reflected, and used more creativity. What would you have done differently?Approach 2: Tap Into Your Background With Connection PathsI know I just talked about unlearning some of our previous experiences to unlock creativity, but what about the ones we may want to tap into to push us even further? Every designer has an array of passions, memories, and experiences that have culminated into what makes us who we are today. We often have a work self professional and poised, and a personal self exploding with hobbies. How can we take those unique facets of our personalities and apply them to our projects?Creating connections with projects and clients on a deeper level is a major way to make use of our personal experiences and knowledge. It can help to add inspiration where you otherwise may not have found that same spark on a project or subject matter.Let me walk you through what I like to call the Three Connection Paths. Ill also show you how you can pull from these and apply them to your projects.Direct PathThis connection path is one in which you have overlapping interests with the client or subject matter.An example of this is a client from the video game industry, and you play their video games. Seems like an obvious connection! You can bring in your knowledge and love for the game industry and their work. You could propose easter eggs and tie-ins to their games on their website. Its a match made in heaven.Cross PathThis connection path is one in which you cross at a singular point with the client or subject matter.An example of this is a client, which is a major restaurant chain, and you used to work in the food industry. With your background, you understand what it is like to work at a restaurant, so you might suggest what CTAs or fun graphics would be important for a staff-centric site.Network PathThis connection path is one in which you are tethered to the client or subject matter through who you know.An example of this is a client in the engineering field, and one of your family members is an engineer. You can then ask your family members for insights or what would be a good user experience for them on a redesigned website.Sometimes, you wont be so lucky as to align with a client in one of the Three Connection Paths, but you can still find ways to add a layered experience through other means, such as your skillset and research. In the last example, say you know nothing about engineering nor have a connection to someone who does, but you are an excellent copy editor outside of work. You can propose tweaking the verbiage on their hero section to emphasize their goals all the more. This shows care and thoughtfulness, giving the client an experience they are sure to appreciate.Real-Life ExampleA real-life example in which I implemented a Direct Connection Path on a project was for Comics Kingdoms website redesign. When I was younger, I wanted to be a manga creator, so this client being an intermediary between comic readers and creators resonated with me. Not only that, but I still practice illustration, so I knew I had to bring this skill set to the table, even though it was not part of the original scope of work.I allowed myself to lean into that spark I felt. I hand-sketched a few illustrations in Procreate for their website that felt personal and tied to the joy that comics evoke. Beyond that, I found a way to incorporate my knowledge of manga into a background pattern that pulled inspiration from nawa-ami (a traditional cross-hatching style to denote deep thought) and mixed it with the motif of fingerprints the idea of identity and the artists own mark on their work.Due to my deep passion, I was able to cultivate an excellent collaborative relationship with the client, which led to a very successful launch and being invited to speak on their podcast. This experience solidified my belief that through tapping into Connection Paths, you can forge not only amazing projects but also partnerships.Try ThisLook at what projects you currently have and see which of the Three Connection Paths you could use to build that bond with the client or the subject matter. If you dont see one of the Three Connection Paths aligning, then what skills or research could you bring to the table instead?Approach 3: Take Up Your Own SpaceThe last and arguably most important approach to leveling up your projects is taking up your own space. Im not referring to physical space like strong-arming those around you. What Im referring to is the space in which designers take to be vocal about their design decisions.A lot of designers find this practice uncomfortable. Whether it stems from having not been given that space to practice as a beginner designer, higher ranking designers not leaving the room for those less vocal, or even you yourself feeling like someone else might be better suited to talk to a particular point.Dont RetreatSimilarly, some designers find themselves retreating when receiving feedback. Instead of standing behind the reasoning of their designs or asking follow-up questions, it seems easier to simply go along with the requested change in order to make the client or team member providing the feedback happy. Even if you disagree with the request, does it feel like you need to execute it just because the client or someone you feel outranks you told you to?You Are The ExpertThere is another option, one in which you can mark yourself as the design expert you are and get comfortable in the discomfort.Saying you dont agree and explaining why helps solidify you as a strong decision-maker and confident designer. Tying it back to why you made the decision in the first place is key.Illuminating your opinions and reasoning in conversations is what will get those around you to trust in your decisions. Hiding them away or conceding to client whims isnt going to show those around you that you have the knowledge to make the proper recommendations for a project.The Middle GroundNow, Im not saying that you will need to always disagree with the provided feedback to show that you have a backbone. Far from it. I think there is a time and place for when you need to lean into your expertise, and a time and place for when you need to find a middle ground and/or collaborate. Collaborating with coworkers and clients lets them peek into the why behind the design decisions being made.ExampleA great example of this is a client questioning you on a particular font size, saying it feels too large and out of place.You have two options:You could say that you will make it smaller.Or you could dig deeper.If you have been paying attention thus far, youd know that option 2. is the route I would suggest. So, instead of just changing the font size, you should ask for specifics. For example, is the type hierarchy feeling off the relationship of that heading to the body font it is paired with? You can ask if the size feels large in other instances since perhaps this is your H2 font, so it would need to be changed across the board. Calling attention to why you chose this size using data-informed UX design, accessibility, brand, or storytelling reasons all amplify your decision-making skills before the client, so including that information here helps.If, after the discussion, the client still wants to go with changing the font size, at least you have given your reasoning and shown that you didnt thoughtlessly make a decision you made the design choice after taking into consideration multiple factors and putting in a lot of thought. Over time, this will build trust in you as the design expert on projects.Real-Life ExampleAn example in which I showcased taking up my own space was from a recent project I worked on for Hilton Stories in their collaboration with Wicked. After conceptualizing a grand takeover experience complete with a storytelling undertone, one of the clients wanted to remove the page-loading animation with the idea of having more branded elements elsewhere.While most of my team was ready to execute this, I read between the lines and realized that we could solve the issue by including clear verbiage of the collaboration on the loading animation as well as adding logos and a video spot to the interior pages. By sticking up for a key piece of my designs, I was able to show that I was aligned with not only my design decisions but the major goals of the project. This solution made the clients happy and allowed for a successful launch with the loading animation that the Fueled + 10up team and I worked so hard on.Try ThisThe next time you receive feedback, pause for a moment. Take in carefully what is being said and ask questions before responding. Analyze if it makes sense to go against the design decisions you made. If it doesnt, tell the client why. Have that open dialogue and see where you land. This will be uncomfortable at first, but over time, it will get easier.Remember, you made your decisions for a reason. Now is the time to back up your design work and ultimately back up yourself and your decisions. So, take up your own space unapologetically.ConclusionNow that you have learned all about the three approaches, there is nothing stopping you from trialing these on your next project. From unlearning previous experiences through Reframing to tapping into your background with Connection Paths, you can lay the groundwork for how your past can be used to shape your future interactions. When taking up your own space, start small as you begin to advocate for your designs, and always try to connect to the whys so you instill trust in your clients and members of your design team.As Robin Williams so eloquently delivered in the Dead Poets Society, No matter what anybody tells you, words and ideas can change the world. In this case, you dont need to apply it so widely as the entire world, maybe just to your workplace for now.

You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though youll need to enable a flag. Safari? Not yet, but dont worry you can still offer a seamless experience across all browsers with a polyfill. Just keep in mind that adding a polyfill involves a JavaScript library, so you wont get the same performance boost.There are plenty of valuable resources to dive into scroll-driven animations, which Ill be linking throughout the article. My starting point was Bramus video tutorial, which pairs nicely with Geoffs in-depth notes Graham that build on the tutorial.In this article, well walk through the latest published version by the W3C and explore the two types of scroll-driven timelines scroll progress timelines and view progress timelines. By the end, I hope that you are familiar with both timelines, not only being able to tell them apart but also feeling confident enough to use them in your work.Note: All demos in this article only work in Chrome 116 or later at the time of writing.Scroll Progress TimelinesThe scroll progress timeline links an animations timeline to the scroll position of a scroll container along a specific axis. So, the animation is tied directly to scrolling. As you scroll forward, so does the animation. Youll see me refer to them as scroll-timeline animations in addition to calling them scroll progress timelines.Just as we have two types of scroll-driven animations, we have two types of scroll-timeline animations: anonymous timelines and named timelines.Anonymous scroll-timelineLets start with a classic example: creating a scroll progress bar at the top of a blog post to track your reading progress.See the Pen Scroll Progress Timeline example - before animation-timeline scroll() [forked] by Mariana Beldi. In this example, theres a <div> with the ID progress. At the end of the CSS file, youll see it has a background color, a defined width and height, and its fixed at the top of the page. Theres also an animation that scales it from 0 to 1 along the x-axis pretty standard if youre familiar with CSS animations!Heres the relevant part of the styles:#progress { /* ... */ animation: progressBar 1s linear;}@keyframes progressBar { from { transform: scaleX(0); }}The progressBar animation runs once and lasts one second with a linear timing function. Linking this animation scrolling is just a single line in CSS:animation-timeline: scroll();No need to specify seconds for the durationthe scrolling behavior itself will dictate the timing. And thats it! Youve just created your first scroll-driven animation! Notice how the animations direction is directly tied to the scrolling direction scroll down, and the progress indicator grows wider; scroll up, and it becomes narrower.See the Pen Scroll Progress Timeline example - animation-timeline scroll() [forked] by Mariana Beldi.scroll-timeline Property ParametersIn a scroll-timeline animation, the scroll() function is used inside the animation-timeline property. It only takes two parameters: <scroller> and <axis>.<scroller> refers to the scroll container, which can be set as nearest (the default), root, or self.<axis> refers to the scroll axis, which can be block (the default), inline, x, or y.In the reading progress example above, we didnt declare any of these because we used the defaults. But we could achieve the same result with:animation-timeline: scroll(nearest block);Here, the nearest scroll container is the root scroll of the HTML element. So, we could also write it this way instead:animation-timeline: scroll(root block);The block axis confirms that the scroll moves top to bottom in a left-to-right writing mode. If the page has a wide horizontal scroll, and we want to animate along that axis, we could use the inline or x values (depending on whether we want the scrolling direction to always be left-to-right or adapt based on the writing mode).Well dive into self and inline in more examples later, but the best way to learn is to play around with all the combinations, and this tool by Bramus lets you do exactly that. Spend a few minutes before we jump into the next property associated with scroll timelines.The animation-range PropertyThe animation-range for scroll-timeline defines which part of the scrollable content controls the start and end of an animations progress based on the scroll position. It allows you to decide when the animation starts or ends while scrolling through the container.By default, the animation-range is set to normal, which is shorthand for the following:animation-range-start: normal;animation-range-end: normal;This translates to 0% (start) and 100% (end) in a scroll-timeline animation:animation-range: normal normal;which is the same as:animation-range: 0% 100%;You can declare any CSS length units or even calculations. For example, lets say I have a footer thats 500px tall. Its filled with banners, ads, and related posts. I dont want the scroll progress bar to include any of that as part of the reading progress. What I want is for the animation to start at the top and end 500px before the bottom. Here we go:animation-range: 0% calc(100% - 500px);See the Pen Scroll Progress Timeline example - animation-timeline, animation-range [forked] by Mariana Beldi.Just like that, weve covered the key properties of scroll-timeline animations. Ready to take it a step further?Named scroll-timelineLets say I want to use the scroll position of a different scroll container for the same animation. The scroll-timeline-name property allows you to specify which scroll container the scroll animation should be linked to. You give it a name (a dashed-ident, e.g., --my-scroll-timeline) that maps to the scroll container you want to use. This container will then control the animations progress as the user scrolls through it.Next, we need to define the scroll axis for this new container by using the scroll-timeline-axis, which tells the animation which axis will trigger the motion. Heres how it looks in the code:.my-class { /* This is my new scroll-container */ scroll-timeline-name: --my-custom-name; scroll-timeline-axis: inline;}If you omit the axis, then the default block value will be used. However, you can also use the shorthand scroll-timeline property to combine both the name and axis in a single declaration:.my-class { /* Shorthand for scroll-container with axis */ scroll-timeline: --my-custom-name inline;}I think its easier to understand all this with a practical example. Heres the same progress indicator weve been working with, but with inline scrolling (i.e., along the x-axis):See the Pen Named Scroll Progress Timeline [forked] by Mariana Beldi.We have two animations running:A progress bar grows wider when scrolling in an inline direction.The containers background color changes the further you scroll.The HTML structure looks like the following:<div class="gallery"> <div class="gallery-scroll-container"> <div class="gallery-progress" role="progressbar" aria-label="progress"></div> <img src="image1.svg" alt="Alt text" draggable="false" width="500"> <img src="image2.svg" alt="Alt text" draggable="false" width="500"> <img src="image3.svg" alt="Alt text" draggable="false" width="500"> </div></div>In this case, the gallery-scroll-container has horizontal scrolling and changes its background color as you scroll. Normally, we could just use animation-timeline: scroll(self inline) to achieve this. However, we also want the gallery-progress element to use the same scroll for its animation.The gallery-progress element is the first inside gallery-scroll-container, and we will lose it when scrolling unless its absolutely positioned. But when we do this, the element no longer occupies space in the normal document flow, and that affects how the element behaves with its parent and siblings. We need to specify which scroll container we want it to listen to.Thats where naming the scroll container comes in handy. By giving gallery-scroll-container a scroll-timeline-name and scroll-timeline-axis, we can ensure both animations sync to the same scroll:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline;}And is using that scrolling to define its own animation-timeline:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline; animation-timeline: --scroller;}Now we can scale this name to the progress bar that is using a different animation but listening to the same scroll:.gallery-progress { /* ... */ animation: progressBar linear; animation-timeline: --scroller;}This allows both animations (the growing progress bar and changing background color) to follow the same scroll behavior, even though they are separate elements and animations.The timeline-scope PropertyWhat happens if we want to animate something based on the scroll position of a sibling or even a higher ancestor? This is where the timeline-scope property comes into play. It allows us to extend the scope of a scroll-timeline beyond the current elements subtree. The value of timeline-scope must be a custom identifier, which again is a dashed-ident.Lets illustrate this with a new example. This time, scrolling in one container runs an animation inside another container:See the Pen Scroll Driven Animations - timeline-scope [forked] by Mariana Beldi.We can play the animation on the image when scrolling the text container because they are siblings in the HTML structure:<div class="main-container"> <div class="sardinas-container"> <img ...> </div> <div class="scroll-container"> <p>Long text...</p> </div></div>Here, only the .scroll-container has scrollable content, so lets start by naming this:.scroll-container { /* ... */ overflow-y: scroll; scroll-timeline: --containerText;}Notice that I havent specified the scroll axis, as it defaults to block (vertical scrolling), and thats the value I want.Lets move on to the image inside the sardinas-container. We want this image to animate as we scroll through the scroll-container. Ive added a scroll-timeline-name to its animation-timeline property:.sardinas-container img { /* ... */ animation: moveUp steps(6) both; animation-timeline: --containerText;}At this point, however, the animation still wont work because the scroll-container is not directly related to the images. To make this work, we need to extend the scroll-timeline-name so it becomes reachable. This is done by adding the timeline-scope to the parent element (or a higher ancestor) shared by both elements:.main-container { /* ... */ timeline-scope: --containerText;}With this setup, the scroll of the scroll-container will now control the animation of the image inside the sardinas-container!Now that weve covered how to use timeline-scope, were ready to move on to the next type of scroll-driven animations, where the same properties will apply but with slight differences in how they behave.View Progress TimelinesWe just looked at scroll progress animations. Thats the first type of scroll-driven animation of the two. Next, were turning our attention to view progress animations. Theres a lot of similarities between the two! But theyre different enough to warrant their own section for us to explore how they work. Youll see me refer to these as view-timeline animations in addition to calling them view progress animations, as they revolve around a view() function.The view progress timeline is the second type of type of scroll-driven animation that were looking at. It tracks an element as it enters or exits the scrollport (the visible area of the scrollable content). This behavior is quite similar to how an IntersectionObserver works in JavaScript but can be done entirely in CSS.We have anonymous and named view progress timelines, just as we have anonymous and named scroll progress animations. Lets unpack those.Anonymous View TimelineHeres a simple example to help us see the basic idea of anonymous view timelines. Notice how the image fades into view when you scroll down to a certain point on the page:See the Pen View Timeline Animation - view() [forked] by Mariana Beldi.Lets say we want to animate an image that fades in as it appears in the scrollport. The images opacity will go from 0 to 1. This is how you might write that same animation in classic CSS using @keyframes:img { /* ... */ animation: fadeIn 1s;}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}Thats great, but we want the image to fadeIn when its in view. Otherwise, the animation is sort of like a tree that falls in a forest with no one there to witness it did the animation ever happen? Well never know!We have a view() function that makes this a view progress animation with a single line of CSS:img { /* ... */ animation: fadeIn; animation-timeline: view();}And notice how we no longer need to declare an animation-duration like we did in classic CSS. The animation is no longer tied by time but by space. The animation is triggered as the image becomes visible in the scrollport.View Timeline ParametersJust like the scroll-timeline property, the view-timeline property accepts parameters that allow for more customization:animation-timeline: view( );<inset>Controls when the animation starts and ends relative to the elements visibility within the scrollport. It defines the margin between the edges of the scrollport and the element being tracked. The default value is auto, but it can also take length percentages as well as start and end values.<axis>This is similar to the scroll-timelines axis parameter. It defines which axis (horizontal or vertical) the animation is tied to. The default is block, which means it tracks the vertical movement. You can also use inline to track horizontal movement or simple x or y.Heres an example that uses both inset and axis to customize when and how the animation starts:img { animation-timeline: view(20% block);}In this case:The animation starts when the image is 20% visible in the scrollport.The animation is triggered by vertical scrolling (block axis).Parallax EffectWith the view() function, its also easy to create parallax effects by simply adjusting the animation properties. For example, you can have an element move or scale as it enters the scrollport without any JavaScript:img { animation: parallaxMove 1s; animation-timeline: view();}@keyframes parallaxMove { to { transform: translateY(-50px); }}This makes it incredibly simple to create dynamic and engaging scroll animations with just a few lines of CSS.See the Pen Parallax effect with CSS Scroll driven animations - view() [forked] by Mariana Beldi.The animation-range PropertyUsing the CSS animation-range property with view timelines defines how much of an elements visibility within the scrollport controls the start and end points of the animations progress. This can be used to fine-tune when the animation begins and ends based on the elements visibility in the viewport.While the default value is normal, in view timelines, it translates to tracking the full visibility of the element from the moment it starts entering the scrollport until it fully leaves. This is represented by the following:animation-range: normal normal;/* Equivalent to */animation-range: cover 0% cover 100%;Or, more simply:animation-range: cover;There are six possible values or timeline-range-names:coverTracks the full visibility of the element, from when it starts entering the scrollport to when it completely leaves it.containTracks when the element is fully visible inside the scrollport, from the moment its fully contained until it no longer is.entryTracks the element from the point it starts entering the scrollport until its fully inside.exitTracks the element from the point it starts, leaving the scrollport until its fully outside.entry-crossingTracks the element as it crosses the starting edge of the scrollport, from start to full crossing.exit-crossingTracks the element as it crosses the end edge of the scrollport, from start to full crossing.You can mix different timeline-range-names to control the start and end points of the animation range. For example, you could make the animation start when the element enters the scrollport and end when it exits:animation-range: entry exit;You can also combine these values with percentages to define more custom behavior, such as starting the animation halfway through the elements entry and ending it halfway through its exit:animation-range: entry 50% exit 50%;Exploring all these values and combinations is best done interactively. Tools like Bramus view-timeline range visualizer make it easier to understand.Target Range Inside @keyframesOne of the powerful features of timeline-range-names is their ability to be used inside @keyframes:See the Pen target range inside @keyframes - view-timeline, timeline-range-name [forked] by Mariana Beldi.Two different animations are happening in that demo:slideInWhen the element enters the scrollport, it scales up and becomes visible.slideOutWhen the element leaves, it scales down and fades out.@keyframes slideIn { from { transform: scale(.8) translateY(100px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; }}@keyframes slideOut { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(.8) translateY(-100px); opacity: 0 }}The new thing is that now we can merge these two animations using the entry and exit timeline-range-names, simplifying it into one animation that handles both cases:@keyframes slideInOut { /* Animation for when the element enters the scrollport */ entry 0% { transform: scale(.8) translateY(100px); opacity: 0; } entry 100% { transform: scale(1) translateY(0); opacity: 1; } /* Animation for when the element exits the scrollport */ exit 0% { transform: scale(1) translateY(0); opacity: 1; } exit 100% { transform: scale(.8) translateY(-100px); opacity: 0; }}entry 0%Defines the state of the element at the beginning of its entry into the scrollport (scaled down and transparent).entry 100%Defines the state when the element has fully entered the scrollport (fully visible and scaled up).exit 0%Starts tracking the element as it begins to leave the scrollport (visible and scaled up).exit 100%Defines the state when the element has fully left the scrollport (scaled down and transparent).This approach allows us to animate the elements behavior smoothly as it both enters and leaves the scrollport, all within a single @keyframes block.Named view-timeline And timeline-scopeThe concept of using view-timeline with named timelines and linking them across different elements can truly expand the possibilities for scroll-driven animations. In this case, we are linking the scroll-driven animation of images with the animations of unrelated paragraphs in the DOM structure by using a named view-timeline and timeline-scope.The view-timeline property works similarly to the scroll-timeline property. Its the shorthand for declaring the view-timeline-name and view-timeline-axis properties in one line. However, the difference from scroll-timeline is that we can link the animation of an element when the linked elements enter the scrollport. I took the previous demo and added an animation to the paragraphs so you can see how the opacity of the text is animated when scrolling the images on the left:See the Pen View-timeline, timeline-scope [forked] by Mariana Beldi.This one looks a bit verbose, but I found it hard to come up with a better example to show the power of it. Each image in the vertical scroll container is assigned a named view-timeline with a unique identifier:.vertical-scroll-container img:nth-of-type(1) { view-timeline: --one; }.vertical-scroll-container img:nth-of-type(2) { view-timeline: --two; }.vertical-scroll-container img:nth-of-type(3) { view-timeline: --three; }.vertical-scroll-container img:nth-of-type(4) { view-timeline: --four; }This makes the scroll timeline of each image have its own custom name, such as --one for the first image, --two for the second, and so on.Next, we connect the animations of the paragraphs to the named timelines of the images. The corresponding paragraph should animate when the images enter the scrollport:.vertical-text p:nth-of-type(1) { animation-timeline: --one; }.vertical-text p:nth-of-type(2) { animation-timeline: --two; }.vertical-text p:nth-of-type(3) { animation-timeline: --three; }.vertical-text p:nth-of-type(4) { animation-timeline: --four; }However, since the images and paragraphs are not directly related in the DOM, we need to declare a timeline-scope on their common ancestor. This ensures that the named timelines (--one, --two, and so on) can be referenced and shared between the elements:.porto { /* ... */ timeline-scope: --one, --two, --three, --four;}By declaring the timeline-scope with all the named timelines (--one, two, --three, --four), both the images and the paragraphs can participate in the same scroll-timeline logic, despite being in separate parts of the DOM tree.Final NotesWeve covered the vast majority of whats currently defined in the CSS Scroll-Driven Animations Module Leve 1 specification today in December 2024. But I want to highlight a few key takeaways that helped me better understand these new rules that you may not get directly from the spec:Scroll container essentialsIt may seem obvious, but a scroll container is necessary for scroll-driven animations to work. Issues often arise when elements like text or containers are resized or when animations are tested on larger screens, causing the scrollable area to disappear.Impact of position: absoluteUsing absolute positioning can sometimes interfere with the intended behavior of scroll-driven animations. The relationship between elements and their parent elements gets tricky when position: absolute is applied.Tracking an elements initial stateThe browser evaluates the elements state before any transformations (like translate) are applied. This affects when animations, particularly view timelines, begin. Your animation might trigger earlier or later than expected due to the initial state.Avoid hiding overflowUsing overflow: hidden can disrupt the scroll-seeking mechanism in scroll-driven animations. The recommended solution is to switch to overflow: clip. Bramus has a great article about this and a video from Kevin Powell also suggests that we may no longer need overflow: hidden.PerformanceFor the best results, stick to animating GPU-friendly properties like transforms, opacity, and some filters. These skip the heavy lifting of recalculating layout and repainting. On the other hand, animating things like width, height, or box-shadow can slow things down since they require re-rendering. Bramus mentioned that soon, more propertieslike background-color, clip-path, width, and heightwill be animatable on the compositor, making the performance even better.Use will-change wiselyLeverage this property to promote elements to the GPU, but use it sparingly. Overusing will-change can lead to excessive memory usage since the browser reserves resources even if the animations dont frequently change.The order mattersIf you are using the animation shorthand, always place the animation-timeline after it.Progressive enhancement and accessibilityCombine media queries for reduced motion preferences with the @supports rule to ensure animations only apply when the user has no motion restrictions, and the browser supports them.For example:@media screen and (prefers-reduce-motion: no-preference) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { .my-class { animation: moveCard linear both; animation-timeline: view(); } } }My main struggle while trying to build the demos was more about CSS itself than the scroll animations. Sometimes, building the layout and generating the scroll was more difficult than applying the scroll animation. Also, some things that confused me at the beginning as the spec keeps evolving, and some of these are not there anymore (remember, it has been under development for more than five years now!):x and y axesThese used to be called the horizontal and vertical axes, and while Firefox may still support the old terminology, it has been updated.Old @scroll-timeline syntaxIn the past, @scroll-timeline was used to declare scroll timelines, but this has changed in the most recent version of the spec.Scroll-driven vs. scroll-linked animationsScroll-driven animations were originally called scroll-linked animations. If you come across this older term in articles, double-check whether the content has been updated to reflect the latest spec, particularly with features like timeline-scope.ResourcesAll demos from this article can be found in this collection, and I might include more as I experiment further.A collection of demos from CodePen that I find interesting (send me yours, and Ill include it!)This GitHub repo is where you can report issues or join discussions about scroll-driven animations.Demos, tools, videos, and (even) more information from BramusGoogle Chrome video tutorial

So, I love drawing birds with code. Inspired by my brothers love for birdwatching, I admire the uniqueness of their feathers, colors, and sounds. But what I notice most is the way their bodies curve and different birds can have dramatically different curves! So, I took my love for drawing with SVG graphics and used it to experiment with bird shapes. Over time, Ive drawn enough to become incredibly adept at working with arc shapes.Here are a few of my recent works. Inspired by designs I came across on Dribbble, I created my versions with code. You can browse through the code for each on my CodePen.But before we dive into creating curves with arcs, please pause here and check out Myriam Frisanos recent article, SVG Coding Examples: Useful Recipes For Writing Vectors By Hand. Its an excellent primer to the SVG syntax and it will give you solid context heading into the concepts were covering here when it comes to mastering SVG arcs.A Quick SVG RefresherYou probably know that SVGs are crisp, infinitely scalable illustrations without pixelated degradation vectors for the win! What you might not know is that few developers write SVG code. Why? Well, the syntax looks complicated and unfamiliar compared to, say, HTML. But trust me, once you break it down, its not only possible to hand-code SVG but also quite a bit of fun.Lets make sure youre up to speed on the SVG viewBox because its a key concept when it comes to the scalable part of *SVG. Well use the analogy of a camera, lens, and canvas to explain this concept. Think of your browser window as a camera and the SVG viewBox as the camera lens focusing on the painting of a bird youve created (the SVG). Imagine the painting on a large canvas that may stretch far beyond what the camera captures. The viewBox defines which part of this canvas is visible through the camera.Lets say we have an SVG element that were sizing at 600px square with width and height attributes directly on the <svg> element. <svg width="600px" height="600px">Lets turn our attention to the viewBox attribute:<svg width="600px" height="600px" viewBox="-300 -300 600 600">The viewBox attribute defines the internal coordinate system for the SVG, with four values mapping to the SVGs x, y, width, and height in that order. Heres how this relates to our analogy:Camera Position and SizeThe -300, -300 represents the camera lens left and top edge position. Meanwhile, 600 x 600 is like the cameras frame size, showing a specific portion of that space.Unchanging Canvas SizeChanging the x and y values adjusts where the camera points, and width and height govern how much of the canvas it frames. It doesnt resize the actual canvas (the SVG element itself, which remains at 600600 pixels). No matter where the camera is positioned or zoomed, the canvas itself remains fixed.So, when you adjust the viewBox coordinates, youre simply choosing a new area of the canvas to focus on without resizing the canvas itself. This lets you control the visible area without changing the SVGs actual display dimensions.You now have the context you need to learn how to work with <path> elements in SVG, which is where we start working with arcs!The <path> ElementWe have an <svg> element. And were viewing the elements contents through the lens of a viewBox.A <path> allows us to draw shapes. We have other elements for drawing shapes namely <circle>, <line>, and <polygon> but imagine being restricted to strict geometrical shapes as an artist. Thats where the custom <path> element comes in. Its used to draw complex shapes that cannot be created with the basic ones. Think of <path> as a flexible container that lets you mix and match different drawing commands.With a single <path>, you can combine multiple drawing commands into one smooth, elegant design. Today, were focusing on a super specific path command: arcs. In other words, what were doing is drawing arc shapes with <path>.Heres a quick, no-frills example that places a <path> inside the <svg> example we looked at earlier:<svg width="600px" height="600px" viewBox="-300 -300 600 600"> <path d="M 0 0 A 100 100 0 1 1 200 0" fill="transparent" stroke="black" stroke-width="24" /></svg>Lets take this information and start playing with values to see how it behaves.Visualizing The PossibilitiesAgain, if this is the <path> were starting with:<path d="M 0 0 A 100 100 0 1 1 200 0"/>Then, we can manipulate it in myriad ways. Mathematically speaking, you can create an infinite number of arcs between any two points by adjusting the parameters. Here are a few variations of an arc that we get when all we do is change the arcs endpoints in the X (<ex>) and Y (<ey>) directions.See the Pen Arc Possibilities b/w 2 points [forked] by akshaygpt.Or, lets control the arcs width and height by updating its radius in the X direction (<rx>) and the Y direction (<ry>). If we play around with the <rx> value, we can manipulate the arcs height:See the Pen Rx [forked] by akshaygpt.Similarly, we can manipulate the arcs width by updating the <ry> value:See the Pen Rx [forked] by akshaygpt.Lets see what happens when we rotate the arc along its X-axis (<rotation>). This parameter rotates the arcs ellipse around its center. It wont affect circles, but its a game-changer for ellipses.See the Pen x-axis-rotation [forked] by akshaygpt.Even with a fixed set of endpoints and radii (<rx> and <ry>), and a given angle of rotation, four distinct arcs can connect them. Thats because we have the <arc> flag value that can be one of two values, as well as the <sweep> flag that is also one of two values. Two boolean values, each with two arguments, give us four distinct possibilities.See the Pen 4 cases [forked] by akshaygpt.And lastly, adjusting the arcs endpoint along the X (<ex>) and Y (<ey>) directions shifts the arcs location without changing the overall shape.See the Pen endx, endy [forked] by akshaygpt.Wrapping UpAnd there you have it, SVG arcs demystified! Whether youre manipulating radii, rotation, or arc direction, you now have all the tools to master these beautiful curves. With practice, arcs will become just another part of your SVG toolkit, one that gives you the power to create more dynamic, intricate designs with confidence.So keep playing, keep experimenting, and soon youll be bending arcs like a pro making your SVGs not just functional but beautifully artistic. If you enjoyed this dive into arcs, drop a like or share it with your friends. Lets keep pushing the boundaries of what SVG can do!

Graceful degradation is a design approach that ensures the basics of a website will still function even if specific individual parts of it stop working. The approach removes single points of failure: just because one thing stops working doesnt mean the system as a whole fails. A site following this principle fails in pieces instead of all at once, so the most important features remain available when some components encounter an error.The idea or the concept of single points of failure is well known in the manufacturing sector. Its one of the most common resilience strategies in manufacturing and supply chain operations. A factory with multiple sources of material can keep working even when one supplier becomes unavailable. However, its become increasingly crucial to web development as user expectations around availability and functionality rise.Data center redundancy is a common example of graceful degradation in web development. By using multiple server components, websites ensure theyll stay up when one or more servers fail. In a design context, it may look like guaranteeing the lack of support for a given feature in a users browser or device doesnt render an app unusable.Escalators are a familiar real-world example of the same concept. When they stop working, they can still get people from one floor to the next by acting as stairs. They may not be as functional as they normally are, but theyre not entirely useless.The BBC News webpage is a good example of graceful degradation in web design. As this screenshot shows, the site prioritizes loading navigation and the text within a news story over images. Consequently, slow speeds or old, incompatible browser plugins may make pictures unavailable, but the sites core function sharing the news is still accessible.In contrast, the Adobe Express website is an example of what happens without graceful degradation. Instead of making some features unavailable or dropping load times, the entire site is inaccessible on some browsers. Consequently, users have to update or switch software to use the web app, which isnt great for accessibility.Graceful Degradation vs. Progressive EnhancementThe graceful degradation approach acts as the opposite of progressive enhancement an approach in which a designer builds the basics of a website and progressively adds features that are turned on only if a browser is capable of running them. Each layer of features is turned off by default, allowing for one seamless user experience designed to work for everyone.There is much debate between designers about whether graceful degradation or progressive enhancement is the best way to build site functionality. In reality, though, both are important. Each method has unique pros and cons, so the two can complement each other to provide the most resilience.Progressive enhancement is a good strategy when building a new site or app because you ensure a functional experience for everyone from the start. However, new standards and issues can emerge in the future, which is where graceful degradation comes in. This approach helps you adjust an existing website to comply with new accessibility standards or resolve a compatibility problem you didnt notice earlier.Focusing solely on one design principle or the other will limit accessibility. Progressive enhancement alone struggles to account for post-launch functionality issues, while graceful degradation alone may fail to provide the most feature-rich baseline experience. Combining both will produce the best result.How Graceful Degradation Impacts AccessibilityEnsuring your site or app remains functional is crucial for accessibility. When core functions become unavailable, the platform is no longer accessible to anyone. On a smaller scale, if features like text-to-speech readers or video closed captioning stop working, users with sight difficulties may be unable to enjoy the site.Graceful degradations impact on accessibility is all the larger when considering varying device capabilities. As the average person spends 3.6 hours each day on their phone, failing to ensure a site supports less powerful mobile browsers will alienate a considerable chunk of your audience. Even if some complex functions may not work on mobile, sacrificing those to keep the bulk of the website available on phones ensures broader accessibility.Outdated browsers are another common accessibility issue you can address with graceful degradation. Consider this example from Fairleigh Dickinson University about Adobe Flash, which most modern browsers no longer support.Software still using Flash cannot use the multi-factor authentication feature in question. As a result, users with older programs cant log in. Graceful degradation may compromise by making some functionality unavailable to Flash-supporting browsers while still allowing general access. That way, people dont need to upgrade to use the service.How to Incorporate Graceful Degradation Into Your SiteGraceful degradation removes technological barriers to accessibility. In a broader sense, it also keeps your site or app running at all times, even amid unforeseen technical difficulties. While there are many ways you can achieve that, here are some general best practices to follow.Identify Mission-Critical FunctionsThe first step in ensuring graceful degradation is determining what your core functions are. You can only guarantee the availability of mission-critical features once you know whats essential and what isnt.Review your user data to see what your audience interacts with most these are generally elements worth prioritizing. Anything related to site security, transactions, and readability is also crucial. Infrequently used features or elements like video players and interactive maps are nice to have but okay to sacrifice if you must to ensure mission-critical components remain available.Build RedundancyOnce youve categorized site functions by criticality, you can ensure redundancy for the most important ones. That may mean replicating elements in a few forms to work on varying browsers or devices. Alternatively, you could provide multiple services to carry out important functions, like supporting alternate payment methods or providing both video and text versions of content.Remember that redundancy applies to the hardware your platform runs on, too. The Uptime Institute classifies data centers into tiers, which you can use to determine what redundant systems you need. Similarly, make sure you can run your site on multiple servers to avoid a crash should one go down.Accommodate All BrowsersRemember that graceful degradation is also about supporting software and hardware of varying capabilities. One of the most important considerations under that umbrella for web design is to accommodate outdated browsers.While mobile devices dont support Flash, some older versions of desktop browsers still use it. You can work with both by avoiding Flash you can often use HTML5 instead but not requiring users to have a non-Flash-supporting browser. Similarly, you can offer low-bandwidth, simple alternatives to any features that take up considerable processing power to keep things accessible on older systems.Remember to pay attention to newer softwares security settings, too. Error messages like this one a Microsoft user posted about can appear if a site does not support some browsers updated security protocols. Always keep up with updates from popular platforms like Chrome and Safari to meet these standards and avoid such access issues.Employ Load Balancing and CachingLoad balancing is another crucial step in graceful degradation. Many cloud services automatically distribute traffic between server resources to prevent overloading. Enabling this also ensures that requests can be processed on a different part of the system if another fails.Caching is similar. By storing critical data, you build a fallback plan if an external service or application program interface (API) doesnt work. When the API doesnt respond, you can load the cached data instead. As a result, caches significantly reduce latency in many cases, but you should be aware that you cant cache everything. Focus on the most critical functions.Test Before PublishingFinally, be sure to test your website for accessibility issues before taking it live. Access it from multiple devices, including various browser versions. See if you can run it on a single server to test its ability to balance loads.You likely wont discover all possible errors in testing, but its better to catch some than none. Remember to test your sites functionality before any updates or redesigns, too.Getting Started With Graceful DegradationDesigners, both big and small, can start their graceful degradation journey by tweaking some settings with their web hosting service. AWS offers guidance for managing failures you can use to build degradation into your sites architecture. Hosting providers should also allow you to upgrade your storage plan and configure your server settings to provide redundancy and balance loads.Businesses large enough to run their own data centers should install redundant server capacity and uninterruptible power supplies to keep things running. Smaller organizations can instead rely on their code, using semantic HTML to keep it simple enough for multiple browsers. Programming nonessential things like images and videos to stop when bandwidth is low will also help.Virtualization systems like Kubernetes are also useful as a way to scale site capacity and help load elements separately from one another to maintain accessibility. Testing tools like BrowserStack, WAVE, and CSS HTML Validator can assist you by revealing if your site has functional issues on some browsers or for certain users.At its core, web accessibility is about ensuring a platform works as intended for all people. While design features may be the most obvious part of that goal, technical defenses also play a role. A site is only accessible when it works, so you must keep it functional, even when unexpected hiccups occur.Graceful degradation is not a perfect solution, but it prevents a small issue from becoming a larger one. Following these five steps to implement it on your website or app will ensure that your work in creating an accessible design doesnt go to waste.

For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each step. Whatever makes each step focused and manageable is what should be aimed for.In this tutorial, we will create a multistep form for a job application. Here are the details we are going to be requesting from the applicant at each step:Personal InformationCollects applicants name, email, and phone number.Work ExperienceCollects the applicants most recent company, job title, and years of experience.Skills & QualificationsThe applicant lists their skills and selects their highest degree.Review & SubmitThis step is not going to collect any information. Instead, it provides an opportunity for the applicant to go back and review the information entered in the previous steps of the form before submitting it.You can think of structuring these questions as a digital way of getting to know somebody. You cant meet someone for the first time and ask them about their work experience without first asking for their name.Based on the steps we have above, this is what the body of our HTML with our form should look like. First, the main <form> element:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 1 is for filling in personal information, like the applicants name, email address, and phone number:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset class="step" id="step-1"> <legend id="step1Label">Step 1: Personal Information</legend> <label for="name">Full Name</label> <input type="text" id="name" name="name" required /> <label for="email">Email Address</label> <input type="email" id="email" name="email" required /> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" required /> </fieldset> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Once the applicant completes the first step, well navigate them to Step 2, focusing on their work experience so that we can collect information like their most recent company, job title, and years of experience. Well tack on a new <fieldset> with those inputs:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <fieldset class="step" id="step-2" hidden> <legend id="step2Label">Step 2: Work Experience</legend> <label for="company">Most Recent Company</label> <input type="text" id="company" name="company" required /> <label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required /> <label for="yearsExperience">Years of Experience</label> <input type="number" id="yearsExperience" name="yearsExperience" min="0" required /> </fieldset> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 3 is all about the applicant listing their skills and qualifications for the job theyre applying for:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <fieldset class="step" id="step-3" hidden> <legend id="step3Label">Step 3: Skills & Qualifications</legend> <label for="skills">Skill(s)</label> <textarea id="skills" name="skills" rows="4" required></textarea> <label for="highestDegree">Degree Obtained (Highest)</label> <select id="highestDegree" name="highestDegree" required> <option value="">Select Degree</option> <option value="highschool">High School Diploma</option> <option value="bachelor">Bachelor's Degree</option> <option value="master">Master's Degree</option> <option value="phd">Ph.D.</option> </select> </fieldset> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>And, finally, well allow the applicant to review their information before submitting it:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added a hidden attribute to every fieldset element but the first one. This ensures that the user sees only the first step. Once they are done with the first step, they can proceed to fill out their work experience on the second step by clicking a navigational button. Well add this button later on.Adding StylesTo keep things focused, were not going to be emphasizing the styles in this tutorial. What well do to keep things simple is leverage the Simple.css style framework to get the form in good shape for the rest of the tutorial.If youre following along, we can include Simples styles in the document <head>:<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />And from there, go ahead and create a style.css file with the following styles that Ive folded up.<details> <summary>View CSS</summary> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } main { padding: 0 30px; } h1 { font-size: 1.8rem; text-align: center; } .stepper { display: flex; justify-content: flex-end; padding-right: 10px; } form { box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); padding: 12px; } input, textarea, select { outline: none; } input:valid, textarea:valid, select:valid, input:focus:valid, textarea:focus:valid, select:focus:valid { border-color: green; } input:focus:invalid, textarea:focus:invalid, select:focus:invalid { border: 1px solid red; }</details>Form Navigation And ValidationAn easy way to ruin the user experience for a multi-step form is to wait until the user gets to the last step in the form before letting them know of any error they made along the way. Each step of the form should be validated for errors before moving on to the next step, and descriptive error messages should be displayed to enable users to understand what is wrong and how to fix it.Now, the only part of our form that is visible is the first step. To complete the form, users need to be able to navigate to the other steps. We are going to use several buttons to pull this off. The first step is going to have a Next button. The second and third steps are going to have both a Previous and a Next button, and the fourth step is going to have a Previous and a Submit button.<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset> <!-- ... --> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 2: Work Experience --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 3: Skills & Qualifications --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 4: Review & Submit --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added onclick attributes to the Previous and Next buttons to link them to their respective JavaScript functions: previousStep() and nextStep().The Next ButtonThe nextStep() function is linked to the Next button. Whenever the user clicks the Next button, the nextStep() function will first check to ensure that all the fields for whatever step the user is on have been filled out correctly before moving on to the next step. If the fields havent been filled correctly, it displays some error messages, letting the user know that theyve done something wrong and informing them what to do to make the errors go away. Before we go into the implementation of the nextStep function, there are certain variables we need to define because they will be needed in the function. First, we need the input fields from the DOM so we can run checks on them to make sure they are valid.// Step 1 fieldsconst name = document.getElementById("name");const email = document.getElementById("email");const phone = document.getElementById("phone");// Step 2 fieldsconst company = document.getElementById("company");const jobTitle = document.getElementById("jobTitle");const yearsExperience = document.getElementById("yearsExperience");// Step 3 fieldsconst skills = document.getElementById("skills");const highestDegree = document.getElementById("highestDegree");Then, were going to need an array to store our error messages.let errorMsgs = [];Also, we would need an element in the DOM where we can insert those error messages after theyve been generated. This element should be placed in the HTML just below the last fieldset closing tag:<div id="errorMessages" style="color: rgb(253, 67, 67)"></div>Add the above div to the JavaScript code using the following line:const errorMessagesDiv = document.getElementById("errorMessages");And finally, we need a variable to keep track of the current step.let currentStep = 1;Now that we have all our variables in place, heres the implementation of the nextstep() function:function nextStep() { errorMsgs = []; errorMessagesDiv.innerText = ""; switch (currentStep) { case 1: addValidationErrors(name, email, phone); validateStep(errorMsgs); break; case 2: addValidationErrors(company, jobTitle, yearsExperience); validateStep(errorMsgs); break; case 3: addValidationErrors(skills, highestDegree); validateStep(errorMsgs); break; }}The moment the Next button is pressed, our code first checks which step the user is currently on, and based on this information, it validates the data for that specific step by calling the addValidationErrors() function. If there are errors, we display them. Then, the form calls the validateStep() function to verify that there are no errors before moving on to the next step. If there are errors, it prevents the user from going on to the next step.Whenever the nextStep() function runs, the error messages are cleared first to avoid appending errors from a different step to existing errors or re-adding existing error messages when the addValidationErrors function runs. The addValidationErrors function is called for each step using the fields for that step as arguments.Heres how the addValidationErrors function is implemented:function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) { if (!fieldOne.checkValidity()) { const label = document.querySelector(label[for="${fieldOne.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (!fieldTwo.checkValidity()) { const label = document.querySelector(label[for="${fieldTwo.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (fieldThree && !fieldThree.checkValidity()) { const label = document.querySelector(label[for="${fieldThree.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (errorMsgs.length > 0) { errorMessagesDiv.innerText = errorMsgs.join("\n"); }}This is how the validateStep() function is defined:function validateStep(errorMsgs) { if (errorMsgs.length === 0) { showStep(currentStep + 1); }}The validateStep() function checks for errors. If there are none, it proceeds to the next step with the help of the showStep() function.function showStep(step) { steps.forEach((el, index) => { el.hidden = index + 1 !== step; }); currentStep = step;}The showStep() function requires the four fieldsets in the DOM. Add the following line to the top of the JavaScript code to make the fieldsets available:const steps = document.querySelectorAll(".step");What the showStep() function does is to go through all the fieldsets in our form and hide whatever fieldset is not equal to the one were navigating to. Then, it updates the currentStep variable to be equal to the step were navigating to.The Previous ButtonThe previousStep() function is linked to the Previous button. Whenever the previous button is clicked, similarly to the nextStep function, the error messages are also cleared from the page, and navigation is also handled by the showStep function. function previousStep() { errorMessagesDiv.innerText = ""; showStep(currentStep - 1);}Whenever the showStep() function is called with currentStep - 1 as an argument (as in this case), we go back to the previous step, while moving to the next step happens by calling the showStep() function with currentStep + 1" as an argument (as in the case of the validateStep() function).Improving User Experience With Visual CuesOne other way of improving the user experience for a multi-step form, is by integrating visual cues, things that will give users feedback on the process they are on. These things can include a progress indicator or a stepper to help the user know the exact step they are on.Integrating A StepperTo integrate a stepper into our form (sort of like this one from Material Design), the first thing we need to do is add it to the HTML just below the opening <form> tag.<form id="jobApplicationForm"> <div class="stepper"> <span><span class="currentStep">1</span>/4</span> </div> <!-- ... --></form>Next, we need to query the part of the stepper that will represent the current step. This is the span tag with the class name of currentStep.const currentStepDiv = document.querySelector(".currentStep");Now, we need to update the stepper value whenever the previous or next buttons are clicked. To do this, we need to update the showStep() function by appending the following line to it:currentStepDiv.innerText = currentStep;This line is added to the showStep() function because the showStep() function is responsible for navigating between steps and updating the currentStep variable. So, whenever the currentStep variable is updated, the currentStepDiv should also be updated to reflect that change.Storing And Retrieving User DataOne major way we can improve the forms user experience is by storing user data in the browser. Multistep forms are usually long and require users to enter a lot of information about themselves. Imagine a user filling out 95% of a form, then accidentally hitting the F5 button on their keyboard and losing all their progress. That would be a really bad experience for the user.Using localStorage, we can store user information as soon as it is entered and retrieve it as soon as the DOM content is loaded, so users can always continue filling out their forms from wherever they left off. To add this feature to our forms, we can begin by saving the users information as soon as it is typed. This can be achieved using the input event.Before adding the input event listener, get the form element from the DOM:const form = document.getElementById("jobApplicationForm");Now we can add the input event listener:// Save data on each input eventform.addEventListener("input", () => { const formData = { name: document.getElementById("name").value, email: document.getElementById("email").value, phone: document.getElementById("phone").value, company: document.getElementById("company").value, jobTitle: document.getElementById("jobTitle").value, yearsExperience: document.getElementById("yearsExperience").value, skills: document.getElementById("skills").value, highestDegree: document.getElementById("highestDegree").value, }; localStorage.setItem("formData", JSON.stringify(formData));});Next, we need to add some code to help us retrieve the user data once the DOM content is loaded.window.addEventListener("DOMContentLoaded", () => { const savedData = JSON.parse(localStorage.getItem("formData")); if (savedData) { document.getElementById("name").value = savedData.name || ""; document.getElementById("email").value = savedData.email || ""; document.getElementById("phone").value = savedData.phone || ""; document.getElementById("company").value = savedData.company || ""; document.getElementById("jobTitle").value = savedData.jobTitle || ""; document.getElementById("yearsExperience").value = savedData.yearsExperience || ""; document.getElementById("skills").value = savedData.skills || ""; document.getElementById("highestDegree").value = savedData.highestDegree || ""; }});Lastly, it is good practice to remove data from localStorage as soon as it is no longer needed:// Clear data on form submitform.addEventListener('submit', () => { // Clear localStorage once the form is submitted localStorage.removeItem('formData');}); Adding The Current Step Value To localStorageIf the user accidentally closes their browser, they should be able to return to wherever they left off. This means that the current step value also has to be saved in localStorage.To save this value, append the following line to the showStep() function:localStorage.setItem("storedStep", currentStep);Now we can retrieve the current step value and return users to wherever they left off whenever the DOM content loads. Add the following code to the DOMContentLoaded handler to do so:const storedStep = localStorage.getItem("storedStep");if (storedStep) { const storedStepInt = parseInt(storedStep); steps.forEach((el, index) => { el.hidden = index + 1 !== storedStepInt; }); currentStep = storedStepInt; currentStepDiv.innerText = currentStep; }Also, do not forget to clear the current step value from localStorage when the form is submitted.localStorage.removeItem("storedStep");The above line should be added to the submit handler.Wrapping UpCreating multi-step forms can help improve user experience for complex data entry. By carefully planning out steps, implementing form validation at each step, and temporarily storing user data in the browser, you make it easier for users to complete long forms.For the full implementation of this multi-step form, you can access the complete code on GitHub.

Earlier this month, we wrapped up our SmashingConfs 2024, and one subject that kept coming up over and over again among attendees, between speakers, and even within the staff was what would we like to get better at next year?It seems like everyone has a different answer, but one thing is for sure: Smashing can help you with that. Save 30% on Books and Workshops (3+ items)Good news for people who love a good value for a friendly price: until Thursday, 5 December, you can save 30% off three or more books and eBooks, 30% off three or more workshops, or get the entire Smashing eBook library for $75. This is a perfect time to set yourself up for a year of learning in 2025.Build Your Own Bundle!Our hardcover books are our editorial flagships. They deliver in-depth knowledge and expertise shared by experts from the industry. No fluff or theory, only practical tips and insights you can apply to your work right away.No matter if you want to complete your existing Smashing book collection or start one from scratch, you can now pick and mix your favorite books and eBooks from our Smashing Books line-up to create a bundle tailored to your needs. Or take a look at our bundle recommendations below for some inspiration. Browse all Smashing BooksSave 30% with 3 or more books. No ifs or buts!Until Thursday, 5 December, the 30% book discount will automatically apply to your cart once you add three or more items. Please note that the discount cant be combined with other discounts.Once youve decided which books should go into your bundle, well pack everything up safely and send the parcel right to your doorstep from our warehouse in Germany. Shipping is free worldwide. Check delivery times.Book Bundle RecommendationsWe know decisions can be hard, thats why we collected some ideas for themed book bundles to make the choice at least a bit easier. These bundles are perfect if you want to enhance your skills in one particular field.You can click on each book title to jump to the details and add the book to your cart. The discount will be applied during checkout.Front-End Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Front-End Bundle dives deep into the challenges front-end developers face in their work every day whether its performance, TypeScript and Image Optimization. Youll learn practical strategies to make your workflow more efficient, but also gain precious insights into how teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify tackle common challenges and frustrations.Success at Scale by Addy OsmaniTypeScript in 50 Lessons by Stefan BaumgartnerImage Optimization by Addy OsmaniDesign Best Practices Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Design Best Practices Bundle is all about creating respectful, engaging experiences that put your users well-being and privacy first. The practical and tactical tips help you encourage users to act without employing dark patterns and manipulative techniques and grow a sustainable digital business that becomes more profitable as a result.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagUnderstanding Privacy by Heather BurnsThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenInterface Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $144.00Bundle price: $100.80A lot of websites these days look rather generic. Our Interface Design Bundle will make you think outside the box, exploring how you can create compelling, effective user experiences, with clear intent and purpose for both desktop and mobile.Touch Design for Mobile Interfaces by Steven HooberArt Direction for the Web by Andy ClarkeSmart Interface Design Patterns Checklist Cards by Vitaly FriedmanBig Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $292.50Bundle price: $204.75The Big Design Bundle shines a light on the fine little details that go into building cohesive, human-centered experiences. Covering everything from design systems to form design patterns, mobile design to UX, and data privacy to ethical design, it provides you with a solid foundation for designing products that stand out from the crowd.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenDesign Systems by Alla KholmatovaForm Design Patterns by Adam SilverTouch Design for Mobile Interfaces by Steven HooberUnderstanding Privacy by Heather BurnsSpecial Deal For eBook LoversGet all eBooks for $75. Youre more of an eBook kind of person? The bundle-up discounts do apply to eBooks, too, of course. Or take a look at our Smashing Library to save even more: It includes 68 eBooks (including all our latest releases) for $75 (PDF, ePUB, and Kindle formats). Perfect to keep all your favorite books close when youre on the go.Bundle Up On Online Workshops: 30% Off On 3+ WorkshopsReady to dig even deeper? Whether you want to explore design patterns for AI interfaces, learn how to plan a design system, or master the art of storytelling, our online workshops are a friendly way to boost your skills online and learn practical, actionable insights from experts, live. To prepare for the challenges that 2025 might have in store for you, you can now bundle up 3 or more online workshops and save 30% on the total price with code BUNDLEUP. Please note that the discount cant be combined with other discounts. Take a look at all our upcoming workshops and start your smashing learning journey this winter.Custom Bundles To Fit Your Needs!Do you need a custom bundle? At Smashing, we would love to know how we can help you and your team make the best of 2025. Lets think big!Wed be happy to craft custom bundles that work for you:Group discounts on large teams for Smashing Membership,Bulk discounts on books or other learning materials for education or non-profit groups,Door prize packages for meetups and events,...any other possibilities for your team, your office, your career path. Let us know via contact form!We are always looking for new ways to support our community. Please contact us if youd like us to craft a custom bundle for your needs, or if you have any questions at all. Lets have a great year!Community Matters Producing a book or a workshop takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their kind, ongoing support. Happy learning, everyone!

As the year is coming to a close, many of us feel rushed, meeting deadlines, finishing off projects, or preparing for the upcoming holiday season. So how about some beautiful, wintery desktop wallpapers to sweeten up the month and get you in the mood for December and the holidays, if youre celebrating?More than thirteen years ago, we started our monthly wallpapers series here at Smashing Magazine. Its the perfect opportunity to put your creative skills to the test but also to find just the right wallpaper to accompany you through the new month. This month is no exception, of course, so following our cozy little tradition, we have a new collection of December wallpapers for you to choose from. All of them were created with love by artists and designers from across the globe and can be downloaded for free.A huge thank you to everyone who tickled their creativity and shared their designs with us. This post wouldnt exist without you. Happy December!You can click on every image to see a larger preview.We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit your wallpaper design! Feeling inspired? We are always looking for creative talent and would love to feature your desktop wallpaper in one of our upcoming posts. We cant wait to see what youll come up with!Paws-itively Festive!This holiday season, even our furry friends are getting in the spirit! Our mischievous little tree-topper has found the purr-fect perch to keep an eye on all the festivities. May your days be merry, bright, and filled with joyful surprises just like this one! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Merry ChristmmmDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Dung BeetleDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Dear Moon, Merry ChristmasDesigned by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Cardinals In SnowfallDuring Christmas season, in the cold, colorless days of winter, Cardinal birds are seen as symbols of faith and warmth. In the part of America I live in, there is snowfall every December. While the snow is falling, I can see gorgeous Cardinals flying in and out of my patio. The intriguing color palette of the bright red of the Cardinals, the white of the flurries and the brown/black of dry twigs and fallen leaves on the snow-laden ground fascinates me a lot, and inspired me to create this quaint and sweet, hand-illustrated surface pattern design as I wait for the snowfall in my town! Designed by Gyaneshwari Dave from the United States.previewwithout calendar: 640x960, 768x1024, 1280x720, 1280x1024, 1366x768, 1920x1080, 2560x1440The House On The River DrinaSince we often yearn for a peaceful and quiet place to work, we have found inspiration in the famous house on the River Drina in Bajina Bata, Serbia. Wouldnt it be great being in nature, away from civilization, swaying in the wind and listening to the waves of the river smashing your house, having no neighbors to bother you? Not sure about the Internet, though Designed by PopArt Studio from Serbia.previewwithout calendar: 640x480, 800x600, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Enchanted BlizzardA seemingly forgotten world under the shade of winter glaze hides a moment where architecture meets fashion and change encounters steadiness. Designed by Ana Masnikosa from Belgrade, Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Christmas CookiesChristmas is coming and a great way to share our love is by baking cookies. Designed by Maria Keller from Mexico.previewwithout calendar: 320x480, 640x480, 640x1136, 750x1334, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1242x2208, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Sweet Snowy TendernessYou know that warm feeling when you get to spend cold winter days in a snug, homey, relaxed atmosphere? Oh, yes, we love it, too! It is the sentiment we set our hearts on for the holiday season, and this sweet snowy tenderness is for all of us who adore watching the snowfall from our windows. Isnt it romantic? Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Getting HyggeTheres no more special time for a fire than in the winter. Cozy blankets, warm beverages, and good company can make all the difference when the sun goes down. Were all looking forward to generating some hygge this winter, so snuggle up and make some memories. Designed by The Hannon Group from Washington D.C.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1280x960, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440AnonymooseDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Joy To The WorldJoy to the world, all the boys and girls now, joy to the fishes in the deep blue sea, joy to you and me. Designed by Morgan Newnham from Boulder, Colorado.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440King Of PopDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Christmas WoodlandDesigned by Mel Armstrong from Australia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 Catch Your Perfect SnowflakeThis time of year, people tend to dream big and expect miracles. Let your dreams come true! Designed by Igor Izhik from Canada.previewwithout calendar: 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600Trailer SantaA mid-century modern Christmas scene outside the norm of snowflakes and winter landscapes. Designed by Houndstooth from the United States.previewwithout calendar: 1024x1024, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Silver WinterDesigned by Violeta Dabija from Moldova.previewwithout calendar: 1024x768, 1280x800, 1440x900, 1680x1050, 1920x1200, 2560x1440Gifts LoverDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440On To The Next OneEndings intertwined with new beginnings, challenges we rose to and the ones we werent up to, dreams fulfilled and opportunities missed. The year we say goodbye to leaves a bitter-sweet taste, but were thankful for the lessons, friendships, and experiences it gave us. We look forward to seeing what the new year has in store, but, whatever comes, we will welcome it with a smile, vigor, and zeal. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The MatterhornChristmas is always such a magical time of year so we created this wallpaper to blend the majestry of the mountains with a little bit of magic. Designed by Dominic Leonard from the United Kingdom.previewwithout calendar: 320x480, 800x600, 1024x768, 1280x720, 1400x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Ninja SantaDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440Its In The Little ThingsDesigned by Thas Lenglez from Belgium.previewwithout calendar: 640x480, 800x600, 1024x768, 1280x1024, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 2560x1440Ice FlowersI took some photos during a very frosty and cold week before Christmas. Designed by Anca Varsandan from Romania.previewwithout calendar: 1024x768, 1280x800, 1440x900, 1680x1050, 1920x1200SurpriseSurprise is the greatest gift which life can grant us. Designed by PlusCharts from India.previewwithout calendar: 360x640, 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x900, 1680x1200, 1920x1080Seasons Greetings From AustraliaDesigned by Tazi Designs from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440Christmas SelfieDesigned by Emanuela Carta from Italy.previewwithout calendar: 320x480, 800x600, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Winter WonderlandWinter is the time for comfort, for good food and warmth, for the touch of a friendly hand and for a talk beside the fire: it is the time for home. (Edith Sitwell) Designed by Dipanjan Karmakar from India.previewwithout calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440Winter MorningEarly walks in the fields when the owls still sit on the fences and stare funny at you. Designed by Bo Dockx from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Dream What You Want To DoThe year will end, hope the last month, you can do what you want to do, seize the time, cherish yourself, expect next year we will be better! Designed by Hong Zi-Qing from Taiwan.previewwithout calendar: 1024x768, 1152x864, 1280x720, 1280x960, 1366x768, 1400x1050, 1530x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Happy HolidaysDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160

The groundwork for what we call today signals dates as early as the 1970s. Based on this work, they became popular with different fields of computer science, defining them more specifically around the 90s and the early 2000s.In Web Development, they first made a run for it with KnockoutJS, and shortly after, signals took a backseat in (most of) our brains. Some years ago, multiple similar implementations came to be.MobX observable statesVue.js refs and shallow refsSolidJS signals With different names and implementation details, those approaches are similar enough to be wrapped in a category we know today as Fine-Grained Reactivity, even if they have different levels of fine x coarse updates well get more into what this means soon enough.To summarize the history: Even being an older technology, signals started a revolution in how we thought about interactivity and data in our UIs at the time. And since then, every UI library (SolidJS, Marko, Vue.js, Qwik, Angular, Svelte, Wiz, Preact, etc) has adopted some kind of implementation of them (except for React).Typically, a signal is composed of an accessor (getter) and a setter. The setter establishes an update to the value held by the signal and triggers all dependent effects. While an accessor pulls the value from the source and is run by effects every time a change happens upstream.const [signal, setSignal] = createSignal("initial value");setSignal("new value");console.log(signal()); // "new value"In order to understand the reason for that, we need to dig a little deeper into what API Architectures and Fine-Grained Reactivity actually mean.API ArchitecturesThere are two basic ways of defining systems based on how they handle their data. Each of these approaches has its pros and cons. Pull: The consumer pings the source for updates.Push: The source sends the updates as soon as they are available.Pull systems need to handle polling or some other way of maintaining their data up-to-date. They also need to guarantee that all consumers of the data get torn down and recreated once new data arrives to avoid state tearing.State Tearing occurs when different parts of the same UI are at different stages of the state. For example, when your header shows 8 posts available, but the list has 10.Push systems dont need to worry about maintaining their data up-to-date. Nevertheless, the source is unaware of whether the consumer is ready to receive the updates. This can cause backpressure. A data source may send too many updates in a shorter amount of time than the consumer is capable of handling. If the update flux is too intense for the receiver, it can cause loss of data packages (leading to state tearing once again) and, in more serious cases, even crash the client.In pull systems, the accepted tradeoff is that data is unaware of where its being used; this causes the receiving end to create precautions around maintaining all their components up-to-date. Thats how systems like React work with their teardown/re-render mechanism around updates and reconciliation.In push systems, the accepted tradeoff is that the receiving end needs to be able to deal with the update stream in a way that wont cause it to crash while maintaining all consuming nodes in a synchronized state. In web development, RxJS is the most popular example of a push system.The attentive reader may have noticed the tradeoffs on each system are at the opposite ends of the spectrum: while pull systems are good at scheduling the updates efficiently, in push architectures, the data knows where its being used allows for more granular control. Thats what makes a great opportunity for a hybrid model.Push-Pull ArchitecturesIn Push-Pull systems, the state has a list of subscribers, which can then trigger for re-fetching data once there is an update. The way it differs from traditional push is that the update itself isnt sent to the subscribers just a notification that theyre now stale.Once the subscriber is aware its current state has become stale, it will then fetch the new data at a proper time, avoiding any kind of backpressure and behaving similarly to the pull mechanism. The difference is that this only happens when the subscriber is certain there is new data to be fetched.We call these data signals, and the way those subscribers are triggered to update are called effects. Not to confuse with useEffect, which is a similar name for a completely different thing.Fine-Grained ReactivityOnce we establish the two-way interaction between the data source and data consumer, we will have a reactive system.A reactive system only exists when data can notify the consumer it has changed, and the consumer can apply those changes.Now, to make it fine-grained there are two fundamental requirements that need to be met:Efficiency: The system only executes the minimum amount of computations necessary.Glitch-Free: No intermediary states are shown in the process of updating a state.Efficiency In UIsTo really understand how signals can achieve high levels of efficiency, one needs to understand what it means to have an accessor. In broad strokes, they behave as getter functions. Having an accessor means the value does not exist within the boundaries of our component what our templates receive is a getter for that value, and every time their effects run, they will bring an up-to-date new value. This is why signals are functions and not simple variables. For example, in Solid:import { createSignal } from 'solid-js'function ReactiveComponent() { const [signal, setSignal] = createSignal() return ( <h1>Hello, {signal()}</h1> )}The part that is relevant to performance (and efficiency) in the snippet above is that considering signal() is a getter, it does not need to re-run the whole ReactiveComponent() function to update the rendered artifact; only the signal is re-run, guaranteeing no extra computation will run.Glitch-Free UIsNon-reactive systems avoid intermediary states by having a teardown/re-render mechanism. They toss away the artifacts with possibly stale data and recreate everything from scratch. That works well and consistently but at the expense of efficiency.In order to understand how reactive systems handle this problem, we need to talk about the Diamond Challenge. This is a quick problem to describe but a tough one to solve. Take a look at the diagram below:Pay attention to the E node. It depends on D and B, but only D depends on C. If your reactive system is too eager to update, it can receive the update from B while D is still stale. That will cause E to show an intermediary state that should not exist.Its easy and intuitive to have A trigger its children for updates as soon as new data arrives and let it cascade down. But if this happens, E receives the data from B while D is stale. If B is able to trigger an update from E, E will show an intermediate state.Each implementation adopts different update strategies to solve this challenge. They can be grouped into two categories:Lazy SignalsWhere a scheduler defines the order within which the updates will occur. (A, then B and C, then D, and finally E).Eager SignalsWhen signals are aware if their parents are stale, checking, or clean. In this approach, when E receives the update from B, it will trigger a check/update on D, which will climb up until it can ensure to be back in a clean state, allowing E to finally update.Back To Our UIsAfter this dive into what fine-grained reactivity means, its time to take a step back and look at our websites and apps. Lets analyze what it means to our daily work.DX And UXWhen the code we wrote is easier to reason about, we can then focus on the things that really matter: the features we deliver to our users. Naturally, tools that require less work to operate will deliver less maintenance and overhead for the craftsperson.A system that is glitch-free and efficient by default will get out of the developers way when its time to build with it. It will also enforce a higher connection to the platform via a thinner abstraction layer.When it comes to Developer Experience, there is also something to be said about known territory. People are more productive within the mental models and paradigms they are used to. Naturally, solutions that have been around for longer and have solved a larger quantity of challenges are easier to work with, but that is at odds with innovation. It was a cognitive exercise when JSX came around and replaced imperative DOM updates with jQuery. In the same way, a new paradigm to handle rendering will cause a similar discomfort until it becomes common.Going DeeperWe will talk further about this in the next article, where were looking more closely into different implementations of signals (lazy, eager, hybrid), scheduled updates, interacting with the DOM, and debugging your own code!Meanwhile, you can find me in the comments section below, on (Twitter), LinkedIn, BlueSky, or even youtube. Im always happy to chat, and if you tell me what you want to know, Ill make sure to include it in the next article! See ya!