The Blueprint to a Finished Project

A presentation at EmberConf 2023 in July 2023 in Portland, OR, USA by Anne-Greeth van Herwijnen

Slide 1

Slide 1

Slide 2

Slide 2

$ ember new conference-tracker

Slide 3

Slide 3

The Blueprint to a Finished Project

Slide 4

Slide 4

🇳🇱

Slide 5

Slide 5

🇳🇱 🐹

Slide 6

Slide 6

💬 🇳🇱 🐹 🏳🌈

Slide 7

Slide 7

💬 🇳🇱 🐹 🏳🌈 🎨

Slide 8

Slide 8

💬 🇳🇱 🐹 🏳🌈 🎨 🐾

Slide 9

Slide 9

💬 🇳🇱 🐹 🏳🌈 🎨 🐾 💍

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

PURPOSE Why, How, What Keep It Simple, Software Developer FOCUS TOOLS

Slide 19

Slide 19

FOCUS PURPOSE Minimal Viable Product Small Increments Ugly Is Okay TOOLS

Slide 20

Slide 20

TOOLS Ember.JS PURPOSE FOCUS Linting CSS Git

Slide 21

Slide 21

Why Do I Use Ember for Fun Projects

Slide 22

Slide 22

Slide 23

Slide 23

Single Feature Apps TM by Chris Manson

Slide 24

Slide 24

Slide 25

Slide 25

PURPOSE Being able to play SET with my sister during the pandemic

Slide 26

Slide 26

Slide 27

Slide 27

FOCUS Playing SET

Slide 28

Slide 28

SHAPE FILLING COLOR AMOUNT GREEN RED PURPLE

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

{{#each this.field as |card|}} <img src={{card.image}} {{on “click” (fn this.selectCard card.image) }} class={{if card.selected “selected” “”}}/> {{/each}}

Slide 35

Slide 35

Slide 36

Slide 36

MVP

Slide 37

Slide 37

MVP

Slide 38

Slide 38

+219 -5

Slide 39

Slide 39

FOCUS Playing Together

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

ember-concurrency

Slide 44

Slide 44

Web API

Slide 45

Slide 45

FOCUS Accessibility

Slide 46

Slide 46

No Red No Green No Blue No Color

Slide 47

Slide 47

No Red No Green No Blue No Color

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

ember-picker

Slide 51

Slide 51

ember-picker

Slide 52

Slide 52

PURPOSE FOCUS TOOLS Think About Future You Linting You Are Allowed To Pivot Useful Addons Don’t Overcomplicate!

Slide 53

Slide 53

H2 FUELING STATIONS

Slide 54

Slide 54

PURPOSE Provide Dutch hydrogen car drivers with up-to-date price information readable on their phone

Slide 55

Slide 55

INCREMENTS

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

{{#each @model as |st| }} {{/each}}

Slide 61

Slide 61

Slide 62

Slide 62

RESPONSIVENESS Readable on their phone

Slide 63

Slide 63

display: flex display: grid

Slide 64

Slide 64

display: flex display: grid

Slide 65

Slide 65

display: flex display: grid

Slide 66

Slide 66

display: flex display: grid

Slide 67

Slide 67

display: flex display: grid

Slide 68

Slide 68

display: flex display: grid

Slide 69

Slide 69

Mobile experience: ember-web-app

Slide 70

Slide 70

Mobile experience: ember-mobile-menu

Slide 71

Slide 71

PURPOSE Up-To-Date Price Information

Slide 72

Slide 72

TOOL Netlify Functions

Slide 73

Slide 73

“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

Slide 74

Slide 74

netlify/functions/stations.js

Slide 75

Slide 75

netlify/functions/stations.js

Slide 76

Slide 76

netlify/functions/stations.js

Slide 77

Slide 77

config/enviroment.js

Slide 78

Slide 78

Slide 79

Slide 79

DISCLAIMER

Slide 80

Slide 80

PURPOSE Vacation 🌴🏕 🗺

Slide 81

Slide 81

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

Unicode flags index

Slide 86

Slide 86

‘🇳’ + ‘🇱’ = ‘🇳🇱’

Slide 87

Slide 87

FOCUS Design

Slide 88

Slide 88

Limited Color Palette

Slide 89

Slide 89

Icon Improvement

Slide 90

Slide 90

Chips

Slide 91

Slide 91

PURPOSE What is close to me?

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

Web API

Slide 95

Slide 95

ember-concurrency

Slide 96

Slide 96

PURPOSE FOCUS TOOLS CSS Variables You Can Expand Start Small Browser APIs

Slide 97

Slide 97

Advent of Code Tracker

Slide 98

Slide 98

PURPOSE Share my solutions for advent of code with the world and have a nice place to work on my solutions every day

Slide 99

Slide 99

Slide 100

Slide 100

Slide 101

Slide 101

ember-code-snippet

Slide 102

Slide 102

ember-code-snippet

Slide 103

Slide 103

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

Slide 104

Slide 104

GENERATOR

Slide 105

Slide 105

GENERATOR

Slide 106

Slide 106

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

Slide 110

Slide 110

templates/puzzles/name.hbs {{page-title <%= camelizedModuleName %>}} <Day @number=<%= camelizedModuleName %> @solution1={{this.solution1}} @example1={{this.example1}} @solution2={{this.solution2}} @example2={{this.example2}}> </Day>

Slide 111

Slide 111

$ ember g puzzle 1

Slide 112

Slide 112

templates/puzzles/1.hbs {{page-title 1}} <Day @number=”1” @solution1={{this.solution1}} @example1={{this.example1}} @solution2={{this.solution2}} @example2={{this.example2}}> </Day>

Slide 113

Slide 113

controllers/puzzles/name.js

Slide 114

Slide 114

index.js

Slide 115

Slide 115

index.js

Slide 116

Slide 116

Slide 117

Slide 117

PURPOSE FOCUS TOOLS Useful Addons Reduce Workload Work Smarter Generators

Slide 118

Slide 118

PURPOSE

Slide 119

Slide 119

FOCUS

Slide 120

Slide 120

TOOLS

Slide 121

Slide 121

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