~uglyduck/uglyduck.srht.site

327101a41134614ca313db49525e7846b6b7efed — Bradley Taunt 2 months ago 494dcd5
Slowly running through past articles to ensure proper layout and styling
M _posts/2018-02-12-stay-hungry.md => _posts/2018-02-12-stay-hungry.md +2 -1
@@ 1,8 1,9 @@
---
title: Stay hungry
title: Stay Hungry
date: 2018-02-12 00:00:00 Z
permalink: "/stay-hungry/"
layout: post
column: single
description: Staying passionate can help fuel your ambition
summary: As designers and developers, we need to keep pursuing what interests us about
  our industry. Staying passionate can help fuel your ambition.

M _posts/2018-08-07-setting-up-free-ssl.md => _posts/2018-08-07-setting-up-free-ssl.md +2 -1
@@ 1,8 1,9 @@
---
title: Setting up a free SSL
title: Setting Up a Free SSL
date: 2018-08-07 00:00:00 Z
permalink: "/setting-up-free-ssl/"
layout: post
column: single
description: Tutorial on how to easily setup a free SSL certificate
summary: All websites should be using SSL and there is no excuse not to have it setup.
  Let me show you how to easily add a free SSL certificate to any project.

M _posts/2019-04-05-indenting-text-with-css.md => _posts/2019-04-05-indenting-text-with-css.md +2 -2
@@ 18,8 18,8 @@ In today's *TypeTip* we're going to play around with the `text-indent` property,
Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:

<figure>
    {% cloudinary /public/images/text-indent-compatibility.webp alt="Text indent browser compatibility" %}
    <span class="marginnote">Full support across all browsers.</span>
    <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility">
    <figcaption>Full support across all browsers.</figcaption>
</figure>

Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for `text-indent` and some basic rules to follow:

M _posts/2019-04-15-still-using-jquery.md => _posts/2019-04-15-still-using-jquery.md +1 -0
@@ 3,6 3,7 @@ title: Yes, I Still Use jQuery
date: 2019-04-15 00:00:00 Z
permalink: "/still-using-jquery/"
layout: post
column: single
description: Explaining why I still use jQuery and how it's still usable in any tech
  stack
summary: It isn't the "latest and greatest" library out there. Some even claim that

M _posts/2019-05-03-first-letter.md => _posts/2019-05-03-first-letter.md +1 -0
@@ 3,6 3,7 @@ title: First Letter Pseudo Element
date: 2019-05-03 00:00:00 Z
permalink: "/first-letter/"
layout: post
column: single
description: Set specific styling for the first letter of a text element with CSS
summary: Set specific styling for the first letter of a text element with this handy
  and fully supported CSS pseudo element.

M _posts/2019-05-09-cut-your-forms-in-half.md => _posts/2019-05-09-cut-your-forms-in-half.md +1 -1
@@ 23,7 23,7 @@ Web forms tend to get a bad rep, mainly because so many horrible design choices 

Let's use a real-world form off the [Great West Life Insurance](https://www.greatwestlife.com) website as an example (left is original, right is updated):

{% cloudinary /public/images/cut-forms.webp alt="Great West Life form update" %}
<img src="/public/images/cut-forms.webp" alt="Great West Life form update">

### Breaking things down


M _posts/2019-05-15-improving-receipt-ux.md => _posts/2019-05-15-improving-receipt-ux.md +1 -1
@@ 35,7 35,7 @@ Fortunately, I think with some minor tweaks we can keep the underlying principle

Let's take a look at my redesign concept:

{% cloudinary /public/images/receipt-update.webp alt="Receipt Update" %}
<img src="/public/images/receipt-update.webp" alt="Receipt Update">

With this layout we are able to keep all the key concepts that [Susie Lu](https://twitter.com/datatoviz?lang=en) initially introduced with her receipt design while preserving more space.


M _posts/2019-06-08-html-like-1999.md => _posts/2019-06-08-html-like-1999.md +12 -12
@@ 20,24 20,24 @@ To be clear, I'm not advocating for creating projects that *look* like they belo

Let's do a very simple breakdown of some of the more common HTML no-nos:

<ul style="list-style:none;padding: 0;">
<li>❌ Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
<li>❌ Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
<li>❌ Creating tables built out of custom <code>div</code> elements</li>
<li>❌ Over-nesting elements or making overly complex depth to simple components</li>
<li>❌ Content being heavily reliant on JavaScript "injection"</li>
<ul>
<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
<li>Creating tables built out of custom <code>div</code> elements</li>
<li>Over-nesting elements or making overly complex depth to simple components</li>
<li>Content being heavily reliant on JavaScript "injection"</li>
</ul>

## Good HTML practices

So what should you do in place of these bad HTML implementations?

<ul style="list-style:none;padding: 0;">
<li>✅ Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
<li>✅ Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
<li>✅ Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
<li>✅ Keep element hierarchy as slim and top level as possible</li>
<li>✅ Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
<ul>
<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
<li>Keep element hierarchy as slim and top level as possible</li>
<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
</ul>

## My basic "structure" test

M _posts/2021-02-25-launching-thriftyname.md => _posts/2021-02-25-launching-thriftyname.md +1 -0
@@ 1,6 1,7 @@
---
title: "ThriftyName: $5 Brand Names"
layout: post
column: single
summary: "I have officially launched an amusing side project that creates brand names for $5 a pop"
---


M _posts/2021-03-11-introducing-pageroast.md => _posts/2021-03-11-introducing-pageroast.md +1 -0
@@ 1,6 1,7 @@
---
title: "Introducing PageRoast"
layout: post
column: single
summary: "Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate."
---


M _posts/2021-03-22-89-posts-one-file.md => _posts/2021-03-22-89-posts-one-file.md +2 -2
@@ 47,9 47,9 @@ Here is an image example of an old Dribbble shot I created years ago:

<figure>
    <div class="img-parent">
    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
    </div>
    <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
    <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
</figure>

I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.

M _posts/2021-04-13-macos-icon-css.md => _posts/2021-04-13-macos-icon-css.md +13 -12
@@ 13,15 13,15 @@ Don't care about reading through the tutorial? No problem! You can [jump right d
Let's take a look at the original Dribbble shot:

<figure>
    <img src="/placeholder-image.webp" onclick="this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'" alt="Big Sur Icon">
    <figcaption><b>Click the placeholder to load in the real image</b><br>The original Dribbble shot (<a href="https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
    <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon">
    <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
</figure>

And now let's see what we will be creating with only HTML &amp; CSS:

<figure>
    <img src="/placeholder-image.webp" onclick="this.src='/public/images/big-sur-css.webp'" alt="Big Sur Icon">
    <figcaption><b>Click the placeholder to load in the real image</b><br>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
    <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon">
    <figcaption>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
</figure>

Like I said - far from perfect but still a fun experiment!


@@ 117,7 117,9 @@ See that `--row-distance` variable? That will come into play a bit later. For no
}
```

So far so good. The next part *looks* like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):
## Targeting the Inner Rows

So far so good. The next part *looks* like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent `row` styling:

```
.blue-square .row {


@@ 128,6 130,11 @@ So far so good. The next part *looks* like a lot, but I assure you it's fairly s
    position: absolute;
    width: 100%;
}
```

Now we style each individual row item via the `nth-of-type` attribute:

```
.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
.blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
    width: 85px;


@@ 262,10 269,4 @@ Thanks to Bogdan for letting me butcher the original Dribbble shot :D

<h2 id="demo">Live Demo (CodePen)</h2>

<p class="codepen" data-height="710" data-theme-id="dark" data-default-tab="result" data-user="bradleytaunt" data-slug-hash="bGgBRaV" style="height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BG-D: Big Sur Mac App Icon">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">
  BG-D: Big Sur Mac App Icon</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br>
\ No newline at end of file
Feel free to explore the [live CodePen demo here](https://codepen.io/bradleytaunt/pen/bGgBRaV").
\ No newline at end of file

M _site/89-posts-one-file/index.html => _site/89-posts-one-file/index.html +2 -2
@@ 95,9 95,9 @@

<figure>
    <div class="img-parent">
    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons" />
    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons" />
    </div>
    <figcaption><b>Click the placeholder to load in the real image</b><br />Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
    <figcaption><b>Click the placeholder to load in the real image</b><br />Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
</figure>

<p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p>

M _site/articles/index.html => _site/articles/index.html +2 -2
@@ 513,7 513,7 @@

  <tr>
    <td width="100px"><time datetime="2018-08-06T20:00:00-04:00">2018-08-06&nbsp;&nbsp;</time></td>
    <td><a href="/setting-up-free-ssl/">Setting up a free SSL</a></td>
    <td><a href="/setting-up-free-ssl/">Setting Up a Free SSL</a></td>
  </tr>

  <tr>


@@ 528,7 528,7 @@

  <tr>
    <td width="100px"><time datetime="2018-02-11T19:00:00-05:00">2018-02-11&nbsp;&nbsp;</time></td>
    <td><a href="/stay-hungry/">Stay hungry</a></td>
    <td><a href="/stay-hungry/">Stay Hungry</a></td>
  </tr>

  <tr>

M _site/cut-your-forms-in-half/index.html => _site/cut-your-forms-in-half/index.html +1 -1
@@ 63,7 63,7 @@

<p>Let’s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w" sizes="100vw" alt="Great West Life form update" width="1623" height="2881" crossorigin="anonymous" /></p>
<p><img src="/public/images/cut-forms.webp" alt="Great West Life form update" /></p>

<h3 id="breaking-things-down">Breaking things down</h3>


M _site/feed.xml => _site/feed.xml +34 -39
@@ 4,7 4,7 @@
 <title>Ugly Duck</title>
 <link href="http://localhost:4000/atom.xml" rel="self"/>
 <link href="http://localhost:4000/"/>
 <updated>2021-11-11T13:15:02-05:00</updated>
 <updated>2021-11-12T09:18:54-05:00</updated>
 <id>http://localhost:4000</id>
 <author>
   <name>Bradley Taunt</name>


@@ 1302,15 1302,15 @@ button {
&lt;p&gt;Let’s take a look at the original Dribbble shot:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'&quot; alt=&quot;Big Sur Icon&quot; /&gt;
    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;The original Dribbble shot (&lt;a href=&quot;https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
    &lt;img src=&quot;/public/images/e54ac9b2850f786471d7790bec3844a6.webp&quot; alt=&quot;Big Sur Icon&quot; /&gt;
    &lt;figcaption&gt;The original Dribbble shot (&lt;a href=&quot;/public/images/e54ac9b2850f786471d7790bec3844a6.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;And now let’s see what we will be creating with only HTML &amp;amp; CSS:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='/public/images/big-sur-css.webp'&quot; alt=&quot;Big Sur Icon&quot; /&gt;
    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;What we are going to create with pure HTML &amp;amp; CSS (&lt;a href=&quot;/public/images/big-sur-css.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
    &lt;img src=&quot;/public/images/big-sur-css.webp&quot; alt=&quot;Big Sur Icon&quot; /&gt;
    &lt;figcaption&gt;What we are going to create with pure HTML &amp;amp; CSS (&lt;a href=&quot;/public/images/big-sur-css.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;Like I said - far from perfect but still a fun experiment!&lt;/p&gt;


@@ 1405,7 1405,9 @@ button {
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;So far so good. The next part &lt;em&gt;looks&lt;/em&gt; like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):&lt;/p&gt;
&lt;h2 id=&quot;targeting-the-inner-rows&quot;&gt;Targeting the Inner Rows&lt;/h2&gt;

&lt;p&gt;So far so good. The next part &lt;em&gt;looks&lt;/em&gt; like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;row&lt;/code&gt; styling:&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;.blue-square .row {
    display: flex;


@@ 1415,7 1417,11 @@ button {
    position: absolute;
    width: 100%;
}
.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Now we style each individual row item via the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;nth-of-type&lt;/code&gt; attribute:&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
.blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
    width: 85px;
}


@@ 1550,14 1556,7 @@ button {

&lt;h2 id=&quot;demo&quot;&gt;Live Demo (CodePen)&lt;/h2&gt;

&lt;p class=&quot;codepen&quot; data-height=&quot;710&quot; data-theme-id=&quot;dark&quot; data-default-tab=&quot;result&quot; data-user=&quot;bradleytaunt&quot; data-slug-hash=&quot;bGgBRaV&quot; style=&quot;height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;BG-D: Big Sur Mac App Icon&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/bradleytaunt/pen/bGgBRaV&quot;&gt;
  BG-D: Big Sur Mac App Icon&lt;/a&gt; by Bradley Taunt (&lt;a href=&quot;https://codepen.io/bradleytaunt&quot;&gt;@bradleytaunt&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
&lt;p&gt;Feel free to explore the &lt;a href=&quot;https://codepen.io/bradleytaunt/pen/bGgBRaV&amp;quot;&quot;&gt;live CodePen demo here&lt;/a&gt;.&lt;/p&gt;
</content>
 </entry>
 


@@ 1715,9 1714,9 @@ button {

&lt;figure&gt;
    &lt;div class=&quot;img-parent&quot;&gt;
    &lt;img loading=&quot;lazy&quot; src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot; /&gt;
    &lt;img loading=&quot;lazy&quot; src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot; /&gt;
    &lt;/div&gt;
    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt;
    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href=&quot;/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.&lt;/p&gt;


@@ 6037,24 6036,24 @@ var inputs = document.getElementsByClassName('checkbox-btn')

&lt;p&gt;Let’s do a very simple breakdown of some of the more common HTML no-nos:&lt;/p&gt;

&lt;ul style=&quot;list-style:none;padding: 0;&quot;&gt;
&lt;li&gt;❌ Using &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; elements for navigations or list components&lt;/li&gt;
&lt;li&gt;❌ Implementing custom &lt;code&gt;div&lt;/code&gt; layouts for forms while removing items like &lt;code&gt;select&lt;/code&gt; or &lt;code&gt;radio&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;❌ Creating tables built out of custom &lt;code&gt;div&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;❌ Over-nesting elements or making overly complex depth to simple components&lt;/li&gt;
&lt;li&gt;❌ Content being heavily reliant on JavaScript &quot;injection&quot;&lt;/li&gt;
&lt;ul&gt;
&lt;li&gt;Using &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; elements for navigations or list components&lt;/li&gt;
&lt;li&gt;Implementing custom &lt;code&gt;div&lt;/code&gt; layouts for forms while removing items like &lt;code&gt;select&lt;/code&gt; or &lt;code&gt;radio&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Creating tables built out of custom &lt;code&gt;div&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;Over-nesting elements or making overly complex depth to simple components&lt;/li&gt;
&lt;li&gt;Content being heavily reliant on JavaScript &quot;injection&quot;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;good-html-practices&quot;&gt;Good HTML practices&lt;/h2&gt;

&lt;p&gt;So what should you do in place of these bad HTML implementations?&lt;/p&gt;

&lt;ul style=&quot;list-style:none;padding: 0;&quot;&gt;
&lt;li&gt;✅ Use proper &lt;code&gt;nav&lt;/code&gt;, &lt;code&gt;ul&lt;/code&gt; and &lt;code&gt;ol&lt;/code&gt; for navigations or list components&lt;/li&gt;
&lt;li&gt;✅ Style form elements directly &lt;a href=&quot;https://www.filamentgroup.com/lab/select-css.html&quot;&gt;this is already supported in browsers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;✅ Build tables using &lt;code&gt;table&lt;/code&gt; element structure (mind-blowing, I know!)&lt;/li&gt;
&lt;li&gt;✅ Keep element hierarchy as slim and top level as possible&lt;/li&gt;
&lt;li&gt;✅ Avoid injecting &lt;i&gt;any&lt;/i&gt; content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)&lt;/li&gt;
&lt;ul&gt;
&lt;li&gt;Use proper &lt;code&gt;nav&lt;/code&gt;, &lt;code&gt;ul&lt;/code&gt; and &lt;code&gt;ol&lt;/code&gt; for navigations or list components&lt;/li&gt;
&lt;li&gt;Style form elements directly &lt;a href=&quot;https://www.filamentgroup.com/lab/select-css.html&quot;&gt;this is already supported in browsers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Build tables using &lt;code&gt;table&lt;/code&gt; element structure (mind-blowing, I know!)&lt;/li&gt;
&lt;li&gt;Keep element hierarchy as slim and top level as possible&lt;/li&gt;
&lt;li&gt;Avoid injecting &lt;i&gt;any&lt;/i&gt; content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;my-basic-structure-test&quot;&gt;My basic “structure” test&lt;/h2&gt;


@@ 6269,7 6268,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')

&lt;p&gt;Let’s take a look at my redesign concept:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Receipt Update&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/public/images/receipt-update.webp&quot; alt=&quot;Receipt Update&quot; /&gt;&lt;/p&gt;

&lt;p&gt;With this layout we are able to keep all the key concepts that &lt;a href=&quot;https://twitter.com/datatoviz?lang=en&quot;&gt;Susie Lu&lt;/a&gt; initially introduced with her receipt design while preserving more space.&lt;/p&gt;



@@ 6304,7 6303,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')

&lt;p&gt;Let’s use a real-world form off the &lt;a href=&quot;https://www.greatwestlife.com&quot;&gt;Great West Life Insurance&lt;/a&gt; website as an example (left is original, right is updated):&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Great West Life form update&quot; width=&quot;1623&quot; height=&quot;2881&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/public/images/cut-forms.webp&quot; alt=&quot;Great West Life form update&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;breaking-things-down&quot;&gt;Breaking things down&lt;/h3&gt;



@@ 6656,12 6655,8 @@ var inputs = document.getElementsByClassName('checkbox-btn')
&lt;p&gt;Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Text indent browser compatibility&quot; width=&quot;2084&quot; height=&quot;868&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;span class=&quot;marginnote&quot;&gt;Full support across all browsers.&lt;/span&gt;
    &lt;img src=&quot;/public/images/text-indent-compatibility.webp&quot; alt=&quot;Text indent browser compatibility&quot; /&gt;
    &lt;figcaption&gt;Full support across all browsers.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;text-indent&lt;/code&gt; and some basic rules to follow:&lt;/p&gt;


@@ 9321,7 9316,7 @@ of the parent - not very flexible */&lt;/span&gt;
 </entry>
 
 <entry>
   <title>Setting up a free SSL</title>
   <title>Setting Up a Free SSL</title>
   <link href="http://localhost:4000/setting-up-free-ssl/"/>
   <updated>2018-08-06T20:00:00-04:00</updated>
   <id>http://localhost:4000/setting-up-free-ssl</id>


@@ 9424,7 9419,7 @@ of the parent - not very flexible */&lt;/span&gt;
 </entry>
 
 <entry>
   <title>Stay hungry</title>
   <title>Stay Hungry</title>
   <link href="http://localhost:4000/stay-hungry/"/>
   <updated>2018-02-11T19:00:00-05:00</updated>
   <id>http://localhost:4000/stay-hungry</id>

M _site/first-letter/index.html => _site/first-letter/index.html +1 -1
@@ 46,7 46,7 @@
        <h1>First Letter Pseudo Element</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2019-05-02T20:00:00-04:00">May 2, 2019</time></em></p>
        <hr>
        <p><em>In today’s TypeTip™ we will be taking a look at the often overlooked</em> <code class="language-plaintext highlighter-rouge">:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.</p>

M _site/html-like-1999/index.html => _site/html-like-1999/index.html +12 -12
@@ 59,24 59,24 @@

<p>Let’s do a very simple breakdown of some of the more common HTML no-nos:</p>

<ul style="list-style:none;padding: 0;">
<li>❌ Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
<li>❌ Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
<li>❌ Creating tables built out of custom <code>div</code> elements</li>
<li>❌ Over-nesting elements or making overly complex depth to simple components</li>
<li>❌ Content being heavily reliant on JavaScript "injection"</li>
<ul>
<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
<li>Creating tables built out of custom <code>div</code> elements</li>
<li>Over-nesting elements or making overly complex depth to simple components</li>
<li>Content being heavily reliant on JavaScript "injection"</li>
</ul>

<h2 id="good-html-practices">Good HTML practices</h2>

<p>So what should you do in place of these bad HTML implementations?</p>

<ul style="list-style:none;padding: 0;">
<li>✅ Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
<li>✅ Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
<li>✅ Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
<li>✅ Keep element hierarchy as slim and top level as possible</li>
<li>✅ Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
<ul>
<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
<li>Keep element hierarchy as slim and top level as possible</li>
<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
</ul>

<h2 id="my-basic-structure-test">My basic “structure” test</h2>

M _site/improving-receipt-ux/index.html => _site/improving-receipt-ux/index.html +1 -1
@@ 76,7 76,7 @@

<p>Let’s take a look at my redesign concept:</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp 1200w" sizes="100vw" alt="Receipt Update" width="1600" height="1200" crossorigin="anonymous" /></p>
<p><img src="/public/images/receipt-update.webp" alt="Receipt Update" /></p>

<p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p>


M _site/indenting-text-with-css/index.html => _site/indenting-text-with-css/index.html +2 -6
@@ 58,12 58,8 @@
<p>Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w" sizes="100vw" alt="Text indent browser compatibility" width="2084" height="868" crossorigin="anonymous" />
    <span class="marginnote">Full support across all browsers.</span>
    <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility" />
    <figcaption>Full support across all browsers.</figcaption>
</figure>

<p>Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code class="language-plaintext highlighter-rouge">text-indent</code> and some basic rules to follow:</p>

M _site/introducing-pageroast/index.html => _site/introducing-pageroast/index.html +1 -1
@@ 46,7 46,7 @@
        <h1>Introducing PageRoast</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2021-03-11T00:00:00-05:00">March 11, 2021</time></em></p>
        <hr>
        <p><em>Following up with my concept of releasing small side projects weekly</em>, I have officially launched <a href="https://pageroast.com">PageRoast</a>. What is PageRoast I hear you ask?</p>

M _site/launching-thriftyname/index.html => _site/launching-thriftyname/index.html +1 -1
@@ 46,7 46,7 @@
        <h1>ThriftyName: $5 Brand Names</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2021-02-25T00:00:00-05:00">February 25, 2021</time></em></p>
        <hr>
        <p><em>It’s been a while since I’ve written anything on this blog</em>, but for good reason - <strong>I’ve been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I’m announcing <a href="https://thrifty.name">ThriftyName</a>.</p>

M _site/macos-icon-css/index.html => _site/macos-icon-css/index.html +13 -14
@@ 58,15 58,15 @@
<p>Let’s take a look at the original Dribbble shot:</p>

<figure>
    <img src="/placeholder-image.webp" onclick="this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'" alt="Big Sur Icon" />
    <figcaption><b>Click the placeholder to load in the real image</b><br />The original Dribbble shot (<a href="https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
    <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon" />
    <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
</figure>

<p>And now let’s see what we will be creating with only HTML &amp; CSS:</p>

<figure>
    <img src="/placeholder-image.webp" onclick="this.src='/public/images/big-sur-css.webp'" alt="Big Sur Icon" />
    <figcaption><b>Click the placeholder to load in the real image</b><br />What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
    <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon" />
    <figcaption>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
</figure>

<p>Like I said - far from perfect but still a fun experiment!</p>


@@ 161,7 161,9 @@
}
</code></pre></div></div>

<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):</p>
<h2 id="targeting-the-inner-rows">Targeting the Inner Rows</h2>

<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code class="language-plaintext highlighter-rouge">row</code> styling:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.blue-square .row {
    display: flex;


@@ 171,7 173,11 @@
    position: absolute;
    width: 100%;
}
.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
</code></pre></div></div>

<p>Now we style each individual row item via the <code class="language-plaintext highlighter-rouge">nth-of-type</code> attribute:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
.blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
    width: 85px;
}


@@ 306,14 312,7 @@

<h2 id="demo">Live Demo (CodePen)</h2>

<p class="codepen" data-height="710" data-theme-id="dark" data-default-tab="result" data-user="bradleytaunt" data-slug-hash="bGgBRaV" style="height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BG-D: Big Sur Mac App Icon">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">
  BG-D: Big Sur Mac App Icon</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p><br /></p>
<p>Feel free to explore the <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV&quot;">live CodePen demo here</a>.</p>

      </article>
      <br>

A _site/public/images/e54ac9b2850f786471d7790bec3844a6.webp => _site/public/images/e54ac9b2850f786471d7790bec3844a6.webp +0 -0
M _site/setting-up-free-ssl/index.html => _site/setting-up-free-ssl/index.html +3 -3
@@ 7,7 7,7 @@

  <title>
    
      Setting up a free SSL &middot; Ugly Duck
      Setting Up a Free SSL &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Tutorial on how to easily setup a free SSL certificate">


@@ 43,10 43,10 @@

    <main id="main" role="main">
      <header>
        <h1>Setting up a free SSL</h1>
        <h1>Setting Up a Free SSL</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2018-08-06T20:00:00-04:00">August 6, 2018</time></em></p>
        <hr>
        <p>I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize <code class="language-plaintext highlighter-rouge">https</code> protocol.</p>

M _site/stay-hungry/index.html => _site/stay-hungry/index.html +3 -3
@@ 7,7 7,7 @@

  <title>
    
      Stay hungry &middot; Ugly Duck
      Stay Hungry &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Staying passionate can help fuel your ambition">


@@ 43,10 43,10 @@

    <main id="main" role="main">
      <header>
        <h1>Stay hungry</h1>
        <h1>Stay Hungry</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2018-02-11T19:00:00-05:00">February 11, 2018</time></em></p>
        <hr>
        <p>It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p>

M _site/still-using-jquery/index.html => _site/still-using-jquery/index.html +1 -1
@@ 46,7 46,7 @@
        <h1>Yes, I Still Use jQuery</h1>
      </header>
      <hr>
      <article class="">
      <article class="single">
        <p><em>Posted on <time datetime="2019-04-14T20:00:00-04:00">April 14, 2019</time></em></p>
        <hr>
        <p><em>I have seen a handful of condescending comments from front-end developers</em> since the newest build of jQuery (<a href="http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">3.4.0</a>) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any <em>useful</em> library comes off as entitled or elitist.</p>

A public/images/e54ac9b2850f786471d7790bec3844a6.webp => public/images/e54ac9b2850f786471d7790bec3844a6.webp +0 -0