Flex y position absolute compatibles ?

Mi experiencia de cierta incompatibilidad entre flex y la position absolute surgió al querer centrar verticalmente el contenido (título, headline y botón) del primer fold de un website. Les explico como superar esa “incompatibilidad”.

Lo que buscaba hacer es un diseño fluido, que permita guardar el contenido centrado, aún cuando la pantalla está disminuida en su altura.
Mira el ejemplo siguiente para entender mis palabras:

Así el texto sigue visible, en lugar de desaparecer por tener una posición especificada con referencia base aplicada desde el top o bottom del contenedor.

Las primeras líneas de css que escribí se aplicó de manera fantástica en Chrome; en Chrome únicamente. Después de leer unas documentaciones, entendí que efectivamente hay dos cosas que tomar en cuenta:

align-self no se aplica si está combinado con margin : auto

selector {
align-self: center; 
margin: auto;
}

la position absolute y las características flex son compatibles en todo los navegadores únicamente cuando flex y absolute:

  • se aplican a un mismo elemento
  • ese elemento es el contenedor padre directo de los elementos que vamos a alinear.
contenedor-padre-lejano {
 height: 100%;
}
contenedor-padre-directo {
 position: absolute;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 display: -ms-flexbox; /* TWEENER - IE 10 */ 
 display: -ms-flex; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+, Chrome, Opera */
 align-items: center;
 height: 100%;
 top: 0;
 flex-direction: column;
}
elemento-a-centrar {
}

Si atribuimos el display flex a un padre lejano, el efecto se aplicará unicamente en Chrome.

En cuanto a la compatibilidad con previas versiones de navegadores:

la compatibilidad de flex con varias versiones de navegadores

 

Tabs en publicación de wordpress sin plugin

Ok, el proyecto: un onepage website responsivo con espacio de membresia para un espacio co-working llamado hasta la hora Vorticer (MX), desarrollada en WordPress.

Cuando desarrollo páginas en wordpress, procuro usar el mínimo, por no decir ningún, plugin. Eso para no obligar el cliente en actualizarlos cada cuanto, cosa que de cualquier manera no hará, y entonces evitar que conflictos entre la versión de wordpress y la versión del plugin surjan además que eventuales problemas de visualización de la información lleguen en los meses siguiendo la entrega del proyecto.

Uno de mis objetivos cuando trabajo en proyectos digitales es entregar un producto en simbiosis con el business del cliente, con una organización de contenido adecuado para el usuario y que vaya de mano con los objetivos que tiene el cliente (su empresa / servicio / producto es ya conocido, o es desconocido, está mejorando algo, lanzando algo nuevo,…), que sea funcional, agradable a la vista, con una identidad propia, y en el cual el contenido tiene el primer papel. Eso sin hablar de la rapidez de cargamento, y del SEO.

Para contestar a todas esas exigencias, decidí recurrir a las tabs para enseñar varias opciones de membresía disponibles en el Vorticer co-working. Solución idea para una uno page, además porque nada más hay 3 membresias, un número ideal para las tabs.

En fin, el desafío que me tomó 2 días en resolver, pero que guardaré de por vida en esta publicación, era de implementar eso sin instalar uno de las decenas de plugin que existen para ello. Mi solución es puro php y jQuery (UI).

Lo que me costo más trabajo ha sido aplicar el incremento de +1 a cada nuevo div panel del tab, aquí:
<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
sin que se incrementará el numero de excerpt de +1 (el problema que he tenido era que si el id era 2,  entonces el excerpt se visualizaba 2 veces,…) Eso porque ponía el incremento dentro del loop en vez de ponerlo al final como aquí:
<?php $panel_id++;
endwhile;

Les planteo la solución PHP aquí (todavía no integre el jQuery, tampoco el CSS)

 

El código PHP:

<?php if( !empty ( $page_array ) ) :
$count = 0; ?>
<div class=“team-content-wrapper clearfix”>
<div class=“tg-column-wrapper clearfix”>
<div id=“tabs”>

<!–La navegación tabs –>
<ul>
<?php while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();

if ( $count % 3 == 0 && $count > 1 ) { ?> <div class=“clearfix”></div> <?php }

$title_attribute = the_title_attribute( ‘echo=0’ ); ?>

<li>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );
?>

<?php
$output .= ’<a class=”team-name team-desc-wrapper” href=“#tabs-’ . $count . ’” title=“’ . $title_attribute . ’” alt =“’ . $title_attribute . ’”>’ . get_the_title() . ’</a></li>’ ;

echo $output;
$count++; ?>
<?php endwhile;

// Reset Post Data
wp_reset_query(); ?>
</ul>

<!– Los paneles de la navegación tab –>

<?php
$panel_id = 1;

while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post(); ?>

<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
<div class=“col-xs-4 col-sm-2”>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );

$output .= ’<p>’ . get_the_excerpt() . ’</p>’;
echo $output;
?>
</div>
</div>

<?php $panel_id++;
endwhile;
wp_reset_postdata();

// Reset Post Data
wp_reset_query();
?>

</div><!– #tab container –>
</div><!– .tg-column-wrapper –>
</div><!– .team-content-wrapper –>

<?php endif; ?>

You are welcome!

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>

Install Gulp for web designer

image

This is a step by step guide that summarize all the posts which helped me to achieve the tasks described bellow:

  1. Install Gulp 
  2. Install and set the webserver plugin, and how to run it (in order to use a lighter and more functional local server than MAMP —yes I work on Mac).

First you need to install node.js

For that just download the pack and follow the instructions. It’s really like installing any application. 

Once you´ve done that, open the Terminal. Some of you won’t know about that; Terminal is a little application native to Mac OS. Just search for Terminal in Spolight or go to Applications > Utilities > Terminal 

A window similar to this one will open.

image

At this point we just want to be sure that node has been correctly install, so we will type

image

and press enter. DO NOT type more spaces than the syntax indicates!

You should then see the version of Node.js. Mine is v4.3.0 :

image

Now install Gulp

In Terminal write

image

the sudo instruction is only valid on Mac. In windows only type npm install -g gulp and press Enter.

Let’s ensure that Gulp has been installed correctly by checking its version typing:

image

If you have something like that, let´s go one!

image

It’s possible that you encounter an error with the lodash version like:

image

I have one and tried to resolve it untill I’ve read that:

The package grunt-cli relies on a older version of lodash. It shouldn’t affect the functionality of grunt; it’s just a warning message.

So, you’re doing nothing wrong, it’s not an error message, just a warning, and the way you’ve installed grunt-cli should work fine.

And the point is that indeed, this error message doesn’t affect Gulp of running fine.


Now finish the installation by creating package.json and some Gulp modules

Until now we’ve installed Node.js and Gulp at the global nevel. What we need now is to install the rest of the files necessary to Gulp, but this time in a specific folder. Let’s say that the name of the website or app you are working on is “project”.

You need to target it from Terminal in order to install the package.json and the modules. Type: 

image

leave a space and drag & drop the “project” folder in Terminal. The path will write itself. You’ll have something like that:

image

Press Enter. Now that project is targeted, let’s call package.json by writing:

image

and press Enter.

You´ll see a list messages, list that:

image

Just ignore it by pressing Enter.

Now let’s install the modules.
We are already in the project folder so there’s no need to repeat the previous step. Just type in Terminal the following:

image

Now in our project file we have:

image

To finish the first part of this tutorial we need to create a file named gulpfile.js with the following line:

image
image

Then, to prepare the next step, the installation of plugins, lets create two empty folders app and dist

app will contain all the project in development. 
dist is the project processed and/or optimized.

In fact, in first instance I’ve installed Gulp because I want to create a local server (the second part of this tutorial), but Gulp allows to automatize a lot of operations like minimizing js or css files, compressing images, cache,..

Gulp has more that 2000 plugins that allows to save a lot of time.


Sources of this post:

https://travismaynard.com/writing/getting-started-with-gulp
https://la-cascade.io/gulp-pour-les-debutants/
http://www.alsacreations.com/tuto/lire/1686-introduction-a-gulp.html