My Favorite Web Development Tools

Tools in this essay, “my favorite web development tools”, refer to applications I use when programming web apps or web pages. I tried to include a wide variety of tool types but most of these are application or websites I use for a variety of reasons. That means this list is like my favorite and most used tools that i keep in my digital “tool-box”.

Disclaimer: Before reading this please take into consideration that many of the applications I have chosen as “my favorite tools” may NOT be the best tool of its kind available. If you were hoping to get a comparison breakdown between my favorite tools and their competitors please return in the future! I plan on writing such prose.

Nonetheless, I have included some resource links that will help you to gain a better understanding on what alternative web development application are publicly available.


The following list is not in order from most to least favorite.

Notepad++ (text editor)

Notepad++ is my preferred text editor!

In college I used to use Adobes Dreamweaver for web development but in my first role out of school I was reintroduced to Notepad++ and have never enjoyed using any other text editor as much. The biggest reason I prefer Notepad++ is I love how the “find and replace” feature works. I love how this feature has a window that pops and how comfortable using RegEx (Regular expressions) is in it. It also comes with a feature that can find and replace across multiple files at the same time.

The drawback to Notepad++ is that It does not work with the Mac operation system or Linux .

Read “Best Text Editors in 2020” by Techradar for a proper comparison of the available text editors.

CodePen.io

CodePen is a site I use as my sandbox environment to test out my undeveloped ideas or to search for new ideas. It has a great collection of works by other developers. When ever I have a new project to work on I will first browse through Codepen.io for ideas. That makes it a dual purpose site, part sandbox, part developer social media site.

For a list of online IDE () check out this article on codeinwp and this article on hongkiat blog.

StackBlitz is another tool similar to Codpen that is also nice to use as a sandbox. It also comes with a feature that integrates with Github. Also there is codesandbox.io and more.

W3schools.com

W3schools.com is my web development dictionary of sorts. If I forget a function in a programming language or a value needed for CSS styling I check W3Scools. Over the years as my skills has grown this site has grown as well. It no longer just include information on HTML, CSS and JavaScript but includes several other programming languages and frameworks too. Things such as Angularjs, python, C#, and even a color wheel for reference.

The best part about W3schools is the information is concise making it very easy to navigate through. This makes looking up functions or syntax easier. I typically first look for what I am looking for here than go to other resources to gather more detailed information.

Beautifier.io

Cleaning up code that is either my own or others is made much easier with Beaurifier.IO. I typically use this to study another developers code when looking for a solution for a programming problem I have. Every developer has their own style of coding and this makes it easy to have a consistent view of code I am reading through.

  • JsonLint is a similar tool I use to read Json .
  • and minfier.org is what i user to minify my files for speed.

Font Awesome

Font awesome is not only my favorite icon library but it maybe the best and most popular icon library on the market. I use the icons on here on my projects or look here for inspiration when creating custom icons. The best thing about this library is you can download some of the icons as SVG files to use or customize.

GoogleFonts

Google fonts is a must for any web designer. It is free, easy to use and has a “large enough” library of fonts to use. One the best benefit of Google fonts is its popularity has encourage many designers to write articles on advice using web fonts. Another great thing about Googlefonts is it has alot information on most of the fonts available.

Typography used to be one of my weakness in design. GoogleFonts has helped me tremendously to improve in this area. So although there are great alternatives to google fonts, such as Adobe Fonts, it has remained dear to me as a designer. It reminds of a time when I was intimidated by typography.

Check out this article by Andrew Follett on Smashingmagazine.com about hosting web fonts and alternative font libraries available.

type-scale

As I mentioned earlier typography was a weakness of mines. Type-scale helped with that. I explore different heading scales here almost every time before implementing them on a website i design.

A healthy alternative to this tool is modular scale.

Bone/skeleton css

Skeleton.CSS is my favorite responsive framework because it is light weight. With only “400 lines of code”. This css framework includes just what you need for responsive web development. Although it is small it still includes nice designed default styles for the common html tags and also includes helper classes for common uses in web design. Customizing this framework is easy on account it excludes most of the extra classes and styles that other frameworks include.

For other responsive frameworks available include the following.

For a better evaluation of responsive frameworks check out this great article on awwwards.com

Sass

Sass was the first css compiler I ever learned. LESS was the second. Although I do not think one works better than the other I prefer styling in SASS just out of habit. The web designer in me has been thinking and speaks in SASS for almost a decade now.

Browsers have improve over the years to fill in the gaps between CSS and compilers such as SASS and LESS but I think css still falls short in ease of use , and functionality, in comparison to these compilers.

jQuery

With the world of JavaScript frameworks growing everyday I still enjoy the simplicity and ease of use of JQuery. Although it is no longer the most useful of frameworks for javaScript developers Jquery will always remain #1 in my heart for one simple reason. jQuery showed me how useful JavaScript is.

I was introduced to web development by creating Myspace profiles in high school . Back then I never saw a reason to either use or master Javascript. I thought, naively so, that all I truly needed to understand was HTML and CSS to create all the web pages I desired.

Once introduced to jQuery I fell in love with it . In a weird way I became a master at jQuery before I fully had an understanding of how to use pure JavaScript. Since then I have taken the time to explore a wide variety of other JS frameworks and jQuery has remained #1 in my book.

Some other JS Frameworkds include

I must admit VueJs is starting to grow on me. Right now it is my 2nd favorite JS framework. Smashing magazine has a great article titled “replace Jquery with Vuejs” by Sarah Drasner that explains how to transition over from Jquery to VueJs.

Postgres

I prefer Postgres over other relational Databases for 3 reasons.

  1. I am most familiar with it
  2. It has a great GUI to work with
  3. It has an elephant for its logo, my favorite animal.

There are plenty of other Databases I use such as

But when developing on personal projects Postgres is my go to because it is what I have the most experience in. For more information on the available relational databases available today you should read PcMag best cloud DBs for 2020

Smashing Magazine

I love Smashing Magazine! It feels like a well composed forum of creatives, programmers and technology professional. It is personable and filled with character. You can find almost any topic you are looking for on there so I start all my web development research there.

“Over 12 years, we’ve published 3443 articles, written by 1477 hard-working authors. Still counting. “

Smashing Magazine

In conclusion

I know there will be many other developers who read this and most likely not agree that these tools are their favorite but I hope this gave you some incite on the type of web developer I am, for better or for worse.

Written by 

The Armani.

Featured Posts

Leave a Reply