If you’re building a physical structure, like a large edifice, with weak material, a lot of external support is required to hold it together, and things have to be overbuilt to stay sturdy. When you’re building a website out of HTML, CSS and JavaScript, this external support might look like frameworks, plugins, preprocessors, transpilers, editing tools, package managers and build processes. Instead of adding yet another plugin to the top of the stack, Yommy Hodgins thought of extending one of the core languages, CSS, to strengthen the material that websites are built from, developing better, stronger websites that require less external support and tools to build.
Read more…
In this article, Anna Selezniova will share her experience using CSS 3D effects for the first time in a real project and hopefully inspire you to take on challenges. Anna has gained useful experience in working with CSS 3D and she has discovered many interesting properties. More importantly, she has learned that one should never give up; most likely you will find a way to accomplish the task.
Read more…
The theremin’s unique sound proves perfect for sci-fi soundtracks and Good Vibrations by the Beach Boys. The world is a better place. With this tutorial, Stuart Memo hopes you could see how simple getting something musical up and running fairly quickly can be. You can even use the following techniques to make a synthesizer. Stuart created a little HTML keyboard called Qwerty Hancock to help you do this very thing. Feel free to show off your own creation!
Read more…
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…
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…
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…
Fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which you have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques In this article, Michael Riethmuller will teach you how to apply the techniques you know in a slightly different way. Careful attention to detail will ensure you still have a perfectly crafted experience at all screen sizes.
Read more…
CSS pseudo-classes and pseudo-elements can certainly be a handful. They provide so many possibilities that one can easily feel overwhelmed, but that’s the life of a web designer and developer! In this guide, Ricardo Zea will teach you all the things you need to keep in mind so that your pseudo-classes and pseudo-elements are well implemented. If you’re an experienced web designer or developer, you must know and have used most of the pseudo-classes and pseudo-elements discussed here. However, you might not have heard of one or two of them before.
Read more…
Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined development for years, but the web is changing. Understanding what is going on is easier when everything is in one place.
Read more…
