bradfrost-com-t3o1za.txt (7973B)
1 [1] My name is Brad Frost 2 3 • [2]Work 4 • [3]Training 5 • [4]Book 6 • [5]Blog 7 • [6]Contact 8 9 Ella’s First Website 10 11 ULTRA PROUD DAD MOMENT: Ella made her first website! 12 13 Melissa and I woke up on Saturday morning to our goofy 6-year-old daughter 14 entering our bedroom making this obnoxious sound. It was impressively annoying, 15 especially considering she hasn’t seen [7]Dumb and Dumber yet. She truly is her 16 father’s daughter. 17 18 After we were done laughing, we recorded her and cracked ourselves up listening 19 to the playback. We joked that it would make for a really effective alarm 20 clock. 21 22 “We should make one!” I said. 23 24 Her face lit up. 25 26 “Yeah, we can make a little website that loops the sound. It’ll be funny.” 27 28 I brought my laptop to breakfast and I fired up my trusty, faithful, incredible 29 friend [8]Codepen. I insisted that Ella drive. 30 31 Ella on Brad's laptop sitting at the breakfast table 32 33 I decided to start her with one of the most magical, visceral aspects of 34 front-end development: changing the body‘s background-color. 35 36 Just look at that reaction as soon as the web page’s canvas changed colors: 37 38 Ella reacting to the browser window change from white to green when she entered 39 the appropriate CSS code. 40 41 Surprise. Wonder. Happiness. Pride. Satisfaction. You can see the gears 42 turning. 43 44 We continued on our journey. Like most kids her age, she is learning to spell 45 and isn’t used to typing on a keyboard. On the back of an envelope, I wrote 46 some of the words and syntax down for her to transcribe: 47 48 A zoom in of my writing code on the back of an envelope 49 50 She diligently followed instructions, and though it required patience (she 51 definitely started losing focus over time!) we kept at it. I said we needed 52 picture of her that would be part of the alarm clock website. We took the photo 53 and turned our attention to the next magic trick: replacing the background with 54 her goofy face. She truly is her father’s daughter. 55 56 I had to intervene a bit here to open up [9]Codepen’s super helpful assets 57 feature to get the image online. But! I taught her how to use the trackpad, as 58 well as copy and paste keyboard commands. It took a second and some fiddling 59 around with the [10]background-size value, but we got her goofy mug onto the 60 website: 61 62 From there, we turned our attention to the HTML panel to add the [11]audio tag. 63 That was a little tougher, especially since her patience was wearing thin. But 64 I was able to explain that writing [12]loop would make the sound repeat 65 forever, which she thought was funny. I also explained that autoplay would make 66 it start playing immediately, but I learned autoplay (rightly) [13]blocked by 67 default to prevent, say, an annoying sound to loop for infinity. 68 69 After a little bit more finessing and me getting the audio asset in there, she 70 had her finished website! 71 72 So here it is: Ella’s [14]funny annoying alarm clock website! 73 74 See the Pen [15] funny annoying alarm clock by Brad Frost ([16]@bradfrost) on 75 [17]CodePen. 76 77 She had a great initial reaction, and I think hearing her annoying sound come 78 from a totally different machine didn’t really compute to her. And while her 79 patience was understandably spent, she enjoyed the results. 80 81 There is a lot I could say here. That this is a beautiful reminder of the 82 absolute magic that is web design and development. That a beginner’s mind can 83 change your perspective. That the declarative and human-readable languages of 84 CSS and HTML help make coding less intimidating. That we could continue to 85 improve the website and add new features. That accessible tools that help 86 people learn web development are incredible. 87 88 I could go on about all of these things, but I won’t. Instead I will say that I 89 am so incredibly proud of Ella. I am lucky to be the dad of such a smart, 90 creative, hilarious, curious, and yes obnoxious girl. I hope this is but one of 91 many many many many many many creations that leave her head and make their way 92 out into the world. I love you so much, Ella. 93 94 And yes, I woke her up for school today with her alarm clock. 95 96 Posted by [18]Brad Frost on [19]27 Nov, 2024 97 98 Tags: [20]codepen, [21]css, [22]education, [23]ella, [24]html, [25]life, [26] 99 personal, [27]web design, [28]web development 100 101 • Brad Frost 102 103 Hey there! 104 105 I'm [29]Brad Frost, a design system consultant, web designer, speaker, 106 writer, and musician located in beautiful Pittsburgh, PA. 107 108 • [30] 109 Atomic Design Book [atomic-des] [atomic-des] 110 • [31]Atomic Design 111 112 I wrote a book called [32]Atomic Design, which covers all that goes into 113 creating and maintaining effective design systems. You can [33]read it 114 online and [34]order the ebook. 115 • [35] Brad Frost speaking at TEDx Pittsburgh 116 • [36] 117 118 Wanna work together? 119 120 I'm a principal and technical strategist at Big Medium, where we help teams 121 establish and evolve design systems, establish more collaborative 122 workflows, and create better software together. Need design system help? 123 Need help leveling up your organization's digital practice? Get in touch! 124 125 • [37] 126 127 Blog 128 129 I write about web design best practices, design systems, responsive design, 130 and other tasty topics on my blog. I also enjoy sharing and commenting on 131 interesting links from around the web. 132 133 • [38] 134 135 Contact 136 137 Does your team need help taking your design system to the next level? 138 Interested in a workshop, consulting, or co-creation project? Have a 139 question about atomic design or web development? Get in touch! 140 141 • [39] 142 143 Music 144 145 Music gives me an enormous amount of mental, physical, and spiritual 146 satisfaction. I just love playing music, plain and simple. 147 148 • Around the web 149 150 You can follow along on [40]Bluesky, [41]LinkedIn, [42]Mastodon, [43] 151 Threads, [44]YouTube, [45]Instagram, [46]Github, [47]Codepen, [48]Spotify, 152 and [49]Last.fm. 153 154 • 155 156 157 References: 158 159 [1] https://bradfrost.com/ 160 [2] https://bradfrost.com/work 161 [3] https://bradfrost.com/workshops 162 [4] http://atomicdesign.bradfrost.com/ 163 [5] https://bradfrost.com/blog 164 [6] https://bradfrost.com/contact 165 [7] https://www.youtube.com/watch?v=aR3MDSF-IpQ 166 [8] https://codepen.io/ 167 [9] https://codepen.io/features/asset-hosting 168 [10] https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 169 [11] https://www.w3schools.com/html/html5_audio.asp 170 [12] https://www.w3schools.com/tags/att_audio_loop.asp 171 [13] https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide 172 [14] https://codepen.io/bradfrost/pen/GRVLEKY?editors=1100 173 [15] https://codepen.io/bradfrost/pen/GRVLEKY 174 [16] https://codepen.io/bradfrost 175 [17] https://codepen.io/ 176 [18] http://bradfrost.com/ 177 [19] https://bradfrost.com/blog/post/ellas-first-website/ 178 [20] https://bradfrost.com/blog/tag/codepen/ 179 [21] https://bradfrost.com/blog/tag/css/ 180 [22] https://bradfrost.com/blog/tag/education/ 181 [23] https://bradfrost.com/blog/tag/ella/ 182 [24] https://bradfrost.com/blog/tag/html/ 183 [25] https://bradfrost.com/blog/tag/life/ 184 [26] https://bradfrost.com/blog/tag/personal/ 185 [27] https://bradfrost.com/blog/tag/web-design/ 186 [28] https://bradfrost.com/blog/tag/web-development/ 187 [29] http://bradfrost.com/about 188 [30] https://shop.bradfrost.com/ 189 [31] https://shop.bradfrost.com/ 190 [32] http://atomicdesign.bradfrost.com/ 191 [33] http://atomicdesign.bradfrost.com/table-of-contents/ 192 [34] https://shop.bradfrost.com/products/atomic-design-ebook 193 [35] https://bradfrost.com/speaking 194 [36] https://bradfrost.com/work 195 [37] https://bradfrost.com/blog 196 [38] https://bradfrost.com/contact 197 [39] https://bradfrost.com/music 198 [40] https://bsky.app/profile/bradfrost.com 199 [41] https://www.linkedin.com/in/bradfrost 200 [42] https://mastodon.social/@brad_frost 201 [43] https://www.threads.net/@brad_frost 202 [44] https://www.youtube.com/@brad_frost 203 [45] http://instagram.com/brad_frost 204 [46] https://github.com/bradfrost 205 [47] http://codepen.io/bradfrost/ 206 [48] https://open.spotify.com/user/ienjoyhotsoup 207 [49] http://www.last.fm/user/brad_frost