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.