Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sharing is Caring - Web Development Resources


Published on

August 2014 Michigan State University WebDev Forum - "Sharing is Caring"
With web development changing so quickly these days, it’s more important than ever for us to share with fellow developers. We’ll take a look at some of our favorite front-end tools, techniques, and resources that we rely on to keep up to date with a modern web development workflow.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sharing is Caring - Web Development Resources

  1. 1. Sharing Is Caring Trevor Barnes Lead Web Developer MSU Communications and Brand Strategy
  2. 2. 2 Premise So what’s this all about anyway… Chris Coyier CSS-Tricks (no, that’s not me) I bet if you stopped reading any dev tech news for a year, you could catch up in a week.
  3. 3. 3 Overview So what’s this all about anyway… Resources The sites, feeds and conferences that matter most to me… Tools The apps I absolutely can’t do my job without and can’t remember life before I used them… Inspiration You’re the meaning in my life, you’re the inspiration…
  4. 4. 4 Format We’re all winners, there are no losers… And the gold foil star goes to… • I like coming back from conferences or presentations with DOZENS of resources… • I like lists of resources, but I want to know what someone’s favorites are… • I like seeing things ranked… • I like this animation…
  5. 5. 5 Tools Apps and such that I like…
  6. 6. Tools 6 Honorable Mention - Tower Website: Overview • Like Git but with a GUI • Very easy to jump right in (at least for me) • Does everything the command line tool does • Very nice graphical interface • Used by Apple, Google, Adobe, Amazon, IBM, Starbucks… (not going away anytime soon)
  7. 7. Tools 7 Honorable Mention - ImageOptim Website: Overview • Lossless! • Free! • Fast! • Much better than Photoshop’s “Save for Web” • Combines several leading image optimizers into one product: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. • The average % saved in file size will make you feel good deep down inside
  8. 8. Tools 8 Honorable Mention - Chrome Developer Tools Website: Overview • Easy to use… • …difficult to truly master • Deeper than you might realize • Check out the FREE class about Dev Tools on, I learned a ton even though I’d been using them for years • Also check out Google Chrome Canary, some very nice cutting edge features for devs (RWD, test your site on 3G speeds and under, etc.)
  9. 9. Tools 9 #3 - BrowserStack Website: Overview • Is there anything else like it out there? • Dozens (hundreds?) of REAL browser combinations • All flavors of IE • Could easily be my #1 but not used every single day during the dev process
  10. 10. Tools 10 #2 - CodeKit Website: Overview • Task manager like Grunt but with a GUI • Compile Everything (Sass, LESS, CoffeeScript…) • Compass, Bourbon built-in • Auto-Refresh Browsers (all yer devices!) • JSLint, Minifiers • Bower Built-In • Autoprefixer • Image Optimizer • Source Maps • Very well supported and updated
  11. 11. Tools 11 #1 - Sublime Text Website: Overview • When you reach Ninja levels, it’s very zen • Goto Anything • Command Palette • Multiple Selections • Split Screen Editing • Plugins • Emmet (ok, so it’s a plugin but so much win) • You will likely fall in love with this app • Nagware but worth the $70 • Tuts+ has a great series of Sublime Text tutorials
  12. 12. 12 Resources Sites and such…
  13. 13. Resources 13 Honorable Mention - Stack Overflow Website: Overview • Because…duh… • I just figure that everyone already uses and knows about it • It’s almost part of Google for me at this point • Will answer all of your questions and then some
  14. 14. Resources 14 Honorable Mention - Smashing Magazine Website: Overview • Closest thing to a news site for web devs I suppose • Lots of content • Respected names • Timely stories
  15. 15. Resources 15 #3 - A List Apart Website: Overview • Chateau Marmont of web developers - all the Rock Stars gather there • Trendsetting • A bit high brow (which can be good and bad) • Preachy at times • A Book Apart series
  16. 16. Resources 16 #2 - Code School Website: Overview • If it fits your learning style, it’s great • Easy at first, but ramps up in difficulty • Videos followed by exercises, only let you proceed when you’ve successfully completed the task • Several different Paths with multiple courses • Javascript, HTML/CSS, iOS, Ruby • Electives: free courses like Angular.js, Chrome Developer Tools • Several free courses, others require a subscription
  17. 17. Resources 17 #1 - CSS-Tricks Website: Overview • Chris Coyier is just plain easy to understand • Videos are excellent, have taught me a lot • Very timely topics • Excellent guest bloggers
  18. 18. 18 Inspiration Get yer motor runnin’…
  19. 19. Inspiration 19 The Conferences An Event Apart Very inspirational, “it changed my world”, top notch conference in every way Website: Smashing Conference Heard great things about it, would like to attend in the future Website: HighEdWeb Higher ed + web dev - like peanut butter and chocolate Website: Recharge your batteries…
  20. 20. Inspiration 20 The Twitters There are some very smart people to follow, Twitter is only as annoying as the people you choose to follow. Brad Frost @brad_frost Jared Spool @jmspool Eric A. Meyer @meyerweb Luke Wroblewski @lukew Chris Coyier @chriscoyier Jeffrey Zeldman @zeldman Ethan Marcotte @beep Scott Jehl @scottjehl Lea Verou @LeaVerou Smashing Magazine @SmashingMag Paul Irish @paul_irish Dan Cedarholm @simplebits A List Apart @alistapart Responsive Design @RWD
  21. 21. Inspiration 21 The Newsletters Responsive Design Weekly I generally read 95% of the links they include each week Website: cssweekly Some overlap, but also go a little deeper at times Website: JavaScript Weekly Definitely more technical, Angular, Ember, Backbone Website: If you don’t want to keep up all week long, they’ll find the “best” links for you...
  22. 22. Inspiration 22 MSU You…you complete me… Coworkers Communication…good Code Lunch Tech talk, and all you can eat desserts Website: - Search for: “Michigan State University Developers” Google+ Communities - Michigan State University Developers We’re singlehandedly keeping Google+ alive Website: - Search for: “Michigan State University Developers”
  23. 23. 23 Thanks Glad you could make it Trevor Barnes Michigan State University Thank you, enjoy the PIZZA & BEER.