Upgrade to Pro — share decks privately, control downloads, hide ads and more …

If I Was King Of The World

If I Was King Of The World

http://www.meetup.com/ctfeds/events/192857192/

About the talk

A talk about the state of web development these days from two too angry Englishmen. There may be swearing. Sorry.

Rich and Steve will talk about the things people do in HTML, CSS, and JS that make them angry. And why they are bad people because of it. Grr.

About the speakers

Rich Archer is an ex-animator that used to build Flash apps for a living. He learned his mistake and now spends most of his time making web applications that look great and work on as many different devices as possible for Unboxed Consulting. When he's not in front of a screen he'll be out roaming the wilds of Cape Town, tweeting pictures of his dogs.

Steve Barnett is a Front-end Developer at Praekelt: they create mobile experiences for the majority world. He loves Progressive Enhancement, Responsive Web Design, and buildings things that work for everyone, everywhere. When he's not at work, he's usually RailsBridging, Device Labbing, or SPINning. He's on The Twitters as @maxbarners, and writes things and stuff at Naga.

Steve Barnett

October 23, 2014
Tweet

More Decks by Steve Barnett

Other Decks in Programming

Transcript

  1. ಠ_ಠ <font>, Tables for layout, transparent.gif, 10px default font, "Best

    viewed at 800x600 resolution", <BR>, <marquee>, Flash, Internet Fucking Explorer, frames, , sIFR/Cufon, Java applets, , , Images without alt text, HTML4, “My nephew builds websites” (ಠಠ)
  2. Image Abuse :( • Inappropriate format • Forcing download of

    MASSIVE hero images • Using the browser to resize images
  3. Give images some TLC :) • .jpg for photos •

    .svg for crispy clarity • .gif for lulz • .png for everything else
  4. Too many HTTP requests :( <link href="styles.css" rel="stylesheet" /> <link

    href="more-styles.css" rel="stylesheet" /> <link href="yet-more-styles.css" rel="stylesheet" /> <script src="main.js"></script> <script src="another-main.js"></script> <script src="also-main.js"></script>
  5. Classname semantics :( .largeHeading {...} .largerHeading {...} .largererHeading {...} .moerseHeading

    {...} .goshWhatNiceHeading {...} .thereMayBeTroubleAHeading {...} .largeHeadingWithABitOfPadding {...}
  6. Describe the purpose of the element, not the properties :)

    .reviewsHeading {...} .lede {...} .l-span6 {...} .small-print {...} .ʇuᴉɹd-llɐɯs-pɐǝɹ-oʇ-pɹɐɥ {...}
  7. Roll your own framework :) (or crib one from someone

    else and start from there) BEM, SMACSS, Twitter Bootstrap, Pure, Foundation, InuitCSS...
  8. Styling with IDs :( IDs are ∞ more specific than

    any number of classes. (Codepen)
  9. CSS Formatting :( • Prefixing all the things • over-qualifying

    selectors .button { background: red; color: white; } .button-alt { background: white; color: red; } .button-alt-alt { color: green; font-size: 10px; } #heading { width: 100%; float: right; }
  10. More consistent code :) • CanIUse.com is your friend •

    Pleeease Playground will prefix your code and provide fallbacks • Run your CSS through a linter. You will learn things. CSS Lint • “Code for violent psychopaths”
  11. Device-specific breakpoints :( /* myPhone */ @media only screen and

    (max-device-width : 320px) { ... } /* myPad */ @media only screen and (max-device-width : 768px) { ... }
  12. Misunderstanding the point of Progressive Enhancement :( “PE is dead

    because no-one visits a website with JavaScript turned off any more” — bloody idiots
  13. Ensure that EVERYONE gains access to your site's content :)

    https://www.flickr.com/photos/splorp/ sets/72157624225682388/
  14. Not letting old browsers die :( “I can't use [feature

    X] because of Internet Explorer...”
  15. Web Performance Audits :) • Webpagetest.org • Google PageSpeed Insights/YSlow

    • Chrome Web Inspector Emulator Modes • Web Performance Budgets • Test on Real Devices
  16. People on the Twitters Anna Debenham @annadebenham | Chris Coyier

    @chriscoyier | Mandy Brown @aworkinglibrary | Jeremy Keith @adactio | Sara Soueidan @SaraSoueidan | Bruce Lawson @brucel | Nicole Sullivan @stubbornella | Jeffrey Zeldman @zeldman | SaraWachterBoettcher @saraannmarie | Brad Frost @bradfrost | Val Head @wilto | Tammy Everts @tameveeep | Ethan Marcotte @beep | Lara Hogan @lara_hogan