Tools

1
Web Developer Tools Part 3

Welcome to part 3 of useful tools for developers! This week we have a couple of useful tools, plus a bonus useful tool/funny/entertaining tool to help you get through boring online news reading.

As with most all of the development tools I post up in these articles, I have tried these first hand and love them. They all come in handy and make life easier for us developers.

Ajaxload

Ajaxload is a simple and easy tool to help you quickly create a animated loading icon GIF. This is a great tool that I’ve used many times and it’s especially helpful for those web projects you have that involve AJAX and have load time. You can pick from many different load icon styles from the drop-down, select background color & foreground color and quickly generate it.

AJAX Load icon maker

Downworthy

Tired of reading the same old headlines in news stories and blog posts? Spice them up a bit and read them for what they really mean with Downworthy. Downworthy is a browser plugin that turns hyperbolic viral headlines into funny, truthful, headlines.

For example: “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Awesome…Whoa.” turns into “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Probably Slightly Less Boring than Working…Whoa.”

Although it’s not exactly a web developer tool, it’s something than can come in handy and make you laugh when reading blog posts.

Downworthy Browser Plugin for Headlines

px-em

Another tool that comes in handy, px-em does just what you think it does, converts pixels to em’s. You just type in your parent font size in pixels and the font size you want, then it converts it to the proper em size. It’s a super useful and super easy tool that can save you the time of doing math and using a calculator while developing.

px-em conversion tool

0
Useful Tools for Developers #2

Welcome to the second edition of useful tools for developers. Something we all need, whether we are developers, designers, or whatever, are tools to help make our jobs seamless and quicker. These articles are aimed to help you do just that.

These tools I post are either ones I use, have tried, or have been backed by other developers as great tools to help with our jobs. So without further ado, here is part two of useful tools for developers.

Tailor

Tailor is an experimental code editor for Chrome. Its main features include the ability to edit your code offline, it supports Git, and has auto complete for CSS, HTML, and Javascript.

Tailor Code Editor for Chrome

Custom Google Maps

Just as the title suggests, this website by Donald Sutherland lets you easily build a custom Google Map. You can change the size, lat & long, where markers are placed, zoom level, controls, map type, and map theme.

Custom Google Maps Builder

Entity Conversion Calculator

This is a handy tool for converting entities, like the copyright symbol as you see below, into the proper code for CSS, JS, and HTML. Simply paste whichever code you have into the correct slot and click convert. This converter will convert that code into the other proper formats of code.

Entity Conversion Calculator

0
Useful tools for developers part one

Being a front-end web developer myself, it’s always helpful finding new tools to help make developing easier and more efficient. That being said, below is part one of useful tools for developers. All of the tools I will post in these articles will in some way be beneficial to developers.

If you have any suggestions for great developer tools that you yourself use to help with the process of developing, please feel free to comment them below and I’ll take a look at them. If I find them useful I will post them up in a future article.

Scribe

Have you ever been browsing on your iPhone or iPad and come across something you need to copy and paste to your Mac, but you’re forced to copy-paste-email it to yourself instead? Now you don’t have to waste all that time, scribe lets you copy and paste between your Mac and Apple iOS devices.

Scribe Apple App

Web Safe Colors

I know I just posted about this, but it’s a handy website. Web Safe Colors displays all 216 web safe colors in a grid format and displays the RGB, HEX, and HSL color codes in an easy copy format as needed for CSS.

Web Safe Colors by Zac Knoblauch

ColorZilla

ColorZilla is a very useful Chrome web browser add on that lets you pick colors right off of a web page with a color dropper. This comes in handy when you see a color you like on another site, or even on an image or logo from a website.

Once you click the dropper on the color you want it gives you the RGB and HEX color codes to copy. This cool add on even has a CSS3 gradient generator!

ColorZilla Chrome Add On

Ruul

Ruul is an on screen ruler and a great tool for developers. I use this (along with ColorZilla) on a daily basis. You have a short 560px ruler and a longer 1100px ruler to choose from in many different transparent colors. This comes in handy for quick measurements needed while developing on a website.

Ruul Chrome Add On

Adobe Edge Inspect

Adobe has been kicking ass lately as far as tools for web development go, and Edge Inspect is proof. I recently downloaded Edge Inspect to give it a shot and I have to say, I am impressed and I use it for my responsive website projects.

Adobe Edge Inspect allows you to test any website on multiple devices and inspect the code for each of those devices. Simply download the free Edge Inspect app for your Android or iOS device and download the add on for Chrome. Turn it on and start inspecting, change code and watch it change live on your device. This makes editing code and testing on mobile devices smooth and easy right from your desktop computer. I suggest you take a few minutes and head to Adobe to learn more about this awesome tool.

Adobe Edge Inspect

2
Web Safe Colors

Out of no other reason but pure boredom (and for fun), I created a little website to showcase all of the web safe colors. I actually started this project years ago when I first got into web development, but in my amateur-ness (is that a word?) I was using images to showcase the different colors (not sure what I was thinking).

Fast forward to a few months ago, I decided to finish this project with one goal in mind, make it super simple. I think I accomplished that goal as the site has only the bare essentials to serve its purpose, plus it only weighs 70kb.

Anyways, the site showcases the 216 web safe colors in a grid pattern. When you hover over each color it displays the RGB, HEX, and HSL color codes for that color. Why those color codes? Well because those are color codes used in CSS for the web :) I hope this site becomes of some use for those of you in search of web safe colors and I tried to make as user friendly as possible so enjoy!

Web Safe Colors

Web Safe Colors by Zac Knoblauch

Web Safe Colors by Zac Knoblauch

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods