When Denys Mishunov was invited to speak at one of the best front-end conferences in Europe, he felt like he did not deserve to be at that conference. And he didn’t even know that those feelings of his had a name! This is called impostor syndrome and it is a real psychological issue, rooted deeply in many of us. If we do not pay attention to its symptoms, if we blindly follow its triggers, then we can get into real psychological trouble. The good news is that, even though there is no pill for it, we can change out attitude towards it. Simply acknowledging the feeling can help to neutralize its effect.
Read more…
Karim Maaloul decided to start a series of short WebGL experiments on Codepen, and he has finally found the time to compile them all together on a single website named “Moments of Happiness”. In this article, Karim has detailed the solution used to make a running cycle. On his Codepen page, all of these experiments are available, with the code at your disposal. Feel free to play around and make your own interactive toys. As you’ll see, all of the experiments share one principle: The behavior of each character responds programmatically to user input. No precalculated animation — every movement is defined at runtime.
Read more…
Making toggle button inclusive is a question of language, visual design, markup, and behavior. In this inaugural post, Heydon Pickering will be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise screw up, so let’s try to avoid any of that. You can take the basics explored here and add all sorts of design nuances, including animation. It’s just important to lay a solid foundation first.
Read more…
In this article, Serg Hospodarets will teach you more about CSS custom properties, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript. You will learn how to detect whether they are supported, how they are different from CSS preprocessor variables, and how to start using native CSS variables until they are supported across browsers. This is the right time to start using CSS custom properties and to prepare for their native support in browsers.
Read more…
If our websites don’t enable users to accomplish the key tasks they come to do, we’ve failed them. We should do everything in our power to ensure our websites function under even the harshest of scenarios, but at the same, we can’t expect our users to have the exact same experience in every browser, on every device. Because none of the solutions Aaron Gustafson found actually complied with the law in either spirit or reality, he opted to roll his own robust solution.
Read more…
Is copywork really for you? Unless you’re known the world over for your inimitable style, then yes, you would probably benefit from it. Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill. In your case, this means recreating a user interface (UI) design pixel for pixel.
Read more…
In this article, you’ll find an overview of all of the obscure little things that I forget about every year; so, I decided to gather them all in one place once and for all. The list below serves as a personal reminder for yours truly, and I thought that it might be useful for you as well. In fact, I set up a yearly reminder on December 28th just to have a couple of days to free the mind for the more important things in life and to start the next year without second thoughts or unresolved issues. Curious? Well, let’s dive in!
Read more…
If you don’t want your design to look like it’s made out of unrelated things, this article is for you. There is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, you can propagate styles that cross the borders of your HTML components, ensuring a consistent design with minimal effort. Today, Heydon Pickering is going to revisit inheritance, the cascade and scope here with respect to modular interface design. He aims to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.
Read more…
Front-end fatigue is very real. Technology is evolving so rapidly, that it can be overwhelming. The worst thing you can do is reach the edge and become fully burnt out because once you are, it’s very hard to regain that passion you had for what you do and why you started doing it in the first place. In this article, David Berner shares advice on how to avoid fatigue and stop your head from exploding. Once you’re fully burnt out, it’s very hard to regain that passion you had for what you do and why you started doing it in the first place.
Read more…
In this article, David Catuhe will help you understand how shaders work and even experiment with their inner power in an easy way, thanks to Babylon.js. Before experimenting, David will show you how things work internally. When dealing with hardware-accelerated 3D, you will have to deal with two CPUs: the main CPU and the GPU. The GPU is a kind of extremely specialized CPU. Once all of the states are set, the CPU can define what to render: the geometry. The final step for the CPU is to define how to render the geometry. Shaders are pieces of code that the GPU will execute for each of the vertices and pixels it has to render.
Read more…
