Latest posts

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.

Respond.js vs css3-mediaqueries.js

Googling respond.js vs css3-mediaqueries.js I’ve found Techniques For Gracefully Degrading Media Queries, a Smashing Magazine post about Lewis Nyman which talks about how to apply the graceful degradation of media queries on browsers that don’t support them (IE 8, IE 7, IE 6).

The options are:

  • Use a separate style sheet to load conditionally on old Internet Explorer versions, or separate style rules to apply based on the body class
  • Use a javascript fallback (using respond.js or css3-mediaqueries.js)

In case of javascript fallback, the best may be respond.js, in the following case:

Continue reading