Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

Mistakes Developers Make When Learning Design

The blank Photoshop document glows in front of you. You've been trying to design a website for an hour but it's going nowhere. You feel defeated. You were in this same predicament last month when you couldn't design a website for a project at work. As a developer, you just feel out of your element pushing pixels around.

Mistakes Developers Make When Learning Design

How do designers do it? Do they just mess around in Photoshop or Sketch for a while until a pretty design appears? Can developers who are used to working within the logical constructs of Boolean logic and number theory master the seemingly arbitrary rules of design?

Read more...

Quick Tips Tech Advent Calendars For Web Designers And Developers In 2016

With the holidays almost here and the new year already in sight, December is a time to slow down, an occasion to reflect and plan ahead. To help us escape the everyday hectic for a bit and sweeten our days with a delightful little surprise each day up to Christmas, the web community has assembled some fantastic advent calendars this year. They cater for a daily dose of web design and development goodness with stellar articles, inspiring experiments, and even puzzles to solve.

Advent Calendars For Web Folks

To make the choice of which ones to follow a bit easier, we collected a selection of advent calendars in this Quick Tip for you. No matter if you’re a front-end dev, UX designer, or content strategist, we’re certain you’ll find something to inspire you for the upcoming year. So prepare yourself a nice cup of coffee, cozy up in your favorite chair and, well, enjoy!

Read more...

Advertise with us!

Styling Web Components Using A Shared Style Sheet

Web components are an amazing new feature of the web, allowing developers to define their own custom HTML elements. When combined with a style guide, web components can create a component API, which allows developers to stop copying and pasting code snippets and instead just use a DOM element.

Styling Web Components Using A Shared Style Sheet

By using the shadow DOM, we can encapsulate the web component and not have to worry about specificity wars with any other style sheet on the page. However, web components and style guides currently seem to be at odds with each other.

Read more...

Sponsored Article How My API-Driven Website Helps Me Travel The World

Recently, I decided to rebuild my personal website, because it was six years old and looked — politely speaking — a little bit "outdated." The goal was to include some information about myself, a blog area, a list of my recent side projects, and upcoming events.

How My API-Driven Website Helps Me Travel The World

As I do client work from time to time, there was one thing I didn't want to deal with — databases! Previously, I built WordPress sites for everyone who wanted me to. The programming part was usually fun for me, but the releases, moving of databases to different environments, and actual publishing, were always annoying.

Read more...

How To Build A SpriteKit Game In Swift 3 (Part 3)

Have you ever wondered what it takes to create a SpriteKit game? Do buttons seem like a bigger task than they should be? Ever wonder how to persist settings in a game? Game-making has never been easier on iOS since the introduction of SpriteKit. In part three of this three-part series, we will finish up our RainCat game and complete our introduction to SpriteKit.

How To Build A SpriteKit Game In Swift 3 (Part 3)

If you missed out on the previous lesson, you can catch up by getting the code on GitHub. Remember that this tutorial requires Xcode 8 and Swift 3.

Read more...

How Creating A Design Language Can Streamline Your UX Design Process

Around a year ago, while working at a digital agency, I was given the objective of streamlining our UX design process. Twelve months later, this article shares my thoughts and experiences on how lean thinking helped to instill efficiencies within our UX design process.

How Creating A Design Language Can Streamline Your UX Design Process

When I arrived at the agency, wireframes were already being created and utilized across a variety of projects. Winning advocates for the production of wireframes was not the issue. All stakeholders (both internally and externally) understood the purpose of wireframes and appreciated their value in shaping and modeling digital experiences.

Read more...

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

We shouldn’t let ourselves get distracted by people who work on different projects than we do. If a developer advocate works on a web-based QR code application, for example, their way of tackling things most certainly won’t fit your project. If someone builds a real-time dashboard, their concept won’t relate to the company portfolio website you’re building. Bear in mind that you need to find the best concept, the best technologies, the best solution for your specific project.

Web Development Reading List #162

Thinking about the right decisions rather than following cool, new trends blindly, is the first step to building responsible web solutions. That’s what we call progressive enhancement. The only subjective matter in this undertaking is you, judging what level of progressive enhancement a solution should have.

Read more...

Quick Tips Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets (EPS, AI, PNG)

Christmas is just around the corner, and what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.

Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets

All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects. Reselling a bundle is never cool, though. Have a happy holiday season!

Read more...

GPU Animation: Doing It Right

Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use transform: translateZ(0) or will-change: transform.”

gpu-animation-done-right

These properties have become something like how we used zoom: 1 for Internet Explorer 6 (if you catch my drift) in terms of preparing animation for the GPU — or compositing, as browser vendors like to call it. But sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artifacts or even crashes the browser. Why does this happen? How do we fix it? Let’s try to understand.

Read more...

↑ Back to top