Tools I use

A list of tools and applications I use for Frontend Developement

Table of Contents

1. Browsers
2. Browser Extensions
3. Text Editors
4. Terminal
5. Git
6. Perf Tools

Browsers

Desktop Browser

1. Chrome Canary - Mac & Windows
2. Chrome - Mac, Windows, Ubuntu
3. Firefox Developer Edition - Mac, Windows, Linux
4. Firefox - Mac, Windows, Linux
5. Safari - Mac
6. IE - Windows

Mobile Browser - Android

1. Chrome Beta
2. Chrome
3. Firefox

Mobile Browser - iOS

1. Safari
2. Chrome

⬆ back to top

Browser Extensions

Chrome

• Page Load Time - A simple extension to show page load time
• Allow Control Allow Origin - Allows to you request any site with ajax from any source
• Page Ruler - Draw a ruler to any page and view the width, height
• What Font - Identify fonts on web pages on mouse hover
• Postman - REST Client - Postman helps you be more efficient while working with API
• Edit This Cookie - A cookie manager
• YSlow - Make your pages faster with Yahoo!'s page performance tool
• AngularJS Batarang - Tool for debugging and profiling AngularJS applications
• React Developer Tools - Inspect the React component
• Pesticide - inserts the CSS into the current page, outlining each element to better see placement on the page

⬆ back to top

Text Editors

1. Sublime Text 3 - MAC, Windows, Ubuntu
2. Atom Editor - MAC, Windows (My current editor, love it)

Sublime plugins & themes

• Package control 3.0 - Package control
• HTML5 - HTML5 snippets
• CSS Format - To format CSS in different ways
• Emmet - Expand abbreviations with <Tab> button
• Bracket Highlighter - Shows bracket opening and closing
• Git Gutter - See git diff in gutter
• Markdown Preview - See git markdown preview in browser
• Origami - Split the window however you like
• OpenIn Browser - On save opens up a user defined URL in your default web browser
• SideBar Enhancements - Enhancements to sidebar
• Auto​ File ​Name - Autocomplete Filenames
• Auto prefixer - Prefix your CSS
• jshint - Shows jshint errors
• jQuery - jQuery methods as snippets
• Color Scheme - Material - Syntax theme based off the Material Design color palette
• Theme - Cobalt2 - Theme based on our old blue friend cobalt
• Theme - Material - Theme based on google's Material Design (current theme in my sublime)

Atom plugins & themes

• Theme - Material UI - Theme based on google's Material Design (current theme in my atom editor)
• Run HTML in browser - Run your html pages in browser
• Reload on save - Automatic reload on file save (Must have plugin)
• Color Picker - Right click or press CMD-SHIFT-C/CTRL-ALT-C to open picker
• ReactJS - ReactJS (JSX) language support, indentation, snippets, auto completion, reformatting
• Local Server Express - Serve current project via Express.
• Emmet - the essential tool for web developers.

⬆ back to top

Terminal

1. oh my zsh - MAC, Windows, Ubuntu terminal

oh my zsh plugins & themes & configs

• Af Magic - Theme

• Miloshadzic - Theme

• Git - Plugin

⬆ back to top

GIT

1. GIT Terminal - MAC, Windows, Ubuntu

Tips

• Multiple Accounts - To set up multiple git accounts

Perf Tools

Performance testing

• Webpagetest - Test a website's performance
• Pagespeed Insights - Make your web pages fast on all devices
• Speed Check - A free online speed check service including waterfall breakdown and website preview

Markup validator

• Markup Validation - Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc

Responsive testing

• Device emulation - Chrome device emulation
• Resizr - Test your responsive web page
• W3C mobile Checker - Checker performs various tests on a Web Page to determine its level of mobile-friendliness
• Mobile Friendly - Analyze a URL and report if the page has a mobile-friendly design

⬆ back to top

More contents are coming soon....

Author

Follow me

License

MIT