The document discusses strategies for responsibly using JavaScript. It recommends: 1. Learning JavaScript fundamentals directly rather than relying on copying code. 2. Stop supporting outdated browsers like Internet Explorer and instead focus on modern standards. 3. Avoid browser detection and stop introducing non-standard code that breaks websites. 4. Leverage powerful developer tools and modern frameworks rather than workarounds. 5. Evolve use of JavaScript by adopting modern standards like ES2015 using compilers rather than blaming language shortcomings.

1. Fixing web and JS gaps
Christian Heilmann @codepo8

2. Today, I want to talk about JavaScript

3. • An incredibly versatile language
• Available web-wide and across
many platforms
• Toolset independent
• Forgiving and inviting
JavaScript is…

4. • In browsers on the web
• On the server
• In applications
• To access services
• As a data format (JSON)
• On hardware
• … your turn, surprise me :)
You can use JavaScript…

5. Javascript is in super high demand!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function

6. A quick reminder how
JavaScript is pretty
much the odd one
out…
Photo by nan palmero https://www.flickr.com/photos/97402086@N00/14187670430/

7. Javascript is not a
great language for
the web…
Photo by hajime7 https://www.flickr.com/photos/77798146@N00/3377368881

8. HTML and CSS are designed to be
fault tolerant.
https://adactio.com/jour nal/4272

9. Javascript is not fault tolerant.

10. One little mistake, and nothing
shows up.
Photo by heiner.adams https://www.flickr.com/photos/122794378@N08/19920120966

11. Thankfully only paranoid freaks turn
off JavaScript…
Photo by Mash Down Babylon https://www.flickr.com/photos/64896490@N 00/411071191

12. Well, not quite…

16. Sounds familiar?

17. JavaScript abuse is rampant…

18. 3MB of blocking JavaScript before
the first word appears on the page!
Photo by bionicteaching https://www.flickr.com/photos/29096601@N00/6057415565

19. This is one big issue we have in the
web community…
• Javascript is too powerfulfor its
own good.
• Almost everything that goes
wrong can be controlled and to
a degree fixed with JavaScript
• This leads to people relying on
libraries and frameworks

20. We use code we don’t understand
to fix issues we don’t have…
• Learning libraries and
frameworks beyond “hello
world” costs time and money.
• Time you don’t spend on
looking at optimising your code
• In essence, we value developer
convenience over user
experience.

21. Building libraries and frameworks
that magically fix things has
become fashionable…
• We work around browser issues
• We make web standards of
tomorrow work today.
• We build solutions to clean up
others and make them smaller
• And each of those comes with a
“don’t use in production”label.

22. </WEB
My goal for today:
let’s learn how to use JavaScript
responsibly and stay up-to-date.

23. The plan…
1. Fix the JavaScript learning
process…
2. Stop catering to undead
browsers
3. Stop breaking the web
4. Use the amazing tools we have
5. Evolve JavaScript itself

24. </WEB
1. The JavaScript Learning Process

25. Back in the days, learning JavaScript
worked a bit like this…
• Look at the source of web sites
using view-source
• Copy and paste the bits that look
like they are responsible for
some things
• Change some numbers around
• Run into errors
• Blame Internet Explorer

26. Today we’re more professional
about this…
• Search for a solution on Stackoverflow
• Copy and paste the bits that look like
they are responsible for some things
• Change some numbers around
• Run into errors
• Blame JavaScript for being a terrible
language
• For goodmeasure, blame Internet
Explorer

27. The full stack overflow developer
https://www.christianheilmann.com/2015/07/17/the-full-stackoverflow-devel oper/

28. You are better than that!
• There is no lack of free online
resources for learning JavaScript
• Watch talks, do online courses,
download and read free books.
• Learn by doing and playing with
the language - if you don’t know
it, analyse it.
• Share your knowledge, when
you teach you end up learning.

29. </WEB
2. Removing scapegoats: IE is dead!

30. Removing the largest stumbling block of
the web…

31. @MSEDGEDEV
uservoice.modern.ie
status.modern.ie
remote.modern.ie
Open communication…

32. Moving from Trident to EdgeHTML

33. ✘VML
✘attachEvent()
✘currentStyle
✘X-UA-Compatible (render
modes)
✘IE Layout Quirks
✘VBScript
✘Conditional Comments
✘MS-Prefixed Events
All the non-standard code is gone –
stop worrying about and supporting it!

34. No more plugins!

35. </WEB
3. Stop breaking things!

36. If you think
JavaScript, think
escalators.
Photo by Nicolas Alejandro Street Photography https://www.flickr.com/photos/80835334@N07/11328584795

37. IE 11 is still there, but only on demand –
people rely on non-standard code…

38. Building a new browser taught us
lots…
Photo by Schwar https://www.flickr.com/photos/83868261@N 00/7854935610

39. Moving from Trident to EdgeHTML

40. You can’t fix what you don’t get…
https://twitter.com/Caged/status/590602214021922818

41. Photo by Tim Dorr https://www.flickr.com/photos/60723528@N00/2096272747
User agent sniffing…

42. USER AGENTSNIFFING…
Parsing the “Pack of lies”…

43. Let’s detect mobile!
What can go wrong?
window.mobileCheck = function() {
var check = false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi
ptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera
m(ob|in)i|palm(
os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|win
dows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a
wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-
m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-
|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-
d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-
mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-|
|_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-
|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt
|kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-
w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-|
|o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-
|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-
8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-
)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-
|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-
|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-
v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g
|nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check =
true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }

44. ✘You can’t safely detect a browser.
✘You fix your code in time and
environment, you might as well code
native.
✘If you really need to fix an issue with a
specific browser, include agent and
version number.
Stop doing that!

45. ✘Outdated libraries forced us to optimise
old practices in the JS engine
✘Shoddily written polyfills broke new
JavaScript functionality and forced us to
rename new methods (array.contains,
f.e.)
✘Old libraries do browsers sniffing and
apply old syntax of now standardised
functionality.
Keep your helper tools up-to-date

46. http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-code-scan
Scan and remove!

47. </WEB
4. Removing scapegoats: tooling rocks

48. • Developer tools in browsers are
outstanding and give us incredible
insights.
• We can debug across devices and even
convert HTML5 to native apps for
closed systems (manifold.js/vorlon.js).
Our development environment is
incredible!

49. • Editors have linting, build integration,
and some are even written in JavaScript
and run in the browser.
• We share codeon GitHub and help
debug problems using JSFiddle, JSBin
and others…
Our development environment is
incredible!

50. • Open Source and cross platform
• Written in JavaScript
• Includes debugging and linting -
learn your mistakes while you
write code
• Fully Extensible using JavaScript
• GitHub integration
https://code.visualstudio.com/
Visual Studio Code

51. • One hour free test server
• Authenticate with Google,
Facebookor Microsoft
• Keep your codeby forking or
downloading it
https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/
Try out Node and Express

52. LIVE DEMO…
Photo by Jo Naylor https://www.flickr.com/photos/11598937@N08/3479161418
Everybody duck!

54. </WEB
5. Removing scapegoats: evolve JS

55. JavaScript has grown up…
It is an evergreen language called ECMAScript

56. http://kangax.github.io/compat-table/es6/Support is very encouraging…

57. https://babeljs.io
If more is needed, you can transpile…

58. http://typescriptlang.org/
Or you can use a superset language…

59. https://featuretests.io/
Feature testing is another option…

60. https://babeljs.io/docs/learn-es2015/
Babel has a lot of docs and live testing…

61. http://exploringjs.com/es6/
Axel Rauschmayer has a free book!

62. Love JavaScript!
It is everywhere and
ready to please…

63. THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM