PageSourceSearch

https://rgbstudios.org/blog

html rgbstudios.org collected 2026-09-24 13:28:51 UTC 57,094 bytes, 415 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5	<meta charset="utf-8" />
6	<meta name="viewport" content="width=device-width, initial-scale=1" />
7	<link rel="preconnect" href="https://fonts.googleapis.com" />
8	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9	<link
10		href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins:wght@100;300;500;700&display=swap"
11		rel="stylesheet" />
12
13	
14		<link href="/_app/immutable/assets/2.e43c38e6.css" rel="stylesheet">
15		<link href="/_app/immutable/assets/app.3d4a4283.css" rel="stylesheet">
16		<link href="/_app/immutable/assets/Layout.02430cea.css" rel="stylesheet">
17		<link href="/_app/immutable/assets/ShareButtons.994c62f8.css" rel="stylesheet">
18		<link href="/_app/immutable/assets/_page.54b8921b.css" rel="stylesheet">
19		<link rel="modulepreload" href="/_app/immutable/entry/start.06512ede.js">
20		<link rel="modulepreload" href="/_app/immutable/chunks/index.bd0d3ab8.js">
21		<link rel="modulepreload" href="/_app/immutable/chunks/singletons.d2fe95fe.js">
22		<link rel="modulepreload" href="/_app/immutable/entry/app.fade40aa.js">
23		<link rel="modulepreload" href="/_app/immutable/chunks/preload-helper.cf010ec4.js">
24		<link rel="modulepreload" href="/_app/immutable/nodes/0.6baef522.js">
25		<link rel="modulepreload" href="/_app/immutable/nodes/2.b911366e.js">
26		<link rel="modulepreload" href="/_app/immutable/chunks/stores.8819ea2f.js">
27		<link rel="modulepreload" href="/_app/immutable/chunks/Icon.cd31578c.js">
28		<link rel="modulepreload" href="/_app/immutable/nodes/8.b68e40aa.js">
29		<link rel="modulepreload" href="/_app/immutable/chunks/BlogCard.e1a6458c.js">
30		<link rel="modulepreload" href="/_app/immutable/chunks/Breadcrumbs.df0a6ea7.js">
31		<link rel="modulepreload" href="/_app/immutable/chunks/SEO.4d6a56f3.js"><title>Blog | RGB Studios</title><!-- HEAD_svelte-s32bpt_START --><!-- HEAD_svelte-s32bpt_END --><!-- HEAD_svelte-1d1p1fp_START --><link rel="icon" href="http://sveltekit-prerender/img/rgb_logo_256.png"><meta name="apple-mobile-web-app-status-bar" content="#111111"><meta name="theme-color" content="#111111"><meta name="msapplication-TileColor" content="#111111"><link rel="mask-icon" href="http://sveltekit-prerender/img/rgb_logo_256.png" color="#111111"><meta name="title" content="Blog | RGB Studios"><meta name="description" content="Read blog posts about web design and more from RGB Studios"><meta name="keywords" content="web dev blog,web development blog,web design blog,website design blog,rgb studios blog,design tips and tricks"><meta name="robots" content="index, follow"><meta name="googlebot" content="index"><meta property="og:image:height" content="600"><meta property="og:image:width" content="1600"><meta property="og:description" content="Read blog posts about web design and more from RGB Studios"><meta property="og:title" content="Blog | RGB Studios"><meta property="og:url" content="http://sveltekit-prerender/blog"><meta property="og:image" content="http://sveltekit-prerender/img/website_seo_img.png"><meta property="og:site_name" content="Blog | RGB Studios"><meta name="twitter:title" content="Blog | RGB Studios"><meta name="twitter:description" content="Read blog posts about web design and more from RGB Studios"><meta name="twitter:image" content="http://sveltekit-prerender/img/website_seo_img.png"><meta name="twitter:card" content="summary_large_image"><meta property="twitter:url" content="http://sveltekit-prerender/blog"><link rel="canonical" href="http://sveltekit-prerender/blog"><meta property="og:type" content="website"><!-- HEAD_svelte-1d1p1fp_END -->
32
33	<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 33-34
33
34	<script async src="https://www.googletagmanager.com/gtag/js?id=
34G-S6YNB0161H
vendor: 13 bytes, lines 34-35
34"></script>
35	
35<script>
36		
vendor: 137 bytes, lines 36-40
36window.dataLayer = window.dataLayer || [];
37		function gtag() { dataLayer.push(arguments); }
38		gtag('js', new Date());
39
40		gtag('config', '
40G-S6YNB0161H
vendor: 5 bytes, lines 40-41
40');
41	
41</script>
41
42</head>
43
44<body>
45	
46
47
48
49<div class="navbar bg-base-900/90 sticky top-0 z-10 backdrop-blur-sm"><div class="navbar-start">
50<div class="relative lg:hidden"><button class="btn btn-ghost" title="Menu"><svg class="w-6 h-6 inline" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path></svg></button>
51	<ul class="absolute menu menu-compact dropdown-content mt-2 p-2 shadow bg-base-900 rounded-box w-52 origin-top-left transition-all ease-in-out duration-200 scale-0 opacity-0"><li><a href="/">Home</a></li>
52			<li><span class="justify-between">Projects
53			<svg class="w-4 h-4" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></span>
54		<ul class="p-2 bg-base-900"><li><a href="/projects">All Projects</a></li><li><a href="/projects/popular">Popular</a></li><li><a href="/projects/new">New</a></li><li><a href="/projects/updated">Recently Updated</a></li></ul></li>
55			<li><span class="justify-between">Blog
56			<svg class="w-4 h-4" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></span>
57		<ul class="p-2 bg-base-900"><li><a href="/blog">All Posts</a></li><li><a href="/blog?category=webdev">Web Dev</a></li><li><a href="/blog?category=design">Design</a></li></ul></li>
58			<li><a href="/about">About Us</a></li>
59			<li><a href="/contact">Contact</a></li></ul></div>
60		<a class="hidden xs:block btn btn-ghost" href="/" aria-label="Menu"><img class="h-full" src="/img/rgb_logo_light_256.png" alt="RGB Studios logo"></a></div>
61
62	<div class="navbar-center hidden lg:flex"><ul class="menu menu-horizontal p-0"><li><a href="/">Home</a></li>
63			<li><a href="/projects">Projects
64					<svg class="w-4 h-4" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></a>
65				<ul class="p-2 bg-base-900"><li><a href="/projects">All Projects</a></li>
66					<li><a href="/projects/popular">Popular</a></li>
67					<li><a href="/projects/new">New</a></li>
68					<li><a href="/projects/updated">Recently Updated</a></li></ul></li>
69			<li><a href="/blog" class="active">Blog
70					<svg class="w-4 h-4" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></a>
71				<ul class="p-2 bg-base-900"><li><a href="/blog">All Posts</a></li>
72					<li><a href="/blog?category=webdev">Web Dev</a></li>
73					<li><a href="/blog?category=design">Design</a></li></ul></li>
74			<li><a href="/about">About Us</a></li>
75			<li><a href="/contact">Contact</a></li></ul></div>
76
77	<div class="navbar-end"><a class="btn btn-outline" href="/contact">Get in touch</a></div></div>
78<div class="w-full h-1 opacity-50 hidden lg:blocksticky top-14"></div>
79<div class="rgb-banner w-full text-center py-2 mt-12 background-[]" style="background: linear-gradient(-45deg, var(--brand-red) 33%, var(--brand-green) 33%, var(--brand-green) 67%, var(--brand-blue) 67%);"><img class="-mt-12 w-24 h-24 mx-auto hover:rotate-[360deg] transition-transform ease-in-out duration-500" src="/img/rgb_logo_light_256.png" alt="RGB logo">
80	<h1 class="mt-2 text-5xl font-bold">RGB Studios<small>.org</small></h1>
81	<h2 class="my-2 text-xl">A web development company</h2></div>
82<div class="container py-8">
83
84
85
86<div class="text-sm breadcrumbs overflow-x-visible mb-1"><ul class="inline-flex flex-wrap"><li class="underline text-white"><a href="/">Home</a>
87				</li><li class="text-white">Blog</li></ul></div>
88
89<article class="prose-custom mx-auto"><h1 class="text-center">Blog</h1></article>
90
91<img class="h-48 mx-auto" src="/img/pages/blog_post.svg" alt="">
92
93<div class="grid gap-8 my-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"><a href="/blog/enable-hibernate-on-windows" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Enable Hibernate on Windows and When to Use it</h2>
94		<p class="my-4">Learn how to enable hibernate on Windows, what hibernate is, and when you should and should not use it</p>
95		<div class="card-actions"><div class="badge badge-outline">tech</div><div class="badge badge-outline">troubleshooting</div><div class="badge badge-outline">windows</div></div></div>
96
97	<picture><source type="image/avif" srcset="/img/blog/hibernate_bear.avif" alt="How to Enable Hibernate on Windows and When to Use it">
98		<img src="/img/blog/hibernate_bear.jpg" alt="How to Enable Hibernate on Windows and When to Use it" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/recover-deleted-git-branch" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">
98How to Recover a Deleted Git Branch - Deleted Locally, Remotely or Both</h2>
99		<p class="my-4">Learn how to recover a deleted git branch, even if it was deleted locally and remotely</p>
100		<div class="card-actions"><div class="badge badge-outline">git</div></div></div>
101
102	<picture><source type="image/avif" srcset="/img/blog/person_frustrated_pc.avif" alt="How to Recover a Deleted Git Branch - Deleted Locally, Remotely or Both">
103		<img src="/img/blog/person_frustrated_pc.jpg" alt="How to Recover a Deleted Git Branch - Deleted Locally, Remotely or Both" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/svelte-bindable-custom-component" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Bind to a Custom Component in Svelte</h2>
104		<p class="my-4">Learn how to bind to a custom component in Svelte.</p>
105		<div class="card-actions"><div class="badge badge-outline">svelte</div><div class="badge badge-outline">svelte kit</div></div></div>
106
107	<picture><source type="image/avif" srcset="/img/blog/chainlink.avif" alt="How to Bind to a Custom Component in Svelte">
108		<img src="/img/blog/chainlink.jpg" alt="How to Bind to a Custom Component in Svelte" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/modules-explained-mjs-cjs" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Understanding MJS and CJS - JavaScript Modules Explained</h2>
109		<p class="my-4">Why you should know the difference between mjs and cjs</p>
110		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">node js</div><div class="badge badge-outline">modules</div></div></div>
111
112	<picture><source type="image/avif" srcset="/img/blog/building-white-black.avif" alt="Understanding MJS and CJS - JavaScript Modules Explained">
113		<img src="/img/blog/building-white-black.jpg" alt="Understanding MJS and CJS - JavaScript Modules Explained" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/lottie-files-hack-fix" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Fix hacked crypto wallet popup on your website</h2>
114		<p class="my-4">Fix hacked crypto wallet popup on your website - downgrade to 2.0.4 of lottie files</p>
115		<div class="card-actions"><div class="badge badge-outline">webdev</div></div></div>
116
117	<picture><source type="image/avif" srcset="/img/blog/person-distress-computer.avif" alt="Fix hacked crypto wallet popup on your website">
118		<img src="/img/blog/person-distress-computer.jpg" alt="Fix hacked crypto wallet popup on your website" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/localhost-https-vite-mkcert" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">HTTPS localhost on a SvelteKit, Vue, React, or other Vite Project with mkcert</h2>
119		<p class="my-4">Learn how to get localhost HTTPS on a SvelteKit, Vue, React, or other Vite Project with mkcert-cli</p>
120		<div class="card-actions"><div class="badge badge-outline">web</div><div class="badge badge-outline">vite</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">react</div><div class="badge badge-outline">vue</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">node</div><div class="badge badge-outline">npm</div></div></div>
121
122	<picture><source type="image/avif" srcset="/img/blog/lock.avif" alt="HTTPS localhost on a SvelteKit, Vue, React, or other Vite Project with mkcert">
123		<img src="/img/blog/lock.jpg" alt="HTTPS localhost on a SvelteKit, Vue, React, or other Vite Project with mkcert" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/js-spread-operator" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Understanding the JavaScript Spread Operator</h2>
124		<p class="my-4">Learn about the simple yet powerful spread (...) operator in JavaScript</p>
125		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">js</div></div></div>
126
127	<picture><source type="image/avif" srcset="/img/blog/spread.avif" alt="Understanding the JavaScript Spread Operator">
128		<img src="/img/blog/spread.jpg" alt="Understanding the JavaScript Spread Operator" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/json-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Beginner's Guide to JSON</h2>
129		<p class="my-4">Understanding JSON for new JavaScript developers</p>
130		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">js</div></div></div>
131
132	<picture><source type="image/avif" srcset="/img/blog/json.avif" alt="A Beginner's Guide to JSON">
133		<img src="/img/blog/json.jpg" alt="A Beginner's Guide to JSON" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/markdown-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Beginner's Guide to Markdown</h2>
134		<p class="my-4">Learn about markdown, where it's used, why it's so popular, and how to write it yourself in this simple article</p>
135		<div class="card-actions"><div class="badge badge-outline">webdev</div></div></div>
136
137	<picture><source type="image/avif" srcset="/img/blog/person_writing.avif" alt="A Beginner's Guide to Markdown">
138		<img src="/img/blog/person_writing.jpg" alt="A Beginner's Guide to Markdown" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/rich-text-editor-javascript" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Create a Rich Text Editor in JavaScript</h2>
139		<p class="my-4">Learn how to create a rich text editor that can bold, italic, underline, change alignment, color, and font</p>
140		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">js</div></div></div>
141
142	<picture><source type="image/avif" srcset="/img/blog/bold.avif" alt="How to Create a Rich Text Editor in JavaScript">
143		<img src="/img/blog/bold.jpg" alt="How to Create a Rich Text Editor in JavaScript" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/svg-scale-animate-transform-origin" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Scale a SVG Element Around a Transform Origin</h2>
144		<p class="my-4">The trick to using animatetransform to scale around a center point</p>
145		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svg</div></div></div>
146
147	<picture><source type="image/avif" srcset="/img/blog/circles.avif" alt="How to Scale a SVG Element Around a Transform Origin">
148		<img src="/img/blog/circles.jpg" alt="How to Scale a SVG Element Around a Transform Origin" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/animate-svg-viewbox" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">The Trick to Animating SVG Viewbox</h2>
149		<p class="my-4">Learn how to animate a SVG viewbox quickly</p>
150		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svg</div><div class="badge badge-outline">css</div></div></div>
151
152	<picture><source type="image/avif" srcset="/img/blog/viewport.avif" alt="The Trick to Animating SVG Viewbox">
153		<img src="/img/blog/viewport.jpg" alt="The Trick to Animating SVG Viewbox" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/js-array-objects-table" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Simple JavaScript to Convert an Array of Objects to HTML Table</h2>
154		<p class="my-4">Learn how to take an array of objects and display it as a table on your website</p>
155		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">js</div><div class="badge badge-outline">css</div></div></div>
156
157	<picture><source type="image/avif" srcset="/img/blog/color_table.avif" alt="Simple JavaScript to Convert an Array of Objects to HTML Table">
158		<img src="/img/blog/color_table.jpg" alt="Simple JavaScript to Convert an Array of Objects to HTML Table" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/top-icon-sets-web-developers" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">The Top Icon Sets for Web Developers</h2>
159		<p class="my-4">Check out the pros and cons of each of these easy to use icon sets</p>
160		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svg</div><div class="badge badge-outline">css</div><div class="badge badge-outline">design</div></div></div>
161
162	<picture><source type="image/avif" srcset="/img/blog/icons.avif" alt="The Top Icon Sets for Web Developers">
163		<img src="/img/blog/icons.jpg" alt="The Top Icon Sets for Web Developers" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/vector-illustration-websites" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">The Top Vector Illustration Websites</h2>
164		<p class="my-4">Check out these free to use and customizable vector art websites for your next project</p>
165		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svg</div><div class="badge badge-outline">css</div></div></div>
166
167	<picture><source type="image/avif" srcset="/img/blog/street_art_alley.avif" alt="The Top Vector Illustration Websites">
168		<img src="/img/blog/street_art_alley.jpg" alt="The Top Vector Illustration Websites" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/ten-must-use-svg-tools" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Ten Must Use SVG Tools</h2>
169		<p class="my-4">Check out these useful SVG website tools for editing, exporting, and designing your website with ease</p>
170		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svg</div><div class="badge badge-outline">css</div><div class="badge badge-outline">design</div></div></div>
171
172	<picture><source type="image/avif" srcset="/img/blog/lights_rgb.avif" alt="Ten Must Use SVG Tools">
173		<img src="/img/blog/lights_rgb.jpg" alt="Ten Must Use SVG Tools" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/a-cleanup-folders-script-for-your-package-json" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Ignore Dark Mode During Print Using Tailwind CSS</h2>
174		<p class="my-4">Learn how to ignore dark mode and use light mode when the user prints your page in y
174our Tailwind CSS project</p>
175		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">tailwindcss</div><div class="badge badge-outline">css</div></div></div>
176
177	<picture><source type="image/avif" srcset="/img/blog/printer.avif" alt="Ignore Dark Mode During Print Using Tailwind CSS">
178		<img src="/img/blog/printer.jpg" alt="Ignore Dark Mode During Print Using Tailwind CSS" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/css-regex-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Simple Guide to CSS Regex</h2>
179		<p class="my-4">Learn how to use CSS regex in minutes</p>
180		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">node js</div></div></div>
181
182	<picture><source type="image/avif" srcset="/img/blog/colored_wires.avif" alt="A Simple Guide to CSS Regex">
183		<img src="/img/blog/colored_wires.jpg" alt="A Simple Guide to CSS Regex" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/full-bleed-css" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Use Two Simple Lines of CSS to Make Your Div Full-Bleed</h2>
184		<p class="my-4">Use this quick CSS hack to make your div full bleed, even if it is inside a container and you want the background-color to extend out</p>
185		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">css</div></div></div>
186
187	<picture><source type="image/avif" srcset="/img/blog/coffee_falling_outside.avif" alt="Use Two Simple Lines of CSS to Make Your Div Full-Bleed">
188		<img src="/img/blog/coffee_falling_outside.jpg" alt="Use Two Simple Lines of CSS to Make Your Div Full-Bleed" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/css-accent-color-property" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">About the CSS Accent Color Property</h2>
189		<p class="my-4">Learn how to use the new CSS accent-color property and what it can do</p>
190		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">css</div></div></div>
191
192	<picture><source type="image/avif" srcset="/img/blog/toggles.avif" alt="About the CSS Accent Color Property">
193		<img src="/img/blog/toggles.jpg" alt="About the CSS Accent Color Property" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/array-methods-javascript-iteration" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Array Methods in JavaScript - Part 2: Iteration</h2>
194		<p class="my-4">Learn about iterating over arrays with forEach, map, filter, reduce, find, and more!</p>
195		<div class="card-actions"><div class="badge badge-outline">web</div><div class="badge badge-outline">javascript</div></div></div>
196
197	<picture><source type="image/avif" srcset="/img/blog/solar_array_2.avif" alt="Array Methods in JavaScript - Part 2: Iteration">
198		<img src="/img/blog/solar_array_2.jpg" alt="Array Methods in JavaScript - Part 2: Iteration" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/array-methods-javascript-newer" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Array Methods in JavaScript - Part 3: New Methods in 2024</h2>
199		<p class="my-4">Learn about new array methods coming soon to a browser near you!</p>
200		<div class="card-actions"><div class="badge badge-outline">web</div><div class="badge badge-outline">javascript</div></div></div>
201
202	<picture><source type="image/avif" srcset="/img/blog/solar_array_3.avif" alt="Array Methods in JavaScript - Part 3: New Methods in 2024">
203		<img src="/img/blog/solar_array_3.jpg" alt="Array Methods in JavaScript - Part 3: New Methods in 2024" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/array-methods-javascript" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Array Methods in JavaScript - Part 1: The Basics</h2>
204		<p class="my-4">Learn about many different array methods in JavaScript - Great read for all skill sets!</p>
205		<div class="card-actions"><div class="badge badge-outline">web</div><div class="badge badge-outline">javascript</div></div></div>
206
207	<picture><source type="image/avif" srcset="/img/blog/solar_array.avif" alt="Array Methods in JavaScript - Part 1: The Basics">
208		<img src="/img/blog/solar_array.jpg" alt="Array Methods in JavaScript - Part 1: The Basics" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/css-position-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Guide to Position in CSS</h2>
209		<p class="my-4">Learn about the different position properties in CSS</p>
210		<div class="card-actions"><div class="badge badge-outline">web</div><div class="badge badge-outline">css</div></div></div>
211
212	<picture><source type="image/avif" srcset="/img/blog/chess_position.avif" alt="Guide to Position in CSS">
213		<img src="/img/blog/chess_position.jpg" alt="Guide to Position in CSS" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/home-based-business" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Home Sweet Home Based Business</h2>
214		<p class="my-4">Learn how to create your business from home with this simple must read checklist</p>
215		<div class="card-actions"><div class="badge badge-outline">business</div></div></div>
216
217	<picture><source type="image/avif" srcset="/img/blog/home_business.avif" alt="Home Sweet Home Based Business">
218		<img src="/img/blog/home_business.jpg" alt="Home Sweet Home Based Business" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/random-uid-javascript" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Easily Create a Random UID in JavaScript</h2>
219		<p class="my-4">A simple solution to generating a random UID in JavaScript</p>
220		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">web</div></div></div>
221
222	<picture><source type="image/avif" srcset="/img/blog/passport.avif" alt="How to Easily Create a Random UID in JavaScript">
223		<img src="/img/blog/passport.jpg" alt="How to Easily Create a Random UID in JavaScript" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/shortcuts-daily-developer" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Shortcuts I Use Daily as a Web Developer</h2>
224		<p class="my-4">Learn about Justin's most used keyboard shortcuts in VS Code, Chrome, Windows, and more</p>
225		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">web</div></div></div>
226
227	<picture><source type="image/avif" srcset="/img/blog/keycaps.avif" alt="Shortcuts I Use Daily as a Web Developer">
228		<img src="/img/blog/keycaps.jpg" alt="Shortcuts I Use Daily as a Web Developer" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/svelte-kit-local-storage-store" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Create a Svelte Kit Store That Syncs With Local Storage - Svelte 5</h2>
229		<p class="my-4">Create a Svelte Kit store that automatically syncs with localStorage in Svelte 5</p>
230		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">web</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">sveltekit</div></div></div>
231
232	<picture><source type="image/avif" srcset="/img/blog/storage.avif" alt="How to Create a Svelte Kit Store That Syncs With Local Storage - Svelte 5">
233		<img src="/img/blog/storage.jpg" alt="How to Create a Svelte Kit Store That Syncs With Local Storage - Svelte 5" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/youtube-channels" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Educational, Entertaining, and Fun Channels for Programming, Engineering, History, and More</h2>
234		<p class="my-4">A great list of YouTube channels to check out to learn more about programming, engineering, how things work, or miscellaneous fun topics</p>
235		<div class="card-actions"><div class="badge badge-outline">web</div></div></div>
236
237	<picture><source type="image/avif" srcset="/img/blog/youtube.avif" alt="Educational, Entertaining, and Fun Channels for Programming, Engineering, History, and More">
238		<img src="/img/blog/youtube.jpg" alt="Educational, Entertaining, and Fun Channels for Programming, Engineering, History, and More" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/desktop-clock-new-logo" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Desktop Clock's New Logo</h2>
239		<p class="my-4">Desktop Clock reveals its new logo, icons, and design system!</p>
240		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">design</div></div></div>
241
242	<picture><source type="image/avif" srcset="/img/blog/desktop_clock_new_logo.avif" alt="Desktop Clock's New Logo">
243		<img src="/img/blog/desktop_clock_new_logo.jpg" alt="Desktop Clock's New Logo" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/css-specificity-simplified" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">CSS Specificity Simplified</h2>
244		<p class="my-4">Learn how CSS specificity works in a few simple and easy to learn examples</p>
245		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">css</div></div></div>
246
247	<picture><source type="image/avif" srcset="/img/blog/chess.avif" alt="CSS Specificity Simplified">
248		<img src="/img/blog/chess.jpg" alt="CSS Specificity Simplified" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/css-units-and-how-to-use-them" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">CSS Units and How to Use Them</h2>
249		<p class="my-4">Learn all about different units in CSS and which you should use when</p>
250		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">css</div></div></div>
251
252	<picture><source type="image/avif" srcset="/img/blog/measuring_tape.avif" alt="CSS Units and How to Use Them">
253		<img src="/img/blog/measuring_tape.jpg" alt="CSS Units and How to Use Them" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/disable-typescript-rules" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Disable Specific TypeScript Rules</h2>
254		<p class="my-4">Learn how to disable and ignore TypeScript warnings and errors by line, by file, and by project</p>
255		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">typescript</div></div></div>
256
257	<picture><source type="image/avif" srcset="/img/blog/mute_light.avif" alt="How to Disable Specific TypeScript Rules">
258		<img src="/img/blog/mute_light.jpg" alt="How to Disable Specific TypeScript Rules" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/if-programming-languages-were-cars" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">If Programming Languages were cars</h2>
259		<p class="my-4">We analyze a few popular programming languages and compare them to cars (and other vehicles)</p>
260		<div class="card-actions"><div class="badge badge-outline">programming</div></div></div>
261
262	<picture><source type="image/avif" srcset="/img/blog/car.avif" alt="If Programming Languages were cars">
263		<img src="/img/blog/car.jpg" alt="If Programming Languages were cars" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/page-transitions-in-svelte-kit" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Page Transitions in Svelte Kit</h2>
264		<p class="my-4">A simple guide to page transitions in your svelte kit project</p>
265		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">svelte kit</div></div></div>
266
267	<picture><source type="image/avif" srcset="/img/blog/moving_train.avif" alt="Page Transitions in Svelte Kit">
268		<img src="/img/blog/moving_train.jpg" alt="Page Transitions in Svelte Kit" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/react-ten-tips-and-tricks" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">10 Tricks And Tips To Help You Become The Best ReactJS Developer</h2>
269		<p class="my-4">Learn ten tips and tricks to write performance, bug-free React code faster</p>
270		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">react</div></div></div>
271
272	<picture><source type="image/avif" srcset="/img/blog/molecule.avif" alt="10 Tricks And Tips To Help You Become The Best ReactJS Developer">
273		<img src="/img/blog/molecule.jpg" alt="10 Tricks And Tips To Help You Become The Best ReactJS Developer" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/alpine-tabs-component" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Make a Tabs Component with Alpine JS in Three Minutes</h2>
274		<p class="my-4">Learn Alpine JS and make a fully functional tabs component in just three minutes</p>
275		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">alpinejs</div></div></div>
276
277	<picture><source type="image/avif" srcset="/img/blog/typing_document.avif" alt="Make a Tabs Component with Alpine JS in Three Minutes">
278		<img src="/img/blog/typing_document.jpg" alt="Make a Tabs Component with Alpine JS in Three Minutes" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/alpine-search-component" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Tutorial: How to Make a Simple Search Component in Alpine JS</h2>
279		<p class="my-4">Create a simple search component in just minutes that can automatically search data and render to the page using Alpine JS.</p>
280		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">learn</div><div class="badge badge-outline">webdev</div></div></div>
281
282	<picture><source type="image/avif" srcset="/img/blog/search_alpine.avif" alt="Tutorial: How to Make a Simple Search Component in Alpine JS">
283		<img src="/img/blog/search_alpine.jpg" alt="Tutorial: How to Make a Simple Search Component in Alpine JS" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/font-files-comparison" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Comparison of All Major Font Files</h2>
284		<p class="my-4">Read on to learn about different font files, their use cases, capabilities, performance, and support.</p>
285		<div class="card-actions"><div class="badge badge-outline">design</div><div class="badge badge-outline">learn</div><div class="badge badge-outline">typography</div><div class="badge badge-outline">webdev</div></div></div>
286
287	<picture><source type="image/avif" srcset="/img/blog/metal_type_grid.avif" alt="A Comparison of All Major Font Files">
288		<img src="/img/blog/metal_type_grid.jpg" alt="A Comparison of All Major Font Files" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/git-u-flag" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">What the -u Flag in Git Does</h2>
289		<p class="my-4">A quick read on the -u flag in git.</p>
290		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">learn</div></div></div>
291
292	<picture><source type="image/avif" srcset="/img/blog/git_mascot.avif" alt="What the -u Flag in Git Does">
293		<img src="/img/blog/git_mascot.jpg" alt="What the -u Flag in Git Does" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/quick-blog-post-images" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Get Quick, Beautiful, Open Source, and Performant Images for Your Blog</h2>
294		<p class="my-4">
294Learn how to quickly and efficiently get pretty images for your next blog post.</p>
295		<div class="card-actions"><div class="badge badge-outline">programming</div><div class="badge badge-outline">learn</div><div class="badge badge-outline">webdev</div><div class="badge badge-outline">tutorial</div></div></div>
296
297	<picture><source type="image/avif" srcset="/img/blog/man_searching_water.avif" alt="How to Get Quick, Beautiful, Open Source, and Performant Images for Your Blog">
298		<img src="/img/blog/man_searching_water.jpg" alt="How to Get Quick, Beautiful, Open Source, and Performant Images for Your Blog" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/tailwind-setup-local-fonts" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Setup Local Font Files in TailwindCSS</h2>
299		<p class="my-4">Learn how to set up custom fonts in TailwindCSS.</p>
300		<div class="card-actions"><div class="badge badge-outline">tailwindcss</div><div class="badge badge-outline">learn</div><div class="badge badge-outline">webdev</div></div></div>
301
302	<picture><source type="image/avif" srcset="/img/blog/wood_k.avif" alt="How to Setup Local Font Files in TailwindCSS">
303		<img src="/img/blog/wood_k.jpg" alt="How to Setup Local Font Files in TailwindCSS" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/tailwind-setup" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">First time setup for Tailwind CSS</h2>
304		<p class="my-4">Set up a Tailwind project without any other dependencies!</p>
305		<div class="card-actions"><div class="badge badge-outline">webdev</div></div></div>
306
307	<picture><source type="image/avif" srcset="/img/blog/using_computer_easy.avif" alt="First time setup for Tailwind CSS">
308		<img src="/img/blog/using_computer_easy.jpg" alt="First time setup for Tailwind CSS" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/default-audio-devices-windows" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">How to Change Default Audio Devices in Windows</h2>
309		<p class="my-4">Learn to change your default speakers, headphones, or microphone in Windows.</p>
310		<div class="card-actions"><div class="badge badge-outline">tech</div><div class="badge badge-outline">troubleshooting</div></div></div>
311
312	<picture><source type="image/avif" srcset="/img/blog/audio_settings.avif" alt="How to Change Default Audio Devices in Windows">
313		<img src="/img/blog/audio_settings.jpg" alt="How to Change Default Audio Devices in Windows" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/images-on-the-web" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Everything You Need to Know About Optimizing Images on The Web</h2>
314		<p class="my-4">Learn all about optimizing images, supporting browsers, and improve your user experience, performance and page ranking</p>
315		<div class="card-actions"><div class="badge badge-outline">webdev</div></div></div>
316
317	<picture><source type="image/avif" srcset="/img/blog/website_with_images.avif" alt="Everything You Need to Know About Optimizing Images on The Web">
318		<img src="/img/blog/website_with_images.jpg" alt="Everything You Need to Know About Optimizing Images on The Web" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/troubleshoot-anything-quickly-windows" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Troubleshoot Anything Quickly in Windows</h2>
319		<p class="my-4">Learn to run the Windows troubleshooter in seconds</p>
320		<div class="card-actions"><div class="badge badge-outline">tech</div><div class="badge badge-outline">troubleshooting</div></div></div>
321
322	<picture><source type="image/avif" srcset="/img/blog/troubleshooting.avif" alt="Troubleshoot Anything Quickly in Windows">
323		<img src="/img/blog/troubleshooting.jpg" alt="Troubleshoot Anything Quickly in Windows" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/typography-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">The Definitive Guide to Typography on the Web</h2>
324		<p class="my-4">Learn all about fontfaces, letterforms, font pairs, branding, layouts, performance, and more to best use fonts for your brand or website</p>
325		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">typography</div><div class="badge badge-outline">design</div><div class="badge badge-outline">marketing</div></div></div>
326
327	<picture><source type="image/avif" srcset="/img/blog/typography_a.avif" alt="The Definitive Guide to Typography on the Web">
328		<img src="/img/blog/typography_a.jpg" alt="The Definitive Guide to Typography on the Web" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/a-simple-svelte-tabs-component" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Simple Svelte Tabs Component</h2>
329		<p class="my-4">Read on to create a functioning and customizable tabs component without all the fancy stuff..</p>
330		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">component</div></div></div>
331
332	<picture><source type="image/avif" srcset="/img/blog/tabs.avif" alt="A Simple Svelte Tabs Component">
333		<img src="/img/blog/tabs.jpg" alt="A Simple Svelte Tabs Component" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/creating-an-article-progress-bar-with-javascript" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Creating an Article Progress Bar with Javascript</h2>
334		<p class="my-4">Learn how to create a scroll tracker for articles on your blog in just a few minutes</p>
335		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">css</div><div class="badge badge-outline">ui</div><div class="badge badge-outline">react</div><div class="badge badge-outline">vue</div><div class="badge badge-outline">svelte</div></div></div>
336
337	<picture><source type="image/avif" srcset="/img/blog/woman_scrolling.avif" alt="Creating an Article Progress Bar with Javascript">
338		<img src="/img/blog/woman_scrolling.jpg" alt="Creating an Article Progress Bar with Javascript" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/file-size-on-the-web" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">File Size on the Web</h2>
339		<p class="my-4">PC games add gigabyte updates, but web devs will debate fiercely over a few kilobytes. Find out why.</p>
340		<div class="card-actions"><div class="badge badge-outline">webdev</div></div></div>
341
342	<picture><source type="image/avif" srcset="/img/blog/slow_website_frustration.avif" alt="File Size on the Web">
343		<img src="/img/blog/slow_website_frustration.jpg" alt="File Size on the Web" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a>
343<a href="/blog/ignore-dark-mode-during-print-tailwind-css" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Cleanup Folders Script for Your package.json</h2>
344		<p class="my-4">Check out this ten line script to instantly clear those pesky build folders</p>
345		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">javascript</div><div class="badge badge-outline">node js</div></div></div>
346
347	<picture><source type="image/avif" srcset="/img/blog/vacuum_confetti.avif" alt="A Cleanup Folders Script for Your package.json">
348		<img src="/img/blog/vacuum_confetti.jpg" alt="A Cleanup Folders Script for Your package.json" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/redirects-in-svelte-kit" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Simple Guide to Redirects in Svelte Kit</h2>
349		<p class="my-4">Read on for a ten line imlementation to handling as many redirects as you need in your Svelte Kit project.</p>
350		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">svelte kit</div></div></div>
351
352	<picture><source type="image/avif" srcset="/img/blog/redirect_road.avif" alt="A Simple Guide to Redirects in Svelte Kit">
353		<img src="/img/blog/redirect_road.jpg" alt="A Simple Guide to Redirects in Svelte Kit" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/svelte-kit-transitions-guide" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">A Simple Guide for Svelte Transitions</h2>
354		<p class="my-4">Quickly learn how to apply fade, slide, and other transitions using Svelte</p>
355		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">css</div><div class="badge badge-outline">ui</div><div class="badge badge-outline">css transitions</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">svelte kit</div></div></div>
356
357	<picture><source type="image/avif" srcset="/img/blog/crosswalk.avif" alt="A Simple Guide for Svelte Transitions">
358		<img src="/img/blog/crosswalk.jpg" alt="A Simple Guide for Svelte Transitions" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a><a href="/blog/two-unique-layouts-in-svelte" class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"><div class="card-body"><h2 class="group-hover:text-white card-title text-3xl">Using Two Unique Layouts in Svelte Kit</h2>
359		<p class="my-4">If you ever struggled to use one layout for some pages, and another layout that doesn't inherit from the base layout, read on.</p>
360		<div class="card-actions"><div class="badge badge-outline">webdev</div><div class="badge badge-outline">svelte</div><div class="badge badge-outline">svelte kit</div></div></div>
361
362	<picture><source type="image/avif" srcset="/img/blog/two_doors.avif" alt="Using Two Unique Layouts in Svelte Kit">
363		<img src="/img/blog/two_doors.jpg" alt="Using Two Unique Layouts in Svelte Kit" class="group-hover:scale-105 transition-transform w-full h-72 object-cover object-top"></picture></a></div></div>
364<footer class="w-full"><div class="footer p-10 bg-base-800 text-base-content"><div><span class="footer-title svelte-jan6c2">Projects</span>
365			<a class="footer-link svelte-jan6c2" href="/projects">All</a>
366			<a class="footer-link svelte-jan6c2" href="/projects/popular">Popular</a>
367			<a class="footer-link svelte-jan6c2" href="/projects/new">New</a>
368			<a class="footer-link svelte-jan6c2" href="/projects/updated">Recently Updated</a></div>
369		<div><span class="footer-title svelte-jan6c2">Blog</span>
370			<a class="footer-link svelte-jan6c2" href="/blog">All Posts</a>
371			<a class="footer-link svelte-jan6c2" href="/blog?category=webdev">Web Dev</a>
372			<a class="footer-link svelte-jan6c2" href="/blog?category=design">Design</a></div>
373		<div>
374
375			<span class="footer-title svelte-jan6c2">Company</span>
376			<a class="footer-link svelte-jan6c2" href="/about">About Us</a>
377			<a class="footer-link svelte-jan6c2" href="/contact">Contact</a></div></div>
378	<div class="footer px-10 py-4 border-t bg-base-800 text-base-content border-base-700"><div class="items-center grid-flow-col"><img class="w-12 h-12" src="/img/rgb_logo_256.png" alt="RGB logo">
379			<p><a class="footer-link font-bold svelte-jan6c2" href="/">RGB Studios</a><br>Simple webapps and more<br>© Copyright 2026</p></div>
380		<div><a class="footer-link svelte-jan6c2" href="/sitemap">Sitemap</a>
381			<a class="footer-link svelte-jan6c2" href="/privacy">Privacy Policy</a></div>
382		<div class="md:place-self-center md:justify-self-end"><div class="grid grid-flow-col gap-4"><a class="hover:text-white" href="https://twitter.com/rgbstudiosorg" target="_blank" rel="noreferrer" aria-label="Twitter"><svg class="w-6 h-6 inline" stroke="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a>
383				<a class="hover:text-white" href="https://www.facebook.com/rgbstudios.org" target="_blank" rel="noreferrer" aria-label="Facebook"><svg class="w-6 h-6 inline" stroke="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a></div></div></div>
384</footer>
385
386
387			
388			
388<script>
389				{
390					__sveltekit_10uqsuo = {
391						base: "",
392						env: {}
393					};
394
395					const element = document.currentScript.parentElement;
396
397					const data = [null,null,null];
398
399					Promise.all([
400						import("/_app/immutable/entry/start.06512ede.js"),
401						import("/_app/immutable/entry/app.fade40aa.js")
402					]).then(([kit, app]) => {
403						kit.start(app, element, {
404							node_ids: [0, 2, 8],
405							data,
406							form: null,
407							error: null
408						});
409					});
410				}
411			</script>
411
412		
413</body>
414
415</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.