Best Tools for Front End Development

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 


Google Chrome Extensions

 

Squarespace Identifier

This extension displays collection IDs and block IDs on Squarespace sites making it much easier to identify which elements you need to target with custom code. 

 

Simple Debug CSS

This extension essentially displays a wireframe of your current webpage, helping you to see how elements are arranged and find the cause of that pesky ghost empty space; debugging just got easier. 

 

Stylish

Stylish lets you style the web the way you want. Pesky toolbars and other elements getting in your way while editing a site? Shrink them, hide them, restyle them.

 

AdBlock

Block those pesky email capture forms and buy boxes your client insists on including on their high converting website. 

 

Auto Refresh

Great for editing source files and seeing those changes in near real-time. Or for an eye on the funding progress of that newly launched crowdfunding campaign. 

 

Edit Anything

It can be near impossible to figure out how text will fit on your webpage design without constant saving and refreshing. Edit Anything lets you edit webpage text inline so you can see exactly how it will look at every break point. 


Mac Apps

 

Atom Editor

The most lightweight yet expandable syntax editor I've come across. Open-source, countless extensions, and an a beautiful interface. Be sure to install the Markdown Preview package for side by side editing and previews. 

 

aText

Save hours of typing out repetitive lines of code. This is the best / most affordable text expansion utility I have come across.

 

LittleIpsum 

An incredibly quick way to insert the right amount of placeholder text. This app sits in your menubar and gives you the ability to copy words, sentences, and paragraphs of lorem ipsum with a single click.