basic-concepts.md

Basic Concepts, Terms, and Overviews

Modern Javascript Terms and Tooling Overviews

• State of the Javascript Landscape in 2016
  http://www.infoq.com/articles/state-of-javascript-2016
  A very high-level summary of the important terms and technologies that are used in modern Javascript development.

• The Hitchiker's Guide to Modern JS Tooling
  http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/
  A great overview of many of the most common build tools, package managers, test frameworks, and code quality tools currently in use

• State of the Art Javascript in 2016
  https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b
  An opinionated list of what tools and libraries a modern JS development stack should include, plus links to further resources.

• The Hitchhiker's Guide to the Modern Front End Development Workflow
  http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/
  A useful overview of the many categories and types of tools used in modern web development.

• Simplified Javascript Jargon
  http://jargon.js.org/
  An alphabetical list of common terms in the JS world, with very short definitions in the main list and slightly longer descriptions linked for each term.

• Modern Javascript Development
  https://mgadams.com/modern-javascript-development-part-1-d271f3790c1c
  An overview of how browsers, Javascript, and Javascript frameworks have evolved into today's landscape of tools and technologies

• Making Sense of Front-End Build Tools
  https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b
  An approach to understanding the variety of build tools by categorizing them as "installing" vs "doing"

• The State of Javascript in 2017: Survey Results https://stateofjs.com/
  Results from a survey of over 23000 developers, covering use of Javascript tools, technologies, and concepts.

• The (R)Evolution of Web Development
  http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
  A slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends.

• The State of Javascript
  https://youtu.be/5NIL3Epadj0
  A talk by Jack Franklin, summarizing the state of modern web development.

• Javascript Package Managers 101
  https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a
  An overview of what packages and package managers are, some related terms, and how these tools work.

• 2016 Javascript Rising Stars
  https://risingstars2016.js.org/
  A summary of which JS projects gained the most popularity in 2016, based on new Github stars. Serves as a useful overview of tool categories and popular tools

• A Brief History of Javascript
  https://auth0.com/blog/a-brief-history-of-javascript/
  Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time.

• Glossary of Modern Javascript Concepts: Part 1
  https://auth0.com/blog/glossary-of-modern-javascript-concepts/
  https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/
  An excellent overview and introduction to a number of concepts that are used in modern applications. Part 1 covers topics like "purity", "state", "immutability", "functional programming", and "observables". Part 2 looks at ideas like "1-way data flow vs 2-way binding", "scope", "components", "JIT/AOT compilation", and more.

• The Tools of the JS Trade
  https://dev.to/kayis/the-tools-of-the-js-trade
  A helpful overview of commonly used JS development tools, grouped by type, with short descriptions for each.

• Choosing a frontend framework in 2017
  https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341
  An excellent look at the history of the major client-side web frameworks, how they developed over the last few years, and some suggestions for when each framework might be appropriate.

• The melting pot of JavaScript
  https://increment.com/development/the-melting-pot-of-javascript/
  Dan Abramov discusses the apparent messiness of the JavaScript ecosystem, why there's a proliferation of tools and libraries, the complexity of configuring those tools, and how providing good defaults can lead to a better experience for the community.

• Modern JavaScript Explained for Dinosaurs
  https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70
  Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context. Includes examples of how different tools were used and and what problems they help solve.

• A Brief, Incomplete History of JavaScript
  https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript
  An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era.

• Frontend in 2017: The important parts
  https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f
  An overview of major trends, tools, and concepts in the front-end web dev world in 2017. Very good look at what's popular, what's changing, and how these pieces fit together.

Suggested Learning Approaches

• A Study Plan to Cure Javascript Fatigue
  https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1
  The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.

• React How-To
  https://github.com/petehunt/react-howto
  Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)

• Timeline for Learning React
  https://daveceddia.com/timeline-for-learning-react/
  https://daveceddia.com/how-to-learn-react/
  Another high-level suggested timeline for how to approach learning React and related technologies.

• React Roadmap
  https://github.com/ericdouglas/react-roadmap
  A curated list of free resources to master React Development, in suggested learning order

• React FAQ
  https://github.com/timarney/react-faq
  A collection of links to help answer your questions about React, including how to get started

• Front-End Developer Handbook
  https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/
  A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it.

• Top Javascript Frameworks and Topics to Learn in 2017
  https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711
  Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional.

• How to Learn React: A Five-Step Plan
  https://www.lullabot.com/articles/how-to-learn-react
  A good set of suggested steps to follow and tools to use for learning React and Redux.

• Ten Things a Serious JavaScript Developer Should Learn
  https://benmccormick.org/2017/07/19/ten-things-javascript/
  A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with.

• So you completed the official React tutorial. Now what?
  https://goshakkk.name/next-steps-official-react-tutorial/
  General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React.

• 5 practical tips to finally learn React in 2018
  https://goshakkk.name/tips-finally-learn-react/
  Common-sense suggestions for simplifying the React learning process, including skipping buzzwords and hardcoding data.

• Spellbook of Modern Web Dev
  https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework
  A large list of categorized resources for dozens of web development-related topics.

• Developer Productivity Tips from the React Experts
  https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/
  The KendoReact team curated the top productivity tips of 20+ React experts, ranging from smart ways to get started to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more.

General Suggestions for Learning

• Learn the Javascript Ecosystem one package at a time
  https://www.javascriptstuff.com/npm-sandboxing
  Some tips for how to approach learning the JS ecosystem without being overwhelmed.

• On being overwhelmed with our fast paced industry
  http://wesbos.com/overwhelmed-with-web-development/
  Wes Bos gives advice on how to cut down on noise, avoid "new shiny" syndrome, and still improve your web dev skills

• How to Learn Web Frameworks
  https://medium.com/shopify-ux/how-to-learn-web-frameworks-9d447cb71e68
  Some great advice on how to approach learning web development and frameworks, especially if you're a junior developer.

• How to keep up: "First do it, then do it right, then do it better"
  https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3
  Advice from Addy Osmani on how to cope with learning new JS technologies

• "Ask HN: Overwhelmed with learning front-end, how do I proceed?"
  https://news.ycombinator.com/item?id=12882816
  A discussion thread with numerous suggestions for ways to learn front-end technologies.

• Deciding What to Learn / When the Latest Tech Makes You Feel Dumb
  http://gedd.ski/post/what-not-to-learn/
  http://gedd.ski/post/when-tech-makes-you-feel-dumb/
  A pair of short but excellent posts giving advice on how to deal with tech and information overload.

• Redux vs MobX vs Flux vs... Do you even need that?
  http://goshakkk.name/redux-vs-mobx-vs-flux-etoomanychoices/
  Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time.

• How to avoid Javascript fatigue and sleep well at night
  https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night
  A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve

• How to Manage Javascript Fatigue
  https://auth0.com/blog/how-to-manage-javascript-fatigue/
  A description of what "JS fatigue" means in practice, and advice for managing it, including "picking battles", "make something interesting", and "be aware of common concepts".

• Javascript is a buffet, not the enemy
  https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/
  An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor.

• Are we making the web too complicated?
  http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated
  Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt.

• Keeping Up With the JavaScript World
  https://daveceddia.com/keeping-up-with-javascript/
  Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things.

Learning Project Ideas

• 5 Projects to Help You Learn React
  https://daveceddia.com/react-practice-projects/
  A list of 5 sample project ideas that aren't todo lists, ranging from basic card components to a Github issues page.

• The secret to being a top developer is building things! Here's a list of fun apps to build
  https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c
  A list of 8 good-sized project ideas, including a Trello clone, cryptocurrency tracker, and a native messenger clone

• 10 React Start Project Ideas to Get You Coding
  https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831
  A list of 10 options besides todo lists, including a quiz builder, a music player, and a forum app.

• Every time you build a todo list, a puppy dies
  https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d
  A list of 28 app ideas that aren't todo lists. Suggests using a Ruby on Rails backend, but the ideas are sufficiently generic. Ideas include a calendar, a book reading club, a Twitter client, and more.

• What to do after the React/Redux tutorials
  http://blog.jakoblind.no/react-redux-tutorials/
  Suggests 8 APIs you could use to help build an application after working your way through basic tutorials.

• 7 GUIs
  http://eugenkiss.github.io/7guis/tasks/
  A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more.