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
300
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
92
PONG Tutorial for Coder Dojo Munich
netzzwerg
0
76
Other Decks in Programming
See All in Programming
GraphRAGの仕組みまるわかり
tosuri13
8
510
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
400
Discover Metal 4
rei315
2
110
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
WindowInsetsだってテストしたい
ryunen344
1
220
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
3
1.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing for Performance
lara
609
69k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
How GitHub (no longer) Works
holman
314
140k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
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