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
Web Dev Toolbox
Search
Béla Varga
January 07, 2014
Programming
2
310
Web Dev Toolbox
The Toolbox of an modern web developer.
Béla Varga
January 07, 2014
Tweet
Share
More Decks by Béla Varga
See All by Béla Varga
Web Developer Toolbox
netzzwerg
29
3k
JavaScript as the first programming language for children
netzzwerg
0
170
Barcamp Salzburg "The Next Web" - Keynote
netzzwerg
0
94
PONG Tutorial for Coder Dojo Munich
netzzwerg
0
81
Other Decks in Programming
See All in Programming
私はどうやって技術力を上げたのか
yusukebe
43
17k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
株式会社 Sun terras カンパニーデック
sunterras
0
230
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
190
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
CSC509 Lecture 02
javiergs
PRO
0
410
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
A Tale of Four Properties
chriscoyier
160
23k
Agile that works and the tools we love
rasmusluckow
331
21k
Faster Mobile Websites
deanohume
310
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
Automating Front-end Workflow
addyosmani
1371
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
88
4.8k
It's Worth the Effort
3n
187
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
Béla Varga ecmanauts.com 1 Tools Best Practices WORKFLOW Web Development
TOOLBOX
Béla Varga ecmanauts.com 2 Context - code quality - more
speed - Maintenance - usability - coolness
Béla Varga ecmanauts.com 3 Code Quality - style guide &
commit hocks - jshint & JSLint - testing & analysis - documentation - pair programming
Béla Varga ecmanauts.com 4
Béla Varga ecmanauts.com 5 DOCUMENTATION - mozilla developer network -
WebPlatform.org - Stackoverflow - Blogs - SPECS
Béla Varga ecmanauts.com 6 DOCUMENTATION IEEE 754 - 7.11 Every
NaN shall compare unordered with everything, including itself.
Béla Varga ecmanauts.com 7 Style guides - use code standards
- take the winning style - not which but same style - code should be look like it was be written by one guy
Béla Varga ecmanauts.com 8 Prototyping - rapid & iterative -
Online playgrounds - Local with Live REload - direct inbrowser edit - js console (node, jsc)
Béla Varga ecmanauts.com 9 online playground - JSFiddle, jsbin, codepen
- live Preview - JS Libs included - Preprocessors included - collaboration
Béla Varga ecmanauts.com 10 Scaffolding - Boilerplates - Frameworks -
tools like yeoman - PAckage manager
Béla Varga ecmanauts.com 11 boilerplates - faster development - best
practices included - but you should look inside - html5boilerplate, bootstrap, skeleton, foundation, 960 grid system, ...
Béla Varga ecmanauts.com 12 Package Manager - NPM - Bower
(by twitter) - Ender (NPM registry) - volo (like bower) - component (commonjs) - jam (amd)
Béla Varga ecmanauts.com 13 Environments - SimpleHTTPServer - Grunt -
WAmp & Mamp - Virtual Machine - Vagrant - Docker.io
Béla Varga ecmanauts.com 14 GRunt Connect - static web server
- tooling with js - add own middleware - works on all os - for fast testing only
Béla Varga ecmanauts.com 15 Virtual Box - real web server
- works on all os - portable - open source
Béla Varga ecmanauts.com 16 Vagrant - dev Environment - single
file config - use chef or puppet - works on all os
Béla Varga ecmanauts.com 17 docker - apps as container -
Easy app delivery - Easy deploying - scaling systems
Béla Varga ecmanauts.com 18 IDE vs Editor - online tools
- IDEs for business workflow - Editors for fast hacking - depends on you - depends on the company
Béla Varga ecmanauts.com 19 Editor - smaller - faster -
Extendable - for single programmer - sublime, brackets, vi
Béla Varga ecmanauts.com 20 sublime text 2/3 - clean &
functional - fast code Editor - plugins, snippets - package control - sublimeLinter, codeintel (sync sublime with dropbox)
Béla Varga ecmanauts.com 21 IDE - for projects (.settings) -
Maybe slower - workflow integrated - for company workers - webstorm, visual studio
Béla Varga ecmanauts.com 22 WEbstorm - good js / node
support - refactoring - debugging - Unit testing - zen coding, Emmet
Béla Varga ecmanauts.com 23 Browser tools - developer Tools -
Extensions / plugins - Bookmarklets - dev tool snippets
Béla Varga ecmanauts.com 24 Chrome CAnary - newest experiments -
chrome devtools - source maps - live editing - debugging - profilling
Béla Varga ecmanauts.com 25 Chrome CAnary
Béla Varga ecmanauts.com 26 browser plugins - web developer -
Edit this cookie - page speed - firebug - yslow - clear cache
Béla Varga ecmanauts.com 27 bookmarklets - javascript snippets - Easy
installation - lighter then plugins - cross browser - No Updates
Béla Varga ecmanauts.com 28 bookmarklets 㲗 Resizer
Béla Varga ecmanauts.com 29 devtool snippets
Béla Varga ecmanauts.com 30 Command line - settings - bindings
- shell scripts - Coloring
Béla Varga ecmanauts.com 31 command line - bourne, bash, zsh
- themes, tools, plugins - alias, path, git - oh-my-zsh, prezto - vi, grep, pipes
Béla Varga ecmanauts.com 32
Béla Varga ecmanauts.com 33 .dotfiles - git config / git
ignore - shell config - editorconfig.org - dotfiles.github.io - sync over dropbox
Béla Varga ecmanauts.com 34 Testing - usability testing - Device
testing - browser testing - functional Testing - Unit testing
Béla Varga ecmanauts.com 35 browser testing - graded browser support
- pixel perfect is dead - user first - smallest device first
Béla Varga ecmanauts.com 36 browser testing - modern.ie - browserstack
- saucelabs - Virtual Machine - opendevicelab & DEvice
Béla Varga ecmanauts.com 37
Béla Varga ecmanauts.com 38 device testing - responsive - os
GUI & Theme - Screenshots - functional Testing - Unit testing
Béla Varga ecmanauts.com 39 synchronized testing - adobe edge inspect
cc - grunt + live Reload - ghostlab (mac) - remote preview (js) - emmet livestyle (plugin) cross DEvice
Béla Varga ecmanauts.com 40 Debugging - Console API - Breakpoints
- debugger Statement - Chrome Canary Dev Tools - remote Debugging
Béla Varga ecmanauts.com 41 Profiling - memory leaks - render
speed - dom reflow - nEtwork speed - source analysis - code complexity
Béla Varga ecmanauts.com 42 Version Management - Git Workflows -
visual merging tools - Pre Commit Hocks
Béla Varga ecmanauts.com 43 Git WorkFlow - centralized Workflow -
feature branch Workflow - gitflow Workflow - forking Workflow http://www.atlassian.com/git/workflows
Béla Varga ecmanauts.com 44 Gitflow WorkFlow
Béla Varga ecmanauts.com 45 DEployment - version checkout - build
prozess - testing - server distribution - cache buster, cdn purge - continuous deployment
Béla Varga ecmanauts.com 46 the end