BEM has been an absolute lifesaver for me in my effort to create applications in a modular, component-driven way. David Berner has been using it for nearly three years now, and the problems above are the few stumbling blocks he’s hit along the way. This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it.
Read more…
When we design responsive websites, we tend to see responsive design merely as a collection of slightly differently sized rectangles, with a slightly different layout, sometimes with slightly different content poured into them. In this article, Vitaly Friedman features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.
Read more…
What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.
Read more…
Stylelint is a powerful style sheet linter. It brings clarity to code and saves you from errors. It’s useful for everyone. Once you start using it, you will hear no more comments like, “You forgot to remove it there.” in this article, Aleks Hudochenkov will show you why linting a style sheet matters, how stylelint brings order to a style sheet and how we can avoid errors. Happy developing, and may you have a peaceful code review.
Read more…
Dependencies are everywhere. They’re unavoidable. They aren’t inherently bad, but if you don’t consider the possibility a given dependency might not be met, you run the risk of frustrating your users. Reducing dependencies improves the likelihood that your site will be usable by the greatest number of people in the widest variety of scenarios. Even knowing this, however, it’s easy to overlook the most basic dependencies our projects have, undermining their resilience in the process. To illustrate this point, consider the humble submit button.
Read more…
If you write CSS for a living, it is important to understand how to write valid CSS property values correctly. Once you understand how different values can be combined or multiplied, the CSS property value syntax becomes much easier to comprehend. The following 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…
What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.
Read more…
Image filters are a fun and effective way to provide visual unity and aesthetic appeal on the web. Keep in mind that they do come with a slight performance hit, but also with the benefits of speedy design in the browser and the opportunity to design interactions with. In this article, Una Kravets will 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…
Microsoft Edge has evolved over the past year — from being announced as a brand new browser, with Microsoft moving away from Trident (or MSHTML) to EdgeHTML, to the browser usage share increase curve similar to the one Google experienced when Chrome was first introduced in 2008. This article is part of the web development series from our tech evangelists and engineers on JavaScript skills, community projects and best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
Read more…
Using external SVG sprite maps to deliver lossless scalable vector images is widely used in responsive web design today and well-supported by tools like svg4everybody. At German newspaper Zeit Online, we embraced this technique quite a lot. However, we recently changed this workflow back to completely inlining the SVG into the HTML owing to a bug in Apple’s Safari browsers– the same way GitHub is doing with its octicons.
Read more…