Today, we want to introduce you to a whole bunch of useful tools, services, and other items for web developers. This article is just right for your lunch break.
The designer with the username PORTERODELANTERO from Barcelona has put in the effort to draw, and animate a small history of the camera, and provide it as a video. Those that have been walking this earth for a while, will feel a bit nostalgic.
Over at Google, there’s a pretty detailed checklist on the topic of progressive web apps. If you don’t know what that is, read my article on the topic for t3n (German language). Google Developers is always a good place to go, as shown once more by the PWA checklist.
The “Text Emoticon Generator” by Ascii.li allows you to easily create text emoticons, which can the be saved to the clipboard, so you can paste them wherever you want to. I actually needed a few minutes of getting used to…
Will Stone provides you with a very pretty, and useful Codepen experiment. You’ll get a source code generator for the CSS Flexbox.
With “Flexible Boxes”, you get to create a custom layout using the new Flexbox attribute, without doing any of the code fiddlings manually. Instead, you can define very precise parameters for your designs via sliders, and other manipulation options. Here, you’ll always see how your box layout reacts. Of course, “Flexible Boxes” is no tool for complete newbies, but it definitely makes getting started in CSS Flexbox a lot easier.
The small service called Launchaco guides you through one of your first steps to autonomy, or, if you’re that far already, helps you find a sick product name. With Launchaco, simply enter the name you have in mind, and the tool checks if the relevant domains are available, which typo would fit well, and which social channels you could get with that name. Since it’s free, it’s a no-brainer.
There are plenty of tools that allow you to make images for social media. But QuotesCover is probably the fastest of its kind. So check it out, if you need that quote truly urgently. The generator itself comes with a massive collection of quotes, but you can also enter your own.
CSS Blend modes and filters allow for effects that were not possible before. When applying the new options to images, you can create even more impressive effects with clever stacking and repeating of multiple attributes. All of this is non-destructive as well.
Bennett Feely from Pittsburgh, Pennsylvania, and his project Image-Effects are an example for how to create effects, that you would not have made purely with CSS before, via smart usage of combinations, or repetitions of modern CSS attributes.
cssreference.io is a compendium on cascading stylesheets. In contrast to pure references, it works visually, resulting in a more immediate and faster-learning effect. Also, this obviously looks a lot better.
Are you looking at that screen all day? Then I’m sure you know the stinging feeling in the eyes. The reduced blinking while staring at the screen dries the surface of the eye, which leads to these problems. Additionally, the stiff posture also has a negative effect on your shoulders. This can cause head and back pain.
However, focusing on an item that is about 20 feet away from you, every 20 minutes for 20 seconds each, will reduce the stress, as well as loosen your tense muscles. But you have to remember to do so.
Misaki Nakano provides you with a very pretty Codepen experiment. Including the entire source code, you are able to display any desired text as if it was knit.
here, a slider lets you define if you want it to be more of a roughly knit text logo or one with a high level of detail. Due to the access to the source code, there are no limits to your imagination. This Codepen alone is a small advanced training course.