SlideShare a Scribd company logo
1 of 33
Download to read offline
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

More Related Content

What's hot

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 ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
Prasid Pathak
 
Web development meetingup
Web development meetingupWeb development meetingup
Web development meetingup
PiTechnologies
 
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...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Prasid Pathak
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
Justin Foell
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
Haim Michael
 

What's hot (20)

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 ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
 
AWS IAM
AWS IAMAWS IAM
AWS IAM
 
Tf byows
Tf byowsTf byows
Tf byows
 
Web development meetingup
Web development meetingupWeb development meetingup
Web development meetingup
 
Architecture @ Appknox
Architecture @ AppknoxArchitecture @ Appknox
Architecture @ Appknox
 
Tf byow
Tf byowTf byow
Tf byow
 
Tf byow
Tf byowTf byow
Tf byow
 
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...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
 
Design is not Subjective
Design is not SubjectiveDesign is not Subjective
Design is not Subjective
 
Code Forensics
Code ForensicsCode Forensics
Code Forensics
 
Holacracy
HolacracyHolacracy
Holacracy
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
 
Atag & drupal 8
Atag & drupal 8Atag & drupal 8
Atag & drupal 8
 
WordCamp Barcelona 2015 : From Design to a Theme
WordCamp Barcelona 2015 : From Design to a ThemeWordCamp Barcelona 2015 : From Design to a Theme
WordCamp Barcelona 2015 : From Design to a Theme
 
Tf byowwhc
Tf byowwhcTf byowwhc
Tf byowwhc
 
Tf byowwhc
Tf byowwhcTf byowwhc
Tf byowwhc
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
 
Architecture & Engineering : Doing the non-obvious!
Architecture & Engineering :  Doing the non-obvious!Architecture & Engineering :  Doing the non-obvious!
Architecture & Engineering : Doing the non-obvious!
 
Drupal 8 as a Drop-In Content Engine - SymfonyLive Berlin 2015
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
 

Similar to Hinting at a better web

QCon'17 talk: CI/CD at scale - lessons from LinkedIn and Mockito
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 Faber
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
Mario Heiderich
 

Similar to Hinting at a better web (20)

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
 
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...
Christian Heilmann - Seven Things to Do to Make You a Happier JavaScript Deve...
 
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
[RakutenTechConf2013] [E-2] HTML5 in Rakuten[RakutenTechConf2013] [E-2] HTML5 in Rakuten
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
 
Why your APIs should fly first class
Why your APIs should fly first classWhy your APIs should fly first class
Why your APIs should fly first class
 
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…
 
10 skills developers should invest in for 2014
10 skills developers should invest in for 201410 skills developers should invest in for 2014
10 skills developers should invest in for 2014
 
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!
How Not to Be Conned by Your Drupal Vendor!
 
Ice dec05-04-wan leung
Ice dec05-04-wan leungIce dec05-04-wan leung
Ice dec05-04-wan leung
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
QCon'17 talk: CI/CD at scale - lessons from LinkedIn and Mockito
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
 
Stack skills
Stack skillsStack skills
Stack skills
 
A Journey Down the Open Road - SymfonyCon Paris 2015
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
 
Beyond responsive design - UI for the modern web application
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
 
Tips To Hire Full Stack Developers In 2022
Tips To Hire Full Stack Developers In 2022Tips To Hire Full Stack Developers In 2022
Tips To Hire Full Stack Developers In 2022
 
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
 
15 tips for bullet proof requirements analysis on SharePoint projects
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
 
Wagento Magento 2 developer - Brent W Peterson
Wagento Magento 2 developer - Brent W PetersonWagento Magento 2 developer - Brent W Peterson
Wagento Magento 2 developer - Brent W Peterson
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
 
Web Development
Web DevelopmentWeb Development
Web Development
 

More from 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)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
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
 
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)
 
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
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Supercharging Public Speaking
Supercharging Public SpeakingSupercharging Public Speaking
Supercharging Public Speaking
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 

Recently uploaded

一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
Fi
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
Fi
 
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
Obat Cytotec
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
Fir
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
ayvbos
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
c6eb683559b3
 
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
ZurliaSoop
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
AS
 
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
AS
 
一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理
F
 

Recently uploaded (20)

一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
 
Washington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers ShirtWashington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers Shirt
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
 
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
 
(VIP) ℂall Girls Lucknow < Hire Me Sneha 📞8630512678 > Home Delivery For Full...
(VIP) ℂall Girls Lucknow < Hire Me Sneha 📞8630512678 > Home Delivery For Full...(VIP) ℂall Girls Lucknow < Hire Me Sneha 📞8630512678 > Home Delivery For Full...
(VIP) ℂall Girls Lucknow < Hire Me Sneha 📞8630512678 > Home Delivery For Full...
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
 
The Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdfThe Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdf
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
 
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download NowHUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
 
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookTOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
 
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
 
APNIC Updates presented by Paul Wilson at CaribNOG 27
APNIC Updates presented by Paul Wilson at  CaribNOG 27APNIC Updates presented by Paul Wilson at  CaribNOG 27
APNIC Updates presented by Paul Wilson at CaribNOG 27
 
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
 
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
 
一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理
 

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