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.

Working Remotely Around The World: Workspaces To Explore

If you’re a footloose creative soul searching for a more affordable and friendly space than a typical rented or home office, coworking could work for you.

Alt-Text

Coworking spaces are popping up in cities all around the world. They allow freelancers, small business owners and independent workers to rent a working area that is shared with others. The setup is usually more casual than the fixed rental agreement you would get in a dedicated office space.

Read more...

A Guide To Personal Side Projects

Personal side projects are a cornerstone of creative growth and discovery. While they might not always result in financial gain, the long-term benefits are often much more useful. Benefits such as personal growth, creative exploration and generation of professional opportunities are some of the reasons to engage in them.

A Guide To Personal Side Projects

In this article, we’ll explore these benefits, as well as learn how to decide on a project and how to effectively manage our time (using my recently launched project an an example). Finally, for inspiration, we’ll look at some great examples of personal projects.

Read more...

Advertise with us!

Stylelint: The Style Sheet Linter We’ve Always Wanted

Everyone wants a clean, consistent code base, no matter the language. Developers are accustomed to setting up linters in programming languages such as JavaScript and Python, but they rarely use a linter for style sheets. In this article, we’ll look at stylelint, a linter for style sheets.

Stylelint: The Style Sheet Linter We've Always Wanted

We will also learn why linting a style sheet matters, how stylelint brings order to a style sheet and how we can avoid errors. Finally, we will learn how to use stylelint and start linting as soon as possible. Let's start with why linting is important.

Read more...

The Making Of Melody Jams

After months of hard work, I’ve finally gotten my side project, Melody Jams, into the App Store. It’s been quite the adventure, and I’m thrilled to see it in the store. Seeing it live makes me reflect on the process that got us there: our failures and successes, some of the crazy stuff we figured out and what our hopes and dreams are.

The Making Of Melody Jams

To give you some context, I worked with five other people completely remotely. Most of us still haven’t met in real life. In spite of that, we designed, programmed, animated and submitted the app in four months. It works on iPhone 4s through iPhone 6s+ and iPad 2 through iPad Pro. We also tested it with over 30 kids, ranging from nine months to nine years old, in that timeframe.

Read more...

Developing Dependency Awareness

I’m sure you’ve heard the proverb, “A chain is only as strong as its weakest link,” probably many times. Its written origin dates back to the 18th century, but I wouldn’t be surprised if it was much, much older. And though the work we do has little to do with actual chains, this proverb is every bit as relevant to us.

Developing Dependency Awareness

Remember when Azer Koçulu unpublished more than 250 of his modules from npm (Node Package Manager)? If that name doesn’t ring a bell, perhaps this function name will: left-pad. In case you’re still scratching your head wondering what the heck I’m talking about, Azer removed a bunch of functions from the canonical library of reusable Node.js code and, in doing so, brought thousands of projects to their knees, including high-profile ones like Babel and React.

Read more...

Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)

Creating an effective web design is like putting a puzzle together, with the various parts coming together to tame the chaos and form a whole, well-organized design. At the foundation of this organization are the gestalt grouping principles.

Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)

In the first two parts of this series, we looked at the principles of similarity and proximity to understand how elements can be organized by their relatedness to other elements, and we looked at the principles of closure and figure-ground to understand how relationships are formed through the use of positive and negative space. In the final part of this series, we’ll focus on the principles of continuation and common fate, which involve movement, both implied and animated, to create relationships.

Read more...

Understanding The CSS Property Value Syntax

The World Wide Web Consortium uses a particular syntax to define the possible values that can be used for all CSS properties. You may have seen this syntax in action if you have ever looked at a CSS specification.

Understanding The CSS Property Value Syntax

Let's take a look: <'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill? This syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. If you understand how the W3C defines property values, you will be able to understand any of the W3C’s CSS specifications.

Read more...

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script.

Accessibility is vital, also when it comes to web components

The other thing I always assumed but never got confirmed was that CSS filters slow down the rendering of a page massively. But as it turns out, when you research this properly, there’s only a barely noticeable difference to unfiltered images. Don’t hesitate to try out new things, only make sure that it’s the best solution when you put it to production.

Read more...

Web Image Effects Performance Showdown

As browsers constantly improve their graphical rendering abilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual impact, and allow for consistency without a lot of effort. And as with most things in web development, there are often many ways to achieve the same effect.

Web Image Effects Performance Showdown

In this post, we'll take a look at one of the most popular image effects, grayscale, and assess both the ease of implementation and performance implications of HTML canvas, SVG, CSS filters, and CSS blend modes. Which one will win?

Read more...

↑ Back to top