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. If I Was King
    Of The World

    ctfeds.org/king

    View full-size slide

  2. Rich Archer
    @slocombe
    Unboxed

    Steve Barnett
    @maxbarners
    Praekelt

    View full-size slide

  3. ಠ_ಠ
    , Tables for layout, transparent.gif, 10px default font,
    "Best viewed at 800x600 resolution",
    , ,
    Flash, Internet Fucking Explorer, frames, , sIFR/Cufon, Java
    applets, , , Images without alt text, HTML4, “My
    nephew builds websites”
    (ಠಠ)

    View full-size slide

  4. HTML
    :( -> :)

    View full-size slide

  5. Not using the right elements :(
    Email

    Hit me

    View full-size slide

  6. Using the right elements :)
    Email

    Hit me

    View full-size slide

  7. Image Abuse :(
    • Inappropriate format
    • Forcing download of MASSIVE hero images
    • Using the browser to resize images

    View full-size slide

  8. Give images some TLC :)
    • .jpg for photos
    • .svg for crispy clarity
    • .gif for lulz
    • .png for everything else

    View full-size slide


  9. (or srcset)
    (or Picturefill.js)

    View full-size slide

  10. Save FTW :)
    No Photoshop? No excuse! www.picmonkey.com

    View full-size slide

  11. Too many HTTP requests :(






    View full-size slide

  12. Not many HTTP requests :)

    ...

    View full-size slide

  13. Classname semantics :(
    .largeHeading {...}
    .largerHeading {...}
    .largererHeading {...}
    .moerseHeading {...}
    .goshWhatNiceHeading {...}
    .thereMayBeTroubleAHeading {...}
    .largeHeadingWithABitOfPadding {...}

    View full-size slide

  14. Describe the purpose of the element, not
    the properties :)
    .reviewsHeading {...}
    .lede {...}
    .l-span6 {...}
    .small-print {...}
    .ʇuᴉɹd-llɐɯs-pɐǝɹ-oʇ-pɹɐɥ {...}

    View full-size slide

  15. Roll your own framework :)
    (or crib one from someone else and start from there)
    BEM, SMACSS, Twitter Bootstrap, Pure, Foundation, InuitCSS...

    View full-size slide

  16. Using !important :(
    .i-live-for-the-now {
    color: red !important;
    }

    View full-size slide

  17. Using classes, the cascade :)
    .news {
    color: green;
    }
    ...
    .news-danger {
    color: red;
    }

    View full-size slide

  18. Styling with IDs :(
    IDs are ∞ more specific than any number of classes. (Codepen)

    View full-size slide

  19. Never do this. Ever. :)
    Friends don't let friends use IDs as a styling hook

    View full-size slide

  20. Being scared of preprocessors :(

    View full-size slide

  21. Giving preprocessors a go :)
    $green: #bada55;
    @import '_typography.scss';
    better @media rules
    @mixin respond-min($width) {
    ...
    }

    View full-size slide

  22. 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; }

    View full-size slide

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

    View full-size slide

  24. Device-specific breakpoints :(
    /* myPhone */
    @media only screen and (max-device-width : 320px) {
    ...
    }
    /* myPad */
    @media only screen and (max-device-width : 768px) {
    ...
    }

    View full-size slide

  25. Content-specific breakpoints :)
    @media screen and (min-width: 40em) {
    .featured-article {
    ...
    }
    }

    View full-size slide

  26. Misunderstanding the point of
    Progressive Enhancement :(
    “PE is dead because no-one visits a website with JavaScript
    turned off any more”
    — bloody idiots

    View full-size slide

  27. Ensure that
    EVERYONE gains
    access to your site's
    content :)
    https://www.flickr.com/photos/splorp/
    sets/72157624225682388/

    View full-size slide

  28. Using things blindly :(

    View full-size slide

  29. Learning from frameworks :)
    Vanilla JavaScript
    $('.classname')
    document.querySelectorAll('.classname')

    View full-size slide

  30. Automatic carousels :(

    View full-size slide

  31. Allow people to control their own experiences

    View full-size slide

  32. Making assumptions
    about your users :(

    View full-size slide

  33. (Usability) testing :)

    View full-size slide

  34. Not letting old browsers die :(
    “I can't use [feature X] because of Internet Explorer...”

    View full-size slide

  35. Always be fallin'
    back :)

    View full-size slide

  36. Share buttons

    View full-size slide

  37. Forgetting that not
    everyone has
    constant 3G access :(

    View full-size slide

  38. Web Performance Audits :)
    • Webpagetest.org
    • Google PageSpeed Insights/YSlow
    • Chrome Web Inspector Emulator Modes
    • Web Performance Budgets
    • Test on Real Devices

    View full-size slide

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

    View full-size slide

  40. The final
    :( -> :)

    View full-size slide

  41. Know-it-all-speakers
    at meetups :(

    View full-size slide

  42. Vigorous discourse :)

    View full-size slide

  43. Thanks!

    Rich Archer - @slocombe

    Steve Barnett - @maxbarners

    ctfeds.org/king

    View full-size slide