Useful stuff

Since i've started coding i've realised that there's no way to get everything inside my head, nor the code, nor the tools i can use to help me work faster. So i've create this Technical Documentation Page to help me, or other people, to create front-end projects.

On the left there are four lists, tools, projects, articles and books. All of them are separated by colors to help the user experience. Green for the tools, yellow for tutorials and finaly red for books and references.

This is an ongoing project so i might make changes on the list to something more modern.


Code editor

This code editor, that is a little bit buggy, still is, in my opinion, the best free code editor right now.


Nice way to share your code and find very usefull information for the projects you are working on.

Facebook debugger

When we create images for social media we should use the Facebook debugger just to be sure the images are showing up correctly, when the user shares them.


Here's a list of frameworks that could be usefull.


Here are some minimal frameworks.


Although we can only use it in the browser (just in linux distros), Figma is a nice option to Adobe XD, which has no support for linux distros. Personally, after trying both, i prefer Figma, which is a bonus. See how it works here.


This is my favorite website for fonts. There are others like or but these i use them mainly for design.


This is where i store some of my projects. You can upload your websites for free using Github and Netlify. Watch a tutorial on how to do it here.


Git for linux. Manage your files from Github locally.

Grid layout

This is a nice way to layout your grid projects. It will give you the html, such as the css.

Html Rapid Tables

All HTML character codes of text fonts and symbols.


Some websites to optimize your images and a couple of others with free to use hi-res images. You can still use mogrify for linux to bulk edit your images.

Optimize images

Free to use hi-res images

For videos i use Lity.


Mogrify: for images

Mogrify is the software i use to bulk edit my images.

This is what i use for my personal projects. Use your own settings.

Run the comand line from the folder with the images.


sudo apt-get install imagemagick

the format you want is 'webp' and the target images you want to change is all the jpg *.jpg

mogrify -format webp *.jpg

create a folder on desktop with the name 'pic' or whatever to move the files you want

mv *.jpg ~/Desktop/pic



mogrify -format jpg *.png

mogrify -format jpg -quality 75 *.jpg

the 1024 is only for horizontal images

mogrify -resize 1024x768 *.jpg

Sizes for the blog content

mogrify -format jpg *.png

mogrify -format jpg -quality 50 *.jpg

mogrify -resize 700x2000 *.jpg


Use it with github and get your website online for free. See how here.


Nice way to make your website more compatible with all browsers.

Notify visitors to update

This is handy. There are some people that just don't know how to update their browsers, or don't want to. This notice will be shown if some of the code on the page is not compatible with their browser.

The other SVGs i'm using on this page where created by Freepik from

Screen Sizes

Deploy Websites with Netlify and Github.

So Brad from the channel Traversy Media is one of my favorite youtubers. Some of things that i've learned was from him.

On this video he will teach you how to set up and deploy your website for free using Github and Netlify.

But, if you are in a hurry, you can watch the second video from Topik Tech that shows you how to set up everything in 3 minutes. Enjoy.

Traversy Media

Deploy Websites In Seconds With Netlify

Topik Tech

Deploy a site in minutes with Netlify, Github and Freenom.

GitHub Gists: dark mode

GitHub Gists is a good way to share code but the white version might not be the best way to display the content. So came up with a nice dark theme.

You can read the article or you can download the CSS here.

See the Pen Customizing GitHub Gists: Monokai by Will Boyd (@lonekorean) on CodePen.

Learn Figma

Figma is a nice option to Adobe XD. It's web based and works fine with any linux distro.

Here is a tutorial with Ed teaching some basics in how the aplication works in a real project. If you just want to know how the tools work, watch the second video by Jesse Showalter. If you just want to know about overlays see the third video.

Dev ED

Jesse Showalter


Technical Documentation Page

For my Technical Documentation Page i took some inspiration from a pen created by Nemanja Djorovic, and then style it in my own way.

See the Pen Technical Documentation Page by Nemanja Djorovic (@DevTestCone) on CodePen.

Laws of Ux

This is a very useful website with the fundamental laws of User Experience.


This is where most of our questions are answered.