Hinting at a better web

Christian Heilmann
Christian HeilmannSenior Program Manager Developer Experience and Evangelism at Microsoft
Hinting at a better web…
Chris Heilmann (@codepo8) September 2018
What is the purpose
of a browser?
▪ Render web content
▪ Show multimedia content
▪ Follow and inspire web standards
@codepo8
@codepo8
A changed, ubiquitous web.
The job of a browser
changed drastically…
▪ Show web and multimedia content
fast and reliably
▪ Give access to the web regardless of
ability
▪ Keep users safe by blocking unsafe
content and patch attack vectors
▪ Remember users’ history and access
credentials – or remember nothing
▪ Allow for detailed customisation
(including extensibility)
▪ Sync content across a range of
devices
@codepo8
Audiences with
different needs…
▪ Consumers of the web
▪ Creators of web content
▪ Web Developers
▪ Extension Developers
▪ App Developers
▪ IT Departments…
@codepo8
The need to be
forgiving…
▪ Anyone is allowed to write code for
the web – or use whatever they
want to create that code.
▪ Whatever goes wrong, it is the
browser’s fault
▪ Users shouldn’t suffer from
developer errors
▪ Legacy products will never get fixed
▪ You can’t break the web
@codepo8
The mess that
created…
▪ The web has become a render
target amongst many others
▪ Releasing often and developer
convenience trumps semantics and
performance of the final product
▪ Web sites are slow and huge
because we work on fast computers
and good connections
▪ Being a web expert is less exciting
than being a full stack developer
@codepo8
How is that possible with all
the resources we have?
developer.mozilla.org caniuse.com code.visualstudio.com
Web Developers
need to know a lot…
▪ Performance
▪ Accessibility
▪ Interoperability
▪ Security
▪ Maintainability
@codepo8
▪ Browser Quirks
▪ Developer toolchains
▪ Browser developer tools
▪ Abstractions
▪ CLI
▪ Editors
Where to learn
all that?
▪ Standards documentation?
▪ Browser vendor docs?
▪ Conferences?
▪ Books?
▪ Workshops?
▪ Developer tools?
▪ News channels?
@codepo8
Learning
obstacles
▪ Resources with upvoting options
favour the how over the why
▪ We’re not paid to learn, we’re paid
to deliver
▪ Peer pressure makes developers
who don’t know things afraid to
admit it
▪ There’s always a “good enough” way
to create a lot in a short amount of
time.
@codepo8
Taking
shortcuts…
▪ AMP?
▪ Tooling presets?
▪ Abstractions (libraries/frameworks)
▪ Hoping nobody cares…
@codepo8
Issues with current
tooling…
Too many
promises…
▪ “This tool makes $x easy. No need
to look it up.”
▪ “$HUGE_CORP_APP uses this
configuration and toolchain – if it
works for their needs, it should rock
for you, too”
▪ “Using this configuration optimises
for the modern web”
@codepo8
Too many rules
and barriers
▪ Opinionated tools demand you to
fix things that don’t apply to your
product
▪ Dependencies and complex
toolchains can be daunting
▪ “Best practices” often don’t get
updates, and are contextual
▪ Having to follow strict rules without
understanding them is not fun
@codepo8
How can we
accelerate learning?
Customisable best
practices in context
▪ Having information isn’t enough
when people don’t go there
▪ We need to prevent mistakes
before they happen
▪ We need to allow people to
customize these experiences. An
intranet site needs different settings
than a marketing site
▪ So, let’s target editors and build
processes
@codepo8
Linting and inline
insights in editors
@codepo8
code.visualstudio.com
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
Add new screenshot
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
What a state we’re in…
bit.ly/what-a-state-of-the-browser
Hinting during
deployment
@codepo8
▪ Web resources are fun but not
always accessible or applicable to
your product
▪ webhint is Node based, so you can
also install at as part of your
build/deployment process
▪ That way webhint can also give
detailed information about the
setup of your bundler/preprocessor
to avoid huge release sizes
hint on npm/yarn/whatever…
webhint.io
Available hints…
Performance Accessibility
PWA
Readiness
Development
environment Interoperability Security
Not restricted to presets…
webhint.io
Add new screenshot
Customising hints…
webhint.io/docs/user-guide/
Defining & adding own hints…
webhint.io
Create a better web
independent of a
browser or OS.
@codepo8
▪ Create detailed reports for third
party products about broken issues
▪ Customised hinting allows to define
project and environment specific
standards based on agreed best
practices
▪ Open source code allows for
contribution and deployment
wherever
Thanks!
Chris Heilmann
@codepo8
1 of 33

Recommended

Seven ways to be a happier JavaScript developer - NDC Oslo by
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
1.5K views52 slides
Develop, Debug, Learn? - Dotjs2019 by
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
1.1K views55 slides
Full-Stack Development by
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
1.1K views15 slides
boots2nerd by
boots2nerdboots2nerd
boots2nerdKris Gholson
46 views16 slides
Frontend Crash Coarse 09/28 by
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Ivy Rueb
189 views27 slides
Tf byows by
Tf byowsTf byows
Tf byowsShannon Gallagher
37 views17 slides

More Related Content

What's hot

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ... by
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak
4.5K views21 slides
AWS IAM by
AWS IAMAWS IAM
AWS IAMDiego Pacheco
321 views11 slides
Tf byows by
Tf byowsTf byows
Tf byowsShannon Gallagher
181 views18 slides
Web development meetingup by
Web development meetingupWeb development meetingup
Web development meetingupPiTechnologies
473 views38 slides
Architecture @ Appknox by
Architecture @ AppknoxArchitecture @ Appknox
Architecture @ AppknoxDhilipsiva DS
111 views10 slides
Tf byow by
Tf byowTf byow
Tf byowShannon Gallagher
18 views18 slides

What's hot(20)

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ... by Prasid Pathak
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
Prasid Pathak4.5K views
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an... by Prasid Pathak
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Prasid Pathak4.2K views
Design is not Subjective by Diego Pacheco
Design is not SubjectiveDesign is not Subjective
Design is not Subjective
Diego Pacheco361 views
Building your first WordPress plugin by Justin Foell
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
Justin Foell1K views
Architecture & Engineering : Doing the non-obvious! by Diego Pacheco
Architecture & Engineering :  Doing the non-obvious!Architecture & Engineering :  Doing the non-obvious!
Architecture & Engineering : Doing the non-obvious!
Diego Pacheco392 views
Drupal 8 as a Drop-In Content Engine - SymfonyLive Berlin 2015 by Jeffrey McGuire
Drupal 8 as a Drop-In Content Engine - SymfonyLive Berlin 2015Drupal 8 as a Drop-In Content Engine - SymfonyLive Berlin 2015
Drupal 8 as a Drop-In Content Engine - SymfonyLive Berlin 2015
Jeffrey McGuire737 views

Similar to Hinting at a better web

Stapling and patching the web of now - ForwardJS3, San Francisco by
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
12.9K views65 slides
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve... by
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...Codemotion
360 views50 slides
[RakutenTechConf2013] [E-2] HTML5 in Rakuten by
[RakutenTechConf2013] [E-2] HTML5 in Rakuten[RakutenTechConf2013] [E-2] HTML5 in Rakuten
[RakutenTechConf2013] [E-2] HTML5 in RakutenRakuten Group, Inc.
8.1K views155 slides
Why your APIs should fly first class by
Why your APIs should fly first classWhy your APIs should fly first class
Why your APIs should fly first classLibbySchulze
71 views55 slides
Progressing JavaScript and Apps the Web way… by
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
1.6K views67 slides
10 skills developers should invest in for 2014 by
10 skills developers should invest in for 201410 skills developers should invest in for 2014
10 skills developers should invest in for 2014Pakorn Weecharungsan
493 views19 slides

Similar to Hinting at a better web(20)

Stapling and patching the web of now - ForwardJS3, San Francisco by Christian Heilmann
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
Christian Heilmann12.9K views
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve... by Codemotion
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...
Codemotion360 views
Why your APIs should fly first class by LibbySchulze
Why your APIs should fly first classWhy your APIs should fly first class
Why your APIs should fly first class
LibbySchulze71 views
Progressing JavaScript and Apps the Web way… by Christian Heilmann
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
Christian Heilmann1.6K views
How Not to Be Conned by Your Drupal Vendor! by pixelonion
How Not to Be Conned by Your Drupal Vendor!How Not to Be Conned by Your Drupal Vendor!
How Not to Be Conned by Your Drupal Vendor!
pixelonion325 views
QCon'17 talk: CI/CD at scale - lessons from LinkedIn and Mockito by Szczepan Faber
QCon'17 talk: CI/CD at scale - lessons from LinkedIn and MockitoQCon'17 talk: CI/CD at scale - lessons from LinkedIn and Mockito
QCon'17 talk: CI/CD at scale - lessons from LinkedIn and Mockito
Szczepan Faber968 views
A Journey Down the Open Road - SymfonyCon Paris 2015 by Yoav Kutner
A Journey Down the Open Road - SymfonyCon Paris 2015A Journey Down the Open Road - SymfonyCon Paris 2015
A Journey Down the Open Road - SymfonyCon Paris 2015
Yoav Kutner451 views
Beyond responsive design - UI for the modern web application by Pete Smith
Beyond responsive design - UI for the modern web applicationBeyond responsive design - UI for the modern web application
Beyond responsive design - UI for the modern web application
Pete Smith7.1K views
Turning huge ships - Open Source and Microsoft by Christian Heilmann
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and Microsoft
Christian Heilmann654 views
15 tips for bullet proof requirements analysis on SharePoint projects by DocFluix, LLC
15 tips for bullet proof requirements analysis on SharePoint projects15 tips for bullet proof requirements analysis on SharePoint projects
15 tips for bullet proof requirements analysis on SharePoint projects
DocFluix, LLC6.6K views
Wagento Magento 2 developer - Brent W Peterson by Brent W Peterson
Wagento Magento 2 developer - Brent W PetersonWagento Magento 2 developer - Brent W Peterson
Wagento Magento 2 developer - Brent W Peterson
Brent W Peterson223 views
Responsive Design for SavvyMoney Credit Score by Wendy Fischer
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
Wendy Fischer383 views
HTML5 - The Good, the Bad, the Ugly by Mario Heiderich
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
Mario Heiderich2K views
Good vs Evil SharePoint Customizing by Stacy Deere
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
Stacy Deere848 views

More from Christian Heilmann

Taking the "vile" out of privilege by
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
1K views64 slides
Artificial intelligence for humans… #AIDC2018 keynote by
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
1.2K views56 slides
Killing the golden calf of coding - We are Developers keynote by
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
3.1K views35 slides
Progressive Web Apps - Techdays Finland by
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
1.4K views70 slides
Taking the "vile" out of privilege by
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
1.3K views47 slides
Taking the P out of PWA by
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWAChristian Heilmann
2.8K views68 slides

More from Christian Heilmann(20)

Artificial intelligence for humans… #AIDC2018 keynote by Christian Heilmann
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann1.2K views
Killing the golden calf of coding - We are Developers keynote by Christian Heilmann
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
Christian Heilmann3.1K views
Progressive Web Apps - Covering the best of both worlds - DevReach by Christian Heilmann
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
Christian Heilmann956 views
Progressive Web Apps - Covering the best of both worlds by Christian Heilmann
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
Christian Heilmann799 views
Non-trivial pursuits: Learning machines and forgetful humans by Christian Heilmann
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann531 views
Progressive Web Apps - Bringing the web front and center by Christian 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
Christian Heilmann1.2K views
The Soul in The Machine - Developing for Humans (FrankenJS edition) by Christian 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)
Christian Heilmann917 views
Breaking out of the Tetris mind set #btconf by Christian Heilmann
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
Christian Heilmann3.2K views
The Soul in The Machine - Developing for Humans by Christian Heilmann
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
Christian Heilmann1.4K views

Recently uploaded

hamro digital logics.pptx by
hamro digital logics.pptxhamro digital logics.pptx
hamro digital logics.pptxtupeshghimire
10 views36 slides
The Dark Web : Hidden Services by
The Dark Web : Hidden ServicesThe Dark Web : Hidden Services
The Dark Web : Hidden ServicesAnshu Singh
14 views24 slides
How to think like a threat actor for Kubernetes.pptx by
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptxLibbySchulze1
5 views33 slides
Affiliate Marketing by
Affiliate MarketingAffiliate Marketing
Affiliate MarketingNavin Dhanuka
17 views30 slides
information by
informationinformation
informationkhelgishekhar
10 views4 slides
Building trust in our information ecosystem: who do we trust in an emergency by
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergencyTina Purnat
110 views18 slides

Recently uploaded(9)

The Dark Web : Hidden Services by Anshu Singh
The Dark Web : Hidden ServicesThe Dark Web : Hidden Services
The Dark Web : Hidden Services
Anshu Singh14 views
How to think like a threat actor for Kubernetes.pptx by LibbySchulze1
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptx
LibbySchulze15 views
Building trust in our information ecosystem: who do we trust in an emergency by Tina Purnat
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergency
Tina Purnat110 views
IETF 118: Starlink Protocol Performance by APNIC
IETF 118: Starlink Protocol PerformanceIETF 118: Starlink Protocol Performance
IETF 118: Starlink Protocol Performance
APNIC414 views
Marketing and Community Building in Web3 by Federico Ast
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3
Federico Ast14 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089835 views

Hinting at a better web

  • 1. Hinting at a better web… Chris Heilmann (@codepo8) September 2018
  • 2. What is the purpose of a browser? ▪ Render web content ▪ Show multimedia content ▪ Follow and inspire web standards @codepo8
  • 5. The job of a browser changed drastically… ▪ Show web and multimedia content fast and reliably ▪ Give access to the web regardless of ability ▪ Keep users safe by blocking unsafe content and patch attack vectors ▪ Remember users’ history and access credentials – or remember nothing ▪ Allow for detailed customisation (including extensibility) ▪ Sync content across a range of devices @codepo8
  • 6. Audiences with different needs… ▪ Consumers of the web ▪ Creators of web content ▪ Web Developers ▪ Extension Developers ▪ App Developers ▪ IT Departments… @codepo8
  • 7. The need to be forgiving… ▪ Anyone is allowed to write code for the web – or use whatever they want to create that code. ▪ Whatever goes wrong, it is the browser’s fault ▪ Users shouldn’t suffer from developer errors ▪ Legacy products will never get fixed ▪ You can’t break the web @codepo8
  • 8. The mess that created… ▪ The web has become a render target amongst many others ▪ Releasing often and developer convenience trumps semantics and performance of the final product ▪ Web sites are slow and huge because we work on fast computers and good connections ▪ Being a web expert is less exciting than being a full stack developer @codepo8
  • 9. How is that possible with all the resources we have? developer.mozilla.org caniuse.com code.visualstudio.com
  • 10. Web Developers need to know a lot… ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability @codepo8 ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors
  • 11. Where to learn all that? ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels? @codepo8
  • 12. Learning obstacles ▪ Resources with upvoting options favour the how over the why ▪ We’re not paid to learn, we’re paid to deliver ▪ Peer pressure makes developers who don’t know things afraid to admit it ▪ There’s always a “good enough” way to create a lot in a short amount of time. @codepo8
  • 13. Taking shortcuts… ▪ AMP? ▪ Tooling presets? ▪ Abstractions (libraries/frameworks) ▪ Hoping nobody cares… @codepo8
  • 15. Too many promises… ▪ “This tool makes $x easy. No need to look it up.” ▪ “$HUGE_CORP_APP uses this configuration and toolchain – if it works for their needs, it should rock for you, too” ▪ “Using this configuration optimises for the modern web” @codepo8
  • 16. Too many rules and barriers ▪ Opinionated tools demand you to fix things that don’t apply to your product ▪ Dependencies and complex toolchains can be daunting ▪ “Best practices” often don’t get updates, and are contextual ▪ Having to follow strict rules without understanding them is not fun @codepo8
  • 18. Customisable best practices in context ▪ Having information isn’t enough when people don’t go there ▪ We need to prevent mistakes before they happen ▪ We need to allow people to customize these experiences. An intranet site needs different settings than a marketing site ▪ So, let’s target editors and build processes @codepo8
  • 19. Linting and inline insights in editors @codepo8 code.visualstudio.com
  • 20. webhint.io – one stop checking and explanation webhint.io
  • 21. webhint.io – one stop checking and explanation webhint.io
  • 22. webhint.io – one stop checking and explanation webhint.io Add new screenshot
  • 23. webhint.io – one stop checking and explanation webhint.io
  • 24. webhint.io – one stop checking and explanation webhint.io
  • 25. What a state we’re in… bit.ly/what-a-state-of-the-browser
  • 26. Hinting during deployment @codepo8 ▪ Web resources are fun but not always accessible or applicable to your product ▪ webhint is Node based, so you can also install at as part of your build/deployment process ▪ That way webhint can also give detailed information about the setup of your bundler/preprocessor to avoid huge release sizes
  • 29. Not restricted to presets… webhint.io Add new screenshot
  • 31. Defining & adding own hints… webhint.io
  • 32. Create a better web independent of a browser or OS. @codepo8 ▪ Create detailed reports for third party products about broken issues ▪ Customised hinting allows to define project and environment specific standards based on agreed best practices ▪ Open source code allows for contribution and deployment wherever