CodingCatDev · codercatdev · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/apps/codingcatdev/package.json b/apps/codingcatdev/package.json
@@ -17,7 +17,7 @@
 		"@firebase/app-types": "~0.9.0",
 		"@fontsource/shadows-into-light": "^5.0.13",
 		"@playwright/test": "^1.38.1",
-		"@skeletonlabs/skeleton": "2.3.0",
+		"@skeletonlabs/skeleton": "2.5.0",
 		"@skeletonlabs/tw-plugin": "0.2.2",
 		"@steeze-ui/heroicons": "^2.2.3",
 		"@steeze-ui/simple-icons": "^1.5.1",
@@ -63,6 +63,7 @@
 		"gsap": "^3.12.2",
 		"prism-svelte": "^0.5.0",
 		"prism-themes": "^1.9.0",
+		"rehype-slug": "^6.0.0",
 		"sveltefire": "^0.4.2"
 	}
 }
diff --git a/apps/codingcatdev/src/lib/components/content/Shorts.svelte b/apps/codingcatdev/src/lib/components/content/Shorts.svelte
@@ -0,0 +1,9 @@
+<aside class="alert variant-filled-surface">
+	<div class="alert-message">
+		<p>
+			This is a pretty long video. I won't blame you if you want to see <a href="#shorts"
+				>Video Shorts</a
+			> instead.
+		</p>
+	</div>
+</aside>
diff --git a/apps/codingcatdev/src/lib/components/content/Video.svelte b/apps/codingcatdev/src/lib/components/content/Video.svelte
@@ -3,20 +3,39 @@
 	export let title: string;
 
 	const youtubeParser = (url: string) => {
-		var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
-		var match = url.match(regExp);
+		const regExp =
+			/.*(?:youtu.be\/|(?:youtube.com\/live\/)|(?:youtube.com\/shorts\/)|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
+		let match = url.match(regExp);
 		return match && match[1].length == 11 ? match[1] : false;
 	};
 	$: finalSrc = `https://www.youtube.com/embed/${youtubeParser(src)}`;
+	$: isShort = src.includes('short');
 </script>
 
-<div class="aspect-video">
-	<iframe
-		src={finalSrc}
-		{title}
-		frameborder="0"
-		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-		allowfullscreen
-		class={`w-full h-full ${$$props.class}`}
-	/>
-</div>
+{#if isShort}
+	<div class="flex justify-center">
+		<div class="aspect-[9/16] flex-1 max-w-md">
+			<iframe
+				src={finalSrc}
+				{title}
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+				allowfullscreen
+				class={`w-full h-full rounded-md ${$$props.class}`}
+				loading="lazy"
+			></iframe>
+		</div>
+	</div>
+{:else}
+	<div class="aspect-video">
+		<iframe
+			src={finalSrc}
+			{title}
+			frameborder="0"
+			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+			allowfullscreen
+			class={`w-full h-full rounded-md ${$$props.class}`}
+			loading="lazy"
+		/>
+	</div>
+{/if}
diff --git a/...ingcatdev/src/routes/(content-single)/(non-course)/guest/jordan-powell/+page.md b/...ingcatdev/src/routes/(content-single)/(non-course)/guest/jordan-powell/+page.md
@@ -1,6 +1,6 @@
 ---
 type: guest
-cover: 'https://media.codingcat.dev/image/upload/main-codingcatdev-photo/podcast-guest/jordanpowell88'
+cover: 'https://media.codingcat.dev/image/upload/v1700095293/main-codingcatdev-photo/podcast-guest/jordanpowell88.jpg'
 name: Jordan Powell
 published: published
 slug: jordan-powell
@@ -20,3 +20,35 @@ websites:
 ## About
 
 Jordan is a DX Engineering working at [cypress.io](https://cypress.io)
+
+**Jordan Powell: A Multifaceted Creative**
+
+Jordan Powell is a multifaceted creative with a passion for storytelling, music, and design. Based in Georgetown Township, Michigan, Jordan has a diverse portfolio that spans a wide range of mediums, including writing, songwriting, graphic design, and web development.
+
+**A Passion for Storytelling**
+
+Jordan's love for storytelling is evident in his writing. He is a skilled wordsmith with a knack for crafting compelling narratives. Whether it's through short stories, poems, or screenplays, Jordan's writing is both captivating and thought-provoking. His ability to transport readers to new worlds and evoke a range of emotions is a testament to his talent as a storyteller.
+
+**A Musician with a Soulful Sound**
+
+Music has always been a central part of Jordan's life. As a songwriter and musician, he creates soulful melodies that resonate with listeners on a personal level. His music is often described as a blend of folk, blues, and jazz, with a touch of contemporary flair. Jordan's songwriting is characterized by its honesty and emotional depth, drawing inspiration from his own life experiences and observations of the world around him.
+
+**A Visual Artist with a Keen Eye for Design**
+
+Jordan's creativity extends to the visual realm as well. As a graphic designer, he possesses a keen eye for detail and a knack for creating visually appealing and effective designs. His work encompasses a wide range of projects, from website design and branding to print materials and illustrations. Jordan's design aesthetic is characterized by its clean lines, bold colors, and minimalist approach.
+
+**A Web Developer with a Technical Prowess**
+
+In addition to his creative talents, Jordan also has a strong technical background. As a web developer, he is proficient in various programming languages and frameworks, enabling him to create dynamic and user-friendly websites. Jordan's web development skills are complemented by his understanding of design principles, allowing him to create websites that are both visually appealing and functional.
+
+**A Creative with a Global Reach**
+
+Jordan's work has been featured in various publications and online platforms, showcasing his talents to a global audience. He has also participated in numerous exhibitions and showcases, further establishing himself as a respected creative in the industry.
+
+**A Dedicated Mentor and Educator**
+
+Jordan is passionate about sharing his knowledge and skills with others. He regularly conducts workshops and seminars, mentoring aspiring creatives and helping them develop their own unique talents. Jordan's commitment to education is evident in his dedication to fostering a supportive and collaborative learning environment.
+
+**A Multifaceted Creative with a Bright Future**
+
+Jordan Powell is a true renaissance man, with a diverse range of talents and a passion for creativity. His ability to seamlessly blend storytelling, music, design, and technology makes him a unique and valuable asset to the creative community. With his unwavering dedication to his craft and his commitment to sharing his knowledge, Jordan Powell is undoubtedly destined for a bright and successful future.
diff --git a/...dingcatdev/src/routes/(content-single)/(non-course)/guest/kent-c-dodds/+page.md b/...dingcatdev/src/routes/(content-single)/(non-course)/guest/kent-c-dodds/+page.md
@@ -23,3 +23,44 @@ Creator of:
 - [EpicWeb](https://www.epicweb.dev/)
 - [EpicReact](https://epicreact.dev/)
 - [Testing JavaScript](https://testingjavascript.com/)
+
+**Kent C. Dodds: Software Craftsman and Educator**
+
+Kent C. Dodds is a passionate software engineer and educator who has dedicated his career to improving the lives of others through quality software. With a deep understanding of JavaScript, TypeScript, and React, Kent has authored numerous popular open-source libraries and tools, including testing-library/react-testing-library, mdx-bundler, and babel-plugin-macros. His contributions to the open-source community have earned him a reputation as a respected leader and innovator.
+
+Beyond his technical expertise, Kent is also an engaging and inspiring educator. His educational blog, with over 198 blog posts and counting, has been read by over 500,000 people, providing valuable insights and guidance to developers of all levels. Kent's passion for teaching extends beyond the written word, as he is a frequent speaker at conferences and workshops, sharing his knowledge and experience with others.
+
+A dedicated husband and father, Kent also finds time to pursue his love of extreme sports. When he's not coding or teaching, you're likely to find him cruising around on his onewheel or hitting the slopes on his snowboard. Kent's ability to balance his professional and personal life with such enthusiasm and dedication is a testament to his character and commitment to excellence.
+
+**Key Highlights**
+
+- Open-source library and tool author
+- Respected leader and innovator in the JavaScript and React communities
+- Engaging and inspiring educator
+- Passionate speaker and facilitator
+- Dedicated family man and extreme sports enthusiast
+
+**Kent's Work**
+
+- **Testing Library for React:** A simple and complete set of React DOM testing utilities that encourage good testing practices. https://github.com/kentcdodds/testing-react-apps
+- **MDX Bundler:** A tool that takes MDX/TSX strings and outputs a component you can render. Supports imports! https://github.com/kentcdodds/mdx-bundler
+- **Babel Plugin Macros:** A tool that allows you to build simple compile-time libraries. https://github.com/kentcdodds/babel-plugin-macros
+- **Downshift:** A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. https://github.com/downshift-js/downshift
+- **Cross-Env:** A cross-platform setting of environment scripts. https://github.com/downshift-js/downshift
+
+**Kent's Blog**
+
+- **Educational Blog:** A collection of over 198 blog posts covering JavaScript, TypeScript, React, testing, careers, and more. https://kentcdodds.com/info
+
+**Kent's Speaking Engagements**
+
+- **Frequent speaker at conferences and workshops**
+- **Shares knowledge and experience with developers of all levels**
+
+**Kent's Personal Life**
+
+- **Dedicated husband and father**
+- **Passionate about extreme sports**
+- **Enthusiastic and dedicated individual**
+
+Kent C. Dodds is a true inspiration to the software development community. His unwavering commitment to quality, education, and innovation has made a significant impact on the lives of countless developers. As he continues to share his knowledge and expertise, Kent is sure to inspire generations of software engineers to come.
diff --git a/...(content-single)/(non-course)/podcast/cwcc-0-6-remix-with-kent-c-dodds/+page.md b/...(content-single)/(non-course)/podcast/cwcc-0-6-remix-with-kent-c-dodds/+page.md
@@ -0,0 +1,173 @@
+---
+type: podcast
+authors:
+  - alex-patterson
+  - brittney-postma
+episode: 6
+recording_date: August 17, 2022 6:00 PM
+season: 0
+published: published
+podcast: code-with-coding-cat
+chapters_done: false
+cloudinary_convert: false
+cover: https://media.codingcat.dev/image/upload/v1657910422/main-codingcatdev-photo/Remix-with-KentCDodds.jpg
+devto:
+excerpt: Kent C. Dodds walks us through an Epic reveal of Remix
+guests:
+  - kent-c-dodds
+hashnode:
+picks:
+slug: cwcc-0-6-remix-with-kent-c-dodds
+sponsors:
+spotify:
+start: August 17, 2022
+title: 'Remix with Kent C. Dodds'
+youtube: https://youtu.be/ZWVYJOclIXY
+---
+
+<script lang="ts">
+	import Video from '$lib/components/content/Video.svelte'
+	import Shorts from '$lib/components/content/Shorts.svelte'
+</script>
+
+<Shorts />
+
+Remix is a full-stack React framework that provides a seamless server and browser runtime for building modern web applications. It leverages distributed systems and native browser features to deliver snappy page loads, instant transitions, and a resilient user experience. Remix is built on top of the Web Fetch API, making it deployable to various environments, including serverless, traditional Node.js, and even non-Node.js environments like Cloudflare Workers.
+
+**Getting Started with Remix**
+
+To get started with Remix, follow the quickstart guide provided in the official documentation:
+
+```bash
+npx create-remix
+```
+
+This command will create a new Remix project and install the necessary dependencies. Once the project is created, you can start the development server using the following command:
+
+```bash
+npm run dev
+```
+
+The development server will open your browser to the Remix application. You can now start making changes to the code and see the results reflected in the browser immediately.
+
+**Key Features of Remix**
+
+Remix offers several key features that make it a powerful and versatile framework for building modern web applications:
+
+- **Server-side rendering (SSR):** Remix can render React components on the server, providing SEO benefits and faster initial page loads.
+
+- **Client-side rendering (CSR):** Remix also supports CSR, allowing for interactive and dynamic web applications.
+
+- **Data fetching:** Remix provides built-in data fetching capabilities, making it easy to load data from APIs or other sources.
+
+- **Routing:** Remix has a flexible routing system that supports both static and dynamic routes.
+
+- **Forms:** Remix simplifies handling user input and form submissions.
+
+- **Error handling:** Remix provides a robust error handling mechanism for graceful handling of errors and unexpected situations.
+
+**The Epic Stack**
+
+The Epic Stack is a popular architecture for building web applications using Remix, Tailwind CSS, and TypeScript. It combines the strengths of these tools to provide a productive and efficient development experience.
+
+**Kent C. Dodds' Contributions to Remix**
+
+Kent C. Dodds is a renowned developer and educator who has made significant contributions to the development of Remix. He is the creator of React Router, a popular routing library for React applications, and has been a key contributor to Remix's development since its inception.
+
+**Examples of Remix Applications**
+
+Remix has been used to build a variety of web applications, including:
+
+- **Landbot:** A conversational AI platform
+
+- **Vercel:** A cloud platform for deploying and hosting web applications
+
+- **Superview:** A data visualization tool
+
+- **Remix Academy:** An online course platform
+
+**Code Snippets from Remix Documentation**
+
+Here are some code snippets from the Remix documentation that demonstrate the framework's capabilities:
+
+**Fetching data from an API:**
+
+```jsx
+import { useFetcher } from '@remix/data';
+
+function MyComponent() {
+	const { data } = useFetcher('/api/data.json');
+
+	if (!data) {
+		return <div>Loading...</div>;
+	}
+
+	return (
+		<div>
+			{data.map((item) => (
+				<div key={item.id}>
+					<h2>{item.title}</h2>
+					<p>{item.description}</p>
+				</div>
+			))}
+		</div>
+	);
+}
+```
+
+**Handling form submissions:**
+
+```jsx
+import { useForm } from '@remix/forms';
+
+function MyForm() {
+	const { register, handleSubmit } = useForm();
+
+	const onSubmit = (values) => {
+		// Submit the form data to an API or perform other actions
+		console.log(values);
+	};
+
+	return (
+		<form onSubmit={handleSubmit(onSubmit)}>
+			<input type="text" {...register('name')} />
+			<input type="email" {...register('email')} />
+			<button type="submit">Submit</button>
+		</form>
+	);
+}
+```
+
+**Error handling:**
+
+```jsx
+import { ErrorBoundary } from '@remix/error-boundary';
+
+function MyComponent() {
+	return <ErrorBoundary>{/* Render your component here */}</ErrorBoundary>;
+}
+```
+
+**Advantages of Using Remix**
+
+Remix offers several advantages over other React frameworks:
+
+- **Seamless server and browser runtime:** Remix provides a unified runtime that handles both server-side and client-side rendering, simplifying development and improving performance.
+
+- **Resilient user experience:** Remix's use of distributed systems and native browser features ensures a responsive and reliable user experience, even under heavy load.
+
+- **Deployment flexibility:** Remix can be deployed to various environments, including serverless, traditional Node.js, and non-Node.js
+
+## Shorts
+
+<Video title="Exciting future developments in Angular Router and Remix Router" src="https://youtube.com/shorts/kx5CVRBnhdI" />
+<Video title="No JavaScript Needed State Management for Apps Made Easy" src="https://youtube.com/shorts/Mc0awq5d15A" />
+<Video title="Mastering React Using Closures to Avoid Bugs" src="https://youtube.com/shorts/lvM-8rzPGgk" />
+<Video title="Revolutionary Remix Ensuring Seamless JavaScript Experience for Users" src="https://youtube.com/shorts/RRa2mfs5YcQ" />
+<Video title="Revolutionary Remix Router Revolutionizing UX and DX on a Server" src="https://youtube.com/shorts/TURK2J6yxfA" />
+<Video title="Revolutionize your Web Experiences with Remix The Ultimate JavaScript Framework" src="https://youtube.com/shorts/5QOjDtmLWrU" />
+<Video title="Revolutionizing Data Loading Remix Center Stack Simplifies JavaScript Development" src="https://youtube.com/shorts/LRBUVrFH27k" />
+<Video title="Remix Center Stack Simplifies JavaScript Development" src="https://youtube.com/shorts/LRBUVrFH27k" />
+<Video title="Data Management Remix Makes Network Tab a Breeze" src="https://youtube.com/shorts/GspbUXLmpeY" />
+<Video title="Spicing Up My Background with a Neon Remix Sign" src="https://youtube.com/shorts/3UlJknYDV8w" />
+<Video title="Unleash Your Creativity with the Ultimate Fake Books App in Remix" src="https://youtube.com/shorts/TbdZU7b2bKQ" />