The Blueprint to a Finished Project

$ ember new conference-tracker

🇳🇱

🇳🇱 🐹

💬 🇳🇱 🐹 🏳🌈

💬 🇳🇱 🐹 🏳🌈 🎨

💬 🇳🇱 🐹 🏳🌈 🎨 🐾

💬 🇳🇱 🐹 🏳🌈 🎨 🐾 💍

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

+219 -5

FOCUS Playing Together

ember-concurrency

Web API

FOCUS Accessibility

No Red No Green No Blue No Color

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

RESPONSIVENESS Readable on their phone

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

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

GENERATOR Every day create the same files and update the same files

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

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