Web Developer Tools & Resources
This week’s Unicorn Club is full of fantastic resources to dive into. From creating seamless UX and understanding the proximity principle to exploring the emotional side of design and the origin of the hamburger icon, there’s plenty to get stuck into.
Measuring user experience (UX) has always been a complex challenge, requiring a blend of creativity and data-driven precision. To tackle this, I created the User Experience Improvement Score (UEIS), a metric that offers a comprehensive view of UX enhancements while pinpointing specific areas for growth.
Squid Game, the cultural phenomenon that took the world by storm, was more than just an intense story; it was also a stunning visual experience. In addition to its engaging plot and powerful social commentary, the show’s distinctive and mesmerizing visual style made a lasting impression on its audience.
There’s many lists of page speed tips online, but in this article I’ll explain why an approach based on automated tooling and high-level page load analysis is often a more effective path to take.
In a time of blurred roles, new technology, and breakneck product cycles, how do we uphold craft and purpose in our work?
Time to make things pop! By the end of this tutorial, you’ll have your own gradient tool to generate CSS and create stunning gradients that bring a striking appeal to any web design.
Website accessibility and SEO go hand in hand. They basically share the same goal of creating a user-friendly, easy-to-navigate website that is accessible to a wider audience.
As a website designer or website owner, you typically think you have only one way to create a website — a white background, black font, and different visual elements in the foreground. But that’s only one variant of website layout. The alternative is the dark mode.
We are getting spoiled with so many new features involving animations with CSS, from scroll-driven animations to view transitions, and plenty of things in between. But it’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte puts two features on display: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.
Svelte 5 is out, and it’s radically different but intimately familiar.
This year, the snippets are bigger, more powerful, and leverage progressive enhancement a bit more; to help us step up to the vast UI/UX requirements of 2025.
By embracing sensitivity over logic, designers can learn from old masters and create new solutions that reconnect to us being humans.
Learn how to build a seamless purchase experience to get customers on the right track right after they give you their hard-earned money.
This video introduces Rumbo, a new TailwindCSS plugin that simplifies animation creation. The speaker demonstrates how to use Rumbo to create animations with simple classes, presets, and a visual editor. They highlight the ease of use and the potential for creating beautiful and performant animations.
Take back space from above and below your text content; achieve optical balance.
Full-bleed? It’s when an element needs to bleed outside the main container and extend to the edge of the page
Frontend development has become more dynamic as the IT sector develops further, embracing state-of-the-art tools, frameworks, and advances in artificial intelligence. This roadmap will walk you through the necessary knowledge, resources, and trends to stay ahead in the rapidly evolving profession of frontend development if you intend to start or advance in the industry in 2025.
Trends change rapidly in UI/UX, and new year means quite a few new emerging innovations that designers should be aware of in order to create relevant and engaging designs. Some trends stay on from previous years, some are completely new, and some might end up being the fleeting ones, so it’s important to pearl off those that truly elevate user experience and make a better impact on your product. Let’s...
React has revolutionized web development with its declarative and component-based approach. While built-in Hooks like useState and useEffect are indispensable, custom Hooks allow developers to encapsulate reusable logic, making codebases cleaner, modular, and easier to maintain.
I have a confession to make. You probably sensed it, but weren’t able to articulate what was happening. Your loved ones think you’re losing your grasp on reality. For the last six months I’ve been incrementally changing the color scheme on my website every single day. I boiled you like a frog! Mu-wa-ha-ha. Don’t believe me? Try for yourself…
I recently had to add a new variation of a rating component for work and thought I’d share my technique here. (Note that this rating is just for displaying a rating, not for inputting a rating.)
What’s unique about it is that the dots in the dither patterns stick to surfaces, and yet the dot sizes and spacing remain approximately constant on the screen, even as surfaces move closer by or further away. This is achieved by dynamically adding or removing dots as needed.
Implementations of the new JavaScript Temporal object are starting to be shipped in experimental releases of browsers. This is big news for web developers because working with dates and times in JavaScript will be hugely simplified and modernized.
As I think about the fast-paced changes in our industry, I can’t help but notice the incredible potential of AI to transform the limits of creativity. For the first time, we aren’t just molding our digital landscape; we’re actually collaborating with intelligent machines to create it together.
But how to create a really attractive website? First things first: make it easy and eye-pleasing, and fill it with the relevant information to describe your vision. That’s not all. Adhere to UI/UX design trends in 2024. In every sense, they are the shortcut to leveling up your web design.
Tailwind CSS simplifies the process of adding motion to your designs with its utility-first approach and prebuilt animation classes. In this article, we’ll showcase various animation examples you can implement using Tailwind CSS, demonstrating how easy it is to bring your designs to life.
Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.
Programming hasn’t fundamentally changed since the 1940s. Most languages still follow the von Neumann paradigm: write sequential instructions and modify data in memory. Let’s look at a simple example
Starting web development can be quite exciting and very easy because the starting point, which is HTML, is extremely simple, and it gives a good momentum. However, there are some mistakes that beginners make in their web development careers, which you should avoid as a beginner.
Like most UX design decisions, choosing the best type of navigation isn’t a one-size-fits-all verdict. It depends on your digital product, target users, and UX goals.
Tailwind is a utility-first CSS framework that revolutionized web development. Its streamlined approach allows for rapid styling, customization, and responsive design. Having the right Tailwind resources is crucial to maximizing its benefits and streamlining your workflow. For that, we have created a comprehensive collection of essential Tailwind resources.
As we move forward on our path to learning how to become a UX designer, we must first understand the fundamental concepts that underlie this ever-changing industry. “What is a UX designer?” and “UX designer skills and responsibilities” are important components that lay the foundation for potential professionals.
In the early 2000s to the mid-oughts, every designer I knew wanted to be featured on the FWA, a showcase for cutting-edge web design. While many of the earlier sites were Flash-based, it’s also where I discovered the first uses of parallax, Paper.js, and Three.js. Back then, websites were meant to be explored and their interfaces discovered.
A creeping shift has redefined how brands maintain identity over recent years, chasing audiences as they jump between endless windows. In a world constantly in motion, James Britton explores the rising impact such demand is having on creatives behind the scenes.
Clear documentation transforms abstract design principles into practical tools. Here’s how leading teams build and maintain living documentation that evolves alongside their design systems.
Welcome to another edition of the Weekly JavaScript Roundup! This week, we’ve gathered an exciting mix of tools, libraries, and tutorials designed to enhance your development workflow. Whether you’re looking for performance optimization tips, new libraries to explore, or inspiration for your next project, we’ve got something for everyone. Stay updated on the latest trends shaping the JavaScript ecosystem and dive right in!
A senior growth product manager shares their tried-and-true AI prompts to spare you hours of repetitive work.
Over the past decade, I’ve stumbled upon a ton of design phrases and statements that were silly, absurd, or so stupid that it’s hard to believe they even exist. Because I wasn’t experienced enough, I didn’t immediately notice the level of stupidity for some of these. I even thought a few were legit pieces of advice. But not anymore. Here’s my list of the top five dangerous design phrases that...
Every year, we release Pinterest Predicts—our annual not-yet-trending report spotlighting 20 trends we predict to be really big in the year ahead. And today, we’re taking it a step further, turning those insights into a custom colour lineup inspired by our 2025 trends, setting the tone (and the hues) for the year ahead
From Smooth Onboarding to Surprising UX Flaws — Here’s What Worked and What Needs Improvement
We’ve handpicked a selection of insightful articles and resources to keep your design skills sharp and your front-end development on track.
This year, we’re bringing Config to San Francisco and London. Here’s a first look at what we’re building for our community on both sides of the Atlantic.
It didn’t take long for the “dark mode” to become a requirement for every user interface design. What started out as a design trend turned into a must-have feature for offering a comfortable user experience.
As the Adobe Red Team proactively helps strengthen the company’s overall security posture, we often find ourselves needing to develop new capabilities to emulate the growing number of increasingly complex adversarial attacks. Adversaries today are stepping up their attack work by using AI and we need to do the same to stay one step ahead.
With the free-to-use ‘Edits’ app, users will be able to edit up to 10-minute video footage right on the phone and share it instantly all social media platforms including Instagram.
Web development is a dynamic field, and having the right tools can make all the difference. From debugging to data conversion, these free tools can help streamline your workflow and save time. Whether you’re working with APIs, designing interfaces, or troubleshooting issues, here are 10 free tools every web developer should bookmark.
The internet has a massive environmental impact. It currently produces 3.7 percent of global carbon emissions — that’s more than most countries of the world. All of the internet’s data centers have a larger CO2 footprint than air and water travel, and the average data center uses 11–19 million liters of water daily. And these numbers will only rise with the increasing demand for consumer content and the servers that...
Today Nue takes a new, more natural direction: it becomes a standards first web framework. The focus has always been to strip away artificial layers and help developers take modern HTML, CSS, and JavaScript to their absolute peak. This shift is important, because now we can more directly work on solving the two key issues in frontend development:
Insights on transitioning to design leadership and more from our wide-ranging interview with Emily Wurgler, Global Director of Experience Design at McDonald’s.
When I started, I wasted months on irrelevant tutorials because I didn’t know where to begin or what mattered most. This guide is built to save you from that frustration.
With more apps than ever, features will only get you so far. It’s time to put resonance on the roadmap.
But that’s the interesting part. What this whole circus has shown us is that people don’t have a problem with WordPress. The issue is with Mullenweg, the chaos swirling around him, and the fear that it’ll trickle over to everyone’s websites and businesses at some point.
Email used to be a tool we used on computers to communicate with others. Today, it has evolved into a powerful method of marketing that has spread across multiple platforms
We’re rewarding outstanding members of our developer community: Find out what it takes to be a champion and nominate one today!
These are the most hearted Pens of 2024. Remember that you can heart a Pen up to three times. The number itself is how many people hearted the Pen, but the ranking takes into account heart-levels as well.
Over the year its closest competitors like Vue and Svelte have introduced APIs that, while not extensive, still make animations a little easier. Whereas React developers have had to rely on third-party libraries like Motion for React, React Spring or others.
How do we determine the most suitable illustration style? How should illustrations complement and reflect your corporate identity? What will resonate most with your target audience? And regarding the content, what type of illustration would best enhance it, and how would it work for the age range it is primarily for? Thomas Bohm shares insightful examples and discusses the key qualities of effective illustrations, emphasizing the importance of understanding your...
We’re still in the early days of artificial intelligence’s (AI) introduction into web development. The technology initially seemed like a gimmick (or a death sentence, depending on your point of view).
Color psychology helps us understand how colors influence human behavior, emotions, and decisions. In this blog, I would like to share what I have learned about the feelings and emotions associated with different colors.
Imagine this: You’ve just aced your interviews, and the company seems like a dream fit. But as you open the offer letter, something doesn’t sit right. The words are there, but the clarity isn’t. This is where things can go south
A feature-rich WordPress theme that offers “unlimited flexibility” may still not be able to handle certain demands you place upon it. You may have to accept the fact your need or needs will go unfulfilled, try to resolve the problem yourself through coding (or place it in the hands of a developer), or look for some other solution to your problem. That other solution, a WordPress plugin, could be readily...
From circles to background text elements to high-drama imagery, 2025 is off to a great start with these website design trends.
As consumer attention to the digital world continues to shift towards smooth user experience or interface design, the ‘dark mode’ function has become one of the essential digital interfaces. This flashy yet power-saving mode is now considered a norm; it has become prevalent with the settings of operating systems up to single applications. The current blog discusses the basics of the dark mode, how to implement it optimally, and what...
Modern browsers have evolved beyond what most design tools can do. It’s up to us to break free from templates and tap into the web’s true creative potential.
When it comes to creating accessible designs, we always think of the basics, like adding alt-text, translations, and color palettes. But there’s more to accessibility than those basic features.
When design and development harmonize, they create intuitive, efficient, and visually compelling interfaces that enhance usability and engagement. However, bridging the gap between these two disciplines requires collaboration, communication, and a shared focus on the end user. So, in this article, we’re going to discuss how you can build seamless user experiences by aligning design and development.
Despite all the transformations we’re seeing, one thing we know for sure: Design (the craft, the discipline, the science) is not going anywhere. While Design only became a more official profession in the 19th century, the study of how craft can be applied to improve business dates back to the early 1800s. Since then, only one thing has remained constant: how Design is done is completely different decade after decade....
I could do a deep dive into the UX of login codes, but I’ll do my best to keep it short. If your product texts/emails login codes, the experience better be amazing.
The storefront has evolved dramatically over the past decade. From mobile-first to offline-first design to social media integrations and headless omnichannel experiences, businesses have faced challenges in efficiency, scalability, and ever-changing customer expectations.
Thomas Bohm shares insightful examples and discusses the key qualities of effective illustrations, emphasizing the importance of understanding your audience.
Discover the WebTransport API, a revolutionary technology that enables efficient, low-latency communication between web clients and servers. Learn how this innovative protocol enhances real-time data transfer, supports bidirectional streams, and improves overall web application performance. Explore its use cases, benefits, and implementation tips to stay ahead in modern web development.
There’s been a lot of LinkedIn chatter lately about how UX research doesn’t always get the recognition it deserves. In my experience, most people outside the UX world see it as a nice-to-have, not a need-to-have. That’s where ROI, or return on investment, calculations come in.
Talking to designers and observing discussions on social media, I’ve been noticing more and more conversations about burnout—its causes, ways to cope with it, and the symptoms, which often take a long and challenging process to overcome.
Buttons are essential to web design, serving as interactive elements that guide users through a website. Whether it’s a call-to-action or a navigation tool, well-designed buttons can significantly enhance the user experience. In this article, we’ll dive into creating and styling buttons using CSS to make them functional and visually appealing.
I do, however, get asked a lot about what technologies and frameworks we use at the studio, so I thought I’d note them down. This information is accurate as of January 2025.
A look at how Toddle.dev helps designers and developers work together by using a visual tool to build web applications more easily.
After the previous effect, here is a different way to stop an infinite rotation on hover. This time, the element will smoothly return to its initial position and the rotation will resume when you unhover.
Are you looking for stylish and one-of-a-kind monoline fonts to make your design projects better? Monoline fonts are great for many things because they have a smooth, single-line style that looks clean and modern. These fonts add a new look to any project, from websites and cards to brand names and logos.
Check out a new dashboard built with Tailwind CSS and Flowbite featuring over 60 pages including a calendar page, kanban board, AI prompting, chatroom, and more.
A recent study from Patchstack found that 97% of detected WordPress security vulnerabilities came from WordPress plugins. Here’s what you need to know to keep your website safe while using plugins.
More people than ever are using design in their daily work. By making our tools and processes more inclusive, we can empower everyone to practice design with confidence—regardless of their title.
The best and worst thing about solo development is the “solo” part. There’s a lot of freedom in working alone, and that freedom can be inspiring, but it can also become a debilitating hindrance to productivity and progress. Victor Ayomipo shares his personal lessons on what it takes to navigate solo development and build the “right” app.
Even if you read the modern React documentation, it can be confusing considering all the visuals.
This article is your guide to screen reader testing—a practical, essential step in building accessible websites. Whether you’re a developer, designer, or project manager, you’ll learn how to integrate screen reader testing into your workflow and create experiences that work for all users, with no exceptions.
Not all of this is like absolutely brand spanking new just-dropped-in-2024 stuff. Some of it is, but generally it’s relatively new stuff that’s all pretty great. I’m pointing things out that I think are really worth knowing about. It’s possible you haven’t kept up too much with HTML developments as it tends to, rightfully, move a lot slower than CSS or JavaScript.
For some time I’ve been working towards building a graphical code editor from scratch.
Here’s a database of roles in UX/user research and operations from the past month. Please note: Some job posting may close before the next board update.
In this article, I’ll walk you through the key accessibility principles I believe every front-end developer should apply when building components, including:
Designing a website is more than creating something that looks visually appealing. It is about balancing aesthetics with functionality, ensuring the site meets its goals while offering an intuitive user experience. This guide walks you through the complete web design workflow, from the initial planning stages to the final moments of review and launch.
The principle of design variety states that multiple contrasting elements can capture user attention. This is based on the human desire to indulge and explore and the fear of missing out. Like all principles of design, variety isn’t inherently beneficial to users, but it’s a good rule of thumb to keep in mind when trying to capture their attention.
Whether it’s an entirely new startup or just another initiative in an already productized tool, I always ask three core questions that help better draw the picture before I plunge into the work. Of course, answering them will not reveal everything you need to complete the project, but they will surely set the initial scene. We must remember that design processes are never linear, and all the particular steps can’t be...
Google CrUX data impacts search rankings, but it’s not always clear how to read the data. Data is reported in different tools covering different time periods and website URLs.
As a UX designer, your job is to make sure Web-site visitors have the best user experience possible. However, users are bound to make mistakes. Whether because of their being unfamiliar with your user interface, clicking something accidentally, or simply misinterpreting your instructions, mistakes are all but unavoidable.
Neumorphism (or “New Skeuomorphism”) is a design trend that aimed to blend realism with minimalism. It gave UI elements a soft, extruded look, making them look dimensional and flat simultaneously.
Automattic CEO and WordPress co-creator Matt Mullenweg has deactivated the accounts of several WordPress.org community members, some of whom have been spearheading a push to create a new fork of the open source WordPress project.
The Figma team has introduced three updates to frame presets in UI3, designed to enhance your design efficiency:
My kid is in a little phase where word search puzzles are really fun. She likes doing them, and then possibly because we share blood, she immediately started to want to make them.
I love talking to students for their refreshing ambition. I spoke recently at the UW HCI program (thanks to my friend and host Douglas Pyle) and their energy was delightful. They imagine great projects in their future and can’t wait to get started. Yet we all know after a few years in the workforce, that joy often fades. What can we do to bring it back? Here is one way.
In the world of User Experience (UX) design, Jakob Nielsen’s 10 Usability Heuristics for User Interface Design have long been the cornerstone for crafting intuitive, user-friendly digital interfaces.
We turned six big ideas percolating around the Figma office—written from the perspective of devs, designers, analysts, writers, PMs, card-carrying generalists—and put them on record. Here’s a look at what’s on our minds for 2025.
Do you manage a website and prioritize its security? A complete backup system is the most viable strategy.
Product drops and sales are a great way to increase revenue, but these events can result in traffic spikes that affect a site’s availability and performance. To prevent website crashes, you’ll have to make sure that the sites you design can handle large numbers of server requests at once. Let’s discuss how!
React Native has become a convenient framework that lets developers build apps for both iOS and Android using just one codebase.
Rudy Khaw, CEO at AirAsia brand co. – an entity dedicated to enhancing the reach and impact of the AirAsia brand through brand management, licensing, IP development and merchandising – has championed a vision where AI serves not as a replacement for human ingenuity, but as a powerful collaborator.
Imagine this: You’re completing a registration form with multiple fields. You push yourself to finish it, only to be met with an alert that says, The value entered input field X is invalid or you see an error message slightly below the input field(s) with the error(s). While these methods do provide feedback, there are more user-friendly ways to enhance the experience.
Perfect typography with fluid scaling, custom fonts, and instant CSS/Tailwind/WordPress.
Artificial intelligence (AI) has become a key component of innovation in the quickly changing technological landscape, transforming industries and how we live our daily lives.
I came to realize that the most inspiring, authentic design on the internet today comes from niche places.
Industry leaders from companies like Ableton, Snapchat, and Coda set resolutions for managing teams, shipping products, and sparking great ideas in the year ahead.
Branding design is constantly changing these days. We see a new rebranding or logo remake at least every few weeks.
TypeScript provides a structured way to declare and use global variables while ensuring type safety. Global variables can be accessed across your application, but managing them properly is essential to avoid conflicts and maintain code clarity.
Typography trends for 2025 are shaping up to be a blend of minimalism, functionality, and personality. Designers are embracing clean, sans-serif typefaces like Manrope, Satoshi, and Urbanist that prioritize readability and versatility while also leaning into bold, geometric, and high-contrast fonts to make a statement.
All I know is that one minute, I could be brimming with ideas, and the next, I could stare at a blinking cursor like I forgot how to form words. My mind can suddenly get flooded with admin tasks I’ve been procrastinating so much that it becomes a struggle to focus on the creative work I actually enjoy.
Lovely imagery and media throughout this One Pager promoting Jin Zhen Lian who sell treats made fruit from the famous seaside orchards of Eastern Thailand.
In the world of UX design, creating a great design or prototype is just the beginning. To ensure your product truly meets user needs, the next critical step is testing it with real users. That’s where UX testing and research tools come into play — they help you gather meaningful insights, validate your designs, and improve the user experience effectively.
As Head of UX Research at Oyster HR, a fully distributed company, my day-to-day revolves around uncovering user needs, identifying problems, and crafting recommendations to guide product teams.
Let’s talk about AI agents – they’re like the superheroes of the tech world, doing tasks on their own, much like you or I would. Imagine software that can look around, think through things, and act without needing someone to hold its hand every step of the way.
In this new tutorial, we’ll be working with GSAP, learning how to create an easy-to-follow, attractive, button-to-modal animation.
Happy new year! To welcome in 2025 we’re clearing the proverbial decks with some delightful design that shows us how to clarify, organise and declutter. We’re learning what the master of information design Edward Tufte meant by his term chartjunk and ogling a masterful 19th century tool chest that has to be seen to be believed.
These powerful tools automate the retouching process, allowing you to quickly smooth out blemishes, reduce wrinkles, and even out skin tone. With the right Photoshop actions, you can enhance your portraits without sacrificing a natural look, ensuring your subjects look their best.
Any web page consists of content. As designers and developers, we don’t have control over how to let the browser handle wrapping content.
Google Chrome is one of the most popular web browsers in the world. It is fast, secure, and packed with features that make it easy to use. One of the most exciting features recently introduced in Google Chrome is AI assistance. Powered by Google’s Gemini model, it can assist you with various development tasks directly in the browser.
Hello, today I’m happy to share my Figma iPhone 16 mockup. This free file includes realistic, fully responsive, layered, and structured iPhone 16 components for UI design, mockups, and presentations in Figma. Use this file to showcase your app designs with a professional-grade mockup.
In today’s fast-moving world, copy-paste design has become the go-to approach for rapid development.
The Psychology Behind TikTok’s Addictive Feed
2025’s First Look: Multi-State Buttons, Preloaded Fonts & UX Retention Hacks
Searching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and what they are capable of.
Follow along and learn how to build a fully functioning Connect Four game in HTML, CSS and Vanilla JavaScript.
Staying relevant in the ever-changing world of design is always an uphill battle for designers. But it’s a good kind of challenge that makes you better each year.
The biggest trend that can be observed in the design space is how designers are more and more focussing on the craft of visualisation. Gone seem the days of user research, exploration and concepting.
Your weekly dose of JavaScript news, tools, and tutorials to stay ahead in web development.
Heavy metal fonts are more than just letters on a page; they’re a visual representation of the music’s energy, attitude, and power. The right font can make all the difference in creating a strong and impactful design, whether it’s for a band logo, album cover, or merchandise.
Maybe 2025 has already started as you’re reading this, maybe you’re still waiting for the big countdown to begin — either way, it’s never too late or too early for some New Year’s inspiration! Our new collection of desktop wallpapers has got you covered.
With this snippet you can get all animations that are linked to an active View Transition
Discover innovative JavaScript tools beyond the well-known React, Vue.js, and Next.js. These lesser-known frameworks and libraries are shaping the future of web development.
Although we are often bound by corporate design and conservative expectations, trend spotting can be fun and inspiring if we don’t take it too seriously. My subjective outlook features colors, technology, and legislation relevant to web design and web development in 2025.