Drawing images using edge detection and SVG animation

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.

Continue reading about Drawing images using edge detection and SVG animation...

Farewell Rdio

The news about Rdio shutting down have been unexpected. It’s always sad when a company building great products closes down. And even though I am working at Spotify, I still want to see good competitors, both smaller and bigger, that make everyone else strive for improving. All in the benefit of users.

Continue reading about Farewell Rdio...

Using WebP to create tiny preview images

Following with the image optimization topic, I am going to have a deeper look to Facebook’s technique to create preview photos, and will show how WebP can simplify their solution.

WebP vs JPEG when encoding tiny images

tl;dr WebP produces tiny files when compressing small images. This makes it ideal for implementing preview photos. Check the demo.

Continue reading about Using WebP to create tiny preview images...

Web Performance talk in Stockholm - Internet Days

Today I have had the chance of attending the Faster than lightning track of Internetdagarna 2015. There have been talks about web performance, and some broader topics like big data and UI, how data is important for large companies offering free services, and the need for public Governments to build compelling competitive services. The videos are already online.The Heart logo @ Internetdagarna 2015

Continue reading about Web Performance talk in Stockholm - Internet Days...

How Medium does progressive image loading

Recently, I was browsing a post on Medium and I spotted a nice image loading effect. First, load a small blurry image, and then transition to the large image. I found it pretty neat and wanted to dissect how it was done.

A screenshot of a blurry placeholder while the image is loaded

Continue reading about How Medium does progressive image loading...

Fronteers 2015 - A wrap up

This was my first time in Fronteers, surrounded by lots of frontend developers and designers in an amazing venue in Amsterdam. Here I have a quick review of its talks.

The conference covered frontend development from several views. There were talks about interesting browser APIs, accessibility, developer tools, build tools, progressive enhancement, design guidelines, open data, how to structure teams or how to deal with projects and clients. It was very well organised, with good food, coffee and other snacks, as well as after-talk mingling.

Continue reading about Fronteers 2015 - A wrap up...

SSL all the things

… or why I have migrated my site to SSL. I have been willing to use HTTPS on my site for some time, especially to be able to play with some new technologies like Service Workers. And, if GitHub implements it, HTTP/2.

I’m using GitHub Pages with a custom domain to power this blog and the pages for my GitHub projects. While GitHub Pages can be served using HTTPS, if you define a custom domain you need to manage this.

Continue reading about SSL all the things...

iOS 9 and content blockers

Everyone is talking about ad-blockers these days after the release of iOS 9. But we should talk more about the “content blockers” feature in general, which can, by default, block scripts, fonts or images. What you can do as a web developer is what you should have been doing until now: don’t take anything for granted and follow a progressive enhancement approach.

Continue reading about iOS 9 and content blockers...

Using ES6 today

Yesterday I was reading How to Use ES6 for Universal JavaScript Apps and decided to create a small template from which I can start a project using ES6 both client and server-side. Note: You can replace the term “ES6” with ES2015, ES.next or whatever it’s called today, you get the idea.

Continue reading about Using ES6 today...

What I've been up to recently

Yes! It’s been a while since I last posted on this blog. I haven’t come up with new ideas for some time, but I do have been working on some projects I had on GitHub and needed a revisit.

Continue reading about What I've been up to recently...