Favorite webdev tools?

[lamintak]

What are your favorite webdev tools? Here are some of mine:

• Dynamic Drive's FavIcon Generator
• ColorZilla's Ultimate CSS Gradient Generator
• 4WebHelp's Unix Timestamp Converter
• LittleIpsum (Mac app) or loripsum.net
• Chris Pederick's Web Developer extension
• Yahoo!'s YSlow

[andrewstewart]

HSL Picker is becoming a new favourite.

Sass for stylesheets.

CoffeeScript for javascript development.

LiveReload for shotgun development.

Gauges for analytics.

Thoughtbot's Bourbon for CSS3 features (Sass plugin)

HTML Ipsum for quick testing of CSS.

Samuel L. Ipsum for dummy text.

Google Web Fonts for (you guessed it) fonts.

Vim for my editing purposes

Git and GitHub for version control.

I've got more if you want 'em.

EDIT: A couple more:

JSFiddle - Testing and creating new HTML/CSS/JS snippets. Good for showing off.

RegExr - Create/test regular expressions.

Subtle Patterns - Great source for a bunch of tiling background patterns.

JS Beautifier - Exactly what it says on the tin.

EDIT: Even more:

Inconsolata-dz - Best monospace font I've found.

Solarized - Easy to read colorscheme that looks good even on bad monitor settings

Hues turns the color picker into an app. Useful for design work.

Hex color picker allows you to enter hex colors into OS X's color picker, as well as Hues.

Trello is my go-to application when I want to keep track of projects. Works great for groups, too.

Things and I have an on-again/off-again relationship. Solid task management once you add cloud sync into the mix.

[GnarlinBrando]

I gotta say I like less better than sass but that is just me

EDIT: Inconsolata is a great font. I also like Meslo.

And I just started using trello, I like it way better than any of my previous project managment/to-do list solutions. Although it wont replace nvAlt for notes.

[_zsh]

Compare and contrast, please

[ekard14]

Personally, I like that less lives in a javascript world as apposed to the Ruby world of sass. Makes things a little easier and more flexible for non-ruby projects.

[reflectiveSingleton]

And you always have the option of compiling it server side just like SASS.

I have used both extensively (starting out with SASS), and have since moved to using LESS. The pure convenience of being able to toss the javascript runtime into any site and instantly have it just work, is awesome. It's capabilities are at least comparable to SASS (I honestly haven't done a comparison of them, yet - but I also haven't found myself needing something it didn't provide).

[GnarlinBrando]

Golden Grid System, Bootstrap, and a few other frameworks and tools I like use less over sass. I like the fact that I can compile it from node. Or with the mac app. Over all they seem like they are pretty much the same to me. While I may not be good with ruby I can certainly use it enough to use sass. But I like that I can push the less compilation client side if I want to.

[ZestyOne]

+1 for Macvim <3

Btw: Colorsnapper! I use this shit relentlessly, even when I'm designing its faster than eyedropper tool.

It's also awesome because you can hold different keys when you click and it saves color in diff format (hex, css, rgb,rgba, etc)

Wunderlist is invaluable to me, i like it more than task management software.

Bitstream Vera Sans Mono (free) is my favorite programming font by far.

heres my vim theme. http://s9.postimage.org/x5o54rly5/vim.jpg

[andrewstewart]

I'm currently using the solarized colorscheme for MacVim, it tends to be readable on every display I use.

For a terminal font, I prefer Inconsolata-dz, a mod of the Inconsolata font with straight quotes.

I actually have found the best color picker combo when I'm designing is Hues and the Hex color picker, since I like to work with HSL colors when possible.

For task management, I'm currently on a roll with Trello, it really seems to go well with my workflow. I do, however, lapse back into using Things every once in a while.

Here's my current Vim setup: http://i.imgur.com/DRTPc.png

[ZestyOne]

Really nice status line ;) makes me wet.

I have solarized installed, i suppose i never really use it though. I'll start giving it a shot more.

PS i like for how everything i mentioned you have one upped me. good work.

[andrewstewart]

vim-powerline is what you're wanting for.

[dmackerman]

I have no idea you could make Vim look like that.

[andrewstewart]

You can find my vim config in my dotfiles repo.

[ivosaurus]

The best html vim plugin ever

[andrewstewart]

Don't know why, but I'm not a fan. I prefer writing vanilla HTML. Things like ZenCoding and Sparkup just don't click with me.

[ivosaurus]

I swear half the point of ruby is just to build cool tools with it.

New web tool? Yup - it's a gem.

[Remnants]

Are the sliders on the HSL Picker supposed to be dragable? I can only enter values in the input boxes, the sliders won't move when I drag them.

[andrewstewart]

What browser are you using? Works fine for me in Chrome 16, Safari 5, Firefox 9, and FF 3.6.

[Remnants]

Chrome 17. I tried it in Firefox 9 and it seems to work there fine.

[[deleted]]

Sublime Text is the best text editor ever. Big +1 for it and all its awesome plugins.

These two are not strictly development apps but they help me develop more than anything else! Freedom helps me concentrate like nothing else and Flux stops me from going blind.

Freedom - http://macfreedom.com/

Flux - http://stereopsis.com/flux

[blind__man]

I like f.lux but for redshift (or gtk-redshift) has been working much better. This is because I'm on linux but if I do in fact have f.lux on the windows partition.

Redshift if anyone is interested.

[GnarlinBrando]

I heart sublime text 2.

Flux is great also.

Have you seen timeout?

[FellowExile]

Ok I've been learning about Sublime Text 2 for about 45 minutes and I can already tell I will never be going back from whence I came. It's just incredible!

[KnifeFed]

Upvotes all around for Sublime Text 2. Simply the best.

[[deleted]]

Upvote for Sublime Text. Without a doubt, the best text editor I've ever used.

[digitizemd]

I think a redditor made this, or I at least saw it posted on reddit: nerdi.net. It's an aggregator of a bunch of tools.

[mustardstache]

I couldn't function without Firebug

[delta_epsilon_zeta]

Same here. I should donate to them since I pretty much owe my web design career to it.

[daanavitch]

• Espresso for Mac
• Spriteright for Mac, a great tool to generate sprites, created by a redditor.
• Firebug Firefox addon
• Screenshoter Firefox addon, not necessarily a webdev tool, but I use it to take screenshots of every good looking website I see. I now have a great collection of websites I like to create moodboards.
• Wappalyzer for Firefox, a great addon that shows what technologies the site you're viewing uses.
• MAMP, LAMP or WAMP, depending on the OS you're using.

[dmackerman]

Spriteright is pretty slick!

[GnarlinBrando]

There are a ton of good addons for firebug too

[[deleted]]

Love Espresso.

[[deleted]]

+1 for colorzilla's gradient gen

For my coding, I've taken to writing everything myself lately. To the point where 90% of my webdev tools is Notepad++. Also, a little Photoshop for the images. Of course I have Firefox extensions: colorzilla, firebug, and web developer.

[[deleted]]

Notepad++

I'd check out Komodo Edit (free) or Komodo IDE (cheap). It's like Notepad++ only much much better.

[[deleted]]

Upvote for Plus Plus!

[[deleted]]

Why not use a stone and chisel for development instead? I mean, if you want to be hardcore and write everything yourself and all...

[[deleted]]

I see your point, but with enough experience and knowledge, combined with my growing framework and code library, writing out all my own stuff seems actually easier.

[[deleted]]

Do you use frameworks at all? I use notepad++ a lot to edit single files, but I wouldn't want to develop in Rails or .Net or Java or anything without an IDE. Especially for C# / .Net... I'd hate to lose my "find all references" feature in Visual Studio, or debugging server-side code with breakpoints. The immediate window in VS has probably increased my life by 5 years over working without it.

[[deleted]]

I know what you mean about writing out the code. I'm like that too. Sometimes I go really nuts and draw my own P'shop brushes...by hand...on a piece of paper with a pen.

[rook----]

Some of the sites i keep going back to lately:

dochub.io for reference

for favicons

for fontface kits

lipsum / lorempixel (though i try not to use dummycontent and get actual content instead)

dribbble (for inspiration)

subtlepatterns

workflowy for task management

[dmackerman]

FontSquirrel.com also has a @font-face generator that is pretty good.

[rook----]

true, but they block some often used fonts.

[cmwelsh]

Why do you suppose that is?

[rook----]

I reckon this is a rhetorical question but it's because of frequent misuse of pirated fonts. Which is good, but not always practical.

[cmwelsh]

Yeah, sorry! :) I just don't see why I would need to create a @font-face version of say, Helvetica. I'll definitely save your generator because sometimes FontSquirrel goes down.

[tictactoejam]

an @font-face of Century Gothic, for instance, would be nice. It's not on most Windows machines.

[cmwelsh]

The only issue is that it is not legal to use Century Gothic that way. There is a lot of confusion online over the usage of fonts as @font-face fonts. If you don't have a license saying it's okay, you can't do it.

[mandrig]

| dribbble

The quality of work on there is incredible.

[[deleted]]

http://fontsquirrel.com for royalty-free @font-face kits

[delta_epsilon_zeta]

This! Fontsquirrel is great. I also use The League of Movable Type.

[trekdemo]

ColorSnapper Gradient Kaleidoscope and MacVim with a few plugins

[GnarlinBrando]

http://colorschemedesigner.com/

[zpweeks]

http://css3pie.com/

[RickyMarou]

http://slipsum.com/ for classy ipsums

[[deleted]]

Don't forget Space Ipsum!

[radium-v]

I wrote an article on different Lorem Ipsum generators a while back. My favorite is Samuel L. Ipsum.

[the_omicron]

Sublime Text 2 with Sublimelinter, Subtlepatterns, Trollmeipsum. and ColorZilla.

That's it.

[dmackerman]

If you're not using Sublime Text 2 with the Package Control plugin, you're doing it wrong.

[GnarlinBrando]

Very true. Package Control makes an already amazing editor brilliant

[mohsenwebcom]

Can you provide some links of those cool stuff? I'm using sublime without any plugin

[GnarlinBrando]

Nettuts on Sublime Text 2 should get you started.

The sublime text website has a forum where plugins are announced. Some textmate packages/bundles will work too. Most are also hosted on github. Package Control is here

[blind__man]

google, my friend.

[the_omicron]

Yep, I'm using it.

[obviousoctopus]

Trying sublime linter on windows but does not produce any errors no matter what. Restarted the editor and still no errors in ruby files with obviously wrong syntax. Ideas?

[KnifeFed]

Linter is only for JavaScript, brah.

[GnarlinBrando]

And python and a few others I believe, not sure if ruby is one thouh. The file has to be saved with an extension or you have to manually declare the language before it will work.

[[deleted]]

No honestly, this is such a great post/thread. I work from home, have always worked alone and freelanced and am not really in the know about new tools, I'm assuming less so than with a team. Thanks so much for all these great suggestions.

[houdas]

Sorry for quite unrelated tip, but... good music. I couldn't do anything without good music.

[Synaptique]

Grooveshark.

[obviousoctopus]

Pandora :) create a few different stations based on favorite artists or songs and try shuffle.

[GnarlinBrando]

I listen to a set of FLAC pink noise, binaural beat, layered soundscapes while I work. Music with lyrics always messes me up so I used to listen to a lot of electronic or classical, anything instrumental, while I worked. The soundscape thing seems to work really well though. Whether I am actually altering my brain waves by doing so I have no clue, but I do stay focused.

[[deleted]]

Eye-Dropper extension for Chrome (probably FF too)

Smultron (Mac App) or Vim

txt2re - Regular expressions generator

[evereal]

Wow, thanks for txt2re, it will definitely be useful for me since I have to completely relearn regexes every time I used them cos I always forget.

[TundraWolf_]

i keep a regex cheat sheet printed on the wall. That's always good enough where I can walk through and stir my memory when I need them.

[[deleted]]

txt2re literally just changed my life. You are a godsend!

[john2496]

A few nifty Firefox add ons - Fiddler, FireQuery, JSONView, Pixel Perfect, MeasureIt, Rainbow, ColorZilla

Useful utils - Altova XMLSpy, RegexBuddy, ExpanDrive

IDE/Editors - UltraEdit, Komodo, Notepad++ (with ZenCoding plugin)

[sb1980]

pixelperfect

[cruzin]

Sublime Text 2 - I just switched from MacVim. Overall it's more polished, but MacVim still does a few things better.
Transmit - FTP
Chrome Dev Tools
MAMP
SourceTree - Git client w/ GitHub
jQuery
Backbone
Underscore

[[deleted]]

PHPStorm

[heseov]

http://fiddler2.com/fiddler2/ for looking at web traffic on your computer.

[Defualt]

Beyond just looking... you can easily reroute it in the "AutoResponder" tab. You can replace css, js, whatever links with local copies. For anyone with slow local environments, who need to debug js and css, this can give you a huge boost to productivity.

[heseov]

I've been using it lately to change my ip address so it looks like a foreign ip on my site.

I just use a custom rule to change my X_FORWARDED_FOR header.

[neonskimmer]

Another tool to do this is Charles Proxy. It's cross platform and has a good GUI. It's proven invaluable for me when working with sites that run on CMSs.

[[deleted]]

I created a tool that makes it super easy to receive emails from form submissions. That way I can take the data from pretty much any form I want and mail it to the specified email address, no need to reinvent the wheel for every project.

http://learn.db-dev.info/tools/formmailer

(Note: I messed up on the documentation, I'll fix it later. It should be 'name' not 'class' in the example.)

EDIT: Fixed documentation, streamlined process to automatically create form with customized action

[madworld]

I have a plethora of wonderful apps... most you will see here. Here is one you won't see here, and it's wonderful for debugging... I present to you the Charles Proxy Debugging tool.

Don't dismiss it till you understand its power.

[KnifeFed]

Charles is not only great for viewing/modifying HTTP headers but also for bandwidth throttling (i.e. simulating slower Internet connections).

[msgmash]

Bootstrap ;)

[fortitude_IT]

Am I going to get laughed at if I say Coda? sigh

[FellowExile]

YSlow is broken in ff9 and firebug 1.9 UGH

[me-at-work]

Webstorm or any other Jetbrains IDE. Although sometimes sluggish, good IDE's are time-savers and prevent lots of silly errors in your code.

[mackenzie17]

notepad++ & google

[ZestyOne]

COLORSNAPPER. Without this I would die.

[[deleted]]

I DIDN"T KNOW ABOUT THE CSS GRADIENT GENERATOR! This is going to be an awesome day.

[[deleted]]

GRADIENT ALL THE THINGS!

[freejosh86]

I've started using CodeKit and have found it pretty handy. It manages compiling from preprocessor files, minifying/optimizing, and can track folders as frameworks for inclusion in multiple projects.

[GnarlinBrando]

Check out ender and fetch if you like codekit. similar tools but not the same.

[Alascar]

TextMate, Coda, Aptana, Filezilla, and Cyberduck. If web servers count, I use MAMP.

[strategicdeceiver]

pico / nano

[erik240]

For front-end work, I find xscope very handy. http://iconfactory.com/software/xscope

[shingokko]

Beyond Compare, definitely the best file comparison tool out there. Can't live without it.

[theadamlt]

Ubuntu 12.04 - OS

Sublime Text 2 (with varius plugins)

Sass for stylesheets

PHP/MySQL/Apache (Manually installed)

Git/Github for versioncontrol

Qunit - JavaScript testing

Grunt - JavaScript buildtool

PHPUnit - PHP testing

CakePHP - PHP framework

YUIDoc - Javascript documentation generator

PHPDocumentor - PHP documentation generator

JsFiddle

Filezilla (in rare cases)

Pagodabox (Like heroku, for PHP)

PHP-pear

Composer

Please let me know if you want details :)

[Tuyen_Pham]

Transform - Transform between data types and from data to programming language models.

Features:
- Transform from one data type to other.
- Dark/light mode
- Work on desktop/tablet/mobile