Welcome to my blog! My name is Alejandro del Río and I am an engineer & entrepreneur from Guadalajara, México. I write about technology, startups and code.

20b43aa
Wed Aug 24 21:05:27 2016 -0500
Add-article-stub
b257ad4
Sat Aug 27 23:32:40 2016 -0500
Genera-article-improvement
150bf84
Sun Sep 4 02:40:47 2016 -0500
Testing-JS-inside-the-article
a240382
Sun Sep 4 03:04:23 2016 -0500
Panel-test
192c228
Sun Sep 4 21:52:07 2016 -0500
Slugifier-on-keyup
73e2f30
Wed Sep 7 22:02:47 2016 -0500
Add-Android-slug
641ee08
Fri Sep 9 21:47:54 2016 -0500
Slug-testing
321eae4
Fri Sep 16 22:03:18 2016 -0500
Update-article
f5c30ac
Sun Sep 18 20:44:42 2016 -0500
Fix-slug-order
39840bb
Mon Sep 19 21:54:23 2016 -0500
Style-fixes
ebd219a
Thu Sep 22 21:50:43 2016 -0500
Add-snakecase-and-camelcase-fix-several-issues
501bfa0
Thu Sep 22 23:02:15 2016 -0500
Add-snakecase-and-camelcase-fix-several-issues
29cb9a4
Mon Oct 24 22:15:51 2016 -0500
Added-more-special-characters
e020867
Mon Oct 24 22:33:04 2016 -0500
Minor-fix-missing-parenthesis
425bd5a
Wed Oct 26 22:32:28 2016 -0500
Small-typo

eng 3 2014

Designers please slug-ify your files!

Designers often name their creations with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. There are several reasons why naming your images is a really bad idea, specially for web and mobile projects.

Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers please slug-ify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the programming department that will then, upload the resources to the website or Android/iOS app.

There are several reasons why naming your images like this is definitively a bad idea, especially for web and mobile projects.

Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the programming department that will then, upload the resources to the website or Android/iOS app.

abc

There are several reasons why naming your images like this is definitively a bad idea, especially for web and mobile projects.

Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the programming department that will then, upload the resources to the website or Android/iOS app.

Input:

output

There are several reasons why naming your images like this is definitively a bad idea, especially for web and mobile projects.

Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the software department that will then, try to use the resources in a website or Android/iOS app.

There are several reasons why naming your images like this is a bad idea, especially for web and mobile projects. Image resources with special characters create ugly web requests. On mobile development, it is not even possible to add resources with strange characters. The chances are that the programmers will end up changing all your file names, and this can be time consuming.

add the reasons why it is a bad idea here

Here is a small tool you can use to slugify your files:


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the software department that will then, try to use the resources in a website or Android/iOS app.

There are several reasons why naming your images like this is a bad idea, especially for web and mobile projects. Image resources with special characters create ugly web requests. On mobile development, it is not even possible to add resources with strange characters. The chances are that the programmers will end up changing all your file names, and this can be time consuming.

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your files:


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”. These naming conventions might be good to share the files withing the same design department; however, these assets need to be shared -most of the times- with the software department that will then, try to use the resources in a website or Android/iOS app.

There are several reasons why naming your images like this is a bad idea, especially for web and mobile projects. Image resources with special characters create ugly web requests. On mobile development, it is not even possible to add resources with strange characters. The chances are that the programmers will end up changing all your file names, and this can be time consuming.

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file names:


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Background & Color Palette for XYZ!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9 and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Background & Color Palette for XYZ!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify

Pretty slug (good for website assets in general)

Android images (a restrictive pattern for Android mobile app resources)

RFC3986 slug (the URI generic syntax, see more at the incredibly ugly Internet Engineering Task Force page


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Background & Color Palette for XYZ!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify

Pretty slug (good for website assets in general)

Android images (a restrictive pattern for Android mobile app resources)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page)


Es muy com�n encontrar dise�adores que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Background & Color Palette for XYZ!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify


Pretty slug (good for website assets in general)

Lowercase Snake case (for Android image resources)

Standard Camel case (think about iPhone, macOS, eCommerce)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page

Until next time!


testing letters

`ÄËÖ aéáéíó ûûiô

Es muy común encontrar diseñeres que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Background & Color Palette for XYZ!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify


Pretty slug (good for website assets in general)

Lowercase Snake case (for Android image resources)

Standard Camel case (think about iPhone, macOS, eCommerce)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page


Until next time!


testing letters

`ÄËÖ aéáéíó ûûiô

Es muy común encontrar diseñeres que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " ". It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like �!"�$%&/()=?� if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Coffeé & Color Palette for Über!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify


Pretty slug (good for website assets in general)

Lowercase Snake case (for Android image resources)

Standard Camel case (think about iPhone, macOS, eCommerce)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page


Until next time!


testing letters

`ÄËÖ aéáéíó ûûiô

Es muy común encontrar diseñeres que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " “. It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like ª!”·$%&/()=?¿ if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Coffeé & Color Palette for Über!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify


Pretty slug (good for website assets in general)

Lowercase Snake case (for Android image resources)

Standard Camel case (think about iPhone, macOS, eCommerce)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page)


Until next time!


testing letters

`ÄËÖ aéáéíó ûûiô

Es muy común encontrar diseñeres que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " “. It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like ª!”·$%&/()=?¿ if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t

eng 3 2014

Designers: Please slugify your files!

It is very common for designers to name their files with spaces and special characters like “Left Arrow (6)” or “Coffeé & Color Palette for Über!”. These names are OK if you are only planning to share these files within the design department. However, most of the times, these assets are required by de software & mobile department, who will then build a website or mobile app.

There are several reasons why naming your images with special characters and spaces is a bad idea, especially for mobile projects. Image resources with special characters create ugly-looking web requests and for mobile development -especially Android- file names are restricted to only alphanumerics (a-z, 0-9, . and _).

add the reasons why it is a bad idea here todo: implement http://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html input label with .com

Here is a small tool you can use to slugify your file and folder names. Use it to save some time to your software development team. It will also help you having a cleaner and better organized computer desk.

String to slugify


Pretty slug (good for website assets in general)

Lowercase Snake case (for Android image resources)

Standard Camel case (think about iPhone, macOS, eCommerce)

RFC3986 slug (the URI generic syntax, learn more at the incredibly ugly Internet Engineering Task Force page)


Until next time!


testing letters

`ÄËÖ aéáéíó ûûiô

Es muy común encontrar diseñeres que nombran las imagenes con textos como “Flecha arriba.png” o “Flecha abajo.jpg”, lo cual genera trabajo extra para los programadores que tienen que “slug-ificar” los nombres para que puedan ser usados en el proyecto web o movil.

TLDR: if you don’t want to read the reasons why naming images like this is a bad idea then just type the name of the image you are about to send your programmer and rename it with the output, use the app shown below this pretends to be a small piece of advice to designers: please slugify your image names! slugify or to slug means to make the name programmer friendly, usually designers tend to name their images with names like “Left Arrow (6)” or “Background & Color Palette for XYZ”, there are many reasons why these names are not good names, these are: -spaces are not program friendly: yes, computer programs and this mistyrious blank space " " are not friends, in fact computers actually have no trouble with this space, afterall everything is a number for the computer, however not allowing spaces on filenames is wise, otherwise you could create two images, one called " " and the other one called " “. It is normally safe to replace all spaces with the character “-”. -names must be in lowercase: the image “ICON.png” and “icon.png” are two different images for most of the operating systems out there, to prevent that many coding conventions requiere that your images must be in lowercase -special characters may cause issues: it is a bad idea to name images with special characters like ª!”·$%&/()=?¿ if you do so you can break a working program, these caracters are sometimes used as an indication to perform other actions, for example the character & and ? is used in WWW to send parameters to the server (i.e. www.example.com/?where=here&date=today) also, as a last but not least, bear in mind that names should be descriptive, instead of naming a set of images like “UP Arrow.png”, “DOWN Arrow.png” name them “arrow-up.png” and “arrow-down.png”, this way all arrows will be next to each other when browsing the assets folder.

designers: here is a small app that helps you naming images, just type the name of your image you want to convert and it will be slugified.

mayn times I have seen that designers tend to use names that don’t