SlideShare a Scribd company logo
1 of 63
Download to read offline
Fixing web and JS gaps
Christian Heilmann @codepo8
Today, I want to talk about JavaScript
• An incredibly versatile language
• Available web-wide and across
many platforms
• Toolset independent
• Forgiving and inviting
JavaScript is…
• 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…
Javascript is in super high demand!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
A quick reminder how
JavaScript is pretty
much the odd one
out…
Photo by nan palmero https://www.flickr.com/photos/97402086@N00/14187670430/
Javascript is not a
great language for
the web…
Photo by hajime7 https://www.flickr.com/photos/77798146@N00/3377368881
HTML and CSS are designed to be
fault tolerant.
https://adactio.com/jour nal/4272
Javascript is not fault tolerant.
One little mistake, and nothing
shows up.
Photo	by	heiner.adams https://www.flickr.com/photos/122794378@N08/19920120966
Thankfully only paranoid freaks turn
off JavaScript…
Photo by Mash Down Babylon https://www.flickr.com/photos/64896490@N 00/411071191
Well, not quite…
Fixing web and JS gaps
Fixing web and JS gaps
Fixing web and JS gaps
Sounds familiar?
JavaScript abuse is rampant…
3MB of blocking JavaScript before
the first word appears on the page!
Photo by bionicteaching https://www.flickr.com/photos/29096601@N00/6057415565
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
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.
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.
</WEB
My goal for today:
let’s learn how to use JavaScript
responsibly and stay up-to-date.
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
</WEB
1. The JavaScript Learning Process
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
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
The full stack overflow developer
https://www.christianheilmann.com/2015/07/17/the-full-stackoverflow-devel oper/
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.
</WEB
2. Removing scapegoats: IE is dead!
Removing the largest stumbling block of
the web…
@MSEDGEDEV
uservoice.modern.ie
status.modern.ie
remote.modern.ie
Open communication…
Moving from Trident to EdgeHTML
✘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!
No more plugins!
</WEB
3. Stop breaking things!
If you think
JavaScript, think
escalators.
Photo by Nicolas Alejandro Street Photography https://www.flickr.com/photos/80835334@N07/11328584795
IE 11 is still there, but only on demand –
people rely on non-standard code…
Building a new browser taught us
lots…
Photo by Schwar https://www.flickr.com/photos/83868261@N 00/7854935610
Moving from Trident to EdgeHTML
You can’t fix what you don’t get…
https://twitter.com/Caged/status/590602214021922818
Photo by Tim Dorr https://www.flickr.com/photos/60723528@N00/2096272747
User agent sniffing…
USER AGENTSNIFFING…
Parsing the “Pack of lies”…
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; }
✘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!
✘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
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-code-scan
Scan and remove!
</WEB
4. Removing scapegoats: tooling rocks
• 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!
• 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!
• 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
• 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
LIVE DEMO…
Photo by Jo Naylor https://www.flickr.com/photos/11598937@N08/3479161418
Everybody duck!
Fixing web and JS gaps
</WEB
5. Removing scapegoats: evolve JS
JavaScript has grown up…
It is an evergreen language called ECMAScript
http://kangax.github.io/compat-table/es6/Support is very encouraging…
https://babeljs.io
If more is needed, you can transpile…
http://typescriptlang.org/
Or you can use a superset language…
https://featuretests.io/
Feature testing is another option…
https://babeljs.io/docs/learn-es2015/
Babel has a lot of docs and live testing…
http://exploringjs.com/es6/
Axel Rauschmayer has a free book!
Love JavaScript!
It is everywhere and
ready to please…
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM

More Related Content

What's hot

Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatChristian Heilmann
 
Making ES6 available to all with ChakraCore and Typescript
Making ES6 available to all with ChakraCore and TypescriptMaking ES6 available to all with ChakraCore and Typescript
Making ES6 available to all with ChakraCore and TypescriptChristian Heilmann
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015Christian Heilmann
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webChristian Heilmann
 
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutUpgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutChristian Heilmann
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…Christian Heilmann
 
NodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeNodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeChristian Heilmann
 
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6Aayush Shrestha
 
Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Christian Heilmann
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes backChristian Heilmann
 
Turning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftChristian Heilmann
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteChristian Heilmann
 
5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement Tips5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement TipsTroy Miles
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSChristian Heilmann
 
High performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrongHigh performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrongTao Gao
 
Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote Christian Heilmann
 
Advancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSAdvancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSChristian Heilmann
 
Developing The Web
Developing The WebDeveloping The Web
Developing The Webtimoh
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteChristian Heilmann
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 

What's hot (20)

Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix that
 
Making ES6 available to all with ChakraCore and Typescript
Making ES6 available to all with ChakraCore and TypescriptMaking ES6 available to all with ChakraCore and Typescript
Making ES6 available to all with ChakraCore and Typescript
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
 
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutUpgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…
 
NodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeNodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and Node
 
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
 
Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes back
 
Turning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and Microsoft
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend Keynote
 
5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement Tips5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement Tips
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJS
 
High performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrongHigh performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrong
 
Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote
 
Advancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSAdvancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJS
 
Developing The Web
Developing The WebDeveloping The Web
Developing The Web
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynote
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 

Viewers also liked

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Christian Heilmann
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConChristian Heilmann
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
Machine Learning on the web - moving from Terminator to Star Trek
Machine Learning on the web - moving from Terminator to Star TrekMachine Learning on the web - moving from Terminator to Star Trek
Machine Learning on the web - moving from Terminator to Star TrekChristian Heilmann
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindChristian Heilmann
 

Viewers also liked (8)

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
Javascript isn't hard
Javascript isn't hardJavascript isn't hard
Javascript isn't hard
 
Machine Learning on the web - moving from Terminator to Star Trek
Machine Learning on the web - moving from Terminator to Star TrekMachine Learning on the web - moving from Terminator to Star Trek
Machine Learning on the web - moving from Terminator to Star Trek
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016
 
Sharing our Coder Privilege
Sharing our Coder PrivilegeSharing our Coder Privilege
Sharing our Coder Privilege
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 

Similar to Fixing web and JS gaps

Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Christian Heilmann
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st CenturyMateusz Kwasniewski
 
Cyberlator meet up
Cyberlator meet upCyberlator meet up
Cyberlator meet upSeun Faluyi
 
Web browsers and browser version support
Web browsers and browser version supportWeb browsers and browser version support
Web browsers and browser version supportIan Brennan
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building ProductsHayden Bleasel
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleyn_adam_stanley
 
Desarrollo de apps multiplataforma con tecnologías web
Desarrollo de apps multiplataforma con tecnologías webDesarrollo de apps multiplataforma con tecnologías web
Desarrollo de apps multiplataforma con tecnologías webSoftware Guru
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
 

Similar to Fixing web and JS gaps (20)

Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
 
Cyberlator meet up
Cyberlator meet upCyberlator meet up
Cyberlator meet up
 
Web browsers and browser version support
Web browsers and browser version supportWeb browsers and browser version support
Web browsers and browser version support
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
 
Mobile html5 v2
Mobile html5 v2Mobile html5 v2
Mobile html5 v2
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanley
 
Desarrollo de apps multiplataforma con tecnologías web
Desarrollo de apps multiplataforma con tecnologías webDesarrollo de apps multiplataforma con tecnologías web
Desarrollo de apps multiplataforma con tecnologías web
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Fixing web and JS gaps

  • 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
  • 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.
  • 30. Removing the largest stumbling block of the web…
  • 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!
  • 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
  • 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!
  • 55. JavaScript has grown up… It is an evergreen language called ECMAScript
  • 57. https://babeljs.io If more is needed, you can transpile…
  • 58. http://typescriptlang.org/ Or you can use a superset language…
  • 60. https://babeljs.io/docs/learn-es2015/ Babel has a lot of docs and live testing…
  • 62. Love JavaScript! It is everywhere and ready to please…