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
70
De 7 job profiler på MMD, EASV Sønderborg
beutnagel
1
77
Project Management for Freelancers
beutnagel
3
540
SUPER Projects for Freelancers (Short version)
beutnagel
0
50
Web Project Management
beutnagel
1
210
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Visualization
eitanlees
148
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Faster Mobile Websites
deanohume
310
31k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Applications with DynamoDB
mza
96
6.7k
Being A Developer After 40
akosma
91
590k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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