WebP image compression

You can convert an image to webP format online going to http://image.online-convert.com/convert-to-webp, an horrible website but extremly efficient.

I did a test with this image:

image

The JPG version is 161 Ko while the WebP version is 48 Ko:

If you use Photoshop as an image editor, as I imagine you are since this blog is aim to help graphic designers turned integrators and front end designers wanna-be. (Mac, Windiows, Linux), you can use this plugin

Another Photoshop plugin allows you to edit a webP image in Photoshop. (Mac, Windows)

Browser’s compatibility

By now Chrome and Opera, Opera Mini, Android browser and Chrome for Android  support the format, and according to CNet,

Thus far, only Chrome and Opera support it, but Mozilla is re-evaluating its earlier opposition to WebP for Firefox in light of some major non-Google Web sites showing support. Google also has improved the format to address some of Mozilla’s earlier concerns.

Another reason why you should seriously consider the WebP compression is that compagny like Facebook is adopting it. When this kind of company make that move they are already changing the game. That is a strong indicator of which direction is taking the web convention. So maybe right now it is wise to keep on using the traditional compression format (jpeg, gif, png) for small websites, while it is worth thinking of choosing the WebP for huge websites. Make a smooth transition, getting used to it even if nowadays it seems to be tedious.

Fallback

Smashing magazine tested the format and runned 4 tests in order to define the best fallback solution. They´ve decided to use the <picture> tag, because it allows to keep the WebP compression/quality benefits as well as letting browsers chose the rigth format.
<picture> is an element which isn’t recognized by every browsers yet, so it is necesary to use the picturefill script so overcome the problem.

The use in the markup:

<picture>
  <source srcset="examples/image.webp" type="image/webp">
  <img srcset="examples/image.jpg alt="…">
</picture>

Note that there’s no alt=“” attribut in the <source> element, and the webp needs to be supported with a type.

Combine media queries with webp format.

<picture>
  <source srcset="examples/images/large.jpg, 
   examples/images/extralarge.jpg 2x" media="(min-width: 800px)">

 <source srcset="examples/images/large.webp,
  examples/images/extralarge.webp 2x"
  media="(min-width: 800px)
type="image/webp">

   <img srcset="examples/images/small.jpg, 
    examples/images/medium.jpg 2x" alt="…">
</picture>

:focus {outline, porque es importante no suprimirlo sino atribuirle los estilos correctos

Estamos acostumbrados, por cuestión de estética, quitar la propiedad outline, que depende del selector :focus

En efecto, por default los navegadores imponen un grueso halo azul alrededor de un elemento hijo de la etiqueta <from>:

Pero al eliminar el outline a través de los estilos

:focus {
   outline: 0;
   /* or */
   outline: none;
}

quitamos del website una funcionalidad muy importante para la gente acostumbrada a navegar con el teclado, y para los con problema de visión.

Así es muy recomendable que al lugar de suprimirlo, customizar el estilo.

De esa manera por ejemplo:

:focus {
 outline: thin dotted #333333 !important;
 outline: 5px auto -webkit-focus-ring-color !important;
 outline-offset: -2px;
}

Nota: el estilo por default de Chrome:

:focus {
   /* -webkit-focus-ring-color = '#5B9DD9' */
   outline: -webkit-focus-ring-color auto 5px;
}

El de Firefox:

:focus {
  /*  outline:

1px dotted #212121

; } 

Customizar los estilos del dropdown de

Este plugin de JQuery te permite de manera fácil y limpia customizar el dropdow de la etiqueta <select>.

Sí es una algo que puedes fácilmente realizar al utilizar el .dropdown de Bootstrap. 

El problema de esta opción es que, según experiencia de los desarrolladores con los cuales trabajo, complica la implementación de los datos. Entonces tuve que cambiar los <div class=“dropdown”></div> a <select>.

No quede satisfecha de la visualización del dropdown del <select>, y después de intentar forzar los etilos a otros, cosa que resultó imposible por el avance de customización que buscaba alcanzar, encontré este plugin http://silviomoreto.github.io/bootstrap-select/.


Para los principiantes:

Del archivo que descargas, los que realmente funcionan considerando que ya tienes instalado Bootstrap y jQuery, son los que se encuentran en la carpeta dist.

También es necesario que añades las líneas siguientes al html (el css en el <head> y el script justo antes de </body>)

 <link rel=“stylesheet” href=“dist/css/bootstrap-select.css”>

 <script src=“dist/js/bootstrap-select.js”></script>

EN caso que tengas duda es muy recomendable revisar como está hecho el archivo “test.html

Fix element – CSS/javascript

I’ve been searching for a fix to my problem:

I’ve implemented the bootstrap .affix to an horizontal element (position: fixed), so that the element can stay at the same position even on scrolling. I could easily to that. 

Then I had to apply the same effet to a sidebar. This one gave me headache as I had to make it sticky too, but only from the navbar, untill the footer. In fact

  1. I needed the sticky effet to start once the navbar disappear by scrolling,
  2. I didn’t want the sidebar to overlap the footer

The first step was quite easy to do, as I’ve previously managed to implement it in the horizontal element with the simple use of the .affix class, the following script (and of course, calling jquery + bootstrap)

 <script type=‘text/javascript’>
   $(’#sticky’).affix({
     offset: {
     top: $(‘header’).height()
     }
     });
   </script>

 <!– jQuery –>
   <script src=“js/jquery.js”></script>

   <!– Bootstrap Core JavaScript –>
   <script src=“js/bootstrap.min.js”></script>

Basically, the ellement with the ID sticky will trigger one the height of the nav has been scrolled down.

Sometime you have to set a specific css to adapt the effect to your design, in my case:  

 #sticky.affix {
     top: 0;
     z-index:20;
   }


Then problems started to show. I’ve spend at least 5 hours looking at a solution, and finding the right of. First I’ve tried to apply the bootstrap guide of affix-bottom. In order for the sticky element to stop once reaching the footer.

No one of my 10th attempt work. Probably because of a conflicted between several scripts…

I then search and search and search for a solution, and finally landed to Andrew Henderson website. 

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

He has written a full, didactical plugin which works independently from Bootstrap and which is really easy to customise.

It’s open source, and the amount and Q&A are a really good guide to resolve some eventual pending doubts.

I personnally used snippet from the demo files to set my own code.

Fresh and clean!