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.

28a7165396905ffabc4d1f45609efc39?s=128

Steve Barnett

October 23, 2014
Tweet

Transcript

  1. If I Was King Of The World  ctfeds.org/king

  2. Thanks!

  3. Rich Archer @slocombe Unboxed  Steve Barnett @maxbarners Praekelt

  4. #FEDLife

  5. HTML CSS JS UX

  6. ಠ_ಠ <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” (ಠಠ)
  7. HTML :( -> :)

  8. Not using the right elements :( Email <div class="text-input"></div> <span

    class="fake-button">Hit me</span>
  9. None
  10. Using the right elements :) <label for="email">Email</label> <input type="email" id="email"

    /> <button>Hit me</button>
  11. Image Abuse :( • Inappropriate format • Forcing download of

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

    .svg for crispy clarity • .gif for lulz • .png for everything else
  13. <picture> (or srcset) (or Picturefill.js)

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

  15. 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>
  16. Not many HTTP requests :) <link href="styles.min.css" rel="stylesheet" /> ...

    <script src="main.min.js" async></script>
  17. HTML :)

  18. CSS :( -> :)

  19. Classname semantics :( .largeHeading {...} .largerHeading {...} .largererHeading {...} .moerseHeading

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

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

    else and start from there) BEM, SMACSS, Twitter Bootstrap, Pure, Foundation, InuitCSS...
  22. Using !important :( .i-live-for-the-now { color: red !important; }

  23. None
  24. Using classes, the cascade :) .news { color: green; }

    ... .news-danger { color: red; }
  25. Styling with IDs :( IDs are ∞ more specific than

    any number of classes. (Codepen)
  26. Never do this. Ever. :) Friends don't let friends use

    IDs as a styling hook
  27. Being scared of preprocessors :(

  28. Giving preprocessors a go :) $green: #bada55; @import '_typography.scss'; better

    @media rules @mixin respond-min($width) { ... }
  29. 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; }
  30. 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”
  31. Device-specific breakpoints :( /* myPhone */ @media only screen and

    (max-device-width : 320px) { ... } /* myPad */ @media only screen and (max-device-width : 768px) { ... }
  32. Content-specific breakpoints :) @media screen and (min-width: 40em) { .featured-article

    { ... } }
  33. CSS :)

  34. JS :( -> :)

  35. Misunderstanding the point of Progressive Enhancement :( “PE is dead

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

    https://www.flickr.com/photos/splorp/ sets/72157624225682388/
  37. Using things blindly :(

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

  39. JS :)

  40. UX :( -> :)

  41. Automatic carousels :(

  42. None
  43. Allow people to control their own experiences

  44. Making assumptions about your users :(

  45. (Usability) testing :)

  46. Not letting old browsers die :( “I can't use [feature

    X] because of Internet Explorer...”
  47. Always be fallin' back :)

  48. Share buttons

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

  50. Web Performance Audits :) • Webpagetest.org • Google PageSpeed Insights/YSlow

    • Chrome Web Inspector Emulator Modes • Web Performance Budgets • Test on Real Devices
  51. UX :)

  52. HTML CSS JS UX

  53. 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
  54. The final :( -> :)

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

  56. None
  57. Vigorous discourse :)

  58. Thanks!  Rich Archer - @slocombe  Steve Barnett -

    @maxbarners  ctfeds.org/king