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!

On Thursday, October 10, 2024, I gave my first talk at an international event, the WordPress Accessibility Day (WPAD) 2024. Just a few months before, I was a newcomer to the world of web accessibility. Yet here I was, speaking to an audience of accessibility specialists and advocates, and they were genuinely interested in what I had to share. How did I get here? Most importantly, how can you get here?My Journey To Web Accessibility And Public SpeakingI first learned about web accessibility from contributing to caMicroscope as an Outreachy intern. Outreachy offers internships in open source and open science to people underrepresented in tech within their home countries. caMicroscope is basically an open-source tool for studying and analyzing digital images of body tissues.During my three-month internship, I worked on enhancing the caMicroscopes accessibility. I conducted accessibility audits to identify areas for improvement and fixed several technical issues to make the web app more accessible. Since this was my first exposure to accessibility, I spent a lot of time researching and learning, gradually building a knowledge base that would later inspire my first talk.The more I learned about accessibility, the more I realized how important it is to digital product design and user experience, yet few people seemed to be talking about it. Just before my internship ended, I began searching for accessibility events that I could attend to connect with people in the field. That was how I stumbled on the Call for Proposals (CFP) for WordPress Accessibility Day 2024.Initially, I was hesitant to apply. I wondered,What do I know about accessibility that people would care to listen to me?But I also thought,How often do you find a UX designer not only testing for accessibility but actually implementing technical fixes for the first time?This was my experience, my story, and no one could tell it better than me. The CFP also encouraged first-time speakers to submit a proposal. That was an additional motivation. I figured,Whats the worst that could happen?So, I pushed through my doubts, did extensive research to choose a topic, and finally submitted my proposal.When I received the email that my proposal was accepted, I was thrilled. But then came the next hurdle preparing the presentation itself. Now, I had to think deeply about my audience: what message I wanted to convey and how to make it engaging and informative. After all, people were going to spend their time listening to me. I wanted to make it worth their while.I reworked my slides at least four times. Even the night before my talk, I was still making edits (something I dont recommend!). Watching the sessions of speakers who presented before me helped me learn some last-minute tips, but it also led to comparing my slides to theirs, wondering if I was missing something. Up until my talk began, I struggled with imposter syndrome. What if I forgot what I was supposed to say? Or dont know how to answer a question that an attendee asks?Finally, the moment came. I spent 40 minutes sharing with attendees the importance of manual accessibility testing. Not long into my presentation, I felt my initial anxiety melt away. I was calm and enthusiastic throughout the rest of my talk. It was an amazing experience, one that Im grateful for.Since then, Ive submitted another talk proposal to speak at a different conference. While I still have some doubts, theyre no longer about whether or not Im qualified to speak but rather about whether or not my talk will be accepted. Ive grown since my first talk, and if youre considering a similar path, you can too.Why We Hold BackAt every tech event I attend, when the hosts introduce the speakers, the introductions typically go something like the following:John Doe is the Senior Product Designer at XYZ Company, bringing over seven years of expertise to his role. He serves as Chairman of the Technical Steering Committee for the ABC Community, contributing to its strategic direction and growth. As the founder of LMNOP, John has driven a startup that has generated over $XXXX in revenue and created over 500 jobs, making a substantial impact on the African tech ecosystem.Impressive. Inspiring. And for a newbie, maybe even intimidating.When theyre giving their talk, I often catch myself thinking:With so many years of experience, no wonder they know so much. When will I ever reach this level?I was subconsciously beginning to associate speaker with expert. I started believing that to qualify as a speaker, I needed an impressive title, years of experience, or some remarkable achievement under my belt. And I know Im not the only one who feels this way.How To Deal With Impostor SyndromeWhen I first saw the call for speakers for WordPress Accessibility Day, my immediate reaction was to scroll past it. After all, I had only been working with web accessibility for a short time. Surely, they were looking for seasoned professionals with years of experience, right? Wrong. Had I given in to this misconception, I would have robbed myself of an incredible opportunity for growth.If youve ever held back from submitting a talk proposal because you feel youre not qualified enough to talk on a subject, here are some tips to help you deal with the imposter syndrome:Embrace Your Newbie StatusThe reason you feel like an imposter is probably because youre cosplaying as an expert that youre not (yet), and youre afraid people might see through the facade. So, the fear of failing and the pressure to meet expectations weigh you down. Be proud of your novice status. And who said experts make the best speakers? Even the so-called experts get nervous to speak.Practice, Practice, PracticeAnother reason you may hold back is because you dont have speaking experience. But how do you gain speaking experience? You guessed right by speaking. So, speak. Or at least practice speaking. The more prepared you are, the more confident youll feel. Start by presenting to your rubber duck, your pet, a friend, or a family member. Each time you practice, youll discover ways to explain concepts more clearly and identify areas where you need to strengthen your understanding. Record yourself and watch it back. Yes, its uncomfortable, but its one of the best ways to improve your delivery and body language.Focus On Your JourneyYour recent learning experience is actually an advantage. You still remember what its like to struggle with concepts that experts take for granted. This makes you qualified to help others who are just starting. Think about it: Who better to explain the challenges of learning a new technology than someone who just overcame them?Focus On Sharing, Not ProvingShift your mindset from I need to prove Im an expert to I want to share what Ive learned. This subtle change removes the pressure of perfection and places the focus where it belongs on helping others. Share your mistakes, your aha moments, the resources that helped you. These are often more valuable than polished theory from someone whos forgotten what its like to be a beginner.Share Your ExperienceIm not the first UX designer to dive into accessibility, but out of many contributors who applied to the project, I was the one selected to improve caMicroscopes accessibility. Thats my unique angle. Your background and experience bring a perspective that others can learn from. Dont try to compete with comprehensive tutorials or documentation. Instead, share your practical, real-world experience. Focus on sharing:Specific problems you encountered and how you solved them;Lessons learned from failed approaches;Real-world trade-offs and decisions you had to make;Insights that surprised you along the way;Practical tips that arent found in standard documentation.Remember That The Audience Wants You To SucceedConference attendees (and organizers) arent there to judge you or catch you making mistakes. Theyre there to learn, and they want you to succeed. Many will be grateful to hear from someone who can relate to their current experience level. Your vulnerability and openness about being new to the field can actually make your talk more approachable and engaging.Why Newbie Voices MatterYou Bring A Fresh PerspectiveAs an early-career professional, you bring a fresh, unencumbered viewpoint to the table. The questions you ask and the solutions you propose arent constrained by the way things have always been done.This reminds me of the story about the truck that got stuck under a bridge. Experts spent hours trying complex maneuvers to free it until a schoolboy suggested a simple solution deflating the tires. Your recent learning experiences make you uniquely positioned to see solutions that seasoned professionals overlook.You see, innovation often arises from those not bound by conventional thinking. As a newcomer, youre more likely to draw parallels from other industries or suggest unconventional approaches that could lead to breakthroughs.You Inspire Others Like YouWhenever I see a call for speakers for an event, I have a habit of checking the speakers lineup from past events to see if theres anyone like me Nigerian, female, relatively new to tech, young. If I dont find anyone similar, I often feel hesitant about submitting a proposal. But if I do, Im immediately encouraged to apply.Your Story Has PowerYour story, your ideas, your fresh take they could be the solution to someones problem, ignite a new area of exploration, or simply give another budding professional the confidence to pursue their goals. Your journey could be exactly what someone in the audience needs to hear. So, dont let imposter syndrome hold you back. The tech community needs your voice.When you speak at events, youre not just sharing your own knowledge. Youre inspiring other newcomers to step up and share their voices, too. Representation matters, and youre contributing to the diversity of perspectives, which is necessary for progress and innovation.Benefits Of Speaking As A NewcomerBesides the anxiety that comes with speaking, are there benefits that you gain from being a first-time speaker at an event? Short answer: Yes. What are they?Your Knowledge GrowsYou know what they say: If you want to master something, teach it.When I started preparing for my accessibility talk, I extensively researched not just my topic but also how best to deliver it. I read articles on creating accessible presentations. I was speaking at an accessibility event, after all, so my slides and delivery had to be accessible to all in the audience. The questions from the audience also challenged me to think about accessibility from angles I hadnt considered before. Trust me, youll learn more preparing for a 30-minute talk than you would in months of regular work.You Become More ConfidentRemember that shaky feeling when you first pushed code to production? Speaking at an event is similar terrifying at first but incredibly empowering once youve done it. After my first talk, I found that I became more confident in team meetings, more willing to share ideas, and more comfortable with challenging assumptions. Theres something powerful about standing in front of a room (virtual or physical) and sharing your knowledge that makes other professional challenges seem less daunting.The Quality And Quantity Of Your Network IncreasesNetworking hits differently when youre a speaker. Before my talk, I was just another attendee sending connection requests. After? Industry leaders were reaching out to ME. I remember checking my LinkedIn notifications after my accessibility talk and seeing connection requests from people Id only dreamed of connecting with.Now, instead of trying to start conversations at networking sessions (which, lets be honest, can be awkward), your talk becomes the conversation starter. People approach you with genuine interest in your perspective, and suddenly, youre having meaningful discussions about your passion with folks who share it.It Gives Your Career A Significant BoostWant to know what sets you apart from other candidates with similar years of experience? Speaking credentials. Imagine listing Speaker at WordPress Accessibility Day on my resume. It shows initiative and expertise that goes beyond day-to-day work activities.Plus, conferences often give speakers free or discounted tickets to future events; thats premium access to learning and networking opportunities that might otherwise be out of reach for early-career professionals. Thats how you get to that level.You Contribute To The Tech Knowledge BaseOften, especially with virtual conferences, a recording of the event is uploaded on YouTube. That means anyone searching the web for a topic related to your talk will find your talk in the search results. Your 30-minute presentation becomes a permanent resource in the vast library of tech knowledge. I cant count the number of times a conference video addressed a concern I had or served as a resource for a talk or an article I was working on. Now, I get to be on the other side, helping someone else figure things out.And heres another bonus: those YouTube videos also work as a portfolio of sorts. So, not only are you contributing to the community, but youre also building a body of work that showcases your expertise and speaking skills.You Just Might Get PaidHeres something people dont talk about enough: many conferences pay their speakers or at least cover travel expenses. Not only are you learning and growing, but you might also get paid for it! Even if the event doesnt offer payment, the experience itself is invaluable for your portfolio.You Build Your Personal BrandEvery time you speak, youre building your personal brand. Your talks become content you can share on social media, add to your portfolio, and reference in job interviews. Imagine a recruiter saying to you, I remember you from your talk at a so-and-so conference. In an industry as competitive as tech, this kind of recognition is invaluable.Tips For First-Time SpeakersI found this article by Andy Budd on how to become a better speaker at conferences very helpful when I was preparing for my talk. In addition to his expert advice, here are a few tips Id like to share from my own experience as a first-time speaker:Choose A Topic Youre Passionate AboutWhen selecting a topic, pick something youre genuinely passionate about. Your enthusiasm will shine through your presentation and captivate the audience.Recently learned a new skill that simplified your workflow?Participated in a workshop that changed how you approach a problem?Discovered a clever workaround to a common problem?Topics like these, drawn from your personal experiences, make for compelling talk ideas.Heres a hack Ive used to uncover potential speaking ideas: instead of racking your brain when a call for proposals goes out, stay alert for inspiration in your day-to-day activities. As you go about your work or scroll through social media, jot down any concepts that pique your curiosity. That seemingly mundane task you were performing when the idea struck could serve as a fascinating hook for your presentation.Prepare ThoroughlyOnce youve settled on a topic, its time to dive deep into research and practice. Spend time mastering the subject matter from every angle so you can speak with authority. If you followed tip no. 1 (choose a topic youre passionate about and are drawing from your personal experience), you are already halfway prepared.But dont stop there. Rehearse your talk multiple times, refining your delivery and transitions until you feel confident. Watch recordings of similar presentations and critically analyze what worked well and where theres room for improvement. How did the speakers engage the audience? Were there any areas that could have been explained better? Studying successful talks will help you identify ways to elevate your own performance.Engage With Your AudienceA speaking engagement is a conversation, not a monologue. Encourage questions and discussion throughout your talk. Be responsive to the audiences needs and interests. If you notice puzzled expressions or hesitant body language, pause to clarify or rephrase. Making that personal connection will keep people invested and eager to learn from you.Start With A Virtual EventIf the prospect of speaking in front of a live audience makes you nervous, consider starting with a virtual event. The online format can feel more approachable since youll be delivering the talk from the comfort of your home, and youll have the flexibility to reference notes or prompts without the audience noticing.Connect With Other First-Time SpeakersWhen I was preparing my talk, I spent hours on YouTube searching for talks by people who shared my background. I was particularly interested in their early speaking appearances, so Id scroll through their video history to find their first-ever talks.These speakers werent polished professionals at the time, and thats exactly what made their talks valuable to me. Watching them helped me realize that perfection isnt the goal. I studied their presentations carefully, noted what worked well and what could be improved, and used these insights to strengthen my own talk.If youre more outgoing than I am, consider reaching out directly to other new speakers in your community. You can find them on Twitter, LinkedIn, or at local tech meetups. Building a support system of people who understand exactly what youre going through can be incredibly reassuring. You can practice your talks together and provide feedback to each other.Be AuthenticFinally, dont be afraid to let your authentic self shine through. Share personal anecdotes, tell jokes, discuss the challenges you faced, and be vulnerable about your own learning journey.Your honesty and humility will resonate far more than a polished, impersonal presentation. Remember, the audience wants to connect with you, not just your expertise.ConclusionIn retrospect, Im glad that I pushed past my initial doubts and applied to speak at WordPress Accessibility Day. It was a transformative experience that has accelerated my growth in the field and connected me with an incredible community.To all the newcomers reading this:Your voice matters. Your perspective is valuable. The tech community needs fresh voices and perspectives. Your I just learned this enthusiasm can be infectious and inspiring.So, the next time you see a call for speakers, dont scroll past it. Take that leap. Apply to speak. Share your knowledge. You never know who you might inspire or what doors you might open for yourself and for others.Remember, every expert was once a beginner. I hope youre inspired to take the stage and let your voice be heard.Further ResourcesGetting Started in Public Speaking: Global Diversity CFP Day, Rachel AndrewComplete Guide to Giving Your First Conference Talk, Gwendolyn FaradayHow to Prepare for Your First Conference Talk, Lisa Wentz M.A.How to Write a Conference Talk Abstract That Will Get Accepted, Linda Ikechukwu

As I sit down to write this article, I cant help but marvel at the incredible changes sweeping through our industry. For the first time in my career, I feel like were no longer limited by our technology but by our imagination. Well, almost. Artificial Intelligence (AI) is reshaping the web design landscape in ways we could only dream of a few years ago, and Im excited to share with you how its supercharging our productivity across various aspects of our work.AI Is A Partner, Not A CompetitorNow, before we dive in, let me assure you: AI isnt here to replace us. At least, not for a while yet. There are still crucial areas where human expertise reigns supreme. AI struggles with strategic planning that considers the nuances of human behavior and market trends. It cant match our emotional intelligence when navigating client relationships and team dynamics. And when it comes to creative thinking that pushes boundaries and creates truly innovative solutions, we humans still have the upper hand.But heres the exciting part: AI is becoming an invaluable tool thats supercharging our productivity. Think of it as having a highly capable intern at your disposal. As the Nielsen Norman Group aptly put it in their article AI as an Intern, we need to approach AI tools with the right mindset. Double-check their work, use them for initial drafts rather than final products, and provide specific instructions and relevant context.The key to harnessing AIs power lies in working with it collaboratively.Dont expect perfect results on the first try. Instead, engage in a back-and-forth conversation, refining the AI output through iteration. This process of continuous improvement is where AI truly shines, dramatically speeding up our workflow.Lets explore how AI is reshaping different areas of our industry, looking at some of the many tools available to us.AI In Design: Unleashing Creativity And EfficiencyIn the realm of design, AI is proving to be a game-changer. Its particularly adept at:Collaborating on layout;Generating the perfect image;Refining and adapting existing imagery.Take AI in Figma, for instance. Its become my go-to for generating dummy content and tidying up my layers. The time saved on these mundane tasks allows me to focus more on the creative aspects of design.Generative imagery tools like Krea, which uses Flux, have revolutionized how we source visuals. Gone are the days of endlessly scrolling through stock libraries. Now, we can describe exactly what we need, and AI will create it for us. This level of customization and specificity is a game changer for creating unique, on-brand visuals.Relume is another tool Ive found incredibly useful. Its great for a collaborative back-and-forth over designs or for quickly putting together designs for smaller sites. The ability to iterate rapidly with AI assistance has significantly sped up my design process.And lets not forget about Adobe. Their upcoming tools, such as lighting matching for composite images, are set to take our design capabilities to new heights. If you want to see more of whats on the horizon, I highly recommend checking out the latest Adobe Max presentations.AI In Coding: Boosting Developer ProductivityThe impact of AI on coding is nothing short of revolutionary. According to a McKinsey study, developers using AI tools performed coding tasks like code generation, refactoring, and documentation 20%-50% faster on average compared to those not using AI tools. Thats a significant productivity boost!AI is helping developers in several key areas:Coding faster;Debugging more efficiently;Automatically generating code comments;Writing basic code.To put this into perspective, AI now writes 25% of the code at Google. Thats a staggering figure from one of the worlds leading tech companies.Tools like Cursor AI and GitHub Copilot are at the forefront of this revolution, offering features such as:AI pair programming with predictive code edits;Natural language code editing;Chat interfaces for asking questions and getting help.Ive personally been amazed by what ChatGPT 01-Preview can do. Ive used it to build simple WordPress plugins in minutes, tasks that would have taken me significantly longer in the past.AI In UX: Enhancing User Research And AnalysisIn the field of User Experience (UX), AI is opening up new possibilities for research and analysis. Its allowing us to:Conduct user research at scale;Analyze open-ended qualitative feedback;Query analytic data using natural language;Predict user behavior.Ive found ChatGPT to be an invaluable tool for data analysis, particularly when it comes to making sense of analytics and survey responses. It can quickly identify patterns and insights that might take us hours to uncover manually.Tools like Strella are pushing the boundaries of whats possible in user research. AI can now perform user interviews at scale, allowing us to gather insights from a much larger pool of users than ever before.Attention Insight is another fascinating tool. It uses AI to predict where people will look on a page, providing valuable data for optimizing layouts and user interfaces.Microsoft Clarity has also upped its game, allowing us to ask questions about our analytic insights, heatmaps, and session recordings. This natural language interface makes it easier than ever to extract meaningful insights from our data.AI In Copywriting: Elevating Content Quality And EfficiencyWhen it comes to copywriting, AI is proving to be a powerful ally. Its helping us:Transform poor-quality stakeholder content into web-optimized copy;Brainstorm value propositions and create high-converting copy;Craft compelling business cases and strategy documentation;Write standard operating procedures.Notion AI has become one of my go-to tools for content creation. It combines the best of ChatGPT and Claude, allowing it to draw upon a wide range of provided source material to write detailed documentation, articles, and reports.ChatGPT has been a game-changer for improving the quality of website copy. It can take user questions and bullet-point answers from subject specialists and transform them into web-optimized content. Ive found it particularly useful for defining value propositions and writing high-converting copy.For refining existing content, the Hemingway Editor is invaluable. It can take the existing copy and make it clearer, more concise, and easier to scan essential qualities for effective web content.AI In Administration: Streamlining Mundane TasksAI isnt just transforming the technical aspects of our work; its also making a significant impact on those mundane administrative tasks that often eat up our time. By leveraging AI, we can streamline various aspects of our daily workflow, allowing us to focus more on high-value activities.Here are some ways AI is helping us tackle administrative tasks more efficiently:Getting our thoughts down faster;Writing better emails;Summarizing long emails or Slack threads;Speeding up research;Backing up arguments with relevant data.Let me share some personal experiences with AI tools that have transformed my administrative workflow:Ive dramatically increased my writing speed using Flow. This tool has taken me from typing at 49 words per minute to dictating at over 95 words per minute. Not only does it allow me to dictate, but it also tidies up my words to ensure they read well and are grammatically correct.For email writing, Ive found Fixkey to be invaluable. It helps me rewrite or reformat copy quickly. Ive even set up a prompt that tones down my emails when Im feeling particularly irritable, ensuring they sound reasonable and professional.Dealing with long email threads or Slack conversations can be time-consuming. Thats where Spark comes in handy. It summarizes lengthy threads, saving me valuable time. Interestingly, this feature is now built into iOS for all notifications, making it even more accessible.When it comes to research, Google Notebook LLM has been a game-changer. I can feed it large amounts of data on a subject and quickly extract valuable insights. This tool has significantly sped up my research process.Lastly, if I need to back up an argument with a statistic or quote, Perplexity has become my go-to resource. It quickly finds relevant sources I can quote, adding credibility to my work without the need for extensive manual searches.Conclusion: Embracing AI For A More Productive FutureAs I wrap up this article, I realize Ive only scratched the surface of what AI can do for our industry. The real challenge isnt in the technology itself but in breaking out of our established routines and taking the time to experiment with whats possible.I believe we need to cultivate a new habit: pausing before each new task to consider how AI could help us approach it differently. The winners in this new reality will be those who can best integrate this technology into their workflow.AI isnt replacing us its empowering us to work smarter and more efficiently. By embracing these tools and learning to collaborate effectively with AI, we can focus more on the aspects of our work that truly require human creativity, empathy, and strategic thinking.If youre feeling overwhelmed by the rapid pace of change, dont worry. Were all learning and adapting together. Remember, the goal isnt to become an AI expert overnight but to gradually incorporate these tools into your work in ways that make sense for you and your projects.

This article is a sponsored by PenpotPenpot is a free, open-source design tool that allows true collaboration between designers and developers. Designers can create interactive prototypes and design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast because it's built with web technologies, works in the browser, and has already passed 33K starts on GitHub.The UI feels intuitive and makes it easy to get things done, even for someone whos not a designer (guilty as charged!). You can get things done in the same way and with the same quality as with other more popular and closed-source tools like Figma.Why Open-Source Is ImportantAs someone who works with commercial open-source on my day-to-day, I strongly believe in it as a way to be closer to your users and unlock the next level of delivery. Being open-source creates a whole new level of accountability and flexibility for a tool.Developers are a different breed of user. When we hit a quirk or a gap in the UX, our first instinct is to play detective and figure out why that pattern stuck out as a sore thumb to what weve been doing. When the code is open-source, its not unusual for us to jump into the source and create an issue with a proposal on how to solve it already. At least, thats the dream.On top of that, being open-source allows you and your team to self-host, giving you that extra layer of privacy and control, or at least a more cost-effective solution if you have the time and skills to DYI it all.When the cards are played right, and the team is able to afford the long-term benefits, commercial open-source is a win-win strategy.Introducing: Penpot Plugin SystemTalking about the extensibility of open-source, Penpot has the PenpotHub the home for open-source templates and the newly released plugin gallery. So now, if theres a functionality missing, you dont need to jump into the code-base straightaway you can create a plugin to achieve what you need. And you can even serve it from localhost!Creating Penpot PluginsWhen it comes to the plugins, creating one is extremely ergonomic. First, there are already set templates for a few frameworks, and I created one for SolidJS in this PR the power of open-source!When using Vite, plugins are Single-Page Applications; if you have ever built a Hello World app with Vite, you have what it takes to create a plugin. On top of that, the Penpot team has a few packages that can give you a headstart in the process:npm install @penpot/plugin-stylesThat will allow you to import with a CSS loader or a CSS import from @penpot/plugin-styles/styles.css. The JavaScript API is available through the window object, but if your plugin is in TypeScript, you need to teach it:npm add -D @penpot/plugin-typesWith those types in your node_modules, you can pop-up the tsconfig.json and add the types to the compilerOptions.{ "compilerOptions": { "types": ["@penpot/plugin-types"] }}And there you are, now, the Language Service Provider in your editor and the TypeScript Compiler will accept that penpot is a valid namespace, and youll have auto-completion for the Penpot APIs throughout your entire project. For example, defining your plugin will look like the following:penpot.ui.open("Your Plugin Name", "", { width: 500, height: 600})The last step is to define a plugin manifest in a manifest.json file and make sure its in the outpot directory from Vite. The manifest will indicate where each asset is and what permissions your plugin requires to work:{ "name": "Your Plugin Name", "description": "A Super plugin that will win Penpot Plugin Contest", "code": "/plugin.js", "icon": "/icon.png", "permissions": [ "content:read", "content:write", "library:read", "library:write", "user:read", "comment:read", "comment:write", "allow:downloads" ]}Once the initial setup is done, the communication between the Penpot API and the plugin interface is done with a bidirectional messaging system, not so different than what youd do with a Web-Worker.So, to send a message from your plugin to the Penpot API, you can do the following:penpot.ui.sendMessage("Hello from my Plugin");And to receive it back, you need to add an event listener to the window object (the top-level scope) of your plugin:window.addEventListener("message", event => { console.log("Received from Pendpot::: ", event.data);})A quick performance tip: If youre creating a more complex plugin with different views and perhaps even routes, you need to have a cleanup logic. Most frameworks provide decent ergonomics to do that; for example, React does it via their return statements.useEffect(() => { function handleMessage(e) { console.log("Received from Pendpot::: ", event.data); } window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage);}, []);And Solid has onMount and onCleanup helpers for it:onMount(() => { function handleMessage(e) { console.log("Received from Penpot::: ", event.data); } window.addEventListener('message', handleMessage);})onCleanup(() => { window.removeEventListener('message', handleMessage);})Or with the @solid-primitive/event-listener helper library, so it will be automatically disposed:import { makeEventListener } from "@solid-primitives/event-listener";function Component() { const clear = makeEventListener(window, "message", handleMessage); // ... return (<span>Hello!</span>)}In the official documentation, theres a step-by-step guide that will walk you through the process of creating, testing, and publishing your plugin. It will even help you out.So, what are you waiting for?Plugin Contest: Imagine, Build, WinWell, maybe youre waiting for a push of motivation. The Penpot team thought of that, which is why theyre starting a Plugin Contest!For this contest, they want a fully functional plugin; it must be open-source and include comprehensive documentation. Detailing its features, installation, and usage. The first prize is US$ 1000, and the criteria are innovation, functionality, usability, performance, and code quality. The contest will run from November 15th to December 15th.Final ThoughtsIf you decide to build a plugin, Id love to know what youre building and what stack you chose. Please let me know in the comments below or on BlueSky!

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: throughout the entire month of November, 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!Throughout the month of November, 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!

Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data. The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!So, keep reading and looking at the following examples, and I will show you some really cool stuff.TechnologyTypically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.What Makes Data And Information GoodIt must be aesthetically pleasing, interesting, and stimulating to look at.It must be of value and worth the effort to read and digest the information.It must be easy to understand and logical.To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, as Vitaly Friedman in his article Data Visualization and Infographics has pointed out.It must be legible and have well-named and easy-to-understand axes and labels.It should help explain and show data and information in a more interesting way than if it were presented in tabular form.It should help explain or unpack what is written in any surrounding text and make it come to life in an unusual and useful way.It must be easy to compare and contrast the data against the other data.The Importance Of Knowing About Different AudiencesThere are some common categories of audiences:Expert,Intermediate,Beginner,Member of the public,Child,Teenager,Middle-aged,Ageing,Has some prior knowledge,Does not have any prior knowledge,Person with some kind of disability (vision, physical, hearing, mobility).Sara Dholakia in her article A Guide To Getting Data Visualization Right points out the following considerations:The audiences familiarity with the subject matter of your data;How much context they already have versus what you should provide;Their familiarity with various methods of data visualisation.Just look at what we are more often than not presented with.So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.3D Flow DiagramIt provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.Card DiagramIts an effective way to highlight and select information or data in relation to its surrounding data and information.Pyramid GraphBeing great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.3D Examples Of Common GraphsThey are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.Sankey Flow DiagramThis diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It's not often seen, but it's really cool.Stream GraphA stream graph is a great way to show the data and how it relates to the other data much more interesting than just using lines as is typically seen.3D MapIt provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.Tree MapIts a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.Waterfall ChartA waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.Doughnut ChartIt shows the data against the other data segments and also as a value within a range of data.Lollipop ChartA lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.Bubble ChartIts an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.How To Start Doing Technical Illustration And Data VisualisationThere are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick OBrien discusses in his article Web Design Done Well: Delightful Data Visualization Examples.But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.Worthwhile Practitioners And Links To Look AtStefanie PosavecYuri Engelhardt Giorgia Lupi Edward Tufte Information is Beautiful Awards

This article is a sponsored by DebugBearWeve all had that moment. Youre optimizing the performance of some website, scrutinizing every millisecond it takes for the current page to load. Youve fired up Google Lighthouse from Chromes DevTools because everyone and their uncle uses it to evaluate performance.After running your 151st report and completing all of the recommended improvements, you experience nirvana: a perfect 100% performance score!Time to pat yourself on the back for a job well done. Maybe you can use this to get that pay raise youve been wanting! Except, dont at least not using Google Lighthouse as your sole proof. I know a perfect score produces all kinds of good feelings. Thats what were aiming for, after all!Google Lighthouse is merely one tool in a complete performance toolkit. What its not is a complete picture of how your website performs in the real world. Sure, we can glean plenty of insights about a sites performance and even spot issues that ought to be addressed to speed things up. But again, its an incomplete picture.What Google Lighthouse Is Great AtI hear other developers boasting about perfect Lighthouse scores and see the screenshots published all over socials. Hey, I just did that myself in the introduction of this article!Lighthouse might be the most widely used web performance reporting tool. Id wager its ubiquity is due to convenience more than the quality of its reports.Open DevTools, click the Lighthouse tab, and generate the report! There are even many ways we can configure Lighthouse to measure performance in simulated situations, such as slow internet connection speeds or creating separate reports for mobile and desktop. Its a very powerful tool for something that comes baked into a free browser. Its also baked right into Googles PageSpeed Insights tool!And its fast. Run a report in Lighthouse, and youll get something back in about 10-15 seconds. Try running reports with other tools, and youll find yourself refilling your coffee, hitting the bathroom, and maybe checking your email (in varying order) while waiting for the results. Theres a good reason for that, but all I want to call out is that Google Lighthouse is lightning fast as far as performance reporting goes.To recap: Lighthouse is great at many things!Its convenient to access,It provides a good deal of configuration for different levels of troubleshooting,And it spits out reports in record time.And what about that bright and lovely animated green score who doesnt love that?!OK, thats the rosy side of Lighthouse reports. Its only fair to highlight its limitations as well. This isnt to dissuade you or anyone else from using Lighthouse, but more of a heads-up that your score may not perfectly reflect reality or even match the scores youd get in other tools, including Googles own PageSpeed Insights.It Doesnt Match Real UsersNot all data is created equal in capital Web Performance. Its important to know this because data represents assumptions that reporting tools make when evaluating performance metrics.The data Lighthouse relies on for its reporting is called simulated data. You might already have a solid guess at what that means: its synthetic data. Now, before kicking simulated data in the knees for not being real data, know that its the reason Lighthouse is super fast.You know how theres a setting to throttle the internet connection speed? That simulates different conditions that either slow down or speed up the connection speed, something that you configure directly in Lighthouse. By default, Lighthouse collects data on a fast connection, but we can configure it to something slower to gain insights on slow page loads. But beware! Lighthouse then estimates how quickly the page would have loaded on a different connection.DebugBear founder Matt Zeunert outlines how data runs in a simulated throttling environment, explaining how Lighthouse uses optimistic and pessimistic averages for making conclusions:[Simulated throttling] reduces variability between tests. But if theres a single slow render-blocking request that shares an origin with several fast responses, then Lighthouse will underestimate page load time.Lighthouse averages optimistic and pessimistic estimates when its unsure exactly which nodes block rendering. In practice, metrics may be closer to either one of these, depending on which dependency graph is more correct.And again, the environment is a configuration, not reality. Its unlikely that your throttled conditions match the connection speeds of an average real user on the website, as they may have a faster network connection or run on a slower CPU. What Lighthouse provides is more like on-demand testing thats immediately available.That makes simulated data great for running tests quickly and under certain artificially sweetened conditions. However, it sacrifices accuracy by making assumptions about the connection speeds of site visitors and averages things in a way that divorces it from reality.While simulated throttling is the default in Lighthouse, it also supports more realistic throttling methods. Running those tests will take more time but give you more accurate data. The easiest way to run Lighthouse with more realistic settings is using an online tool like the DebugBear website speed test or WebPageTest.It Doesnt Impact Core Web Vitals ScoresThese Core Web Vitals everyone talks about are Googles standard metrics for measuring performance. They go beyond simple Your page loaded in X seconds reports by looking at a slew of more pertinent details that are diagnostic of how the page loads, resources that might be blocking other resources, slow user interactions, and how much the page shifts around from loading resources and content. Zeunert has another great post here on Smashing Magazine that discusses each metric in detail.The main point here is that the simulated data Lighthouse produces may (and often does) differ from performance metrics from other tools. I spent a good deal explaining this in another article. The gist of it is that Lighthouse scores do not impact Core Web Vitals data. The reason for that is Core Web Vitals relies on data about real users pulled from the monthly-updated Chrome User Experience (CrUX) report. While CrUX data may be limited by how recently the data was pulled, it is a more accurate reflection of user behaviors and browsing conditions than the simulated data in Lighthouse.The ultimate point Im getting at is that Lighthouse is simply ineffective at measuring Core Web Vitals performance metrics. Heres how I explain it in my bespoke article:[Synthetic] data is fundamentally limited by the fact that it only looks at a single experience in a pre-defined environment. This environment often doesnt even match the average real user on the website, who may have a faster network connection or a slower CPU.I emphasized the important part. In real life, users are likely to have more than one experience on a particular page. Its not as though you navigate to a site, let it load, sit there, and then close the page; youre more likely to do something on that page. And for a Core Web Vital metric that looks for slow paint in response to user input namely, Interaction to Next Paint (INP) theres no way for Lighthouse to measure that at all!Its the same deal for a metric like Cumulative Layout Shift (CLS) that measures the visible stability of a page layout because layout shifts often happen lower on the page after a user has scrolled down. If Lighthouse relied on CrUX data (which it doesnt), then it would be able to make assumptions based on real users who interact with the page and can experience CLS. Instead, Lighthouse waits patiently for the full page load and never interacts with parts of the page, thus having no way of knowing anything about CLS.But Its Still a Good StartThats what I want you to walk away with at the end of the day. A Lighthouse report is incredibly good at producing reports quickly, thanks to the simulated data it uses. In that sense, Id say that Lighthouse is a handy gut check and maybe even a first step to identifying opportunities to optimize performance.But a complete picture, its not. For that, what wed want is a tool that leans on real user data. Tools that integrate CrUX data are pretty good there. But again, that data is pulled every month (28 days to be exact) so it may not reflect the most recent user behaviors and interactions, although it is updated daily on a rolling basis and it is indeed possible to query historical records for larger sample sizes.Even better is using a tool that monitors users in real-time.Data pulled directly from the site of origin is truly the gold standard data we want because it comes from the source of truth. That makes tools that integrate with your site the best way to gain insights and diagnose issues because they tell you exactly how your visitors are experiencing your site.Ive written about using the Performance API in JavaScript to evaluate custom and Core Web Vitals metrics, so its possible to roll that on your own. But there are plenty of existing services out there that do this for you, complete with visualizations, historical records, and true real-time user monitoring (often abbreviated as RUM). What services? Well, DebugBear is a great place to start. I cited Matt Zeunert earlier, and DebugBear is his product.So, if what you want is a complete picture of your sites performance, go ahead and start with Lighthouse. But dont stop there because youre only seeing part of the picture. Youll want to augment your findings and diagnose performance with real-user monitoring for the most complete, accurate picture.

When the days are gray and misty as they are in many parts of the world in November, theres no better remedy than a bit of colorful inspiration. To bring some good vibes to your desktops this month, artists and designers from across the globe once again tickled their creative ideas and designed unique and inspiring wallpapers that are bound to sweeten up your November.The wallpapers in this post come in versions with and without a calendar for November 2024 and can be downloaded for free as it has been a monthly tradition here at Smashing Magazine for more than 13 years already. As a little bonus goodie, we also added a selection of November favorites from our wallpapers archives to the post. Maybe youll spot one of your almost-forgotten favorites in here, too?A huge thank-you to everyone who shared their wallpapers with us this month this post wouldnt exist without you. Happy November!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!Honoring the Sound of Jazz And SoulToday, we celebrate the saxophone, an instrument that has added its signature sound to jazz, rock, classical, and so much more. From smooth solos to bold brass harmonies, the sax has shaped the soundtrack of our lives. Whether youre a seasoned player or just love its iconic sound, lets show some love to this musical marvel! 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, 2560x1440Snow Falls In The AlpsThe end of the year is approaching, and winter is just around the corner, so well spend this month in the Alps. The snow has arrived in the mountains, and we can take advantage of it to ski or have a hot coffee while we watch the flakes fall. 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, 2560x1440The Secret CaveDesigned 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, 3840x2160Happy Thanksgiving DayDesigned by Cronix from the United States.previewwith 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, 4096x2304without 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, 4096x2304Space ExplorerA peaceful, minimalist wallpaper of a lone cartoon astronaut floating in space surrounded by planets and stars. Designed by Reethu from London.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, 2560x1440The SailorDesigned 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, 3840x2160Happy DiwaliDesigned by Cronix from the United States.previewwith 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, 4096x2304without 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, 4096x2304Elimination Of Violence Against WomenNovember 25th is the International Day for the Elimination of Violence Against Women. We wanted to create a wallpaper that can hopefully contribute to building awareness and support. Designed by Friendlystock from Greece.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, 3840x2160Square Isnt ItWhen playing with lines, which were at the beginning displaying a square, I finally arrived to this drawing, and I was surprised. I thought it would make a nice wallpaper for ones desktop, doesnt it? Designed by Philippe Brouard from France.previewwith calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160without calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160TransitionInspired by the transition from autumn to winter. Designed by Tecxology from India.previewwithout calendar: 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Sunset Or SunriseNovember is autumn in all its splendor. Earthy colors, falling leaves, and afternoons in the warmth of the home. But it is also adventurous and exciting and why not, different. We sit in Bali contemplating Pura Ulun Danu Bratan. We dont know if its sunset or dusk, but does that really matter? Designed by Veronica Valenzuela Jimenez from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Cozy Autumn Cups And Cute PumpkinsAutumn coziness, which is created by fallen leaves, pumpkins, and cups of cocoa, inspired our designers for this wallpaper. Designed by MasterBundles from Ukraine.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440A Jelly NovemberBeen looking for a mysterious, gloomy, yet beautiful desktop wallpaper for this winter season? Weve got you, as this months calendar marks Jellyfish Day. On November 3rd, we celebrate these unique, bewildering, and stunning marine animals. Besides adorning your screen, weve got you covered with some jellyfish fun facts: they arent really fish, they need very little oxygen, eat a broad diet, and shrink in size when food is scarce. Now thats some tenacity to look up to. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1440x900, 1440x1050, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Colorful AutumnAutumn can be dreary, especially in November, when rain starts pouring every day. We wanted to summon better days, so thats how this colourful November calendar was created. Open your umbrella and lets roll! 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, 2560x1440Winter Is HereDesigned 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, 3840x2160Moonlight BatsI designed some Halloween characters and then this idea came to my mind a bat family hanging around in the moonlight. A cute and scary mood is just perfect for autumn. Designed by Carmen Eisendle from Germany.previewwithout calendar: 640x480, 800x600, 1024x768, 1280x800, 1280x960, 1440x900, 1600x1200, 1680x1050, 1680x1260, 1920x1200, 1920x1440, 2560x1440, 2560x1600Time To Give ThanksDesigned by Glynnis Owen from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440The Kind SoulKindness drives humanity. Be kind. Be humble. Be humane. Be the best of yourself! Designed by Color Mean Creative Studio from Dubai.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440AnbaniAnbani means alphabet in Georgian. The letters that grow on that tree are the Georgian alphabet. Its very unique! 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, 5120x2880Tempestuous NovemberBy the end of autumn, ferocious Poseidon will part from tinted clouds and timid breeze. After this uneven clash, the sky once more becomes pellucid just in time for imminent luminous snow. 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, 2560x1440Me And The Key ThreeDesigned by Bart Bonte from Belgium.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Mushroom SeasonIt is autumn! It is raining and thus it is mushroom season! It is the perfect moment to go to the forest and get the best mushrooms to do the best recipe. Designed by Vernica Valenzuela from Spain.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440Welcome Home Dear WinterThe smell of winter is lingering in the air. The time to be home! Winter reminds us of good food, of the warmth, the touch of a friendly hand, and a talk beside the fire. Keep calm and let us welcome winter. Designed by Acodez IT Solutions from India.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Outer SpaceWe were inspired by the nature around us and the universe above us, so we created an out-of-this-world calendar. Now, let us all stop for a second and contemplate on preserving our forests, let us send birds of passage off to warmer places, and let us think to ourselves if not on Earth, could we find a home somewhere else in outer space? 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, 2560x1440Captains HomeDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Holiday Season Is ApproachingDesigned by ActiveCollab from the United States.previewwithout calendar: 1080x1920, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Deer Fall, I Love YouDesigned by Maria Porter from the United States.previewwithout calendar: 320x480, 800x600, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Peanut Butter Jelly TimeNovember is the Peanut Butter Month so I decided to make a wallpaper around that. As everyone knows peanut butter goes really well with some jelly so I made two sandwiches, one with peanut butter and one with jelly. Together they make the best combination. Designed by Senne Mommens from Belgium.previewwithout calendar: 320x480, 1280x720, 1280x800, 1280x1024, 1920x1080, 2560x1440International Civil Aviation DayOn December 7, we mark International Civil Aviation Day, celebrating those who prove day by day that the sky really is the limit. As the engine of global connectivity, civil aviation is now, more than ever, a symbol of social and economic progress and a vehicle of international understanding. This monthly calendar is our sign of gratitude to those who dedicate their lives to enabling everyone to reach their dreams. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440November Nights On MountainsThose chill November nights when you see mountain tops covered with the first snow sparkling in the moonlight. Designed by Jovana Djokic from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440November FunDesigned 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, 2560x1440November IngredientsWhether or not you celebrate Thanksgiving, theres certain things that always make the harvest season special. As a Floridian, Im a big fan of any signs that the weather might be cooling down soon, too! Designed by Dorothy Timmer from the United States.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Universal Childrens DayUniversal Childrens Day, November 20. It feels like a dream world, it invites you to let your imagination flow, see the details, and find the child inside you. Designed by Luis Costa from Portugal.previewwithout calendar: 1366x768, 1440x900, 1920x1080, 2560x1440A Gentlemans NovemberDesigned by Cedric Bloem from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440