<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Joe Czubiak]]></title><description><![CDATA[Joe is a developer, technologist, and indie hacker amongst many things. He writes about thoughts, projects, and tutorials.]]></description><link>https://joeczubiak.com/</link><image><url>https://joeczubiak.com/favicon.png</url><title>Joe Czubiak</title><link>https://joeczubiak.com/</link></image><generator>RSS for Node</generator><lastBuildDate>Thu, 29 Feb 2024 01:00:54 GMT</lastBuildDate><atom:link href="https://joeczubiak.com/rss/" rel="self" type="application/rss+xml"/><item><title><![CDATA[How to rename a widely used model in Laravel]]></title><description><![CDATA[Code is messy, language is messy, and sometimes you want to rename a model in a codebase that a team has sunk years into...for consistency's sake. Doing a quick find and replace isn't enough in this case...]]></description><link>https://joeczubiak.com/how-to-rename-a-widely-used-model-in-laravel/</link><guid isPermaLink="false">9bfa89d3-56aa-5a13-b6af-02f24189cb9e</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 28 Feb 2024 00:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/9966dec62dbf39d0d8edef06a8c04b59/find-and-replace-screenshot.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/9966dec62dbf39d0d8edef06a8c04b59/find-and-replace-screenshot.png"/><p>Code is messy, language is messy, and sometimes you want to rename a model in a codebase that a team has sunk years into...for consistency's sake.</p>
<p>Once a codebase hits a certain size or has multiple active participants, it becomes unrealistic to make sweeping changes like these. These types of sweeping changes inevitably run into problems. An all of nothing approach on this scale can lead to hefty merge conflicts, a massive PR that is hard to review and test, or a feature branch that starts diverging heavily from the main trunk and becomes hard to maintain.</p>
<p>A more manageable approach to a large change like this, is to break it into smaller pieces that can merge into the main trunk while keeping the project in a working state.</p>
<p>Doing a quick find and replace isn't enough in this case, as there are some tricky places our model's name might live.</p>
<ul>
<li>
<p>Database relationship columns may be referencing the model name, think <code>{model}_id</code>, <code>user_id</code>, <code>team_id</code> etc.</p>
<ul>
<li>Quick Tip: If you're using MySQL, you can find all tables referencing the model's name in your database using the following query. <code>SELECT table_name, column_name FROM information_schema.columns WHERE column_name LIKE '%model_name%;</code></li>
</ul>
</li>
<li>Database indexes may be referencing the same fields.</li>
<li>Polymorphic relationships in the database may be referencing the model name.</li>
<li>The model may be serialized in the database or used in our queues.</li>
</ul>
<p>In this example, we'll be renaming a Team model to Organization in a Laravel codebase.</p>
<p>To keep the project in a working state, while introducing the new name, we'll take advantage of a PHP built in function, <a href="https://www.php.net/manual/en/function.class-alias.php">class_alias</a>. This will allow both the old model name and the new one to be used in parallel.</p>
<h2>Add an alias</h2>
<p>We could use the <code>class_alias</code> function directly, in somewhere like the boot method of our AppServiceProvider, but Laravel provides a way to add aliases in the app config. So we'll stick to conventions here.</p>
<p>In <code>configs/app.php</code>, look for <code>aliases</code> and add an alias from the old model to the new model.
It should look something like this.</p>
<pre><code class="language-php">'aliases' => Facade::defaultAliases()->merge([
...
'App\Models\Team' => 'App\Models\Organization',
])->toArray(),
</code></pre>
<p>This is where Laravel is loading all of the facades. Under the hood, it is using the PHP function, class_alias.</p>
<h2>Update the model</h2>
<p>Rename the Team model to Organization — both the file and class name.</p>
<p>We aren't writing any migrations today and to keep the code running, we need to override some of the Laravel auto table name and foreign key features. We want the model's table name to point to the existing table and relationships to use the existing columns in our database.</p>
<p>Add the table property to the model.</p>
<pre><code class="language-php">protected $table = 'teams';
</code></pre>
<p>Override the default getForeignKey function in the model.</p>
<pre><code class="language-php">public function getForeignKey()
{
return 'team_id';
}
</code></pre>
<h2>Update morph maps</h2>
<p>Morph maps are aliases used to reference a class in our database without using the actual class path in the database. This could mean using 'Team' instead of 'App\Models\Team'. You'll most commonly see these used for polymorphic relationships but they could be used for other things as well.</p>
<p>We need to allow the value that is used in the database to remain the same while mapping to our new model.</p>
<p>In the morph map, change from: <code>'Team' => Team::class</code> to: <code>'Team' => Organization::class</code>.</p>
<pre><code class="language-php">Relation::enforceMorphMap([
'Team' => Organization::class`
])
</code></pre>
<p>Both <code>(new Team())->getMorphClass()</code> and <code>(new Organization())->getMorphClass()</code> should now return 'Team'.</p>
<h2>Using the alias</h2>
<p>After these steps, our app should be in a working state, only now, we can use both model names interchangeably. References to both Team and Organization will work.</p>
<p>From here we can chip away at updating our codebase and database to use the new name in bite sized bits. This lets us keep the codebase moving in the direction we want to go, without putting a stop to everything else.</p>
<p>The downside of course, is that we now have two ways to reference the same model, making things a little confusing in the interim. So don't sleep on the rest of the work.</p>
<p>Consistency...here we come.</p>]]></content:encoded></item><item><title><![CDATA[Into the Dust Cloud]]></title><description><![CDATA[Pack the car. Fill up on gas. Grab ice from the store. And hit the road. The getting away part of getaways is the hardest part. We were headed to Sequoia National Park from Los Angeles. It should be an uneventful drive through California's Central Valley.]]></description><link>https://joeczubiak.com/into-the-dust-cloud/</link><guid isPermaLink="false">07446d62-025f-5015-9666-83c8b92c4026</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Fri, 31 Dec 2021 00:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/09204c0472ed3a0c8d3ecec1fda8daf9/car-on-mountain-road.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/09204c0472ed3a0c8d3ecec1fda8daf9/car-on-mountain-road.jpg"/><p>Pack the car. Fill up on gas. Grab ice from the store. And hit the road.</p>
<p>The getting away part of getaways is the hardest part. We were headed to Sequoia National Park from Los Angeles. The drive to our campsite is an easy 4 hours. Take the 5 to the 99, and drive a winding road into the mountains. It should be an uneventful drive through California's Central Valley.</p>
<p>Shortly after taking the 99, Google Maps suggested that we get off and take a two-lane road the rest of the way. It's the quickest route possible, shaving off a few minutes. Still in our city life mindset — we obliged. The road made its way through central valley farmland. It was relatively fast going, we drove over 60mph the whole way. Cars bunched together from one car going a little slow and nowhere to allow cars to pass. Cars coming the other way were frequent with semi-trucks intermixed. The air from passing trucks was powerful enough to swerve the car and I quickly learned to drift right as cars were coming.</p>
<p>The lineup of cars we were in was long. There was some space between me and the cars on either side but not in abundance. Drought-stricken California left no green to be seen and made me ponder The Dust Bowl. Tractors and trucks worked to prepare empty dirt fields. We approached one such dirt field with a truck dragging something through the field. Dust billowed in a trail behind it. The breeze blew the dust the few yards it took to cross the fence and enter the road. It looked ominous but fleeting. The car in front of us entered and disappeared. </p>
<p>We drove into the dust cloud. We could no longer see the road, let alone the front of our car. I expected it to end as soon as it started but the seconds started to pass. Each second felt like a minute — our safety hanging in limbo. The number of thoughts you can have in a matter of seconds is remarkable. Am I still in my lane? I think I would hit bumps on the road if I veered too far off. Should I slow down? The car behind us might hit us. Did the person in front of us slow down? The seconds drew on, long enough to voice these questions out loud.</p>
<p>In the end, I did nothing. I kept driving and held the wheel straight. After several coursing seconds, we made it out. It was one of the closest calls I've had driving and yet no adrenaline spiked and no quick maneuvers were made. Only the realization after, just how dangerous that had been.</p>]]></content:encoded></item><item><title><![CDATA[NFTs beyond art — 3 uses with real utility]]></title><description><![CDATA[Nifty art has little utility beyond being able to display it in somewhat obscure virtual worlds. Some say to buy them for bragging rights, because owning things feels good, or to start a collection.]]></description><link>https://joeczubiak.com/nfts-beyond-art-3-uses-with-real-utility/</link><guid isPermaLink="false">2f6182c0-5894-5f5a-91bd-101ea2557a1b</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Thu, 11 Mar 2021 12:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/a86ff9d98bf1098312ba7a562053bbbd/nft-cover.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/a86ff9d98bf1098312ba7a562053bbbd/nft-cover.png"/><p>NFTs, Non-Fungible Tokens, have broken into the mainstream in the past few weeks. </p>
<p>Nifties, as some call them, are a way to prove ownership of a digital asset like a photo, illustration, or video using the blockchain. NFTs aren't a currency like BitCoin or Ethereum, they have no intrinsic value, the value of an NFT comes from the value of the actual asset that it represents. </p>
<p>The NFT markets have been skyrocketing and this excitement and energy is largely centered on NFT art. Digital art is being sold as NFTs. It usually comes in the form of a jpeg, gif, mp4, or other common image and video file formats. NFTs contain metadata and the metadata usually includes a link to the artwork, hosted elsewhere on the web. This means the artwork itself is not on the blockchain but the certificate of ownership, NFT, is on the blockchain or public ledger.</p>
<p>Because of this, if you want to use one of these pieces of art as your background image on your device, there's nothing in place to stop you. The file is public and anyone can right-click and download it just like any other image on the internet.</p>
<p><strong>So then why own NFT art?</strong> </p>
<p>Nifty art has little utility beyond being able to display it in somewhat obscure virtual worlds. Some say to buy them for bragging rights, because owning things feels good, or to start a collection. Maybe that resonates with you, maybe, like me, it doesn't. I'd say a lot of people are buying NFT art because they don't understand the speculation trap they've fallen into.</p>
<p>NFTs today, feel a lot like the crypto craze of 2018. The difference is that NFTs have no inherent value, are not a store of value, and there's no way to get your money out besides finding a buyer for your specific token.</p>
<p>The nifty art market is based on artificial scarcity, hype, and speculation. Artificial scarcity isn't enough to drive lasting value. Almost every article about NFTs mentions Crypto Kitties as an example of the power of artificial scarcity but they overlook the fact that the cats offered utility in that you could breed them and sell the offspring to others, for a profit. </p>
<h2>Beyond art</h2>
<p>While nifty art is getting all the attention, there are very practical use cases for NFTs that will outlast the art craze. </p>
<p>NFTs have two important traits that make them valuable tools. They are tradable on open markets and they prove ownership. Taking advantage of these traits to provide utility is where the real value of NFTs comes from. NFTs are not art. Art is just one type of asset that an NFT can represent and it's important to remember that.</p>
<p>These are a few of the real-world scenarios where NFTs could be game-changing.</p>
<h3>Tickets</h3>
<p>Tickets are a great use case for NFTs. Tickets to concerts, games, conferences, or other events and shows — both in person and online. In this case, there are already markets set up to sell your tickets to another person but they're fraught with uncertainty and fraud. Oftentimes, all you need is a barcode printed out or on your phone to get into an event. If you bought the ticket second-hand, which has become increasingly the only way due to a proliferation of bots buying tickets as soon as they go on sale, how can you be certain that they didn't sell the same barcode to someone else or several others? First one to arrive gets in and everyone else got scammed. That's not a good system.</p>
<p>There have been attempts to make physical tickets have holographic or otherwise hard to counterfeit traits but to a one time buyer I wouldn't know how to know if what I'm looking at is real or an elaborate fake.</p>
<p>This is what provability of ownership solves. With the NFT, you can see that the ticket originated from the official organization in charge of the event and there is no way for someone else to use the ticket. You can be sure that you didn't buy a fraudulent ticket and be sure that it will work to get in.</p>
<h3>Movies</h3>
<p>Movie ownership feels a little different than it used to. We used to own DVDs. They were ours and we could do what we wanted with them, permitting we weren't breaking laws. These days, if you click buy in iTunes, what do you get? You get the privilege to watch the movie from your account, in iTunes, and that's it. There's no transferability. You can't move that movie to Google Play or lend it to a friend because you didn't buy the movie. You bought a privilege to consume it through a service.</p>
<p>If digital movies instead used the NFT model, you would own a copy of the actual files and you could watch that movie through any service or player that you want. You could give it to a friend for the weekend. When you're tired of it, just like a good old-fashioned garage sale, you could sell it off.</p>
<p>I don't foresee large movie studios being at the forefront of this innovation, they are currently benefiting from this lopsided system. I would expect smaller studios and independents to be the driving force in this change.</p>
<h2>Game assets</h2>
<p>Have you ever bought in-game items? If you have, you've given money to the makers of the game, and in return, you get to use the item with your account in their game and that's it. If instead, you bought an NFT that represents a digital asset in the game, doors start to open. You could exchange your items on a public marketplace. You could show off the items you own on your blog. If you no longer play this game, you can sell off all of your items.</p>
<p>At first, it feels like all of the power is being given back to the users and the game makers are losing if they adopt NFTs. But, they won't lose if they adapt. NFTs create more reason to buy items and an ability for users to show off items which drives demand for more limited-run items. The switch to an NFT model creates a more thriving market and the ability for the game makers to produce more items to sell.</p>
<br/>
<br/>
<br/>
<p>There are so many more ways that NFTs can and are being used but just because they can be used, doesn't mean that you should. No article about crypto would be complete without including a mention of the environmental effects of using crypto, which is enormous. With such high environmental costs, NFTs should only be used when it offers real utility and value that is hard to obtain otherwise.</p>
<p>To understand the environmental costs, I'll send you to this article explaining them. <a target="_blank" rel="noopener noreferrer" href="https://everestpipkin.medium.com/but-the-environmental-issues-with-cryptoart-1128ef72e6a3">https://everestpipkin.medium.com/but-the-environmental-issues-with-cryptoart-1128ef72e6a3</a></p>]]></content:encoded></item><item><title><![CDATA[Box-Shadows]]></title><description><![CDATA[I've become mildly obsessed with box-shadows. When they are done well, they're magic. They provide depth, contrast, and clarity to the page. When done poorly, they're distracting. Let's dive into box-shadows.]]></description><link>https://joeczubiak.com/box-shadows/</link><guid isPermaLink="false">1cb72853-24ac-52b2-9f84-904ae1730680</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Thu, 25 Feb 2021 12:30:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/4474a61ee50c511b34ecaf764db8f538/box-shadows-cover.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/4474a61ee50c511b34ecaf764db8f538/box-shadows-cover.png"/><p>I've become mildly obsessed with box-shadows. When they are done well, they're magic. They provide depth, contrast, and clarity to the page. When done poorly, they're distracting. It's apparent to me that most shadows fall short of the magic. It's especially true when I try to apply my own handwritten CSS box-shadow to an element.</p>
<p><strong>What's behind a good box-shadow?</strong></p>
<p>I keep finding myself reaching for the shadows defined in Material Design. They are some of the only ones that I think really get it right. Most design frameworks provide their own version of a decent shadow but I find the concept and execution of elevations in Material Design resonates with me. They also have extensive <a href="https://material.io/design/introduction">design guidelines</a> that are worth reading.</p>
<p>I never understood why Material Design shadows are so good and when I make a shadow, it really doesn't look great. They come out too harsh or undefined and unprofessional. </p>
<p><strong>What's the math behind box-shadows?</strong></p>
<p>I see a lot of visual editors like WebFlow or box-shadow generators that give you controls for angle and distance, but angle and distance aren't CSS properties for box-shadow. So then, how do you get the x and y values from angle and distance? <em>Hint: trigonometry is involved.</em></p>
<p><strong>Why don't CSS generators produce good-looking shadows?</strong> </p>
<p>The quick answer is that most of them don't support layers and as you're about to learn, having multiple shadow layers is important.</p>
<p>I had these questions and one night my curiosity got the better of me. At least, I had hoped it would only be one night. It led me back to high school trigonometry and carried me through a weeks long journey into box-shadows. This journey involved building a <a href="https://shadows.joeczubiak.com">CSS Box-Shadow generator</a> myself and writing this article that keeps growing in scope. </p>
<p>Alas, here we are, let's get into it.</p>
<h2>CSS Box-Shadow</h2>
<p>Let's take a look at what the box-shadow CSS property is and the values it allows.</p>
<p><strong>Syntax:</strong> <code>box-shadow: x-offset y-offset blur-radius spread color outset/inset</code></p>
<p><strong>Example:</strong> <code>box-shadow: 0px 3px 2px 4px #000;</code></p>
<h3>Box-Shadow Values Explained</h3>
<p><strong>x-offset</strong> — This is the horizontal offset of the shadow. Higher values will move the shadow to the right like it is traversing the x-axis of a graph. Negative values will move the shadow to the left.</p>
<p><strong>y-offset</strong> — This is the vertical offset of the shadow. Higher values will move the shadow further below your object or down the page. Negative values will move the shadow higher vertically up the page. This is the opposite direction you might think of when looking at a graph with the y-axis.</p>
<p><strong>blur-radius</strong> — Higher values will increase the blurriness and also increase the size of the shadow leading the shadow to become lighter in color. This number can't be less than 0.</p>
<p><strong>spread</strong> — Higher values will increase the size of the shadow without causing any loss of sharpness.</p>
<p><strong>color</strong> — Specifies the color of the shadow.</p>
<p>* <strong>outset / inset</strong> — You can specify the box-shadow to be inset instead of the default outset. This will make the shadow appear inside of the object instead of outside of it. <em>This article is about outset shadows and won't touch on inset shadows</em>.</p>
<p>There's a little bit more to the box-shadow that I did not cover here and I encourage you to look it up elsewhere if you need to know more. This is a good basic understanding for us to use.</p>
<p><strong>The thing that isn't obvious while working with box-shadows is that you can specify multiple shadows on the same element. Simply, use commas to separate multiple values.</strong></p>
<h2>Angle and Distance</h2>
<p>It's very common to see the inputs <strong>angle</strong> and <strong>distance</strong> in visual editors such as WebFlow and they forgo the x and y offsets. You'll notice though that neither angle nor distance is one of the attributes defined above.</p>
<h3><strong>How do angle and distance translate to x-offset and y-offset?</strong></h3>
<p>To answer this, we need to dive into some trigonometry.</p>
<p>The x offset and y offset can be thought of as the x and y coordinates on a graph. Because of this, we can draw a right triangle on the graph from the center point. If you can remember back to your trigonometry days, right triangles are the very basis of the 6 fundamental trig functions. </p>
<p>I'm going to show you how to calculate the values forwards and reverse. From angle and distance to x and y and then from x and y to angle and distance.</p>
<h2>Math</h2>
<p>Take a look at this graph. We're going to use it as the basis for our calculations. </p>
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 82.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9ElEQVQ4y81U3aoxYRReM+82+wuZj2HMHuILEeVEPqQdORCRM0m5BPlNygG5GAduwCW4ATdkr7XMaNTWPti121NP87betZ71rJ8ZmM/ngBAI2TrDt57fShhBhBCx7xJ6EFHEf4TOxM8Iy+UyVCoVKBaL0Gq12CZJkk0kEIYFMga+LJlIms0m1Ot1mM1mTkK/pcrtUPqGkD8lnE6nbO/3+3C9XqHRaIj1ek2KXi0izUFkSzZcLtcjIaqQl8slk3BzPB7wer2QyWQUVVX/UZAQwvWkl1Q6xGKxGyGSsUJUAm63sxJQneXJsvxsOHqhUNCq1eofWCwWgMrEcDgUh8PBdlAQJq1CMpm8R6HCWxZVBcMwnEMy0um0gj2XuGfj8Zg9MQNY+0RkCikKhUK3RYtEuCQnOLOi3EtOpVIAx+MR9vu9ME1Tw55l0f7XThsMBmVUwjISiYQUj8cfYN+h0gj5chAOQcrlclo4HH7HoAIqorOh6zohjEFvqC5KZ7LboHv7rWlaFGfwQoDVakUQ9jJbSfhNe4iL/VoqlcxarUaK+c4JXky/H7rdLux2O4DJZEJ9FKPRiEnP5zOcTid2HgwGkM/n+Wtpt9scfLlc7rD9AoEA9Ho92G63wF8BrQ0Sy5vNBjqdzsNEs9ks4Epwr30+38//vj4Aas60aUiqVtEAAAAASUVORK5CYII='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/d3e7428858d9284f89bcc10020134121/ba381/trig-chart.webp 200w,
/static/d3e7428858d9284f89bcc10020134121/7f61c/trig-chart.webp 400w,
/static/d3e7428858d9284f89bcc10020134121/d00b9/trig-chart.webp 800w,
/static/d3e7428858d9284f89bcc10020134121/0528c/trig-chart.webp 1053w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp">
<source srcset="/static/d3e7428858d9284f89bcc10020134121/772e8/trig-chart.png 200w,
/static/d3e7428858d9284f89bcc10020134121/e17e5/trig-chart.png 400w,
/static/d3e7428858d9284f89bcc10020134121/5a190/trig-chart.png 800w,
/static/d3e7428858d9284f89bcc10020134121/34e70/trig-chart.png 1053w" sizes="(max-width: 800px) 100vw, 800px" type="image/png">
<img class="gatsby-resp-image-image" src="/static/d3e7428858d9284f89bcc10020134121/5a190/trig-chart.png" alt="Trig Chart" title="Trig Chart" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;">
</img></source></source></picture>
</span>
<p>The x and y coordinates are the x-offset and y-offset of the box-shadow properties. When you plot it onto a graph, like the graph shows, it creates a right triangle and the perfect setup for doing a little trigonometry. </p>
<p>If you understand trig or stare at this graph long enough you'll see how all the pieces fit together. When given the options of angle and distance instead of the x and y, we can see that the angle is angle A in the graph and distance is c or the hypotenuse of the triangle formed.</p>
<p>These are the two basic functions of trig and the two that we need for our calculations.</p>
<p><code>sin(x) = opposite/hypotenuse = a/c</code></p>
<p><code>cos(x) = adjacent/hypotenuse = b/c</code></p>
<h3>Angle and distance to x and y</h3>
<p>Angle and distance to x and y is the calculation that visual editors would use. We let the user pick an angle and distance and then we convert that into an x and y coordinate to use as the x-offset and y-offset in CSS. </p>
<p>We can use the functions defined above. </p>
<p>X in our case is the angle, we'll call it angle A as we can see on the graph. </p>
<p><code>a</code> is our y offset. </p>
<p><code>b</code> is our x offset.</p>
<p><code>c</code> is our distance.</p>
<p>In this case, we know the values of angle A and the distance, c. So we need to solve for <code>a</code> and <code>b</code>.</p>
<p>We will need to use both the sin and the cos functions. Sine will give us <code>a</code>, our y, and Cosine will give us <code>b</code>, our x.</p>
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 82.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9ElEQVQ4y81U3aoxYRReM+82+wuZj2HMHuILEeVEPqQdORCRM0m5BPlNygG5GAduwCW4ATdkr7XMaNTWPti121NP87betZ71rJ8ZmM/ngBAI2TrDt57fShhBhBCx7xJ6EFHEf4TOxM8Iy+UyVCoVKBaL0Gq12CZJkk0kEIYFMga+LJlIms0m1Ot1mM1mTkK/pcrtUPqGkD8lnE6nbO/3+3C9XqHRaIj1ek2KXi0izUFkSzZcLtcjIaqQl8slk3BzPB7wer2QyWQUVVX/UZAQwvWkl1Q6xGKxGyGSsUJUAm63sxJQneXJsvxsOHqhUNCq1eofWCwWgMrEcDgUh8PBdlAQJq1CMpm8R6HCWxZVBcMwnEMy0um0gj2XuGfj8Zg9MQNY+0RkCikKhUK3RYtEuCQnOLOi3EtOpVIAx+MR9vu9ME1Tw55l0f7XThsMBmVUwjISiYQUj8cfYN+h0gj5chAOQcrlclo4HH7HoAIqorOh6zohjEFvqC5KZ7LboHv7rWlaFGfwQoDVakUQ9jJbSfhNe4iL/VoqlcxarUaK+c4JXky/H7rdLux2O4DJZEJ9FKPRiEnP5zOcTid2HgwGkM/n+Wtpt9scfLlc7rD9AoEA9Ho92G63wF8BrQ0Sy5vNBjqdzsNEs9ks4Epwr30+38//vj4Aas60aUiqVtEAAAAASUVORK5CYII='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/d3e7428858d9284f89bcc10020134121/ba381/trig-chart.webp 200w,
/static/d3e7428858d9284f89bcc10020134121/7f61c/trig-chart.webp 400w,
/static/d3e7428858d9284f89bcc10020134121/d00b9/trig-chart.webp 800w,
/static/d3e7428858d9284f89bcc10020134121/0528c/trig-chart.webp 1053w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp">
<source srcset="/static/d3e7428858d9284f89bcc10020134121/772e8/trig-chart.png 200w,
/static/d3e7428858d9284f89bcc10020134121/e17e5/trig-chart.png 400w,
/static/d3e7428858d9284f89bcc10020134121/5a190/trig-chart.png 800w,
/static/d3e7428858d9284f89bcc10020134121/34e70/trig-chart.png 1053w" sizes="(max-width: 800px) 100vw, 800px" type="image/png">
<img class="gatsby-resp-image-image" src="/static/d3e7428858d9284f89bcc10020134121/5a190/trig-chart.png" alt="Chart" title="Chart" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;">
</img></source></source></picture>
</span>
<p>If we rearrange the functions they will look like so.</p>
<p>cos(A) * c = b</p>
<p>cos(A) * distance = y</p>
<p>sin(A) * c = b</p>
<p>sin(A) * distance = x</p>
<p><strong>Using real numbers</strong></p>
<p>angle = 70</p>
<p>distance = 9</p>
<p>sin(70) * 9 = x</p>
<p>3.08= round down to 3 = x</p>
<p>cos(70) * 9 = y</p>
<p>8.45= round to 8 = y</p>
<p>(x, y) = (3, 8)</p>
<h3>x and y to angle and distance</h3>
<p>This is the calculation to take the x-offset and y-offset from our CSS values and convert it to an angle and distance that we could show to a user in a visual editor.</p>
<p><code>a</code> is our y offset. </p>
<p><code>b</code> is our x offset.</p>
<p>In this case, we know the <code>a</code> and <code>b</code> values and we need to solve for angle A and distance.</p>
<p><strong>Distance</strong></p>
<p>We know that distance is <code>c</code> and <code>c</code> can be calculated using good old Pathagoreum's theorem. <code>a^2 + b^2 = c^2</code>. </p>
<p>distance = <code>c = sqrt(a^2 + b^2)</code></p>
<p><strong>Angle</strong></p>
<p>To find the angle, we need to do the inverse of the previous calculations, we need to use inverse sine, arcsin, or inverse cosine, arccos. We can use either arcsin or arccosine because we know the values of each of the sides of the triangle.</p>
<p>We can take the inverse of our function from before and solve for the <code>A</code> in <code>sin(A)</code>. </p>
<p><code>A = arcsin(a/c)</code> or in our terms <code>Angle = arcsin(x/distance)</code>.</p>
<p><strong>Using real numbers</strong></p>
<p>We'll use the values we calculated from our angle and distance.</p>
<p>x = 3</p>
<p>y = 8</p>
<p>End result should give use <code>angle = 70</code> and <code>distance = 9</code> because those were the values that we used above.</p>
<p>distance = sqrt(8^2 + 3^2) = sqrt(64 + 9) = sqrt(73) = 8.54 = round to 9</p>
<p>angle = arcsin(8/sqrt(73)) = 69.44 = round up to 70</p>
<p>That's it, that's how it's calculated. Not too bad if you think about it for a minute.</p>
<p>These calculations need to be done in radians. If none of the math worked for you, it's likely because your calculator is in degrees mode and you need to flip it to radians.</p>
<p>I built this quick calculator tool that you can use to test your math or inspect to see how it might be done in javascript.</p>
<iframe height="533" style="width: 100%;" scrolling="no" title="Box-Shadow Calculator" src="https://codepen.io/joecz/embed/xxEmXKP?height=533&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/joecz/pen/xxEmXKP">Box-Shadow Calculator</a> by Joe Czubiak
(<a href="https://codepen.io/joecz">@joecz</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
<h2>What makes a box-shadow great</h2>
<p>Color and opacity, layers, and angle and distance are the three critical parts needed to make a great natural shadow. Get all three right there's no shadow you won't be able to conquer.</p>
<h3>Color & Opacity</h3>
<p>When creating a shadow by hand, the shadow often appears too dark. A couple of ways that you might be tempted to mitigate this is to change the color to something less black and more gray, off-white, etc. The other attribute you might reach for is the blur. Crank up the blur and it will make the shadow appear less dark and sharp due to the lack of concentration the blur provides. </p>
<p>These strategies might get the job done but it's sloppy and won't give you the best result possible. </p>
<p>A great shadow mimics our perceived physical reality. So then, a contemplative person might ask — what is a shadow? A shadow is caused by an object blocking light and causing a partial absence of light on the surface behind or below the object.</p>
<p> With that as our working definition of a shadow, it changes the way we might think about our options for making a shadow less harsh and more natural.</p>
<p>Let's think through it again.</p>
<p>Black is the absence of light. </p>
<p>A shadow is the partial absence of light. </p>
<p>Therefore, a shadow in our perceived reality is a semi-transparent black. </p>
<p>In CSS, that would mean setting the opacity of our black to less than one. Setting the color to a semi-transparent black now frees us to use the blur value to shape our shadow and not use it to compensate for something else.</p>
<p>Semi-transparent black will also allow your shadow to keep looking good on multiple background colors because the transparency will allow the background color to continue to shine through.</p>
<p>Recommended Opacity Range: 0.04 - 0.25</p>
<p>eg. <code>rgba(0,0,0, 0.2)</code></p>
<h2>Layers</h2>
<p>It's not overtly obvious that box-shadows supports multiple shadows on one element but this is the key to a great shadow. </p>
<p>To understand why layering works so well, we need to look at a film technique.</p>
<h3>3 Point Lighting</h3>
<p>There is a well-established technique in film and photography used to light subjects called 3 point lighting. It solves a simple problem. You need to light a subject, often a person, using artificial light sources but in a way that it looks pleasing. Using a single bright light will cast harsh shadows. Three-point lighting is a technique that solves this problem with a relatively low number of lights, three.</p>
<p>In a traditional setup, you have three types of lights, key light, fill light, and back light. The key light is your brightest source and is often pointed from off-center to the front of your subject. The fill light is a softer light that is often pointed from the other side of the front of your subject to fill in the shadows caused by the key light. The back light is a light that is pointed at your subject from behind and acts to give your subject some definition around the edges. </p>
<p>It's important to realize that a single artificial light source is often too harsh whether you're talking about photography or CSS.</p>
<p><strong>Apply this to CSS</strong></p>
<p>To layer shadows, they must be semi-transparent. If they are not, they cannot compound on each other and will rather block one another making the previous layer mostly useless.</p>
<p>You can think of each layer as being one of the three lights. One of your shadow layers will act as your key light, it will be the heaviest shadow — least transparent. A second layer can be your fill light, a little softer and wider. Lastly, your back light, provides a little extra definition to your edges.</p>
<p><strong>A Material Example</strong></p>
<p>Take a look at how Material Design uses layers to define their shadows. </p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 33%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAiElEQVQoz5VQCQoDMQjM/9+a+yB3LAopu6nt0gHxnFEUay1AoP/HOM6cE8S35tOSa3/Hb0FOgMs5kTMW5yBHfrrqdmFrDXrvNyLmWD//U2v9WDjGgFIKGQl678FaSyIbzjmq4fBGzhmklES8XogIIUBKiWJhjCGy1hqUUuRRED0KnL0Y488XvQDrliiaoGw1MQAAAABJRU5ErkJggg=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/aa5d84a49ae4dddf2f92234d5f1e875a/ba381/elevation-3-break-out.webp 200w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/7f61c/elevation-3-break-out.webp 400w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/d00b9/elevation-3-break-out.webp 800w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/92f8c/elevation-3-break-out.webp 1200w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/e33fd/elevation-3-break-out.webp 1544w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/aa5d84a49ae4dddf2f92234d5f1e875a/772e8/elevation-3-break-out.png 200w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/e17e5/elevation-3-break-out.png 400w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/5a190/elevation-3-break-out.png 800w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/c1b63/elevation-3-break-out.png 1200w,
/static/aa5d84a49ae4dddf2f92234d5f1e875a/c0566/elevation-3-break-out.png 1544w" sizes="(max-width: 800px) 100vw, 800px" type="image/png"/>
<img class="gatsby-resp-image-image" src="/static/aa5d84a49ae4dddf2f92234d5f1e875a/5a190/elevation-3-break-out.png" alt="elevation-3-break-out" title="elevation-3-break-out" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</span></p>
<p>To see the effect of the layering and what impact each has, I've turned the shadows into red, green, and blue. Opacity 20 layer is red. Opacity 14 layer is green. Opacity 12 layer is blue.</p>
<p>Notice how the colors interact with each other and create colors, like purple, that weren't used. This also highlights the effect that each shadow has on the box.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 712px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 101.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAsElEQVQ4y+2U2QoDIQxF/f+PLN1eCtV26jJdJkk1YjugMGrp21y8GjA5KqgCCYkb+i4ELKx0zI21kSFSEATQauRxzhApMA5IDUiXDpsRvjtMwIO0NKXlGo48+V2G2hyoLE/GiTp/gGoRiFVuAi5pBa7AfwFf/PSw4WIjP9ci8Kgc9aoI3KsbSX2mwSi6GlnlkCu19ECdA+1jpO1pQ7tGhxr3vJc/2F+UfbBhBIQuzxlvtTAowo1eduMAAAAASUVORK5CYII='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/be50b8554c6adcd2e87fb5b6b1b3db39/ba381/material-z3-in-rbg.webp 200w,
/static/be50b8554c6adcd2e87fb5b6b1b3db39/7f61c/material-z3-in-rbg.webp 400w,
/static/be50b8554c6adcd2e87fb5b6b1b3db39/c4538/material-z3-in-rbg.webp 712w" sizes="(max-width: 712px) 100vw, 712px" type="image/webp"/>
<source srcset="/static/be50b8554c6adcd2e87fb5b6b1b3db39/772e8/material-z3-in-rbg.png 200w,
/static/be50b8554c6adcd2e87fb5b6b1b3db39/e17e5/material-z3-in-rbg.png 400w,
/static/be50b8554c6adcd2e87fb5b6b1b3db39/3d4b6/material-z3-in-rbg.png 712w" sizes="(max-width: 712px) 100vw, 712px" type="image/png"/>
<img class="gatsby-resp-image-image" src="/static/be50b8554c6adcd2e87fb5b6b1b3db39/3d4b6/material-z3-in-rbg.png" alt="material-z3-in-rbg" title="material-z3-in-rbg" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</span></p>
<h2>Elevation</h2>
<p>The way a shadow is cast can signify how high above the surface the object is floating. Using different 'elevations' of objects can be an important indicator in your design.</p>
<p>The further an object is from a surface, the larger the shadow it will cast. In CSS this would translate to a larger blur-radius and spread.</p>
<p>The higher an object is, the further down the screen you'll want the shadow to appear. </p>
<p>Using a combo of blur-radius, spread, and y-offset will allow you to portray height.</p>
<h2>Into the shadows</h2>
<p>With that, my journey comes to an end but hopefully, this is just the beginning of your journey. To experiment with box-shadows, I encourage you to try out the <a href="https://shadows.joeczubiak.com">box-shadow generator tool</a> that I built. Good luck. Hope to see you in the shadows.</p>]]></content:encoded></item><item><title><![CDATA[Shadows]]></title><description><![CDATA[I built an open-source CSS box-shadow generator. I was curious about box shadows one day and next thing you know I've built a tool.]]></description><link>https://joeczubiak.com/shadows/</link><guid isPermaLink="false">17f02c18-2dd0-52fd-b5e5-2f13b5075676</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Tue, 09 Feb 2021 08:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/e97337ec18861daab234dc81656c6bdd/shadows-cover-image.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/e97337ec18861daab234dc81656c6bdd/shadows-cover-image.png"/><p>Shadows: <a href="https://shadows.joeczubiak.com">shadows.joeczubiak.com</a><br>
GitHub: <a href="https://github.com/jcz530/shadows">github.com/jcz530/shadows</a></br></p>
<p>I built an open-source CSS box-shadow generator.<br>
I was curious about box shadows one day. Some visual code editors like WebFlow let you specify angle and distance for box shadows but both angle and distance aren't CSS attributes on box-shadow. So I decided to explore how angle and distance are converted to an x and y offset.</br></p>
<p>I started to write an article detailing the math behind it, turns out it's basic trigonometry and if I was still in 9th grade it would have been obvious to me. Before you know it and before the article is done I built and released my own CSS generator.</p>
<p>One of the lessons I learned while exploring what makes a good box-shadow is that opacity and layers are the keys. Most box-shadow generators online don't allow multiple shadows to be specified and the preview they give doesn't look like something you'd use in your own UI.</p>
<p>So I built something that I think is better. Take a look.</p>
<p><a href="https://shadows.joeczubiak.com">shadows.joeczubiak.com</a> </p>]]></content:encoded></item><item><title><![CDATA[My secret to putting my email on my website without getting spammed]]></title><description><![CDATA[I got an email from Ugohow the other day. Ugohar also sent me one. The Ugos send me a lot of emails, they write to me in Russian with links to buy prescription drugs. Thanks, Ugos.]]></description><link>https://joeczubiak.com/my-secret-to-putting-my-email-on-my-website-without-getting-spammed/</link><guid isPermaLink="false">f969de29-a1a6-5bb8-b8c0-2c417cc0e7d1</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 27 Jan 2021 16:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/b6e3d917d2f737977925fbcee224aa0a/emails-cover.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/b6e3d917d2f737977925fbcee224aa0a/emails-cover.png"/><p>I got an email from Ugohow the other day. Ugohar also sent me one. The Ugos send me a lot of emails, they write to me in Russian with links to buy prescription drugs. </p>
<p>Thanks, Ugos. </p>
<p>The Ugos are just a small subset of the spammers I regularly receive contact from. Most of them try to sell me web services like SEO, development, or marketing services. The Ugos and their friends are abusing my contact forms and public email addresses that I have on my websites. I put up with Ugos and friends because sometimes a real human needs to get in contact and I want them to be able to do so in the easiest way possible. Sometimes that's the whole point of a website, to get leads by encouraging visitors to contact you.</p>
<p>Somedays the spam feels overwhelming, while I looked back at my emails for this article I found that some days I was getting over 10 emails a day that were all landing in my inbox and not in the spam folder. That's from one website. I built out my personal blog website recently and I was faced with the decision of what to include on my contact page. Contact form or email address or both. My domain name is my name, literally, and I want to at least try to keep the spam down. </p>
<h2>Contact forms are the worst</h2>
<p>It might feel like having a contact form on your website is the best experience for everyone, but contact forms are kind of the worst. I would prefer to pop an email address into my Gmail and be done with it instead of dealing with contact forms with annoying requirements and dropdowns. Sending from my email app also gives me a record of what I said and when I said it.</p>
<p>On the other end, it's pretty easy to f›‹¢k up the server-side of a contact form. Not speaking from experience or anything. Configure it wrong, and it ends up in spam or doesn't get sent at all. Whoops, forgot to include their email address. Thanks for contacting the black void, see you — never. There are a million ways it goes wrong. A more foolproof way is to just copy and paste an email address into your Gmail.</p>
<p>Contact forms are ripe targets for spammers. Low hanging fruit, something they've nearly perfected. You don't want to live through the consequences of not using some sort of bot blocker like reCaptcha on your contact form.</p>
<p>Even though the case against contact forms is strong, some people like the things, and we aim to please on the internet. So, the polite thing to do is to include both a contact form and an actual email address. It feels hard to publicly display your email address, especially when it's a personal address and not some generic support address. How many times have you seen joe [at] gmAil dot c0m or some variation of strange obscurities? We have good reason to be frightened. </p>
<h2>The internet is mostly bots.</h2>
<p>So much internet traffic comes from bots that you'd be forgiven if you thought your site was a lot more popular than it is after looking at your server logs. Some are good bots like Google's search engine crawler. You want that one to ping your website and put the latest content onto Google's search results. Others are less clear about their motive. Fighting traffic from bots is mostly a lost cause, but ignoring them altogether isn't a great plan either.</p>
<p>The internet is built on content being crawled and information being disseminated and tangled into the web. Keeping personal information out of that process can be difficult, but not impossible. We need to understand how web scraping works in order to work around it. </p>
<p>Traditional web scraping works like this. A script runs and downloads the contents of a webpage in its raw code form. To see what this looks like, you can right-click on the webpage you're on and click "view source". That's what a web scraper usually takes in. It can then parse out the bits that it wants.</p>
<p>Traditional scrapers don't load or run any javascript, they only load the server-side generated code. This is one of the reasons that SEO can be so tough for javascript based websites. If your site renders in the browser as opposed to the server, there's a good chance the content won't be available when the crawler hits the site. This is a big part of why server-side rendering (SSR) is so popular for javascript based websites. Node-based web crawlers are increasing in popularity because they can load and render javascript but they can be slower are still in the minority.</p>
<h2>The Trick</h2>
<p>Finally, we arrive at my secret to putting my email address on my website without being spammed. Since most of the crawlers are just grabbing the server-side rendered page, we need to take our email out of the server-rendered DOM and add it back in using javascript after the page loads. This way, users visiting your website will be able to see your email, after a short delay, but when your webpage is scraped, it won't be readable by the bots since it wasn't in the DOM when your page was crawled.</p>
<p>To implement this, you could use javascript's timeout function to set a delay and call a function that adds the email to the DOM. </p>
<pre><code class="language-js">setTimeout(() => {
addEmailToDOM(`your-public@email.com`)
}, 1000) // 1000ms or 1 second
</code></pre>
<p>This is one of many ways you could go about doing this. To get it working on your website would depend on your setup. This isn't a foolproof method — almost nothing is. It's a simple trick that might just help you avoid some spam. </p>
<p>Let me know what you think of this method. Do you think it works?</p>]]></content:encoded></item><item><title><![CDATA[A Los Feliz Day in the Rain]]></title><description><![CDATA[Rain offers scenery we don't get to appreciate most days. During a recent rain storm my girlfriend and I decided to get out and explore.]]></description><link>https://joeczubiak.com/a-los-feliz-day-in-the-rain/</link><guid isPermaLink="false">653e7d9f-2849-53a2-a02c-b36f4dfd48e0</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 06 Jan 2021 12:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/0acff268cfe0ec0c309ca512f86c2f53/joe-czubiak-rainy-day-in-los-feliz-cover.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/0acff268cfe0ec0c309ca512f86c2f53/joe-czubiak-rainy-day-in-los-feliz-cover.jpg"/><p>On a rainy day at the end of 2020, instead of having a normal Southern California rainy day and curling up with a book and the fireplace on, we decided to venture out. 2020 had left us stuck inside for many reasons.</p>
<p>The virus — Staying inside became the default.</p>
<p>Fires — The fires brought dangerous air quality leaving you to wonder if it was healthier for you to exercise in the poor air or stay sedentary for another while.</p>
<p>Heat — The heat of summer seemed longer than ever this year. Masks have been great in cold weather to warm you up. They do not, however, make the heat more bearable.</p>
<p>On this rainy day, the rain stopped for a moment long enough for me and my girlfriend Rebecca to pack up and step outside. Rain offers scenery we don't get to appreciate most days. We walked through our neighborhood on streets we walk most days and into Griffith Park, our familiar and loved outdoor space.
<br/>
<br/></p>
<div class="photo-essay">
<div class="gap"/>
We started up Hillhurst from Los Feliz Blvd. to make our way into Griffith Park.
<div class="gap"/>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/05e0f7d5b210c2ffbf454c61e5491279/e1596/hillhurst.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABjtheLBId/8QAGhAAAgIDAAAAAAAAAAAAAAAAAQIAEgMTMv/aAAgBAQABBQLE9W3wuCV6Jlp//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPwGpa//EABgQAQADAQAAAAAAAAAAAAAAAAABETEh/9oACAEBAAY/AnGrqGQyH//EABwQAAICAgMAAAAAAAAAAAAAAAERAFEhMUFhkf/aAAgBAQABPyEIVo8QjkIrjQcoYChPqVstQvvzn//aAAwDAQACAAMAAAAQDz//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EFKYf//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QisIP/8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFB/9oACAEBAAE/ELQoNH3HeseD3Ng+BeNmDLhYcGUGF5V1Ccs7/9k='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/05e0f7d5b210c2ffbf454c61e5491279/ba381/hillhurst.webp 200w,
/static/05e0f7d5b210c2ffbf454c61e5491279/7f61c/hillhurst.webp 400w,
/static/05e0f7d5b210c2ffbf454c61e5491279/d00b9/hillhurst.webp 800w,
/static/05e0f7d5b210c2ffbf454c61e5491279/92f8c/hillhurst.webp 1200w,
/static/05e0f7d5b210c2ffbf454c61e5491279/fad48/hillhurst.webp 1600w,
/static/05e0f7d5b210c2ffbf454c61e5491279/8df42/hillhurst.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/05e0f7d5b210c2ffbf454c61e5491279/e07e9/hillhurst.jpg 200w,
/static/05e0f7d5b210c2ffbf454c61e5491279/066f9/hillhurst.jpg 400w,
/static/05e0f7d5b210c2ffbf454c61e5491279/4b190/hillhurst.jpg 800w,
/static/05e0f7d5b210c2ffbf454c61e5491279/e5166/hillhurst.jpg 1200w,
/static/05e0f7d5b210c2ffbf454c61e5491279/b17f8/hillhurst.jpg 1600w,
/static/05e0f7d5b210c2ffbf454c61e5491279/e1596/hillhurst.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/05e0f7d5b210c2ffbf454c61e5491279/4b190/hillhurst.jpg" alt="Hillhurst in Los Feliz hills" title="Hillhurst in Los Feliz hills" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>A look back offers a glimpse of downtown behind us.
<br/></p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/e1596/hillhurst-view-to-downtown.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAQX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAeY+rhlKRv/EABgQAAMBAQAAAAAAAAAAAAAAAAABAhED/9oACAEBAAEFAi1iJ7WVbZrZ/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAgMAAAAAAAAAAAAAAAAAABABITH/2gAIAQEABj8CI1U//8QAGRABAAMBAQAAAAAAAAAAAAAAAQARITGB/9oACAEBAAE/ITgI5L4gvuRfYK7B5FtZ2M//2gAMAwEAAgADAAAAEDsf/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QR//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EIf/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMXFB/9oACAEBAAE/EMra8A+y5SCFrUC6Epl8lLwugXfYtXVdbplxTfJ//9k='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/ba381/hillhurst-view-to-downtown.webp 200w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/7f61c/hillhurst-view-to-downtown.webp 400w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/d00b9/hillhurst-view-to-downtown.webp 800w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/92f8c/hillhurst-view-to-downtown.webp 1200w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/fad48/hillhurst-view-to-downtown.webp 1600w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/8df42/hillhurst-view-to-downtown.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/e07e9/hillhurst-view-to-downtown.jpg 200w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/066f9/hillhurst-view-to-downtown.jpg 400w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/4b190/hillhurst-view-to-downtown.jpg 800w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/e5166/hillhurst-view-to-downtown.jpg 1200w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/b17f8/hillhurst-view-to-downtown.jpg 1600w,
/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/e1596/hillhurst-view-to-downtown.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/4d03fb6ae1fda702c3bd64fdf88c4d5f/4b190/hillhurst-view-to-downtown.jpg" alt="Hillhurst view to downtown from Los Feliz" title="Hillhurst view to downtown from Los Feliz" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>As Hillhurst meets and merges with Vermont, a look down Vermont offers a quiet look at the giant fig trees overreaching the median. Satisfyingly little traffic this morning on an otherwise unusually busy road. Vermont leads cars to the Griffith Observatory, The Greek Theater, a golf course, tennis courts, and trails. This summer there were no concerts and the observatory has been closed but this part of the park was as busy as ever with the trails being one of the few places "open" this year.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/585a4b32aa628836f190eace7c0d0a1a/e1596/vermont-los-feliz.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHjUUlJsf/EABgQAAMBAQAAAAAAAAAAAAAAAAABEQIS/9oACAEBAAEFApRZLDLh04f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAbEAACAwADAAAAAAAAAAAAAAABEQAhQTFRkf/aAAgBAQABPyHQQyLKGzFQtAvI0rrpTm0J/9oADAMBAAIAAwAAABD8H//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAECAQE/EKf/xAAaEAEBAQEAAwAAAAAAAAAAAAABESEAQVGR/9oACAEBAAE/ELLrfvH0LK5pez1zcxPLTnGS1KgjxK1rXO//2Q=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/585a4b32aa628836f190eace7c0d0a1a/ba381/vermont-los-feliz.webp 200w,
/static/585a4b32aa628836f190eace7c0d0a1a/7f61c/vermont-los-feliz.webp 400w,
/static/585a4b32aa628836f190eace7c0d0a1a/d00b9/vermont-los-feliz.webp 800w,
/static/585a4b32aa628836f190eace7c0d0a1a/92f8c/vermont-los-feliz.webp 1200w,
/static/585a4b32aa628836f190eace7c0d0a1a/fad48/vermont-los-feliz.webp 1600w,
/static/585a4b32aa628836f190eace7c0d0a1a/8df42/vermont-los-feliz.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/585a4b32aa628836f190eace7c0d0a1a/e07e9/vermont-los-feliz.jpg 200w,
/static/585a4b32aa628836f190eace7c0d0a1a/066f9/vermont-los-feliz.jpg 400w,
/static/585a4b32aa628836f190eace7c0d0a1a/4b190/vermont-los-feliz.jpg 800w,
/static/585a4b32aa628836f190eace7c0d0a1a/e5166/vermont-los-feliz.jpg 1200w,
/static/585a4b32aa628836f190eace7c0d0a1a/b17f8/vermont-los-feliz.jpg 1600w,
/static/585a4b32aa628836f190eace7c0d0a1a/e1596/vermont-los-feliz.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/585a4b32aa628836f190eace7c0d0a1a/4b190/vermont-los-feliz.jpg" alt="View of Vermont fig trees in Los Feliz" title="View of Vermont fig trees in Los Feliz" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>Coyotes — a contentious, feared, and perhaps misunderstood species among some of our fellow NextDoor neighbors. Here in the park, they are relaxed and share the space with people. This pack must live nearby as we've seen them many times in this location.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/223e9de966e16a6b7142bab8efadf327/e1596/coyotes-in-griffith-park.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAgT/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAP/2gAMAwEAAhADEAAAAV1ds5KwaEf/xAAZEAADAAMAAAAAAAAAAAAAAAABAhEAEiD/2gAIAQEAAQUCXaFSeJn/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFH/8QAFhEBAQEAAAAAAAAAAAAAAAAAABIR/9oACAECAQE/Aaxb/8QAFRABAQAAAAAAAAAAAAAAAAAAICH/2gAIAQEABj8Cq//EABsQAAIDAAMAAAAAAAAAAAAAAAABESFRMWFx/9oACAEBAAE/IVZ2g+nMHzcz4TdUQ9F2P//aAAwDAQACAAMAAAAQs8//xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQMBAT8Qqkx//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEhcf/aAAgBAgEBPxClRg//xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMWGBsf/aAAgBAQABPxDcCZM7sG2tILsRBD39rlyL14iJfxP/2Q=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/223e9de966e16a6b7142bab8efadf327/ba381/coyotes-in-griffith-park.webp 200w,
/static/223e9de966e16a6b7142bab8efadf327/7f61c/coyotes-in-griffith-park.webp 400w,
/static/223e9de966e16a6b7142bab8efadf327/d00b9/coyotes-in-griffith-park.webp 800w,
/static/223e9de966e16a6b7142bab8efadf327/92f8c/coyotes-in-griffith-park.webp 1200w,
/static/223e9de966e16a6b7142bab8efadf327/fad48/coyotes-in-griffith-park.webp 1600w,
/static/223e9de966e16a6b7142bab8efadf327/8df42/coyotes-in-griffith-park.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/223e9de966e16a6b7142bab8efadf327/e07e9/coyotes-in-griffith-park.jpg 200w,
/static/223e9de966e16a6b7142bab8efadf327/066f9/coyotes-in-griffith-park.jpg 400w,
/static/223e9de966e16a6b7142bab8efadf327/4b190/coyotes-in-griffith-park.jpg 800w,
/static/223e9de966e16a6b7142bab8efadf327/e5166/coyotes-in-griffith-park.jpg 1200w,
/static/223e9de966e16a6b7142bab8efadf327/b17f8/coyotes-in-griffith-park.jpg 1600w,
/static/223e9de966e16a6b7142bab8efadf327/e1596/coyotes-in-griffith-park.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/223e9de966e16a6b7142bab8efadf327/4b190/coyotes-in-griffith-park.jpg" alt="Coyotes in Griffith Park" title="Coyotes in Griffith Park" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>We made our way up the empty trails with the observatory behind us and the golf course below us.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/36d871cfccc12b8a4c283400bb3ab267/e1596/griffith-park-empty-trail.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABqmzaMnHAv//EABkQAAMBAQEAAAAAAAAAAAAAAAABAgMSE//aAAgBAQABBQLuUXrAtrGTCPJH/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECEf/aAAgBAwEBPwFSYj//xAAXEQADAQAAAAAAAAAAAAAAAAAAAQIS/9oACAECAQE/AXZpn//EABgQAAIDAAAAAAAAAAAAAAAAAAARICEy/9oACAEBAAY/AtDKUP/EABoQAAIDAQEAAAAAAAAAAAAAAAABESFBYVH/2gAIAQEAAT8h7TNyX4jgMobITINpEms//9oADAMBAAIAAwAAABDX/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEWH/2gAIAQMBAT8Qowf/xAAXEQEAAwAAAAAAAAAAAAAAAAAAETFh/9oACAECAQE/EIKaP//EABsQAQADAQADAAAAAAAAAAAAAAEAESExUWGB/9oACAEBAAE/EFloDy1Cqm3IOFpao1RKVeihSP3tDCvs7w/XZ//Z'); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/36d871cfccc12b8a4c283400bb3ab267/ba381/griffith-park-empty-trail.webp 200w,
/static/36d871cfccc12b8a4c283400bb3ab267/7f61c/griffith-park-empty-trail.webp 400w,
/static/36d871cfccc12b8a4c283400bb3ab267/d00b9/griffith-park-empty-trail.webp 800w,
/static/36d871cfccc12b8a4c283400bb3ab267/92f8c/griffith-park-empty-trail.webp 1200w,
/static/36d871cfccc12b8a4c283400bb3ab267/fad48/griffith-park-empty-trail.webp 1600w,
/static/36d871cfccc12b8a4c283400bb3ab267/8df42/griffith-park-empty-trail.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/36d871cfccc12b8a4c283400bb3ab267/e07e9/griffith-park-empty-trail.jpg 200w,
/static/36d871cfccc12b8a4c283400bb3ab267/066f9/griffith-park-empty-trail.jpg 400w,
/static/36d871cfccc12b8a4c283400bb3ab267/4b190/griffith-park-empty-trail.jpg 800w,
/static/36d871cfccc12b8a4c283400bb3ab267/e5166/griffith-park-empty-trail.jpg 1200w,
/static/36d871cfccc12b8a4c283400bb3ab267/b17f8/griffith-park-empty-trail.jpg 1600w,
/static/36d871cfccc12b8a4c283400bb3ab267/e1596/griffith-park-empty-trail.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/36d871cfccc12b8a4c283400bb3ab267/4b190/griffith-park-empty-trail.jpg" alt="Empty trail in Griffith Park during rain storm" title="Empty trail in Griffith Park during rain storm" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>We stopped at the overlook by the water tower. We would normally take a moment to enjoy the view before heading down. Sensing the rain was going to come any moment Rebecca was eager to get the show on the road but instead, I set up a "quick" timelapse.</p>
<p>While we sat there, the rain started to fall again with increasing strength each minute we waited. I held a plastic bag as a rain shield that I had brought to keep the camera dry in my backpack.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/3f12fc227ae51204fc12a54ea1cd4aed/e1596/joe-czubiak-timelapse-behind-the-scenes.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDAv/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABeILKoC//xAAZEAACAwEAAAAAAAAAAAAAAAAAAQIDExH/2gAIAQEAAQUC3NzdipiTqfVFc//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAYEAADAQEAAAAAAAAAAAAAAAAAMUEQof/aAAgBAQAGPwJ8LlGI/8QAGxABAAICAwAAAAAAAAAAAAAAAQAhETFBYXH/2gAIAQEAAT8hQG7C6yQ5NTUt6zmnV1DHJn//2gAMAwEAAgADAAAAELwv/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAEDAQE/EIx//8QAFxEBAAMAAAAAAAAAAAAAAAAAABEhUf/aAAgBAgEBPxCS9f/EAB0QAQADAAEFAAAAAAAAAAAAAAEAETEhQVFhgZH/2gAIAQEAAT8QeJ51oZax3gzvLumjit2eoA5Ou038jAhOF4A6QpahqXP/2Q=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/3f12fc227ae51204fc12a54ea1cd4aed/ba381/joe-czubiak-timelapse-behind-the-scenes.webp 200w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/7f61c/joe-czubiak-timelapse-behind-the-scenes.webp 400w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/d00b9/joe-czubiak-timelapse-behind-the-scenes.webp 800w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/92f8c/joe-czubiak-timelapse-behind-the-scenes.webp 1200w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/fad48/joe-czubiak-timelapse-behind-the-scenes.webp 1600w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/8df42/joe-czubiak-timelapse-behind-the-scenes.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/3f12fc227ae51204fc12a54ea1cd4aed/e07e9/joe-czubiak-timelapse-behind-the-scenes.jpg 200w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/066f9/joe-czubiak-timelapse-behind-the-scenes.jpg 400w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/4b190/joe-czubiak-timelapse-behind-the-scenes.jpg 800w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/e5166/joe-czubiak-timelapse-behind-the-scenes.jpg 1200w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/b17f8/joe-czubiak-timelapse-behind-the-scenes.jpg 1600w,
/static/3f12fc227ae51204fc12a54ea1cd4aed/e1596/joe-czubiak-timelapse-behind-the-scenes.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/3f12fc227ae51204fc12a54ea1cd4aed/4b190/joe-czubiak-timelapse-behind-the-scenes.jpg" alt="Joe Czubiak taking timelapse from Griffith Park during a storm" title="Joe Czubiak taking timelapse from Griffith Park during a storm" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>The timelapse.</p>
<p>The clouds appear to be moving to the right of the frame but the storm is actually coming in from the right side.</p>
<iframe src="https://player.vimeo.com/video/496473534" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="width:100%;"/>
<div class="gap"/>
<div class="gap"/>
<p>The view was stunning. It looked this unreal in person. No filters or color changes were made to this photo.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/b56d72bdc9176652eebf9f21bc363948/e1596/los-feliz-view-of-downtown-storm.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB01QyjoTlf//EABgQAAMBAQAAAAAAAAAAAAAAAAABEhEC/9oACAEBAAEFAmzeR4UymUf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAAAAQIxICGR/9oACAEBAAY/AtzRaLXcP//EABsQAAMAAgMAAAAAAAAAAAAAAAABESFBUWGR/9oACAEBAAE/IUvNRwehR0XdRI2Wf//aAAwDAQACAAMAAAAQC8//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCH/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EKF//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRYYH/2gAIAQEAAT8Q4WjmkwRdt7IeA8BAWn6TfsnTBy6J/9k='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/b56d72bdc9176652eebf9f21bc363948/ba381/los-feliz-view-of-downtown-storm.webp 200w,
/static/b56d72bdc9176652eebf9f21bc363948/7f61c/los-feliz-view-of-downtown-storm.webp 400w,
/static/b56d72bdc9176652eebf9f21bc363948/d00b9/los-feliz-view-of-downtown-storm.webp 800w,
/static/b56d72bdc9176652eebf9f21bc363948/92f8c/los-feliz-view-of-downtown-storm.webp 1200w,
/static/b56d72bdc9176652eebf9f21bc363948/fad48/los-feliz-view-of-downtown-storm.webp 1600w,
/static/b56d72bdc9176652eebf9f21bc363948/8df42/los-feliz-view-of-downtown-storm.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/b56d72bdc9176652eebf9f21bc363948/e07e9/los-feliz-view-of-downtown-storm.jpg 200w,
/static/b56d72bdc9176652eebf9f21bc363948/066f9/los-feliz-view-of-downtown-storm.jpg 400w,
/static/b56d72bdc9176652eebf9f21bc363948/4b190/los-feliz-view-of-downtown-storm.jpg 800w,
/static/b56d72bdc9176652eebf9f21bc363948/e5166/los-feliz-view-of-downtown-storm.jpg 1200w,
/static/b56d72bdc9176652eebf9f21bc363948/b17f8/los-feliz-view-of-downtown-storm.jpg 1600w,
/static/b56d72bdc9176652eebf9f21bc363948/e1596/los-feliz-view-of-downtown-storm.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/b56d72bdc9176652eebf9f21bc363948/4b190/los-feliz-view-of-downtown-storm.jpg" alt="Los Feliz view of Downtown LA during storm" title="Los Feliz view of Downtown LA during storm" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>The rain poured heavy on us on our way down the trails. We watched as water formed new paths of erosion in the dirt. I covered my camera with my plastic bag in hopes of getting another shot. It proved too rainy and cold to take any more shots until the rain let up and we were back to Vermont and the water was draining into the roads.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/b2629d53dcdfe4047580b991505cdfc1/e1596/rain-water-flowing-down-vermont.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQBAv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGK2dGOUf/EABkQAAMBAQEAAAAAAAAAAAAAAAECAwAQE//aAAgBAQABBQKRrM+7ZyzNw7//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFJ/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BR//EABsQAAIBBQAAAAAAAAAAAAAAAAARAQIgMlGR/9oACAEBAAY/AtwYjdPbP//EABsQAAMAAgMAAAAAAAAAAAAAAAABETFBUXGB/9oACAEBAAE/IYJThoq69svngE4hMyP/2gAMAwEAAgADAAAAELzv/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/EApn/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERcf/aAAgBAgEBPxCLbf/EABsQAQEAAgMBAAAAAAAAAAAAAAERACExcYGh/9oACAEBAAE/EL7Q1lvpwcsbzqnmJ2WBpD7iHHgMW6U6cbdj5n//2Q=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/b2629d53dcdfe4047580b991505cdfc1/ba381/rain-water-flowing-down-vermont.webp 200w,
/static/b2629d53dcdfe4047580b991505cdfc1/7f61c/rain-water-flowing-down-vermont.webp 400w,
/static/b2629d53dcdfe4047580b991505cdfc1/d00b9/rain-water-flowing-down-vermont.webp 800w,
/static/b2629d53dcdfe4047580b991505cdfc1/92f8c/rain-water-flowing-down-vermont.webp 1200w,
/static/b2629d53dcdfe4047580b991505cdfc1/fad48/rain-water-flowing-down-vermont.webp 1600w,
/static/b2629d53dcdfe4047580b991505cdfc1/8df42/rain-water-flowing-down-vermont.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/b2629d53dcdfe4047580b991505cdfc1/e07e9/rain-water-flowing-down-vermont.jpg 200w,
/static/b2629d53dcdfe4047580b991505cdfc1/066f9/rain-water-flowing-down-vermont.jpg 400w,
/static/b2629d53dcdfe4047580b991505cdfc1/4b190/rain-water-flowing-down-vermont.jpg 800w,
/static/b2629d53dcdfe4047580b991505cdfc1/e5166/rain-water-flowing-down-vermont.jpg 1200w,
/static/b2629d53dcdfe4047580b991505cdfc1/b17f8/rain-water-flowing-down-vermont.jpg 1600w,
/static/b2629d53dcdfe4047580b991505cdfc1/e1596/rain-water-flowing-down-vermont.jpg 2048w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/b2629d53dcdfe4047580b991505cdfc1/4b190/rain-water-flowing-down-vermont.jpg" alt="Rain water flowing down vermont from Griffith Park" title="Rain water flowing down vermont from Griffith Park" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<div class="gap"/>
<p>Of course, what would a storm in LA be without palm fronds strewn everywhere.</p>
<div class="portrait">
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/7440c001d550bc4a0117ae78e503e8b8/b2c4f/fallen-palm-fronds-in-rain.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 150%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAECAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdMKsllh0w4cExlwf//EABwQAAIDAAMBAAAAAAAAAAAAAAECAAMSEBETIv/aAAgBAQABBQJFwtlorllJdtFV8dRcAHWTqffHcE//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAWEQADAAAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8BcP/EAB8QAAEDAwUAAAAAAAAAAAAAAAABESECEiAiMTJBUf/aAAgBAQAGPwJkJLkXcoafTXX2M41xCwclw//EABwQAQADAAIDAAAAAAAAAAAAAAEAESFBURAxYf/aAAgBAQABPyEz9cAO0T5oTA3i5JZXtmAIFGTsk4orcfmvgmp//9oADAMBAAIAAwAAABBo73L/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREQ/9oACAEDAQE/EIV5T//EABgRAQADAQAAAAAAAAAAAAAAAAEAEBFB/9oACAECAQE/EFeTCZT/xAAcEAEBAQADAAMAAAAAAAAAAAABEQAhMVFhcaH/2gAIAQEAAT8QvkivPe79LgXEwkIL1n4QEeHe85hTmi94vQYrpBgLW8ceYC8gjPnQEQCECH7ngp+xwtF3/9k='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/7440c001d550bc4a0117ae78e503e8b8/ba381/fallen-palm-fronds-in-rain.webp 200w,
/static/7440c001d550bc4a0117ae78e503e8b8/7f61c/fallen-palm-fronds-in-rain.webp 400w,
/static/7440c001d550bc4a0117ae78e503e8b8/d00b9/fallen-palm-fronds-in-rain.webp 800w,
/static/7440c001d550bc4a0117ae78e503e8b8/92f8c/fallen-palm-fronds-in-rain.webp 1200w,
/static/7440c001d550bc4a0117ae78e503e8b8/aca34/fallen-palm-fronds-in-rain.webp 1365w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/7440c001d550bc4a0117ae78e503e8b8/e07e9/fallen-palm-fronds-in-rain.jpg 200w,
/static/7440c001d550bc4a0117ae78e503e8b8/066f9/fallen-palm-fronds-in-rain.jpg 400w,
/static/7440c001d550bc4a0117ae78e503e8b8/4b190/fallen-palm-fronds-in-rain.jpg 800w,
/static/7440c001d550bc4a0117ae78e503e8b8/e5166/fallen-palm-fronds-in-rain.jpg 1200w,
/static/7440c001d550bc4a0117ae78e503e8b8/b2c4f/fallen-palm-fronds-in-rain.jpg 1365w" sizes="(max-width: 800px) 100vw, 800px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" src="/static/7440c001d550bc4a0117ae78e503e8b8/4b190/fallen-palm-fronds-in-rain.jpg" alt="Fallen palm fronds on street in Los Feliz" title="Fallen palm fronds on street in Los Feliz" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
</div>
<div class="gap"/>
<p>With only our windbreakers protecting us, we got home cold and soaked but happy to have found adventure in our backyard.</p>
<p>Thanks for coming on this photo journey with me.</p>
</div>]]></content:encoded></item><item><title><![CDATA[Building LA Street Sweeping App]]></title><description><![CDATA[We are building an app to help the people of LA navigate street sweeping. Follow along as we document the journey here.]]></description><link>https://joeczubiak.com/building-la-street-sweeping-app/</link><guid isPermaLink="false">433bffaa-d08f-540e-8e69-5b3b8cfd6622</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Fri, 11 Dec 2020 21:09:36 GMT</pubDate><media:content url="https://joeczubiak.com/static/db5a4b6ba1cb49e47a21362240362922/rainy-street-parking-in-la.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/db5a4b6ba1cb49e47a21362240362922/rainy-street-parking-in-la.jpg"/><p>TLDR; We are building an app to help the people of LA navigate street sweeping. Follow along as we document the journey here.</p>
<p>It only took me one street sweeping ticket for the idea to take seed. After doing some searching and not being able to find any great maps of the street sweeping zones in LA, I went ahead and bought some domains. Add them to the collection. In the collection, they sat, for 3 years with only a couple of small attempts to start the project. There was never enough motivation to take the project all the way.</p>
<p>Parking was one of my most constant and persistent worries. All-day, every day, I would constantly think, where is my car, what day is it, what time is it, ohhh $h!t. I've run to my car just in time before parking enforcement came and once as they were writing my ticket. I've parked a 20 minute walk away late at night. I've sat and worked obliviously through my car getting ticketed. It takes up so much of my thinking and yet I don't even know some of the basics like where the boundaries are for my street sweeping zone.</p>
<p>Enter the pandemic, you know the one. The city of Los Angeles decided to lift street sweeping requirements and did not hand out tickets for around seven months. That was amazing. For the first time in years, I was able to forget about my car for a bit.</p>
<p>The relaxing of parking enforcement allowed us to stop thinking about our cars or get fresh air while we moved them and instead allowed us to obsess over the news and hide in-doors with no reason to go out! We never did go out and it turns out that when you leave your old car out in the hot streets of LA for a few weeks...it dies. Both mine and my girlfriend's cars died. Over the course of several weeks, I got really good at jumping our cars. Thanks to our emergency, turned essential, jump start battery kit which is basically a battery bank with jumper cables attached.</p>
<p>During the summer, I moved and I now have dedicated covered parking so I'm happy to say I no longer live in the world of street parking. It was important to have lived that experience. You can't truly appreciate what you have unless you've lived without.</p>
<p><strong>October 15</strong></p>
<p>October 15th was the day street sweeping enforcement started up again. As this date approached, I kept being reminded of street sweeping through news articles. About a week before that date, I started building. In my head, I wanted to have a quick version live before that date but that was wildly unrealistic. This kind of project takes way more work than you would think that it should. I don't have any high hopes for this project generating any income for myself but rather I'm hoping I can give a useful tool to the people of LA that doesn't break my bank to support it.</p>
<p>I want to build a tool for our city that would help people avoid tickets and avoid worry. I'm going to build with an iterative approach. To start, it's going to be a relatively simple website with an interactive map of all of the street sweeping zones and the schedules for those. It's difficult to believe but it is not easy to look up the boundaries of street sweeping zones.</p>
<p>For even just this simple version, it's requiring a lot of work and difficult technical decisions. I'm building this tool for the community so I'm going to be building this in public. I have some feature ideas mapped out but I would love to hear from others on what they'd like to see.</p>
<h3>Follow the journey</h3>
<p>Subscribe here.</p>
<p>Follow on Twitter. <a href="https://twitter.com/LAStSweeping">@LAStSweeping</a></p>
<p>Visit the website <a href="https://lastreetsweeping.com">LAStreetSweeping.com</a></p>]]></content:encoded></item><item><title><![CDATA[Snakebites and Fear-Setting]]></title><description><![CDATA[As I hiked through the desert, observing all of the holes in the ground that are surely home to a feast of rodents, there was one question I couldn't get out of my head.]]></description><link>https://joeczubiak.com/snakebites-and-fear-setting/</link><guid isPermaLink="false">5ccc5ebe-2d4a-5034-9be4-b99fb23a6411</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Mon, 07 Dec 2020 16:00:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/b86ca7657176801e873cde69ca90b2e3/joshua-tree-sunset.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/b86ca7657176801e873cde69ca90b2e3/joshua-tree-sunset.jpg"/><p>I just got back from a trip to Joshua Tree National Park. Joshua Tree is beautiful, vast, and despite being a desert, full of life. The park lends itself to be explored on your own whim, to pick and choose between meandering paths in the desert. Many of the paths aren't paved by people, they're animal tracks. They could've been paved by lizards, mice, squirrels, birds, foxes, coyotes, mountain goats, or even mountain lions.</p>
<p>Of all the wildlife out there, the animal I worry about the most is the rattlesnake. Encounters with rattlesnakes while hiking have become a familiar occurrence for me, with a couple of close calls. Joshua Tree has 7 types of rattlesnakes that call the park home. Getting bitten without provocation is a rare occurrence, but I still think that it's the most likely scenario for an animal attacking you. They sunbathe in the open and hide under rocks for shade. They can be well camouflaged, and you never know if you might step on or near one.</p>
<p><strong>If you get bitten, you must make it to a hospital.</strong></p>
<p>That's the thing that fundamentally changes this type of injury. A lot of the common injuries you could have while hiking will be just fine with the help of a first aid kit and some rest. A rattlesnake bite requires that you make it to a hospital no matter how bad the encounter was. If untreated, your bodily functions will start to shut down. The clock is ticking, anti-venom will stop further damage from the venom but won't magically heal the damage it had already done to you up to that point.</p>
<p>As I hiked through the desert, observing all of the holes in the ground that are surely home to a feast of rodents, there was one question I couldn't get out of my head.</p>
<h3>What would I do if I got bitten by a rattlesnake?</h3>
<p>I found no cell reception in the park. There are 3 emergency phones in the park — I don't know where they are. I climbed over big boulders to get to where I am on a pave your own way path. As I ran through scenarios in my head, I eventually concluded that being the good boyfriend that I am, it'd be better if my girlfriend got bit than me. For the simple reason that I could carry my girlfriend back to the car but I'm pretty sure she couldn't carry me and that seems like one of the only options we would have. You need to get to a hospital and the time it would take for one of us to get back to the car, find help, wait for help to get back to you, and then take you to the hospital feels like it would take an unwise amount of time.</p>
<p>I've always felt somewhat ill-prepared for this event. I have a little first aid training, enough to know that your body could swell so it's a good idea to take off jewelry, and you may go into shock. They say you should treat shock by lying down and raising your feet slightly. The thing that gets me, is that the most likely place I would get bitten is on my ankle or lower leg, and they tell you not to raise the bite above your heart because it will bring the venom to your heart faster. So hopefully you don't go into shock or maybe just raise the opposite leg. I should note that most people get bit in the hand to shoulder region but in an unprovoked encounter, I'd expect myself to get bitten on the leg.</p>
<p>After coming home from our trip, I decided I needed to put my fear-setting to rest and educate myself. After a little research, I have a better understanding and somewhat of a plan. The best case for this desert scenario is that you're not too far away from the car and are well enough to just walk out of there. Put some type of bandage on the wound but otherwise leave it alone. Have somebody else drive you and when you make it to cell reception, call 911, ask them to tell you where the nearest hospital with anti-venom is. All rattlesnakes are part of the pit viper family so the anti-venom is the same for each one, no need to ID which type of rattlesnake got you. There's also no need to try to suck venom out use a snake bite kit or any of the other methods you may have heard about. Once the venom is in, it's in. There's also a chance the snake didn't even inject any venom, so look on the bright side!</p>
<p>At the end of the day, it's very rare to get bitten and rarely lethal. You will, however, need to find your way to a hospital if you were bitten. It's healthy to think through these scenarios and have a plan while you're out exploring. Hopefully, the next time I go out into rattlesnake country, I'll feel a little more at ease now that I've educated myself on what to do.</p>
<p>I feel better now saying I would prefer myself getting bitten over my girlfriend.</p>]]></content:encoded></item><item><title><![CDATA[Laravel + React]]></title><description><![CDATA[This tutorial will show you how to use React with Laravel in a way that lets you sprinkle React into a legacy Laravel codebase and blade templates. We will not be creating an SPA or using Create React App.]]></description><link>https://joeczubiak.com/laravel-plus-react/</link><guid isPermaLink="false">a0ed31bd-38ed-5fb7-80af-fc45a5bd9ab7</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Fri, 16 Oct 2020 19:43:26 GMT</pubDate><media:content url="https://joeczubiak.com/static/06f8ecdbcb6fb858fb6a85f187c0c5bb/laravel-plus-react.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/06f8ecdbcb6fb858fb6a85f187c0c5bb/laravel-plus-react.png"/><p>This tutorial will show you how to use React with Laravel in a way that lets you sprinkle React into a legacy Laravel codebase and blade templates. We will not be creating an SPA or using Create React App.</p>
<p><strong>You can view and download the full sample project.</strong></p>
<p><a href="https://github.com/jcz530/laravel-plus-react">https://github.com/jcz530/laravel-plus-react</a></p>
<h3>After going through this guide...</h3>
<ul>
<li>We'll be able to add React components into blade files.</li>
<li>We'll have reusable components that can be combined to make complex components.</li>
<li>We'll use webpack (Laravel Mix) to build our files.</li>
<li>We <strong>will not</strong> have an SPA.</li>
<li>React <strong>will not</strong> be served with SSR (Server Side Rendering).</li>
<li>We <strong>will not</strong> be able to use the components as inline components like is popular with Vue. </li>
</ul>
<h3>Background</h3>
<p>I was inspired to write this guide because recently, I added React into a legacy project of mine, and I didn't want to rewrite the whole project to turn it into a React SPA. Instead, I wanted to reap the benefits of writing new React components that I could start sprinkling into my project right away.</p>
<p>There are a lot of ways to get React to load and render components, and this is simply the method I choose when working on my project. I'll walk you through how and why I chose this setup.</p>
<p>First thing's first, navigate to your existing or new Laravel project.</p>
<h2>Install Dependencies</h2>
<p><code>npm i react react-dom</code></p>
<h2>Folder Structure</h2>
<p>In the <code>/resources/js/</code> folder, we'll add a new folder where all of our React files will live. We want to keep these files all together and not mixed in with other JS files. This will keep the project organized, make some of the webpack setup easier, and allow for the use of other technologies.</p>
<p>In my case, I created a source folder for all of my React files at <code>/resources/js/src/</code>.</p>
<p>I have the following folders in the <code>src</code> folder.</p>
<ul>
<li>/src/components</li>
<li>/src/hooks</li>
<li>/src/layouts</li>
<li>/src/pages </li>
</ul>
<p>Your exact folders may vary depending on your needs and organizational style, but this could be a good place to start.</p>
<h2>Laravel Mix - Webpack setup</h2>
<h3>Aliases</h3>
<p>This step is optional, but I think it makes the project a lot easier and cleaner to work with. Defining aliases in the webpack configs will allow you to refer to your files without needing to know where in the file path you are.</p>
<p>For example, if you want to refer to your theme file from a component deep in the folder structure, without aliases, you might write</p>
<p><code>import theme from '../../../themes/theme.js'</code></p>
<p>With aliases, you would simply write</p>
<p><code>import theme from 'themes/theme.js'</code></p>
<p>To use aliases, you'll need to add them to your mix file <code>webpack.mix.js</code>.</p>
<pre><code class="language-js">mix.webpackConfig({
resolve: {
alias: {
//adding react and react-dom may not be necessary for you but it did fix some issues in my setup.
'react' : path.resolve('node_modules/react'),
'react-dom' : path.resolve('node_modules/react-dom'),
'components' : path.resolve('resources/js/src/components'),
'pages' : path.resolve('resources/js/src/pages'),
'themes' : path.resolve('resources/js/src/themes'),
'layouts' : path.resolve('resources/js/src/layouts'),
'hooks' : path.resolve('resources/js/src/hooks'),
},
},
});
</code></pre>
<figcaption>webpack.mix.js</figcaption>
<br>
<h3>Bundle and Extract React</h3>
<p>After you've added your aliases, you'll need to tell webpack to bundle your files and extract libraries. In the same <code>webpack.mix.js</code> file, add the following line. Notice that we're using <code>mix.react</code> and we are using <code>app.js</code>. If your app.js file already has legacy code, you could create a new app file for the React components.</p>
<pre><code class="language-js">mix.react('resources/js/app.js', 'public/js').extract(['react', 'react-dom']);
</code></pre>
<figcaption>webpack.mix.js</figcaption>
<br>
<br>
<br>
<h2>Rendering the components</h2>
<p>This is where things get tricky.</p>
<p>Even though we aren't building an SPA, we still want to be able to build complex components that reuse multiple components. We're going to be mixing React components into blade files, and it would be great if we could retain some of the JS feel for the components so that we know we're referring to a React component, and it's not just a random div with an id.</p>
<p>Instead of referring to components as <code><div id="MyComponent" /></code></p>
<p>We are instead going to use <code><MyComponent /></code>.</p>
<p>This isn't valid html, so if you want to use the id method, all you'll have to do is uncomment one of the lines in the ReactRenderer.js file coming up.</p>
<br>
<br>
<h3>Create a simple component</h3>
<p>We need a simple component to test with, and this is about as simple as they get.</p>
<p>Create a new file with the following code in <code>src/components/MySimpleComponent.js</code>.</p>
<pre><code class="language-js">import React from 'react';
export default function MySimpleComponent(props) {
return (
<>
<h2>This was loaded from a React component.</h2>
</>
);
}
</code></pre>
<figcaption>components/MySimpleComponent.js</figcaption>
<br>
<br>
<h3>Set up app.js</h3>
<p>Next, we need to set up the app.js file. These are the lines that you'll need to add to the app.js file.</p>
<pre><code class="language-js">require('./bootstrap')
import React from 'react'
import ReactRenderer from './src/ReactRenderer'
import MySimpleComponent from 'components/MySimpleComponent'
const components = [
{
name: "MySimpleComponent",
component: <MySimpleComponent />,
},
]
new ReactRenderer(components).renderAll()
</code></pre>
<figcaption>app.js</figcaption>
<p><strong>A little explanation.</strong></p>
<p>In our app.js file we will import any components that we want to use within the blade files and add them to an array. We'll use the 'name' element to find all the references to the component in the blade files, and we'll use the 'component' element to render it.</p>
<p>Next we need to add the <code>ReactRenderer.js</code> file.</p>
<pre><code class="language-js">import React from 'react';
import ReactDOM from 'react-dom';
export default class ReactRenderer {
constructor(components) {
this.components = components;
}
renderAll() {
for (let componentIndex = 0; componentIndex < this.components.length; componentIndex++) {
// Use this to render React components in divs using the id. Ex, <div id="MySimpleComponent"></div>
// let container = document.getElementById(this.components[componentIndex].name);
// Use this to render React components using the name as the tag. Ex, <MySimpleComponent></MySimpleComponent>
let containers = document.getElementsByTagName(this.components[componentIndex].name)
if (containers && containers.length > 0) {
for (let i = containers.length - 1; i >= 0; i--) {
let props = this.getPropsFromAttributes(containers[i]);
let element = this.components[componentIndex].component;
if (props !== null) {
element = React.cloneElement(
element,
props
)
}
ReactDOM.render(element, containers[i]);
}
}
}
}
// Turns the dom element's attributes into an object to use as props.
getPropsFromAttributes(container) {
let props = {};
if (container.attributes.length > 0) {
for (let attributeIndex = 0; attributeIndex < container.attributes.length; attributeIndex++) {
let attribute = container.attributes[attributeIndex];
if (this.hasJsonStructure(attribute.value)) {
props[attribute.name] = JSON.parse(attribute.value);
} else {
props[attribute.name] = attribute.value;
}
}
return props;
}
return null;
}
hasJsonStructure(str) {
if (typeof str !== 'string')
return false;
try {
const result = JSON.parse(str);
const type = Object.prototype.toString.call(result);
return type === '[object Object]' || type === '[object Array]';
} catch (err) {
return false;
}
}
}
</code></pre>
<figcaption>ReactRenderer.js</figcaption>
<br>
<p>You can read through the code to more fully understand what is happening. At its core, it's just finding all DOM elements that match your components and rendering them with any props included as well.</p>
<br>
<br>
<br>
<h2>Put it to work</h2>
<p>Now that we have everything in place, we can start to build more components and add them to blade files.</p>
<p>Here are some examples of adding it to blade files.</p>
<pre><code class="language-php">...
<MySimpleComponent></MySimpleComponent>
@guest
<MySecondComponent
title="This is using blade's {{'@'}}guest helper to show to 'Guests' only"
/>
@endguest
@auth
{{-- Remember to use "json_encode" to pass in objects --}}
<MySecondComponent
title="This is showing to authed users"
user="{{ json_encode(auth()->user()) }}"
/>
@endauth
...
</code></pre>
<figcaption>app.blade.php</figcaption>
<br>
<p>In the source code for this tutorial, I've also included a second component that accepts a <code>title</code> prop. This code is a snippet from the <code>app.blade.php</code> file in the source code.</p>
<p>If you download and run the sample project, you will get something that looks like this.</p>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/cc6dbebf47259dc3b41f21332a5d79d3/00d43/screenshot-laravel-plus-react.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 62.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAADxUlEQVQ4y32Sa0+adxiHn6+yr6C1dXWorY61ExrnqrUe5tmhQp56RAVPqMUDCFhROQjiAVRQxOIBFc9atLZqrDqb1SYzW7PMZC5Z1pR/+P/2rB9gL67c764X1+9m4vkJ4MV+fXU39u51eFjEdRjHjRu3rsPDb16H/3f/hzCOKF7sdXRM3J9fRkX/E3k7+j4ji+JBylHNi4E44haKIiIhiozCj7d5KPgqBnm8O8iNiUP2HT6y4u4hM/5bZPAFSLv3AKn3E5H9MB05qdlIS87Eo+SMJAaRN/Epmvfx7/h48leCgFwlfk8+pDwmv6Rnk4ucQnJeKCFvxBXkoLSW7EmbyLZcSdYVXWRZqSfzahPx6GxBV6/jk8M8BXP/hIC5io3FBz4/eJkgoBeJSThPTsVJWhYOswqwn1+CQHEZNtlqrFbUY7GmBbP1HfA0a+Fq68WY2oyR7mFq7R8PGc1uaA1OIfM7/xtcCh4E33/3kL5NScNpejaOsguxXyDGC1EpNiRSrJTXwydthreOk7V0Y7KjH2MaC0Z6RmE1OKnJ4gnph+ehss4IGU6Gi6Tk4NtH6fQkIwdHOSLsF0qwy0oRqGvFdrMaq61arHQZ4NMNYFJlhENrxbDeDovRBaN1hvaO+kLa8RUoRxeFzEVSCn5KzQi+ycylh7lFeClisSOuxGZlA3Y6e7DdY8Gyxgi/2YEFixN27SCGeh2wmKZgGPSix75Itc61UOf0DhTOdSFz/jgTxz/kBw/yiule0RNsc7L1cjnWFSr4n+rg6+yDV2PG9LMhuAxjGLO6YTJNos/GyRxL0LjWaacnEGqde4U6T0DIHHPxX+eXBHeLy+iWpApbslZsKnVY15mw0juEJfMY5qwueIamMeWYw/jEIoYnV9DnXIXatYGOmV3aOn8Qalw+gXT+QMi85uIHSsqDW09q6GpFA12WK+lCs4Z62/TUrTZRZ7eN2vscdMg0SQcGn1OD3Uf1rjWqcW/R9ud7tGXhkDb6T0O1Gz+jbPlUyHAybJbWflytaiSLsqdktkFFuCWJq72fODQWMtwzSiwGJzFaPEQ/skC4+EQ1tUXavC9Ji++INKycEdnmRbAycAnJxjsBs1Emg1+qgE/eBq+iC9NKPZwqE+w62+f4A9zDGmyf44OLj87pF1DOvoJi6Rh1a+eo2X6Pyr3fwB78AdHur0mMW1wlnSiVS+xVTeyQTMlaGtSsseUZq2/vZ3VdFlbdPcK2942zrWY322SbZeWjS2z1xBpb4d5hn3j3WfHCESvyn7F5G+/KMvxnX/wLsGCblKF5zLAAAAAASUVORK5CYII='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/cc6dbebf47259dc3b41f21332a5d79d3/ba381/screenshot-laravel-plus-react.webp 200w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/7f61c/screenshot-laravel-plus-react.webp 400w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/d00b9/screenshot-laravel-plus-react.webp 800w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/a5d4d/screenshot-laravel-plus-react.webp 1000w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/cc6dbebf47259dc3b41f21332a5d79d3/772e8/screenshot-laravel-plus-react.png 200w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/e17e5/screenshot-laravel-plus-react.png 400w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/5a190/screenshot-laravel-plus-react.png 800w,
/static/cc6dbebf47259dc3b41f21332a5d79d3/00d43/screenshot-laravel-plus-react.png 1000w" sizes="(max-width: 800px) 100vw, 800px" type="image/png"/>
<img class="gatsby-resp-image-image" src="/static/cc6dbebf47259dc3b41f21332a5d79d3/5a190/screenshot-laravel-plus-react.png" alt="Screenshot of the sample project webpage" title="Screenshot of the sample project webpage" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<p>I encourage you to download the repo, explore, and make modifications to test it out. <a href="https://github.com/jcz530/laravel-plus-react">https://github.com/jcz530/laravel-plus-react</a></p></br></br></br></br></br></br></br></br></br></br></br></br></br>]]></content:encoded></item><item><title><![CDATA[I'm wearing a hat]]></title><description><![CDATA[I don't always consider myself a developer. Some would classify this thinking as imposter syndrome. To me, it's something else.]]></description><link>https://joeczubiak.com/im-wearing-a-hat/</link><guid isPermaLink="false">dba150e2-7294-5413-82c0-ca89d51884c1</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Tue, 25 Aug 2020 16:06:08 GMT</pubDate><media:content url="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png"/><p>I've been writing code for over ten years now and much of that time I've done it professionally. I don't, however, always consider myself a developer. Some would classify this thinking as imposter syndrome. To me, it's something else.</p>
<p>I think of myself as the guy that gets things done. I'm not in love with any technology. I'm not in love with front-end or back-end. Technology, coding languages, and design frameworks are all just a means to an end. I'll learn whichever technology I need to get a project done, to solve a problem, or to fulfill some needs.</p>
<p>I love to think through the entire project from dev to design to marketing to customer service. I want projects to be sustainable and organized. Part of that equation is writing code that is elegant and easy to understand and maintain. When I'm wearing my developer hat — I am a developer.</p>
<p>Hats are interchangeable and I have a number of hats at my disposal. As a person focussed on outcomes, sometimes I need to wear every hat I've got. When a problem presents itself and it's out of scope for the hat I'm wearing, I look for another hat.</p>
<p>As humans, we love to categorize and label things. It makes the world easier to understand. It's a lot easier to apply labels outward onto others and harder to pin down the labels that apply to ourselves. Outward labels help us to think that we understand what we see and experience. It's harder to distill something that we know very well, like yourself, into categories because it's easy to see how little that categorization actually covers.</p>
<p>The categorizations you give yourself can start to feel flimsy when you meet people in the world that, in your eyes, fit the description better. What's worse is that when you see someone online, you can easily over assume qualities of the person and forget your own. When we talk with people in person, we try to connect and find things we both relate to. Reading and browsing online, however, is a one-sided conversation you have in your head and can easily make you feel much worse than you should.</p>
<p>Somebody else's shiny hat doesn't affect your own. For me, I like being able to change hats. I have strong curiosities in many areas and sticking to one style all the time is not what I need. For others, polishing and growing one hat may be exactly what they need.</p>
<p>At the end of the day, it's just a hat. It's up to you to decide how much that hat defines you.</p>]]></content:encoded></item><item><title><![CDATA[Bridging CMS content and react components via shortcodes]]></title><description><![CDATA[I thought it would be nice to create my own implementation of shortcodes for my blog so I can include my custom react components into my post by adding a simple shortcode. This creates the bridge between CMS and code that I was missing.]]></description><link>https://joeczubiak.com/bridging-cms-content-and-react-components-via-shortcodes/</link><guid isPermaLink="false">a7cfa501-f7f6-5040-8e28-a695d78e628b</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Tue, 28 Jul 2020 02:12:18 GMT</pubDate><media:content url="https://joeczubiak.com/static/627f10ca50328672a2c24eea329fd70f/bridging-cms-content-and-react-components-via-shortcodes.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/627f10ca50328672a2c24eea329fd70f/bridging-cms-content-and-react-components-via-shortcodes.png"/><p>Recently I've taken up blogging as it were. I'm more of a developer than a writer but when it comes to the blog I thought it would be nice to use a proper CMS instead of coding in paragraph tags or writing in markdown. I don't need to make writing any harder than it is.</p>
<p>The problem that comes up as a developer writing with a CMS is that there's no bridge that allows you to mix a little code in with your content. If you're writing — you're writing. If you're coding — you're coding. There's no mingling going on. I want them to get to know each other.</p>
<p>Let's say I want to include an interactive or live map or chart that I built like I did in my <a href="https://joeczubiak.com/joes-apis">APIs post</a>. There's really not a great way to do that, especially in the middle of the content. We could write something custom into our post template to add a component at the end of a certain post but that's never a good idea.</p>
<p>This is where Shortcodes come in. Shortcodes is a concept popularized by <a href="https://wordpress.com/support/shortcodes/">WordPress</a> in which you can insert a short snippet into square brackets, for example [contact-form]. Where you place the shortcode in your content is where the actual component will load.</p>
<p>I thought it would be nice to create my own implementation of shortcodes for my blog so I can include my custom react components into my post by adding a simple shortcode. This creates the bridge between CMS and code that I was missing.</p>
<h3>Diving in</h3>
<p>We are using React in this example. The CMS that you use does not matter. I'm borrowing the concept from WordPress but went a different way in implementation; we're not going to use square brackets but instead a new html tag <code><sc></code> for <strong>s</strong>hort<strong>c</strong>ode. This is not an existing tag but rather a tag we are creating so that we can find our shortcodes when we render our page.</p>
<h3>The CMS</h3>
<p>At the end of this process we will be able to insert an html snippet into our post in the CMS and use our shortcode tag like this.</p>
<p><code><sc comp="ContactForm">Contact Form</sc></code></p>
<p>We define an attribute called 'comp' (component), this will specify which component we use to render the shortcode. We also should include some text in-between the tags to remind us what is loading here because when you are looking at the text in your CMS, the shortcode will look blank and you won't remember that you have a shortcode there unless you put in this descriptive text.</p>
<h3>Rendering the content</h3>
<p>The trick to making this work is running an html parser instead of simply loading in the html. You might be used to loading your content with something like <code><div dangerouslySetInnerHTML={{ __html: post.html }} /></code>. In our version we are going to replace that with our own implementation so it looks like <code><HtmlParser html={post.html} /></code>.</p>
<p>Now we need to build our HtmlParser. Our component will rely on the <a href="https://www.npmjs.com/package/html-react-parser">html-react-parser</a> library. You will need to include that with your package manager.</p>
<pre><code class="language-js">import React from 'react'
// import your components the shortcodes reference.
import ContactForm from 'components/ContactForm'
import parse from 'html-react-parser'
const HtmlParser = ({ html }) => {
// Replace shortcodes with their react component counterpart
const replace = (domNode) => {
// If we find the '<sc>' tag then we need to replace it.
if (domNode && domNode.name === `sc` && domNode.attribs) {
if (domNode.attribs.comp === `ContactForm`) {
return (
<ContactForm />
)
} else if (domNode.attribs.comp === `AnotherComponent`) {
return (
<AnotherComponent />
)
}
}
return domNode
}
return (
parse(html, { replace })
)
}
export default HtmlParser
</code></pre>
<p>Notice that we parse through the html and find the <sc> tags, we then use the comp attribute to check if it's an existing component and then explicitly load the component. For any new shortcodes, you'll have to add it to the HtmlParser.</sc></p>
<h3>Now they're mingling</h3>
<p>Now the code and content are talking to each other. This opens a lot of doors for making creative posts.</p>
<p>There are so many ways we could have gone about creating our shortcode system. This is just a starting point to help you think about bridging the CMS code gap. Further improvements could include allowing props to be passed to the components.</p>]]></content:encoded></item><item><title><![CDATA[Joe's APIs]]></title><description><![CDATA[I'm providing free APIs for anyone to use at data.joeczubiak.com. Our first API serves important public data about COVID-19. The idea is to provide a way to give myself and others useful tools to build interesting things with.]]></description><link>https://joeczubiak.com/joes-apis/</link><guid isPermaLink="false">d58c1c85-4da0-5b32-a436-6d9d155ce341</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Tue, 14 Apr 2020 21:30:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/6b7cf69637b2317a9a166b6cc160bb37/joes-api-cover-image.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/6b7cf69637b2317a9a166b6cc160bb37/joes-api-cover-image.png"/><p>TLDR: I'm providing free APIs for anyone to use at <a href="https://data.joeczubiak.com">data.joeczubiak.com</a>. Our first API serves important public data about COVID-19.</p>
<p>The LA Times and the NY Times are providing their COVID data to the public through GitHub. This is really commendable of them. The data is provided in the form of CSVs and is intended for researchers and scientists to use. It's a great way to quickly make the data public because everyday when the data changes you can download the latest version. However, this format isn’t great if you want to build realtime tools and charts for publishing.</p>
<p>That's where I come in. I decided I wanted to be able to use the data in this exact way, so I built a tool to do just that. Instead of just building this for me, I thought this could be a way in which I contribute to the efforts. It's now a free set of APIs that are available for anyone to use with no email or login required.</p>
<p><strong>Benefits of the API</strong></p>
<ul>
<li>Filterable</li>
<li>Sortable</li>
<li>Documented</li>
<li>Always uses the most recent available data</li>
<li>Returns JSON formatted data</li>
</ul>
<p>The importance of data accessibility is huge. News organizations such as the Los Angeles Times and New York Times are doing a really great job of gathering, organizing, and presenting the data. I'm hoping this makes the data a little more accessible for some people and we see more derivatives produced from it.</p>
<h3>Example Using the APIs</h3>
<p>Here's a quick example of something you can build with the APIs. This is a map showing the new cases in California over the past 7 days and total confirmed cases. Blue dots represent places with no new cases this week. If you read this post in the future, hopefully the dots will all be blue. You can hover over the dots to see the actual counts. This map uses the most recently published data from the LA Times.</p>
<ul>
<li>Columns — New cases recorded this week</li>
<li>Dots — Total confirmed cases</li>
<li>Blue — No new cases this week</li>
</ul>
<p><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; ">
<a class="gatsby-resp-image-link" href="/static/a074b6e6e1ad7b9b5149002e3f4faa70/5e4a4/covid-cases-map-of-california.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 73.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAACvUlEQVQ4y3WUW0/UQBTH+xX9Dhp9MCa+GEhMjDx4iS9IxBijotEYTHwABJSb4IWQAIvLbtvtZdpuL9N22mU1+gH+njPQvqAPJ53pdH7z/585p4bfPYacfYmT9ytQ+0dQy5so/QBJlkH4PjzXhRACw+EQYRgiSRJIKZHnOTL6Jk1T/eR1fm+I7W8opqZRz7xAtbgGtbqF8qiHJI7heR6cwQDuGZTnQRBoKEM4eMwRRZGGG/LTZ5TTz1A/foViZxdqVGPkCmR9CwFB+qapgRw+KeZooKyIQayuCcPlUz+soZ5fRMzyKU7GY6iUFLASUuoQzLZtOI6jg+GsNqa1RiEfwi4Mj0506OPQsvWJAeWJrYwJOopiVDFtEEELZEW8mccM1dZpn6BxRO8NnwYm2yIwAzlikl5XFUaqQpVJ1C5ZDYSGsAqGNiob+yHNQ63wDDig5Ie0mPpCQxUDa8rnwNP2I9cDp4dvnoFt7sh2RA6GFJJuXgMty4JlW631OD1NeKFK1EGE0fwSkk4XAQFSAjROtF3KeeT57Y23Cm2CmmQp2TtA9qOHKIl1GZTRENVhV4+5lHJSzjUoKRWSgZTjNIyQDOPTW26BpM6kSI9NVLQYsCUKQZfkhoEeF9u7ugEKBpaFtpgEIWJKFefyHJCt85whDnWQ3evBO+7Bp7VsZRNq7h3k+o7uomJ5A8nKhi4dmWatg3NAHus5Pwc2Iu6kvg21tI7xtdvIHz6HvPMI6vIk5M0HcLe/QpCyUikdBlc+gxqgdXbjXMz8tPt92B51yc53VJP38evSBP5cuILxxQmMrk9BrG7AOehAHB4hdFzqFNrYp00a9p8wXSrirS9Q92bx88Zd/L56Cyczc6jfLqAwqdwGDuKFj8jpP6CB3W5X22xa61/hcgVQzuTTN8ifvEa834FP73TX+B56lG/XtPAXwwgfPJuRYGEAAAAASUVORK5CYII='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/a074b6e6e1ad7b9b5149002e3f4faa70/ba381/covid-cases-map-of-california.webp 200w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/7f61c/covid-cases-map-of-california.webp 400w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/d00b9/covid-cases-map-of-california.webp 800w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/92f8c/covid-cases-map-of-california.webp 1200w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/5aba4/covid-cases-map-of-california.webp 1403w" sizes="(max-width: 800px) 100vw, 800px" type="image/webp"/>
<source srcset="/static/a074b6e6e1ad7b9b5149002e3f4faa70/772e8/covid-cases-map-of-california.png 200w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/e17e5/covid-cases-map-of-california.png 400w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/5a190/covid-cases-map-of-california.png 800w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/c1b63/covid-cases-map-of-california.png 1200w,
/static/a074b6e6e1ad7b9b5149002e3f4faa70/5e4a4/covid-cases-map-of-california.png 1403w" sizes="(max-width: 800px) 100vw, 800px" type="image/png"/>
<img class="gatsby-resp-image-image" src="/static/a074b6e6e1ad7b9b5149002e3f4faa70/5a190/covid-cases-map-of-california.png" alt="covid-cases-map-of-california" title="covid-cases-map-of-california" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"/>
</picture>
</a>
</span></p>
<p>This data has been provided by the <a href="https://www.latimes.com/">Los Angeles Times</a>. Source data: <a href="https://github.com/datadesk/california-coronavirus-data">Place Totals</a>.</p>
<ul>
<li>Update: This used to be an interactive map and has now been replaced by a still image.</li>
</ul>
<div><sc comp="CovidLANewCasesMap">Covid LA New Cases Map</sc></div>
<h3>To the future!</h3>
<p>Joe's APIs are going to expand beyond COVID-19. That was the obvious and time sensitive place to start and a great project to kick this off with. The idea is to provide a way to give myself and others useful tools to build interesting things. Now that I've built the platform, as inspiration hits, I can easily bring new endpoints to life.</p>
<p>You can take a look at <a href="https://data.joeczubiak.com">https://data.joeczubiak.com</a>.</p>]]></content:encoded></item><item><title><![CDATA[Finding Flour During the Pandemic]]></title><description><![CDATA[I started making sourdough a few months ago, finding my way to it though my journey into all things fermentation. Sourdough is yet another fermented product after all.]]></description><link>https://joeczubiak.com/finding-flour-during-the-pandemic/</link><guid isPermaLink="false">f8699427-8677-5686-8d69-107bf2ccbd98</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 08 Apr 2020 15:56:48 GMT</pubDate><media:content url="https://joeczubiak.com/static/cd112a3d46880aa7987d35f47a1f7e51/sourdough.jpeg" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/cd112a3d46880aa7987d35f47a1f7e51/sourdough.jpeg"/><p>I started making sourdough a few months ago, finding my way to it though my journey into all things fermentation. Sourdough is yet another fermented product after all. The starter is a culture of yeast, lactobacillus, and other bacteria. I had made a few sourdough starters and even made a loaf a year ago but I wasn't committed then. I ran into issues with my starter and got discouraged. One felt too active and smelt overwhelmingly cheesy and at least one got moldy when I forgot to feed it. Every time I started a new one it was another week of waiting.</p>
<p>Thinking of myself as more of a fermenter than a bread maker, I tried to make a loaf that was easy and didn't require what seemed at the time like an unfathomable amount of work that goes into the process of making a good sourdough. It tasted okay but didn't look great. That was the only loaf I made that year.</p>
<p>Enter 2020.</p>
<p>I decided to get a new starter going and this time I was committed to mastering sourdough. It wouldn't happen overnight, I needed repetition. So I stopped buying sourdough from the store and this forced me to step up and make a loaf every week. This new found journey into sourdough positioned me perfectly for this new life of "safer at home" restrictions. I have not been to a store in almost 4 weeks but I've had wonderful artisan style whole wheat sourdough bread nearly every day.</p>
<h3>To hoard or not to hoard.</h3>
<p>The empty shelves made that decision for me. As the days went on I was kicking myself for not buying more than one bag of flour the week before the quarantine started — when the shelves were still stocked! I can still picture the beautifully stocked shelves.</p>
<p>My supplies were dwindling, fast. It seems the rest of the country also found a new love for bread making while shut in at home. Where can you still buy flour? The store shelves were empty the last time I was there, Amazon was all sold out, several other websites I found by googling were also sold out. I finally found one that that looked like they were still in stock and still accepting orders.</p>
<p><a href="https://www.camascountrymill.com">Camas Country Mill</a> of Oregon. What could be better than buying straight from the source! It was a bit more expensive than buying flour from the store and maybe too expensive to be making pancakes with but we're on the pursuit of perfect artisan sourdough. The quality and flavor of the flour is integral to a bread where the only ingredients are flour, water, and salt.</p>
<p>My order was delivered quickly and I made my next loaf with Camas Country Mill Hard Red Spring Wheat Flour and their Dark Northern Rye Flour. It tasted fantastic — tangy, light, and a hint of rye.</p>
<p>This brings me to the reason I started writing this post in the first place. This pandemic has changed so many things and we've had to adjust in so many ways. We've had to become more resourceful and source our everyday needs from new places. Had it not been for the COVID-19 pandemic I would not have found Camas Country Mill. To this end, I am thankful. <strong>Thank you Camas Country Mill</strong> for providing a great product and a source of joy in these unique times.</p>]]></content:encoded></item><item><title><![CDATA[Netlify Contact Form with React Ant Design Form Components]]></title><description><![CDATA[We're building a simple contact form with three fields — name, email, message. It will be a React component that uses the Ant Design components to display a Netlify form.]]></description><link>https://joeczubiak.com/netlify-contact-form-with-react-ant-design/</link><guid isPermaLink="false">84bff608-4703-5b65-9dfc-d57bb21a3975</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Mon, 06 Apr 2020 18:00:31 GMT</pubDate><media:content url="https://joeczubiak.com/static/2ebbe22c24a3b2381d7875b9c6563752/netlify-contact-form-with-react-ant-design.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/2ebbe22c24a3b2381d7875b9c6563752/netlify-contact-form-with-react-ant-design.png"/><p>Using a Netlify form should be dead simple. The documentation isn't very thorough and they are doing a lot in the background that you usually don't need to know but when things go wrong it sure would have been nice to see some documentation.</p>
<h3>Skip ahead</h3>
<p>The full code and an interactive demo are at the bottom of the page.</p>
<h3>What we are building</h3>
<p>We're building a simple contact form with three fields — name, email, message.</p>
<p>It will be a React component that uses the Ant Design components to display a Netlify form.</p>
<h3>The setup</h3>
<p>React 16.13</p>
<p>GatsbyJS 2.19</p>
<p>Ant Design 4.1</p>
<p>ES6</p>
<p>I'm using Gatsby in this case but this tutorial doesn't refer to any Gatsby specifics. It should be fine for any project using Ant Design React Components and Netlify forms.</p>
<h3>How does Netlify know about your form?</h3>
<p>It's important to know how Netlify is working in the background to detect your form so we can give it exactly what it wants.</p>
<p>After you deploy your project to Netlify, they run post processing scripts to find any forms on your site. If they find one, the form will show up in the forms section of your Netlify account.</p>
<p><strong>Important: Your form will will not work on localhost. It must be deployed to Netlify to receive submissions.</strong></p>
<h3>Create the component</h3>
<p>In this example we are using functional React so let's define the component.</p>
<p>Create a new file called <code>NetlifyContactForm.js</code></p>
<p>We're going to need to use the form name in a couple of places so lets define it as a constant. The form name will be used by Netlify to give your form a name in your Netlify account. If you change this name in the future, Netlify will create a new form with the new name.</p>
<p>At this time, we'll also add our imports and create a base for our layout with a row and column. This will center our form on the page.</p>
<pre><code class="language-js">import React from 'react'
import { Row, Col, Button, Form, Input } from 'antd'
const { TextArea } = Input
import { UserOutlined, MailOutlined } from '@ant-design/icons'
const NetlifyContactForm = () => {
const formName = `contact`
return (
<Row
justify="space-around"
>
<Col
xs={22}
sm={18}
md={16}
lg={8}
>
{/* TODO: add form here */}
</Col>
</Row>
)
}
export default NetlifyContactForm
</code></pre>
<h3>Add a shadow html form for Netlify</h3>
<p>You might think, all I need to do is add a form with Ant Design components and give it the form name and it will all work fine. This will lead to much pain and suffering. Netlify will not recognize your form correctly.</p>
<p>Ant forms don't render the field name on the input itself and this causes problems when Netlify searches for your form. Instead of trying to hack around that, we will just provide a hidden html version of the form on the page. This is only for the Netlify bots to use so we've marked it as hidden.</p>
<p>Think of this as defining your form for Netlify. Notice that we set the form name to use the formName constant. This will tell Netlify to use that name when creating the form.</p>
<pre><code class="language-js">{/*
This defines how your form is setup for the Netlify bots.
Users will not see or interact with this form.
*/}
<form
name={formName}
data-netlify="true"
data-netlify-honeypot="bot-field"
hidden
>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
</code></pre>
<h3>Add the Ant Design form</h3>
<p>Next let's create the actual form that users will interact with using the Ant Design form components.</p>
<p>We have 4 fields defined in our form.</p>
<ul>
<li>bot-field: hidden field for netlify-honepot to use.</li>
<li>Name</li>
<li>Email</li>
<li>Message</li>
</ul>
<p>On each of the form items we also add "rules" for validation. Ant forms will automatically apply these rules when the use hits submit. Upon error, the fields will show the message you define.</p>
<p><strong>You <em>can't</em> use the same form name for this form as you did on the html version.</strong></p>
<p>You can give this form a throw away name because the html version of the form is the one that is actually used. Using the same name will cause errors on the Netlify side.</p>
<pre><code class="language-js"><Form
name="cf"
method="post"
onFinish={handleSubmit}
layout="vertical"
>
{/* This is the hidden field that the netlify-honeypot uses. */}
<Form.Item
label="Don't fill this out"
className={`hidden`}
style={{ display: `none` }}
name="bot-field"
>
<Input type={`hidden`} />
</Form.Item>
<Form.Item
label="Name"
rules={[{ required: true, message: `Please enter your name.` }]}
name="name"
>
<Input
placeholder="Name"
prefix={<UserOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
label="Email"
rules={[{ required: true, type: `email`, message: `Please enter your email.` }]}
name="email"
>
<Input
placeholder="Your Email"
prefix={<MailOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
label="Message"
rules={[{ required: true, message: `Please enter your message.` }]}
name="message"
>
<TextArea
placeholder="Your Message"
rows={5}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" disabled={false}>
Send
</Button>
</Form.Item>
</Form>
</code></pre>
<h3>Handle the submission</h3>
<p>Create a handleSubmit function. We've already told the form above to use handleSubmit on the form's onFinish callback.</p>
<pre><code class="language-js">const handleSubmit = (values) => {
if (values[`bot-field`] === undefined) {
delete values[`bot-field`]
}
fetch(`/`, {
method: `POST`,
headers: { 'Content-Type': `application/x-www-form-urlencoded` },
body: encode({
'form-name': formName,
...values,
}),
})
.then(() => showSuccess())
.catch(error => showError(error))
}
</code></pre>
<p>A couple of important things are happening in this function.</p>
<p>If the bot-field is empty, we have to remove it. It's presence is enough for Netlify to treat it as if you are a bot. You could arguable add an else statement and just not even submit the form in the first place if the bot-field is not empty. It's up to you, for this example we'll just let it go.</p>
<p>It's important the the body includes the 'form-name' field and that uses the formName constant.</p>
<p>You'll also notice that we have to encode the body fields. To do this we'll add an 'encode' function to the top of our file.</p>
<pre><code class="language-js">function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
.join(`&`)
}
</code></pre>
<h3>Lastly, handle the result</h3>
<p>In the <code>handleSubmit</code> function, we call <code>showSuccess()</code> and <code>showError()</code>.</p>
<p>You can do what you please with those methods. You'll probably want to show the user a message about whether the form submitted successfully or not. You might consider using the React state to hide the form after submission and show a success message. In the full code below we've added the functions with console logs to get you started.</p>
<p>Hope this helped. The full code and an interactive example is below.</p>
<h3>Full code</h3>
<pre><code class="language-js">import React from 'react'
import { Row, Col, Button, Form, Input } from 'antd'
const { TextArea } = Input
import { UserOutlined, MailOutlined } from '@ant-design/icons'
function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
.join(`&`)
}
const NetlifyContactForm = () => {
const formName = `contact`
const handleSubmit = (values) => {
if (values[`bot-field`] === undefined) {
delete values[`bot-field`]
}
fetch(`/`, {
method: `POST`,
headers: { 'Content-Type': `application/x-www-form-urlencoded` },
body: encode({
'form-name': formName,
...values,
}),
})
.then(() => showSuccess())
.catch(error => showError(error))
}
const showSuccess = () => {
// TODO: Show a success message or navigate to a success page.
console.log(`form submitted successfully`)
}
const showError = (error) => {
// TODO: Show an error message to the user
console.log(`There was an error submitting the form`)
console.log(error)
}
return (
<Row
justify="space-around"
>
<Col
xs={22}
sm={18}
md={16}
lg={8}
>
{/*
This defines how your form is setup for the Netlify bots.
Users will not see or interact with this form.
*/}
<form
name={formName}
data-netlify="true"
data-netlify-honeypot="bot-field"
hidden
>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<Form
name="cf"
method="post"
onFinish={handleSubmit}
layout="vertical"
>
{/* This is the hidden field that the netlify-honeypot uses. */}
<Form.Item
label="Don't fill this out"
className={`hidden`}
style={{ display: `none` }}
name="bot-field"
>
<Input type={`hidden`} />
</Form.Item>
<Form.Item
label="Name"
rules={[{ required: true, message: `Please enter your name.` }]}
name="name"
>
<Input
placeholder="Name"
prefix={<UserOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
label="Email"
rules={[{ required: true, type: `email`, message: `Please enter your email.` }]}
name="email"
>
<Input
placeholder="Your Email"
prefix={<MailOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
label="Message"
rules={[{ required: true, message: `Please enter your message.` }]}
name="message"
>
<TextArea
placeholder="Your Message"
rows={5}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" disabled={false}>
Send
</Button>
</Form.Item>
</Form>
</Col>
</Row>
)
}
export default NetlifyContactForm
</code></pre>
<figcaption>Full code for NetlifyContactForm.js</figcaption>
<p><code><NetlifyContactForm /></code></p>
<h3>Here it is. A working example below</h3>
<p>I did disable the request so it won't actually send.</p>
<div><sc comp="TutorialContactForm">Contact Form</sc></div>]]></content:encoded></item><item><title><![CDATA[Masks - The New Norm]]></title><description><![CDATA[The new norm in the US will be to wear a mask when you're sick. This is a cultural hurdle that has taken a pandemic to finally get over. It's not something that we treat as normal or American.]]></description><link>https://joeczubiak.com/masks/</link><guid isPermaLink="false">0ce19369-2f4d-545d-b596-433d0a76d9a3</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Mon, 06 Apr 2020 04:18:15 GMT</pubDate><media:content url="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png" medium="image"/><content:encoded><![CDATA[<h3>The new norm in the US will be to wear a mask when you're sick.</h3>
<img src="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png"/><p>This is a cultural hurdle that has taken a pandemic to finally get over. It's not something that we treat as normal or American. This COVID-19 pandemic is finally waking us up to the understanding of how viruses spread and how we can mitigate the spread.</p>
<p>It's all too common to apologize for being sick around friends, coworkers, and family — telling them not to hug, shake hands, or share food. What we are now realizing is that instead of saying sorry, we can actually take preventative measures to protect those around us. Not only that, but it is our responsibility to stop anyone else from catching our cold.</p>
<p>I left the house two days ago for the first time in almost a week and it was the first time in my life that I felt wrong for not wearing a mask. It felt like almost half of the people we passed were wearing a mask. The cultural norm of not wearing a mask has felt strong. It used to feel strange to see others wearing one as well. Not to mention that the media has hammered the idea that it's almost immoral to wear a mask because medical professionals need the masks more.</p>
<p>It's probably the case that the average person never needs to wear an N-95 mask in their life. We are starting to understand that stopping the spread of any illness is important and covering your mouth with anything is definitely better than nothing.</p>
<p>As I write this, the CDC has finally recommended that we wear a mask when we go outside. I went outside today and wore my mask the whole time. It felt like the right thing to do.</p>
<p>As we get more used to taking these preventative safety measures, I have faith that we will continue to do the right thing in the future. The amount of education the world is receiving on how disease spreads is amazing and hopefully will make a lasting impact on behavior throughout the world.</p>
<p>I wish I could predict that we'll never see another person leave a restroom without washing their hands! I'm not so optimistic on that one. Hopefully we'll see everyone (those of us who wash our hands!) washing for a little longer though.</p>]]></content:encoded></item><item><title><![CDATA[Hi there]]></title><description><![CDATA[Welcome to my site. I've been meaning to start writing for a long time. I finally updated this website with new flashy tech and now is time for me to fill it in with some content.]]></description><link>https://joeczubiak.com/hi-there/</link><guid isPermaLink="false">e4a6e469-678c-5cdd-9cb1-8c9f22a066f1</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 01 Apr 2020 21:01:32 GMT</pubDate><media:content url="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/4a7a610fd44b5c4b7f3c21d03374bd59/pattern-purple.png"/><p>Welcome to my site.</p>
<p>I've been meaning to start writing for a long time. I finally updated this website with new flashy tech and now is time for me to fill it in with some content.</p>]]></content:encoded></item><item><title><![CDATA[Patient Tracker V]]></title><description><![CDATA[Patient Tracker V brings project management tools to dentists to help organize and track complex cases.]]></description><link>https://joeczubiak.com/patient-tracker-v/</link><guid isPermaLink="false">242388b6-e953-5e61-a25e-b496fd4f2fdd</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 01 Apr 2020 14:57:26 GMT</pubDate><media:content url="https://joeczubiak.com/static/3cd0edb83ed4b0dfbb68217209c65703/ptv-header.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/3cd0edb83ed4b0dfbb68217209c65703/ptv-header.png"/><p><a href="https://patienttrackerv.com">Patient Tracker V</a> brings project management tools to dentists to help organize and track complex cases. It's a project I took on at the beginning of 2020.</p>
<p>With PTV dentists can have a private space for their team to communicate and track some of the more complex types of cases. This way everyone can be on the same page as to where treatment, admin, and billing are in the process.</p>
<p>This allows the dentist to take on more on these complex cases because they have a system they can rely on and have the freedom to free their mental space for more cases.</p>]]></content:encoded></item><item><title><![CDATA[StockTrot]]></title><description><![CDATA[It felt like a more or less simple idea at the time. Create an email alert system for Form 4 Insider Transactions on the stock market. Months of working late into the night later I had a database full of millions of historic transactions and a functional website.]]></description><link>https://joeczubiak.com/stocktrot/</link><guid isPermaLink="false">1241d1d5-1fb0-5e9e-a63d-722a005f0541</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 01 Apr 2020 14:57:00 GMT</pubDate><media:content url="https://joeczubiak.com/static/49574141d9ac06accf9efd951dad6702/stocktrot.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/49574141d9ac06accf9efd951dad6702/stocktrot.png"/><p><a href="https://stocktrot.com/">StockTrot</a> is a project I started in 2015.</p>
<p>It felt like a more or less simple idea at the time. Create an email alert system for <a href="https://stocktrot.com/learn/form4">Form 4 Insider Transactions</a> on the stock market.</p>
<p>Months of working late into the night later I had a database full of millions of historic transactions and a functional website.</p>
<p>I had so much data collected about transactions as well as the companies and corporate insiders involved that it made sense to create a UI that showed this information in an interesting way. I started digging into the data and dreaming up different ways to compare and make sense of the transactions.</p>
<p>Soon enough, I created a premium version that allowed access to some of the statistical calculations that StockTrot is generating and more sophisticated email alerts that contain extra context.</p>
<p>Like most of my projects, StockTrot was designed and built with the minimal human intervention needed. As an example, all of the "Tweetable Insights" on StockTrot are computer generated. To date it's generated over 500,000 of these. There's no way I was going to write those myself!</p>
<p>Eventually I got busy with demanding client work and didn't have the mental energy to keep the progress going. While I hadn't been making many changes during this period, organic traffic kept growing. 2020 is a new year and StockTrot will be seeing some changes soon!</p>]]></content:encoded></item><item><title><![CDATA[HuddleBot]]></title><description><![CDATA[HuddleBot is an automatic check-ins app.]]></description><link>https://joeczubiak.com/huddlebot/</link><guid isPermaLink="false">5ed97a1f-b0de-59d6-9fae-8500bb83a692</guid><dc:creator><![CDATA[Joe Czubiak]]></dc:creator><pubDate>Wed, 01 Apr 2020 14:50:54 GMT</pubDate><media:content url="https://joeczubiak.com/static/3f9a6585571eff36766ecc4ea5a77165/huddlebot.png" medium="image"/><content:encoded><![CDATA[<img src="https://joeczubiak.com/static/3f9a6585571eff36766ecc4ea5a77165/huddlebot.png"/><p><a href="https://marketplace.atlassian.com/apps/1222340/huddlebot?hosting=cloud&tab=overview">HuddleBot</a> is a Confluence add-on available from the Confluence Marketplace.</p>
<p>If you are unfamiliar with Confluence, it's part of the Atlassian Suite of products which include Jira, Trello, BitBucket, and more. Confluence is the document collaboration tool; you can create your company's knowledge base there. This is where you can store and collaborate on documents as well.</p>
<p>Atlassian has a thriving marketplace for third-party add-ons. Atlassian products are something that I've used for the last few years on my own projects as well as managing client projects. It felt like an approachable marketplace, as it's not so large and over crowded, and I have experience with the products.</p>
<p>I had a few ideas and HuddleBot was by far the more difficult idea, so naturally I chose it. Who can resist a challenge?</p>
<p>A challenge it was. That's going to have to be a story for another time.</p>
<h3>What is HuddleBot?</h3>
<p>HuddleBot is an automatic check-ins app. You create "huddles" — questions that are sent out to your team on a regular basis. You can have it send out daily, weekly, monthly, etc. Your team can then respond to it and comment on each others responses.</p>
<p> It removes the need for in person status meetings and can help foster a sense of community remotely. Instead of having a regular scheduled status meeting, you can let your team respond on their time. This also creates a paper record that you can always look back on at a later date.</p>
<p>HuddleBot integrates seamlessly into Confluence. It looks and feels like it belongs.</p>
<p>One of the things that was different and exciting about this project is that I don't store any actual data. I use a database that has one table and it keeps track of where it was installed and it let's me check if their license is still active. HuddleBot uses the Confluence REST API to load and store data onto the user's own Confluence instance.</p>
<p><img src="https://marketplace-cdn.atlassian.com/files/images/d70849b8-739f-43a4-862e-07648e801549.png"/></p>
<p><strong>Reduce Meetings & Build Community Remotely Through Automatic Check-Ins</strong></p>
<p>And that's <a href="https://marketplace.atlassian.com/apps/1222340/huddlebot?hosting=cloud&tab=overview">HuddleBot</a>. You can find it in the Atlassian marketplace.</p>]]></content:encoded></item></channel></rss>