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

Sharing is Caring - Web Development Resources

Embed Size (px)

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.

Citation preview

Page 1: Sharing is Caring - Web Development Resources

Sharing Is Caring

Trevor Barnes Lead Web Developer MSU Communications and Brand Strategy

Page 2: Sharing is Caring - Web Development Resources

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

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

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

5

ToolsApps and such that I like…

Page 6: Sharing is Caring - Web Development Resources

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

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

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

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

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

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

12

ResourcesSites and such…

Page 13: Sharing is Caring - Web Development Resources

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

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

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

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

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

18

InspirationGet yer motor runnin’…

Page 19: Sharing is Caring - Web Development Resources

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

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

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

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

23

ThanksGlad you could make it

Trevor Barnes Michigan State University [email protected]

Thank you, enjoy the PIZZA & BEER.