Víctor Dieppa Garriga

Alias de GIT que debes usar

Mon, 27 Mar 2023 12:00:00 +0000

Git es el software de control de versiones más usado en el mundo. Cada día, millones de desarrolladores lo usan, escribiendo cientos de comandos.

¿No estás cansado de escribir complejos comandos para hacer cosas tan sencillas como cambiar a la rama “master”?

La solución, Alias, aquí te dejo una lista de los que necesito cada día:

git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
git config --global alias.se '!git rev-list --all | xargs git grep -F'
git config --global alias.gl 'config --global -l'

Eliminar render-blocking resources en Google Fonts

Wed, 21 Oct 2020 12:00:00 +0000

Usar Google fonts es la forma más sencilla de añadir preciosas fuentes de estilo en tú página web, pero en detrimento de velocidad de carga.

Usando la herramienta Lighthouse de Google podrás descubrir que el CSS usado por para las fuentes es marcado como render-blocking.

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Alterando el <link> un poco, podremos pre-cargar y eliminar el bloqueo:

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" type="text/css"/>
</noscript>

Son solo 3 cambios:

Hemos añadido rel="preload" y as="style" a nuestro código para que la fuente sea cargada antes de su uso.
Hemos usado el atributo onload para restaurar la definición rel="stylesheet".
Hemos añadido <noscript> en caso que en navegador no haga uso de JavaScript.

Quiero dar las gracias a Claudiu por publicar una nueva versión de esta solución ideada por Lucas Vazquez y aquí publicada.

Using fonts for icons on your website

Fri, 31 Jan 2014 12:00:00 +0000

Web fonts are increasingly a popular way to add icons to your website. This blog post covers using fonts for icons on your website.

Icons are great visual aids. Well-chosen icons can make your site or web application more engaging and easier to navigate.

How to add icons to your website

In the past, icons have been implemented in two ways:

Individual graphics. This has the downside of requiring a new HTTP request per icon – the more icons you have, the greater the problem.
Sprites. You place all the icons in a single image – known as a sprite sheet – then use CSS to render a part of that image.

There’s no doubt that sprites are great – you can store icons, buttons and other UI elements – but what happens when you need to change the design? And what about high resolution devices?

There’s a new approach: turning your icon graphics into a font, and letting CSS take care of the rest.

Advantages of using web fonts

The icons are vectors, so can be used at any size! Great for responsive design and high PPI screens (iPhones, iPads, Nexus, etc.)
No need to break out Photoshop – add shadows and gradients with CSS.
Smaller file size than raster images, so your site loads faster! Even the slightest increase in speed is good for SEO, too.

Disadvantages of using web fonts

The CSS methods used to implement these icons – font-face, :before and :after – are not fully supported on all mobile browsers.
You can only display icons in monochrome, but if you keep reading we’ll show you that they can stand out.

Your next step

If you already have SVG graphics and want to generate a font from them, read on – we’ve created a list of services that can help. They all have a selection of icons to choose from, too.

If you’d rather hit the ground running with a fresh set of icons, skip on to our section on Font Awesome. We’ve put their icons to use with live examples!

Iconvault

You can create a custom font set with a selection of ready-made icons or upload your own vectors. It will create all the necessary files (woff, ttf, eot and svg) for you.

It’s a complete online service, just visit the Iconvault website to start making icon sets.

Fontello

This is a very complete online service. Choose your set from a vast collection of icons, edit their names and even their codes.

It will generate the font set, all the necessary CSS and a demo page for you to use as a reference.

IcoMoon

Create font-face sets from a selection of available icon sets or import your own vectors. This is a freemium service with extra features such as CDN storage and cloud syncing

Visit their website to review the icon packs and services plans.

Font Awesome

Go to Font Aswesome’s website and visit the ‘get started’ page and choose how to implement the font. The easiest way is use their CDN to store the font, you only need to include the link on the head of your HTML:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

In the past few years social networking has become an important tool, in consequence most of the websites include links to their pages in the most popular networks.

Font Awesome contains icons for almost every social network out there.

In this example we show you how quickly you can change the feel and look of these icons with just a couple of lines of CSS code.

Using web fonts to add icons to buttons

Action buttons can be more easy to understood if they contain icons. You can even replace the text with just the icon for actions like edit or delete.

Adding icons to menus

You can use web fonts to make menus more attractive with icons. Each icon could represent a sections or action.

These are just a few examples of the many uses for Font Awesome.

More information and credits

You can fork these examples on Github

This article was written for Lightflows Creative agency and you can read it here