sharing is caring - web development resources
DESCRIPTION
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.TRANSCRIPT
![Page 1: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/1.jpg)
Sharing Is Caring
Trevor Barnes Lead Web Developer MSU Communications and Brand Strategy
![Page 2: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/2.jpg)
2
PremiseSo 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.
![Page 3: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/3.jpg)
3
OverviewSo what’s this all about anyway…
The sites, feeds and conferences that matter most to me…
Resources
The apps I absolutely can’t do my job without and can’t remember life before I used them…
Tools
You’re the meaning in my life, you’re the inspiration…
Inspiration
![Page 4: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/4.jpg)
4
• 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…
And the gold foil star goes to…
FormatWe’re all winners, there are no losers…
![Page 5: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/5.jpg)
5
ToolsApps and such that I like…
![Page 6: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/6.jpg)
Tools
6
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)
Honorable Mention - Tower
Website: git-tower.com
![Page 7: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/7.jpg)
Tools
7
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
Honorable Mention - ImageOptim
Website: imageoptim.com
![Page 8: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/8.jpg)
Tools
8
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.)
Honorable Mention - Chrome Developer Tools
Website: google.com
![Page 9: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/9.jpg)
Tools
9
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
#3 - BrowserStackWebsite: browserstack.com
![Page 10: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/10.jpg)
Tools
10
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
#2 - CodeKitWebsite: incident57.com/codekit
![Page 11: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/11.jpg)
Tools
11
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
#1 - Sublime TextWebsite: sublimetext.com
![Page 12: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/12.jpg)
12
ResourcesSites and such…
![Page 13: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/13.jpg)
Resources
13
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
Honorable Mention - Stack Overflow
Website: stackoverflow.com
![Page 14: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/14.jpg)
Resources
14
Overview • Closest thing to a news site for web devs I suppose • Lots of content • Respected names • Timely stories
Honorable Mention - Smashing Magazine
Website: smashingmagazine.com
![Page 15: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/15.jpg)
Resources
15
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
#3 - A List ApartWebsite: alistapart.com
![Page 16: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/16.jpg)
Resources
16
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
#2 - Code SchoolWebsite: codeschool.com
![Page 17: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/17.jpg)
Resources
17
Overview • Chris Coyier is just plain easy to understand • Videos are excellent, have taught me a lot • Very timely topics • Excellent guest bloggers
#1 - CSS-TricksWebsite: css-tricks.com
![Page 18: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/18.jpg)
18
InspirationGet yer motor runnin’…
![Page 19: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/19.jpg)
Inspiration
19
The Conferences
Very inspirational, “it changed my world”, top notch conference in every way
An Event Apart
Website: aneventapart.com
Heard great things about it, would like to attend in the future
Smashing Conference
Website: smashingconf.com
Higher ed + web dev - like peanut butter and chocolate
HighEdWeb
Website: highedweb.org
Recharge your batteries…
![Page 20: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/20.jpg)
Inspiration
20
There are some very smart people to follow, Twitter is only as annoying as the people you choose to follow.
The Twitters
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
![Page 21: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/21.jpg)
Inspiration
21
The Newsletters
I generally read 95% of the links they include each week
Responsive Design Weekly
Website: responsivedesignweekly.com
Some overlap, but also go a little deeper at times
cssweekly
Website: css-weekly.com
Definitely more technical, Angular, Ember, Backbone
JavaScript Weekly
Website: javascriptweekly.com
If you don’t want to keep up all week long, they’ll find the “best” links for you...
![Page 22: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/22.jpg)
Inspiration
22
Communication…good
Coworkers
MSUYou…you complete me…
Tech talk, and all you can eat desserts
Code Lunch
Website: plus.google.com/communities - Search for: “Michigan State University Developers”
We’re singlehandedly keeping Google+ alive
Google+ Communities - Michigan State University Developers
Website: plus.google.com/communities - Search for: “Michigan State University Developers”
![Page 23: Sharing is Caring - Web Development Resources](https://reader035.vdocuments.mx/reader035/viewer/2022062707/5585a4f9d8b42ae22a8b4892/html5/thumbnails/23.jpg)
23
ThanksGlad you could make it
Trevor Barnes Michigan State University [email protected]
Thank you, enjoy the PIZZA & BEER.