Blog

This post explains how Medium renders an image placeholder using low-res thumbnails and canvas.

Web Performance Optimisation by lazy-loading images using SVGs as placeholders, representing edges, shapes and silhouettes.

A simple technique to hide the outline CSS property while making your website accessible when using keyboard navigation.

As your projects grow in users and traffic you will need to monitor errors closely to minimize the impact and help with investigation. Axiom is a good fit for Vercel, and especially Next.js projects.

Learn about several ways of assessing the potential performance gains before implementing improvements. This will help building the case and prioritizing performance work.

Solutions Engineers partner with advertisers to solve their business challenges through Facebook technology. This is my take on what the role involves.

A story on why and how we built a new Web Player at Spotify. Or how re-writing can be a good decision if risks are minimized and solutions properly validated.

Progressive Web Apps for desktop fills an important gap for the web. Native apps might not be worth thanks to the new capabilities of the web.

Performance affects user engagement but also can leave many users out. Fast sites are key to democratize the web and let everyone enjoy our products and services.

Wrapping up 2018 - A summary of what I have done during this year.

Taking advantage of PWA functionality on your site is easy. You don't need to go all-in using all the features. Just take what is needed for your use case.

Some ways to reduce the payload of the Spotify logo on their website, which can be applied to other SVGs.

A short summary about this frontend conference hosted in Saint Petersburg, Russia. There I spoke about fostering a web performance culture.

Some ideas to create awareness around performance optimization in a team and company.

Cómo usar un High Order Component para detectar cuándo un elemento está visible y hacer lazy-loading de componentes y secciones de nuestras páginas. Manda al navegador sólo lo que es necesario.

Using a High Order Component to detect visibility and lazy-load components and sections on our pages. Just serve what is needed.

Showing page load, First Paint, and First Contentful Paint displayed on your site to prove you care about web performance.

Applying RoughJS to vector images to get a hand-drawn effect.

We all want to load images fast on the web. Choosing the right image format, optimizing the quality and using responsive images are important tasks, but what can we do beyond that?

Why I keep my personal blog, use AMP, and cross-publish to Medium.

Wrapping up 2017 - A summary of what I have done during this year.

I attended FrontFest 2017 conference and talked about image performance, lazy-loading, placeholders and creative SVGs.

Optimización del rendimiento web utilizando carga diferida de imágenes con SVGs como placeholders, representando contornos, formas y siluetas.

Web Performance Optimisation by lazy-loading images using SVGs as placeholders, representing edges, shapes and silhouettes.

Using CSS blend modes to apply a duotone effect to an image.

He grabado un podcast sobre Progressive Web App para WeCodeSign. Escúchalo o lee la transcripción.

I have presented a talk at Alicante Frontend, a meetup about web development in Spain.

A project to create a collaborative room to listen to songs in sync using Next.JS and Spotify's Connect Web API endpoints.

A simple technique to hide the outline CSS property while making your website accessible when using keyboard navigation.

Reading List with some articles from June 2017

Some recent examples of large companies implementing Progressive Web Apps, changing their mobile strategy

A quick look at the Paint Timing API to get metrics about render events on our pages.

I spoke at JSDayES 2017 in Madrid about web performance and images.

The new Web API endpoints let you show what is playing in your Spotify account. It is easy to create views that update in real time.

I spoke at Render Conf 2017 in Oxford about web performance and images.

Medium is not the only site using blurry placeholders. Let's look at how Quora and Quartz implement a similar technique.

Some background on the hidden features of this blog. Static site, progressive images, AMP, HTTP/2, SSL...

Reading List with some articles from December 2016 - January 2017

It is easy to bless or criticise a piece of technology without understanding what they do. Let's change this.

First React conference in Spain, covering React and React Native. An international event with workshops and talks.

Wrapping up 2016

Record your webcam and screen using Javascript to create screencast from your browser.

I spoke at CSSConf AU 2016 in Melbourne about images on the web and what we can do to reduce their impact in our site's performance.

It's difficult to select the best compression level for JPG images. SSIM helps measuring image similarity, and tools like Jpeg.io makes it easier.

When building a website, consider lazy loading the assets when they are needed. This post will focus in the specific case of lazy loading images.

Webpack and Browserify generate large bundles if we include Node.JS code to be run on the browser. In this post you will learn how to prevent this issue.

Side projects are fun, and they will add value to your daily work when it is most needed.

Using feColorMatrix SVG filters to apply a duotone effect to an image.

How to optimise your SVGs rounding values and using SVGOMG

Using SVGs to achieve a cool drawing effect

Some thoughts about Rdio closing down.

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.

Faster than lightning was a set of talks around web performance during Internetdagarna 2015 in Stockholm, Sweden

This post explains how Medium renders an image placeholder using low-res thumbnails and canvas

Fronteers 2015 - Some notes about the conference in Amsterdam.

Adding SSL to your site can be super easy. If you are using GitHub Pages with a custom domain, read this.

Some opinions on ads and content blockers and how they affect web development.

Setting up ES6 in your next web project isn't that difficult... if you know how.

Some open-source projects I have been working on recently. Rest APIs, ES6 and Audio API.

How to communicate from an iframe to a popup served from the same domain i.e. when using login forms in popups.

Article about project for detecting BPM of a track using the Audio API, in combination with the Spotify Web API.

A look into Polymer and how they can polyfill web components to use them today

Good animations make the interface look smoother and more professional, and it just feels great to use it. However, it is very easy to end up overusing animations and applying them to lots of elements just because it is possible.

I recently migrated my blog to Jekyll and Github Pages and it was worth it. Even though there are drawbacks, it is convenient and the website has know a very good performance.

A look into Polymer and how they can polyfill web components to use them today

I have several small personal projects around Spotify in which I am working in my free time. I recently attended the Music Hack Day Paris 2014, where I coded Spotify iQuiz

Meteor Stockholm organized a meetup to talk about meteor and build an app during a hack event.

The whole company has been hacking for a whole week lots of different projects. We have played with Raspberry Pi, 3D printers, and even stationary bicycles.

Gulp.js is a Javascript task runner based on streams, what can offer an advantage compared to Grunt.js. It is really worth to try it out.

What to use to embed a widget? Iframe or Javascript snippet? In this post I explain their pros and cons when deciding how you want users to embed your widget.

Shift subtitles easily on your browser. My new side project.

How to use custom styles in console.log to render a favicon with some text in the developer tools console.

Spotify desktop client includes a CEF engine that allows HTML5 web apps to interact through a JS API with the native layer.

Like if it was a new year's resolution, a few weeks ago I decided I wanted to become a better JS programmer.

Side project where you can drag and drop an audio file and play it removing the vocals. Perfect for a basic karaoke! And it even works on mobile.

How to display ellipsis with texts that expand multiple lines.

During the conference I gave a talk together with my Spotify colleague Tomás Pérez about "Cross-platform application development using web technologies". We had been planning giving a talk in Spain for some time, sharing some ideas and experience we have learned as developers in Spotify. We have little experience as speakers, but the desire of spreading our knowledge was powerful.

It may seem a bit strange that I talk about Android. After all I am a web developer and I have been actively promoting Web for mobile development. But after a course I have been taking, I wanted to share some thoughts.

C3PO is a small library developed by Stoyan Stefanov that allows injecting these widgets as iframes, instead of defining their containers and use certain 3rd party JS code to create and inject those iframes

The head section of a page is becoming the place to include information for integrating your page with external services.

Facebook has decided, simply, to unify their layout across devices.

Mobile proxy browsers are coming back. For a long time we had Opera Mini. And these days we have seen the release of Opera Beta for Android and an update to Chrome Beta for Android, both highlighting data compression features.

Trabajar en el extranjero era algo que estaba en mis planes desde hace tiempo.

This week almost the whole Spotify company have been working on hack projects. Having 5 days to implement your project is a nice thing, especially after having participated in many 24h ones, and encourage you to come up with more complex projects that otherwise wouldn't be possible to implement.

These days I have been attending the mloc.js conference in Budapest.

Hoy los desarrolladores web estamos inmersos en un montón de cambios continuos. Todos los días aparecen tecnologías, herramientas y técnicas que vienen a mejorar el desarrollo. Y uno pocas veces echa la vista atrás y se da cuenta de cómo se hacían las cosas antes. Y cómo las hacía uno mismo.

Presentación sobre tecnologías web en Spotify

Last weekend Spotify hosted the Music Hack Day Stockholm 2013 at their office in Stockholm

Images are currently the largest average payload in web sites, meaning a 62% of all the bytes. With the increasingly importance of responsive design, responsive images are becoming a challenge to face.

Aunque aún quedan algunos por resolver, es de destacar que hayan seguido trabajando en el sitio.

Hoy se ha presentado el rediseño de la web del Senado de España. Sin entrar a valorar su coste o la necesidad, quería analizarla desde el punto de vista de implementación frontend.

Facebook has rewritten their iOS app from HTML5 to native code to provide a faster user experience. Having actively promoted HTML5 development, this shows hybrid apps performance is still not good enough, but some ideas can be taken from this decision.

Hybrid apps are also present in desktop. And that's the magic of web development, where I can use web technologies to provide content to a large amount of devices, and as a developer use the very same tools and techniques that I used to build websites.

Mobile web apps are not at the same level of native ones. Until browsers don't implement HTML5 API specifications to access device hardware (device API, audio, video), implement push notifications, and improve general performance (animations, scroll) web apps will not be able to deliver the experience that can't be reach through native development.

These are good times for web development. It is moving from client side web development, to server side, then to mobile apps, and now as the top layer used to run all the applications of a typical phone. We need browsers and OS makers to push forward these technologies, implementing better Javascript engines, and making reality the latest HTML5 APIs.

Many mobile-focused JS libraries doesn't support Opera or Windows Phone 7. Thus, not all smartphones are covered.

Server Sent Events are fired on iOS even when the page is not active. Are there any good applications for this?

What web technologies are behind Google+ website? This is a collection of links to posts explaining interesting features of this brand new network site.

Workaround to avoid showing the loading address bar when loading ajax content on iPhone.

Razor to implement BigPipe using ASP.Net MVC. You can use the new view engine to early flush pagelets content and mimic this technique created by Facebook.

This week I am changing jobs, from Signum Software to Tuenti

Nice ideas taken from Facebook's Front End Tech Talk about implementing common interactions and patterns to reduce Javascript file size and use progressive enhancement.

Yahoo realised that two of the wide accepted tips for improving website performance had not work so well for them.

Asynchronous processing of controller actions is very useful on long-running requests, since it avoids thread-blocking while the request is being processed.

These techniques (named Quickling and PageCache) are based on hijax and an intelligent update of specific content of the page instead of the whole page when data changes.

How to load JavaScript on-demand using stub functions and progressive enhancements

Third part of the tutorial to Build Facebook's BigPipe using C#. Source code to make pagelets and achieve delayed parallel execution in an ASP.Net MVC website.

Second part of the tutorial to Build Facebook's BigPipe using C#. Source code to make pagelets and achieve delayed parallel execution in an ASP.Net MVC website.

First part of the tutorial to implement Facebook's BigPipe using ASP.Net MVC. BigPipe improves pages loading time dividing them into regions that are generated on the server concurrently.

This is the C# code to generate a XML images sitemap to let Google Images Bot index more easily the pictures of your site.

Have you ever wondered how to show a google map showing instructions on how to get to your business? You can do it easily detecting your visitor's position and then provide directions to get to a specific destination.

A compilation of known techniques to improve your website performance, both client-side and server-side.

Until 2 years ago I had always seen Javascript as a poor language. It was painful to develop a simple script and expect it to work cross-browser.

You can already use different HTML5 to improve your websites. These are some that I have already started to use in several web applications, offering an equivalent functionality in older browsers.

This post shows how we can easily track the execution times of our actions and controllers by using a filter attribute

I looked for the way of using flush in ASP.Net MVC as I am currently developing websites using this platform, and this can be accomplished by using `Response.Flush()`. The idea is to execute a flush in the view after some external files have been referenced

This post shows a script to recursively optimize a set of JPG files using jpegoptim

Google gives some tips and advices to make your site work faster, especially about loading time.

J2EE AntiPatterns is a book that teaches design patterns using a different approach.

When designing a web site different goals are to be reached, but the main one is to get a high number of visits.