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.

1. Everything is
Awesome
Cutting the corners off the web.

2. “The Web Is Dying; Apps Are Killing It.”
Really now?

4. However…

5. We’re making this complicated.

6. HTML

7. 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&amp;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&amp;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:christopher.mims@wsj.com">christopher.mims@wsj.com</
a></li>
<li class="facebook">
<iframe data-dj-src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F
%2Fwww.facebook.com
%2Fchristophermims&amp;layout=button_count&amp;show_faces=false&amp;colorscheme=light&amp;font&amp;width=250&amp;height=21"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:21px;" allowtransparency="true"></

8. doctype html
html(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.

9. DRY Templating
• Layout Templates with Extending Blocks
• Includes with Variables
• Good Loops and Conditionals

10. 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

11. Building the Frontend
You do automate this right?

12. gruntjs.com
Javascript Task Runners
gulpjs.com

13. gulp.task(‘dev:styles', function() {
gulp.src(PATHS.project + “/main.less")
.pipe(less({strictMath: true}))
.pipe(gulp.dest(PATHS.assetsOut))
.pipe(connect.reload());
});

14. 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());
});

15. 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());
});

16. CSS

17. Just do the Comps?
It’s not that simple.

18. You are building a
design system.

19. Bootstrap/Foundation is
just deferring the
problem.

20. Manage Specificity
http://csswizardry.com/2014/10/the-specificity-graph/
Namespace with Purpose

21. Preprocessors
What’s their role now?

22. It’s not about prefixes.
• Variables
• Mixins
• Extends
• Creating a DRY visual system.

23. @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

24. @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.

25. // 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.

26. 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.

27. Postprocessing for
Compatibility
• Media Query Packing
• Minification
• px fallbacks for rems (pixrem)
• Prefixing (autoprefixer)
• http://pleeease.io/ (collection of tools)

28. On Responsiveness

29. Device Targeting
Doesn’t Work

30. Touch is becoming a
primary concern.

31. :hover
:focus
:active

32. iOS pretends it can do
:hover - careful with
{display: none}

33. Rethink Breakpoints

34. Light on the hill
• Pointer based media queries
• Responsive Images (picture)
• but still no element queries

35. Javascript is
Awesome(ly bad)

36. Modern Javascript
Engines are FAST

37. DOM is still slow

38. Mobile requires us to
write efficient Javascript

39. 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.

40. Timing
• Callbacks on Events
• requestAnimationFrame
• Careful with setTimeout

41. Pack your code!

42. 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();
});

43. var init = function() {
var toggleMenu = function(e) {
$(document.body).toggleClass("menu-active*");
e.preventDefault();
}
$(".mobile-menu__toggle").click(toggleMenu);
};
module.exports.init = init;

44. Benefits of Packing
• Proper understanding of dependencies.
• Less prone to copy pasta.
• Easy to build.

45. Browserify
gulp.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());
});

46. 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);

47. // 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);

48. // during uglify
var data = $(“.something”).data(“message”);
$(“.some-other-thing”).text(data);
// after uglify
var a=$(“.something”).data(“message”);
$(“.some-other-thing”).text(a);

49. 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

50. Internationalisation
Stop making excuses.

51. You may not have the
resources to localise, but
anyone can internationalise.

52. {
"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");
});

53. • 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.

54. Deployment
You are automating this right?

55. Staging is now
mandatory

56. Data Flow
• Development
• Development <— Staging (for fixtures)
• Staging —> Production
• Development <— Staging <— Production

57. Perceptual Diffing
https://github.com/bslatkin/dpxdt
Staging Production

58. What’s coming?

59. Application Cache
Single Page Apps, cached, downloaded once.

60. IndexedDB
We can store almost anything on the client.
https://www.npmjs.org/package/makedrive

61. Freaking asm.js

62. Everything is
Awesome
How are you going to be awesome in 2015?

63. James Rakich
less than awesome front end developer but still pretty good
james@fullandbydesign.com.au
@MalucoMarinero