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.
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.
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.
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.
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.
For SVGs i use open source software like GIMP (raster images) and Inkscape (vector images),
even though they are not the best image editors out there, they do the job quite well. You can find them on
Ubuntu Software.
This is information is really important, when you save an SVG from any vector editor they will come with a
lot of unnecessary information, making the SVG a bit heavy. You can clean it using a tool created by Jake Archibald.
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 codersblock.com came up with a nice dark theme.
You can read the article or you can download the CSS here.
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
Overlays
Search Bar
Since this is a static page i found a way to create a nice search bar on Geeksforgeeks. With some javascript, and clever use of classes, we can
search content on a unordered list and get to the desired content faster.
