dom jay | front end developerDominick Jay is an experienced creative Front-End Developer from Plymouth, UK, that specializes in fun, creative solutions.2024-03-09T00:00:00Zhttps://dominickjay.com/Dom Jayhello@dominickjay.comWeeknotes: April 12 – 18, 20212021-04-18T00:00:00Zhttps://dominickjay.com/writing/weeknotes-april-12-18/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-12-18/#professional">#</a></h3>
<ol>
<li>Watched a video on <a href="https://www.learnwithjason.dev/sketching-illustration-logo-creation" title="Sketching, Illustration, and Logo Creation by learnwithjason.dev">Sketching, Illustration, and Logo Creation</a></li>
<li>Found <a href="https://www.30secondsofcode.org/" title="30 seconds of code - Short code snippets for all your development needs">30 seconds of code - Short code snippets for all your development needs</a></li>
<li>Watched ‘Flexbox Exercises’ from Jen Kramer’s “CSS Grids and Flexbox for Responsive Web Design” course on <a href="https://frontendmasters.com/courses/css-grids-flexbox/" title="Front End Masters">Front End Masters</a></li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-12-18/#personal">#</a></h3>
<ol>
<li>Watched episode 4 of Marvel’s Falcon and the Winter Solider</li>
<li>Watched episode 4 of BBC’s Line of Duty</li>
<li>This week I walked 75,458 steps</li>
<li>I did a mix of weightlifting, cardio and bodyweight exercises 3 times this week.</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-12-18/#reading">#</a></h3>
<ol>
<li>The Handmaid’s Tale - Margaret Atwood</li>
<li><a href="https://app.daily.dev/posts/IAiuL1-1n">How To Create A Kickass GitHub Profile Page</a> - Catalin Pit</li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-12-18/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Gorillaz/Plastic+Beach"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/ce6e2af584a5480b85b79371b219a92e.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Gorillaz/Demon+Days"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/271483e955d2b255160f3361a7f5fb78.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Frightened+Rabbit/The+Midnight+Organ+Fight"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/7f1d3e4691744ed4a93479be733781eb.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Trent+Reznor+and+Atticus+Ross/The+Girl+with+the+Dragon+Tattoo"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/5e0869a6e54446f1b4645dce6a946e87.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Periphery/Periphery+IV:+HAIL+STAN"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/18546c9a43054ee6dec41671b8435f25.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/A+Celebration+of+Endings"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/cc62922acd761e60c371532d5c1f0939.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Poppy/I+Disagree"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a74796650781034d862975df0282b64a.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/Ghosts+VI:+Locusts"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/563c7bf8649c7e1ec51888fb33474f4e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/Year+Zero"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/f90e4bda05f14bd28978b5fffba59afa.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/Ghosts+I-IV"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/d5bc07e355524e68999d99bf65700516.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/Ghosts+V:+Together"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/cb6e6fcdda3c218091a0874b3f31937b.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/The+Downward+Spiral+(Deluxe+Edition)"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/f3582e43943d4725c82968e5bfe835a1.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Spiritbox/Singles+Collection+-+EP"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a3395c9dcf626db85dc62a4809c70c98.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/The+Fragile"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/8eaa9146fbad4b62bd5a489fc0651ec0.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Phoebe+Bridgers/Punisher"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/4e31f6b52ff52b99a93650badd19b2c5.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Death+Grips/Year+of+the+Snitch"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/17101ec892cf0dd4d09bef752c3015e1.jpg" loading="lazy" /></a></p>
</div>
Weeknotes: April 19 – 25, 20212021-04-25T00:00:00Zhttps://dominickjay.com/writing/weeknotes-april-19-25/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-19-25/#professional">#</a></h3>
<ol>
<li>Booked my AWS Cloud Practitioner certification exam</li>
<li>Read ‘<a href="https://piccalil.li/tutorial/what-are-design-tokens" title="Article for 'What are design tokens?'">What are design tokens?</a>’ by Andy Bell</li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-19-25/#personal">#</a></h3>
<ol>
<li>Watched episode 5 of Marvel’s Falcon and the Winter Solider</li>
<li>Watched episode 5 of BBC’s Line of Duty</li>
<li>This week I walked 91,391 steps this week according to Google Fit.</li>
<li>I did a mix of weightlifting, cardio and bodyweight exercises 2 times this week.</li>
<li>I had some annual leave this week so spent plenty of non-screen time with the kids, and our nieces doing various activities.</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-19-25/#reading">#</a></h3>
<ol>
<li>The Handmaid’s Tale - Margaret Atwood</li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-april-19-25/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/clipping./CLPPNG"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/303478e19e69b0dfbe5309bca9a708ff.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Lorn/Ask+the+Dust"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/30522883c09d403b8e0184a942750c5b.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Lorn/Vessel"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/97e540829fc31c91b1d3949d23bcea4f.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/The+Downward+Spiral+(Deluxe+Edition)"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/f3582e43943d4725c82968e5bfe835a1.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Panic!+at+the+Disco/Death+of+a+Bachelor"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/257fe11067041f5b10e758f64afb601e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Metallica/Ride+the+Lightning"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/9c2d54d8e7658b8d1a4f6ee607e4e1cb.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Phoebe+Bridgers/Punisher"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/4e31f6b52ff52b99a93650badd19b2c5.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Billie+Eilish/WHEN+WE+ALL+FALL+ASLEEP,+WHERE+DO+WE+GO%3F"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/c2652de4809e5b4349565518b34b85ca.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Foo+Fighters/Medicine+at+Midnight"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/f852e9019c7639d294a029b75fe63693.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/Bad+Witch"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/d7f871a0acd58c746e6b97357ceec0e8.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Radiohead/Hail+to+the+Thief"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/55ac8f97bde6cbe5e9a8857b435457e9.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/The+Dillinger+Escape+Plan/Ire+Works"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/94e2f87e09510404df6d7404bb4c28c9.jpg" loading="lazy" /></a></p>
</div>
Level Up Your Styles With CSS Variables2021-08-17T00:00:00Zhttps://dominickjay.com/writing/level-up-your-styles-with-css-variables/<h2 id="so%2C-what-are-css-variables%3F" tabindex="-1">So, What are CSS Variables? <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#so%2C-what-are-css-variables%3F">#</a></h2>
<p>CSS variables - otherwise known as custom properties - are specific values that can be reused throughout a document, similar to how variables are used in other programming languages. Let’s see a quick example and break the parts down.</p>
<h2 id="basic-usage" tabindex="-1">Basic Usage <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#basic-usage">#</a></h2>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span><br /> <span class="token property">--primaryColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> 99%<span class="token punctuation">,</span> 66%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--backgroundColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>207<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 96%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">main</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--backgroundColour<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">h1</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Atkinson Hyperlegible'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> -0.5px<span class="token punctuation">;</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primaryColour<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>There. Nice, quick example there - you can see this working below.</p>
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Variables - Basic Usage" src="https://codepen.io/dominickjay217/embed/abWMvGp?default-tab=&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/dominickjay217/pen/abWMvGp">
CSS Variables - Basic Usage</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.
</iframe>
<p>Now we’ve got that up, let’s see how this is put together, so let’s break this down.</p>
<div class="pull-quote pull-quote--left">
<p>Similar to class names and IDs, there’s no specific naming convention, so the world is your oyster and there are lots of different opinions on the best way</p>
</div>
<p>Firstly, the <code>:root</code> pseudo-class being used at the top of the example? That represents the root of the document tree (typically the <code>html</code> element) and is used to define custom properties in a way that will allow them to be used globally across your site. Neat! They can be defined elsewhere, but let’s not go into that right now.</p>
<p>Second, CSS custom properties are always prefixed with a <code>--</code>. Similar to class names and IDs, there’s no specific naming convention, so the world is your oyster and there are lots of different opinions on the best way.</p>
<p>After setting up the custom properties in <code>:root</code>, they can then be used within any CSS selector by using them alongside the <code>var()</code> function, which is what is being shown in the <code>background-color</code> and <code>color</code> properties in the example above.</p>
<h2 id="fallbacks" tabindex="-1">Fallbacks <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#fallbacks">#</a></h2>
<p>If a custom property has been set, <strong>but</strong> is actually invalid or just hasn’t been defined, for example, in both these cases;</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span><br /> <span class="token property">--primaryColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> 99%<span class="token punctuation">,</span> 66%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--backgroundColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>207<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 96%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--secondaryColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>155<span class="token punctuation">,</span> 61%<span class="token punctuation">,</span> 51%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">--secondaryBackgroundColour</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>343<span class="token punctuation">,</span> 6%<span class="token punctuation">,</span> 21%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">h2</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--thisDoesntExist<span class="token punctuation">,</span> lightgreen<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--thisDoesntExist<span class="token punctuation">,</span> black<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>I’ve declared my <code>secondaryColour</code> and <code>secondaryBackgroundColour</code> in <code>:root</code>, but for my <code>h2</code> element I’ve used a different custom property name (aptly titled “This Doesn’t Exist” for obvious reasons). Notice, that rather the function closing after <code>--thisDoesntExist</code>, another parameter is passed. <strong>That</strong> is our fallback colours.</p>
<iframe height="600" style="width: 100%;" scrolling="no" title="CSS Variables - Basic Usage" src="https://codepen.io/dominickjay217/embed/PomLaBp?default-tab=&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/dominickjay217/pen/PomLaBp">
CSS Variables - Basic Usage</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.
</iframe>
<h2 id="support%3F" tabindex="-1">Support? <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#support%3F">#</a></h2>
<p>Support for CSS custom properties is excellent, you would have to be using a relatively old browser at this time of writing to <strong>not</strong> be able to use them.</p>
<p><img src="https://images.contentful.com/d44h62nxqp3d/2CacnERymSW3hpuUaRV0ug/0715640040f5f3b42b137f459d97e4c3/Screenshot_2021-08-12_at_15-51-50_CSS_Variables__Custom_Properties__Can_I_use_Support_tables_for_HTML5__CSS3__etc.png" alt="Can I use Support tables for CSS Custom Properties" /></p>
<p><em>Source:</em> <a href="https://caniuse.com/css-variables" title="CanIUse link for CSS Variable support">CanIUse</a></p>
<h2 id="context-changing" tabindex="-1">Context Changing <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#context-changing">#</a></h2>
<p>One of the benefits of custom properties, is that they can be changed based on the context of the element it is assigned to.</p>
<iframe height="600" style="width: 100%;" scrolling="no" title="CSS Variables - Basic Usage with Fallbacks" src="https://codepen.io/dominickjay217/embed/eYWXPeL?default-tab=&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/dominickjay217/pen/eYWXPeL">
CSS Variables - Basic Usage with Fallbacks</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.
</iframe>
<p>In this example, the first h2 element we see uses the custom properties for <code>color</code> and <code>background-color</code>;</p>
<pre class="language-css"><code class="language-css"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--changeColour<span class="token punctuation">,</span> hotpink<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--changeBgColour<span class="token punctuation">,</span> black<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>But, they are not defined yet so they use the fallback colours instead. On the second h2 element, we then use the <code>.add-styles</code> class to define these custom properties of <code>changeColour</code> and <code>changeBgColour</code>, which in turn, allows this element to fullfil where they were originally being used, rather than using the fallback. Clever, eh? A great example I’ve seen of this is <a href="https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/" title="A post by Andy Bell for User Controlled Dark or Light Mode">this post</a> by Andy Bell, where it is being used within the <code>prefers-color-scheme</code> media query.</p>
<h2 id="using-with-javascript" tabindex="-1">Using With Javascript <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#using-with-javascript">#</a></h2>
<iframe height="350" style="width: 100%;" scrolling="no" title="CSS Variables - Basic Usage with Fallbacks and Context Changing" src="https://codepen.io/dominickjay217/embed/RwVmGQB?default-tab=&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/dominickjay217/pen/RwVmGQB">
CSS Variables - Basic Usage with Fallbacks and Context Changing</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.
</iframe>
<p>In this example, inline custom properties are set to allow new values for the <code>max-width</code> and <code>color</code> properities. While <code>max-width</code> uses a fallback of 550px, the <code>--maxWidth</code> value is not passed anywhere in the stylesheet, allowing it to differ from the example in the previous section. With the value of the <code>color</code> property, it is not using a fallback, or a different custom property. Instead, it is overwriting the <code>--primaryColour</code> value with a new color, and using CSS specificity to allow for the color to be changed.</p>
<h2 id="conclusion" tabindex="-1">Conclusion <a class="anchor-link" href="https://dominickjay.com/writing/level-up-your-styles-with-css-variables/#conclusion">#</a></h2>
<p>CSS custom properties are a great way to keep your styles controlled and consistent (because who wants to rely on a Find and Replace when a new branding colour comes along), and allows for <em>less</em> CSS to be written overall.</p>
CSS Object-Fit Property2021-10-20T00:00:00Zhttps://dominickjay.com/writing/css-object-fit/<h2 id="let%E2%80%99s-get-into-it" tabindex="-1">Let’s get into it <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#let%E2%80%99s-get-into-it">#</a></h2>
<p>By using the object-fit property, we can define how an element responds to its parent containers height and width. This property is mainly used alongside images and videos, and can let us have further control over how it allows an inline image to be displayed.</p>
<p class="codepen" data-height="537" data-theme-id="dark" data-slug-hash="zYdxjQB" data-user="dominickjay217" style="height: 537px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/dominickjay217/pen/zYdxjQB">
Object-Fit Example #1</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)on <a href="https://codepen.io/">CodePen</a>.</span></p>
<p>Looking at the example above, the inline image can be adjusted to the size of it’s parent container. There are a number of values that can be used to set <code>object-fit</code>.</p>
<h2 id="what-values-can-be-used%3F" tabindex="-1">What values can be used? <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#what-values-can-be-used%3F">#</a></h2>
<p>There are 5 values that can be used for this property; <code>fill</code>, <code>contain</code>, <code>cover</code>, <code>scale-down</code>and <code>none</code>.</p>
<h3 id="fill" tabindex="-1">Fill <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#fill">#</a></h3>
<p>Similar to background-size, the content is sized to completely fill the content box of the element, regardless of the height and width. If the aspect ratio of the content does not match the aspect ratio of the element, then it will stretch to fit.</p>
<h3 id="contain" tabindex="-1">Contain <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#contain">#</a></h3>
<p>When using <code>contain</code>, the content scales to keep its aspect ration while also fitting within the boundaries of the elements content box. Using this can make the object display gaps vertically or horizontally.</p>
<p>The entire object is made to fill the box, while preserving its aspect ratio, so the object will be “letterboxed” if its aspect ratio does not match the aspect ratio of the box.</p>
<h3 id="cover" tabindex="-1">Cover <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#cover">#</a></h3>
<p>This one is similar to <code>contain</code>, however, it will not “letterbox” the object to keep it’s aspect ratio. Instead it will continue to expand the content to fit the content box, often cropping the content as a result.</p>
<h3 id="scale-down" tabindex="-1">Scale-Down <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#scale-down">#</a></h3>
<p><code>scale-down</code> chooses the smallest object size between the results of <code>none</code> and <code>contain</code> being used.</p>
<h3 id="none" tabindex="-1">None <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#none">#</a></h3>
<p>For <code>none</code>, the width and height of the content box is ignored by the object, which will maintain it’s original size.</p>
<p class="codepen" data-height="614" data-theme-id="dark" data-slug-hash="bGrNKRX" data-user="dominickjay217" style="height: 614px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/dominickjay217/pen/bGrNKRX">
Object-Fit Example #1</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.</span></p>
<p>These values can also be used alongside the [[CSS Object Position]] property.</p>
<h2 id="support%3F" tabindex="-1">Support? <a class="anchor-link" href="https://dominickjay.com/writing/css-object-fit/#support%3F">#</a></h2>
<p>Support is <strong>very</strong> good, with - typically - IE 11 being the outcast.</p>
<p><img src="https://dominickjay.com/images/can-i-use-object-fit.png" alt=""Can I use" support tables for the object-fit property" /></p>
<p><em>Source:</em> <a href="https://caniuse.com/object-fit" title="CanIUse link for CSS3 object-fit">CanIUse</a></p>
<p>So, what are you waiting for? Go try it out!</p>
<div>
<p><img src="https://dominickjay.com/images/gifs/do-it-now.gif" alt="Do It Now Gif" /></p>
</div>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Weeknotes: February 14 - 20, 20222022-02-20T00:00:00Zhttps://dominickjay.com/writing/weeknotes-february-14-20/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-14-20/#professional">#</a></h3>
<ol>
<li>A blog post I had written for Rowe IT on Imposter Syndrome went live this week <a href="https://www.roweit.co.uk/imposter-syndrome">https://www.roweit.co.uk/imposter-syndrome</a></li>
<li>Finished off a post I had been writing about the React ‘Create React App’ tool.</li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-14-20/#personal">#</a></h3>
<ol>
<li>Went Axe throwing with my partner and was surprisingly pleased at the results.</li>
<li>Been watching ‘This is Going to Hurt’ on BBC iPlayer - quite enjoyed the book and while the TV series comes off a lot darker, I’m still enjoying it.</li>
<li>Bought tickets to see Nine Inch Nails in June at the Eden Project. First concert since all that COVID mess and absolutely stoked for it.</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-14-20/#reading">#</a></h3>
<ol>
<li>The Daily Stoic</li>
<li>Harry Potter and the Philosophers Stone</li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-14-20/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Kendrick+Lamar/To+Pimp+a+Butterfly"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/86b35c4eb3c479da49c915d8771bbd1a.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/clipping./Splendor+&+Misery"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/6f3990d8d4f487b22d8ea78e222b4cc6.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Run+the+Jewels/Run+the+Jewels+3"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a0cd54359d5caaca8159cfadb8a62c2f.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Kendrick+Lamar/DAMN."><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/8a59ed3a9c71cb5113325e2026889e4a.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Injury+Reserve/By+the+Time+I+Get+to+Phoenix"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/0f605ea6f6dc065b79d53924d8971272.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/clipping./There+Existed+An+Addiction+To+Blood"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/be0bff290ca9a6f213d20bccdf5033b4.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Tyler,+the+Creator/IGOR"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/e150fa362c89b8f1d92d883ae828b7ef.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Kendrick+Lamar/untitled+unmastered."><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/f990d085bca3182dfe436c098eed36c8.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/The+Weeknd/Dawn+FM"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/7da8e979d89d285b5ddf44e64b92f16c.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/DeVon+Hendryx/THE+GHOST~POP+TAPE"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/e8d2fd258def5fbde852d6dc5ac6c986.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Run+the+Jewels/RTJ4"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/18a72e7897f8b9897b36a4ed54dce3d1.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Death+Grips/The+Money+Store"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/30ef0d3d35720910529fe026a2d2fe7c.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Earl+Sweatshirt/Sick!"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/6c1adfd209ec41ba9b9e3ff1c93da3fa.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/SONOIO/SONOIO"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/b8de1ad4d45447409c61c4d50a036760.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Billie+Eilish/WHEN+WE+ALL+FALL+ASLEEP,+WHERE+DO+WE+GO%3F"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/c2652de4809e5b4349565518b34b85ca.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/clipping./CLPPNG"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/303478e19e69b0dfbe5309bca9a708ff.jpg" loading="lazy" /></a></p>
</div>
Weeknotes: February 21 - 27, 20222022-02-27T00:00:00Zhttps://dominickjay.com/writing/weeknotes-february-21-27/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-21-27/#professional">#</a></h3>
<ol>
<li>According to my site analytics my latest post has a personal best number of views, which makes me very happy that it’s being read.</li>
<li>Started planning my next post on React components.</li>
<li>Finished off an accessibility audit on my Rowe IT teams project.</li>
<li>My codepen for a info/error/warning component that I put together got picked by Codepen which was a great achievement for me. See it <a href="https://codepen.io/dominickjay217/pen/BamOBRZ">here</a>.</li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-21-27/#personal">#</a></h3>
<ol>
<li>As of Friday, I have walked approximately 25,989 steps.</li>
<li>I took a yoga class at the gym, and later on in the week did a mixture of bodyweight and free weight exercises.</li>
<li>Been playing ‘Animals’ by Muse on the guitar, not played the song in years and took some remembering, but definetely improved on it!</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-21-27/#reading">#</a></h3>
<ol>
<li>The Daily Stoic</li>
<li>Harry Potter and the Philosophers Stone</li>
<li>Lukas Oppermann - <a href="https://uxdesign.cc/naming-design-tokens-9454818ed7cb">Naming Design Tokens</a></li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-21-27/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Eminem/Music+to+Be+Murdered+By"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/c405c91c09132a4f379f91924bb1609e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Daniel+Avery/Love+%252B+Light"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/fb7c42b222013c086e0f97cf78f4d81e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Pantera/Vulgar+Display+of+Power"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/9c8ee1b2a56d758dff09f33a695b3ddd.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Daft+Punk/Random+Access+Memories"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/11dd7e48a1f042c688bf54985f01d088.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Eminem/The+Eminem+Show"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/94028f5dd89f3d070412cc8ec34ea86d.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Tyler,+the+Creator/CALL+ME+IF+YOU+GET+LOST"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/8bed6cc4a2f68d3bb2228fbe6654b887.gif" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Frightened+Rabbit/Pedestrian+Verse"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/af88d68ed8b24310a83a9412184a11d2.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Kendrick+Lamar/DAMN."><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/8a59ed3a9c71cb5113325e2026889e4a.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Earl+Sweatshirt/Sick!"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/6c1adfd209ec41ba9b9e3ff1c93da3fa.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Author+&+Punisher/Kr%C3%BCller"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a51421d80f9d7f6230ebc30a1b4b78f3.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Kendrick+Lamar/To+Pimp+a+Butterfly"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/86b35c4eb3c479da49c915d8771bbd1a.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Every+Time+I+Die/Radical"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/1e2d6a61fb90f365eaea442b56415790.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Frightened+Rabbit/The+Midnight+Organ+Fight"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/7f1d3e4691744ed4a93479be733781eb.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Tyler,+the+Creator/IGOR"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/e150fa362c89b8f1d92d883ae828b7ef.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Between+the+Buried+and+Me/Automata+I"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/4f89a1565bd1a0ae2b4f5b920a5ba730.jpg" loading="lazy" /></a></p>
</div>
Weeknotes: February 28 - March 06, 20222022-03-06T00:00:00Zhttps://dominickjay.com/writing/weeknotes-february-28-06/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-28-06/#professional">#</a></h3>
<ol>
<li>My codepen from last week was picked by the team and has had a slowly growing number of views and likes over the last week, so super happy about that. Currently on 74 ‘loves’ and 2,780 views. <a href="https://codepen.io/dominickjay217/pen/BamOBRZ">Here it is</a>.</li>
<li>Added in a dark/light mode toggle to this site (See at the top of the page, above the navigation) as found <code>prefers-color-scheme</code> wasn’t working on Firefox. <strong>[Editors note] - this was made for an old variation of the site</strong></li>
<li>Refactored a <em>whole</em> bunch of custom property names after a short discussion on the Front End Horse discord about naming conventions.</li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-28-06/#personal">#</a></h3>
<ol>
<li>According to Apple Health, I have walked 52,106 steps.</li>
<li>Started up bodyweight/cardio exercises, replacing my purely free-weight workouts, and feel much better for it.</li>
<li>Went to Paignton Zoo for my niece’s birthday. It’s somewhere we have visited at least once a year since my eldest was born and it’s always a good day out.</li>
<li>Had family round a few nights this week so got to see my 3 week old niece.</li>
<li>Went to see ‘The Batman’.</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-28-06/#reading">#</a></h3>
<ol>
<li>The Daily Stoic</li>
<li>Harry Potter and the Philosophers Stone</li>
<li>Harshil Patel - <a href="https://css-tricks.com/css-link-hover-effects/?utm_source=swlinks-tw">6 Creative Ideas for CSS Link Hover Effects</a></li>
<li>Dieter Raber- <a href="https://css-tricks.com/creating-color-themes-with-custom-properties-hsl-and-a-little-calc/">Creating Color Themes With Custom Properties, HSL, and a Little calc() </a></li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-february-28-06/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Biffy+Clyro/A+Celebration+of+Endings"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/cc62922acd761e60c371532d5c1f0939.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/The+Myth+of+the+Happily+Ever+After"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/c575d96b69274fdda98447ba26e0a19b.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Mac+Miller/The+Divine+Feminine"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/b8f1d45f318d32329329727444c51239.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Mac+Miller/Swimming"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/4ffccd2c839f30143a348dbcc57f5522.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Sleep+Token/This+Place+Will+Become+Your+Tomb"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/2b91378422afe120679bb0dfc731ab03.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Radiohead/A+Moon+Shaped+Pool"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/28db3fdca036fb53c62754694a89d3fd.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Run+the+Jewels/Run+the+Jewels+3"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a0cd54359d5caaca8159cfadb8a62c2f.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/The+Downward+Spiral"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/2dc4dedbe1f9441c832c26ec70b5704d.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/Similarities"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/0505963bd63d48b2c8639499d4fd4b03.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/Blackened+Sky"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/34beac524731c14df499da963ff4273b.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/Opposites"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/eb82bca5c03342f6a0dd1ee1d18d8c0e.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/The+Vertigo+of+Bliss"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/20ac566b33c04cd2b74d257308114690.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Kendrick+Lamar/To+Pimp+a+Butterfly"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/86b35c4eb3c479da49c915d8771bbd1a.png" loading="lazy" /></a></p>
</div>
Weeknotes: March 14 - 20, 20222022-03-14T00:00:00Zhttps://dominickjay.com/writing/weeknotes-march-14-20/<h3 id="professional" tabindex="-1">Professional <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-march-14-20/#professional">#</a></h3>
<ol>
<li>Finished up at Rowe IT as a Software Engineer. Great place to work, and lovely people - will miss the company a lot!</li>
<li>Started up a draft for creating a dynamic twitter header with Cloudinary and Netlify.</li>
<li>Carried on writing my deep dive into React components.</li>
</ol>
<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-march-14-20/#personal">#</a></h3>
<ol>
<li>Went to Bournemouth to visit my parents and friends I haven’t seen properly since the pandemic started.</li>
<li>Saw all my nieces, and was great to have some family time.</li>
</ol>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-march-14-20/#reading">#</a></h3>
<ol>
<li>The Daily Stoic</li>
<li>Harry Potter and the Chamber of Secrets</li>
<li><a href="https://www.getrevue.co/profile/aspit/issues/resetting-on-fridays-1069745?via=twitter-card&client=DesktopWeb&element=issue-card">Resetting on Fridays</a></li>
<li><a href="https://blog.devgenius.io/making-dynamic-twitter-header-e7dcd5e08f4a">Making dynamic Twitter header</a></li>
<li><a href="https://daily-dev-tips.com/posts/how-i-made-my-twitter-header-dynamic">How I made my Twitter header dynamic</a></li>
<li><a href="https://blog.jim-nielsen.com/2021/css-relative-colors/">Dynamic Color Manipulation with CSS Relative Colors</a></li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-march-14-20/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Puscifer/Conditions+of+My+Parole"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/ecaa7801b1e74d7e9b16596df99195ca.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Black+Country,+New+Road/Ants+From+Up+There"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/3332b3cee5de8598dbd080f8e2783f93.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Cult+of+Luna/The+Long+Road+North"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/ddeb18a5a499c639bfd56a129edf01af.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Tool/10,000+Days"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/7840c5a71ebd451e8a923ae09de91785.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Puscifer/Money+Shot"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/a026809ab13b0d9d6ccfea7867e8a087.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Tool/Lateralus"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/b5a5721a08264207c2df36bf07454005.jpg" loading="lazy" /></a></p>
</div>
2022 in Review2022-12-30T00:00:00Zhttps://dominickjay.com/writing/2022-in-review/<h2 id="i-started-a-new-role" tabindex="-1">I started a new role <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#i-started-a-new-role">#</a></h2>
<p>The first big thing that happened this year was leaving my previous role at RoweIT for pastures new at Series Eight. For me, this was a huge decision and one that has paid off time and time again. I’ve seen myself heading towards a full time remote role for a matter of years, and the pandemic gave me the opportunity to see if I could work in a remote environment while also having two young children. Luckily the opportunity arose with Series Eight, and its worked out very well! It’s also great to be working properly in the front end side of development again, and seeing what has changed in the couple of years I’ve been out of it.</p>
<h2 id="i-started-working-with-a-bunch-of-new-tech" tabindex="-1">I started working with a bunch of new tech <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#i-started-working-with-a-bunch-of-new-tech">#</a></h2>
<p>Jumping back into a full time dev role, I was introduced to a whole world of new things, now mainly using Tailwind and AlpineJS on top of Craft and Shopify sites. I’ve also started using Eleventy, finally jumping on the hype train and have been really pleased with the results.</p>
<h2 id="dev-community-game-was-weak" tabindex="-1">Dev Community game was weak <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#dev-community-game-was-weak">#</a></h2>
<p>After spending a few months near the end of last year being much more active on social media than I normally am, I fell out of habit with it. Mainly due to a busy personal life at the time, so didn’t have the time as much to hang out on the Frontend Horse discord as I would’ve liked to.</p>
<p>I also didn’t write, at all, from March until now. I had been writing a post on React components - at the time it was the start of a series on React as I was keen to learn it. The interest soon waived and I found myself struggling to finish it. Rather than just sling out Weeknote posts in the meantime, I took some time (admittedly more than I wanted in hindsight) to reevaluate what I wanted to write about. I’ve since gathered a ton of inspiration and topics to write about, so hopefully I’ll start posting more next year.</p>
<h2 id="i-went-to-portugal" tabindex="-1">I went to Portugal <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#i-went-to-portugal">#</a></h2>
<p>I also went abroad for the first time in years, and in doing so completely went out of my normal comfort zone. Not the biggest fan of flying, or navigating airports by myself, I found myself doing both (well, navigating an airport alone on the way back at least). This was over to Ericeria in Portugal, for Series Eights annual team retreat. It was great to see everyone in person rather than over a webcam.</p>
<p>I did a few activities I’ve always wanted to try but held back from doing it; surfing (kind of, more like “how can I not drown while Im attached to this”) and paddleboarding. All in all, a really good time. You can read more about it on S8’s site at <a href="https://serieseight.com/journal/ericeira-2022-our-biggest-and-best-team-trip-yet">https://serieseight.com/journal/ericeira-2022-our-biggest-and-best-team-trip-yet</a></p>
<h2 id="music-stats" tabindex="-1">Music stats <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#music-stats">#</a></h2>
<h3 id="top-artists" tabindex="-1">Top Artists <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#top-artists">#</a></h3>
<ol>
<li>
<p>IDLES</p>
</li>
<li>
<p>Nine Inch Nails</p>
</li>
<li>
<p>Biffy Clyro</p>
</li>
<li>
<p>clipping.</p>
</li>
<li>
<p>Radiohead</p>
</li>
<li>
<p>Jamie Lenman</p>
</li>
<li>
<p>Foo Fighters</p>
</li>
<li>
<p>Kendrick Lamar</p>
</li>
<li>
<p>Lamb of God</p>
</li>
<li>
<p>Rammstein</p>
</li>
</ol>
<h3 id="top-albums" tabindex="-1">Top Albums <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#top-albums">#</a></h3>
<ol>
<li>
<p><strong>Joy as an Act of Resistance.</strong> by IDLES</p>
</li>
<li>
<p><strong>Ultra Mono</strong> by IDLES</p>
</li>
<li>
<p><strong>CRAWLER</strong> by IDLES</p>
</li>
<li>
<p><strong>To Pimp a Butterfly</strong> by Kendrick Lamar</p>
</li>
<li>
<p><strong>There Existed An Addiction To Blood</strong> by clipping.</p>
</li>
<li>
<p><strong>Brutalism</strong> by IDLES</p>
</li>
<li>
<p><strong>Zeit</strong> by Rammstein</p>
</li>
<li>
<p><strong>The Myth of the Happily Ever After</strong> by Biffy Clyro</p>
</li>
<li>
<p><strong>Splendor & Misery</strong> by clipping.</p>
</li>
<li>
<p><strong>Madvillainy</strong> by Madvillain</p>
</li>
</ol>
<h2 id="german-stats" tabindex="-1">German stats <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#german-stats">#</a></h2>
<p>I decided to up my personal development and pick up another language using Duolingo this year too, and picked back up my German lessons. Got to a streak of <strong>243</strong> days so far, which is my longest to date. Feel like I’m getting used to how sentences are formed - slightly - so can only hope that continuing on with it in 2023 will be the same.</p>
<h2 id="read-more-books-than-ever" tabindex="-1">Read more books than ever <a class="anchor-link" href="https://dominickjay.com/writing/2022-in-review/#read-more-books-than-ever">#</a></h2>
Truncating text with line-clamp2023-02-23T00:00:00Zhttps://dominickjay.com/writing/line-clamp/<p>Let’s take a general card layout, we’ve all seen this before right? Standard image (provided by <a href="https://dominickjay.com/writing/line-clamp/placeskull.com">placeskull.com</a>), heading and text content. I’m leaving out a link, because how that is placed is a <em>whole</em> other thing.</p>
<style>
.card-example {
width: fit-content;
max-width: 50ch;
height: fit-content;
border: 2px solid black;
margin-block: 20px;
}
.card-example--thin {
max-width: 24ch;
}
.card-example--mh {
height: 100%;
max-height: 405px;
overflow: hidden;
}
.card-grid {
column-gap: 40px;
}
.card-example .flow {
padding-inline: 25px;
padding-block: 30px;
}
.card-example .flow > * + * {
margin-block-start: 1.5rem;
}
.card-example h3 {
font-size: 30px;
font-weight: bold;
margin-top: 0;
}
.card-example img {
width: 100%;
aspect-ratio: 16 / 9;
}
.card-example .clamped {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-example--truncate {
width: auto;
}
.card-example--truncate p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (max-width: 768px) {
.card-example--mh {
max-height: 375px;
}
}
@media (max-width: 395px) {
.card-example--mh {
max-height: 335px;
}
}
</style>
<div class="card-example">
<img src="http://placeskull.com/550/350" alt="" width="550" height="350" />
<div class="flow">
<h3 class="heading">Card heading</h3>
<p>Laborum sint laborum nostrud est. Est exercitation et occaecat ut proident non voluptate et. Laborum non id voluptate tempor ea anim anim eu irure laborum velit labore ullamco. Non ipsum labore consequat adipisicing amet ut reprehenderit.</p>
</div>
</div>
<p>You’ve got the markup done to the design, but haven’t accounted for the huge amount of text that the client will undoubtedly drop into only <em>some</em> of them.</p>
<figure><picture><source type="image/avif" srcset="https://dominickjay.com/assets/images/line-clamp-card-grid-900w.avif 900w" sizes="100vw" /><source type="image/webp" srcset="https://dominickjay.com/assets/images/line-clamp-card-grid-900w.webp 900w" sizes="100vw" /><source type="image/jpeg" srcset="https://dominickjay.com/assets/images/line-clamp-card-grid-900w.jpeg 900w" sizes="100vw" /><img src="https://dominickjay.com/assets/images/image-placeholder.png" data-src="/assets/images/line-clamp-card-grid-900w.jpeg" width="900" height="704" alt="A row of cards with long content" loading="lazy" decoding="async" /></picture><figcaption class="caption"><p>Our generic cards with longer than needed text on them.</p></figcaption></figure>
<p>Yuck. So we need to trim it down, make it look a bit more visually pleasing to the user right? We could just add a <code>max-height</code> to the cards, with an <code>overflow: hidden</code> on the <code>p</code> tag…maybe? Chuck in a few media queries to adjust for smaller screen sizes?</p>
<div class="card-example card-example--mh">
<img src="http://placeskull.com/550/350" alt="" width="550" height="350" />
<div class="flow">
<h3 class="heading">Card heading</h3>
<p>Laborum sint laborum nostrud est. Est exercitation et occaecat ut proident non voluptate et. Laborum non id voluptate tempor ea anim anim eu irure laborum velit labore ullamco. Non ipsum labore consequat adipisicing amet ut reprehenderit.</p>
</div>
</div>
<p>Well that looks terrible, and also ignores any padding that might around the content (hint: there is). We need to be able to trim the text off nicely, which is where <code>line-clamp</code> comes in. Hooray!</p>
<p>Using this property allows any text to be cut off, with the end of the visible text be replaced with an ellipses. There’s a few ways of doing this already <em>kind of</em>, using JS (there’s even a handy (?) npm script to help <a href="https://www.npmjs.com/package/line-clamp">line-clamp</a> ), <a href="https://github.com/josephschmitt/Clamp.js">Clamp.js</a> or the <code>text-overflow</code> property, as shown below.</p>
<div class="card-example card-example--truncate">
<img src="http://placeskull.com/550/350" alt="" width="550" height="350" />
<div class="flow">
<h3 class="heading">Card heading</h3>
<p>Laborum sint laborum nostrud est. Est exercitation et occaecat ut proident non voluptate et. Laborum non id voluptate tempor ea anim anim eu irure laborum velit labore ullamco. Non ipsum labore consequat adipisicing amet ut reprehenderit.</p>
</div>
</div>
<p>To break this down quickly, there’s three properties being used to get this solution - <code>overflow: hidden</code>, <code>text-overflow: ellipsis</code> and <code>white-space: nowrap</code>. <code>white-space: nowrap</code> puts all the text on one line, disregarding the boundaries of the box, <code>text-overflow: ellipsis</code> puts the familiar ‘…’ at the end of the text that is visible, and <code>overflow: hidden</code>…well…hides the overflow of the content. Due to this, it only works if you want one line of text, no more. Not ideal.</p>
<p class="ciu_embed" data-feature="css-line-clamp" data-periods="future_1,current,past_1" data-accessible-colours="false">
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-line-clamp.webp" />
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-line-clamp.png" />
<img src="https://caniuse.bitsofco.de/image/css-line-clamp.jpg" alt="Data on support for the css-line-clamp feature across the major browsers from caniuse.com" />
</picture>
</p>
<p>If you take a look at the above, currently <code>line-clamp</code> is supported in pretty much every major browser - except for that pesky IE - as long as we use it along with <code>display: -webkit-box</code> and a prefix of <code>-webkit-</code>. So we can use it like this:</p>
<pre class="language-css"><code class="language-css"><span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span><br /><span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span><br /><span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span><br /><span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></code></pre>
<p>Let’s throw this onto the <code>p</code> tag that’s used here (could also be a modifier on the parent block class if you’re familiar with BEM)</p>
<pre class="language-css"><code class="language-css">.clamped<span class="token punctuation">,</span> <span class="token comment">/* OR */</span><br /> <span class="token selector">.card-example--clamped p</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span><br /> <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span><br /> <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span><br /> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://placeskull.com/550/350<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>550<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clamped<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> Laborum sint laborum nostrud est. Est exercitation et occaecat ut proident<br /> non voluptate et. Laborum non id voluptate tempor ea anim anim eu irure<br /> laborum velit labore ullamco. Non ipsum labore consequat adipisicing amet<br /> ut reprehenderit.<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>We’ve got our <code>display: -webkit-box</code> that we need, and <code>-webkit-line-clamp: 3</code> to set how many lines we want to keep visible. We still need <code>overflow: hidden</code> otherwise we’ll get a mix of a clamped line with an ellipses and also overflowing content. We’ve also got this mystery <code>-webkit-box-orient: vertical</code>, which I’m unfamiliar with - but it does appear to be deprecated and there’s a recommendation to not use it. Hopefully in the future, ~when~ if this gets implemented properly, the <code>display: -webkit-box</code> and <code>-webkit-box-orient: vertical</code> can be dropped, as well as the prefix on <code>line-clamp</code>. But for now, let’s take a final look at our card.</p>
<div class="card-example">
<img src="http://placeskull.com/550/350" alt="" width="550" height="350" />
<div class="flow">
<h3 class="heading">Card heading</h3>
<p class="clamped">
Laborum sint laborum nostrud est. Est exercitation et occaecat ut proident
non voluptate et. Laborum non id voluptate tempor ea anim anim eu irure
laborum velit labore ullamco. Non ipsum labore consequat adipisicing amet
ut reprehenderit.
</p>
</div>
</div>
<p>Sweet 🤘 - that’s one client bug ticket in Trello that can go straight to Done.</p>
Making variable fonts fit your site theme2023-03-09T00:00:00Zhttps://dominickjay.com/writing/font-palette/<link rel="preload" href="https://dominickjay.com/assets/fonts/rocher/RocherColorGX.woff2" as="font" type="font/woff2" crossorigin="" />
<div class="fyi-block fyi-block--prerequisites">
<p><strong>Prerequisites</strong>If you want to follow along here you can grab the font from the link in the ‘More Information’ section of this post. If you want to use a different font to experiment, you’ll need one with a few different palettes - this one we’re using has an astounding <strong>11</strong> different palettes. I’ve found that there isn’t a whole lot of these types of variable fonts to choose from without going onto the range of ‘quirky’ ones.</p>
</div>
<p>I went to put a warning <em>“Btw, this might only be supported if you only use XYZ browser”</em>, but it turns out that’s not the case, check this support out! Looking at you <strong>again</strong>, IE.</p>
<p class="ciu_embed" data-feature="css-font-palette" data-periods="future_2,current,past_2" data-accessible-colours="false">
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-font-palette.webp" />
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-font-palette.png" />
<img src="https://caniuse.bitsofco.de/image/css-font-palette.jpg" alt="Data on support for the css-font-palette feature across the major browsers from caniuse.com" />
</picture>
</p>
<p>Ok, so we’ve got our variable font in our project, and it looks cool, but it doesn’t look 100%. The font style meets your expectations, but the colors…m’eh. Kind of works, but could be improved to go along with the color scheme being used. Here’s our basic class <code>.variable-heading</code> that these examples are going to be worked around. Here’s what it looks like.</p>
<style>
@font-palette-values --mint {
font-family: Rocher;
base-palette: 7;
}
@font-palette-values --monochrome {
font-family: Rocher;
base-palette: 9;
}
@font-palette-values --coloredTheme {
font-family: Rocher;
override-colors:
0 #ff5f1f,
1 rgba(1, 15, 10, 0.5),
2 #010f0a,
3 #010f0a;
}
@font-palette-values --outline {
font-family: Rocher;
override-colors:
0 #010f0a,
1 #ffffff,
2 #ffffff,
3 #ffffff;
}
.variable-heading {
font-size: 4.5rem;
font-family: 'Rocher';
letter-spacing: -3.5px;
font-variation-settings: "SHDW" 0, "BVEL" 50;
font-palette: --monochrome;
}
.variable-heading--plain {
font-size: 5rem;
font-family: 'Rocher';
letter-spacing: -3.5px;
line-height: 1;
margin-bottom: 40px;
display: block;
}
.variable-heading--hover:hover {
font-palette: --mint;
}
.variable-heading--override-colored {
font-palette: --coloredTheme;
}
.variable-heading--override-outline {
font-palette: --outline;
}
</style>
<pre class="language-css"><code class="language-css"><span class="token selector">.variable-heading</span> <span class="token punctuation">{</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 6rem<span class="token punctuation">;</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Rocher'</span><span class="token punctuation">;</span><br /> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> -3.5px<span class="token punctuation">;</span><br /> <span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p><span class="variable-heading--plain">This has no variation settings or palette change</span></p>
<p>There’s nothing specific to variable fonts being used here, but it gives us a good base to work on top of. Noting the description from Can I Use, the <code>font-palette</code> property has to be used alongside <code>@font-palette-values</code>, so we’re going to make sure we don’t leave this out.</p>
<p>We can define a value for <code>font-palette</code> in two ways; a font-defined palette or a user-defined palette. The font-defined palette is the default one supplied by the font - <code>font-palette: normal</code>, whereas the user-defined palette is one supplied seperately by the user in the stylesheet - <code>font-palette: myPalette</code>.</p>
<p>On top of our <code>variable-heading</code> class, we’re going to add the <code>font-palette</code> property with a user-defined palette value of <code>--monochrome</code>. We’re going to knock away the shadow and the bevel too slightly with <code>font-variation-settings: "SHDW" 0, "BVEL" 50</code> - this isn’t anything to do with palette changing, it just makes it look a bit more pretty. We’ve got our <code>--monochrome</code> palette value, but nothing to link it too, yet. Remember <code>@font-palette-values</code>? That’s where this creeps in. We’ll set this at-rule (when something starts with an ‘@’ e.g. @media) up above our <code>variable-heading</code> class, calling it <code>@font-palette-values --monochrome</code>. Into this rule we’ll have to set the font-family that we set in <code>variable-heading</code>, and also a new property <code>base-palette</code>. The value of this new property is dependant on how many palettes exist in the font, we’ve got 11 in ‘Rocher’, I’m going to set this value as ‘9’. Let’s take a look at what our font looks like now.</p>
<pre class="language-diff-css"><code class="language-diff-css"><span class="token inserted-sign inserted language-css"><span class="token prefix inserted">+</span> <span class="token atrule"><span class="token rule">@font-palette-values</span> --monochrome</span> <span class="token punctuation">{</span><br /><span class="token prefix inserted">+</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Rocher<span class="token punctuation">;</span><br /><span class="token prefix inserted">+</span> <span class="token property">base-palette</span><span class="token punctuation">:</span> 9<span class="token punctuation">;</span><br /><span class="token prefix inserted">+</span> <span class="token punctuation">}</span><br /></span><br />.variable-heading {<br /><span class="token unchanged language-css"><span class="token prefix unchanged"> </span> <span class="token property">font-size</span><span class="token punctuation">:</span> 5rem<span class="token punctuation">;</span><br /><span class="token prefix unchanged"> </span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> -3.5px<span class="token punctuation">;</span><br /></span><span class="token inserted-sign inserted language-css"><span class="token prefix inserted">+</span> <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> <span class="token string">"SHDW"</span> 0<span class="token punctuation">,</span> <span class="token string">"BVEL"</span> 50<span class="token punctuation">;</span><br /><span class="token prefix inserted">+</span> <span class="token property">font-palette</span><span class="token punctuation">:</span> --monochrome<span class="token punctuation">;</span><br /></span>}</code></pre>
<p><span class="variable-heading">This has a palette change</span></p>
<p>We can also change palette styles on interaction with the text, like this!</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@font-palette-values</span> --mint</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> Rocher<span class="token punctuation">;</span><br /> <span class="token property">base-palette</span><span class="token punctuation">:</span> 7<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.variable-heading:hover</span> <span class="token punctuation">{</span><br /> <span class="token property">font-palette</span><span class="token punctuation">:</span> --mint<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p><span class="variable-heading variable-heading--hover">This has a different palette on hover</span></p>
<p>I guess there’s a downside to using a number to reference a color palette as we’ve been doing. I had wishful thinking that you could pass in a custom property to the <code>@font-palette-values</code> rule, so you could give it some kind of useful name, like this;</p>
<pre class="language-css"><code class="language-css"> <span class="token selector">:root</span> <span class="token punctuation">{</span><br /> <span class="token property">--mint-palette</span><span class="token punctuation">:</span> 7<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token atrule"><span class="token rule">@font-palette-values</span> --mint</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> Rocher<span class="token punctuation">;</span><br /> <span class="token property">base-palette</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mint-palette<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span></code></pre>
<p>But nothing, so we’re stuck with the numbers, and needing a reference as to what palette numbers are what colours. Sad times.</p>
<div class="pull-quote pull-quote--right">
<p>So there’s another propery we can use instead of font-palette, which is called override-colors. This gives you access to the individual colors used in each palette…</p>
</div>
<p>Let’s imagine that none of the preset color palettes were what you were looking for, and you want to impose your own colors on it instead (let’s face it, the mint color I tested on the hover state didn’t exactly fit my super cool monochrome aesthetic). Let’s see what we can do here.</p>
<p>So there’s another propery we can use instead of <code>font-palette</code>, which is called <code>override-colors</code>. This gives you access to the individual colors used in each palette, and the ability to override those colors seperately by using the color values alongside the color number. It can be quite difficult to establish which color number is equal to a specific color on the font, so it does take a bit of guesswork to start with. There’s also the added complication that each font could have a different amount of palettes, with a different amount of colors in them. Our font for this ‘Rocher’, has <strong>11</strong> palettes, with 4 colors in each.</p>
<figure><picture><source type="image/avif" srcset="https://dominickjay.com/assets/images/color-palette-rocher-522w.avif 522w" sizes="(min-width: 30em) 50vw, 50vw" /><source type="image/webp" srcset="https://dominickjay.com/assets/images/color-palette-rocher-522w.webp 522w" sizes="(min-width: 30em) 50vw, 50vw" /><source type="image/jpeg" srcset="https://dominickjay.com/assets/images/color-palette-rocher-522w.jpeg 522w" sizes="(min-width: 30em) 50vw, 50vw" /><img src="https://dominickjay.com/assets/images/image-placeholder.png" data-src="/assets/images/color-palette-rocher-522w.jpeg" width="522" height="944" alt="A screenshot of a few of Rochers color palettes and their specific colors included" loading="lazy" decoding="async" /></picture><figcaption class="caption"><p>A segment of Rocher's color palette choices.</p></figcaption></figure>
<p>So, there’s 4 colors available to override on our custom palette. For the default palette, we’ve got; the yellow, the slightly orange tint on the letters, the border around each letter, and the shadow. Playing around with it leaves us with a custom theme, as shown below.</p>
<pre class="language-diff-css"><code class="language-diff-css">@font-palette-values --coloredTheme {<br /><span class="token unchanged language-css"><span class="token prefix unchanged"> </span> <span class="token property">font-family</span><span class="token punctuation">:</span> Rocher<span class="token punctuation">;</span><br /><span class="token prefix unchanged"> </span> <span class="token property">override-colors</span><span class="token punctuation">:</span><br /><span class="token prefix unchanged"> </span> 0 #e63946<span class="token punctuation">,</span><br /><span class="token prefix unchanged"> </span> 1 #010f0a<span class="token punctuation">;</span><br /></span>}<br /><br />.variable-heading {<br /><span class="token unchanged language-css"><span class="token prefix unchanged"> </span> <span class="token property">font-size</span><span class="token punctuation">:</span> 5rem<span class="token punctuation">;</span><br /><span class="token prefix unchanged"> </span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Rocher'</span><span class="token punctuation">;</span><br /><span class="token prefix unchanged"> </span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> -3.5px<span class="token punctuation">;</span><br /><span class="token prefix unchanged"> </span> <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> <span class="token string">"SHDW"</span> 0<span class="token punctuation">,</span> <span class="token string">"BVEL"</span> 50<span class="token punctuation">;</span><br /></span><span class="token deleted-sign deleted language-css"><span class="token prefix deleted">-</span> <span class="token property">font-palette</span><span class="token punctuation">:</span> --monochrome<span class="token punctuation">;</span><br /></span><span class="token inserted-sign inserted language-css"><span class="token prefix inserted">+</span> <span class="token property">font-palette</span><span class="token punctuation">:</span> --coloredTheme<span class="token punctuation">;</span><br /></span>}</code></pre>
<p><span class="variable-heading variable-heading--override-colored">This overrides the original palette</span></p>
<p>Kind of fits my current color scheme, but really needs to be a bit more plain - let’s be honest, the above is actually pretty unsightly. Stripping out the color from everything apart from the first color option which I’m setting as the black from my theme.</p>
<p><span class="variable-heading variable-heading--override-outline">This overrides the original palette</span></p>
<p>I wished for gradients, but alas, no dice.</p>
<p>To sum up, these are things you need to do to control a palette;</p>
<ul>
<li>use a variable font that is either a COLRv0 or a COLRv1 typeface</li>
<li>use a <code>@font-palette-values</code> at-rule to define what you want to call the palette e.g. <code>--coloredPalette</code></li>
<li>in that, set the <code>font-family</code> and the <code>base-palette</code> number</li>
<li>if you want to override the palette, use the <code>override-colors</code> property to define different colours</li>
</ul>
<div class="pull-quote pull-quote--left">
<p>Despite a good bit of support, I <em>probably</em> wouldn’t be using this on a client build as I think it’s got some limitations and is slightly difficult to predict.</p>
</div>
<p>At the very least, it’s an interesting experiment to play around with. Despite a good bit of support, I <em>probably</em> wouldn’t be using this on a client build as I think it’s got some limitations and is slightly difficult to predict. Some things also didn’t seem to work for me that works with normal fonts, like transitioning between color palette changes on hover, or passing custom properties. So it’s a bit of a trade-off between expectations - you can do some fancy things with colors, but in turn you lose some pretty standard things.</p>
<p><small>Bet the word palette is starting to look strange now, right?</small><br />
<span class="variable-heading">Fin.</span></p>
Selecting all siblings with the :has() function2023-04-26T00:00:00Zhttps://dominickjay.com/writing/selecting-all-siblings-with-has/<p class="ciu_embed" data-feature="css-has" data-periods="future_2,current,past_2" data-accessible-colours="false">
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-has.webp" />
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-has.png" />
<img src="https://caniuse.bitsofco.de/image/css-has.jpg" alt="Data on support for the css-has feature across the major browsers from caniuse.com" />
</picture>
</p>
<p>As always, I’m going to start with support for this feature first. For once it’s not just IE being the awkward one, as Firefox doesn’t have support here for it - unless you enable it through the <code>layout.css.has-selector.enabled</code> flag anyway. So if you’re on Firefox and want to see this demo in all its glory, you’ll need this flag enabled or jump onto another browser.</p>
<div class="fyi-block fyi-block--info fl-p-l bg-red/[0.25] font-medium fl-text-step-1 font-heading fl-my-l rounded-br-[80px] lg:w-[calc(100%+10em)]">
<span class="fl-text-step-2 heading">Update - 23rd December, 2024</span>
<p>This is now supported in all evergreen browsers, so need for an enabled flag to deal with this support - hooray!</p>
</div>
<div class="pull-quote pull-quote--left">
<p>It’s been notoriously difficult to select elements depending on their children</p>
</div>
<p>It’s been notoriously difficult to select elements depending on their children (almost as hard as that one level on Crash Bandicoot when you have to ride a tiger down the Great Wall of China, or that level on Max Payne with the crying baby and the blood line path), or siblings that came before it. Super easy to say <em>“let’s make this box red when it is an element following on from an element with a class of outline”</em>.</p>
<p><code>.outline + .red</code></p>
<style>
.box {
flex: 1 0 30px;
height: auto;
aspect-ratio: 1;
background-color: black;
}
.outline {
background-color: white;
border: 5px solid #010f0a;
}
#one-red-box .outline + .box,
.outline + .box + .box + .box + .box {
background-color: #e63946;
}
.box-row {
display: flex;
column-gap: 25px;
margin-block: 20px;
border: 5px solid #010f0a;
padding: 15px;
}
</style>
<div class="box-row" id="one-red-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
</div>
<p>But how do we get the 3rd or 4th element away from that outlined box, and make it red? Keep on chaining selectors, like this <code>.outline + .box + .box + .box + .box</code>?</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.outline + .box,<br />.outline + .box + .box + .box + .box</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #e63946<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<div class="box-row">
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>Yeah that did it too…but blimey it’s awful isn’t it. We also can’t make the 1st box red if the third box our outlined box, based on the <code>.outline</code> class. There’s no example I can think of that would demonstrate how it doesn’t work - feel free to enlighten me and I’ll add it to this post.</p>
<p>With this complication comes the perfect excuse to take <code>:has()</code> for a spin. We can use it to style our intended box red, when the element after it has the <code>.outline</code> class.</p>
<pre class="language-css"><code class="language-css"> <span class="token selector">.box:has( + .outline)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #e63946<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span></code></pre>
<style>
#has-example-row .box:has( + .outline) {
background-color: #e63946;
}
</style>
<div class="box-row" id="has-example-row">
<div class="box "></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>So given that we’ve got access to previous siblings, we’ve got the ability to add states to them. Make that red box turn orange on hover? No problemo.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.box:has( + .outline)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #e63946<span class="token punctuation">;</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> .3s ease-in-out background-color<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token comment">/* Apply this when our box is hovered AND<br />has the outline classed box next to it */</span><br /><span class="token selector">.box:hover:has( + .outline)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #ff5f1f<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<style>
#has-example-row-2 .box:has( + .outline) {
background-color: #e63946;
transition: .3s ease-in-out background-color;
}
#has-example-row-2 .box:hover:has( + .outline) {
background-color: #ff5f1f;
}
</style>
<div class="box-row" id="has-example-row-2">
<div class="box "></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>What if we <em>flipped</em> this, and have the red box go orange when the <strong>outlined</strong> box is hovered? With <code>:has()</code> it’s easy enough.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.box:has( + .outline)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #e63946<span class="token punctuation">;</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> .3s ease-in-out background-color<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token comment">/* Apply this when our box is hovered AND<br />has the outline classed box next to it */</span><br /><span class="token selector">.box:has( + .outline:hover)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #ff5f1f<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<style>
#has-example-row-3 .box:has( + .outline) {
background-color: #e63946;
transition: .3s ease-in-out background-color;
}
#has-example-row-3 .box:has( + .outline:hover) {
background-color: #ff5f1f;
}
</style>
<div class="box-row" id="has-example-row-3">
<div class="box "></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>See where this is going? Now, we’re going to move our selector from <code>.box</code> to the parent <code>.box-row</code> and use a <code>*</code> to select all the elements in the row, turning them orange.</p>
<style>
#has-example-row-4 > * {
background-color: #ff5f1f;
}
</style>
<div class="box-row" id="has-example-row-4">
<div class="box "></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>Then we’ll change it, using <code>:has()</code> on the parent element to check if any of the <code>.outline</code> classes are hovered. Then we can apply a style using <code>:not()</code>, passing the <code>:hover</code> state through. Effectively saying that in this block, any boxes that aren’t hovered, should turn orange when our <code>.outline</code> class is hovered.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#has-example-row-5:has( .outline:hover ) > *:not(:hover)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #ff5f1f<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<style>
#has-example-row-5:has( .outline:hover ) > *:not(:hover) {
background-color: #ff5f1f;
transition: .3s ease-in-out background-color;
}
</style>
<div class="box-row" id="has-example-row-5">
<div class="box "></div>
<div class="box"></div>
<div class="box outline"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>Almost there. Let’s remove <code>.outline</code> from our statement, replacing it with another <code>*</code> selector. So now in this block, any boxes that aren’t hovered, should turn orange when <s>our <code>.outline</code> class</s> any of our elements are hovered.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#has-example-row-6:has( *:hover ) > *:not(:hover)</span> <span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #ff5f1f<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<style>
#has-example-row-6 > * {
transition: .3s ease-in-out background-color;
}
#has-example-row-6:has( *:hover ) > *:not(:hover) {
background-color: #ff5f1f;
}
</style>
<div class="box-row" id="has-example-row-6">
<div class="box "></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>We’re so close, but only because the rest is not specifically <code>:has()</code> related. We’re going to use <code>placeskull.com</code> to provide some images in our row blocks. Now we don’t benefit from the background color, let’s use <code>filter: blur(4px)</code> and apply that to the image at the end of our <code>:has()</code> statement. We’ll also need <code>overflow: hidden</code> on the images parent div to prevent the blur from going over the edges - this keeps it nice and contained.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#has-example-row-7 > *</span> <span class="token punctuation">{</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> .3s ease-in-out all<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">#has-example-row-7:has( *:hover ) > *:not(:hover) img</span> <span class="token punctuation">{</span><br /> <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>4px<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<style>
#has-example-row-7 > * {
overflow: hidden;
}
#has-example-row-7 > * img{
transition: .3s ease-in-out all;
}
#has-example-row-7:has( *:hover ) > *:not(:hover) img {
filter: blur(4px);
}
</style>
<div class="box-row" id="has-example-row-7">
<div class="box">
<img src="https://placeskull.com/350/350" />
</div>
<div class="box">
<img src="https://placeskull.com/350/350" />
</div>
<div class="box">
<img src="https://placeskull.com/350/350" />
</div>
<div class="box">
<img src="https://placeskull.com/350/350" />
</div>
<div class="box">
<img src="https://placeskull.com/350/350" />
</div>
</div>
<p>Lastly, we’ll put a <code>transform: scale()</code> on the image, and also add a background color to the images parent block to be able to cover the whitespace caused by the scale, and voila!</p>
<style>
.main-container {
border: 5px solid #010f0a;
padding: 20px;
margin-block: 20px;
position: relative;
}
.has-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 1rem;
place-content: center;
}
@media (max-width: 768px) {
.has-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.cell {
grid-column: span 2/span 2;
overflow: hidden;
background: black;
}
.cell img {
width: 100%;
transition: .65s cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
}
.has-grid:has( > *:hover ) > *:not(:hover) img {
filter: blur(4px);
transform: scale(0.85);
}
.attribute {
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin-inline: auto;
text-align: center;
max-width: 750px;
font-family: 'Erode', sans-serif;
}
.attribute a {
font-weight: 500;
}
.helpful-hint {
margin-block: 40px;
font-size: 1.85rem;
text-align: center;
font-family: 'Erode', sans-serif;
}
</style>
<div class="main-container">
<div class="has-grid">
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
<div class="cell">
<img src="https://placeskull.com/350/350" />
</div>
</div>
</div>
<p>If I end up revisiting this at any point, I’ll probably look at refining the selector as it’s quite long. Maybe that’s the way it has to be to be able to achieve this, but maybe worth the trip. I’m a big fan of this - not only because it’s my own work - and ended up implementing into my Weeknotes <a class="underline hover:no-underline" href="https://dominickjay.com/tag/weeknotes/">posts</a> for my music choices for that week. If you want to see my other work on CodePen, you can follow me <a class="underline hover:no-underline" href="https://codepen.io/dominickjay217">here</a>.</p>
Weeknotes: October 23 – 29, 20232023-10-23T00:00:00Zhttps://dominickjay.com/writing/weeknotes-october-23-29/<h3 id="personal" tabindex="-1">Personal <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-october-23-29/#personal">#</a></h3>
<p>The kids were on a school holiday this week, so took the week off work to cover that and spend some much needed time with them. Was non-stop! My daughter loves baking, and I’ve suddenly found that I want to try some recipes, so this was a perfect chance. The end result was actually pretty good! We went swimming at the local pool too, which has been great as their progress from their swimming lessons are really paying off - no longer stood in the pool holding onto one of them at a time. Lastly, we went to the library as we’re trying to encourage them to read more outside of their school books.</p>
<h3 id="reading" tabindex="-1">Reading <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-october-23-29/#reading">#</a></h3>
<ol>
<li>Normal People - Sally Rooney</li>
</ol>
<h3 id="music" tabindex="-1">Music <a class="anchor-link" href="https://dominickjay.com/writing/weeknotes-october-23-29/#music">#</a></h3>
<div class="music-grid">
<p><a href="https://www.last.fm/music/Paramore/This+Is+Why"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/32d1f1aaa8e038d36c10eec0dcd20225.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/A+Perfect+Circle/Eat+the+Elephant"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/c69f29c04cdebcbe1ad41d67124b863e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Bad+Omens/THE+DEATH+OF+PEACE+OF+MIND"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/31247a4412911ac3e8502777d456a5c7.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/Puzzle"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/2dfec2307903404f97eaddf5722d606e.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Biffy+Clyro/Similarities"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/0505963bd63d48b2c8639499d4fd4b03.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Fall+Out+Boy/So+Much+(for)+Stardust"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/46f8fabfef2e1e3a82a2a612c9c2b82c.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Ghost/IMPERA"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/d7f5e7c6ae196d85a8c97c19129c82c9.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/IDLES/CRAWLER"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/5cbb621500562a568d92ca9b934c50d3.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nine+Inch+Nails/The+Slip"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/86bf0aab05704d2e880dc37384485c32.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Nothing+But+Thieves/Broken+Machine"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/563e0092a999f9c5afaa41a9551e0033.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Paramore/brand+new+eyes"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/8935ea2d777c8f2f5f3c7a8f521ea9fb.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Radiohead/Hail+to+the+Thief"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/55ac8f97bde6cbe5e9a8857b435457e9.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/The+Damned+Things/High+Crimes"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/00e8027ab57d469efdb22c6a31460b10.jpg" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/The+White+Stripes/Elephant"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/4834c1de5bae49f594bd2f2df1f16286.png" loading="lazy" /></a></p>
<p><a href="https://www.last.fm/music/Them+Crooked+Vultures/Them+Crooked+Vultures"><img height="174" width="174" src="https://lastfm.freetls.fastly.net/i/u/300x300/d536d356fd93438dc3b9fd711826b62e.jpg" loading="lazy" /></a></p>
</div>
The default-iest of Apps2023-11-13T00:00:00Zhttps://dominickjay.com/writing/default-apps/<p>I use a bit of a mix of Google/Apple products - not sure how I feel about that. I think a lot of them went over to Apple after I got an iphone. plan to get an android again next year so maybe this list will need adjusting as i go through 2024. So, here’s my list of default apps.</p>
<ul>
<li>Mail Server: Gmail</li>
<li>Notes: <a href="https://www.notion.so/">Notion</a></li>
<li>To-Do: <a href="https://ticktick.com/?language=en_US">Ticktick</a></li>
<li>Photo Management: Apple Photos</li>
<li>Calendar: Google Calendar</li>
<li>Weather: Apple Weather</li>
<li>Cloud Storage: Google Drive</li>
<li>RSS: <a href="https://www.instapaper.com/">Instapaper</a></li>
<li>Browser: <a href="https://arc.net/">Arc</a> - but use <a href="https://polypane.app/">Polypane</a> frequently for testing at work.</li>
<li>Chat: <a href="https://www.whatsapp.com/">WhatsApp</a></li>
<li>News: <a href="https://www.bbc.co.uk/news">BBC News</a> or Reddit</li>
<li>Music: Apple Music</li>
<li>Podcasts: Apple Podcasts</li>
<li>Password Management: <a href="https://bitwarden.com/">Bitwarden</a></li>
<li>Social Networks: <a href="https://joinmastodon.org/">Mastodon</a></li>
<li>Code Editor: <a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
<li>Writing: <a href="https://www.notion.so/">Notion</a></li>
<li>Package Manager: <a href="https://brew.sh/">Homebrew</a> & <a href="https://www.npmjs.com/">npm</a></li>
</ul>
Replacing GSAP with scroll animations2023-11-27T00:00:00Zhttps://dominickjay.com/writing/replace-gsap-wth-scroll-animations/<div class="fyi-block fyi-block--warning fl-p-l bg-red/[0.25] font-medium fl-text-step-1 font-heading fl-my-l rounded-br-[80px] lg:w-[calc(100%+10em)]">
<span class="fl-text-step-2 heading">Warning</span>
<p>There's some CSS properties used in this demo and in the featured Codepen that are experimental technologies - check your browser support for <a href="https://dominickjay.com/writing/replace-gsap-wth-scroll-animations/animation-range%3E%20%3Ca%20href=" https:="" caniuse.com="" ?search="animation-timeline"">animation-timeline</a> and <a href="https://caniuse.com/?search=view-timeline-name">view-timeline-name</a> before venturing further and thinking I've broken something. I'm in <i>no</i> means an expert at this here, but I think I got it right!</p>
</div>
<p>I was interested in picking up some new CSS tricks, and there’s been a lot of talk recently about scroll driven animations. Feeling inspired during a weekend away, I dug around on Codepen for some and came across this pen from <a href="https://ryanmulligan.dev/">Ryan Mulligan</a> (hexagoncircle).</p>
<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="result" data-slug-hash="gOPMwvd" data-user="hexagoncircle" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/hexagoncircle/pen/gOPMwvd">
ScrollTrigger - Highlight Text</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>After playing around with it and digging into the source code, pretty instantly found out it was a GSAP demo rather than scroll driven animations. Ah well, it’s still lovely, and this post is in <strong>no</strong> way assuming that I can do one better. But then I wondered how tricky it would be to take this original demo and refactor it to not depend on the GSAP library anymore, and instead bring in those sweet scroll driven animations that I was so keen to figure out.</p>
<figure><picture><source type="image/avif" srcset="https://dominickjay.com/assets/images/caniuse-animation-timeline-900w.avif 900w" sizes="(min-width: 30em) 25vw, 25vw" /><source type="image/webp" srcset="https://dominickjay.com/assets/images/caniuse-animation-timeline-900w.webp 900w" sizes="(min-width: 30em) 25vw, 25vw" /><source type="image/jpeg" srcset="https://dominickjay.com/assets/images/caniuse-animation-timeline-900w.jpeg 900w" sizes="(min-width: 30em) 25vw, 25vw" /><img src="https://dominickjay.com/assets/images/image-placeholder.png" data-src="/assets/images/caniuse-animation-timeline-900w.jpeg" width="900" height="233" alt="A screenshot from caniuse showing support for animation-timeline as of November, 2023" loading="lazy" decoding="async" /></picture><figcaption class="caption"><p>Support for animation-timeline from caniuse as of November, 2023</p></figcaption></figure>
<h2 id="the-original" tabindex="-1">The original <a class="anchor-link" href="https://dominickjay.com/writing/replace-gsap-wth-scroll-animations/#the-original">#</a></h2>
<p>Let’s start by breaking down Ryan’s demo a bit. There’s very little functional magic actually in the HTML - although it’s very pretty markup! We’ve got a header element containing options; dark mode & some underlining styles (background, underlined etc). The bulk of the content is in a main element, as expected, with some content wrapped in a mark element with a class of text-highlight. Easy stuff, apart from…what’s a mark element and what’s the point of it semantically?</p>
<blockquote>
<p>The <strong><code><mark></code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> element represents text which is <strong>marked</strong> or <strong>highlighted</strong> for reference or notation purposes due to the marked passage’s relevance in the enclosing context.</p>
</blockquote>
<p>So, to rip a use case out of the mdn docs;</p>
<p><strong>“When used in a quotation (<code>[<q>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)</code>) or block quote (<code>[<blockquote>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</code>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn’t think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.”</strong></p>
<p>Pretty interesting, that’s one for the next project if needs be then.</p>
<div class="pull-quote pull-quote--right">
<p>bulk of the content is in a main element, as expected, with some content wrapped in a mark element with a class of text-highlight. Easy stuff, apart from…what’s a mark element</p>
</div>
<p>Outside of the setup, the real meat of the demo comes from the styles for the various animations on scroll. For the purpose of keeping this focused, those styles increase the size of a background color across the element, that being setup as a pseudo-underline rather than using ‘text-decoration: underline’. The dropdown values are used as part of an attribute on the <code>body</code> element, which allows us to style it like this;</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span><br /> <span class="token property">--bg-color-highlight</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>60<span class="token punctuation">,</span> 90%<span class="token punctuation">,</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.dark-mode</span> <span class="token punctuation">{</span><br /> <span class="token property">--bg-color-highlight</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>238<span class="token punctuation">,</span> 70%<span class="token punctuation">,</span> 40%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">[data-highlight="background"] &</span> <span class="token punctuation">{</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><br /> <span class="token function">var</span><span class="token punctuation">(</span>--bg-color-highlight<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token function">var</span><span class="token punctuation">(</span>--bg-color-highlight<span class="token punctuation">)</span><br /> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">[data-highlight="half"] &</span> <span class="token punctuation">{</span><br /> <span class="token property">--line-size</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><br /> transparent <span class="token function">calc</span><span class="token punctuation">(</span>100% - <span class="token function">var</span><span class="token punctuation">(</span>--line-size<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token function">var</span><span class="token punctuation">(</span>--bg-color-highlight<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--line-size<span class="token punctuation">)</span><br /> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">[data-highlight="underline"] &</span> <span class="token punctuation">{</span><br /> <span class="token property">--line-size</span><span class="token punctuation">:</span> 0.15em<span class="token punctuation">;</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><br /> transparent <span class="token function">calc</span><span class="token punctuation">(</span>100% - <span class="token function">var</span><span class="token punctuation">(</span>--line-size<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--line-size<span class="token punctuation">)</span><br /> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>On the Javascript side, we’ve got the event listeners for the dropdown change and the dark-mode. Excluding them, we’re left with this chunk of GSAP.</p>
<pre class="language-jsx"><code class="language-jsx">gsap<span class="token punctuation">.</span><span class="token function">registerPlugin</span><span class="token punctuation">(</span>ScrollTrigger<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />gsap<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token string">".text-highlight"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">highlight</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> ScrollTrigger<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">trigger</span><span class="token operator">:</span> highlight<span class="token punctuation">,</span><br /> <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token string">"-100px center"</span><span class="token punctuation">,</span><br /> <span class="token function-variable function">onEnter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> highlight<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>To my understanding, this block does this;</p>
<ul>
<li>Registers the <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">GSAP ScrollTrigger</a> plugin</li>
<li>Uses GSAP’s <code>toArray</code> function, to create an array of elements that has the <code>text-highlight</code> class on them</li>
<li>On each item in the array, a <code>ScrollTrigger</code> that;
<ul>
<li>Uses the element as the trigger here, so each element will have its animation triggered independently from each other.</li>
<li>Starts the animation when it’s -100px from the center of the viewport.</li>
<li>Has a callback function <code>onEnter</code> that adds an active class to that specific element.</li>
</ul>
</li>
</ul>
<p>So effectively, you scroll and as each mark element gets <em>just</em> 🤏 beyond the center of the viewport, the active class gets applied and BAM that sweet animation goes off. Nice! This is a real cool demo and looks ace. So let’s rip it down and rebuild it.</p>
<h2 id="the-rework" tabindex="-1">The rework <a class="anchor-link" href="https://dominickjay.com/writing/replace-gsap-wth-scroll-animations/#the-rework">#</a></h2>
<p>The most notable thing here is that by using CSS scroll driven animations you can ditch a whole bunch of JS. That GSAP library? Out the window, saving KBs in the process. Let’s keep the dark mode/css options though in our rebuild.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> highlight <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"highlight-style"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> mode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"mode"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">const</span> <span class="token function-variable function">setHighlightStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=></span><br /> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-highlight"</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />mode<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span><br /> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"dark-mode"</span><span class="token punctuation">)</span><br /><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />highlight<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setHighlightStyle</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token function">setHighlightStyle</span><span class="token punctuation">(</span>highlight<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span><br /></code></pre>
<p>For the HTML nothing needs to change here for this, which is great. Thanks Ryan!</p>
<p>The CSS - given how we’re relying on it more now without the Javascript providing the animations - needs some tweaking. To the <code>mark</code> element that has the <code>text-highlight</code> class, we can add this:</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@keyframes</span> highlight</span> <span class="token punctuation">{</span><br /> <span class="token selector">to</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text-highlight<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">animation-range</span><span class="token punctuation">:</span> cover<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">.text-highlight</span> <span class="token punctuation">{</span><br /> <span class="token property">animation</span><span class="token punctuation">:</span> highlight linear both<span class="token punctuation">;</span><br /> <span class="token property">animation-timeline</span><span class="token punctuation">:</span> --highlight<span class="token punctuation">;</span><br /> <span class="token property">view-timeline-name</span><span class="token punctuation">:</span> --highlight<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>and remove this, as we’re no longer adding an <code>active</code> class to any elements:</p>
<pre class="language-css"><code class="language-css"> <span class="token selector">&.active</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text-highlight<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span></code></pre>
<p>90% of the way there I reckon. Let’s take a quick break to explain some of the new CSS properties used above.</p>
<p>We know about the widely used <code>animation</code> property, calling our <code>highlight</code> keyframe animation and setting it with <code>linear</code> easing and <code>both</code> for the fill-mode in order to use the animation properties both forwards and backwards through the keyframe timeline. <code>animation-timeline</code> is a new one though, with it being set to specify the timeline being used to control a CSS animation’s progress. There’s a few different options we can pass in - I would personally refer to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#syntax">MDN</a> for this one. Maybe I’ll dig a bit further into it in a future post. But for the sake of this one, we’re using a single animation named timeline which is set as the name of your timeline animation (as I found, it doesn’t need to necessarily need to be the name of your keyframe animation), and that name prefixed with a <code>--</code>. <code>view-timeline-name</code> is another new one, and is used to define the block in which a timeline passes across. I’ve seen this applied to the parent of an element with a scroll animation on, but in this case we’re defining it and <code>animation-timeline</code> on the same <code>text-highlight</code> class. Again, maybe a deep dive on this one in future, as it was one of the harder parts to comprehend as I wrote this.</p>
<div class="pull-quote pull-quote--left">
<p>by using CSS scroll driven animations you can ditch a whole bunch of JS. That GSAP library? Out the window, saving KBs in the process</p>
</div>
<p>So anyway, where were we, so by setting this up this way, this starts the underlining/highlighting animation the moment the element comes into view, which isn’t exactly what we want here. Instead, we need it to trigger -100px from the center or, <em>at the very least,</em> the center itself. Scanning the docs it looks like this we could do this - <code>animation-range: entry 0% entry 100%;</code> - but that seems like it starts it way too soon.</p>
<p><code>animation-range</code> works in a similar way to how <code>ScrollTrigger</code> has a <code>start</code> property (also, <code>end</code>). Simply put, you can use a single value e.g. <code>cover</code>, <code>contain</code> or two values (either timeline range value or start/end values) e.g. <code>25% 50%</code>, and is used to set where the timeline will start and end.</p>
<p>A great tool to work with for finding out the correct values here is <a href="https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&range-start-percentage=0&range-end-name=cover&range-end-percentage=50&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=none&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes">https://scroll-driven-animations.style</a>, a super helpful visualizer for this. Tinkering around with it, we can change <code>animation-range: entry 0% entry 100%;</code> to <code>animation-range: cover 0% cover 60%</code>, so the highlighting effect starts when it appears in the bottom of the viewport, and finishes when it’s 60% of the way up the screen.</p>
<figure><picture><source type="image/avif" srcset="https://dominickjay.com/assets/images/replace-gsap-view-timeline-screenshot-801w.avif 801w" sizes="(min-width: 30em) 25vw, 25vw" /><source type="image/webp" srcset="https://dominickjay.com/assets/images/replace-gsap-view-timeline-screenshot-801w.webp 801w" sizes="(min-width: 30em) 25vw, 25vw" /><source type="image/jpeg" srcset="https://dominickjay.com/assets/images/replace-gsap-view-timeline-screenshot-801w.jpeg 801w" sizes="(min-width: 30em) 25vw, 25vw" /><img src="https://dominickjay.com/assets/images/image-placeholder.png" data-src="/assets/images/replace-gsap-view-timeline-screenshot-801w.jpeg" width="801" height="571" alt="A screenshot from scroll-driven-animations.style showing support the setup for a timeline range" loading="lazy" decoding="async" /></picture><figcaption class="caption"><p>Timeline range for a scroll driven animation</p></figcaption></figure>
<p>Bingo. That seemed to do the trick pretty well, check out our final demo below. Again, this was very much written while I was learning, so if there’s anything that could be done differently, please let me know!</p>
<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="result" data-slug-hash="ExrEdLX" data-user="dominickjay217" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/dominickjay217/pen/ExrEdLX">
Scroll driven animations - Highlight Text</a> by Dom Jay (<a href="https://codepen.io/dominickjay217">@dominickjay217</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="resources" tabindex="-1">Resources <a class="anchor-link" href="https://dominickjay.com/writing/replace-gsap-wth-scroll-animations/#resources">#</a></h2>
<p><a href="https://scroll-driven-animations.style/">https://scroll-driven-animations.style/</a><br />
<a href="https://developer.chrome.com/articles/scroll-driven-animations/">https://developer.chrome.com/articles/scroll-driven-animations</a><br />
<a href="https://codepen.io/hexagoncircle/pen/gOPMwvd">https://codepen.io/hexagoncircle/pen/gOPMwvd</a><br />
<a href="https://codepen.io/dominickjay217/pen/ExrEdLX">https://codepen.io/dominickjay217/pen/ExrEdLX</a><br />
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark</a><br />
<a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">https://gsap.com/docs/v3/Plugins/ScrollTrigger/</a><br />
<a href="https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&range-start-percentage=0&range-end-name=cover&range-end-percentage=50&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=none&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes">https://scroll-driven-animations.style</a><br />
<a href="https://ryanmulligan.dev/">https://ryanmulligan.dev/</a><br />
<a href="https://ryanmulligan.dev/blog/scroll-driven-animations/">https://ryanmulligan.dev/blog/scroll-driven-animations/</a><br />
<a href="https://developer.chrome.com/articles/scroll-driven-animations/">https://developer.chrome.com/articles/scroll-driven-animations/</a><br />
<a href="https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/">https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/</a></p>
Starting 20242024-01-02T00:00:00Zhttps://dominickjay.com/writing/starting-2024/<p>I can relate to a lot of what was written in Rach’s post, especially the chaos of kids being off school for a few more days after I returned. Luckily, both my kids were super young when I started WFH due to all that stuff that happened in 2020, so they’ve kind of grown up with me not <em>really</em> being in an office/out of the house for work as much as their relatives are. Confusing for them at first, but those boundaries and understandings are reinforced pretty well now.</p>
<p>By the time that 2023 ended, I was ready for the Christmas break to re-align myself both personally and professionally - it was a harder than usual year and there’s some of it I’d rather not repeat again. Coming back to work with a ‘fresh slate’ mindset gives me a chance to put some things into practice. I’m hoping that writing this post gives me that momentum to keep somewhat regular posts coming, and have a little text file in Notion with some ideas for future posts.</p>
<p>Much like Rachel again, I like to clear out my emails, and the Desktop, Downloads and Documents folders, along with any cruft that might’ve been chucked around before the end of the year. It’s a nice step to take, moments before downloading some assets and having it fill back up again! I’m a user of Arc as well, so taking some time to clear out the pinned tabs was nice. I had a run through some draft posts for this site that I had ready to commit, and others in Notion that I just <strong>wasn’t</strong> going to write about anymore, and tidied up the to-do/ongoing lists a bit more.</p>
<p>In a broader scale, I’m taking some steps to stay off my mobile more. I was well aware that by the time Christmas came around, I was spending an awful lot of time looking at some random post on Reddit that I needed to, and am taking steps to prevent that from happening as much this year. I’m not naive enough to think that my phone is just going out the window, but minimizing my time spent can’t hurt…right? The optimist in me really wants to get back to the gym more regularly too, it’s been over a year now and I’m feeling the difference from not going after a long stretch of consistency. Stay tuned.</p>
<p>Thanks for reading!</p>
February Page Turners2024-03-09T00:00:00Zhttps://dominickjay.com/writing/page-turners-february/<p>I started putting together this months list quite late into February, so it’s quite short in comparison to what has actually been read irl - nonetheless, some great articles in here!</p>
<p><a href="https://heydonworks.com/article/what-is-utility-first-css">What is Utility-First CSS?</a><br />
<a href="https://adactio.com/journal/20899">Speedier tunes</a><br />
<a href="https://nuejs.org/blog/tailwind-vs-semantic-css">Tailwind vs. Semantic CSS</a><br />
<a href="https://coryd.dev/posts/2024/building-a-theme-toggle-web-component">Building a theme toggle web component</a><br />
<a href="https://ishadeed.com/article/css-has-guide">CSS :has() Interactive Guide</a><br />
<a href="https://arc.net/l/quote/qlbwfmyv">February 2024 Bookmarks</a><br />
<a href="https://buttondown.email/ownyourweb/archive/issue-10">Own Your Web – Issue 10: Links Worth Sharing</a><br />
<a href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing">Where I’m at on the whole CSS-Tricks thing</a></p>