Web Developer Toolbox

Development Web Development
1

This thread will be a collection of useful links/programs/etc that are in some way useful to those of us in the web development/design fields. Try to include a short summary or description of whatever tool it is you are posting, how it fits into your workflow, or anything else that might be of help. Who knows maybe this will have a sticky someday. Ill try to start off with a few of my favorite tools:

Emmet - http://emmet.io/ 

Plugin available for a lot of text editors that allows you to write shorthand code, then hit a key and expand it all out into perfectly spaced html like so http://prntscr.com/3j1nte It has a pretty steep learning curve, but once mastered makes you look like a wizard as you type one line of very long gibberish that expands out to a full html page. It took me almost 3 weeks of constant use before it started making me faster instead of slower. Take this, its dangerous to go alone - http://docs.emmet.io/cheat-sheet/

Lightshot - https://app.prntscr.com/en/index.html

Screenshot utility that auto uploads screenshots to prntscr.com (uses imgur) and gives you a link to it for sharing. Great for pointing out stuff rather than typing. Gives you some basic edit options before you upload, crop, text, arrows, etc. Very handy. Looks like this http://prntscr.com/52ufde

Renamer - http://www.den4b.com/?x=products&product=renamer

Rapid and easy renaming of multiple files/directories. Extremely powerful, tons of options for stripping/adding/replacing characters, accepts regular expressions if you have somthing really complex to do, and just all around a badass program to have. Got a massive collection of photos that need to go into a gallery? Hate the messy file names that come off the cameras? Solves all that.

Hex to RGBA - http://hex2rgba.devoth.com/

Just like it sounds. Converter for hex colors to RGB and RGBA with a quick copy button. I'm sure there are others but this is the one I like. Plain and simple to use. 

DNS Propagation Checker - https://www.whatsmydns.net/

Useful for checking whether or not your most recent DNS change has propagated out to some of the big DNS servers. 

DNS Health Checker - http://www.intodns.com/

Useful for diagnosing more evasive and annoying DNS issues with your sites. Best to just run it against your site for a better explanation of what it does.

Dreamweaver Password Decoder - https://www.supersneaky.ninja/tools/dreamweaver.php

Note: This is just an example of the of the tiny javascript function needed to decode the password hash found in Dreamweaver's STE files. Simply open an STE file, look for the pw="blah" and put blah into the decoder. If you wanna use this though, I suggest hosting it yourself! Pasting your FTP passwords into random sites on the internet is unhealthy. (That's my site, I promise not to harvest your passwords)

Website Copier - http://www.httrack.com/

Exactly what is sounds like. A program that goes to a site, follows all the links, and downloads all the assets. Useful when you have to migrate a site in a hurry, because a client pissed off the previous developer, and they are going to wipe the site off of their servers and a traditional migration is not possible. I may or may not know these things from experience.

Google Fonts - http://www.google.com/fonts 

If you didn't know about these already, then you should. Because free fonts are good fonts, and good fonts are better than Comic Sans.

Privacy Policy Generator - http://www.generateprivacypolicy.com/

There are tons of these out there for ToS, privacy policy, refund policies, etc. Generally involve a short questionnaire and poof, copy paste your policy. Useful for el cheapo clients who can't/won't have someone write them a custom one. Obviously, after you generate it, you should read it and the client should read it to make sure everything fits.

I'm just going to breeze through the next few since they shouldn't need much explaining. 

JSON Formatter/Validator - http://jsonformatter.curiousconcept.com/

Minify JS, CSS, HTML - http://compressmycode.com/

Unminify JS, CSS, HTML - http://unminify.com/

W3C Link Checker - http://validator.w3.org/checklink

Checks your site for broken links. Check out the other W3C tools as well, all handy stuff.

XML Sitemap Generator - https://www.xml-sitemaps.com/

Generates an XML sitemap (go figure). Pretty useful, this ones limited to 500 pages, maybe others that are not. 

That's all I've got for now! Hopefully someone finds some of this stuff useful. Post up any  tools you guys use.

 

 

3 Likes
2

komodo —the "edit" version is free (speech+beer) and more than awesome enough for most programming.  The IDE is even cooler, but it's a bit pricey.

I've used komodo for years now, but I'm going to be trying PHPStorm for my next project.  Heard nice things.

git —you've never coded until you're no longer worried about breaking things.

sass —turns css into a real programming language.

uhh… that's it

well, plus linux and a nifty little deal called a terminal.  That's where git and sass work best, plus stuff like ssh(fs), etc..

and browsers. browsers are good for web dev. and microsoft's IE VMs.

3

For managing servers nothing beats a unix terminal.  OSX and any linux distro work about the same for this.  Unix-based operating systems also tend to have better GUI-based apps for remote work as well.

Notepad2 is the best lightweight editor I've found.  Most IDEs have some sort of HTML support, but

Cloud9 is probably the best IDE I've used for web stuff. It also has the benefit of being browser based, so you can access it from anywhere.  If you don't like the whole "cloud" thing you can install a copy of it on your local machine

Sublime Text is a nice cross between IDE and editor, but it's not free

I'll second SASS, very handy for styling.

paletton.com is good to generate ideas if you can't come up with a color scheme

I'll edit it if I can think of anything else.

4

pingdom for testing speed and downtime.

Although you can do this on your own, they provide a service that check every 1 minutes for downtime/uptime.

feedthebot a handy little website outlining some google guidelines, and speed tests.

Forms allows you to integrate otherwise dynamic content into your static website.

Charts lets you display simple (or complicated) charts into your webpage without the need of js.

Data allows you to display google spreadsheet data on your website.

Jekyll a static web site generator, very simple to use and extremely powerful. (You can create blogs with this!).

css-tricks great site for css tricks (hence the title.)

The Sass Way is a great site to learn SASS. Seeing how Demagolka and -traq already linked SASS I will not link it again.

Butterick's Practical Typography probably one of the best books to find online. Yes, it's a book, on the web, as they should be.

"The Bomb in the Garden" article by Matthew Butterick, is a must read.

"The Shape of Design" another great article by Frank Chimero.

Prepros or Codekit a tool to compile less, jade, sass, haml and a bunch more

sassdoc creates a documentation page - sass - using your source folder.

1 Like
5

AngularJS / EmberJS - Javascript framework dedicated to single page applications

Bower - Twitter built this to make managing packages far easier for your project.

grunt / Gulp - Task managers for ruby which make repetitive tasks such as minifying and compiling quicker.

PHPStorm - Fantastic Ide dedicated to coding in web development scenarios.

Filezilla - FTP solution

laravel - php framework

Laracasts - Great resource for learning not only laravel but advanced php techniques.

GitHub - Opensource version control system

Flexslider - Awesome slider use it all the time it's responsive too :)

HeidiSQL - Manages SQL databases.

Wordpress - Started out as a bloging platform has now evolved into a fully pleged CMS has a Huge community which is always a plus.

Jquery - Frontend javascript libary

Visual Studio - IDE from Microsoft used for all sorts of code related projects.

This is just a few of the things I use day to day hope it helps..

6

Atom - Open Source editor on par with SublimeText made by Github

Git Howto - Pretty decent introductory on how to work with git.

7

Mixture - free local server program that also complies my SASS for windows
Color highlighter - a sublime text plugin that shows the color of a rgb, rgba. hex and so on
Bracket highlighter . a sublime text plugin that shows were the corresponding bracket is ([], (), {}, "", '', )
flatuicolors.com - a good place to get place holder colors
and speaking of place holder Lorem ipsum

oh and
bourbon a mixin for sass with some nifty stuff
w3schools a good place to validate and see what stuff dose

8

http://caniuse.com/

This website tells you which (browser) technology is available in which version of different browser.
Must have!

9

Had this one in my bookmarks so I thought I'd throw it out there, I don't actually use it though:

  • koding - cloud-based VMs for development

If you're into node, there's webpack as well.

Since people are suggesting frameworks/libraries, I'll go ahead and throw ReactJS into the ring.

11

Amazing information. I really enjoyed this thread and discussions of the people.

12

Lets revive this a bit

FontAwesome

Largest icon collection ever (or at least without looking like crap), hast multiple styles and variants of each icon. Can be used as local font, web font or standalone svg icons - you can copy paste svg code directly from website.

  • Free version - if you dont need supercustom icons, this will be fine
  • Pro version (99$/y for 5 devs). If you cancel you still have licence for the version you paid for
  • Can be hosted on their CDN or locally
  • Even have desktop app to make custom icon sets (generates local font, web font, svgs). So you wont have to load 2MB webfont

SwiperJS

While a bit of a heavier lib, its pretty much “it can do anything” slideshow/carousel lib. It has some rough edges, if you want to load more of them on same page, cuz it needs unique IDs for everything, but it can be done :slight_smile:

Laravel MIX

Resouces bundler or wrapper around webpack to make your life easier. Its not laravel framework, it is standalone NPM package, not a single line of PHP. It’s name makes people confused and idk who decided to name it that… even if its from laravel devs, they should just call it Mix, rant over. You just create simple config file with all your scss/less/img/ts assets and compile/transpile/compress them to your liking. It intalls all the stuff it needs to install on its own.

Small example:

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist');
mix.js('src/app.js', 'dist/foo.js');
1 Like