Front End April - Front End Tools and Resources
This month’s meetup covered more dev tools and resources than I ever imagined. It was really impressive to see how much is out there, but also somewhat daunting.
I hope this list helps others power up their dev skills.
Chrome
- Multiple Users
- Vimium - Keyboard shortcuts to open links, move around the page, close/open tabs and bookmarks
- OneTab - Compress and save and entire window of tabs. OneTabs can one tab other OneTabs that incept your developer nightmares
- MeasureIt - Get px measurements for elements
- LiveReload
- Markdown Reader - Automatically format and reload .md files on your computer
- Instrumente - Quickly get Lorem Ipsum, regex, unicodes, and prettify code
- ColorZilla - Find colors of elements on screen. Gradient generator
- LastPass - Password management
- Pixel Perfect - Overlay an image on your browser
-
Selenium IDE iMacros - Record a series of actions (clicking links, filling out forms) to repeat annoying tasks, and test your site
Automation and Organization
- Trello - Kanban Board
- Slack - Team communication
- Asana - To do lists. Great for making grocery lists
- HipChat - A chatroom tool. Combine it with Hubot for some really cool features
- CasperJS - Automated testing. (Similar to Selenium IDE)
- Tugboat - Lullabot’s tool to automatically spin up a drupal site based off a github pull request
- Zapier - A task in one app will cause another app to do something (for example: a github commit will send an email)
- If This Then That - Same as Zapier
- Pipes - Same as IFTTT
- CloudWork - Same as Pipes
- Gulp and Grunt - NodeJS build tools to automate compiling, testing, deploying
- Git Aliases to add to your global .gitconfig, or .bashrc, or a local .git/config.
- Some other tricks that were brought up were GTFO for
git reset --hard HEAD^
, and automatically doingls
after acd
to see the contents of the directory you’ve just gone into. - Write code faster with precompilers: sass, Haml, Markdown, Jade
Asset management
Programs
- Alfred - Launch programs and run scripts with a hotkey
- iTerm2 - Really great terminal for mac with tabs, panels, and many themes
- MAMP 3 - Run a local server with custom domains, local network access, and a ton of other features
- AMPPS - Another apache server app that’s a little lighter than MAMP
Sublime Text
Error reporting and monitoring
- Pingdom - Get an email and/or text when a site stops responding
- UptimeRobot - Just like Pingdom but you get 50 sites before you start paying
- HoneyBadger - Track and log errors
Keyboard
- PC Keyboard Hack -
- Shift-Control-Option-Command on Caps Lock - Article explaining how to setup the ‘Turbo’ key with Caps Lock
- Key Remap 4 Mac
Virtual Machines
- IEVMS - VirtualBox microsoft images for Internet Explorer
Websites
- CodePen - Quickly test out CSS / HTML / JS
- JSFiddle - Like CodePen but with a greater focus on JS apps
Magazines / Podcasts / Shows
- Treehouse Blog - Weekly Front End dev news
- Shop Talk Show
- A List Apart
- Smashing Magazine
Learning
- Our G+ Community Page ;)
- CodeAcademy
- MouApp - Learn markdown
CSS
- Can I Use - Parse CSS and add vendor prefixes to rules by Can I Use
- Auto Prefixer - Parse CSS and add vendor prefixes to rules by Can I Use
- Gulp Knyle Style Sheets - Automatically generate a stylesheet based on comments in your css (or precompiled css). Setup for gulp
Sass
- Compass - Pattern library and compiler
- Bourbon - Pattern library
- Neat - Bourbon grid framework
- Bitters - Scaffold for Bourbon projects
- Refills - Patterns and Components for Bourbon, Bitters, and Neat
- SassMeister - Online tool to convert sass and scss to css
Typography
- Sky Fonts - Quickly install fonts from Google, fonts.com, and MyFonts