├── README.html └── README.md /README.html: -------------------------------------------------------------------------------- 1 | README

Frontend-Resources

1018 |

A collection of all the resources I use to keep up with the latest in front-end web development - Tom McGurl @Tom_McGurl

1019 |

Front-end Web Development is rapidly growing and changing. Sometimes it’s tough to keep up with all of the libraries and frameworks out there. As a lead javascript developer at my company, I’m often approached by co-workers and friends who are looking to get into front-end development or polish their skills. I decided to make this repo to list all of the great resources I use everyday to keep up to date and to learn about all the awesome things happening on the web!

1020 |

Inspired by all the awesome lists on Github (also see the Repositories section)

1021 |

Table of Contents

1022 | 1036 |

Podcasts

1037 |

Podcasts are an amazing way to get the latest news and info on all the awesome things happening in web development (especially if you’re a commuter ;) ). This is where I get most of my news/ keep up with the happenings in the Javascript community.

1038 | 1101 |

Learning Resources/Tutorials

1102 |

Here are some of the great websites that offer tutorials.

1103 | 1147 |

Twitter

1148 |

Here are some of the people/groups that I follow on twitter that post some great front-end news and articles.

1149 |

Overall my suggestion is just search and follow the people who’s Blogs articles you’ve read or who’s names you know from podcasts,tutorials, videos, conferences, and the community in general.

1150 | 1305 |

Blogs

1306 | 1336 |

Books

1337 |

Here are some of the books I’ve found super useful.

1338 | 1366 |

Videos

1367 |

Conference Videos

1368 | 1395 |

Other

1396 | 1405 |

Repositories

1406 |

There are also a ton of Github repos that are great to watch. Some are dedicated to collecting all of the resources for a given topic (these are where I got the inspiration for this). These are amazing ways to find a material on a particular framework or library. Here are some of the ones I use.

1407 | 1463 |

Style and Best Practice Guides

1464 |

Style guides are a useful way to get everyone on the same page when it comes to code style. Style and best practice guides help make code more standard, readable, and shareable. All of which make code collaboration and onboarding easier. There are plenty of benefits to using a styleguide amongst a team or even for your own benefit.

1465 | 1490 |

Things to check out (No particular order)

1491 | 1683 |

Meetups

1684 |

A friend of mine has been going to some meetups lately and invited me along to one. Meetups are awesome! They are a great way to network, meet other people who share your interests in development, and hear some awesome talks.

1685 | 1692 |

What I’m learning this week

1693 |

I’ve decided to add a section covering what topics I’m looking into on a weekly basis. I’m putting it here for now until I move some of this over to a blog.

1694 |

Week of:

1695 | 1743 |

Road Map

1744 |

Here are a few things I’m planning on adding to this repo.

1745 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend-Resources 2 | 3 | A collection of all the resources I use to keep up with the latest in front-end web development - Tom McGurl [@Tom_McGurl](https://twitter.com/tom_mcgurl) 4 | 5 | Front-end Web Development is rapidly growing and changing. Sometimes it's tough to keep up with all of the libraries and frameworks out there. As a lead javascript developer at my company, I'm often approached by co-workers and friends who are looking to get into front-end development or polish their skills. I decided to make this repo to list all of the great resources I use everyday to keep up to date and to learn about all the awesome things happening on the web! 6 | 7 | Inspired by all the [awesome lists on Github](https://github.com/bayandin/awesome-awesomeness) (also see the [Repositories section](#repos)) 8 | 9 | ##Table of Contents 10 | - [Podcasts](#podcasts) 11 | - [Learning Resources/Tutorials](#learning) 12 | - [Twitter](#twitter) 13 | - [Blogs](#blogs) 14 | - [Books](#books) 15 | - [Videos](#videos) 16 | - [Repositories](#repositories) 17 | - [Style and Best Practice Guides](#style-and-best-practice-guides) 18 | - [Things to check out](#things-to-check-out-no-particular-order) 19 | - [What I'm learning about this week](#what-im-learning-this-week) 20 | - [Meetups](#meetups) 21 | - [Road Map](#road-map) 22 | 23 | 24 | ## Podcasts 25 | Podcasts are an amazing way to get the latest news and info on all the awesome things happening in web development (especially if you're a commuter ;) ). This is where I get most of my news/ keep up with the happenings in the Javascript community. 26 | 27 | - [Javascript Jabber](http://devchat.tv/js-jabber/) (Weekly every Wednesday) 28 | + An awesome podcast for everything Javascript and my personal favorite! 29 | + Don't skip over the early episodes, even though they may not be current they have awesome info on things like backbone, coffeescript, ember, javascript objects and many more 30 | + Hosted consistently by Charles Max Wood of [devchat.tv](http://devchat.tv/), check out his other podcasts, they are all awesome! 31 | + Other co-hosts are also great [(see the Twitter section)](#twitter)! 32 | - [ShopTalk](http://shoptalkshow.com/) (Weekly) 33 | + Another great podcast 34 | + Hosted by Dave Rupert and Chris Coyier (of CSS tricks) 35 | + They cover a lot of different areas and have some design focused episodes as well as javascript episodes 36 | - [The Web Platform Podcast](http://thewebplatform.libsyn.com/) 37 | + Another great podcast that covers all sorts of frontend technologies 38 | + They cover things from Web Components to Web RTC and much more 39 | - [Adventures in Angular](http://devchat.tv/adventures-in-angular) (Weekly every Thursday) 40 | + An amazing Angular podcast from the same guys that do Javascript Jabber 41 | + A must-listen to for anyone getting into or already using Angular 42 | - [NodeUp](http://nodeup.com/) 43 | + NodeJS podcast that covers a wide range of Node related topics and covers the future of NodeJS as well as tips for NodeJS developers. 44 | - [Frontside the Podcast](https://frontsidethepodcast.simplecast.fm/) 45 | + The hosts do a lot of work in EmberJS so there are some really fantastic discussions on the EmberJS framework 46 | + They also cover a wide range of topics from discussions about being a developer, current tech trends, and news 47 | - [Angular Air](https://ng-air.github.io/) 48 | + This podcast can also be watched in video form on youtube 49 | + This is another fantastic Angular podcast. 50 | - [CodeWinds](http://codewinds.com/podcast.html) 51 | + It covers JSConf 2014, Modular Javasctipt, Isomorphic apps, Reactjs, and more 52 | + Codewinds is back after a short hiatus and now has plans for weekly episodes. 53 | - [Ember Land](http://ember.land/) 54 | + An podcast all about Ember 55 | + This is a technical podcast that talks about Ember features, the Ember community, and Ember news 56 | - [Ember Weekend](https://emberweekend.firebaseapp.com/episodes/our-first-foray) 57 | + An weekly EmberJS podcast 58 | + The hosts Chase McCarthy and Jonathan Jackson discuss Ember projects they are working on, Ember news, resourses and more. 59 | - [The Changelog](https://changelog.com/podcast/) 60 | + The Changelog is another great developer podcast 61 | + It covers a wide range of topics including, recently, Typscript, ReactJS, Ember, and the Rust programming language 62 | - [React Podcast](http://reactpodcast.com/) (By monthly) 63 | + A new podcast centering around Facebook's ReactJS 64 | - [5 Minutes of Javascript](https://fivejs.codeschool.com/) (weekly) 65 | + An awesome podcast with updates on what's going on in the JS community 66 | + In 5 minutes they cover the past weeks JS news 67 | - [Javascript Air](https://javascriptair.com/) (weekly) 68 | + A Fantastic podcast about all things Javascript. 69 | + They also do live streaming of the podcast so users can tweet in questions 70 | + Really great topics. 71 | - [React 30](https://react30.com/) 72 | + A podcast dedicated to React and from the same team as Javascript Air 73 | + This podcast covers some awesome [ReactJS](#react) topics in 30 minutes! 74 | - [Frontend Happy Hour](http://frontendhappyhour.com/) 75 | + A group of developers discuss all things Front end over drinks. 76 | + This is a great podcast and the topics are awesome and super informative. 77 | + They cover things such as, the future of javascript, frameworks, keeping up with frontend trends, and more. 78 | - [React Native Radio](https://devchat.tv/react-native-radio) 79 | + A podcast that focuses on [React Native](#react-native) 80 | + This is a great resource for anyone interested in or working with React Native! 81 | - [Elm Town](https://elmtown.github.io/) 82 | + A Podcast dedicated to the Elm Programming language. 83 | + A great resource for anyone interested in, or working with Elm! 84 | - [Space Dojo](http://podcast.crater.io/) 85 | + A roundtable podcast about Javascript. 86 | + This podcast has some episodes covering awesome topics such as NativeScript, Redux, Elm, and React. 87 | - [Full Stack Radio](http://www.fullstackradio.com/) 88 | + "A podcast for developers interested in building great software products." - webostie 89 | + This podcast covers the full stack but has some great frontend topics. 90 | + This is a fantastic podcast for those interested in not only the frontend, but how it connects to the entire stack. 91 | - [JAMStack Radio](http://www.heavybit.com/library/podcasts/jamstack-radio/) 92 | + A podcast all about the JAMStack, a stack for building fast and secure apps and websites. 93 | + JAM stands for JavaScript, APIs and Markdown. 94 | + You can read more about the JAMStack [here](https://jamstack.org/). 95 | 96 | 97 | ## Learning Resources/Tutorials 98 | 99 | Here are some of the great websites that offer tutorials. 100 | 101 | - [Egghead.io](https://egghead.io/) 102 | + A super awesome site that specializes in small 'bite sized' video tutorials 103 | + I direcet anyone who asks me for great Angular tutorials to go here 104 | + They have videos covering things such as Angular,Core Javascript, React, ES6, D3, and NodeJS 105 | + A must for any front-end developer 106 | + Many of the hosts and guests from the podcasts above contribute tutorials to this site 107 | - [Exercism.io](http://exercism.io/) 108 | + Exercism.io is an awesome site with exercises for many different languages. 109 | + They have a Javascript track as well as an ESNext track. 110 | + You work on one exercise at a time and when you are finished you "submit" your answer 111 | You can then view your solution on the site where you can comment, others can comment, 112 | and you can iterate on your solution. 113 | + You can also view how others solved the same problem so you can see the many ways to tackle 114 | a problem. 115 | + I've been doing the Elm, Elixir, Clojure, and Javascript tracks and it's been a ton of functions 116 | + You can check out my exercism repos here, but the real fun is doing it for yourself ;) 117 | + [Elm](https://github.com/tommcgurl/elm-exercism) 118 | + [Elixir](https://github.com/tommcgurl/elixir-exercism) 119 | + [Clojure](https://github.com/tommcgurl/clojure-exercism) 120 | - [Pluralsight](http://www.pluralsight.com/tag/developer?pageSize=48&sort=new) 121 | + This site has tons of material on everything development. 122 | + Many of the hosts and guests from the podcasts above contribute tutorials to this site 123 | - [Scotch.io](https://scotch.io/) 124 | + This is a great site with many tutorials on everything front-end 125 | + They cover the entire [MEAN](#mean) (Mongodb, Expressjs, Angular, and NodeJS) stack 126 | + They have a great Reactjs series 127 | + They do an article each week on the top [Code Pens](http://codepen.io/) 128 | + Great site to bookmark on your phone 129 | - [Github](https://github.com/) 130 | + This one should be obvious, but there are a ton of tutorial repos here, just search for what you are interested in. 131 | + Many time the repo will link out to a blog to go along with the tutorial 132 | - [Codrops](http://tympanus.net/codrops/) 133 | + Great Web design tutorials and inspirations 134 | - [Learn ES6 (harmony)](http://learnharmony.org/) 135 | + This site lets you try out the latest features of [ES6](#es6) right in the browser. 136 | + Learn the new features while trying them out yourself. 137 | + Try out arrow functions, object destructuring, method shorthand, template strings, classes and more. 138 | - [Functional Programming Tutorial](http://reactive-extensions.github.io/learnrx/) 139 | + This interactive tutorial is a great way to learn the basics of functional programming. 140 | + This tutorial takes you through using functions such as map, filter, and reduce to make your code more concise and durable. 141 | + "Functional programming provides developers with the tools to abstract common collection operations into reusable, composable building blocks." 142 | - [Dashing D3](https://www.dashingd3js.com/table-of-contents) 143 | + This is an interactive tutorial on the charting library D3. 144 | + It is a nice tutorial that goes over the basics and builds off them to teach you D3 in a fun interactive way. 145 | - [JavaScript 30](https://javascript30.com/) 146 | + This is a 30 day Vanilla JavaScript challenge. 147 | + "Build 30 things in 30 days with 30 tutorials" -homepage 148 | - [WarriorJS](https://github.com/olistic/warriorjs) 149 | + A fun way to learn Javascript! 150 | + You play a game by writing JavaScript to control your character! 151 | + Your character has to climb a tall tower where, on each floor, you must write code 152 | instructing your character to attack, rescue captives and reach the stairs. 153 | 154 | ## Twitter 155 | Here are some of the people/groups that I follow on twitter that post some great front-end news and articles. 156 | 157 | Overall my suggestion is just search and follow the people who's Blogs articles you've read or who's names you know from podcasts,tutorials, videos, conferences, and the community in general. 158 | 159 | - [@eggheadio](https://twitter.com/eggheadio) 160 | - Posts when new videos come out 161 | - [@JavaScriptDaily](https://twitter.com/javascriptdaily) 162 | - The name says it all 163 | - Javascript news 164 | - [@ReactJSNews](https://twitter.com/reactjsnewsnk) 165 | + Shares ReactJS news, tutorials, and creations 166 | - [@codrops](https://twitter.com/codrops) 167 | + They post when new articles come out and when they release their 'Web Design & Development News: Collective' 168 | - [@EmberSherpa](https://twitter.com/embersherpa) 169 | + Tweets about EmberJS resources news and the community 170 | - [@EmberWeekly](https://twitter.com/emberweekly) 171 | + EmberJS news, articles, tips, and code 172 | - [@angularjs](https://twitter.com/angularjs) 173 | + Another self-explanitory one. 174 | + Angular news 175 | - [@jashkenas](https://twitter.com/jashkenas) (Jeremy Ashkenas) 176 | + Jeremy Ashkenas created BackboneJS, UnderscoreJS, and Coffeescript! 177 | + Follow Jeremy for for tweets about the above and Javascript in general 178 | + Check out the [Javascript Jabber](#jj) episode with Jeremy on Backbone 179 | - [@wycats](https://twitter.com/wycats) (Yehuda Katz) 180 | + Yehuda is a member of the EmberJS, Ruby on Rails, JQuery, and now Rust core teams 181 | + Yehuda tweets about Ember and Javascript 182 | + Also check out Yahuda many of the [podcasts](#podcasts) I've listed above. 183 | - [@DanWahlin](https://twitter.com/danwahlin) 184 | + Dan tweets about javascript news and articles 185 | + He also has a great blog with some good tutorials and posts 186 | + Check out his awesome [blog](https://weblogs.asp.net/dwahlin) [(see the Blog section)](#blogs) 187 | - [@John_Papa](https://twitter.com/john_papa) 188 | + John is featured on the [Adventures in Angular podcast](http://devchat.tv/adventures-in-angular)(See above) 189 | + He tweets about javascript tidbits and especially angularjs 190 | + He also has a [blog](http://www.johnpapa.net/) [(see the Blog section)](#blogs) 191 | - [@wardbell](https://twitter.com/wardbell) 192 | + Ward built [BreezeJS](http://www.getbreezenow.com/) 193 | + He also does a lot of work in Angular and tweets about that 194 | + Ward is featured in many of the [podcasts](#podcasts) above 195 | + Check out his [Javascript Jabber](#jj) episode on the [MEAN Stack](#mean) 196 | + Also check out the [Adventures in Angular](#aia) episodes he co-hosts on testing with Angular 197 | - [@scotch_io](https://twitter.com/scotch_io) 198 | + Tweet when new articles com out 199 | + Great way to keep up on the sites tutorials 200 | - [@BenNadel](https://twitter.com/bennadel) 201 | + Ben is always posting things about javascript 202 | + He also has a great [blog](http://www.bennadel.com/) [(see the Blog section)](#blogs) 203 | - [@josepheames](https://twitter.com/josepheames) 204 | + One of the host of [Javascript Jabber](#jj) and [Adventures in Angular](#aia) 205 | + One of the organizers of [ng-conf](http://www.ng-conf.org/) 206 | + Tweets about angular and javascript in general 207 | + He teaches [Pluralsight](#ps) cources as well 208 | - [@js_dev](https://twitter.com/js_dev) (Aaron Frost) 209 | + Aaron frost is a co-host on many [Javascript Jabber](#jj) and [Adventures in Angular](#aia) episodes 210 | + He is also an organizer of [ng-conf](http://www.ng-conf.org/) 211 | + He also has video tutorials on [egghead.io](#eio) 212 | - [@auser](https://twitter.com/auser) (Ari Lerner) 213 | + Ari is the author of the popular [ng-book](#ngbook) 214 | + A lot of posts about AngularJS news updates and of course ng-book 215 | - [@tomdale](https://twitter.com/tomdale) 216 | + Tom helped create EmberJS and is part of the core team 217 | + Tom tweets about EmberJS and Javascript 218 | - [@eisenbergeffect](https://twitter.com/eisenbergeffect) (Rob Eisenberg) 219 | + Rob is most famous for his javascript framwork, [Durandal](http://durandaljs.com/) 220 | + Rob now works on a new framework called [Aurelia](#aurelia) 221 | + He also worked on Angular 2 for a while before leaving and releasing Aurelia. 222 | + He also has a [blog](http://eisenbergeffect.bluespire.com) [(see the Blog section)](#blogs) 223 | - [@floydophone](https://twitter.com/floydophone) (Pete Hunt) 224 | + Pete Hunt is most famous for his work at Facbook 225 | + He is part of the ReactJS team 226 | + He tweets about ReactJS, Flux, and all things related. 227 | - [@ryanflorence](https://twitter.com/ryanflorence) 228 | + Ryan Florence is a huge advocate for ReactJS and started the popular [react-router](https://github.com/rackt/react-router) 229 | + Ryan posts about Javascript, ReactJS updates, news, and his [ReactJS Training Courses](https://reactjs-training.com/) 230 | - [@mjackson](https://twitter.com/mjackson) 231 | + Michael Jackson works with Ryan Florence (above) on the [react-router](https://github.com/rackt/react-router) 232 | + He posts about javascript as well as his ReactJS training courses with Ryan Florence [ReactJS Training Courses](https://reactjs-training.com/) 233 | - [@stevenewcomb](https://twitter.com/stevenewcomb) 234 | + Steve Newcomb is currently most famous for being the CEO and founder of famo.us 235 | + Follow steve for updates on Famous as well as some awesome javascript posts. 236 | - [@_ericelliott](https://twitter.com/_ericelliott?lang=en) 237 | + Eric is a fantastic person to follow for Javascript goodies. 238 | + He tweets frequently and his tweets always contain awesome javascript info and resources. 239 | + I'm constantly retweeting his stuff becuase it's realy awesome. 240 | - [@dan_abramov](https://twitter.com/dan_abramov) 241 | + Dan Abramov is the creator of [Redux](#redux) and some awesome React components and libraries. 242 | + Dan tweets about javascript, React, and of course Redux. 243 | - [@stackjs](https://twitter.com/stackjs) 244 | + Javascript stacks is another great resource for Javascript resourses and info. 245 | + They post about cool new libraries, code pens, jsbin, jsfiddles, and other javascript tidbits. 246 | + This is another frequent tweeter. 247 | - [@echojs](https://twitter.com/echojs) 248 | + "Community-driven news site entirely focused on JavaScript development, HTML5, and front-end news." 249 | + Echojs is a great resource that tweets all things js news, blogs, and repos. 250 | - Follow Frameworks and Libraries 251 | + [@emberjs](https://twitter.com/emberjs) 252 | + [@reactjs](https://twitter.com/reactjs) 253 | + [@gruntjs](https://twitter.com/gruntjs) 254 | + [@gulpjs](https://twitter.com/gulpjs) 255 | + [@nodejs](https://twitter.com/nodejs) 256 | + [@official_iojs](https://twitter.com/official_iojs) 257 | + [@Ionicframework](https://twitter.com/ionicframework) 258 | + and so on... 259 | + Just search for things you use in your day-to-day development 260 | 261 | ## Blogs 262 | - [Medium](https://medium.com/search?q=javascript) 263 | + "Medium is a place to share your stories and ideas" - Medium.com/about 264 | + I've linked above to the 'Javascript' section of Medium (I just did a search for 'javascript') 265 | + This site is great and many awesome developers post and link to articles here 266 | + It's also a great place to get started with spreading your ideas without having to buy your own domain or setup a blog site 267 | - [John Pappa's Blog: Evangalist On The Loose](http://www.johnpapa.net/) 268 | + Blogs about everyting Javascript and angular 269 | + He has some great posts 270 | - [Ben Nadel's Blog](http://www.bennadel.com/) 271 | + Ben has some awesome posts and tutorials 272 | + You can learn a lot aobut javascript on this site 273 | + You'll also always be able to spot him in all of his great photos from different conferences ;) 274 | - [Dan Wahlin's Blog](https://weblogs.asp.net/dwahlin) 275 | + Another awesome blog for javascript tutorials 276 | + He covers everything from AngularJS to Core Javascript such as ES6 277 | - [Rob Eisenberg's Blog](http://eisenbergeffect.bluespire.com/) 278 | + Rob discusses his new framework [Aurelia](#aurelia) 279 | + He also compares Aurelia to other frameworks such as Angular 2 and his experiences working on Angular 2 and why he decided to leave. 280 | 281 | #Books 282 | Here are some of the books I've found super useful. 283 | 284 | - [Elequent Javascript](http://eloquentjavascript.net/) 285 | + This book is fantastic! 286 | + There is an online version and a [paperback version](http://www.amazon.com/gp/product/1593275846/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1593275846&linkCode=as2&tag=marijhaver-20&linkId=VPXXXSRYC5COG5R5) 287 | + I prefer the onine once becuase it has interactive excersises at the end of each chapter 288 | + Realy great resource to learn the ins-and-outs of Javascript 289 | - [ng-book](https://www.ng-book.com/) 290 | + An awesome Angular book 291 | + This was the first book I read when I started Angular and it was extremely helpful 292 | + It's constantly being updated 293 | + Written by Ari Lerner, co-runner of [ng-newsletter](http://www.ng-newsletter.com/) [(see Twitter section)](#twitter) 294 | + "The print version of the book is available through [Amazon](http://www.amazon.com/ng-book-The-Complete-Book-AngularJS/dp/099134460X/ref=tmm_pap_title_0?ie=UTF8&qid=1389643028&sr=8-1) and [Createspace](https://www.createspace.com/4572262)." - ng-book homepage 295 | - [Essential Javascript](http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182) 296 | + This book goes deep into the workings of javascript and helps provide a better understanding when working with the language 297 | + Also check out the [Javascript Jabber episode with the author, David Herman](http://devchat.tv/js-jabber/044-jsj-book-club-effective-javascript-with-david-herman) 298 | - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) 299 | + This is an open source book series that "dives deep into the core mechanisms of the Javascript language" - the readme 300 | + You can read them all online for free or even buy the print copies 301 | + These books cover everything from the super basics in the book [_Up & Going_](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going) all the way to [_ES6 & Beyond_](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) 302 | 303 | 304 | #Videos 305 | ####Conference Videos 306 | - 2015 307 | - [ng-conf 2015](https://www.youtube.com/user/ngconfvideos) 308 | + This is the youtube page for all the ng-conf videos - March 5-6 (Salt Lake City, Utah) 309 | - [Ember Conf 2015](https://www.youtube.com/watch?v=o12-90Dm-Qs&list=PLE7tQUdRKcyacwiUPs0CjPYt6tJub4xXU) 310 | + This is the youtube page for all the videos from Ember Conf 2015 - March 3-4 (Portland, Oregon) 311 | - [Reactjs Conf 2015](https://www.youtube.com/watch?v=KVZ-P-ZI6W4&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) 312 | + This is the youtube page for the videos from Reactjs conf 2015 - January 28-29 (Facebook HQ, CA) 313 | - [React Rally 2015](https://www.youtube.com/playlist?list=PLUD4kD-wL_zZhHy-G8hPNZTvx_M35loXQ) 314 | + This is the youtube playlist for the React Rally videos - August 24-25 (Salt Lake City, UT) 315 | - [ng-Europe 2014](https://www.youtube.com/channel/UCEGUP3TJJfMsEM_1y8iviSQ) 316 | + Youtube page for ng-Europe videos 317 | - [JSConf 2015](https://www.youtube.com/channel/UCzoVCacndDCfGDf41P-z0iA) 318 | + Youtube page for all of the JSConf videos 319 | - [Fluent Conf 2015](https://www.youtube.com/watch?v=2ksXo2_Lfl0&list=PL055Epbe6d5ZqIHE7NA5f6Iq_bZNjuWvS) 320 | + Youtube playlist for all the Fluent Conf 2015 talks 321 | + Some really influential members of the javascript community talk all things web and javascript. 322 | - 2016 323 | - [ReactJS Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY) 324 | + Youtube playlist for all of the ReactJS Conf 2016 videos - February 22 & 23 (San Francisco, CA) 325 | - [React Rally 2016](https://www.youtube.com/watch?v=_MAD4Oly9yg&list=PLUD4kD-wL_zYSfU3tIYsb4WqfFQzO_EjQ) 326 | + Youtube playlist for all the React Rally videos - August 25-26 (Salt Lake City, UT) 327 | - [Elm Conf 2016](https://www.youtube.com/playlist?list=PLglJM3BYAMPH2zuz1nbKHQyeawE4SN0Cd) 328 | + Youtube playist for all the Elm Conf videos - September 15 (St. Louis, Missouri) 329 | 330 | 331 | 332 | ####Other 333 | - [JS Must Watch](https://github.com/bolshchikov/js-must-watch) 334 | + "This is a list of must-watch videos devoted to JavaScript" - the readme 335 | + This repo has some fantastic javascript videos. 336 | + It is sorted by date from 2009 - 2015. 337 | + The lastest entry is the two part series, _Using ECMAScript 6 today_. 338 | 339 | #Repositories 340 | There are also a ton of Github repos that are great to watch. Some are dedicated to collecting all of the resources for a given topic (these are where I got the inspiration for this). These are amazing ways to find a material on a particular framework or library. Here are some of the ones I use. 341 | 342 | - [Awesome-React](https://github.com/enaqx/awesome-react) 343 | + "A collection of awesome React tools, resources, videos and shiny things." - the readme 344 | - [Awesome-AngularJS](https://github.com/gianarb/awesome-angularjs) 345 | + "A list of awesome AngularJs services, directives, utilities and resources." - the readme 346 | - [Awesome-NodeJS](https://github.com/sindresorhus/awesome-nodejs) 347 | + "A curated list of delightful Node.js packages and resources." - the readme 348 | - [Frontend Development](https://github.com/dypsilon/frontend-dev-bookmarks) 349 | + An amazing huge list of awesome Frontent Development resources 350 | + "A huge list of frontend development resources I collected over time. Sorted from general knowledge at the top to concrete problems at the bottom." - [dypsilon](https://github.com/dypsilon) 351 | - [Awesome-Javascript](https://github.com/sorrycc/awesome-javascript) 352 | + "A collection of awesome browser-side JavaScript libraries, resources and shiny things." - the readme 353 | - [Awesome-Ember](https://github.com/nmec/awesome-ember) 354 | + "A curated list of awesome Ember.js things." - the readme 355 | - [react-primer-draft](https://github.com/mikechau/react-primer-draft) 356 | + A great repo for getting started with building Single Page applications with ReactJS. 357 | + Does a great job covering all the aspects of React including Component life-cycle hooks, State, Properties, Mixins and more. 358 | - [Angular2-Education](https://github.com/timjacobi/angular2-education) 359 | + "A curated list of helpful material to get started with education on Angular 2" - the readme 360 | + This is an awesome collection of resourses for leanring [Angular 2](#ajs) 361 | - [Awesome-React-Native](https://github.com/jondot/awesome-react-native) 362 | + "A curated list of awesome articles, tutorials and resources dealing with React Native." - the readme 363 | - [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 364 | + This repos is a fantastic resource to keep bookmarked. 365 | + It is a list of common questions that someone can ask when interviewing for a front end developer position 366 | + This is useful for not only the people asking the questions, but also for those learning javascript 367 | + The quesetions focus on some common areas of knowlege for Javascript, HTML, and CSS that a front-end developer should have experience with. 368 | + This is a good list to go throught to see where you stand on these topics and to get an idea of where you have room for improvement. 369 | + For example, if you see a question that you don't know how to answer, you now have a topic you can look into to brush up on your skills. 370 | - [ES6 Features](https://github.com/lukehoban/es6features#readme) 371 | + a repo covering the features of the [ES6 ( now ES2015 )](#es6) standard 372 | + It contains examples of all of the new functionaity that are well commented for understanding. 373 | + This is a great place to start looking at ES6 and thinking about using [Babel](#babel) so that you can start writing ES6 today! 374 | - [JS Stack From Scratch](https://github.com/verekia/js-stack-from-scratch) 375 | + A step by step guide to building a modern Javascript Stack from Scratch 376 | + This repo walks users through creating a modern web application using the latest JavaScript trends. 377 | - [Awesome-Elm](https://github.com/isRuslan/awesome-elm) 378 | + A great curated list of Elm resources. 379 | - [public-apis](https://github.com/toddmotto/public-apis) 380 | + This is a currated list of free to use JSON APIs! 381 | + This list is an awesome place to look for ideas on what kind of app you could build. 382 | + The list is organized into categories such as, Games & Comics, Calendar, Music, News, and much more! 383 | 384 | 385 | ## Style and Best Practice Guides 386 | Style guides are a useful way to get everyone on the same page when it comes to code style. Style and best practice guides help make code more standard, readable, and shareable. All of which make code collaboration and onboarding easier. There are plenty of benefits to using a styleguide amongst a team or even for your own benefit. 387 | 388 | - [Javascript Style Guide](https://github.com/airbnb/javascript) 389 | + This repo is a Javascript style guide from the folks at Airbnb 390 | + This guide will help you take advantages of the benefits listed above. 391 | - [Angular-styleguide](https://github.com/johnpapa/angular-styleguide) 392 | + This is an awesome styleguide for Angular 393 | + John's styleguide is widely adopted and will get you writing your Angular code in a way that follows best-practice and makes it easier to test, build, and understand. 394 | + The benefit of this style guide is that, like any styleguide, more adoption means more people writing code in a way that others are already familiar with. 395 | + Notable mention: [Todd Motto's Angular-styleguide](https://github.com/toddmotto/angularjs-styleguide) 396 | * This styleguide is very similar to John's, but differs in a few places. 397 | * Follow whichever one works best for you. 398 | * Since they are similar enough, you will still get the benefits discussed above. 399 | - [Git-Style-Guide](https://github.com/agis-/git-style-guide) 400 | + This guide covers popular practices for working with git 401 | + Getting into open source can be intimidating (I'm still working on it myself). Style guides like this help make contributing to open source via github less intimidating by guiding you on best practices. 402 | + This guide covers things like branch naming, commits, merging and more 403 | 404 | ## Things to check out (No particular order) 405 | - [ReactJS](http://facebook.github.io/react/) 406 | + Awesome Javascript library from the facebook team 407 | + Has some great concepts and is a great alternative for any existing view layer in your MVC applicatoin 408 | - [Angular](https://angularjs.org/) and [Angular 2](https://angular.io/) 409 | + Fantastic Javascript framework, and currently the one I use the most 410 | + Extremely popular and a must-know right now 411 | - [EmberJS](http://emberjs.com/) 412 | + "A framework for creating ambitious web applications" - emberjs homepage 413 | - [NodeJS](http://nodejs.org/) and now [io.js](https://iojs.org/) as well! 414 | + I'm sure almost everyone knows about Node at this point, but iojs is the latest fork of node, and created in the interest of ensureing nodejs's future moving forward. 415 | + I don't think I can explain it any better than the website lead in 416 | + A must know for Front-end developers 417 | + It's javascript that can run on the server! 418 | + You can use this to run a javscript task runner like Grunt or Gulp (see below) to make you development way more productive 419 | + See [MEAN Stack](#mean) 420 | - [NPM](https://www.npmjs.com/) (Node Package Manager) 421 | + NPM comes with Nodejs 422 | + NPM is amazing. 423 | + It is used to manage project dependecies using a little file called package.json 424 | + NPM is quickly becoming a core element in front-end web development and in my opinion a driving force for javascripts success 425 | + With tools like [Browserify](http://browserify.org/) and [SystemJS](https://github.com/systemjs/systemjs) you can now use NPM to manage your browser and nodejs dependencies 426 | - Javascript Task Runners 427 | + You can use task runners to do things like 428 | * start a server 429 | * watch for changes in html, css, and js and refresh your browser when you save 430 | * Pre-process your Sass or Less and generate css 431 | * Create sprite sheets from images 432 | * So much more... 433 | - There are many options, and I've listed some below try them all and choose the one that works best for you/your team 434 | + [Grunt](http://gruntjs.com/) 435 | + An awesome javascript task runner that will make you super productive 436 | * Grunt take a configuration approach in which you configure your tasks using a gruntfile 437 | + [Gulp](http://gulpjs.com/) 438 | * An alternative to Grunt that favors code over configuration files 439 | * With Gulp you write code that pipes your output into the next process and is easy to grok for those that prefer straight code over a config files 440 | + See also [Brocolli](https://github.com/broccolijs/broccoli) and [Brunch](http://brunch.io/) 441 | - [Yeoman](http://yeoman.io/) 442 | + A scaffolding tool that can generate a project scaffold for you 443 | + Yeoman is awesome for hitting the ground running on any project! 444 | + Generate out the boilerplate code for your next project with some of the great open source generators out there 445 | + Here are some of my favorites 446 | * [Angular Fullstack](https://github.com/DaftMonk/generator-angular-fullstack) 447 | * [Angular](https://github.com/yeoman/generator-angular) 448 | * [React-Webpack](https://github.com/newtriks/generator-react-webpack) 449 | - [Bower](http://bower.io/) 450 | + "A package manager for the web" - bower.io 451 | + Bower is a package manager for all of your client-side (browser) dependencies 452 | + Use bower to manage your angular, jquery, or bootstrap versions for example 453 | - [Ionic](http://ionicframework.com/) 454 | + A front end SDK written with Angular and UI toolkit for creating awesome hybrid mobile apps 455 | + Uses cordova to wrap app in a deployable native application 456 | + Super Super Awesome (See next entry). 457 | - [ng-Cordova](http://ngcordova.com/) 458 | + Angular directives and wrappers around the Cordova API 459 | - [MEAN Stack](http://en.wikipedia.org/wiki/MEAN) 460 | + MEAN Stack is a full-stack solution that stands for: 461 | * [MongoDB](link) 462 | * [ExpressJS](link) 463 | * [Angular](#ajs) 464 | * [NodeJS](#node) 465 | + With MEAN you can use javascript across your entire stack 466 | + MongoDB uses JSON for document storage, Node is javascript on the server, express is a library for setting up a REST endpoint with node, and Angular is the javascript framework for your client. 467 | - [Firebase](https://www.firebase.com/) 468 | + Firebase is a backend as a service 469 | + Firebase let's you store and sync data in real-time 470 | - [React Native](http://facebook.github.io/react-native/) 471 | + Build native applcations using React and javascript 472 | + This is truely an awesome concept. 473 | + This does not create a wrapper around a UIWebview, but instead uses React Components to render native applivation views. 474 | + It supports both iOS and Android! 475 | + Check out my [post](#react-native-post) below on it. 476 | - [Aurelia](http://aurelia.io/) 477 | + Aurelia is a new framework from [Rob Eisenberg](http://eisenbergeffect.bluespire.com/) 478 | + Aurelia uses the latest javascript concepts such as ES6 (or now ES2015), web components and object.observe. 479 | + Also has adaptive binding 480 | + Definitely worth checking out. 481 | - [ECMAScript6 A.K.A ES6 (Now ES2015)](https://github.com/lukehoban/es6features) 482 | + ES6 is the latest standard for Javascript 483 | + The link above documents the features that make up ES6 484 | + ES6 is expected to be ratified in June 2015 - lukehoban/es6features 485 | + You can start writing your applications in ES6 today by using a transpiler. The most popular right now are: 486 | * Babel (see bellow) 487 | * [Google's Traceur](https://github.com/google/traceur-compiler) 488 | - [Babel](https://babeljs.io/) 489 | + Babel is a javascript compiler. 490 | + It allows you to use next generation Javascript standards such as ES6 (ES2015) and later javascript standards today 491 | + It does this by _transpiling_ your ES6+ code into ES5 javascript so that it can work in browsers today. 492 | - [Materialize](http://materializecss.com/) 493 | + Materialize is an awesome styling library for material design 494 | + You can think of it like Bootstrap for material design. 495 | + I've been using it recently for prototyping as well as a React application demo and I'm very happy with it. 496 | + Try it out on your next hack to style it up! 497 | - [JSON Server](https://github.com/typicode/json-server) 498 | + "Get a full fake REST API with zero coding in less than 30 seconds (seriously)" - the readme.md 499 | + This is an awesome module for setting up a mock backend using JSON. 500 | + Focus working on your frontend and iterate on your backend models easily. 501 | + Check out [egghead.io](https://egghead.io/)'s tutorial, [Creating Demo APIs with json-server](https://egghead.io/lessons/nodejs-creating-demo-apis-with-json-server) 502 | - [Reapp](http://reapp.io/) 503 | + Reapp is to ReactJS what ionic is to angular 504 | + Reapp let's you build awesome mobile apps with ReactJS 505 | + It contains a set of React Components known as React UI Kit 506 | + It uses webpack and babel out of the box 507 | - [ImmutableJS](https://facebook.github.io/immutable-js/) 508 | + Immutability in javascript is a popular conversation right now in the community. 509 | + This is Facebook's library for creating immutable collections. 510 | + The site does a good job explaining the benefits of Immutable data. 511 | - [JSPM](http://jspm.io/) 512 | + JSPM is a browser package manager that handles loading all types of modules (AMD, CommonJS, and ES6) in the same was as the [ES6 module loader](https://github.com/ModuleLoader/es6-module-loader). 513 | + This is a great option for developers looking to use ES6 modules today. 514 | - [RxJS](https://github.com/Reactive-Extensions/RxJS/tree/master/doc) 515 | + RxJS is a library for that helps writing asynchronus and event based programs. 516 | + RxJS makes it easy to write *reactive* programs in javascript 517 | + Check out [egghead.io's RxJS section](https://egghead.io/technologies/rx) to learn the basics. 518 | - [Webpack](http://webpack.github.io/docs/what-is-webpack.html) 519 | + Webpack is a module bundler similar to Browserify 520 | + Webpack is well suited for large single page apps that need to break up their bundles into diffrent modules 521 | + Webpack 2 is on the horizon. The [new website](https://webpack.js.org/) is up and contains new [documentation](https://webpack.js.org/concepts/). 522 | - [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) 523 | + Flow is a static type checker for javascript (Much like [typescript](http://www.typescriptlang.org/)) 524 | + It is often used in conjunction with React becuase it supports JSX 525 | + Check out the [Javascript Jabber podcast episode on flow](http://devchat.tv/js-jabber/163-jsj-flow-with-jeff-morrison-and-avik-chaudhuri) 526 | - [AmpersandJS](http://ampersandjs.com/) 527 | + A modular MVC framework similar to BackboneJS 528 | + It's modularity allows you to pull in only the components that you need 529 | + Try using the [ampersand-collection](https://github.com/ampersandjs/ampersand-collection) as the store for your [ReactJS](#things-to-check-out-no-particular-order) app. 530 | - [React-Router](http://rackt.github.io/react-router/) 531 | + An awesome router built for ReactJS. 532 | + Extremely useful when building apps with React. 533 | + Similar to other routers and inspired by the amazing EmberJS router. 534 | - [Redux](http://rackt.github.io/redux/) 535 | + A state container for javascript apps. 536 | + Redux works really well with React apps becuase it builds of the ideas of flux. 537 | + It's state maintenence allows for live code editing and even a time traveling debugger making the developer experience awesome. 538 | + Check out [this video](https://www.youtube.com/watch?v=xsSnOQynTHs) from React Europe 2015, where the creator [Dan Abramov](#danabramov) demonstrates his live reloading and time traveling debugging. 539 | + [Egghead.io](Egghead.io) has an awesome and free [series on Redux](https://egghead.io/series/getting-started-with-redux) by [Dan Abramov](#danabramov). Definitely check it out. He does a great job explaining Redux with some testing and ES6 along the way. 540 | - [DevDocs.io](devdocs.io) 541 | + Devdocs is a fantastic open source web app for offline documentation. 542 | + Similar to the OS X app Dash, but web based. 543 | + They use local storage to allow users to save their favorite front-end library/framework documentation for organized, searchable, and offline viewing. 544 | + They even recently added the React Native docs! 545 | - [Elm](http://elm-lang.org/) 546 | + Elm is a functional programming language that compiles to javascript. 547 | + Its architecture makes it easy to build great web apps. 548 | + Elm was the inspiration behind the redux architecture. 549 | + Definitely check out Elm if you are interested in functional programming and super fast rendering inspired by reacts virtual dom. 550 | - [Virtual Dom](https://github.com/Matt-Esch/virtual-dom) 551 | + "A JavaScript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering". - Docs. 552 | + "virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app." - Docs 553 | + Virtual Dom was inspired by the notion of Virtual Dom from ReactJS and basically seperates out that aspect into its own library. 554 | + This concept has gained a ton of popularity since it was implemented and widely introduced to the javascript community by ReactJS. 555 | + Check this library out and see if it could work in your existing app, as a replacement for your view layer. 556 | - [Electron](http://electron.atom.io/) 557 | + "Build cross platform desktop apps with web technologies" - website 558 | + Electron allows you to build desktop applications using Javascript, HTML and CSS 559 | + Electron was used to build Github's [Atom Editor](https://atom.io/), as well as the popular chat client, Slack, a pretty impressive app. 560 | + Electron allows you to build awesome native desktop applications, and the ones I've seen made with it so far are really great. 561 | + Scotch.io has a tutorial on [building an app with Angular and Electron](https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron) 562 | - [CycleJS](http://cycle.js.org/) 563 | + "A functional and reactive JavaScript framework for cleaner code" - website 564 | + CycleJS is a framework that uses Observables from [RxJS](#rxjs) and combines them with a reactive programming library in order to simplify your application architecture. 565 | + [Egghead.io](Egghead.io) currently has a [free series on CycleJS.](https://egghead.io/series/cycle-js-fundamentals) 566 | - [CSS-Modules](https://github.com/css-modules/css-modules) 567 | + CSS-Modules lets developers easily scope and compose styles. 568 | + "A CSS Module is a CSS file in which all class names and animation names are scoped locally by default." - readme 569 | + Glen Maddern, one of the authors, has an awesome [blog post on CSS Modules](http://glenmaddern.com/articles/css-modules) 570 | - [MobX](https://mobxjs.github.io/mobx/) 571 | + "Simple, scalable, state management" 572 | + MobX is a library for managing state within your applications. 573 | + It is similar to [redux](#redux) but has some key differences including the fact that is is built on Observables and uses a Functional Reactive Programming (FRP) pattern. 574 | + Here is a blog post from Formidable labs on why they chose to use Mobx over Redux https://formidable.com/blog/2016/06/02/why-we-chose-mobx-over-redux-for-spectacle-editor/ 575 | - [ExponentJS](https://getexponent.com/) 576 | + Exponent is a platform for building native iOS and Android apps using [React Native](#react-native). 577 | + It allows you to write a React Native app without ever having to open XCode or Android studio. 578 | + It also has a nice application generator to get you started. 579 | - [Ignite](https://infinite.red/ignite) 580 | + Ignite is a React Native Application generator. 581 | + Ignite helps you get started building [React Native](#react-native) applications by scaffolding out an application. 582 | + It comes with a lot out of the box and is a great starting point for anyone looking to build a React Native application. 583 | - [Yarn](https://code.facebook.com/posts/1840075619545360) 584 | + A package manager for JavaScript from Facebook. 585 | + Yarn manages your npm and bower packages in an intelligent way. 586 | + It supports local caching of packages 587 | - [Shoutem UI Tookit](https://shoutem.github.io/ui/) 588 | + An open-source UI toolkit for building React-Native(#react-native) apps 589 | + This is a very polished toolkit with with awesome UI elements and themes. 590 | - [JAMStack](https://jamstack.org/) 591 | + JAMStack stands for JavaScript, APIs and Markup. 592 | + This is a term being used a lot lately to refer to fast secure apps bundled and served over a CDN. 593 | + There is also a podcast below dedicated to this stack. 594 | - [React Native Express](http://www.reactnativeexpress.com/) 595 | + An amazing React-Native tutorial that covers everything from Modern JS with ES6 to creating an Uber clone. 596 | + The guide has live examples as well as exercises. 597 | + I highly recommend this for anyone looking to work with React-Native 598 | - [Svelte](https://svelte.technology/) 599 | + Svelte is not a JavaScript framework in the way we think of them today. Instead of interpreting application code at run time it interprets it at build time. 600 | + This basically means that you aren't hindered by the performance cost of framework code and in theory your application can load faster. 601 | + You can read the introductory blog post [here](https://svelte.technology/blog/frameworks-without-the-framework/). 602 | + You can also check out this [blog post](http://react-etc.net/entry/react-vs-svelte-the-javascript-build-time-framework) comparing Svelt to React. 603 | - [Preact](https://github.com/developit/preact) 604 | + "Preact is a fast, 3kB alternative to React, with the same ES2015 API." - docs 605 | + As stated Preact is a ReactJS alternative. 606 | + It has a smaller footprint since it only supports modern ES6. 607 | - [data-fns](https://github.com/date-fns/date-fns) 608 | + data-fns is toolset for manipulating JavaScript Dates. 609 | + It is built to be modular so you include only what you need. 610 | + "data-fns is like lodash for dates. It has (140+ functions for all occasions)[https://date-fns.org/docs/]." - docs 611 | - [Jest](http://facebook.github.io/jest/) 612 | + Jest is a testing framework created by facebook 613 | + Jest works especially well for testing [ReactJS](#react) code. 614 | + Jest has been around for a bit but after some recent updates has really gained momentum and community support. 615 | + Definitely check it out for testing your React components. 616 | - [React Bits](https://github.com/vasanthk/react-bits) 617 | + An awesome collection of React patterns, tips, tricks, and techniques. 618 | + This repo collects some of the best React Libraries around! 619 | + It has awesome resources for things like "Gotchas", Style Guides, and Anti Patterns. 620 | - [Create React Native App](https://github.com/react-community/create-react-native-app) 621 | + "Create React Native apps with no build configuration" - repo README 622 | + This project is an awesome way to get started building applications with React Native. It includes the [Expo Library](expo.io) (formerly Exponent), which is a fantastic library for Cross platform React Native components. 623 | + Much like Create React App, the build process is abstracted away allowing developers to concentrate on building applications with Javascript rather than spending time setting up a build process and dealing with cross platform compatibility between iOS and Android. 624 | - [Apollo Client](http://dev.apollodata.com/) 625 | + A GraphQL client library that works with all the popular frontend frameworks as well as Native applications. 626 | + Apollo makes it easy to fetch only the data you need when interacting with a GraphQL endpoint. 627 | + Works out of the box with Redux, React, and React router. 628 | - [DraftJS](https://draftjs.org/) 629 | + An awesome rich text editor by Facebook framework for React applications. 630 | + Draft JS is great for doing rich text editing. 631 | + It has a great plugin ecosystem. 632 | + Everything is customizable. 633 | + I found DraftJS super easy to use. Definitely check it out if you are looking for a rich text editor! 634 | - [Prettier](https://github.com/prettier/prettier) 635 | + Prettier is an opinionated formatter for Javascript that has gained popularity recently. 636 | + It supports all the latest language features such as ES2017, JSX, and Flow. 637 | + This differs from jshint and eslint in that it doesn't require a large configuration. It instead takes 638 | Javascript as input, transforms it and outputs the formatted JS. 639 | - [React VR](https://facebook.github.io/react-vr/) 640 | + "Build VR websites and interactive 360 experiences with React" - website 641 | + React VR lets you create awesome virtual experiences using the React framework 642 | + Similar to the way React Native works, React VR let's you code javascript that renders VR UIs instead of plain DOM. 643 | 644 | ## Meetups 645 | A friend of mine has been going to some meetups lately and invited me along to one. Meetups are awesome! They are a great way to network, meet other people who share your interests in development, and hear some awesome talks. 646 | 647 | - [Javascript Meetup Map](http://javascript.meetup.com/) 648 | + This is a map from [Meetup.com](http://www.meetup.com/) of all the javascript related meetups available. 649 | + Just enter your zipcode and find a meetup in your area! 650 | 651 | ## What I'm learning this week 652 | I've decided to add a section covering what topics I'm looking into on a weekly basis. I'm putting it here for now until I move some of this over to a blog. 653 | 654 | #### Week of: 655 | 656 | - __January 17__ 657 | 658 | It's been quite a while since I've updated this so I apologize. I've been keeping busy though. It's 2016 now and 2015 was a great year for JavaScript. We saw React gain popularity while Angular's popularity waned a bit in the wake of Angular 2. While it looks like Angular 2 is finally upon us, having recently gone beta, we have yet to see how the community will take to it. I'll definitely write more on that as things pan out. 659 | 660 | Over that last few months I've had the opportunity to work on some brilliant apps at work. I was lucky enough to work on our mobile app which is still being written using React Native with Redux. I more recently have been working on another project at work, a responsive web app using React with Redux. Between those two apps and some hack week projects at work I've definitely gotten to dive into Redux a bit more and can say that I'm definitely enjoying it. It's not without its quirks, but it definitely helps me understand my application in a way that other architectures don't. 661 | 662 | In my free time I've been doing something different. I've really started to dig into the [Elm programming language](#elm), and I have to say, I'm really enjoying it! It's been extremely fun (and challenging) learning a new language. Being fully functional, and statically typed, Elm is very different than what I'm used to with JavaScript. That said, those differences seem to be what make it so great. I'm even enjoying writing tests. In fact, Elm makes writing unit tests so easy, that I've actively been practicing TDD while working with it. I’m planning on putting up a tutorial on building a small app with Elm soon. In the meantime if anyone is interested in Elm, the github repo, [awesome-elm](https://github.com/isRuslan/awesome-elm), has some wonderful resources for getting started. 663 | 664 | - __October 4__ 665 | 666 | I recently listened to the [Javascript Jabber episode on the Elm language](https://devchat.tv/js-jabber/175-jsj-elm-with-evan-czaplicki-and-richard-feldman) with Evan Czaplicki (The creator) and Richard Feldman. It was an awesome and inciteful episode. Shortly after I was lucky enough that my company was able to bring in Richard Feldman to give a talk on his experience with using [Elm](#elm) for his day to day web app development. I decided to give it a shot and I have really liked it so far. 667 | 668 | At first it took a while to get used to the syntax (and I'm still far from fully understanding or writing it well), but after going through the docs a ton, things are finally starting to come together. The documentation has been fantastic. 669 | 670 | I'm trying it out by building a small application (one that I already started in React). So far it's been going pretty well. The static typing has allowed the compiler to catch any issues, and it makes it really easy to write nice clean code. Once I'm finished with the demo I will be posting it on my github in the form of a tutorial. 671 | 672 | Definitely check out Elm! It has a fantastic architecture and its functional style makes writing code clean and fun! It's also the inspiration for the popular [Redux architecture](#redux). 673 | 674 | - __September 20__ 675 | 676 | The new job now has me commuting by train instead of by car. This presents me with some great time to work on some fun projects. I picked up a Macbook air 11" that has worked out great as a travel machine. One of the limitations though is that I am not connected to the internet while I'm on the trian so everything I do has to work offline. So I have a setup that has been working for me which I will describe. I plan on extending this into an actual blog post at some point soon. 677 | 678 | For some background, the app I'm currently working on uses ReactJS as a view layer and AmpersandJS models as the model layer. I'm also writing in ES6 via the Babel transpiler, using webpack, and the webpack dev server. For a UI library I'm using [Materialize](#materialize). 679 | 680 | Okay so the first issue was documentation. I needed a way to view docs offline. For that I use both Dash (an OS X app for offline docs) and [DevDocs.io](DevDocs.io) that I mentioned above. 681 | 682 | Next, I needed a way to make requests for data so that I could model out my stores. For this I used [json-server](#json-server) which is an awsome and easy way to serve up json data. 683 | 684 | Next, it's important that you aren't trying to use a CDN for any of your apps resources, since the request for those files will fail when offline. Instead try to contain everything within the app either via bower or npm. 685 | 686 | All npm and Bower dependencies should be installed prior to trying to work offline. One thing I did was create a seperate project where I install all of the libraries/frameworks I think I will use, and add them to a massive package.json/bower.json. Then, when I need them for one of my apps, I pull them out of that project rather than trying to fetch them from a server. 687 | 688 | - __August 30__ 689 | 690 | It's been a while since my last post and I'm happy to say that the break was due to me switching jobs! I've started an exciting and awesome new role that has me working and experimenting with a lot of exciting front-end technology. This past week in particular I've been working on writing my own Yeoman generators. It's been super fun and simple. 691 | 692 | I decided to write a generator to make things easier while I'm working on the React version of my Brew Book application. I found myself spending a lot of time typing out the React Class Components. This led me to create a generator to generate out a React Component Class, it's folder, and corresponding sass file. 693 | 694 | After using Yeoman for so long it was awesome to finally write my own generator. It's super simple since it's just node with ejs for the templating. 695 | 696 | I'm hoping publish one of my generators soon. 697 | 698 | - __July 5__ 699 | 700 | This week I've been looking more into [Webpack](#webpack) and [Babel](#babel). I plan on using Webpack for the [ReactJS](#react) version of my BrewBook app. I also think it's time I started writing ES6 so I'll be using Babel as a transpiler. I started reading some great articles on using Webpack with ReactJS and Babel. [Setting Up a Single Page React Web App with React-router and Webpack](http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/) is a great article on getting started with Webpack and the babel-loader. 701 | 702 | I also started [ES6 and Beyond](https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond) from the awesome [You Don't Know JS series](#ydkjs). It is an amazing resource that really covers the new ES6+ features in depth. I can't wait to start using these features. 703 | 704 | - __June 21__ 705 | 706 | This week I published my first two npm packages! I published the modules I was working on last week ([ampfire-collection](https://www.npmjs.com/package/ampfire-collection) and [ampfire-model](https://www.npmjs.com/package/ampfire-model)). It was a pretty awesome experience publishing something to npm for the first time. The [npm site](https://www.npmjs.com/) has a great [guide on how to publish a package](https://docs.npmjs.com/getting-started/publishing-npm-packages), so I just followed that. It was a super easy processes. Essentially, you just create a [CommonJS](http://www.commonjs.org/) module and export the API that you want. Then your package.json dictates all of the info for your package, including the name that it is exposed as to consumers of the package. You can even add some *keywords* to your package.json to make it more discoverable on npm. I plan on updated the packages with some tests and even a demo soon. I definitely recommend checking out the guide above and try publishing any libraries you may have created that you think others could benefit from. 707 | 708 | - __June 14__ 709 | 710 | This week I've been taking a look at AmpersandJS. It's a nice modular alternative to BackboneJS and I think it will work nicely as the 'store' component to a Flux application. I plan on using Ampersand collections and models as the stores for ReactJS version of BrewBook. Since AmpersandJS Models and Collections emit events just like BackboneJS Models and Collections, they are easy to integrate with a React view layer in a flux application. 711 | 712 | I also started modifying Firebase's [BackboneFire](https://github.com/firebase/backbonefire) library so that will work with AmpersandJS Models and Collections as apposed to Backbone Models and Collections. I'm calling it **[ampfire](https://github.com/tommcgurl/ampfire)**. Right now I have it broken into two parts, ampfire-model and ampfire-collection. I wanted to follow Ampersands modularity. Once I'm done it will be easy to integrate your Ampersand stores with Firebase. 713 | 714 | - __May 17__ 715 | 716 | I've fallen a bit behind in updating this post section :/ but I'm going to try and keep it up to date. I've been working recently on a new repo experiment. I have decided to start posting something I've been working on. It's basically my version of the popular TodoMVC. My plan is to make a craft beer catalogging app in a few of the popular frameworks/libraries. I've began posting my first version. It uses the [Ionic Framework](#ionic) which uses Angular. The repo is called [brewbook-ionic](https://github.com/tommcgurl/brewbook-ionic). Next I plan on implementing it in React with Flux. 717 | 718 | - __April 19__ 719 | 720 | This week I thanks to a friend, I had the opportunity to attend the [April Code Genius](https://genius.engineering/photos/). It was an awesome meetup hosted by the folks at [Genius](http://genius.com/). Jeremey Ashkenas gave an awesome terminator-themed talk on transpilers and how coffeescript compiles to javascript. [James Somers](https://twitter.com/jsomers) from genius gave an awesome and hilarious talk on genius' image annotation feature in their [Chrome extension](https://chrome.google.com/webstore/detail/genius-beta/ccaokncpmmjiakalbcfdbfmpcaiddjdn?hl=en-US&utm_source=chrome-ntp-launcher). [Dave DeSandro](https://twitter.com/desandro) gave a really great talk on his carousel library [Flickity](http://flickity.metafizzy.co/) and how physics isn't as intimidating as some think. 721 | 722 | It was a great experience and I'm already signed up to go to the [May Code Genius](http://code.genius.com/) with [Jacob Thorton](https://twitter.com/fat) the creator of Bootstrap, Bower, and more. It will definitely be a good time. 723 | 724 | - __April 12__ 725 | 726 | This week I continued to work a bit on the Users-Demo-React-Native. I've also been working with [Ionic](#ionic) a bit again. If you haven't checked out Ionic yet, definitely take some time to give it a look. There is a great [video from ng-conf](https://www.youtube.com/watch?v=wvr11fvCeu4) from the guys at Ionic that shows off some of the awesome stuff you can do with it. I plan on putting a repo up soon with a demo application. 727 | 728 | [The Web Platform Podcast](http://thewebplatform.libsyn.com/) had a great [episode the past week](http://thewebplatform.libsyn.com/39-famous-mobile-performance-mixed-mode) with Steve Newcomb of Famo.us. Steve covered a ton of stuff, including their plans for mixed mode, the future of the company, and much more. Definitely check this episode out. 729 | 730 | Angular Air had a great [episode on testing with Angular](https://plus.google.com/events/cb42tejb88eliamj65o2ogh12qo) with guests, Julie Ralph of Protractor, Andres Dominquez, and Zan Thrash. They discuss, compare, and contrast the different forms of javascript testing. 731 | 732 | - __April 5__ 733 | 734 | This week I do not have much to update since I was on vacation. During that time however, I managed to start my React-Native User's demo discussed in last week's post. The repo is [Users-Demo-React-Native](https://github.com/tommcgurl/Users-Demo-React-Native). You can read the details of it in last weeks post. 735 | 736 | So far I've managed to complete a good portion of the application. Most of the basic functionality is complete and I hope to finalize the functionality and spruce it up a bit in my next commits. I'm thinking about extending it a bit further than originally planned in order to display the use of Flux and more CRUD operations. So far I'm very pleased with React Native, and it has been really fun to use. 737 | 738 | During my vacation flight to Austin, TX, I read some awesome articles on ES6 and I started looking into the transpiler [Babel](#babel). I plan on using this in future development so that I can begin working with ES2015. It already has support for JSX and React and has plugins for all the major build systems. 739 | 740 | Also, the Codewinds podcast came back finally! I listend to the two most recent episodes. [Episode 14](http://codewinds.com/podcast/014.html) simply covers the reason for the long hiatus. In [Episode 15](http://codewinds.com/podcast/015.html) talks to Michael Jackson and Ryan Florence about ReactJS! 741 | 742 | - __March 29__ 743 | 744 | This past week Facebook released [React Native](http://facebook.github.io/react-native/). I decided to try it out and was very impressed. For those that have not heard, React native is a way to build native applications using React and javascript. This does not involve the UIWebview. It instead uses the fact that React is decoupled from the DOM, to allow components to render to native views such as iOS(only platform supported at the moment). 745 | 746 | I followed the 'getting started' guide and the walkthrough for creating a ListView movie application. I was extremely impressed at how easy it was to use. There were a few things that are unique to React Native as expected, but they are easy to pick up once you have some experience with ReactJS. I decided to start a demo repo where I expand upon the movies application. It's called [Users-Demo-React-Native](https://github.com/tommcgurl/Users-Demo-React-Native). I am using the [Random User API](http://randomuser.me) from [@randomapi](https://twitter.com/randomapi) to show a master-detail view of users. I will be posting each commit as a 'step' to making the application. 747 | 748 | - __March 22__ 749 | 750 | This week I'm taking a look at [Angular 2.0](https://angular.io/). I have yet to catch up on all the ng-conf videos but plan on doing that by the end of the week. Scotch.io posted an article on _[The Best News From ng-Conf 2015](https://scotch.io/bar-talk/the-best-news-from-angulars-ng-conf-2015)_ a few weeks ago that does a great job summarizing the major points from the conference. I got a chance to listen to [Adventures in Angular Episode 34](http://devchat.tv/adventures-in-angular/034-aia-live-from-ng-conf-2015), where the guys discuss the conference and it definitely got me excited. 751 | 752 | I also listened to the [Angular Air episode 6](https://plus.google.com/events/cmhq7mqarkoful8u7iusbjsdjtk) with the ionic team. They talk about their excitement for Angular 2 and how they are working closely with the angular team while working on Ionic 2. As someone who loves to use Ionic, I'm super excited to see what it's next version has in store. Check out this [blog post](http://ionicframework.com/blog/angular-2-ionic/) from the [Ionic blog](http://ionicframework.com/blog/) that goes into more detail on Angular 2 and Ionic 2. 753 | 754 | Angular 2 definitely looks like it packs some changes and I have to take a deeper look before commenting on them. On the surface it looks like it has some serious preformance improvements which I'm always down for. I do like the idea that Angular 2.0 will embrace ES6 and web components. I think this is great for the future of web and for pushing standards. I've started using customer elements (one part of the web component spec) at my job and it helped me solve a unique problem with some ease and elegance. I'm definitely excited to check out and start using Angular 2. 755 | 756 | #### Road Map 757 | Here are a few things I'm planning on adding to this repo. 758 | 759 | - A 'Where to start' guide 760 | + I have had many questions directed my way in the form of "All of these frameworks and technologies are great, but where do I start?" 761 | + I would like this section to help guide developers that may be new to some of this stuff, down the right path to "connecting the dots" 762 | + I will explain how some of the ["Things to check out"](#things-to-check-out-no-particular-order) can be used to create an actual application. 763 | - An tutorial section specifically for beginners 764 | + Sometimes its tough to find the right tutorials to jump in to a new library or framework. 765 | + I plan on adding links to tutorials guided towards developers trying out a libarary or framework for the first time. 766 | --------------------------------------------------------------------------------