I don’t usually post a summary of the year, but I’m particularly happy about how 2016 developed and want to do balance. It’s been very positive, both personally and professionally, and hope 2017 will be even better.
Something I didn’t know was that you can record audio and video on the browser without any plugins. You can combine audio from the microphone, video from a canvas, dynamically generated content… you name it. Even recording a window or the entire screen and exporting it as a video.
I just attended CSSConf Australia in Melbourne, where I gave a talk about images and web performance. It was a blast! Very well organised and with a great atmosphere. In this post I give a short introduction about the event and I include links to the slides, videos and the script.
The size of images in JPG varies a lot based on the compression level we choose when saving them. Often, we tweak this level by hand until we consider we don’t have too many artifacts and the resulting image is close enough to the original one.
The same compression level doesn’t generate the same amount of artifacts in two different images. We need to find an automated approach that measures how different (or similar) two images are, and loop through several compression levels to find the most suitable one.
tl;dr: Don’t load images that the user doesn’t see on screen. It is easier than you think.
This blog you are reading is more a tool for me to consolidate some ideas and experiences I come across. So is my GitHub account, where I upload some small projects that otherwise would remain on my computer and eventually die. It is also a way of giving back: I have learned may things reading other people’s posts and code, and I hope someone can find what I do useful.
This is a short post where I show how to use SVG and a
feColorMatrix filter to apply a duotone effect to an image.
Lots of websites have started replacing their icon fonts and small icons with SVGs. They support CSS manipulations, animations and are great for responsive sites. But it is important to keep an eye on their size.
Back in the days SVG was barely used and supported. Some time after we started using them as an alternative to classic bitmaps for some icons, and finally we discovered it was the holy grail for providing responsive graphics. The flat and clean design trends have also make SVG as a very useful image format.
But SVG allows for even cooler features, thanks to the ability of modifying it using CSS and JS. And with some clever techniques we can make fun things, like drawing the borders of an image.