Smashing Magazine

Smashing Magazine

Vitaly Friedman, Smashing Magazine, an online magazine for professional Web designers and developers.

Smashing Magazine

Smashing Magazine

Seven Mistakes To Avoid In Your Technical Interviews

I have failed many technical interviews. Year after year would pass and I would slowly progress in my technical interviewing skills. It wasn’t until I received my dream job offer from Spotify and had passed the Google technical interviews that I realized how much I had learned over the preceding years. Finally, my studying had paid off! This was also around the time that many developers began losing their jobs due to COVID.

“If I have difficulty passing data structures and algorithms interviews with a computer science degree,” I thought, “I can’t imagine how overwhelming these concepts must be for self-taught developers.” So for the past year, I’ve made it my mission to make data structures and algorithms approachable for everyone.

Read the article (6 min read)
Smashing Magazine

Smashing Magazine

How To Get Web Design Clients Fast (Part 2)

In part 1, we explained how to use a monthly recurring revenue (MRR) model to grow your web design business. In this second part, we’ll explain how to use proven sales techniques to keep scaling your business profitably.

If you’re an agency owner, you know that you need customers to grow. No matter how big your dreams are, customers are the lifeblood of your business. But you’re probably wondering — how do you attract quality, high-paying clients?

We started our design agency from zero. Two and a half years later, that same business generated $50,000 USD in monthly revenue, and today, it’s many times that size and still growing — all thanks to the sales techniques you’re about to read.

Read the article (7 min read)
Smashing Magazine

Smashing Magazine

From Cats With Love: New Navigation, Guides And Workshops

Not many people know that the entire Smashing Family is a very small team with just 15 wonderful people working day-to-day on everything from magazine and books to front-end and design. At times it might feel like that’s quite a bit of work, but we do our best to be well-organized and be productive, while working (well, mostly) 100% remote for almost a decade now.

In fact, we’ve been quite busy over the last few months. We’ve been running our online workshops, redesigned our navigation, refactored a number of components, refined performance and improved accessibility. There are more subtle UX changes coming in, and we’d love to share what we’ve been cooking. Settle in.

Read the article (2 min read)
Smashing Magazine

Smashing Magazine

Overflow Issues In CSS

If you’re a front-end developer, you may have come across horizontal scrollbar issues, especially on mobile. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill.

What Is an Overflow Issue?

Before discussing overflow issues, we should ascertain what one is. An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally. It can be caused by different factors.

It could occur because of unexpectedly wide content or a fixed-width element that is wider than the viewport. We will explore all of the causes in this article.

Read the article (4 min read)
Smashing Magazine

Smashing Magazine

Building A Video Streaming App With Nuxt.js, Node And Express

Videos work with streams. This means that instead of sending the entire video at once, a video is sent as a set of smaller chunks that make up the full video. This explains why videos buffer when watching a video on slow broadband because it only plays the chunks it has received and tries to load more.

This article is for developers who are willing to learn a new technology by building an actual project: a video streaming app with Node.js as the backend and Nuxt.js as the client.

  • Node.js is a runtime used for building fast and scalable applications. We will use it to handle fetching and streaming videos, generating thumbnails for videos, and serving captions and subtitles for videos.
  • Nuxt.js is a Vue.js framework that helps us build server-rendered Vue.js applications easily. We will consume our API for the videos and this application will have two views: a listing of available videos and a player view for each video.
Read the article (7 min read)
Smashing Magazine

Smashing Magazine

A Complete Guide To HTML Email

Below you’ll find quick jumps to particular components that you might need. Scroll down for a general overview. Or skip the table of contents.

Getting Started With HTML Email

If you’re just trying to understand everything that’s happening behind the scenes of a quirky world of HTML email, Caity G. O’Connor has published a wonderful guide on how to start with email coding. The article features courses, tutorials, articles, and just general guidelines to keep in mind when building and designing emails — all in a comprehensive one-page-guide. On SmashingMag, Lee Munroe has published a detailed guide to building and sending HTML emails as well.

Read the article (6 min read)
Smashing Magazine

Smashing Magazine

Growing UX Maturity In Organizations: Education And Training (Part 3)

This series of articles presents tactics UX practitioners can use to promote the growth of UX maturity in their organizations or product teams. In part 1, I covered the importance of finding and utilizing UX Champions and showing the ROI/value of UX. In part 2, I focused on knowledge sharing and mentorship. In this third, and last, part of the series, I’ll focus on the education of both UX staff and non-UX staff.

As I’ve referenced in the previous articles, Chapman and Plewes’ framework describes five steps or stages of organizational UX maturity that I’m referencing when I mention UX maturity stages within the tactics I present.

Read the article (13 min read)
Smashing Magazine

Smashing Magazine

Better Documentation And Team Communication With Product Design Docs

The typical process for working as a product designer in a company or startup could be familiar to you: a new product is being developed for which to provide a design solution. Then you work on some design proposals and you pitch them in front of 1–3 people to gather feedback.

Sometimes this process works just fine, but some other times it doesn’t. For instance, some people are busy paying attention to finish their own tasks and do not spend enough time to provide clear and concise feedback for your design proposal.

It may also happen that even though your process is good you still want to formalize the process by writing down decisions, keeping track of iterations, and the design process in general, especially in the current times where we find ourselves working remotely due to COVID19.

Read the article (4 min read)
Smashing Magazine

Smashing Magazine

Flaky Tests: Getting Rid Of A Living Nightmare In Testing

There is a fable that I think about a lot these days. The fable was told to me as a child. It’s called “The Boy Who Cried Wolf” by Aesop. It is about a boy who tends the sheep of his village. He gets bored and pretends that a wolf is attacking the flock, calling out to the villagers for help — only for them to disappointedly realize that it is a false alarm and leave the boy alone. Then, when a wolf actually appears and the boy calls for help, the villagers believe it is another false alarm and do not come to the rescue, and the sheep end up getting eaten by the wolf.

The moral of the story is best summarized by the author himself:

“A liar will not be believed, even when he speaks the truth.”
Read the article (8 min read)
Smashing Magazine

Smashing Magazine

Don’t Lose Your Head: Evaluating Headless

With many options comes many decisions, and it is easy to drown in all the many and various stated benefits of the different systems. So how do you approach evaluating these options? Two weeks ago, Aaron Hans shed light on the use cases of going headless and what it is good for here on Smashing Magazine. Today, I’ll give you a little bit of a primer on the CMS landscape, as well as some questions to ask to aid you in making a decision.

Headless? What?

Headless content management is the practice of decoupling your content management system (CMS) from your front-end. Unlike with traditional (or “monolith”) systems, the CMS is not directly responsible for powering the web front-end. Instead, content is served to the front end from a remote system by way of an API, and the front-end consumes this data to render its pages. This can occur either at run-time (when a user lands on your website), or at

Read the article (8 min read)
Smashing Magazine

Smashing Magazine

Vanilla JavaScript Code Snippets

Every now and again we have to deal with legacy code, wading through dark and eerie sides of the code base, often with a vague, ambiguous and unsettling documentation — if any is provided at all. In such cases, refactoring the component seems inevitable.

Or perhaps you need to manage dates and arrays, or manipulate DOM — there is just no need to add an external dependency for a simple task of that kind, but we need to figure out the best way to do that. It’s always a good idea to explore lightweight vanilla JavaScript snippets as well — preferably the ones that don’t have any third-party dependencies. Fortunately, there is no shortage in tooling to do just that.

More Useful Tools:

Read the article (5 min read)
Smashing Magazine

Smashing Magazine

Guarding Against Disposable Design

Disposability is a tricky term to handle in the digital world. So many things are changing so quickly — programming languages, frameworks, and design trends to name but a few — that it often feels inevitable that the things we make will be outdated almost as soon as we finish making them. This is in many ways an exciting and positive thing, but it can also cause long-term thinking to be drowned out by short-term priorities.

This piece is about what I take disposable web design to mean, and the kind of trouble it can cause. It’s also about longevity in a digital context, with steps we can all take to find the sweet spot between re-inventing the wheel and twiddling our thumbs as the world rushes past us. There is a time and place for different approaches. Planning long-term in some areas allows for unbridled innovation and experimentation in others. Evolution and improvement are good.

Read the article (7 min read)
Smashing Magazine

Smashing Magazine

Meet Utopia: Designing And Developing With Fluid Type And Space Scales

Two decades ago, as we embarked on our voyage from the comfortable, predictable shores of print design to the fluid and ever-changing open seas of the World Wide Web, John Allsopp encouraged the acceptance of “the ebb and flow of things”. Ten years later, Ethan Marcotte coined the term “responsive web design”, kickstarting a seismic shift from fixed-width desktop sites — and their separate mobile counterparts — to single codebases of flexible design.

But we didn’t embrace the ebb and flow. Not really. Instead, we settled on a system of arbitrary breakpoints, and there the expedition ended. Rigid “magic numbers” tied to real-world devices plagued our CSS and directed our design processes. Developers today are often handed a collection of mockups for mobile (320px), large mobile (400px), tablet (768px), small desktop (1024px), and large desktop (1440px). The effort expended in generating so many discrete artifacts is an inefficient use of time and resources. It also perpetuates the archaic practice of creating device-specific websites.

Read the article (5 min read)
Smashing Magazine

Smashing Magazine

The Small Joys Of April (2021 Wallpapers Edition)

Starting off the new month with a little inspiration boost — that’s the motivation behind our monthly wallpapers series which has been going on for more than ten years already. Each month, the wallpapers are created by the community for the community and everyone who has an idea for a design is welcome to submit it — experienced designers just like aspiring artists. Of course, it wasn’t any different this time around.

For this edition, creative folks from all across the globe once again challenged their skills to cater for some good vibes on your screens. The wallpapers all come in versions with and without a calendar for April 2021 and can be downloaded for free. A huge thank-you goes out to everyone who shared their designs with us — you’re smashing!

Last but not least, you’ll also find a selection of April favorites from our archives at the end of this post. Because, well, some things are just too good to be forgotten, right? Enjoy!

Read the article (6 min read)
Smashing Magazine

Smashing Magazine

Choosing A New Serverless Database Technology At An Agency (Case Study)

Adopting a new technology is one of the hardest decisions for a technologist in a leadership role. This is often a large and uncomfortable area of risk, whether you are building software for another organization or within your own.

Over the last twelve years as a software engineer, I’ve found myself in the position of having to evaluate a new technology at increasing frequency. This may be the next frontend framework, a new language, or even entirely new architectures like serverless.

The experimentation phase is often fun and exciting. It is where software engineers are most at home, embracing the novelty and euphoria of “aha” moments while grokking new concepts. As engineers, we like to think and tinker, but with enough experience, every engineer learns that even the most incredible technology has its blemishes. You just haven’t found them yet.

Read the article (11 min read)
Smashing Magazine

Smashing Magazine

SVG Generators

Below you’ll find an alphabetical list of all SVG generators listed below. Skip the table of contents, or just scroll down to explore them one-by-one. Also, subscribe to our newsletter to not miss the next ones.

SVG Background Generators

A cool background graphic can draw attention to a blog post, enhance your social media profile, or simply freshen up your phone’s home screen. To make creating abstract and colorful backgrounds a breeze, Moe Amaya’s project Cool Backgrounds now unites the some great background generators in one place.

Read the article (7 min read)
Smashing Magazine

Smashing Magazine

Growing UX Maturity: Knowledge Sharing And Mentorship (Part 2)

This series of articles presents tactics UX practitioners can use to promote the growth of UX maturity in their organizations or product teams. I covered the importance of finding and utilizing UX Champions and showing the ROI/value of UX in the first article of this series. Today, I’ll focus on two additional tactics for UX practitioners to grow their organization’s UX maturity in this article, knowledge sharing and mentorship.

Chapman and Plewes’ framework (see image below) describes five steps or stages of organizational UX maturity that I’m referencing when I mention UX maturity stages within the tactics I present.

Read the article (9 min read)
Smashing Magazine

Smashing Magazine

How To Boost Media Performance On A Budget

American scholar Mason Cooley deftly described a hard fact of life: “A budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.

A case in point: a page-load slowdown of a mere second could cost Amazon $1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.

Read the article (5 min read)
Smashing Magazine

Smashing Magazine

Reactivity In Vue

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions.

This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3.

We’re going to build a simple application to better understand this topic. The code for this app can be found on GitHub.

By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy.

let framework = 'Vue';
let sentence = `${framework} is awesome`;
console.log(sentence)
// logs "Vue is awesome"
framework = 'React';
console.log(sentence)
//should log "React is awesome" if 'sentence' is reactive.
Read the article (5 min read)
Smashing Magazine

Smashing Magazine

A Deep Dive Into Eleventy Static Site Generator

But first — let’s quickly review what is meant by a “static site” and then what a generator provides. A static site is composed of static content — as in, the HTML, CSS, assets, and all content are already compiled together before pushing to a website host. This is different from a dynamic site that compiles those things from querying a database at run time (like WordPress) or that pulls content from APIs client-side (like JavaScript frameworks without server-side rendering).

A static site generator is an environment and build processor to compile your content into static HTML. They usually offer helpers to provide flexibility in writing your content (like supporting Markdown) and include methods for templating. So instead of writing HTML pages one by one and having to copy and paste the repeated parts, a generator will support breaking those things into components via a certain templating language.

Read the article (9 min read)