/30-days-of-Ember

30 Days Of Ember

Table of Contents

 

🤔 What are you learning?

Topic:
One sentence to describe this new skill.

Ember.js, an open-source JavaScript web framework, for creating ambitious web applications.

Learning Objectives:
List the core concepts or foundational skills needed to master this skill.

  • Architectural Understanding
    • Model
    • View
    • Controller
  • Routing
  • The object model
  • Services
  • Components
  • Templating
  • Controllers
  • Ember Data
  • Addons and Dependencies
  • Testing
  • Configuration
  • Binding
  • Handlebars
    • Functional Helpers
    • Block helpers
  • Nesting

Proficiency Metrics:
List task you'll be able to achieve after completed this 30 day learning journey.

  • Reviewing routes with Ember Inspector
  • Loading templates with routes
  • Creating links with the link-to helper
  • Adding component templates
  • Loading model data
  • Customizing components
  • Building nested routes and route objects
  • Loading data with object and array controllers
  • Creating interfaces with CSS. Where to put my stylesheets?
  • How to create conditionals?
  • How to loop?
  • What is the Convention-over-Configuration Approach?
  • What are glimmer components?
  • What is Ember Observer?
  • What is the Ember CLI? Why do I need it?
  • How to test?

Learning Resources:

Categorizing my learning resources based on my learning style usually helps me a ton.

👀 Visual Resources:

  1. https://embermap.com
  2. https://www.emberscreencasts.com
  3. https://www.youtube.com/watch?v=zXbqv2PeYCM
  4. Ember Octane - Great For Beginners by Ilya Radchenko
  5. Reactivity Basics (Tracked Decorator) - EmberJS Octane by Ilya Radchenko
  6. Ember Octane - Attributes aka "Splattributes" by Ilya Radchenko
  7. EmberJS Octane - Handling Actions by Ilya Radchenko
  8. EmberConf 2020 - Tuesday March 17th - Part 1
  9. A preview of Ember.js Octane by Gavin Joyce

💻 15 Short Projects (Hands-on learner):

  1. https://guides.emberjs.com/release/tutorial/
  2. https://github.com/ember-learn/super-rentals
  3. https://github.com/ember-learn/cli-guides
  4. Ember Octane Fundamentals by Mike North
  5. Ember.js tutorial for beginners by Shawn Chen
  6. Ember.js Tutorial: Build a painting game in 20 mins by Gavin Joyce
  7. Ember Octane Livestream: Build a drum machine by Gavin Joyce
  8. Build An Ember.js App In 2019 For Beginners by Program with Erik
  9. Building a complex web application with Ember.js Octane by Zoltan
  10. Build a chat app using Ember JS by Christian Nwamba
  11. Build and Authenticate an EmberJS 3 Application by Kapehe Jorgenson
  12. Getting Started With Component Testing - EmberJS Octane by Ilya Radchenko
  13. (1/2) Building a menu component with Tailwind CSS and Ember.js by Gavin Joyce
  14. EmberConf 2019 - Building a UI Styleguide in Ember by Frédéric Soumaré

🗣 Auditory Resources:

  1. https://embermap.com/podcast
  2. https://changelog.com/jsparty
  3. https://audio.ember.report/
  4. https://podcasts.apple.com/us/podcast/javascript-jabber/id1237401284

📖 Reading Resources:

  1. https://emberjs.com/
  2. http://www.balinterdi.com/rock-and-roll-with-emberjs
  3. https://www.emberweekly.com/
  4. https://blog.emberjs.com/tag/newsletter/
  5. https://www.apress.com/gp/book/9781484265604

📝 Teaching Opportunities (Verbal and Social Learner):

  1. Writing blog post
  2. Creating a TikTok or IG Reel series about Ember JS
  3. YouTube or Twitch Content
  4. Speaking at Ember Conference
  5. At-work opportunities running Ember workshops

👋🏾 Open Source Projects to Contribute To (Hands-on learner):

  1. https://github.com/ember-learn/ember-api-docs
  2. https://github.com/emberjs/data
  3. https://github.com/ember-learn/guides-source
  4. https://github.com/ember-a11y/ember-a11y-testing
  5. https://github.com/ember-weekend/ember-weekend
  6. https://github.com/ember-template-lint/ember-template-lint
  7. https://github.com/discourse/discourse
  8. https://github.com/TryGhost/Ghost-Admin
  9. https://github.com/TryGhost/Ghost
  10. https://github.com/rust-lang/crates.io
  11. https://github.com/storybookjs/storybook
  12. https://github.com/cowbell/sharedrop

Immerse yourself in your learning:

#️⃣ Hashtags to follow:
Example: #javascript, #womenintech, #peopleintech, #blacksintech, #blackwomenintech, #codinglife, #frontend, #emberjs etc.

  1. #emberJS
  2. #100daysofcode
  3. #womenintech
  4. #peopleintech
  5. #blacksintech
  6. #blackwomenintech
  7. #codinglife
  8. #frontend
  9. #BlackTechTwitter
  10. #LatinXTechTwitter
  11. #POCinTech
  12. #NonBinaryInTech
  13. #LGBTQinTech
  14. #IndigenousTechnologists
  15. #NativeTechTwitter
  16. #NativesinTech
  17. #javascript
  18. #html
  19. #programming
  20. #coding
  21. #css
  22. #developer
  23. #programmer
  24. #webdeveloper
  25. #code
  26. #webdevelopment
  27. #coder
  28. #webdesign
  29. #software
  30. #softwaredeveloper
  31. #codinglife
  32. #computerscience
  33. #technology
  34. #js
  35. #javascriptdeveloper
  36. #softwareengineer
  37. #programmers

👤 Social Media Accounts to follow:
Personally, I love following the creators of the coding language, folks who identify as core contributors and folks who talk about what I want to learn.

  1. https://twitter.com/i/lists/199135857
  2. Melanie Sumner
  3. Leah Silber
  4. Ava Wroten
  5. Mike North
  6. David Tang
  7. Balint Erdi
  8. Scott Newcomer
  9. Jessica Jordan
  10. NullVoxPopuli
  11. Jen Weber
  12. Dianne Eramo
  13. Ryan LaBouve
  14. Katie Gengler
  15. Godfrey Chan
  16. Dave Laird
  17. Chris Manson
  18. Kenneth Larsen
  19. Ilya Radchenko
  20. Chris Thoburn
  21. Tom Dale
  22. Yehuda Katz

👥 Indirect Mentors, Direct Mentors, Friends, and Communities:
Indirect Mentors are those informal mentors who may or may not know you; however, they provide encouragment or aide in some way. Direct mentors are those folks who you have a recurring meeting cadence, those who you have direct access to, and folks who you may spend time pairing programming with.

  1. Ember Community Discord
  2. StackOverflow
  3. Dev Community
  4. Ember Discuss

Learning Plan

 

📋 What’s the plan?
Pick one learning resources that'll cover a span of 30 days:

Balint Erdi's Rock and Roll with Ember Octane

 

🎯 Goal:
Code for a *minimum* of an hour a day
Mon - Fri: Tutorials & Learning

 

Time:
Pick a time where you learn best.
I learn best in the morning so 6am works for me!

Week 1: 83 pages

Chapters or Video Pages or Time
1. Introduction to Ember.js Page 1-15
2. Ember CLI Page 16-24
3. Templates and Data Bindings Page 25-33
4. Routing Page 34-45
5. Nested Routes Page 46-66
6. Components Page 67-83

Week 2: 116 pages

Chapters or Video Pages or Time
7. Controllers Page 83-113
8. Building a catalog Page 114-140
9. Talking to a back-end Page 141-199

Week 3: 134 pages

Chapters or Video Pages or Time
10. Advanced routing Page 200-235
11. Testing Page 236-284
12. Query Params Page 285-334

Week 4: 57 pages

Chapters or Video Pages or Time
13. Loading and Error Substates Page 335-348
14. Helpers Page 349-371
15. Deployment Page 372-392