everything is awesome - cutting the corners off the web
DESCRIPTION
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.TRANSCRIPT
![Page 1: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/1.jpg)
Everything is Awesome
Cutting the corners off the web.
![Page 2: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/2.jpg)
Really now?
“The Web Is Dying; Apps Are Killing It.”
![Page 3: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/3.jpg)
![Page 4: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/4.jpg)
However…
![Page 5: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/5.jpg)
We’re making this complicated.
![Page 6: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/6.jpg)
HTML
![Page 7: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/7.jpg)
Raw HTML is for Chumps<div data-module-id="12" data-module-name="resp.module.article.ArticleColumnist" data-module-zone="articleheader" class="zonedModule"><hgroup class="columnist-hgroup clearFix"><div class="columnist-header">
<h2 class=" region-cat"><a href="http://online.wsj.com/public/search?article-doc-type=%7BKeywords%7D&HEADER_TEXT=keywords">Keywords</a>
</h2><h1 itemprop="headline">The Web Is Dying; Apps Are Killing It </h1><h2 class="subHed deck">Tech’s Open Range Is Losing Out to Walled Gardens</h2>
</div>
<div class="columnist"><div class="a-size"><img src="http://s.wsj.net/img/mims.jpg" height="76px" width="76px"></div>
<div class="connect byline-dsk"><span class="intro">By</span>
<div class="social-dd"> <span class="c-name" rel="author" itemprop="author">Christopher Mims<span class="bk-box"></span></span><menu class="c-menu">
<li class="twitter"> <iframe scrolling="no" frameborder="0" name="twitter_iframe" id="twitter_iframe" data-dj-
src="http://platform.twitter.com/widgets/follow_button.html?screen_name=mims&show_count=false" style="width: 60px; height: 21px;" allowtransparency="true"></iframe>
<a href="http://www.twitter.com/@mims" target="_blank">@mims</a></li>
<li class="email"><a href="mailto:[email protected]">[email protected]</a></li>
<li class="facebook"> <iframe data-dj-src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F
%2Fwww.facebook.com%2Fchristophermims&layout=button_count&show_faces=false&colorscheme=light&font&width=250&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:21px;" allowtransparency="true"></
![Page 8: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/8.jpg)
doctype htmlhtml(lang="en") head title= pageTitle
body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
![Page 9: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/9.jpg)
DRY Templating
• Layout Templates with Extending Blocks
• Includes with Variables
• Good Loops and Conditionals
![Page 10: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/10.jpg)
What HTML is for
• Establishing Content Order
• Providing Accessibility Hooks
• Anchors, Titles, alt tags, ARIA roles
• tabindex ordering
• keyboard focus as a first class concern
![Page 11: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/11.jpg)
Building the FrontendYou do automate this right?
![Page 13: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/13.jpg)
gulp.task(‘dev:styles', function() { gulp.src(PATHS.project + “/main.less") .pipe(less({strictMath: true})) .pipe(gulp.dest(PATHS.assetsOut)) .pipe(connect.reload());});
![Page 14: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/14.jpg)
gulp.task(‘dev:styles', function() { gulp.src(PATHS.project + “/main.less") .pipe(less({strictMath: true})) .pipe(please({ minifier: false, import: false, mqpacker: false })) .pipe(gulp.dest(PATHS.assetsOut)) .pipe(connect.reload());});
![Page 15: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/15.jpg)
gulp.task(‘dev:styles', function() { gulp.src(PATHS.project + “/main.less") .pipe(sourcemaps.init()) .pipe(less({strictMath: true})) .pipe(please({ minifier: false, import: false, mqpacker: false })) .pipe(sourcemaps.write()) .pipe(gulp.dest(PATHS.assetsOut)) .pipe(connect.reload());});
![Page 16: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/16.jpg)
CSS
![Page 17: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/17.jpg)
Just do the Comps?It’s not that simple.
![Page 18: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/18.jpg)
You are building a design system.
![Page 19: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/19.jpg)
Bootstrap/Foundation is just deferring the
problem.
![Page 20: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/20.jpg)
Manage Specificity
Namespace with Purpose
http://csswizardry.com/2014/10/the-specificity-graph/
![Page 21: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/21.jpg)
PreprocessorsWhat’s their role now?
![Page 22: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/22.jpg)
It’s not about prefixes.
• Variables
• Mixins
• Extends
• Creating a DRY visual system.
![Page 23: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/23.jpg)
@paletteBgPrimary: #fff;@paletteNearWhite: #fcfcfc;@paletteBgSecondary: #edf0f2;@paletteBgLight: #edeff0;
@paletteAccent: #f8971d;@paletteDominant: #445560;@paletteDarkDominant: #37454f;@paletteSubtle: #ffca88;@paletteError: #ff0000;@paletteErrorBg: #feebeb;
@paletteBlack: #000;@paletteBodyInk: #818386;@paletteStrongInk: #393a3c;@paletteMidInk: #515151;@paletteFaintInk: #ccc;@paletteReverseInk: #fff;@paletteHairline: #dbe3e8;
Explore Relationships between colours, measurements, layering
![Page 24: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/24.jpg)
@measurementRegionPaddingVertical: rem(57);@measurementRegionPaddingVerticalMobile: rem(18);@measurementRegionPaddingSides: rem(98);@measurementRegionPaddingSidesMobile: rem(32);@measurementRegionPaddingMobile: rem(18 32);@measurementRegionPaddingThin: rem(18 18);@measurementRegionPadding: rem(57 98);
@layerBase: 0;@layerFloat: 0;@layerOverlay: 500;@layerModal: 1000;
Common relationships are everywhere, even if your
designer doesn’t show you.
![Page 25: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/25.jpg)
// mixins.targeted(@rules) { &:hover, &:focus { @rules(); }}
.activated(@rules) { &.is-active, &:active { @rules(); }}
// extends.reset-list-styles { list-style: none; padding-left: 0;}
.ellipse-overflow { text-overflow: ellipsis; overflow: hidden;}
Mixins let you make standard patterns with arguments.
Extends let you make reusable patterns with only a single block of
rules.
![Page 26: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/26.jpg)
CSS is Skin Deep
• Target Classes, avoid tags and attributes where possible.
• Try not to sacrifice control over your markup, bad CSS comes from there.
![Page 27: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/27.jpg)
Postprocessing for Compatibility
• Media Query Packing
• Minification
• px fallbacks for rems (pixrem)
• Prefixing (autoprefixer)
• http://pleeease.io/ (collection of tools)
![Page 28: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/28.jpg)
On Responsiveness
![Page 29: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/29.jpg)
Device Targeting Doesn’t Work
![Page 30: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/30.jpg)
Touch is becoming a primary concern.
![Page 31: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/31.jpg)
:hover :focus :active
![Page 32: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/32.jpg)
iOS pretends it can do :hover - careful with
{display: none}
![Page 33: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/33.jpg)
Rethink Breakpoints
![Page 34: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/34.jpg)
Light on the hill
• Pointer based media queries
• Responsive Images (picture)
• but still no element queries
![Page 35: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/35.jpg)
Javascript is Awesome(ly bad)
![Page 36: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/36.jpg)
Modern Javascript Engines are FAST
![Page 37: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/37.jpg)
DOM is still slow
![Page 38: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/38.jpg)
Mobile requires us to write efficient Javascript
![Page 39: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/39.jpg)
Efficient DOM Rendering
• Batch Operations
• Use transforms & opacity for the best performance of styling, transitions, etc
• Animation used CSS3 with state changes, and Velocity.js where applicable. Stuff IE8 animations or provide a fallback.
![Page 40: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/40.jpg)
Timing
• Callbacks on Events
• requestAnimationFrame
• Careful with setTimeout
![Page 41: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/41.jpg)
Pack your code!
![Page 42: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/42.jpg)
var bt = require("./components/brand_ticker.js");var carousel = require("./components/carousel.js");var mm = require("./components/mobile-menu.js");
window.jQuery(function($) { bt.init(); carousel.init(); mm.init();});
![Page 43: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/43.jpg)
var init = function() { var toggleMenu = function(e) { $(document.body).toggleClass("menu-active*"); e.preventDefault(); }
$(".mobile-menu__toggle").click(toggleMenu);};
module.exports.init = init;
![Page 44: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/44.jpg)
Benefits of Packing
• Proper understanding of dependencies.
• Less prone to copy pasta.
• Easy to build.
![Page 45: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/45.jpg)
Browserifygulp.task(‘dev:scripts', function() { gulp.src(PATHS.project + “/main.js") .pipe(browserify()) .on('prebundle', function(bundle) { bundle.transform(envify({ NODE_ENV: "production" })); })) .pipe(uglify()) .pipe(gulp.dest(PATHS.assetsOut)) .pipe(connect.reload());});
![Page 46: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/46.jpg)
if (process.env.NODE_ENV !== "production") { var debug = require("./debug.js");}
var data = $(“.something”).data(“message”);
if (process.env.NODE_ENV !== "production") { debug.logger(“log this :” + data);}
$(“.some-other-thing”).text(data);
![Page 47: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/47.jpg)
// after envify
if (“production” !== "production") { var debug = require("./debug.js");}
var data = $(“.something”).data(“message”);
if (“production” !== "production") { debug.logger(“log this :” + data);}
$(“.some-other-thing”).text(data);
![Page 48: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/48.jpg)
// during uglify
var data = $(“.something”).data(“message”);$(“.some-other-thing”).text(data);
// after uglify
var a=$(“.something”).data(“message”);$(“.some-other-thing”).text(a);
![Page 49: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/49.jpg)
We’re still figuring this out
• Browserify on big codebases results in 700kb files.
• Maybe okay for Single Page Apps, but for general use, you may still need to split your codebase.
• Options? — http://webpack.github.io http://duojs.org
![Page 50: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/50.jpg)
InternationalisationStop making excuses.
![Page 51: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/51.jpg)
You may not have the resources to localise, but
anyone can internationalise.
![Page 52: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/52.jpg)
{ "app": { "name": "i18next" }, "nav": { "home": "Home", "page1": "Page One", "page2": "Page Two" } }
i18n.init(function(t) { // translate nav $(".nav").i18n(); // programatical access var appName = t("app.name"); });
![Page 53: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/53.jpg)
• Full Phrases, not words.
• Never pluralise out of the translation.
• Trust libraries, don’t roll your own. Translations. Currency. Number Formats. Date times and Time Zones.
![Page 54: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/54.jpg)
DeploymentYou are automating this right?
![Page 55: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/55.jpg)
Staging is now mandatory
![Page 56: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/56.jpg)
Data Flow
• Development
• Development <— Staging (for fixtures)
• Staging —> Production
• Development <— Staging <— Production
![Page 57: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/57.jpg)
Perceptual Diffinghttps://github.com/bslatkin/dpxdt
Staging Production
![Page 58: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/58.jpg)
What’s coming?
![Page 59: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/59.jpg)
Application CacheSingle Page Apps, cached, downloaded once.
![Page 60: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/60.jpg)
IndexedDBWe can store almost anything on the client.
https://www.npmjs.org/package/makedrive
![Page 61: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/61.jpg)
Freaking asm.js
![Page 62: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/62.jpg)
Everything is Awesome
How are you going to be awesome in 2015?
![Page 63: Everything is Awesome - Cutting the Corners off the Web](https://reader036.vdocument.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/63.jpg)
[email protected] @MalucoMarinero
James Rakichless than awesome front end developer but still pretty good