Beautiful Tools for Awesome Front-end Developers.

In my many hours of writing code and hanging around fellow developers, I realized that there are a bunch of tools that we use in our craft that make life easier. Some are just a matter of taste, familiarity and what area one is focusing on.

I focus on Backend Development but in the rare times I work on the front end bit I have these tools that come in handy(Chrome Browser tools). I bumped into most of them when peeking around a friends laptop.

There are other tools but the rest are just a matter of preference and what you are using them for.

The tools are in no specific order

1. Resize the browser window to emulate various screen resolutions. This is used to see how your site will look on different screen sizes. Check it out here —
2. Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web frameworks, server software, analytics tools and many more. I use these to keep track of the combinations of technologies that go into a site. Usually sites I find inspiring.
3. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any page on the web. It has audits for performance, accessibility, progressive web apps, and more. I use to see the performance of my projects, so far it has never failed me.
4. CSSViewer is a simple CSS properties viewer for all websites. I need not explain this.
5. The Web Developer extension adds a toolbar button to the browser with various web developer tools. This just adds an extra layer of functionality, let's call it chrome-dev-tools-on-steroids. You just need to use to understand
6. This extension inserts the Pesticide CSS into the current page, outlining each element to better see the placement on the page. Really awesome extension(did you notice my lack of words to describe it)

There are other tools but the rest are just a matter of preference and what you are using them for.