{"id":141,"date":"2013-09-04T12:21:23","date_gmt":"2013-09-04T10:21:23","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=141"},"modified":"2013-09-18T14:53:53","modified_gmt":"2013-09-18T12:53:53","slug":"web-development-tools-of-the-trade","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/web-development-tools-of-the-trade\/","title":{"rendered":"Web Development &#8211; Tools of the Trade"},"content":{"rendered":"<h3>What is what and why should I use it?<\/h3>\n<h4><span style=\"color: #ff9900;\">Javascript Frameworks<\/span><\/h4>\n<ol>\n<li><a href=\"http:\/\/nodejs.org\/\"><strong>Node.js<\/strong><\/a> Node.js (Node) is an I\/O environment built on top of Google Chrome&#8217;s JavaScript runtime \u2014 essentially, a server-side implementation of JavaScript. Node&#8217;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\u00a0<strong>event-based server execution procedure<\/strong>\u00a0rather than the multithreaded execution in PHP.<a href=\"http:\/\/www.hongkiat.com\/blog\/node-js-server-side-javascript\/\">Beginner\u2019s Guide to Node.js <!--more--> <\/a><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900; line-height: 1.3;\">Responsive CSS Frameworks<\/span><\/h4>\n<p>Css frameworks are packages made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.).\u00a0The usual components are:<\/p>\n<ul>\n<li>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.<\/li>\n<li>Typography style definitions for HTML elements.<\/li>\n<li>Solutions for cases of browser incompatibility so the site displays correctly in all browsers.<\/li>\n<li>Creation of standard CSS classes which can be used to style advanced components of the user interface.<\/li>\n<\/ul>\n<ol>\n<li><span style=\"color: #000000;\"><strong><a href=\"http:\/\/twitter.github.io\/bootstrap\/\"><span style=\"color: #000000;\">Twitter Bootstrap <\/span><\/a><\/strong><span style=\"line-height: 1.5;\">Bootstrap is a &#8220;sleek, intuitive and powerful front-end framework for faster and easier web development.&#8221; 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.<\/span><\/span>Using the <a href=\"http:\/\/twitter.github.com\/bootstrap\/customize.html\" target=\"_blank\">Customizer<\/a>, you can really make Bootstrap your own by adjusting variables, components, JavaScript plugins and more. Expand Bootstrap by using a <a href=\"http:\/\/bootstraphero.com\/the-big-badass-list-of-twitter-bootstrap-resources\" target=\"_blank\">wealth of resources<\/a>, including <a href=\"http:\/\/bootswatch.com\/\" target=\"_blank\">themes<\/a> and <a href=\"http:\/\/jetstrap.com\/\" target=\"_blank\">interface building tools<\/a>. Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub.<strong><em>Bootstrap Tutorials<\/em> <\/strong><a href=\"http:\/\/twitter.github.io\/bootstrap\/getting-started.html\">Getting Started with Bootstrap<\/a> (twitter.github.io) <a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/complete-websites\/twitter-bootstrap-101-introduction\/\">Twitter Bootstrap 101: Introduction<\/a> (webdesign.tutsplus.com) For more tools and resources see <a href=\"http:\/\/designinstruct.com\/roundups\/html5-frameworks\/\">here<\/a><\/li>\n<li><strong><a href=\"http:\/\/foundation.zurb.com\/\">Foundation <\/a><\/strong>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 <a href=\"http:\/\/foundation.zurb.com\/grid.php\">responsive grid system<\/a> and much more. Foundation 3 is built with Sass, a powerful CSS preprocessor<strong><em>Foundation Tutorials<\/em> <\/strong><a href=\"http:\/\/foundation.zurb.com\/docs\/\">Foundation Docs: Getting Started<\/a> (zurb.com) <a href=\"http:\/\/designshack.net\/articles\/css\/a-beginners-guide-to-zurb-foundation-3-the-grid\/\">A Beginner\u2019s Guide to Zurb Foundation<\/a> (designshack.net) <a href=\"http:\/\/alistapart.com\/article\/dive-into-responsive-prototyping-with-foundation\">Dive into Responsive Prototyping with Foundation<\/a> (alistapart.com) <a href=\"http:\/\/coding.smashingmagazine.com\/2011\/10\/25\/rapid-prototyping-for-any-device-with-foundation\/\">Rapid Prototyping For Any Device With Foundation<\/a> (smashingmagazine.com) <a href=\"http:\/\/www.netmagazine.com\/tutorials\/quickly-build-prototype-test-any-device\">Quickly build a prototype to test on any device<\/a> (netmagazine.com) For more tools and resources see\u00a0<a href=\"http:\/\/designinstruct.com\/roundups\/html5-frameworks\/\">here<\/a><\/li>\n<li><strong style=\"line-height: 1.5;\"><\/strong><strong><a href=\"http:\/\/www.getskeleton.com\/\">Skeleton <\/a><\/strong>Skeleton is a simple and clean responsive CSS boilerplate for HTML5 websites and apps. It\u2019s 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.<strong>Skeleton Tutorials <\/strong><a href=\"http:\/\/designshack.net\/articles\/css\/build-a-responsive-mobile-friendly-web-page-with-skeleton\/\">Build a Responsive, Mobile-Friendly Web Page With Skeleton<\/a> (designshack.net) <a href=\"http:\/\/www.1stwebdesigner.com\/css\/psd-to-html-artthatworks-skeleton-boilerplate\/\">Skeleton Boilerplate: PSD To HTML<\/a> (1stwebdesigner.com) <a href=\"http:\/\/www.youtube.com\/watch?v=QFYkSqBvCAs\">Intro to Skeleton CSS Boilerplate<\/a> (youtube.com) For more tools and resources see\u00a0<a href=\"http:\/\/designinstruct.com\/roundups\/html5-frameworks\/\">here<\/a><\/li>\n<li><strong><a href=\"http:\/\/html5boilerplate.com\/\">HTML5 Boilerplate <\/a><\/strong>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\u2019s 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.<strong>HTML5 Boilerplate Tutorials <\/strong><a style=\"line-height: 1.5;\" href=\"http:\/\/net.tutsplus.com\/tutorials\/html-css-techniques\/the-official-guide-to-html5-boilerplate\/\">The Official Guide to HTML5 Boilerplate<\/a><span style=\"line-height: 1.5;\"> (net.tutsplus.com) <\/span><a href=\"http:\/\/www.youtube.com\/watch?v=oDlsOyPKUTM\">HTML5 Boilerplate Walkthrough<\/a> (youtube.com) <a href=\"http:\/\/blog.teamtreehouse.com\/html5-quick-start-with-boilerplate\">HTML5 Quick Start with Boilerplate<\/a> (teamtreehouse.com) For more tools and resources see\u00a0<a href=\"http:\/\/designinstruct.com\/roundups\/html5-frameworks\/\">here<\/a><\/li>\n<li><strong><a href=\"http:\/\/www.99lime.com\/elements\/\">HTML KickStart <\/a><\/strong>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.<strong>HTML KickStart Tutorials <\/strong><a style=\"line-height: 1.5;\" href=\"http:\/\/www.99lime.com\/elements\/#instructions\">HTML KickStart Getting Started Guide<\/a><span style=\"line-height: 1.5;\"><span style=\"line-height: 1.5;\"><span style=\"line-height: 1.5;\"> (99lime.com)<\/span><\/span><\/span><\/li>\n<li><strong><a href=\"http:\/\/lessframework.com\/\">Less Framework <\/a><\/strong>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.<strong>Less Framework Tutorials<\/strong><a style=\"line-height: 1.5;\" href=\"http:\/\/www.sitepoint.com\/responsive-web-design-with-html5-and-the-less-framework-3\/\">Responsive Web Design with HTML5 and the Less Framework<\/a><span style=\"line-height: 1.5;\"> (sitepoint.com)<\/span><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">CSS Preprocessors (+ extensions)<\/span><\/h4>\n<p>See <a href=\"http:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\">here<\/a> for a nice comparison between the two preprocessors<\/p>\n<ol>\n<li><strong>LESS<\/strong> LESS is built upon JavaScript, so intalling LESS is as easy as linking JavaScript library to your HTML document.\u00a0There 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. <a href=\"http:\/\/winless.org\/\" rel=\"external\">WinLess<\/a> and <a href=\"http:\/\/incident57.com\/less\/\" rel=\"external\">LESS.app<\/a>). <a title=\"http:\/\/lesscss.org\" href=\"http:\/\/lesscss.org\/\">LESS<\/a>\u00a0is a dynamic stylesheet language. You can write your CSS programmatically in a\u00a0<strong>.less<\/strong>\u00a0file and compile your output into a\u00a0<strong>.css<\/strong>\u00a0file. 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\u2019t 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: <strong>CSS3 Mixins<\/strong>: <a href=\"http:\/\/lesselements.com\/\" rel=\"external\">LESS Elements<\/a>, <a href=\"http:\/\/markdotto.com\/bootstrap\/\" rel=\"external\">Preboot<\/a>, <a href=\"https:\/\/github.com\/tophermade\/LESS-Mixins\" rel=\"external\">LESS Mixins<\/a>. <strong>Grid<\/strong>: <a href=\"https:\/\/github.com\/adrianlee44\/960gs.less\" rel=\"external\">960.gs<\/a>, <a href=\"https:\/\/github.com\/jonikorpi\/Frameless\" rel=\"external\">Frameless<\/a>, <a href=\"http:\/\/semantic.gs\/\" rel=\"external\">Semantic.gs <\/a><strong>Layout<\/strong>: <a href=\"https:\/\/github.com\/bisrael\/even.less\" rel=\"external\">Even.less <\/a><strong>Misc<\/strong>: <a href=\"http:\/\/twitter.github.com\/bootstrap\/\" rel=\"external\">Twitter Bootstrap<\/a>Two of the more popular front-end frameworks that use LESS are:\n<ul>\n<li><a title=\"http:\/\/twitter.github.com\/bootstrap\/\" href=\"http:\/\/twitter.github.com\/bootstrap\/\">Bootstrap<\/a><\/li>\n<li><a title=\"http:\/\/framelessgrid.com\/#downloads\" href=\"http:\/\/framelessgrid.com\/#downloads\">Frameless<\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>SASS<\/strong> Sass is running on <a href=\"http:\/\/www.ruby-lang.org\/en\/\" rel=\"external\">Ruby<\/a>. In Mac this has been pre-installed, but in Windows you probably need to get it installed before you can start playing with Sass. <a title=\"http:\/\/sass-lang.com\/\" href=\"http:\/\/sass-lang.com\/\">SASS<\/a>\u00a0is an extension of CSS3. It has two syntaxes:\u00a0<code>.scss<\/code>\u00a0and\u00a0<code>.sass<\/code>.\u00a0<code>.SCSS<\/code>\u00a0is the most common syntax used but it also supports the older\u00a0<a title=\"http:\/\/sass-lang.com\/docs\/yardoc\/file.INDENTED_SYNTAX.html\" href=\"http:\/\/sass-lang.com\/docs\/yardoc\/file.INDENTED_SYNTAX.html\">indented syntax<\/a>.Extensions: <a href=\"http:\/\/compass-style.org\/\" rel=\"external\">Compass<\/a>, the current and popular Sass-based extension. Compass has a number of Mixins to write CSS3 syntax in less time.\u00a0But Compass is beyond just CSS3 Mixins, it has added other very useful features such as <a href=\"http:\/\/compass-style.org\/reference\/compass\/helpers\/\" rel=\"external\">Helpers<\/a>, <a href=\"http:\/\/compass-style.org\/reference\/compass\/layout\/\" rel=\"external\">Layout<\/a>, <a href=\"http:\/\/compass-style.org\/reference\/compass\/typography\/\" rel=\"external\">Typography<\/a>, <a href=\"http:\/\/compass-style.org\/reference\/blueprint\/grid\/\" rel=\"external\">Grid Layout<\/a> and even <a href=\"http:\/\/compass-style.org\/reference\/compass\/utilities\/sprites\/sprite_img\/\" rel=\"external\">Sprite Images<\/a>. It also has <code>config.rb<\/code> file where we can control the CSS output and <a href=\"http:\/\/compass-style.org\/help\/tutorials\/configuration-reference\/\" rel=\"external\">some other preferences<\/a>. So, in short, Compass is an all-in-one package to do web development with Sass.<a href=\"http:\/\/mhs.github.io\/scout-app\/\">Scout<\/a> is a cross-platform app that delivers the power of <a href=\"http:\/\/sass-lang.com\/\" rel=\"external\">Sass<\/a> &amp; <a href=\"http:\/\/compass-style.org\/\" rel=\"external\">Compass<\/a> into the hands of web designers. \u00a0Since 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&#8217;s where Scout steps in.\u00a0Scout 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&#8217;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.<a href=\"http:\/\/livereload.com\/\">LiveReload<\/a><strong>\u00a0<\/strong>monitors changes in the file system. As soon as you save a file, it is <a href=\"http:\/\/livereload.com\/#compilers\">preprocessed as needed<\/a>, and the browser is\u00a0refreshed. Works with\u00a0CoffeeScript, SASS, LESS <a href=\"http:\/\/livereload.com\/#compilers\">and others<\/a>. (Still in alpha phase for Windows)Frameworks that include SASS and SCSS: <a title=\"http:\/\/foundation.zurb.com\/\" href=\"http:\/\/foundation.zurb.com\/\">Foundation <\/a><a title=\"http:\/\/gravityframework.com\/\" href=\"http:\/\/gravityframework.com\/\">Gravity <\/a><a title=\"http:\/\/framelessgrid.com\/#downloads\" href=\"http:\/\/framelessgrid.com\/#downloads\">Frameless<\/a><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">WordPress starter frameworks (free)<\/span><\/h4>\n<p>See <a title=\"WordPress starter frameworks (free)\" href=\"https:\/\/hesmid.nl\/test\/web-development-2\/wordpress-web-development-2\/wordpress-starter-frameworks-free\/\">this<\/a> post for a description of these frameworks<\/p>\n<ol>\n<li><a href=\"http:\/\/roots.io\/\"><strong>Roots<\/strong><\/a><\/li>\n<li><strong><a href=\"http:\/\/themefortress.com\/reverie\/\">Reverie<\/a> (based on Foundation)<\/strong><\/li>\n<li><strong><strong style=\"line-height: 1.5;\"><a href=\"http:\/\/fwp.drewsymo.com\/\">Foundation for WordPress<\/a><\/strong><\/strong><\/li>\n<li><span style=\"line-height: 1.5;\"><strong style=\"line-height: 1.5;\"><a href=\"http:\/\/www.elmastudio.de\/wordpress-themes\/yoko\/\">Yoko Theme<\/a><\/strong><\/span><\/li>\n<li><a style=\"line-height: 1.5;\" href=\"http:\/\/www.thedotmack.com\/2011\/07\/19\/1140-fluid-starkers-wordpress-theme\/\"><strong>1140 Starkers Theme for WordPress<\/strong><\/a><span style=\"line-height: 1.5;\">\u00a0<\/span><\/li>\n<li><strong style=\"color: #141412; line-height: 1.5;\"><a href=\"http:\/\/themes.simplethemes.com\/skeleton\/\">Skeleton WordPress Theme<\/a><\/strong><\/li>\n<li><strong style=\"color: #141412; line-height: 1.5;\"><\/strong><strong style=\"line-height: 1.5;\"><a href=\"http:\/\/whiteboardframework.com\/\">Whiteboard Framework<\/a><\/strong><\/li>\n<li><strong style=\"line-height: 1.5;\"><a href=\"http:\/\/themble.com\/bones\/\">Bones<\/a><\/strong><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Prototyping and wireframes <\/span><\/h4>\n<ol>\n<li><strong><a href=\"https:\/\/www.draw.io\/\">Draw.io<\/a><\/strong>\u00a0(quick sitemaps and mockups online)<\/li>\n<li>Balsamiq Mockups (paid)<\/li>\n<li><strong><a href=\"https:\/\/moqups.com\/?_escaped_fragment_=\/#!\/\">moqups<\/a><\/strong> (free)<\/li>\n<li><strong><a href=\"http:\/\/www.wirify.com\/\">wirify<\/a><\/strong>\u00a0<strong>(bookmarklet) <\/strong>bookmarklet that quickly creates a wireframe of any website<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Deployment<\/span><\/h4>\n<ol>\n<li><a href=\"https:\/\/github.com\/capistrano\/capistrano\/wiki\"><strong>Capistrano<\/strong><\/a> Capistrano is an <a title=\"Open source\" href=\"http:\/\/en.wikipedia.org\/wiki\/Open_source\">open source<\/a> tool for running scripts on multiple servers; its main use is deploying <a title=\"Web application\" href=\"http:\/\/en.wikipedia.org\/wiki\/Web_application\">web applications<\/a>. It automates the process of making a new version of an application available on one or more <a title=\"Web server\" href=\"http:\/\/en.wikipedia.org\/wiki\/Web_server\">web servers<\/a>, including supporting tasks such as changing databases.<\/li>\n<li><a href=\"http:\/\/crowdfavorite.com\/wordpress\/ramp\/\"><strong>RAMP<\/strong><\/a> : for content deployment<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Javascript Automation<\/span><\/h4>\n<ol>\n<li><a href=\"http:\/\/gruntjs.com\/\"><strong>Grunt.js <\/strong><\/a><span style=\"color: #000000;\"><span style=\"color: #000000;\">A task-based command line build tool for JavaScript projects, build with node.js.<\/span><\/span>There are Grunt modules for nearly <a href=\"https:\/\/npmjs.org\/search?q=grunt\">everything<\/a> (linting, minifying, testing, waiting, packaging, shell-exec\u2019ing, tagging, etc.), and rather predictably, sshing (with sftp). <a href=\"http:\/\/tech.toptable.co.uk\/blog\/2013\/08\/08\/grunt-your-deployments-too\/\">Deployment with Grunt<\/a>(instead of Capistrano)<a href=\"http:\/\/benalman.com\/news\/2012\/08\/why-grunt\/\">Discussion<\/a>: \u00a0Why grunt? Why not something else?Some examples:<br \/>\n&#8211; concatenation (css, js)<br \/>\n&#8211; uglify (js minification)<br \/>\n&#8211; grunticon: Create ping fallback icons for a folder of SVG icons<br \/>\n&#8211; SVGO (svg optimization)<\/p>\n<p>Grunt watch<\/li>\n<li><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Image tools <\/span><\/h4>\n<ol>\n<li><a href=\"http:\/\/noisepng.com\/\">noisepng<\/a>\u00a0&#8211; Create a noisy png<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">CSS\/ JS generators and help<\/span><\/h4>\n<ol>\n<li><strong><a href=\"http:\/\/www.css3generator.com\/\">css3 generator<\/a><\/strong><\/li>\n<li><strong><a href=\"http:\/\/cubic-bezier.com\/#.17,.67,.92,.14\">cubic-bezier.com<\/a><\/strong><\/li>\n<li><strong><a href=\"http:\/\/css3please.com\/\">css3please.com<\/a><\/strong><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">CSS\/ JS Playgrounds<\/span><\/h4>\n<ol>\n<li><strong><a href=\"http:\/\/dabblet.com\/\">dabblet<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/jsfiddle.net\/\"><strong>jsfiddle<\/strong><\/a> JSFiddle is a wonderful playground when it comes to JavaScript development since it provides a wide range of JavaScript libraries, probably more than you&#8217;ll ever need. Problem is it doesn&#8217;t use a live reload system meaning you have to hit &#8220;Run&#8221; everytime you make a change. It&#8217;s kind of annoying, but for JavaScript prototyping, it&#8217;s amazing.<\/li>\n<li><strong style=\"line-height: 1.5;\"><strong style=\"line-height: 1.5;\"><a href=\"http:\/\/cssdeck.com\/\">cssdeck <\/a><\/strong><\/strong>\n<ul>\n<li>Live reload<\/li>\n<li>Codecast feature (video coding)<\/li>\n<li>11 JavaScript libraries available: MooTools, jQuery, jQuery Mobile, Prototype, YUI, Underscore, Backbone, Modernizr, Sencha Touch, Dojo, Bootstrap<\/li>\n<li>Preprocessors: ZenCoding (HTML), Markdown (HTML), Slim (HTML), Jade (HTML), HAML (HTML), LESS (CSS), Stylus (CSS), SCSS (CSS), Sass (CSS), Compass (CSS), CoffeeScript (JS)<\/li>\n<li>Built-in options for Prefixfree and Normalize.css<\/li>\n<\/ul>\n<\/li>\n<li><strong><strong><a href=\"http:\/\/codepen.io\/\">codepen <\/a><\/strong><\/strong>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.<strong><strong><\/strong><\/strong>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.<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Typography<\/span><\/h4>\n<ol>\n<li><strong><span style=\"color: #000000;\"><a href=\"http:\/\/somadesign.ca\/projects\/fontfriend\/\">FontFriend<\/a>\u00a0(bookmarklet) <\/span><\/strong><span style=\"color: #000000;\">View a website with other fonts. Font\u00adFriend <\/span><span style=\"color: #000000;\">enables rapid check\u00ading of fonts and font styles directly in the browser with\u00adout edit\u00ading code and refresh\u00ading pages.<\/span><strong><\/strong><\/li>\n<li><a href=\"http:\/\/chengyinliu.com\/whatfont.html\"><strong>WhatFont<\/strong><\/a>\u00a0<strong>(bookmarklet) <\/strong>Quickly identify the fonts used on a website<\/li>\n<li><strong><a href=\"http:\/\/type-a-file.com\/#seafarer\">Type-a-file<\/a> <\/strong>Typographic toolkit.\u00a0A 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.<strong> <\/strong><\/li>\n<li><a href=\"http:\/\/www.myfonts.com\/WhatTheFont\/\"><strong>WhatTheFont <\/strong><\/a>Identify a font from images<\/li>\n<li><strong><a href=\"http:\/\/www.identifont.com\/index.html\">identifont <\/a><\/strong>Find fonts by \u00a0type, name, similarity or picture. Font database<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">JS goodness<\/span><\/h4>\n<ol>\n<li><strong><a href=\"http:\/\/coffeescript.org\/\">Coffeescript<\/a><\/strong><\/li>\n<li>JS Linter (JSHint in Sublime Text 2)<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Text Editors and Diff\/merge tools<\/span><\/h4>\n<ol>\n<li><strong><strong>Sublime Text 2 Use Sublime Text 2 as Git Mergetool: <\/strong><\/strong>\n<pre><code>git config --global mergetool.sublime.cmd \"subl -w \\$MERGED\"\r\ngit config --global mergetool.sublime.trustExitCode false \r\ngit config --global merge.tool sublime<\/code><\/pre>\n<pre><code>git mergetool -y<\/code><\/pre>\n<p>&nbsp;<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Debug WordPress<\/span><\/h4>\n<ol>\n<li><a href=\"http:\/\/wordpress.org\/plugins\/debug-bar\/\"><strong>Debug-bar<\/strong><\/a><\/li>\n<li><a href=\"http:\/\/wordpress.org\/plugins\/debug-bar-console\/\"><strong>Debug-bar console<\/strong><\/a><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">More WordPress<\/span><\/h4>\n<ol>\n<li><a href=\"http:\/\/wp-cli.org\/\"><strong>WP-CLI<\/strong><\/a> <strong>WP-CLI<\/strong> is a set of command-line tools for managing <a href=\"http:\/\/wordpress.org\/\">WordPress<\/a> installations. You can update plugins, set up multisite installs and much more, without using a web browser<\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Server Configuration Management<\/span><\/h4>\n<p>See also Mark Jaquit&#8217;s <a href=\"http:\/\/wordpress.tv\/2013\/07\/28\/mark-jaquith-confident-commits-delightful-deploys-2\/\">talk<\/a><\/p>\n<ol>\n<li><a href=\"http:\/\/puppetlabs.com\/\"><strong>Puppet<\/strong><\/a><\/li>\n<li><strong><a href=\"http:\/\/www.opscode.com\/chef\/\">Chef<\/a><\/strong><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Virtual Machine Management<\/span><\/h4>\n<p>See also Mark Jaquit&#8217;s\u00a0<a href=\"http:\/\/wordpress.tv\/2013\/07\/28\/mark-jaquith-confident-commits-delightful-deploys-2\/\">talk<\/a><\/p>\n<ol>\n<li><a href=\"http:\/\/www.vagrantup.com\/\"><strong>Vagrant\u00a0<\/strong><\/a><\/li>\n<\/ol>\n<h4><span style=\"color: #ff9900;\">Browser Testing<\/span><\/h4>\n<ol>\n<li><strong><a href=\"https:\/\/addons.mozilla.org\/en-us\/firefox\/addon\/yslow\/\">YSlow<\/a> plugin<\/strong><\/li>\n<li><strong><a href=\"https:\/\/github.com\/desktoppr\/wbench\/blob\/master\/bin\/wbench\">WBench<\/a><\/strong> website benchmarker<\/li>\n<li>Browserstack (not free, but great)<\/li>\n<li>Opendevicelab.com<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>What is what and why should I use it? Javascript Frameworks Node.js Node.js (Node) is an I\/O environment built on top of Google Chrome&#8217;s JavaScript runtime \u2014 essentially, a server-side implementation of JavaScript. Node&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20,4],"tags":[28],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/141"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":16,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/141\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}