Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Optimizing Critical-Path Performance With Express Server And Handlebars

Recently, I’ve been working on an isomorphic React website. This website was developed using React, running on an Express server. Everything was going well, but I still wasn’t satisfied with a load-blocking CSS bundle. So, I started to think about options for how to implement the critical-path technique on an Express server.

This article contains my notes about installing and configuring a critical-path performance optimization using Express and Handlebars. Throughout this article, I’ll be using Node.js and Express. Familiarity with them will help you understand the examples.

Read more...

Sponsored Post How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

In this little tutorial, I’m going to share some tips I recently followed to build a fun demo for the Build 2016 conference. The idea was to create a small 8-bit drum machine, with 8-bit sounds and graphics:

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

This small web app was used in one of our demos to illustrate how you can easily provide a temporary offline experience when your hosted web app loses Internet connectivity. It works in all desktop browsers as well as on all smartphones (iOS, Android and Windows Mobile).

Read more...

Advertise with us!

Using A Static Site Generator At Scale: Lessons Learned

Static site generators are pretty en vogue nowadays. It is as if developers around the world are suddenly realizing that, for most websites, a simple build process is easy enough to render the last 20 years of content management systems useless. All right, that’s a bit over the top. But for the average website without many moving parts, it’s pretty close!

Using A Static Site Generator At Scale: Lessons Learned

However, does that hold true for websites bigger than your humble technology blog? How do static site generators behave when the number of pages exceeds the average portfolio website and runs up into the thousands? Or when development is a team effort? Or when people of different technical backgrounds are involved? This is the story of how we managed to bring roughly 2000 pages and 40 authors onto a technology stack made for hackers.

Read more...

User Memory Design: How To Design For Experiences That Last

The two charts pictured below changed the way I think about thinking. Reproduced from a classic 1996 psychology study, the story behind these charts is a vivid illustration that the way we humans feel in the moment as we experience the world can be very different from how we feel when we think back on those experiences later.

User Memory Design: How To Design For Experiences That Stick

Understanding the difference between experience and memory — and the ways they are related — can make us more sophisticated experience designers. In this piece, I’m going to provide some tips for designing for experiences that leave a lasting positive impression. But first, I need to explain the following two charts.

Read more...

Desktop Wallpaper Calendars: August 2016

Since eight years, our monthly desktop wallpapers challenge is a Smashing favorite that wouldn’t be possible without the tireless efforts of talented designers and artists from across the globe. On a quest to cater for wallpapers that are a little more distinctive than the usual crowd, we challenge you, the design community, to get your creative juices flowing and produce some interesting and inspiring designs each month anew. And, well, it wasn’t any different this time around.

Desktop Wallpaper Calendars: August 2016

This post features wallpapers to get your desktop ready for August 2016. They all come in versions with and without a calendar and can be downloaded for free. A big thank-you to everyone who tickled their creativity and contributed their ideas!

Read more...

Web Development Reading List #147: Security Guidelines, Accessible UI Components, And Content-First Design

When working in a team, it’s important to stick to rules. A common challenge is to build all your projects with a similar or the same toolset and coding guidelines. Only yesterday I discussed how we could port over a project that outgrew its initial codebase over the years to a fresh, React.js-based source code.

HTTPS protection

The decision for this wasn’t easy, since we had invested quite a lot of work and money into this project already, and a move to React would require quite some time, too. But since the switch makes sense from a technical perspective and the team is already using React for three other projects, we concluded that this would be a good step to do. It will enable more developers of the team to contribute to the project, to review code and to reduce the shift of technologies in the company. Occasionally, it’s time to re-evaluate your projects and move on.

Read more...

Cross-Platform Native Apps With A Single Code Set Using Telerik NativeScript

Mobile applications are now a critical part of most enterprises, and there are many ways to create them, but what are the differences between these options and how do you choose between them? Do you choose to create native applications as Google and Apple intend? Do you choose to develop a mobile web hybrid application? Or do you find a middle ground?

Cross-Platform Native Apps With A Single Code Set Using Telerik NativeScript

We’re going to look at some of the common problems with developing mobile applications, both native and hybrid, and how NativeScript by Telerik fills the gap. We’ll proceed to develop a NativeScript Android and iOS application from scratch (using the supplied source code), and then convert the same application to use the bleeding-edge Angular 2 JavaScript framework.

Read more...

Getting Practical With Microcopy

The first question clients and stakeholders seek answers to with any digital product and/or service today — and rightly so — is how to establish an effective user experience. We, as designers, however, know that good design and a good user experience are rarely achieved by fixating on one discipline, but rather by adopting a multidisciplinary approach.

Getting Practical With Microcopy

At best, it’s about finding a balance between UX, UI and interaction design, usability, accessibility, web performance (front end, back end, networking), service design and content strategy (i.e. writing copy).

Read more...

Sponsored Post How To Create Icons In Adobe XD

Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.

Creating Icons With Adobe XD

As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.

Read more...

↑ Back to top