<p>I finally built a Raspberry Pi project my wife loves: an e-ink train and weather tracker! If you want to build one yourself, <a href="https://github.com/SamBroner/subway-e-ink-tracker">the Github &#x26; instructions are here.</a></p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/raspberry-pi-train/kira-leaving.jpeg" alt="" /></div><p>Kira will be jogging to the night shift!</p></div><p>Over the past few years, I've been on something of an e-ink journey.  I started with a <a href="https://sambroner.com/posts/raspberry-pi-weather">weather and news display</a> (still the only post on my website that regularly gets organic traffic.) While I loved it and it looked great, a phone is a better way to check the news, and the weather only gets checked once a day. Then in 2022 while at MIT I built <a href="https://x.com/SamBroner/status/1602137871523143680/video/1">Jarvis, the e-ink voice-to-image display</a>. Jarvis was a great party trick — say, "Hey Jarvis, paint me an elephant on a bowling ball in Times Square" and watch as the image gradually appeared. Notably, this was before ChatGPT, when people were still impressed by AI!</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="two"><img src="/posts/raspberry-pi-train/weather.jpeg" alt="" /><img src="/posts/raspberry-pi-train/jarvis.jpeg" alt="" /></div><p> Jarvis live demo is better! </p></div>
Then over Thanksgiving, I had some free time, a basket of spare parts, and the itch to code and build something physical. So here we are with the e-ink train and weather tracker.
<p>The idea is simple: Every morning, my wife and I take the inbound F or G subway lines to work from a stop that's a 2-minute jog or a 6-minute walk from our house. I love the NYC subway and it works incredibly well, but the trains come <em>often</em> and <em>predictably</em>, not <em>on-a-schedule</em>. So every morning we're calling out, when's the next G, when's the next F — and one of us pulls out a phone for the MTA app or Google Maps and yells back the upcoming train times. Then we time our morning routines to either stretch for a train in three minutes or slow down for a train in ten.</p><p>The subway and weather tracker makes checking train times much faster and calmer than pulling out a phone. Since it's centrally located in our home, someone is always close enough to glance at it.</p><p>The subway times reported by the <a href="https://www.mta.info/developers">MTA API</a> are reliable once the train is within a few stops or 15 minutes away, with precision increasing as the trains get closer. Having the train times on the wall lets you check how your morning routine is developing against the train schedule as the departure time gets closer.</p><p>Best of all, Kira loves it! This goes on my DIY pantheon along with adding legs to her dresser to make it a better height and fixing a towel rack right before she hosted her colleagues for a book club.</p><p>If you want to build one yourself or better understand the project, I'll dive into some editorial and gotchas below. The practical instructions, parts, and code live in this <a href="https://github.com/SamBroner/subway-e-ink-tracker">GitHub Repo</a>.</p><h2>Description &#x26; Features</h2><p>The train &#x26; weather tracker is built on a <a href="https://www.waveshare.com/product/displays/e-paper/9.7inch-e-paper-hat.htm">9.7" 1200x825 E-Ink display</a> attached to a <a href="https://www.raspberrypi.com/products/raspberry-pi-4-model-b/">Raspberry Pi 4b</a>. The display is split into four parts: a header, with date, time, and a live second hand to indicate liveness; a train tracker; the commute weather; and a "weather bar" displaying the next 12 hours of weather. The main focus of the layout is the train tracker, which shows the upcoming 30 minutes of inbound F &#x26; G trains.</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/raspberry-pi-train/raw-display.jpeg" alt="" /></div></div><p>The display sits in a laser cut mat board with black ridges sized to hide the black border of the e-ink display. The mat board sits in a 8.5" x 11" cherry frame that is 1.5" deep to allow the raspberry pi to be backmounted while the frame is still flush to the wall. We hang the display next to the door above a key holder, which is generally the right place for it, but also helps hide the power cord.</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/raspberry-pi-train/back-of-frame.jpeg" alt="" /></div><p>Not pretty, but it works</p></div><h2>Project Details</h2><p>The software portion of the project is manageable although there are some gotchas when programming against the Waveshare e-ink hat in particular. We have a modular architecture with a clear separation of concerns:</p><ol><li><p>Display Engine: Renders the layout to the display, supporting communication with the physical e-ink display or rendering a png for non-raspberry pi development</p></li><li><p>Layout System: A pretty hacky visual arrangement of the elements. It'd be fun to do something more sophisticated here (e.g. a html renderer), but 🤷‍♂️. This will likely require the most work if you want to modify the project</p></li><li><p>Data Services: Fetch &#x26; process (this is important!) train arrival from NYC Transit GTFS feeds + get the weather forecasts</p></li><li><p>Application Controller: Orchestrate the event loop and subscription model to drive updates to the display</p></li></ol><p>The biggest technical constraint is the update rate to the e-ink display. The display supports multiple update modes with different tradeoffs and <em>can</em> manage sub 500 ms updates, especially for partial updates, but a faster refresh results in fuzzy characters and substantial ghosting that looks pretty bad. The bigger issue is that overloading the display causes it to crash, which requires a full reset.</p><p>After some testing, I chose a hybrid display update strategy.</p><p>Every second, the pixels around the seconds &#x26; minutes digits of the time are rerendered with the display's fastest partial update mode to make it clear that the display is functioning as expected.</p><p>When there is an update to one of the next two train times (these matter more than trains 30 minutes away), there is a fast-full display render — all data is updated at this point, but only new arrival times for one of the next two trains will drive the update.</p><p>On the hour, the display does a deep full-screen render to sharpen the characters and remove ghosting.</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/raspberry-pi-train/mode-summaries.jpeg" alt="" /></div><p>Honestly, you gotta experiment to understand how these will look </p></div>
Doing deep full screen renders can be jarring — it results in a black and white flash that attracts too much attention to the screen — but once an hour is a fine cadence. For the train times, a fast-full display render works better than a partial refresh because of the layout. The fast partial render cuts across elements, drawing more attention to the refresh than a full refresh. This could maybe be improved through more purposeful partial refresh rectangle selection, but the current solution works well.
<p>The framing was tricky because I wanted something nice, but without breaking the bank. I'm not great at woodworking and I also didn’t want to spend $300-$500, which was the range of quotes (FWIW, I have been trying to find a low cost framing solution for these broken glass pieces for years — let me know if you have any ideas). The e-ink display is awkwardly sized due to the connection cables and drivers. The display surface also has a fine looking, but inelegant border that should be covered. After talking to a few framers, one of them suggested I buy <em>just</em> a custom mat. The mat hides the display, Raspberry Pi, and cabling, but more importantly the outside of the mat is right sized to fit into a standard-sized frame.</p><p>The finished product sits neatly beside our door, providing the exact information we need at just the right time each morning. I've written before about the "agency gap" — the gap between what people do and what would be easy, but useful to do. This project is a bit more involved than that, but at ~20 hours of work, it was worth it to me. I built something that solves a daily need, we actually use it, guests talk about it, and it looks great.</p>


A dashboard with the weather forecast and top headlines is an easy, but useful little project.

Building an E-Ink Train & Weather Tracker

<h2>Why build a browser?</h2><p>Some estimates indicate desktop users spend 60+% of their computer time in the browser. People are spending nearly 200 minutes per day with a combination of mobile and desktop web browsing. I've heard (anonymous but reliable) rumors that US office workers spend more than three hours per day in desktop browsers.</p><p>Clearly, all of these user eyeballs are valuable.</p><p>And while Chrome (and the <a href="https://www.howtogeek.com/202825/what%E2%80%99s-the-difference-between-chromium-and-chrome/">Chromium browser project</a>) are the winners today, browsers have always been a major battlefield between tech titans (see my former employer!) Still, no one seems to be seriously investigating the strategic thinking motivating browser development.</p><p>So let's do it.</p><h2>The Landscape</h2><h3>Tier 1 - De Facto Standard</h3><p>Google's Chrome dominates with 64% of the market across desktop and mobile usage†. Chrome is synonymous with web browsing for many (most?) internet users.</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/chrome-with-background.png" alt="" /></div></div><p>Developers are an important part of Chrome's network effects. Because of Chrome's dominant market share, developers focus on Chrome compatibility first. Developers have since become <em>very familiar</em> with Chrome developer tools, and there is a growing ecosystem of Chrome developer tool extensions (React, Lighthouse, etc.) These tools allow developers to build, test, and fix websites quickly. These tools also perpetuate Chrome's dominance because developers make websites that work best in Chrome. Testing in other browsers is often an afterthought.</p><p>Critically, Chrome's adoption has furthered the standardization of the web. Through Chrome, Google is the gatekeeper of modern web standards: Chrome's adoption of a web standard is the most important step to widespread adoption. And this standardization makes it easier to <strong>search</strong> the web. The Google web crawler (Googlebot) can more easily ingest all Chrome-compatible websites.</p><p>Cynically, Chrome's dominance has allowed Google to push search optimizing technologies like AMP that go against open web standards.</p><blockquote><p>At this point, it's important to remember that Chromium is different than Chrome. Chromium is the open-source browser project that powers Google Chrome, but Microsoft Edge and other significant browsers also use Chromium.</p><p>While Chromium browsers have some flexibility, like choosing privacy respecting search engines, all Chromium browsers use the same JavaScript engine, and most use similar developer tools and extension APIs</p></blockquote><h3>Tier 2 - The Competition</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/tier2.png" alt="" /></div></div><p>Apple's Safari, Microsoft Edge, and Mozilla's Firefox all have less than 10% of the market on desktop. Even Apple's Safari, installed by default on iOS, has only 26.5% of the phone browser market†. Edge and Firefox are not even top 5 mobile browsers.</p><blockquote><p>On iOS, Apple runs a similar racket to Google. All iOS browsers must use Apple's WebKit browser engine. So even if you use Chrome on iOS, you're using Apple's engine.</p></blockquote><h3>Tier 3 - Legacy</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/tier3.png" alt="" /></div></div><p>The third tier of browsers is the legacy tier. Most developers know Internet Explorer and Opera, but these browsers are doomed to irrelevancy.</p><p>Internet Explorer and the Trident browser engine were the de facto web standard of the early 2000s (Internet Explorer was even more dominant than Chrome in its heyday), but Internet Explorer is deprecated; Microsoft is working hard to stop supporting the application.</p><p>Opera has 2% of the market and an improbable path towards success.</p><h3>Tier 4 - International &#x26; Boutique</h3><p>The fourth tier is QQ browser, Sogou Explorer, and Yandex Browser, the country and language-specific browsers. These browsers are out of Russia and China, and they only have penetration in those markets. Similarly, Samsung has a mobile browser for use on Samsung Android phones.</p><h3>New Wave of Browsers</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/New-Wave-of-Browsers.png" alt="" /></div></div><p>Finally, we have the experimental browsers: Brave, with a privacy focus and crypto rewards; the Browser Company, which focuses on workplace productivity; and Mighty App, which delivers substantial performance improvements via streaming.</p><p>These browsers are experimenting with new business models, such as charging monthly fees or changing their relationship with advertisers.</p><blockquote><p>Over the years, dozens of companies have tried to offer new browser experiences with specialty features. Typically these browsers use the Chromium engine and layer features on top. Check out <a href="https://browser.kagi.com/">Orion Browser</a>, <a href="https://vivaldi.com/">Vivaldi</a>, <a href="https://torchbrowser.com/">Torch</a>, <a href="https://spreadprivacy.com/duckduckgo-2021-review/">DuckDuckGo</a>, <a href="https://bonsaibrowser.com/">Bonsai</a>, <a href="https://github.com/dothq/browser">Dot Browser</a>, <a href="https://sigmaos.com/">SigmaOS</a></p></blockquote><p class="footnote">
† Market-share stats are from [Statcounter Global Stats](https://gs.statcounter.com/browser-market-share). They're very googleable and  consistent across tracking sites.
</p><h2>Strategic Motivations</h2><p>With browser market share in mind, let's look at the strategic choices of the companies that build our browsers.</p><h3>Google's Chrome</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/chrome.png" alt="" /></div></div><p>Chrome is worth around $50B per year to Google simply by driving search traffic. After all, <a href="https://www.ped30.com/2021/08/25/apple-google-payments-15b/">Google pays Apple $15B a year</a> for just 20% of the market.</p><p>But let's look historically: Google launched <a href="https://techcrunch.com/2006/10/10/google-docs-spreadsheets-launches/">Google Docs (2006)</a><em>before</em><a href="http://googlepress.blogspot.com/2008/09/google-chrome-new-take-on-browser_02.html">Chrome (2008)</a>. Google was attempting to drive web usage by moving traditionally desktop applications to the web before investing in a web browser.</p><p>With this in mind, Google built Chrome because Google needed more users on the web. When Chrome first launched, there was real alignment between web users and Google: with a better, more powerful, more consistent web experience there would be more web users and more Google searches.</p><p>However, user and company interests have become misaligned as Google has grown.</p><p>I recently heard a user-hostile story demonstrating the misalignment between Chrome users and Google's business priorities. A Google engineer decreased the latency with which the Omnibox (search bar) autocompleted a URL. E.g., "Faceboo" turns into facebook.com. Well, the improved performance of the autocomplete led to a decrease in searches because people no longer searched for "Faceboo." Ultimately, the engineer was asked to roll back that feature.</p><p>And there are a litany of issues like this... <a href="https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages">AMP support</a>, user profiles, <a href="https://www.tomsguide.com/news/new-chrome-extension-rules-could-hobble-ad-blockers">disabling ad-block</a>, <a href="https://resources.infosecinstitute.com/topic/floc-delayed-what-does-this-mean-for-security-and-privacy/">FloCs</a>. Google's consolidation of users has, at this point, given them too much control over the future of the web.</p><p>Again, Google built Chrome to drive traffic to Google Search and they've certainly succeeded.</p><h3>Apple's Safari</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/safari.png" alt="" /></div></div><p>Apple is focused on the continuity of its ecosystem and disrupting Google's web hegemony.</p><p>Looking at the ecosystem, Apple's Safari is practically a platform for their Keychain Password Manager product. It almost makes sense. The Password Manager creates a very Apple-y cohesiveness in the overall Apple ecosystem. I can easily bring a login from my iPhone to my Mac if I use Apple's browser.</p><p>At the same time, Apple has built a differentiated and distinctly Apple-y visual offering. Love it or hate it, this continuous design language certainly makes users aware that they're in Apple-land.</p><p>Apple is also making sure that Apps are better than websites. This is why Apple forces all iOS browsers to use WebKit and why Apple has not moved to fix all Web Standards incompatibilities (although Safari has improved.)</p><p>If mobile web development were easier, mobile web apps would become more powerful and more common. Improved mobile web apps could lead iOS users to abandon Apple's App Store and move to non-platform-specific web apps, possibly leaving Apple's beautiful walled garden.</p><p>Apple is profitable enough. They merely need to defend their ecosystem from attack.</p><h3>Mozilla's Firefox</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/firefox.png" alt="" /></div></div><p>Further down the list, we have Mozilla Firefox. Mozilla is in a tricky spot because they're a non-differentiated offering that does not have additional revenue streams the browser can reinforce. Mozilla's only product is the Firefox browser. The rise of mobile browsing, combined with Google and Apple's stranglehold over mobile operating systems, has limited user growth prospects. There are limited ways to drive revenue with the existing product.</p><p>Firefox is beholden to Google because Google pays for the right to offer Google search as the preferred search engine in Firefox's Omnibox. This agreement leads to a conflict of interest because Firefox's main differentiator is a better privacy model.</p><p>Sadly, I believe that Firefox's privacy features are mostly marketing. Without other revenue streams to point to, Mozilla can say they care about privacy, but privacy, historically, has not been a paid feature for most users. It seems unlikely that Firefox will ever earn significant adoption again.</p><p>Mozilla is a true browser company but needs to find paid features fast. Expect them to pander to advertisers or copy the New Wave of Browsers.</p><h3>Microsoft's Edge</h3><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/edge.png" alt="" /></div></div><p>Microsoft Edge is the continuation of three major strategic priorities at Microsoft: embrace the web, embrace developers, and build the ecosystem. Microsoft Edge uses Google Chrome's Chromium engine as the core of the browser architecture, ensuring compatibility with the de facto web standard (Chrome compatibility.) At the same time, Microsoft Edge comes with Chrome's developer tools, which allows developers to iterate on websites while remaining within the Edge browser.</p><p>Microsoft Edge is also Microsoft's attempt to copy Apple's ecosystem tactics. While Microsoft owned the web with Internet Explorer (20yrs ago), that effort culminated in the Browser Wars and serious anti-trust investigations. This time, Microsoft will attempt to link Edge to Office for office workers, link Edge to Windows for home users, and link Edge to VSCode and Azure for software developers.</p><p>Notice that Microsoft does not need to rely on pushing search for Edge to be a good investment. While increasing Bing traffic is an ancillary benefit, it is more strategically important that developers and users love using Edge <em>with</em> other paid Microsoft services. Similar reasoning allows Microsoft to focus on privacy. Privacy appeals to high-value corporate customers.</p><p>Perhaps most importantly, Microsoft does not want to concede the modern browser wars if further browser investment becomes a critical strategy. So they've chosen the cheapest path by embracing Chromium.</p><p>Microsoft can afford to sponsor a browser team, but by embracing Chromium they're simply not disrupting the browser market significantly.</p><blockquote><p>I should note that I wrote the bulk of this essay before Microsoft announced BNPL features in Edge. I don't think that the BNPL feature changes the core priorities Microsoft has with Edge, but it is a strategically confusing move.</p><p>I also worked for Microsoft, but all these opinions are my own.</p></blockquote><h3>Internet Explorer</h3><p>Internet Explorer is the first member of the third tier. As a testament to Internet Explorer's enormous early successes, people still use IE because some early internet software only runs on the IE browser engine (Trident). But, realistically, Internet Explorer already has an expiration date: Microsoft has repeatedly announced its plans to stop supporting Internet Explorer.</p><p>So here IE remains...</p><h3>Opera</h3><p>Opera is doing something right now, but I'm not sure it matters. It's harder to see a path for success as Firefox's little brother. Opera is another example of a company that can't drive revenue through other products. As far as I can tell, Opera has an undifferentiated product and is unlikely to grow.</p><h3>Regional Browsers</h3><p><em>QQ Browser by Tencent (China), Sogou Explorer by Sogou (China), Yandex Browser by Yandex (Russia)</em></p><p>This group is interesting because they come from national technology companies. However, all three mimic strategies employed by the larger players. Sogou and Yandex, Chinese and Russian search companies, built browsers to drive revenue in their search products. They drive adoption with language-specific features. Tencent is employing a strategy similar to Microsoft or Apple by hinting at future integration with WeChat and QQ.</p><p>These browsers seem unlikely ever to have a significant usage breakthrough, but they are likely to stick around to support their companies' strategic initiatives.</p><h2>New Wave Browsers</h2><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img src="/posts/incentives-of-browsers/new-wave-just-3.png" alt="" /></div></div><p>Now let's talk about the new wave of browsers: Brave, Mighty App, The Browser Company, and more. These companies are making new strategic choices and adopting differentiated business models. Their strategies are not to reinforce other parts of their businesses but to build a great browser that users want. Let's hope these models allow closer alignment to user needs.</p><h3>Brave</h3><p>Brave is the most established of the new browsers. Brave offers standard browser features, but also offers a new advertising model. You can opt in to <a href="https://brave.com/compare/chrome/earning/">Brave Ads</a>, where the end user (you!) gets 70% of the ad revenue. This revenue is given in the form of Basic Attention Tokens (BAT), which can be withdrawn to a bank account or given as tips to creators.</p><h3>Mighty App</h3><p>Mighty App has the most differentiated offering and costs $30 per month. While Mighty markets itself as a browser for business, its primary offering is a significant speed improvement over traditional browsers. Mighty App streams your browsing experience from a remote VM. This trade-off between streaming bandwidth versus local memory and CPU constraints is compelling for people with cheaper or older computers or those using computational expensive web apps like Figma or Jira. The Mighty App website still talks about reducing computer fan noise when using Mighty App with Figma (compared to using Chrome with Figma.)</p><p>If this doesn't sound appealing to you, perhaps you're not the target audience. Imagine this: You are a designer at a small company. You use Figma for work, but you were given a crappy work laptop. Your computer hangs, dies, and generally doesn't work how you want.</p><p>Well, with Mighty App, your IT department doesn't need to buy you a new laptop; they can provision you a new subscription to Mighty for $30 a month. Mighty immediately improves your productivity but does not require an expensive purchase or hardware depreciation.</p><h3>The Browser Company</h3><p>The Browser Company is still in private beta, but it is branding itself as the browser for work. I've only briefly used their browser with a friend and it's unclear if The Browser Company will be paid or free.</p><p>I can say that the experience was excellent in my testing. The Browser Company offers first-class integration with Notion/Gmail/GDocs, powerful shortcuts, a new tab model, integrated notes, and more.</p><p>I could see this as a paid offering where office workers pay a small monthly fee to integrate their preferred productivity and workplace applications more deeply into the browser. Still, we'll see where The Browser Company takes their offering next.</p><h2>What's Next?</h2><p>At this point, we have to talk about the incentives that lead to the best user experiences and why regulators have been active in the browser space.</p><p>Simply put, consumers benefit when there is an active marketplace of browser companies attempting to attract new users.</p><p>Right now, this is not happening. Apple owns iOS browsers and Google, whether through Chrome or Chromium, owns the rest. The investment to build a new browser engine is too large of a task. A proliferation of Chromium browsers may reduce the profitability of Google's Chrome so that Google reduces their investment in Chrome development, but that outcome seems unlikely today. Chrome's $50B annual revenue is comparable to Tesla, Xiaomi, or Nike. Even if there's imperfect alignment between company and consumer, there's enough money to invest in improving the experience.</p><p>Despite my cynicism, there may be a path towards browser disruption. The New Wave of Browsers is building compelling features on top of Chromium. If one of these startups gets user traction, it could kick off a startlingly sudden change in the web ecosystem.</p><p>I am particularly hopeful for a paid user model, as a paid model directly aligns consumer and company incentives, but a new advertising model or some web3/crytpo solution may also work.</p><p>Sound off on Twitter with ideas or comments. Would love to hear what you think.</p>


The strategic chioces behind the worlds most used software

Did you really think Google would just give you a browser?

<p>Very fun weekend project. With E-Ink displays coming down in price and Raspberry Pi’s getting cheaper, I wanted to play with these new toys! A simple dashboard with the weather forecast and top headlines is an easy, but useful little project.</p><p>Ours is now hanging up in the kitchen...</p><div style="box-sizing: border-box;" class="imageGallery"><div style="box-sizing: border-box;" class="one"><img class="half" src="/posts/raspberry-pi-weather/Vertical.JPG" /><img class="half" src="/posts/raspberry-pi-weather/Side_Angle.JPG" /></div><p>Almost arty photos</p></div><p>If you just want to see the code, check out the <a href="https://github.com/SamBroner/e-ink-weather">repository here</a>.</p><p>Read below to put this project together yourself!</p><h2>Supplies</h2><ul><li>Raspberry Pi w/ Wifi</li><li>MicroSD w/ Raspbian</li><li>E-Ink Display</li><li>2.5A Micro USB charger</li><li>(Optional) Keyboard, Mouse, Display, &#x26; Mini-hdmi adapter or cable</li></ul><h2>Getting Started with your Raspberry Pi</h2><blockquote><p>This is my process for setting up a RaspberryPi… if you know what you’re doing here, skip to the next section</p></blockquote><h3>Turn on the Raspberry Pi</h3><p>There’s been many guides written here (<a href="https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up">some</a><a href="https://www.tomshardware.com/reviews/raspberry-pi-set-up-how-to,6029.html">of my</a><a href="https://www.instructables.com/Ultimate-Raspberry-Pi-Configuration-Guide/">favorites</a>), but here’s the sparknotes.</p><ul><li><a href="https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up/2">Download Raspbian onto an SD card</a></li><li>Plug that SD card in</li><li>Plug in a power cable</li><li>Plug in keyboard, mouse, and display</li></ul><blockquote><p>It’s easy to get lost in the weeds when you're just getting started.
Just follow one guide and keep going.</p></blockquote><p>I like to get the <a href="https://www.raspbian.org/">Raspbian</a> UI up and running so I can get readjusted to the Raspberry Pi environment and tools.</p><h3>Configure the Raspberry Pi</h3><p>Next we’re going to make changes to the raspberry pi configuration</p><ul><li><a href="https://www.raspberrypi.org/documentation/configuration/wireless/">Connect to the internet</a> - For API access and to enable github and other developer tools</li><li><a href="https://www.raspberrypi.org/documentation/usage/gpio/">Enable GPIO pins</a> - For the E-Ink display connection</li><li><a href="https://www.raspberrypi.org/documentation/configuration/security.md"><strong>Change password</strong></a> - So we don't get <em>HACKED</em></li><li><a href="https://www.raspberrypi.org/documentation/remote-access/ssh/">Enable remote SSH</a> - For my preferred developer tooling setup</li></ul><h3>Connect via SSH Using VScode</h3><p>Let’s connect the RaspberryPI to VSCode via <a href="https://code.visualstudio.com/docs/remote/ssh">Remote-SSH</a>. This is my personal preference. It just works so dang well!</p><p><a href="https://www.raspberrypi.org/blog/coding-on-raspberry-pi-remotely-with-visual-studio-code/">Here's a guide to getting connected using VSCode.</a></p><p>So download and install VSCode and install the "Remote-SSH" plugin, then connect to the RaspberryPi by hitting CMD-Shift-P and typing in Remote-SSH. Connect to host, where the host is "RaspberryPi.local"</p><p>In my experience, Remote-SSH can work with a RaspberryPi 2b+, but remote shell works better with the 3 or newer. Much less stuttering, disconnecting.</p><h2>Connect your E-Ink Display</h2><p>I'm using the <a href="https://www.waveshare.com/product/displays/e-paper/epaper-1/7.5inch-e-paper-hat-b.htm">WaveShare 7.5in Red/Black/White display</a>. The RaspberryPi hat pushes directly onto the GPIO pins of the RaspberryPi.</p><p>To test the connection, I used the <a href="https://github.com/waveshare/e-paper">WaveShare github repository's</a> Python test scripts. They're moderately well documented, so you can just run the test script appropriate for your WaveShare display.</p><h2>The Code</h2><p>The interesting part of this project is the GitHub repository. You can check out my code here: [https://github.com/SamBroner/e-ink-weather)[https://github.com/SamBroner/e-ink-weather]</p><p>To get weather information, I used <a href="https://weatherapi.com/">https://weatherapi.com/</a>. To get News, I used <a href="https://newsapi.org">https://newsapi.org</a>. If you use my repo, you can clone and put your API tokens in the <code>.env</code> file.</p><p>It's relatively well documented, but tweet at me if you have issues and I'll update the documentation. (<a href="https://twitter.com/SamBroner">@SamBroner</a>)</p><h2>Hanging &#x26; Framing</h2><p>Ultimately, I wanted this to hang in the kitchen, so I found a cheap Shadow Box frame at a used goods store near my house.</p><p>I cut an opening for the ribbon cable to go from the front of the matting to the back, then glued the display &#x26; the RaspberryPi to opposite sides of the backing.</p><h2>Conclusion</h2><p>Fun project. E-Ink is great and reduced prices should lower the barriers to projects like this.</p>


A simple dashboard with the weather forecast and top headlines is an easy, but useful little project.

Building an E-Ink Weather & News Display

Rebuilding the Fluid Framework Hello World with the Snowpack build tool

Snowpack with Fluid Framework

<h1>You want to deploy a website. Where should you start?</h1><p>In the last two months, I redeployed <a href="https://www.sambroner.com">this personal website</a> and deployed <a href="https://FluidFramework.com">FluidFramework.com</a> for the first time. I made some mistakes along the way, but I ultimately chose to create a static website for both. It’s been a good choice for both.</p><p>In this post, you will learn when and why a static website is a good choice and which tools I used for this website. Next time we’ll talk about why I chose those tools over others and how you can deploy your website using the same tools I used.</p><h1>Should your website be a static website?</h1><p>A static website is a website that is delivered to your user’s web browser as it is stored. A static website does not rely on a web server to dynamically change the appearance or functionality.</p><p>For instance, this blog post is stored as <a href="https://www.sambroner.com/posts/azure-static-webapps-1/">azure-static-webapps-1.html</a> in Azure Blob Storage. The sidebar to the left and footer on the bottom are added into the .html file before they are uploaded to Azure Blob Storage.</p><blockquote><p>Let’s talk about the actual delivery of files for a second.</p><p>My personal website delivers four types of files to your browser: .css, .html, .js, and various media files. The .html file is first. In the HTML, there are references (tags) to the .css, .js, and media files necessary to make this page look how it does.</p><p>Many people choose to “bundle” these assets directly into the .html file. If I bundled the assets, the .css, .js, and (although less likely) the media would be included in the .html file and there would be no need to fetch those files later.</p><p>This is just how <a href="https://gohugo.io">Hugo</a>, the static site generator I'm using, works and I wasn’t too picky about it.</p></blockquote><p>All else being equal, static websites are often more cost-effective to host, easier to develop, and quicker to render. For a blog like this one, these are the core attributes I was considering. I want a cheap, easy, performant personal blog.</p><p>There are a few other reasons you may choose to build a static website, but they were less important to me.</p><ul><li><a href="https://blog.sqreen.com/static-websites-security/">Security</a> - With no JS &#x26; no servers there’s less to manage</li><li><a href="https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/">Tooling</a> - Static website generators are mature and customizable with large communities.</li><li><a href="https://www.slant.co/topics/2256/~best-static-website-hosting-provider">Hosting</a> - Static website hosting has also become very simple.</li><li>Few dependencies - no React, Vue, _.js to import</li></ul><p>Prior to the <a href="https://www.swyx.io/js-third-age/">Second Age of JavaScript</a>, many websites were static websites. The internet is more powerful and you have more choices.</p><h1>When shouldn’t your website be a static website?</h1><p>If your website will have data that changes dynamically, like Facebook.com or Office.com, your website probably should not be a static web app. In both of those cases, every user receives a slightly different HTML file from the server.</p><p>A lot of the modern web is not delivered as static web apps and there are good reasons for that!</p><p>Here are some application types that are typically harder to implement as static web apps</p><ul><li>Storefronts</li><li>Social Media</li><li>Login Pages</li><li>Productivity Tools</li><li>Games</li></ul><p>There’s a theme to this list: it would be impossible to list every HTML page. That is, if Facebook had to statically generate the HTML pages necessary for every user who visits the site, they couldn’t do it! There are an infinite number of ways to view the data on Facebook. Facebook must generate a new HTML page whenever a specific user visits a specific page.</p><h1>Next Time</h1><p>In the next post, we’ll talk about the tooling I used and how you can get started. If this post was a why and a what, next time we’ll do “which and how.”</p><ul><li><a href="https://gohugo.io/">Hugo</a> - Static Site Generator</li><li><a href="https://github.com/features/actions">Github Actions</a> - Build &#x26; Deploys the Hugo Site to Azure Static Website</li><li><a href="https://azure.microsoft.com/en-us/services/app-service/static/">Azure Static Web Apps</a> - Hosts the website</li><li><a href="https://azure.microsoft.com/en-us/services/frontdoor/">Azure Frontdoor</a> - Additional caching &#x26; domain management</li></ul>


The considerations that go into building a static web app.

Sam Broner

Software in NYC & Online

Posts about Software