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
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
5.7k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
理論と実務のギャップを超える
eycjur
0
140
Le côté obscur des IA génératives
pascallemerrer
0
150
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
560
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
5
2.2k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
650
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Designing for Performance
lara
610
69k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Documentation Writing (for coders)
carmenintech
75
5.1k
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