A presentation at EmberConf 2023 in in Portland, OR, USA by Anne-Greeth van Herwijnen
$ ember new conference-tracker
The Blueprint to a Finished Project
🇳🇱
🇳🇱 🐹
💬 🇳🇱 🐹 🏳🌈
💬 🇳🇱 🐹 🏳🌈 🎨
💬 🇳🇱 🐹 🏳🌈 🎨 🐾
💬 🇳🇱 🐹 🏳🌈 🎨 🐾 💍
PURPOSE Why, How, What Keep It Simple, Software Developer FOCUS TOOLS
FOCUS PURPOSE Minimal Viable Product Small Increments Ugly Is Okay TOOLS
TOOLS Ember.JS PURPOSE FOCUS Linting CSS Git
Why Do I Use Ember for Fun Projects
Single Feature Apps TM by Chris Manson
PURPOSE Being able to play SET with my sister during the pandemic
FOCUS Playing SET
SHAPE FILLING COLOR AMOUNT GREEN RED PURPLE
{{#each this.field as |card|}} <img src={{card.image}} {{on “click” (fn this.selectCard card.image) }} class={{if card.selected “selected” “”}}/> {{/each}}
MVP
MVP
+219 -5
FOCUS Playing Together
ember-concurrency
Web API
FOCUS Accessibility
No Red No Green No Blue No Color
No Red No Green No Blue No Color
ember-picker
ember-picker
PURPOSE FOCUS TOOLS Think About Future You Linting You Are Allowed To Pivot Useful Addons Don’t Overcomplicate!
H2 FUELING STATIONS
PURPOSE Provide Dutch hydrogen car drivers with up-to-date price information readable on their phone
INCREMENTS
{{#each @model as |st| }} {{/each}}
RESPONSIVENESS Readable on their phone
display: flex display: grid
display: flex display: grid
display: flex display: grid
display: flex display: grid
display: flex display: grid
display: flex display: grid
Mobile experience: ember-web-app
Mobile experience: ember-mobile-menu
PURPOSE Up-To-Date Price Information
TOOL Netlify Functions
“Deploy server-side code that works as API endpoints, runs automatically in response to events, or processes more complex jobs in the background.” NETLIFY.COM
netlify/functions/stations.js
netlify/functions/stations.js
netlify/functions/stations.js
config/enviroment.js
DISCLAIMER
PURPOSE Vacation 🌴🏕 🗺
Unicode flags index
‘🇳’ + ‘🇱’ = ‘🇳🇱’
FOCUS Design
Limited Color Palette
Icon Improvement
Chips
PURPOSE What is close to me?
Web API
ember-concurrency
PURPOSE FOCUS TOOLS CSS Variables You Can Expand Start Small Browser APIs
Advent of Code Tracker
PURPOSE Share my solutions for advent of code with the world and have a nice place to work on my solutions every day
ember-code-snippet
ember-code-snippet
GENERATOR Every day create the same files and update the same files
GENERATOR
GENERATOR
templates/puzzles/name.hbs {{page-title <%= camelizedModuleName %>}} <Day @number=<%= camelizedModuleName %> @solution1={{this.solution1}} @example1={{this.example1}} @solution2={{this.solution2}} @example2={{this.example2}}> </Day>
$ ember g puzzle 1
templates/puzzles/1.hbs {{page-title 1}} <Day @number=”1” @solution1={{this.solution1}} @example1={{this.example1}} @solution2={{this.solution2}} @example2={{this.example2}}> </Day>
controllers/puzzles/name.js
index.js
index.js
PURPOSE FOCUS TOOLS Useful Addons Reduce Workload Work Smarter Generators
PURPOSE
FOCUS
TOOLS
Thank you! • ember-sample-apps GitHub • Resources for mobile-friendly Single Feature Apps • Github & Discord: @minthamie • Instagram: @anne.greeth ember-sample-apps.com/ mobile-friendly
How many web projects have you started, and how many of them have you finished? We all know how easy it is to type ember new my-next-cool-idea but finishing the project is a different story. Showing the power of incremental development with projects that have been almost finished since the first commit will hopefully inspire people to finish their projects.
for free. You
can too.