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.
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 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.
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.