A presentation at enterJS in in Darmstadt, Germany by Chris Heilmann
Seven ways to be a happier JavaScript developer Chris Heilmann (@codepo8) April 2018
ways to be a happier JavaScript developer ▪ Understanding that JavaScript is not a language ▪ Concentrating on the now ▪ Limiting our development environment ▪ Making it harder to write bad code ▪ Getting to know our tooling ▪ Giving back to others ▪ Muffling the noise
Understanding that JavaScript is not a language…
JavaScript is a lot of things… ▪ Far from perfect ▪ Everywhere ▪ Free to use ▪ Environment independent ▪ Freely documented ▪ Instantly gratifying
JavaScript’s versatility means diverse needs. ▪ Web scripts ▪ WebView based solutions (Electron) ▪ Browser extensions ▪ Web based apps (PWA) ▪ Server-side solutions (Node) ▪ Convertible to binary formats (WebAssembly) ▪ Powering Robots (Nodebots) ▪ Packages (NPM)
JavaScript is much more now than we ever expected… ▪ A standardised language (TC39) ▪ An ecosystem ▪ A community ▪ An opportunity to do a lot with one language ▪ A chance to cause damage (performance, security)
Relax - in a world of options nobody can be an expert in all of them.
Concentrating on the now…
Worries of the past shouldn’t prevent us from creating…
Focusing exclusively on the next cool thing is as stifling and depressing
developer.mozilla.org/en-US
caniuse.com
Limiting our development environment
The web development trinity Editor ▪ Where we code ▪ Where we tweak themes ▪ Where we mix spaces and tabs – like animals Terminal ▪ Where we do version control ▪ Where we run build tasks ▪ Where we deploy ▪ Where we tweak themes ▪ Where we assume everyone runs OSX Browser ▪ Where we debug ▪ Where we check and tweak visual output ▪ Where we audit ▪ Where we annoy the end user with odd log messages.
That is a lot of duplication and multiplication with choice
Tooling is starting to overtake that historically grown trinity.
Good editors consolidate features to avoid context switching.
VS Code (@code) Open Source, Cross-platform Hundreds of extensions Highly theme-able Built-in source control support Built-in terminal Integrates into build processes Written and extensible in TypeScript Straightens and lightens teeth with repeat use ▪ Possibly is good against hair loss ▪ Gluten free, macrobiotic ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ code.visualstudio.com
VS Code (@code) Open Source, Cross-platform Hundreds of extensions Highly theme-able Built-in source control support Built-in terminal Integrates into build processes Written and extensible in TypeScript Straightens and lightens teeth with repeat use ▪ Possibly is good against hair loss ▪ Gluten free, macrobiotic ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ twitter.com/crandycodes/status/983488436756627456 code.visualstudio.com
code.visualstudio.com/updates/v1_22#_node-debugging
smashingmagazine.com/2018/01/visual-studio-code vscodecandothat.com
glitch.com Instead of using your own machine, why not try online before? jsbin.com codepen.io
Making it harder to write bad code.
Applying a stricter ruleset pre-empts mistakes
Linting > Debugging ▪ Find mistakes while you make them ▪ Based on the experience and consensus of many others ▪ Learn from explanations of linting results ▪ Install and configure, or use in-built linting. code.visualstudio.com
Moving from knowing .* to learning by making mistakes
Adding custom linting and validation to your dev and release process. webhint.io
Getting to know our tooling
It is true that our tools have become much more complex.
Knowing them gives you superpowers and insights how to build great solutions
Step one is to stop using console.log() and use breakpoints instead. code.visualstudio.com/Docs/editor/debugging smashingmagazine.com/2018/02/javascript-firefox-debugger/
Giving back to others
Take part in the JavaScript community... ▪ Help document ▪ Help clean up and send pull requests ▪ Publish your own work as open source ▪ Enjoy meetups and events ▪ Help by example, not by telling people what they should do
Muffling the noise…
Not everybody cares about the nuts and bolts and has endless time to invest… twitter.com/headjs_ru/status/955333399564161024
It is easy to get tempted to sell people your experience as “best practice”
Find the largest item in the array…
Once learned, never forgotten…
Loop optimisation
Using native methods instead of “if”…
Looking up array methods..
Embracing new language features…
Which one is the best?
It depends™ ▪ Who is writing the code? ▪ Where does it run? ▪ How clean is the data we deal with? ▪ What horrible old environment needs support? ▪ Who will maintain it? ▪ How likely is it ever to change? ▪ How will it be used?
Validate and triage ▪ Let’s not feel bad if not everything in the JS world excites us ▪ Not everything hot and cool is ready to replace what we are comfortable with. ▪ If it doesn’t make our lives easier, it is OK to not use it – hype moves fast and forgets fast. ▪ Let’s be excited, but also ready to give it a “meh”
Projection isn’t good… ▪ What makes us effective can be very subjective ▪ It makes sense to talk about our success. ▪ It makes less sense trying to force others to do the same ▪ New approaches lead to new happy paths, let’s not discourage people from finding theirs.
Let’s not kid ourselves about the bleeding edge… ▪ The amazing new idea of today very often becomes the problem of tomorrow ▪ Production code moves less fast than we think ▪ Our end users aren’t guinea pigs or canaries ▪ It is the bleeding edge, make sure you have enough blood to give
Let’s make this a great community… ▪ Let’s be the people we’d like to have met when we started ▪ Let’s be kind ▪ Let’s be supportive ▪ Let’s allow people to learn by making mistakes and letting off steam ▪ Let’s not get lost in pointless drama
Thanks! Chris Heilmann @codepo8 Terminal photo by Terminal 5 Insider Editor photo by John Oxley Library Browser photo by Joseph Brent
Whether you like it or not, JavaScript is here to stay and has evolved from a fringe programming language to the most used one in our market. Its versatility both in use and in dealing with syntax are reasons why that is the case and why some people have a hard time getting their head around it.
In this keynote you'll learn a few tricks and ideas how you can cast aside your dislikes and worries and find a way to embrace the wild world of JavaScript. You don't need to love it, but there is a big danger in JavaScript written by people who don't appreciate its power. We want to create happy users. Therefore we need to have happy developers.
The following resources were mentioned during the presentation or are useful additional information.
A great, open source, lightweight editor with huge IDE features
An ongoing resource showing great little tricks in VSCode
A great way to build apps in the browser without messing up your own machine trying out all kind of technologies.
Interactive JavaScript editor in the browser, allows for all kind of preprocessors and a great tool to show a coding problem and asking people for advice.
A great, very creative community with an interactive online editor.
A great, very creative community with an interactive online editor.
Here’s what was said about this presentation on social media.
for free. You
can too.