Everything is Awesome - Cutting the Corners off the Web
-
Upload
james-rakich -
Category
Internet
-
view
146 -
download
1
description
Transcript of Everything is Awesome - Cutting the Corners off the Web
![Page 1: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/3.jpg)
![Page 4: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/4.jpg)
However…
![Page 5: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/6.jpg)
HTML
![Page 7: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/16.jpg)
CSS
![Page 17: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/28.jpg)
On Responsiveness
![Page 29: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/33.jpg)
Rethink Breakpoints
![Page 34: Everything is Awesome - Cutting the Corners off the Web](https://reader036.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader036/viewer/2022081401/559b85091a28ab29458b470a/html5/thumbnails/63.jpg)
[email protected] @MalucoMarinero
James Rakichless than awesome front end developer but still pretty good