In this article, we’ll explore how to use Grunt in a project to speed up and change the way you develop websites. We’ll look briefly at what Grunt can do, before jumping into how to set up and use its various plugins to do all of the heavy lifting in a project.
It is clear that the ongoing dramatic transformation of the media industry in all its formats (audio, video and text) leaves the door open for a complete reinvention of the publishing business. This transition has opened up opportunities for experimentation, and many players are trying to define the future of media in general, and journalism in particular.
In this article, we will discuss several recent such experiments, with special focus on new forms of storytelling, as well as new business models for publishers — a fascinating recent trend called “subcompact publishing” will be our main reference.
Good developers are always looking for ways to be faster and to automate their workflows. Today, we present a series of workflows in Alfred that will boost your productivity and rock your world.
For those who don’t know, Alfred is an award-winning Mac OS X app that saves time when you search for files online or on your machine. The new version 2 brings a series of improvements and, with the Powerpack, enables you to create your own workflows.
Responsive images are one of the biggest sources of frustration in the Web development community. With good reason, too: The average size of pages has grown from 1 MB to a staggering 1.5 MB in the last year alone. Images account for more than 60% of that growth, and this percentage will only go up.
Much of that page weight could be reduced if images were conditionally optimized based on device width, pixel density and modern image formats (such as WebP). These reductions would result in faster loading times and in users who are more engaged and who would stick around longer.
Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites. We’ll share some lessons drawn from various models and analyze why these simple patterns work so well.
When we design digital products, we often use design applications such as Photoshop and Sketch. Most people who have been in the business for a few years obviously know that design is more than just about visual presentation.
We love organizing community events that leave everyone with memorable, long-lasting impressions. With our upcoming Smashing Conference Oxford, we'll explore real-life projects, workflows and hands-on insights that we can all learn from and use right away. Same game, same rules: 1 track, 2 conference days, 5 workshops, 18 excellent speakers and just 350 seats.
Because discussions about design trends and visual style are often very subjective, they rarely provide actionable, valuable takeaways. Nothing beats a conversation about what worked and what didn't in actual real-life projects, and what decisions were made (or ideas discarded) along the way.
Editor’s Note: This article features techniques that are used in practice by Yahoo! and question coding techniques that we are used to today. You might be interested in reading Decoupling HTML From CSS by Jonathan Snook, On HTML Elements Identifiers by Tim Huegdon and Atomic Design With Sass by Robin Rendle as well. Please keep in mind: some of the mentioned techniques are not considered to be best practices.
When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle.
For those of you who have never heard of the SoC principle in the context of Web design, it relates to something commonly known as the “separation of the three layers”: structure, presentation, behavior.