Web Development – Tools of the Trade

admin Web Design, Workflow

What is what and why should I use it?

Javascript Frameworks

  1. Node.js Node.js (Node) is an I/O environment built on top of Google Chrome’s JavaScript runtime — essentially, a server-side implementation of JavaScript. Node’s asynchronous, event-driven I/O model makes it easy for developers with JavaScript knowledge to build high-performing, scalable, and highly concurrent web applications rapidly and run them in the cloud. Node.js uses an event-based server execution procedure rather than the multithreaded execution in PHP.Beginner’s Guide to Node.js

Responsive CSS Frameworks

Css frameworks are packages made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.). The usual components are:

  • CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion.
  • Typography style definitions for HTML elements.
  • Solutions for cases of browser incompatibility so the site displays correctly in all browsers.
  • Creation of standard CSS classes which can be used to style advanced components of the user interface.
  1. Twitter Bootstrap Bootstrap is a “sleek, intuitive and powerful front-end framework for faster and easier web development.” It uses a 12-column responsive grid system and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles.Using the Customizer, you can really make Bootstrap your own by adjusting variables, components, JavaScript plugins and more. Expand Bootstrap by using a wealth of resources, including themes and interface building tools. Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub.Bootstrap Tutorials Getting Started with Bootstrap (twitter.github.io) Twitter Bootstrap 101: Introduction (webdesign.tutsplus.com) For more tools and resources see here
  2. Foundation Foundation is another popular responsive front-end framework. With this modern HTML5 framework, you can approach web design either mobile first, or from big displays down to mobile sizes.It has rapid-prototyping capabilities, a responsive grid system and much more. Foundation 3 is built with Sass, a powerful CSS preprocessorFoundation Tutorials Foundation Docs: Getting Started (zurb.com) A Beginner’s Guide to Zurb Foundation (designshack.net) Dive into Responsive Prototyping with Foundation (alistapart.com) Rapid Prototyping For Any Device With Foundation (smashingmagazine.com) Quickly build a prototype to test on any device (netmagazine.com) For more tools and resources see here
  3. Skeleton Skeleton is a simple and clean responsive CSS boilerplate for HTML5 websites and apps. It’s got just the things you need, and nothing more.Some notable features: a responsive layout grid, standard media queries for your device-specific CSS style properties, a CSS class for responsive image elements that scale with the layout grid, a PSD template for mocking up your web designs, and an HTML5 shiv for old web browsers.Skeleton Tutorials Build a Responsive, Mobile-Friendly Web Page With Skeleton (designshack.net) Skeleton Boilerplate: PSD To HTML (1stwebdesigner.com) Intro to Skeleton CSS Boilerplate (youtube.com) For more tools and resources see here
  4. HTML5 Boilerplate In 2010, HTML5 Boilerplate became one of the first, and subsequently, most popular open source front-end web development tools for getting HTML5 websites and web apps up and running in no time. It’s a compilation web development solutions that enable our sites to support modern web browsers.Included in HTML5 Boilerplate is a mobile-friendly HTML template, placeholder icons, CSS resets for normalizing/standardizing your stylesheet property values, standard media queries for popular viewing screens, an HTML5 shiv for non-modern web browsers, and more.HTML5 Boilerplate Tutorials The Official Guide to HTML5 Boilerplate (net.tutsplus.com) HTML5 Boilerplate Walkthrough (youtube.com) HTML5 Quick Start with Boilerplate (teamtreehouse.com) For more tools and resources see here
  5. HTML KickStart One of the newest kids on the block, HTML5 KickStart is a lean and mean package of HTML, CSS, and JavaScript files that promises to save UI developers hours of work.At about 300KB, HTML KickStart packs quite a punch: UI components like stylish buttons and navigation bars, scalable icons (using Font Awesome), a responsive grid layout, a touch-enabled slideshow component and so on.HTML KickStart Tutorials HTML KickStart Getting Started Guide (99lime.com)
  6. Less Framework Less Framework is a modern front-end framework for building responsive designs. Similar to Skeleton (discussed above), Less Framework focuses on being just a plain and simple layout grid framework.It has 4 pre-built layouts: Default, Tablet, Mobile and Wide Mobile.Less Framework TutorialsResponsive Web Design with HTML5 and the Less Framework (sitepoint.com)

CSS Preprocessors (+ extensions)

See here for a nice comparison between the two preprocessors

  1. LESS LESS is built upon JavaScript, so intalling LESS is as easy as linking JavaScript library to your HTML document. There are also a few GUI applications to help in compiling LESS to CSS and most of them are free and performing very well (e.g. WinLess and LESS.app). LESS is a dynamic stylesheet language. You can write your CSS programmatically in a .less file and compile your output into a .css file. The compilation language for LESS is JavaScript. This a great because you can run the compiler on the server side or client side.Extensions: LESS also has several extensions, but unlike Compass that has all we need in one place, they are separated and each of them are built by different developers. This won’t be a problem for seasoned users but for those who are just starting out with LESS, they need to take some time to choose the right extensions that suit their workflow.Here are a few LESS extensions that you might need to include in your project: CSS3 Mixins: LESS Elements, Preboot, LESS Mixins. Grid: 960.gs, Frameless, Semantic.gs Layout: Even.less Misc: Twitter BootstrapTwo of the more popular front-end frameworks that use LESS are:
  2. SASS Sass is running on Ruby. In Mac this has been pre-installed, but in Windows you probably need to get it installed before you can start playing with Sass. SASS is an extension of CSS3. It has two syntaxes: .scss and .sass. .SCSS is the most common syntax used but it also supports the older indented syntax.Extensions: Compass, the current and popular Sass-based extension. Compass has a number of Mixins to write CSS3 syntax in less time. But Compass is beyond just CSS3 Mixins, it has added other very useful features such as Helpers, Layout, Typography, Grid Layout and even Sprite Images. It also has config.rb file where we can control the CSS output and some other preferences. So, in short, Compass is an all-in-one package to do web development with Sass.Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers.  Since Sass and Compass are Ruby gems, they require that you have a working knowledge of Ruby and the command line. Not all designers will know how or want to use command line tools, and that’s where Scout steps in. Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You’ll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love.LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Works with CoffeeScript, SASS, LESS and others. (Still in alpha phase for Windows)Frameworks that include SASS and SCSS: Foundation Gravity Frameless

WordPress starter frameworks (free)

See this post for a description of these frameworks

  1. Roots
  2. Reverie (based on Foundation)
  3. Foundation for WordPress
  4. Yoko Theme
  5. 1140 Starkers Theme for WordPress 
  6. Skeleton WordPress Theme
  7. Whiteboard Framework
  8. Bones

Prototyping and wireframes

  1. Draw.io (quick sitemaps and mockups online)
  2. Balsamiq Mockups (paid)
  3. moqups (free)
  4. wirify (bookmarklet) bookmarklet that quickly creates a wireframe of any website

Deployment

  1. Capistrano Capistrano is an open source tool for running scripts on multiple servers; its main use is deploying web applications. It automates the process of making a new version of an application available on one or more web servers, including supporting tasks such as changing databases.
  2. RAMP : for content deployment

Javascript Automation

  1. Grunt.js A task-based command line build tool for JavaScript projects, build with node.js.There are Grunt modules for nearly everything (linting, minifying, testing, waiting, packaging, shell-exec’ing, tagging, etc.), and rather predictably, sshing (with sftp). Deployment with Grunt(instead of Capistrano)Discussion:  Why grunt? Why not something else?Some examples:
    – concatenation (css, js)
    – uglify (js minification)
    – grunticon: Create ping fallback icons for a folder of SVG icons
    – SVGO (svg optimization)

    Grunt watch

Image tools

  1. noisepng – Create a noisy png

CSS/ JS generators and help

  1. css3 generator
  2. cubic-bezier.com
  3. css3please.com

CSS/ JS Playgrounds

  1. dabblet
  2. jsfiddle JSFiddle is a wonderful playground when it comes to JavaScript development since it provides a wide range of JavaScript libraries, probably more than you’ll ever need. Problem is it doesn’t use a live reload system meaning you have to hit “Run” everytime you make a change. It’s kind of annoying, but for JavaScript prototyping, it’s amazing.
  3. cssdeck
    • Live reload
    • Codecast feature (video coding)
    • 11 JavaScript libraries available: MooTools, jQuery, jQuery Mobile, Prototype, YUI, Underscore, Backbone, Modernizr, Sencha Touch, Dojo, Bootstrap
    • Preprocessors: ZenCoding (HTML), Markdown (HTML), Slim (HTML), Jade (HTML), HAML (HTML), LESS (CSS), Stylus (CSS), SCSS (CSS), Sass (CSS), Compass (CSS), CoffeeScript (JS)
    • Built-in options for Prefixfree and Normalize.css
  4. codepen CodePen is one hell of a playground. It provides very strong tools for each of the 3 supported languages and provides awesome features for registered users like personal gallery, tags, forks, likes and follows, various themes, etc.Plus, authors pick best pens on the site and feature them on the front page. This way you can have a look at best front-end works outhere without having to search in thousands of pages.

Typography

  1. FontFriend (bookmarklet) View a website with other fonts. Font­Friend enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages.
  2. WhatFont (bookmarklet) Quickly identify the fonts used on a website
  3. Type-a-file Typographic toolkit. A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.
  4. WhatTheFont Identify a font from images
  5. identifont Find fonts by  type, name, similarity or picture. Font database

JS goodness

  1. Coffeescript
  2. JS Linter (JSHint in Sublime Text 2)

Text Editors and Diff/merge tools

  1. Sublime Text 2 Use Sublime Text 2 as Git Mergetool: 
    git config --global mergetool.sublime.cmd "subl -w \$MERGED"
git config --global mergetool.sublime.trustExitCode false 
git config --global merge.tool sublime
    git mergetool -y

     

Debug WordPress

  1. Debug-bar
  2. Debug-bar console

More WordPress

  1. WP-CLI WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser

Server Configuration Management

See also Mark Jaquit’s talk

  1. Puppet
  2. Chef

Virtual Machine Management

See also Mark Jaquit’s talk

  1. Vagrant 

Browser Testing

  1. YSlow plugin
  2. WBench website benchmarker
  3. Browserstack (not free, but great)
  4. Opendevicelab.com