<p>I had heard quite a bit about Snowpack, first as a faster build tool, but later as part of a larger toolchain ecosystem. So I went to <a href="https://www.snowpack.dev/#get-started">https://www.snowpack.dev/#get-started</a> to get started.</p>
<p>I had talked with my friend @FKS after hearing about the library. I was particularly interested in how Snowpack and Skypack could be used to make the explicit dependency model in the Fluid Framework easier to reason over and easier to develop. I also suspected it would speed up our developer inner loop, which is currently affected by some classic monorepo sluggishness. (<a href="https://twitter.com/CurtisCCMan">Curtis Man</a> even made us our own <a href="https://github.com/microsoft/FluidFramework/tree/main/tools/build-tools">“build:fast”</a> command, which may seem like overkill but works quite nicely).</p>
<h2>Getting Started</h2>
<p>The create-snowpack-app is very good. I decided to start with the @snowpack/app-template-blank-typescript because I <a href="https://twitter.com/SamBroner/status/1329789543827038209">vastly prefer typescript</a>.</p>
<pre><code class="hljs language-bash">npx create-snowpack-app snowpack-test --template @snowpack/app-template-blank-typescript</code></pre>
<p>I was sitting in my kitchen, which has relatively slow WiFi speeds, but the install was reasonable and the CLI dialogue was useful. Success. Hello World!</p>
<div class="imageGallery">
    <div class="two">
        <img  src="/posts/snowpack-fluid/Hello-World.png">
        <img src="/posts/snowpack-fluid/CLI.png">
    </div>
    <p> Heeelloooo World! </p>
</div>
<p>So what do we get?</p>
<p>The directory structure is somewhat bare. We have a src/index.ts which fetches a div from the root index.html file; a public with html, css, etc; and a decent number of configuration files.</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img class="third" src="/posts/snowpack-fluid/file-explorer.png">
    </div>
    <p>Neat</p>
</div>
<p>There’s also a curious /types folder, which I hadn’t seen in other create-react-app style templaters, but seems designed to let me extend .d.ts files natively or import common file types natively instead of using webpack style plugins.</p>
<pre><code class="hljs language-typescript"><span class="hljs-comment">/* Use this file to declare any custom file extensions for importing */</span>
<span class="hljs-comment">/* Use this folder to also add/extend a package d.ts file, if needed. */</span></code></pre>
<p>I think this could use some documentation because it felt like an unusual solution to pre-type common file types. I could see these typings being useful in the snowpack scenario. All dependencies get imported individually, so Snowpack better assume that we’ll use <a href="https://webpack.js.org/loaders/css-loader/">css-loader</a> style semantics! A quick google makes this clear.</p>
<blockquote>
<p>“Snowpack supports basic CSS imports inside of your JavaScript files. When you import a CSS file via the import keyword, Snowpack will automatically apply those styles to the page. This works for CSS and compile-to-CSS languages like Sass &#x26; Less.”</p>
<p><a href="https://www.snowpack.dev/">https://www.snowpack.dev/</a></p>
</blockquote>
<p>In fact, Snowpack supports the following file types by default. Although I could have used some clearer documentation, this is in line with the type definitions from the .d.ts file and makes sense to me.</p>
<ul>
<li>JavaScript (.js, .mjs)</li>
<li>TypeScript (.ts, .tsx)</li>
<li>JSX (.jsx, .tsx)</li>
<li>CSS (.css)</li>
<li>CSS Modules (.module.css)</li>
<li>Images (.svg, .jpg, .png, etc.)</li>
</ul>
<p>The tsconfig file does make some of this clear. It imports the src and types directories. It references an unusual directory, “web_modules,” as a path.</p>
<pre><code class="hljs language-json"><span class="hljs-string">"paths"</span>: { <span class="hljs-attr">"*"</span>: [<span class="hljs-string">"web_modules/.types/*"</span>] }</code></pre>
<p>A quick google tells me this is an alternative nomenclature for node_modules, although it seems extra relevant because I know about <a href="https://www.skypack.dev/">Skypack</a>, Snowpack’s <a href="https://www.npmjs.com/">npmjs-like</a> (<a href="https://unpkg.com/">unpkg-like</a>?) cousin. Paths is a way of indicating where certain files should be looked up from. I expected that web_modules would be created when I ran <code>npm run build</code>. It turns out web_modules is created, but it’s hiding in the build directory.</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img class="third" src="/posts/snowpack-fluid/file-explorer-build-dir.png">
    </div>
</div>
<p>These files are all accessible from the dev server on <code>npm run start</code> e.g. I can see the canvas-confetti.js file at http://localhost:8080/web_modules/canvas-confetti.js This makes sense.</p>
<p>Even for a such a simple project the <code>npm start</code> felt unusually snappy although I didn’t do any experiments, but if we can trust the CLI, it says that <code>npm start</code> in the “Hello World” template typically build in 1-2 milliseconds (in watch mode.)</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/zero-errors.png">
    </div>
    <p> 2ms!! </p>
</div>
<p>Before we get started moving the <a href="https://github.com/microsoft/FluidHelloWorld">@fluid-example/hello-world</a> to this folder, I did want to examine the snowpack.config.js file and the extension model.</p>
<h2>Extensions &#x26; Plugins</h2>
<p>The @fluid-example/hello-world uses HtmlWebpackPlugin by default to bind in HTML and the ts-loader to compile Typescript. Based on our earlier examination of the .d.ts and our assumptions about imports, I assume we don’t need to install an HTML parsing plugin. I couldn’t find documentation specifically indicating this, but the Snowpack.config.js file does use the mount keyword and reference a few folders. I assume there’s some automagic happening here to pull in the HTML.</p>
<p>The snowpack.config.js <em>does</em> include the <code>@snowpack/plugin-typescript</code> plugin. This feels pretty natural and a quick google says there’s a bunch of plugins. Many of them are <a href="https://www.snowpack.dev/plugins">officially supported</a>. Very convenient having spent some time finagling community supported webpack plugins. I also like that “plugins” can <a href="https://www.snowpack.dev/guides/connecting-tools#connect-any-other-script%2Fcli-using-plugin-run-script-and-plugin-build-script">just be CLI commands</a> (This is worth digging into, but it allows you to use tools like postcss, eslint, etc directly from snowpack!). That feels like an obviously useful syntax for ad hoc definition of plugins.</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/Snowpack-Plugins.png">
    </div>
</div>
<p>I took a quick glance at the <a href="https://www.snowpack.dev/#config-files">documentation</a> for snowpack.config.js. It seems like there’s a decent amount that can be done here, but I didn’t take the time to understand it. I’m curious about the install, proxy, and alias configurations in particular. I can’t immediately imagine what I’d want to install at the snowpack level rather than the npm level, but this may be my misunderstanding of what’s actually going on under the hood. Either way, the template I used leaves most of these blank except <code>mount</code> and <code>plugins</code> as previously described.</p>
<p>With my preliminary understanding intact, I started porting over the Fluid Hello World. Step 1, install dependencies. Nothing to see here, this worked as expected. Next up… copy and paste the typescript files in. While we have previously done some weird things with the tsconfig, the template tsconfig and Fluid Hello World tsconfigs are pretty aligned. So I figure this should work.</p>
<p>And it mostly does seem to work. Snowpack does a much better job handling <strong>new</strong> files than webpack does. Webpack dev server always seemed to break when new files were added to the src code.</p>
<p>My only errors are around importing types, which we do <strong>a lot</strong>. It seems like I could modify the importsNotUsedAsValues flag in the tsconfig or just be more explicit in my imports. I chose the latter and resolved the five errors.</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/type-errors.png">
    </div>
    <p> 2ms!! </p>
</div>
<p>Errors resolved, I’m not quite out of the gate. I’m mishandling a dependency from <a href="https://fluidframework.com/apis/aqueduct/"><strong>Aqueduct</strong></a>. Aqueduct is Fluid’s convenience library (get it 😉?)</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/aqueduct-error.png">
    </div>
</div>
<blockquote>
<p>I know it's becoming standard, but I <em>do</em> like this error dialogue. While we’ll have to see how clear the instructions are, the error and source are both clear, I can click through the possible errors, and I <strong>can clear the error</strong> dialogue! What a feature! If I click the X, I see the default HTML of the page.</p>
</blockquote>
<p>I’m also getting a <em>ton</em> of polyfill errors. This is a known usability issue with Fluid and one that we’re addressing. Snowpack made the resolution <a href="https://www.snowpack.dev/#node.js-polyfills">pretty easy</a>, although I still had lingering issues with assert. Luckily <a href="https://twitter.com/christiango">@christianGo</a> just fixed this last month and an upgrade to 0.29 Fluid libraries resolved the issue.</p>
<p>With all CLI and pop up errors gone, I tried to load again and hit a pernicious issue with our nifty <a href="https://github.com/microsoft/FluidFramework/blob/0076d7e0c23fffcf5f6df042a1f49a6838c1b111/common/lib/common-utils/src/typedEventEmitter.ts">TypedEventEmitter</a> binding to scope. For some reason, the parent here doesn’t have the <code>off</code> parameter, so binding it to my scope fails.</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/polyfill-binding.png">
    </div>
</div>
<p>Interestingly, I could try to catch and ignore this error because <code>off</code> <a href="https://nodejs.org/api/events.html#events_emitter_off_eventname_listener">is just an alias for removeListener</a>. My guess is this is an artifact from the polyfill and a quick google <a href="https://github.com/ionic-team/rollup-plugin-node-polyfills/issues/8">confirms this</a>. I <a href="https://github.com/ionic-team/rollup-plugin-node-polyfills/pull/18">opened a PR</a> with a solution, but saved the polyfill locally to continue on with the experiment.</p>
<pre><code class="hljs language-bash">npm install --save-dev ~/Code/rollup-plugin-node-polyfills</code></pre>
<p>And imported the rollup plugin from my dev dependencies.</p>
<pre><code class="hljs language-javascript"><span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">mount</span>: {
    <span class="hljs-attr">public</span>: <span class="hljs-string">'/'</span>,
    <span class="hljs-attr">src</span>: <span class="hljs-string">'/_dist_'</span>,
  },
  <span class="hljs-attr">plugins</span>: [<span class="hljs-string">'@snowpack/plugin-typescript'</span>],
  <span class="hljs-attr">install</span>: [<span class="hljs-comment">/* ... */</span>],
  <span class="hljs-attr">installOptions</span>: {
    <span class="hljs-attr">installTypes</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">rollup</span>: {
      <span class="hljs-comment">// @ts-ignore</span>
      <span class="hljs-attr">plugins</span>: [<span class="hljs-built_in">require</span>(<span class="hljs-string">'rollup-plugin-node-polyfills'</span>)(
        {
          <span class="hljs-attr">events</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">url</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">assert</span>:<span class="hljs-literal">true</span>,
          <span class="hljs-attr">querystring</span>: <span class="hljs-literal">true</span>,
       }
      )],
    },
  },
  <span class="hljs-attr">devOptions</span>: {<span class="hljs-comment">/* ... */</span>},
  <span class="hljs-attr">buildOptions</span>: {<span class="hljs-comment">/* ... */</span>},
  <span class="hljs-attr">proxy</span>: {<span class="hljs-comment">/* ... */</span>},
  <span class="hljs-attr">alias</span>: {<span class="hljs-comment">/* ... */</span>},
};
</code></pre>
<p>Now past the initial polyfill issue, I quickly hit another. This time, my global variable is undefined in the buffer polyfill. Jeeze!</p>
<div class="imageGallery" style="width:100%">
    <div class="one">
        <img src="/posts/snowpack-fluid/global-error.png">
    </div>
</div>
<p>While I am generally curious why I’m hitting this issue, at this point I’m eager to get my familiar Fluid Hello World up and running, so I hard coded <code>const global = {}</code>, which would bypass the error message.</p>
<h2>Review</h2>
<p>All up... I was impressed and interested. I think there's DEFINITELY room for innovation on build tools that use ESModules more clearly.</p>


Trying out Snowpack with Fluid Framework's Hello World

<p><strong>So you want to deploy a website. Where should you start?</strong></p>
<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>
<h2>Should your website be a static website?</h2>
<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>
<h2>When shouldn’t your website be a static website?</h2>
<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>
<h2>Next Time</h2>
<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>


Static Websites: Why and What

<p>I help <a href="https://superkidsfoundation.org/">The Superkids Foundation</a>, a Paraguayan non-profit, manage its finances. This is a fairly tricky problem! We do not have a Paraguayan bank account, Paraguayan receipts are inconsistent, and transactions are almost entirely in cash. Not to mention, I don’t speak Spanish and I live in Seattle! I can’t read the receipts or talk directly to our amazing staff!</p>
<p>While there are a bunch of interesting places I have injected technology, we'll go over just one issue in this post: how do we track receipts without adding <strong>any</strong> overhead.</p>
<p>We came up with a system that leverages our existing tools, Google Sheets, phone cameras, and WhatsApp, but integrates with <a href="https://www.twilio.com/">Twilio</a> and the Google API to make our receipts auditable, discoverable, and accessible.</p>
<h2>What is Superkids?</h2>
<p>Outside of my work for Microsoft, I am the treasurer of the board of The Superkids Foundation. Superkids helps mobilize children as agents of change in their own communities. We train and mentor kid teachers (SuperKids!) to give back to their own communities by helping younger students learn to read. In 2019, kid teachers spent more than 7,000 hours teaching younger students through our after school programs.</p>
<p>As the treasurer, I get to spend time working with our wonderful coordinators and my colleagues on the board while managing Superkids' cashflow. We have two coordinators and seven facilitators who work out of our rented space. To operate the space, we hire cleaners, pay for office supplies, utilities, maintenance and more. We also provide transportation, snacks, and other miscellaneous goods to the kid teachers and our students.</p>
<p>Among other things, I monitor donations (from FB, PayPal, Direct, Corporate Match, etc), process and audit receipts, approve bankroll, approve marketing, and gather financial data for grants.</p>
<h2>What we did before</h2>
<p>Superkids uses Google Sheets for accounting and WhatsApp for communication. We track all of our Income &#x26; Expenses and our cash on hand against our yearly and bimonthly budgets. If you dove into our 2019 “Contabilidad” (Accounting), we had the following.</p>
<ul>
<li>“Resumen” - (Summary)</li>
<li>“Efectivo” - (Cash)</li>
<li>“Presupuesto Enero Febrero” - (Budget January February)</li>
<li>“Ingresos y Gastos Enero Febrero” - (Income and Expenses January February)</li>
<li>“Presupuesto Marzo Abril” - (Budget March April)</li>
<li>“Ingresos y Gastos Marzo Abril” - (Income and Expenses March April)</li>
<li>...</li>
</ul>
<p>Receipts were put into a WhatsApp chatt and the expenses were added to the Efectivo.</p>
<h2>The Problem</h2>
<p>By the end of business each day, every receipt had to be photographed and all expenses had to be put in the Efectivo. To audit this process, someone would need to look through all the WhatsApp history and compare the receipts to the Efectivo line items.</p>
<p>This was never going to happen! It was impossible to track and hard to use. It was too easy for us to misplace a receipt and be slightly off at</p>
<h2>The Solution</h2>
<p>A <a href="https://www.twilio.com/blog/build-whatsapp-bots-twilio-autopilot">WhatsApp bot</a> ("SuperAuditor") that receives incoming images and puts them directly into our monthly Efectivo. The rest of line item can then be filled based on the information in the receipt. By the end of the day, receipts should line up with cash on hand.</p>
<p>I was worried that we'd have duplicate photos or that the number would get spam. Luckily it's much easier (and more satisfying) to delete a line item than to chase down all the staff for receipts.</p>
<p>Twilio's generous <a href="https://www.twilio.org/benefits/">non-profit stipend</a> has made WhatsApp bot free for our non-profit. Google's API is always free at the scale we're operating at.</p>
<h2>Follow up</h2>
<p>If there's interest, I'll spend some time making the code easier to use and share it out!</p>


International Auditing on a Budget: Auditing a Paraguayan Non-Profit

<p>There’s a small art gallery nestled between an alright Thai place and a yuppy cupcake shop in
Seattle’s Capitol Hill. The pieces are amazing shattered glass, perfectly reconfigured. I figured I
should try it.</p>
<p>Here’s my first attempt alongside Cassandria Blackmore’s excellent work.</p>
<div class="imageGallery">
    <div class="two">
        <img src="/posts/shattered-glass-1/image1.png">
        <img src="/posts/shattered-glass-1/image2.png">
    </div>
    <p> Guess which is which? </p>
</div>
<p>After a few attempts, I engineered something a bit more respectable. I’ll keep iterating on this, but I
don’t think I’ll quite replicate Cassandria. I’ll just have my own “inspired”
style.</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image6.png">
    </div>
</div>
<h2>Attempt #1</h2>
<h5>Maybe it'll work?</h5>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image1.png">
    </div>
</div>
<p>I went to the local Blick and bought some reasonable seeming supplies.</p>
<ul>
<li>.5” Foam Board</li>
<li>Acrylic Paint</li>
<li>Acrylic Medium (glueish stuff?)</li>
<li>Picture frame glass</li>
</ul>
<p>I figured I could paint the glass, then use the Acryclic Medium to glue the glass to the board. A quick
shatter, and I’d be done.</p>
<p>Each step of this was harder than expected.</p>
<p>Because the unpainted glass faces the viewer, the first layer of paint is the most obvious. I had some <strong>ugly</strong> early attempts.</p>
<p>Acrylic Medium is a bad glue for this job. The shattered glass is basically pulling itself off the Foam Board.</p>
<p>Most importantly, picture glass is <strong>not</strong> what Cassandria uses! It shatters into shards, not the glittering fragments pictured above.</p>
<h2>Attempt #2</h2>
<h5>Figure out the glass</h5>
<p>What glass shatters into a million pieces? Car glass! That is... tempered glass. Tempered glass is regular glass that is heat treated to give it opposing compression and tension. To simplify, a piece of tempered glass is strong while intact, but, once broken, the opposing forces rip the glass apart.</p>
<p>So I went on Craiglist and found some old tempered glass shelves to
destroy!</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image7.png">
    </div>
</div>
<p>This worked much better. The tempered glass creates the pattern we’re
looking for.</p>
<p>I used the leftover paint and some left over cardboard and substituted our new glass. Everything worked, but
shattering tempered glass is hard (and <strong>dangerous</strong>.) I had to really hammer the corner
for this to work.</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image8.png">
    </div>
    <p>Pictured: An idiot (me) wearing non-protecting sunglasses and sound canceling headphones.</p>
</div>
<p>At this point, issues with the cardboard became obvious. My tempered glass was pretty heavy and without the rigidity of the glass or foamboard, the pieces flopped apart.</p>
<p>At this point though, I thought I should focus on the paint.</p>
<h2>Attempt #3</h2>
<h5>Focus on the paint</h5>
<p>I watched like 30 videos on how to blend paint. They all intend for the blended paint to be seen from the
painted side of the piece (we need the other side to look blended.) It turns out this wasn’t much harder,
but I had to use a sponge to scrub the paint off the glass repeated in order to get a consistent blend.</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image5.png">
    </div>
</div>
<p>It still didn’t quite work, but closer.</p>
<p>I also added safety glasses, earplugs, gloves, shoes (not pictured), and wrapped the glass in trash bags.</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image4.png">
    </div>
    <p>You can hear the tempered glass continue to pull itself apart!</p>
</div>
<p>At this point, the foam board became a problem. It’s too thick to fit into a normal frame and it’s
still not rigid enough. Also, my hacked Acrylic Medium &#x26; Glue still didn’t really hold up. You can see
the edges crumbling away.</p>
<div class="imageGallery">
    <div class="one">
        <img src="/posts/shattered-glass-1/image3.png">
    </div>
    <p>You can hear the tempered glass continue to pull itself apart!</p>
</div>
<h2>Attempt #Next</h2>
<h5>Tie it all together</h5>
<p>I’ll be trying this again in the coming weeks. I believe I’ll need these supplies.</p>
<ul>
<li>Tempered Glass</li>
<li>Stiff Sheet Metal (Backing Board)</li>
<li>Good Epoxy Glue</li>
<li>A Drill</li>
<li>Safety Equipment</li>
<li>More space</li>
</ul>
<p>With a drill, I can break the glass more accurately and without throwing out my shoulder.
Hopefully the metal sheet will be stiff enough and thin enough to put the combined piece in a frame. I’m
also hoping the epoxy will bind better. In all my prior attempts there were still fragments falling off.</p>
<p>We’ll see!</p>


Shattered Glass

<p>Here's a little blog I put together. I built the website myself during the quarantine to post about a few projects.</p>
<p>Appologies if it's broken: I'm having fun.</p>


Sam Broner

Software Engineer in Seattle & NYC

About

Contact

Tags

Posts