General

8 Essential Web Developement Tools — 8 Essential Web Development Tools

#1 TextExpander (Monthly Fee)

I’ve been on an eternal search for a program that would allow me to store text snippets that could print from a right click of my mouse. I was lucky to find TextExpander as a better solution. This software does the same thing but with keystrokes. This software is valuable for the automatic creation of the text that you type regularly. I use it every day all day.

A Typical Example of Use.

When setting up a new site, you need to attach a domain to it. I prefer to see a “Coming Soon” HTML document when the domain resolves to the new hosting account. I have prepared a clean index.html document with a title that reads “Coming Soon” This page includes a JavaScript date creator that shows the current date.
When I visit the domain, and I see this page, it confirms that the new domain has resolved successfully.

TextExpander allows me to create this index.html file in seconds. All I have to do is type in “xcomingsoon,” and the code for the page is inserted.

TextExpander is also useful for HTML syntax and CSS. Adding snippets to the program which will increase your work speed in a big way.

Examples:

xmargin2 = margin: 0px 0px;
xmargin4 = margin 0px 0px 0px 0px;
xdivwide = <div style=”width: 100% background-color: #efefef;”>CONTENT</div>

And it goes on and on and on.

Get TextExpander

#2 Brackets (Free)

This free software is the best text editor available. I use this program daily for editing CSS. You can always judge the popularity of software by the number of extensions that are available. Brackets list of extensions is in the hundreds and maybe the thousands so they must be doing something right. This software is lightweight, free and easy to use.

Get Brackets (FREE)

#4 Listify (online tool 100% Free)

Listify is an online tool that converts text lists into HTML lists automatically. Placing <li> and </li> after each line can be very tedious, and this website does it for you. Just drop your list in the field select what type of list you want (ordered or unordered) and BOOM the list is generated for you. It’s a great time saver especially when the list is massive.

#5 TinyPNG (online tool 100% Free)

As I’m sure, your aware PNG24 create graphics with transparent backgrounds that work seamlessly on any background color. The problem is that Photoshop creates PNG24s that slow loading due to their size.

I always wondered how designers were able to make such small PNGs? When I stumbled on TinyPNG realized how they did it. The free online software allows you to upload your PNG24 (similar to a transparent GIF) and compress them at almost %50. This software is a lifesaver for me.

TinyPing (Free)

#6 Ultimate CSS Gradient Generator (online tool 100% Free)

Scratch building the correct color gradients in CSS would be insane. It’s one of those things that is best handled by a third party. My goto gradient maker is via a website. The site is called the Ultimate CSS Gradient Generator. It’s an easy to use website that will create compatible gradients for your divs. Doing this manually would be insane.

Ultimate CSS Gradient Generator (FREE)

#7 Uptime Robot (Online tool 100% Free)

There’s nothing worse than getting a call from your client telling you that the site is down. Using Uptime Robot means that you get notified first. This online software you a heads up on the on the issue so you can fix it fast or give you the option to call the owner of the site to tell them what’s going on. The online site monitoring company is 100% free.

GEt UpTime Robot (FREE)

#8 DesktopServer

This software creates a virtual server on your computer so you can install WordPress on your computer. It’s a Mamp replacement. What’s super great about it is that you can quickly install a WordPress site from a Duplicator instance on your C: drive.

Why DesktopServer is Epic

Let’s say you have been approached to set up a WordPress website. Typically you would install a blank instance of WordPress then tweak it and install plugins before even starting the design. The solution is to set up an entirely prepped WordPress site with all the plugin and then create a Duplicator archive. This software is what you use to create a new website on your local computer. It creates a local server environment. DesktopServer saves an enormous amount of time.

Another nice aspect of DesktopServer is that you can quickly install from backup (Duplicator Archive) to check on site elements you need to troubleshoot offline. In other words, if you have a few Duplicator backup stored on your computer you can use these to troubleshoot problems on your computer instead of fixing them on the live site. It’s fantastic and saves you from the headaches of crashing the live site while troubleshooting issues.

Get DesktopServer

88 Key Custom Keypad Controller For OBS Studio For only $10

HIDMacro Extra Help: Supported modifiers for keystroke sequences

8 Essential Web Development Tools for Front-End Development