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.

1. Sharing
Is Caring
Trevor Barnes
Lead Web Developer
MSU Communications and
Brand Strategy

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
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
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
Tools
Apps and such that I like…

6. Tools
6
Honorable Mention -
Tower
Website:
git-tower.com
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. Tools
7
Honorable Mention -
ImageOptim
Website:
imageoptim.com
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. Tools
8
Honorable Mention -
Chrome Developer Tools
Website:
google.com
Overview
• Easy to use…
• …difficult to truly master
• Deeper than you might realize
• Check out the FREE class about Dev Tools on CodeSchool.com, 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. Tools
9
#3 - BrowserStack
Website:
browserstack.com
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. Tools
10
#2 - CodeKit
Website:
incident57.com/codekit
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. Tools
11
#1 - Sublime Text
Website:
sublimetext.com
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
Resources
Sites and such…

13. Resources
13
Honorable Mention -
Stack Overflow
Website:
stackoverflow.com
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. Resources
14
Honorable Mention -
Smashing Magazine
Website:
smashingmagazine.com
Overview
• Closest thing to a news site for web devs I suppose
• Lots of content
• Respected names
• Timely stories

15. Resources
15
#3 - A List Apart
Website:
alistapart.com
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. Resources
16
#2 - Code School
Website:
codeschool.com
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. Resources
17
#1 - CSS-Tricks
Website:
css-tricks.com
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
Inspiration
Get yer motor runnin’…

19. Inspiration
19
The Conferences
An Event Apart
Very inspirational, “it changed my
world”, top notch conference in
every way
Website:
aneventapart.com
Smashing Conference
Heard great things about it, would
like to attend in the future
Website:
smashingconf.com
HighEdWeb
Higher ed + web dev - like peanut
butter and chocolate
Website:
highedweb.org
Recharge your batteries…

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. Inspiration
21
The Newsletters
Responsive Design Weekly
I generally read 95% of the links
they include each week
Website:
responsivedesignweekly.com
cssweekly
Some overlap, but also go a little
deeper at times
Website:
css-weekly.com
JavaScript Weekly
Definitely more technical, Angular,
Ember, Backbone
Website:
javascriptweekly.com
If you don’t want to keep up all week long, they’ll find the “best” links for you...

22. Inspiration
22
MSU
You…you complete me…
Coworkers
Communication…good
Code Lunch
Tech talk, and all you can eat
desserts
Website:
plus.google.com/communities - Search
for: “Michigan State University
Developers”
Google+ Communities - Michigan
State University Developers
We’re singlehandedly keeping
Google+ alive
Website:
plus.google.com/communities - Search
for: “Michigan State University
Developers”

23. 23
Thanks
Glad you could make it
Trevor Barnes
Michigan State University
tdb@msu.edu
Thank you, enjoy the PIZZA & BEER.