Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cool Tools that make Front-end Development Fun
Search
Jarne W. Beutnagel
October 31, 2012
3
280
Cool Tools that make Front-end Development Fun
Jarne W. Beutnagel
October 31, 2012
Tweet
Share
More Decks by Jarne W. Beutnagel
See All by Jarne W. Beutnagel
TOHA dag 1 på EASV
beutnagel
1
69
De 7 job profiler på MMD, EASV Sønderborg
beutnagel
1
76
Project Management for Freelancers
beutnagel
3
540
SUPER Projects for Freelancers (Short version)
beutnagel
0
49
Web Project Management
beutnagel
1
210
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Speed Design
sergeychernyshev
32
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Unsuck your backbone
ammeep
671
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Transcript
Cool Tools That make Front-end development fun!
Cool Tools that make front-end development fun! Jarne W. Beutnagel
ITDays October 2012
[email protected]
www.beutnagel.dk This slide is available at www.beutnagel.dk/itdays2012/
Purpose?
What is out there?
None
Buh! - Repetitive tasks - Starting over again EVERY time
Y eah! - Effective workflow - Productive environment
How it used to be
None
None
How it is now
None
None
None
None
Starting Projects
Boilerplates
HTML5 Boilerplate http://html5boilerplate.com/
Initializr http://www.initializr.com/
Bootstrap http:// twitter.github.com/bootstrap /
Jetstrap http://jetstrap.com/
CSS Grids
960 Grid System http:// 960.gs /
Blueprint http://blueprintcss.org/
YUI Grid http:// developer.yahoo.com/yui/grids /
Reset CSS
Reset Remove all browser defaults Normalize Preserve useful defaults Correct
a few bugs
Reset.css http://meyerweb.com/eric/tools/css/reset/
Normalize.css http://necolas.github.com/normalize.css/
cssreset.com http://www.cssreset.com/
CSS Helpers
CSS Generator http:// css3generator.com /
Westciv http://westciv.com/tools/
Button X http://webarti.com/best‐CSS3‐button‐maker/
Colorzilla http://colorzilla.com/gradient‐editor
Subtle Patterns http://subtlepatterns.com/
Specificity Calculator http://specificity.keegan.st/
Prefixr http://prefixr.com
Working with Browsers
Online Refs
HTML5 Test http://html5test.com
CSS3 Test http://css3test.com
HTML5 Please http://html5please.com
Webplatform.org http://www.webplatform.org/
Shims & Polyfills
What it is: Shims add functionality to an API and
polyfills add to the Browser API Use functionality that is not 100% supported by all browsers
Modernizr http://modernizr.com
https://github.com/Modernizr/Modernizr/wiki/HTML5‐ Cross‐Browser‐Polyfills Polyfills, Shims & Fallbacks
Dev Tools
Chrome Dev Tool https://developers.google.com/chrome‐developer‐tools/docs/overview
Firebug http://getfirebug.com
HTTP Headers https://chrome.google.com/webstore/detail/http‐headers‐‐log‐examine/aaflgiahilldnhmlfpemmiinkcljjmli
Web Developer https:/
Scripting
NodeJS
What it is: Non‐blocking event driven I/O Server scripting Allocate
resources on a as‐needed basis
NodeJS http://nodejs.org/
A command line approach Comes with NPM – The Node
Package Manager (https://npmjs.org/)
Fonts
Libraries
Typekit https://typekit.com/
Google Web Fonts http://www.google.com/webfonts
Adobe Web Fonts http://html.adobe.com/edge/webfonts
WhatFont Plugin http://chengyinliu.com/whatfont.html
Testing
Linting
JSLint http://www.jslint.com/
CSSLint http://csslint.net/
Other linters: jquery, coffeescript, ruby, php etc
User Actions
Selenium http://seleniumhq.org
What it is: Firefox plugin Record‐and‐playback of interactions with the
browser
Unit Test
What it is: Check functionality of code Test by assertion
QUnit.js http://qunitjs.com
Jasmine http://github.com/pivotal/jasmine
Read more: http://coding.smashingmagazine.com/2012/06/ 27/introduction‐to‐javascript‐unit‐testing/
Browser Test
Browserlab http://browserlab.adobe.com
Browserstack http://browserstack.com
Browserling http:// browserling.com
Hide My Ass http://hidemyass.com
Performance
Pingdom Tools http://tools.pingdom.com/fpt/
Google Page Speed http://developers.google.com/speed/pagespeed
Loads.in http://loads.in/
None
Fun Markup
Templating
What it is: Allows for easy markup Compiles to HTML
Can insert data
Jade http://jade‐lang.com
Haml http://haml.info/
Slim http://slim‐lang.com/
Markdown http://daringfireball.net/projects/markdown/
Fun CSS
Preprocessors
What it is: Add Dynamic to styling Variables, Mixins, Operations,
Functions
LESS http://lesscss.org /
SASS http://sass‐lang.com /
Compass http://compass‐style.org /
Stylus http://learnboost.github.com/stylus /
Dev Standard
What it is: Structure your CSS in a consistent manner
Structure for maintainability and flexibility
SMACSS http://smacss.com /
Degradation
CSS3 Degrade Bookmarklet http://davatron5000.github.com/deCSS3/
Fun Scripting
Preprocessors
What it is: Simplify how you write javascript Adopt a
simpler language and compile to javascript
Coffeescript http://coffeescript.org
Google Dart http://code.google.com/p/dart/
Others https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
Fun Apps
Processors
What it is: Applications that run in the background Autocompiles
LESS, SASS, Compass, Jade, Haml, Coffeescript, etc
Codekit (mac) http://incident57.com/codekit/
Fire.app http://fireapp.handlino.com/
Toolkit
LiveReload http://livereload.com/
Adobe Edge Tools http://html.adobe.com/edge/
Online Playgrounds
GitHub https://github.com/
JSFiddle http://jsfiddle.net/
SQL Fiddle http://sqlfiddle.com/
CSSDeck http://cssdeck.com/
CodePen http://codepen.io/
Codrops http://tympanus.net/codrops/
None
None