Resources for Web Developers A to Z
Jun 10th, 2019
In this section as a React Full Stack Developer and Freelance Developer I outline some great useful resources I use on a day to day basis. I will also outline some other useful links A-Z that most developers probably already know about, but might have forgotten about. Here is some of the resources I use day to day in no particular order. All of these resources listed below are free or open source or have a great free tier option you can use.
For my Front End Framework:
For Styling (CSS/SASS or SCSS)
I use SCSS, though I think Sass is an equally great option. They are in fact one and the same, but the syntax of how you write your styles is slightly different. The benefit of using Sass or SCSS is that you can structure your styling in a clean modular way, reduce the amount of code you have to write and create variables and calculations for your styles. In the end it all gets compiled to css and because of how easy it is to include in a modern application there is no really good reason not to use it.
Font Awesome: Yes Font Awesome is for icons and not fonts and I "font" that rather ironic. And just to make things extra confusing, for React, the npm package is Fort Awesome. Besides that, font awesome is great package for Icons.
Google Fonts: Now that icons are covered with Font Awesome, the best place imho for fonts is is none other than Google Fonts. When you select your desired specimen make sure to check the load speed. Anything fast or moderate should be fine. It is typically nice to have two fonts, a primary and secondary font that compliment each other.
For UI Front End Frameworks:
Depends: Being able to build your own CSS frameworks is a great skill to have. CSS flexbox and CSS grids are great tools to help developers achieve a flexible, responsive and customized framework. However, this is not always a viable option and it really depends on the project you are working on. If you are looking to get up something quick tap into Material UI or Bootstrap for a opinionated UI framework or Skeleton for a responsive css boilerplate. If you are looking for a theme then this site has got you covered.
For Image Compression:
Tiny PNG: Images are resource intensive, yet optimizing them is sometimes an afterthought for some developers. If your images or loading slowly than they are too large. In my opinion most images should be kept well under 1 mb for most sites. With Tiny PNG I am constantly reducing my images sizes by 70% or more and reducing page load times while keeping the quality of the image the virtually the same.
Favicons are those little icons at the tabs of your site. They are small but important change especially for SEO.
LunaPic since we are talking about free resources. Sure it is not Adobe Photoshop but it gets the job done especially if you are not looking to pay Adobe subscription prices and do not photoshop too often. While it may look like a site from the 90's it has a ton of cool features such as blending two images and rotating them into the page.
PiktoChart is an easy to use infographic site for creating presentations, visuals and prints.
For getting and using images on your site that are free and don't require attribution, pixabay and unsplash are absolutely invaluable and unrivaled resources. Unsplash has larger, higher quality and often unique images that I typically use for landing pages but only after I optimize them via Tiny PNG. Pixabay on the other hand has images and pictures of all sorts, shapes and sizes.
For Content Management.
Contentful Is a content management system that lets you create content models and manage your blog site. I am still experimenting with this, but so far it has been a great tool and the best I have seen on the web even though editing with it can still be a bit of a pain