SlideShare a Scribd company logo
1 of 64
Download to read offline
WHAT IF EVERYTHIN G *IS* AWESOME? 
Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
CARE ABOUT SCIENCE? YOU NERD!!!!
What if everything is awesome? Codemotion Madrid 2014
ROCKSTAR • 💩
DAILY FRUSTRATIONS…
USERS HAVE AND 
EXERCISE THE RIGHT TO 
DO THINGS DIFFERENTLY 
THAN WE EXPECT…
NOTHING MUCH 
HAPPENS WHEN WE 
MESS UP…
A CONSTANT CALL FOR 
“PROFESSIONALISM” 
AND “MODERN WEB 
WORKFLOW”
THE WEB NEEDS A 
CONTAINER FORMAT FOR 
APPS… 
https://www.etsy.com/uk/listing/175222880/banana-holder-brown
THE STATE OF APPS… 
http://www.w3.org/2014/07/mobile-web-app-state/
GREAT CODE IS 
GENERIC CODE? 
https://medium.com/@fredriknoren/on-generalization-608949214e63
PRE-PEELED BANANAS?
A TENDENCY TO RE-CREATE 
INSTEAD OF 
IMPROVING…
LET’S MAKE A STATIC SITE IN 2014…
ADDING LAYERS AND 
LAYERS OF ABSTRACTION 
AND TOOLING…
THE REAL 
DEVELOPMENT 
PROCESS TENDS TO 
LOOK DIFFERENTLY.
PERFORMANCE
WEBSITE OBESITY IS 
NOT UNCOMMON…
HOW SLOW ARE WE? 
http://www.webpagetest.org/
HOW SLOW ARE WE? http://www.webpagetest.org/
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
PERFORMANCE TOOLS AND TESTING… 
https://www.youtube.com/watch?v=FEs2jgZBaQA
AMAZING TECH 
AVAILABLE NOW…
BROWSERS ARE 
CONSUMPTION AND 
CREATION TOOLS.
BROWSERS ARE 
EMULATORS AND 
REMOTE DEBUGGERS 
OF CONNECTED 
DEVICES.
WHAT ABOUT 
OUTDATED 
BROWSERS?
POLYFILL AS A SERVICE! 
https://cdn.polyfill.io/v1/docs/features/ 
<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
GETTING VERY FLEXIBLE 
http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/
*, *:before, *:after { 
-moz-box-sizing: inherit; 
box-sizing: inherit; 
} 
! 
html { 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
! 
body { 
padding: 20px; 
font: 100% sans-serif; 
} 
! 
.bar { 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-align-items: center; 
-ms-flex-align: center; 
align-items: center; 
width: 100%; 
background: #eee; 
padding: 20px; 
margin: 0 0 20px 0; 
}
margin: 0 0 20px 0; 
} 
.bar > * { 
margin: 0 10px; 
} 
! 
.icon { 
width: 30px; 
height: 30px; 
background: #ccc; 
border-radius: 50%; 
} 
! 
.search { 
-webkit-flex: 1; 
-ms-flex: 1; 
flex: 1; 
} 
.search input { 
width: 100%; 
} 
! 
.bar-2 .username { 
-webkit-order: 2; 
-ms-flex-order: 2; 
order: 2; 
} 
.bar-2 .icon-3 {
} 
.bar-2 .icon-3 { 
-webkit-order: 3; 
-ms-flex-order: 3; 
order: 3; 
} 
! 
.bar-3 .search { 
-webkit-order: -1; 
-ms-flex-order: -1; 
order: -1; 
} 
.bar-3 .username { 
-webkit-order: 1; 
-ms-flex-order: 1; 
order: 1; 
} 
! 
.no-flexbox .bar { 
display: table; 
border-spacing: 15px; 
padding: 0; 
} 
.no-flexbox .bar > * { 
display: table-cell; 
vertical-align: middle; 
white-space: nowrap; 
}
white-space: nowrap; 
} 
.no-flexbox .username { 
width: 1px; 
} 
! 
@media (max-width: 650px) { 
.bar { 
-webkit-flex-wrap: wrap; 
-ms-flex-wrap: wrap; 
flex-wrap: wrap; 
} 
! 
.icon { 
-webkit-order: 0 !important; 
-ms-flex-order: 0 !important; 
order: 0 !important; 
} 
! 
.username { 
-webkit-order: 1 !important; 
-ms-flex-order: 1 !important; 
order: 1 !important; 
width: 100%; 
margin: 15px; 
} 
! 
.search {
! 
.search { 
-webkit-order: 2 !important; 
-ms-flex-order: 2 !important; 
order: 2 !important; 
width: 100%; 
} 
}
WEBRTC, WEBGL, 
WEB AUDIO AND 
MANY MORE 
THINGS ARE 
POINTING TO A 
HIGH FIDELITY 
WEB…
TOWARDS AN OFFLINE WEB: SERVICEWORKER 
https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcTpMS4
NO MORE SECRETS: 
WEB COMPONENTS 
AND SHADOW DOM
http://www.futureinsights.com/home/the-state-of-the-componentised-web.html
THINGS TO DO FOR YOU
LET’S AIM TO BUILD SOLID 
FOUNDATIONS OF SMALL BITS 
OF WORKING CODE.
TODAY’S TECH ISN’T GOING AWAY… 
Hating JavaScript is like hating the Internet. 
The Internet is a cobweb of different 
technologies cobbled together with duct 
tape, string and chewing gum. It's not 
elegantly designed in any way, because it's 
more of a growing organism than it is a 
machine constructed with intent. 
“ 
Mattias Petter Johansson, Spotify 
http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson
IT IS BUILT TO LAST! 
If you build a web app today, it will run in 
browsers 10 years from now. Good luck 
trying the same with your favorite mobile OS 
(excluding Firefox OS). “ 
Paul Bakaus, Google (ex. Zynga) 
http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/
IT IS BEAUTIFUL! 
If you enable people world-wide to 
get a good experience and solve a 
problem they have, I like it. The 
technology you use is not the 
important part. How much you lock 
them in is. Don’t lock people in. 
“ 
Christian Heilmann
DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER
TALK LIVE! 
https://www.youtube.com/watch?v=hC9sXz3tRow
DON’T FORGET: 
THE HUMANS AROUND 
YOU ARE THE DRIVING 
FORCE. TREAT THEM 
NICE AND WITH 
RESPECT.
Chris Heilmann 
christianheilmann.com 
@codepo8 
Thank you!

More Related Content

Similar to What if everything is awesome? Codemotion Madrid 2014

Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Andrea Robertson
 
SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krumadtech_fan
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open WebChris Messina
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Crossing the Production Barrier: Development at Scale
Crossing the Production Barrier: Development at ScaleCrossing the Production Barrier: Development at Scale
Crossing the Production Barrier: Development at Scalejgoulah
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
Clickjacking DevCon2011
Clickjacking DevCon2011Clickjacking DevCon2011
Clickjacking DevCon2011Krishna T
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Jon Arne Sæterås
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesHeather Rock
 
Web2.0 2012 - lesson 7 - technologies and mashups
Web2.0 2012 - lesson 7 - technologies and mashups Web2.0 2012 - lesson 7 - technologies and mashups
Web2.0 2012 - lesson 7 - technologies and mashups Carlo Vaccari
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?Tony Parisi
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webJenifer Hanen
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
Software development
Software developmentSoftware development
Software developmentManekTech
 
Asp.net Web Application Development Services | ManekTech
Asp.net Web Application Development Services | ManekTechAsp.net Web Application Development Services | ManekTech
Asp.net Web Application Development Services | ManekTechManekTech
 
Umbraco CMS Development | ManekTech
Umbraco CMS Development | ManekTechUmbraco CMS Development | ManekTech
Umbraco CMS Development | ManekTechManekTech
 
PWA - The hidden stories about the future of the web
PWA - The hidden stories about the future of the webPWA - The hidden stories about the future of the web
PWA - The hidden stories about the future of the webRomulo Cintra
 

Similar to What if everything is awesome? Codemotion Madrid 2014 (20)

Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)
 
SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krum
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open Web
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Crossing the Production Barrier: Development at Scale
Crossing the Production Barrier: Development at ScaleCrossing the Production Barrier: Development at Scale
Crossing the Production Barrier: Development at Scale
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
Clickjacking DevCon2011
Clickjacking DevCon2011Clickjacking DevCon2011
Clickjacking DevCon2011
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
 
Web2.0 2012 - lesson 7 - technologies and mashups
Web2.0 2012 - lesson 7 - technologies and mashups Web2.0 2012 - lesson 7 - technologies and mashups
Web2.0 2012 - lesson 7 - technologies and mashups
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Software development
Software developmentSoftware development
Software development
 
Asp.net Web Application Development Services | ManekTech
Asp.net Web Application Development Services | ManekTechAsp.net Web Application Development Services | ManekTech
Asp.net Web Application Development Services | ManekTech
 
Umbraco CMS Development | ManekTech
Umbraco CMS Development | ManekTechUmbraco CMS Development | ManekTech
Umbraco CMS Development | ManekTech
 
PWA - The hidden stories about the future of the web
PWA - The hidden stories about the future of the webPWA - The hidden stories about the future of the web
PWA - The hidden stories about the future of the web
 

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)
 

Recently uploaded

P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 

Recently uploaded (20)

Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 

What if everything is awesome? Codemotion Madrid 2014

  • 1. WHAT IF EVERYTHIN G *IS* AWESOME? Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014
  • 16. CARE ABOUT SCIENCE? YOU NERD!!!!
  • 20. USERS HAVE AND EXERCISE THE RIGHT TO DO THINGS DIFFERENTLY THAN WE EXPECT…
  • 21. NOTHING MUCH HAPPENS WHEN WE MESS UP…
  • 22. A CONSTANT CALL FOR “PROFESSIONALISM” AND “MODERN WEB WORKFLOW”
  • 23. THE WEB NEEDS A CONTAINER FORMAT FOR APPS… https://www.etsy.com/uk/listing/175222880/banana-holder-brown
  • 24. THE STATE OF APPS… http://www.w3.org/2014/07/mobile-web-app-state/
  • 25. GREAT CODE IS GENERIC CODE? https://medium.com/@fredriknoren/on-generalization-608949214e63
  • 27. A TENDENCY TO RE-CREATE INSTEAD OF IMPROVING…
  • 28. LET’S MAKE A STATIC SITE IN 2014…
  • 29. ADDING LAYERS AND LAYERS OF ABSTRACTION AND TOOLING…
  • 30. THE REAL DEVELOPMENT PROCESS TENDS TO LOOK DIFFERENTLY.
  • 32. WEBSITE OBESITY IS NOT UNCOMMON…
  • 33. HOW SLOW ARE WE? http://www.webpagetest.org/
  • 34. HOW SLOW ARE WE? http://www.webpagetest.org/
  • 40. PERFORMANCE TOOLS AND TESTING… https://www.youtube.com/watch?v=FEs2jgZBaQA
  • 42. BROWSERS ARE CONSUMPTION AND CREATION TOOLS.
  • 43. BROWSERS ARE EMULATORS AND REMOTE DEBUGGERS OF CONNECTED DEVICES.
  • 44. WHAT ABOUT OUTDATED BROWSERS?
  • 45. POLYFILL AS A SERVICE! https://cdn.polyfill.io/v1/docs/features/ <script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
  • 46. GETTING VERY FLEXIBLE http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/
  • 47. *, *:before, *:after { -moz-box-sizing: inherit; box-sizing: inherit; } ! html { -moz-box-sizing: border-box; box-sizing: border-box; } ! body { padding: 20px; font: 100% sans-serif; } ! .bar { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; background: #eee; padding: 20px; margin: 0 0 20px 0; }
  • 48. margin: 0 0 20px 0; } .bar > * { margin: 0 10px; } ! .icon { width: 30px; height: 30px; background: #ccc; border-radius: 50%; } ! .search { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .search input { width: 100%; } ! .bar-2 .username { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .bar-2 .icon-3 {
  • 49. } .bar-2 .icon-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } ! .bar-3 .search { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .bar-3 .username { -webkit-order: 1; -ms-flex-order: 1; order: 1; } ! .no-flexbox .bar { display: table; border-spacing: 15px; padding: 0; } .no-flexbox .bar > * { display: table-cell; vertical-align: middle; white-space: nowrap; }
  • 50. white-space: nowrap; } .no-flexbox .username { width: 1px; } ! @media (max-width: 650px) { .bar { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } ! .icon { -webkit-order: 0 !important; -ms-flex-order: 0 !important; order: 0 !important; } ! .username { -webkit-order: 1 !important; -ms-flex-order: 1 !important; order: 1 !important; width: 100%; margin: 15px; } ! .search {
  • 51. ! .search { -webkit-order: 2 !important; -ms-flex-order: 2 !important; order: 2 !important; width: 100%; } }
  • 52. WEBRTC, WEBGL, WEB AUDIO AND MANY MORE THINGS ARE POINTING TO A HIGH FIDELITY WEB…
  • 53. TOWARDS AN OFFLINE WEB: SERVICEWORKER https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcTpMS4
  • 54. NO MORE SECRETS: WEB COMPONENTS AND SHADOW DOM
  • 56. THINGS TO DO FOR YOU
  • 57. LET’S AIM TO BUILD SOLID FOUNDATIONS OF SMALL BITS OF WORKING CODE.
  • 58. TODAY’S TECH ISN’T GOING AWAY… Hating JavaScript is like hating the Internet. The Internet is a cobweb of different technologies cobbled together with duct tape, string and chewing gum. It's not elegantly designed in any way, because it's more of a growing organism than it is a machine constructed with intent. “ Mattias Petter Johansson, Spotify http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson
  • 59. IT IS BUILT TO LAST! If you build a web app today, it will run in browsers 10 years from now. Good luck trying the same with your favorite mobile OS (excluding Firefox OS). “ Paul Bakaus, Google (ex. Zynga) http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/
  • 60. IT IS BEAUTIFUL! If you enable people world-wide to get a good experience and solve a problem they have, I like it. The technology you use is not the important part. How much you lock them in is. Don’t lock people in. “ Christian Heilmann
  • 61. DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER
  • 63. DON’T FORGET: THE HUMANS AROUND YOU ARE THE DRIVING FORCE. TREAT THEM NICE AND WITH RESPECT.