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.

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>
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; }
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 :(
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 :(
57. Vigorous discourse :)
58. Thanks!
    Rich Archer - @slocombe
    Steve Barnett - @maxbarners
    ctfeds.org/king