Latest posts

A new LazyLoad to improve your website performance

In the latest days I’ve been working on websites performance optimization and I realized that there is no way to take advantage of the progressive JPEG image format on websites if you’re using jQuery_lazyload. So after sending a pull request to its author, I decided to write my own lazy load, which turned out to be 6x faster.

LazyLoad is a faster, lightweight and flexible script for loading images only when they’re about to enter the viewport of a scrollable area, written in pure Javascript (no jQuery) and with an excellent support to the progressive JPEG image format.

WEBSITE | DEMOS | GITHUB

Continue reading

PicturePolyfill 4 – the fastest picture tag polyfill

PicturePolyfill 4 is out!

Implementing responsive images in your site has never been so simple and fast.

Responsive image

Most important features

  • the <source> parsing algorithm behavior: it now exits at the first matching media query instead of at the last one, as the native implementation does
  • one img tag is now mandatory, as defined in the picture tag specification
  • the srcset attribute inside the img tag is now better managed, in browsers that support it
  • the script is now lighter than before, because the functions to create the img tag were removed
  • the script is now even faster because it now parses only the matching srcset attribute, and not all of them as before
  • the internal cache system is still in place and working fine but  you can avoid using it (just in case you need to) passing a parameter

Continue reading

SVG + PNG fallback made super-easy with Grunt and SVGZR

It was recently released the SVGZR Grunt Plugin, which is super useful to make SVG with PNG fallback usage super-easy, with Grunt.

10-metro_ui_dock_icon_set___678_svg_icons_by_monkee98-d5deacy

The plugin will help you to:

  • take all the SVG images from an input folder
  • compress the SVG removing useless data from the SVG format
  • embed all the SVG images in a CSS file (using the base64 encoding), each one with a specific class name referring to the file name
  • create a PNG sprite image as a fallback for legacy browsers

You can find the Grunt Plugin and more information at this SVGZR GitHub page, and you can install it as a NPM module.

Making of The Treasure of Front-end Island – Chapter 3 – The rising smoke

Ahoy, front-end pirates!

Welcome to the Chapter 3 of the Making of The Secret of Front-end Island saga: the Rising Smoke.

Front-end Island Rising Smoke

In the layout the smoke was composed by 5 gray circles at different opacity. Oh joy! I could avoid using images using markup and border-radius, and animate every smoke ball using CSS 3 only. Challenging, then funny. :)
Continue reading

Making of The Treasure of Front-end Island – Chapter 2 – The blowing clouds

Ahoy, front-end pirates!

Welcome to the Chapter 2 of the Making of The Secret of Front-end Island saga: the Blowing Clouds.

As I described before, in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.

For the blowing clouds I decided to make a “blow left and right” effect using CSS 3 only. I also wanted the clouds to move at different speeds.
Continue reading

Making of The Treasure of Front-end Island – Chapter 1 – The splashing title

Ahoy, front-end pirates!

Welcome to the Chapter 1 of the Making of The Secret of Front-end Island saga: the Splashing Title.

Let’s start saying that in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.

For the splash image I decided to make a “splash” effect using CSS 3 only. So the image had to start small, become bigger than it had to become, bounce back a little, and finally become of the final size. It also had to be shown of the final size in browsers that don’t support CSS 3 transitions.

Here are the steps of what I did:

Continue reading

Making of The Treasure of Front-end Island

Ahoy, front-end pirates!

Today I’m starting a saga about the front-end development of the site of the 2012 edition of the From the Front conference which took place in Bologna, Italy on September the 20th.

The chapters of the saga will be:

  • Chapter 1 – The splashing title
  • Chapter 2 – The blowing clouds
  • Chapter 3 – The rising smoke (coming soon)
  • Chapter 4 – The swinging boat (coming soon)
  • Chapter 5 – The shady pirates (coming soon)

Every chapter will be about the libraries I used, the techniques I applies, the troubles I went through and the related workarounds.

Come back tomorrow to read Chapter 1 – The splashing title.