Front-End Tools to Improve Your Workflow (Part 2)

— Tagged: web-development tools workflow performance

Part 2 of my recommendations of software and online tools to help you speed-up and improve your workflow.

Table of Contents

Version Control

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

  • Git - Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.
  • github (Free and Paid if you want private repositories) - Powerful collaboration, code review, and code management for open source and private projects. Mac and Windows GUI clients available.
  • BitBucket (Free account includes unlimited private repos, Paid) - Unlimited private code repositories, Git or Mercurial, lightweight code review, Mac and Windows GUI clients available.

Front-End Frameworks and Boilerplates

A boilerplate is a set of code that can be reused in many ways with little or no alteration. It can be used as a base – a solid foundation for your projects. Additionally, it’s also a good place to learn tips and tricks about coding and it can save vast amounts of time.

  • HTML5 Boilerplate - HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package. Includes Normalize.css, Modernizr, and more!
  • Style Guide Boilerplate - You could grab the latest and greatest framework and use that to handle these common components, or you could roll your own framework. Style Guide Boilerplate is geared for people interested in creating their own “tiny Bootstraps.”
  • Initializr - Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
  • HTML Email Boilerplate - This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there.
  • normalize.css - A modern, HTML5-ready alternative to CSS resets. It is a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards.
  • Eric Meyer’s CSS Reset - The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
  • CSS Frontend Frameworks Comparison - A collection of best front end frameworks for faster and easier web development
  • Twitter Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Foundation - The most advanced responsive front-end framework in the world.

CSS Pre-processors

CSS preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a new extended language, then compiling the code to vanilla CSS so that it can be read by Web browsers. Several CSS preprocessors are available today, most notably LESS and Sass.

I prefer LESS as my CSS pre-processor. I use Less.app on my Mac to watch over my folders that use .less files, and the application automatically compiles those files into CSS.

Less.app running on my Mac

CSS3 Tools

  • CSS3 Generator - CSS3.me - A fully customizable CSS3 generator to fit your needs. Now with older browser and Internet Explorer support!
  • CSS3 Generator - Easily generate cross browser CSS3 syntax.
  • CSS3, please! - The Cross-Browser CSS3 Rule Generator
  • CSS3 Click Chart - Code examples, descriptions, links, tutorials, polyfills, tools, and browser support info for all new CSS3 features.
  • LayerStyles - Open source CSS builder for shadows, backgrounds, and borders in a Photoshop-esque interface
  • Can I Use… - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
  • Ultimate CSS Gradient Generator - A powerful Photoshop-like CSS gradient editor from ColorZilla.
  • CSS Arrow Please! - Simple way to create CSS arrows for tooltips and the like.
  • Create CSS3 - An easy CSS3 generator.
  • CSS Values - A quick-reference for getting all possible values for every valid CSS property.

Speed Up Your Website and Performance Optimization

  • Speed Awareness Month - Industry experts are providing you the best tips and tools to speed up your website.
  • Make the Web Faster (Google Developers) - These practices have improved the user experience for millions of users and we hope they are useful for other web developers.
  • Web Performance 2.0
  • Best Practices for Speeding Up Your Web Site - The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.
  • GTmetrix - GTmetrix can help you develop a faster, more efficient, and all-around improved website experience for your users.
  • Web Page Test - Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Image Optimization

  • Name your images descriptively and in plain English. Search engines also search for keywords within your file names. It can increase your on-page SEO, and help your website and images rank highly.
  • Use Alt tags smartly. Alt tags are a text alternative to images when a browser can’t properly render them. Describe your images in plain English, just like you do for image file names. Do not keyword stuff your alt tags. Don’t use alt tags for decorative images.
  • Reduce the file sizes of your images. Easily optimize your web images so they load as fast as possible on your page.
    • ImageOptim (Free, Mac OS X) - ImageOptim optimizes images by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations. ImageOptim seamlessly integrates best optimisation tools: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
    • JPEGmini (Free, Online, Mac OS X, and Windows) - JPEGmini is a photo optimization technology that reduces the file size of JPEG photos by up to 5X, while preserving the resolution and quality of the original photos.
    • Smush.it (Free, Online) - Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.
    • Kraken.io (Paid and Free, Online - up to 1MB file size limit) - Kraken is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken is a world ahead of other tools.
    • Shrink O’Matic (Free, Mac OS X, Linux, and Windows using Adobe AIR) - Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs. Simply drag and drop images and they’ll be resized as you wish! Options allow you to choose the output sizes, rotation (supports EXIF data), names and location, formats and watermarks.
    • TinyPNG (Free, Online) - Advanced lossy compression for PNG images that preserves full alpha transparency.
  • Use CSS sprites, instead of a collection of smaller individual background images, to improve your web page’s performance. A sprite is one large file containing multiple images for your website, saving loading time as the server only has to send one image instead of many small images. Through CSS, you can display any segment from that file as a background to an element.

My favorite image optimizer is ImageOptim, and I have it installed on all of my Macs. Here’s a screenshot of it compressing the images for this article:

ImageOptim - image compression for PNG, JPEG, and GIF on Mac

Code Minification

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. Compressed javascript and CSS files are ideal for production environments since they typically reduce the size of the file by 30-90%. Most of the filesize reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors.


Checklists

With lists covering multiple areas from content to usability to accessibility to standards, you’re a lot less likely to overlook important parts of a site.


Responsive Email


Device Mockups and Displays

When you’ve finished creating a site, you want to show it off, right? These tools allow you to view your designs or web pages in actual devices.

  • PlaceIt (Free, Online) - Places a screenshot of your page (or upload your own image) into a picture of someone interacting with a device. Devices include mobile, tablet, notebook, and desktop computers.
  • Pixelsign (Free, Download) - Spice up your website with live HTML5 mockups of popular devices.
  • Free iPad and iPhone 5S Mockups (Free, Download) - PSDs for Photoshop.
  • Responsive Showcase PSD (Free, Download) - Our responsive showcase PSD presentation slide is a collection of different hardware screen resolution to present your responsive project.
  • Browser Cover (Free, Online) - Get your web page design finished with a nice browser window cover.
  • Browser UI (Free and Paid, Photoshop Action) - The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. Simply install the action, choose a browser and play it.
  • Am I Responsive? (Free, Online or Bookmarklet)

Online Lectures and Web Conference Videos

  • BeSquare - Web conference content and exclusive interviews on your desktop.
  • Ontwik - Ontwik is a growing collection of videos that aims to provide the web community with a high quality, latest, and best lectures and conferences from the best web developers and designers. You can also find lectures about creativity, marketing, startups.
  • Creative Mornings
  • Speaker Deck - Online repository for slideshow presentations. Just use the search bar up top and find presentations on Web Design, Web Development, HTML5, CSS3, Responsive Web Design, and more. Or, browse the Programming, Design, and Technology categories.

Infographics

A picture is worth a thousand words…

Want to have your say? Send me a tweet »
Share