business of front-end web development
TRANSCRIPT
![Page 1: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/1.jpg)
QCon LondonThe business of front-end development.
"This is for Everyone" by Nick Webb - Flickr: DSC_3232. Licensed under CC BY 2.0 via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:This_is_for_Everyone.jpg#mediaviewer/File:This_is_for_Everyone.jpg
![Page 2: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/2.jpg)
Rachel Andrew
Managing Director of edgeofmyseat.com
Web developer, writer and speaker
Find me at rachelandrew.co.uk
On Twitter: @rachelandrew
![Page 4: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/4.jpg)
The web is an accessible medium. We can protect that, or we can break it. I choose to protect it.
![Page 5: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/5.jpg)
My tasks include …
• bookkeeping
• completing baffling forms from the government
• writing Puppet Manifests
• coding PHP
• writing documentation
• writing and giving presentations & workshops
• front-end development
![Page 6: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/6.jpg)
I ship.
![Page 7: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/7.jpg)
![Page 8: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/8.jpg)
http://www.ironspider.ca/adv/basic_css/whyusecss.htm
![Page 9: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/9.jpg)
The “Netscape Resize Fix” <script type="text/javascript">
<!-- function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script>
![Page 10: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/10.jpg)
Front-end developer circa 2005? Browser bugs expert.
![Page 12: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/12.jpg)
http://www.webstandards.org/2013/03/01/our-work-here-is-done/
“Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality. While there is still work to be done, the sting of the WaSP is no longer necessary. And so it is time for us to close down The Web Standards Project.”
![Page 13: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/13.jpg)
Browser vendors are implementing standard things in a standard way.
![Page 14: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/14.jpg)
Innovation happens through the standards process.
![Page 15: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/15.jpg)
Showstopping browser bugs when doing straightforward things in
modern browsers are rare.
![Page 16: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/16.jpg)
http://www.allenpike.com/2015/javascript-framework-fatigue/
“Studies show that a todo list is the most complex JavaScript app you can build before a newer, better framework is invented.”
![Page 17: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/17.jpg)
We’re creating complexity.
![Page 18: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/18.jpg)
Hiding the simple languages of the web behind tooling and process.
![Page 19: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/19.jpg)
![Page 20: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/20.jpg)
Replacing divs …<div class="header"> <h1>My website</h1> <div class="nav">
</div> </div>
<div class="article">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>
![Page 21: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/21.jpg)
… with new semantic elements.
<header> <h1>My website</h1> <nav>
</nav> </header>
<article>
</article>
<aside>
</aside>
<footer>
</footer>
![Page 22: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/22.jpg)
Web Video Text Tracks Format (WebVTT)
WEBVTT
1 00:00:22.230 --> 00:00:24.606 This is the first subtitle.
2 00:00:30.739 --> 00:00:34.074 This is the second.
3 00:00:34.159 --> 00:00:35.743 Third
![Page 23: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/23.jpg)
Web Video Text Tracks Format (WebVTT)
WEBVTT
1 00:00:22.230 --> 00:00:24.606 This is the first subtitle.
2 00:00:30.739 --> 00:00:34.074 This is the second.
3 00:00:34.159 --> 00:00:35.743 Third
https://developer.mozilla.org/en/docs/
Web/API/Web_Video_Text_Tracks_Format
![Page 24: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/24.jpg)
http://robertnyman.com/html5/forms/input-types.html
![Page 26: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/26.jpg)
Time-dimensional Pseudo-classes
:current :past :future :current(p, li, dt, dd) {
background: yellow; }
:past(p, li, dt, dd) { background: transparent; color: #999999; }
![Page 29: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/29.jpg)
CSS Grid Layout
<div class="wrapper"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div>
![Page 30: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/30.jpg)
CSS Grid Layout
.sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto; grid-template-areas: "header header header header header" "sidebar . content content content"; }
![Page 31: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/31.jpg)
![Page 33: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/33.jpg)
via my inbox.
“I’ll take a look if you create a Sass Mixin …”
![Page 34: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/34.jpg)
Emerging specifications like Grid remove the need for some of the
pre-processing
![Page 37: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/37.jpg)
Using the Susy Mixins.
.ag1 { @include span(2 of 10); }
.ag2 { @include span(6 of 10); @include clearfix; }
.ag3 { @include span(2 of 10 last); }
![Page 38: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/38.jpg)
![Page 39: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/39.jpg)
Grid Layout lets you place elements on the Grid without calculations.
/* declare a grid and set up a 10 column grid with gutters */ .container { width: 90%; margin: 0 auto 0 auto; display: grid; grid-template-columns: (col ) 4.25fr repeat(9, (gutter) 1fr (col) 4.25fr ) (gutter); grid-template-rows: auto repeat(5, 100px); }
/* boxes positioned like so */ /* heading in row 1 full width */ h1 { grid-column: col / span col 10; grid-row: 1 / 2; }
/* left hand sidebar */ .ag1 { grid-column: col / span gutter 2; grid-row: 2 / 3; }
![Page 40: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/40.jpg)
Web designers and developers should be excited by specifications
like grid. This is the future.
![Page 41: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/41.jpg)
By leaning on frameworks, are we masking the issues?
![Page 42: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/42.jpg)
Working with the specifications we can contribute to improving them
![Page 43: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/43.jpg)
Sheer frustration drove much of the Web Standards movement.
![Page 44: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/44.jpg)
My fear is that due to our reliance on frameworks we will stop pushing for better solutions.
![Page 45: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/45.jpg)
https://twitter.com/codepo8/status/572783496550359040
![Page 46: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/46.jpg)
There are always compromises. They shouldn’t be the same for
every project.
![Page 47: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/47.jpg)
Standardising on tools should not be at the expense of learning HTML, CSS and JavaScript.
![Page 48: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/48.jpg)
Use your tools and frameworks lightly. Be ready to put them aside
when they don’t suit a project.
![Page 49: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/49.jpg)
Don’t become an expert in one brand of hammer. Become a master carpenter. Develop timeless skills.
![Page 50: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/50.jpg)
Considerations when choosing tools and processes.
![Page 52: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/52.jpg)
Is it responsible to use a brand new framework on a site you will
complete then hand over?
![Page 53: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/53.jpg)
Large teams and in-house projects often require more process than
projects built by one or two people.
![Page 54: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/54.jpg)
Who is the audience?
• Internal or External?
• Can we make any assumptions about technology used to access?
![Page 55: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/55.jpg)
What browsers and devices are currently used to access the site?
![Page 56: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/56.jpg)
What time do we have available?
![Page 57: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/57.jpg)
Whose time are we saving?
![Page 58: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/58.jpg)
http://aaron-gustafson.com/notebook/who-should-pay/
“When I look around, I see our community spending a lot of time coming up with new tools and techniques to make our jobs easier. To ship faster. And it’s not that I’m against efficiency, but I think we need to consider the implications of our decisions. And if one of those implications is making our users suffer—or potentially suffer—in order to make our lives easier, I think we need to consider their needs above our own.”
![Page 59: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/59.jpg)
We Are Social: http://wearesocial.net/blog/2015/01/digital-social-mobile-worldwide-2015/
![Page 60: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/60.jpg)
Will this tool …
• Save me time?
• Cause accessibility issues?
• Slow the site down on mobile?
• Limit the user agents that will be able to use the core experience?
![Page 61: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/61.jpg)
It’s only temporary …
![Page 62: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/62.jpg)
This is for everyone
"This is for Everyone" by Nick Webb - Flickr: DSC_3232. Licensed under CC BY 2.0 via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:This_is_for_Everyone.jpg#mediaviewer/File:This_is_for_Everyone.jpg
![Page 63: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/63.jpg)
Progressive enhancement
![Page 64: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/64.jpg)
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/progressive-enhancement.shtml
“a robust site or application in the more traditional sense minimises its dependencies. The minimum dependency for a web site should be an internet connection and the ability to parse HTML.”
![Page 65: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/65.jpg)
Start with the core experience
![Page 66: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/66.jpg)
What is the minimum that I need to ship? How can I ensure that minimum protects the core experience for everyone?
![Page 67: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/67.jpg)
We ship. We iterate.
![Page 69: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/69.jpg)
![Page 70: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/70.jpg)
How to integrate third party code
![Page 71: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/71.jpg)
Not Invented Here
![Page 72: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/72.jpg)
http://mortoray.com/2015/02/25/invented-here-syndrome/
“Are you afraid to write code? Does the thought linger in your brain that somewhere out there somebody has already done this? Do you find yourself trapped in an analysis cycle where nothing is getting done? Is your product mutating to accommodate third party components? If yes, then perhaps you are suffering from invented-here syndrome.”
![Page 73: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/73.jpg)
Avoid turning shortcuts and third party code into dependencies.
![Page 74: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/74.jpg)
Dependency Inversion
![Page 75: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/75.jpg)
http://www.objectmentor.com/resources/articles/dip.pdf
“High level modules should not depend upon low-level modules. Both should depend upon abstractions.
Abstractions should never depend upon details. Details should depend upon abstractions.”
![Page 77: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/77.jpg)
Progressively enhanced UI
• JavaScript implementation based on the regular HTML5 Video element
• Static maps that become draggable and zoomable - avoiding creating a dependency on one maps provider or library
• Ordering items via a form input - that become drag and drop if the user has JavaScript
![Page 78: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/78.jpg)
You can’t do everything. You can do something.
![Page 79: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/79.jpg)
http://sixtwothree.org/posts/the-practical-case-for-progressive-enhancement
“A 100% pure progressively-enhanced website may not be practical on every single project you will ever encounter. While that sort of purity can exist, it’s unlikely in many business scenarios. Budgets, timelines: these things exist. Progressive enhancement isn’t a zero sum game; it’s a continuum, just like the Web.”
![Page 80: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/80.jpg)
• Learn (and teach!) core skills. HTML, CSS, JavaScript
• Maintain an interest in emerging specifications
• Take care that you are not clinging to outdated or unhelpful abstractions
• We are no longer browser bug wranglers, instead we should be experts in performance especially as the web becomes ever more mobile
![Page 81: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/81.jpg)
• Choose your tools and frameworks on a case by case basis
• Understand the compromises
• Don’t reinvent wheels …
• … but beware “invented here syndrome”
• Use progressive enhancement to protect the core experience while shipping quickly, build from there.
![Page 82: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/82.jpg)
We get to create products that people see, touch & interact with.
![Page 83: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/83.jpg)
George Bernard Shaw
“We don’t stop playing because we grow old; we grow old because we stop playing”
![Page 84: Business of Front-end Web Development](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a73b761a28abe6258b4646/html5/thumbnails/84.jpg)
Thank you!
Rachel Andrew
@rachelandrew
http://rachelandrew.co.uk/presentations/business-of-front-end