Create - (853 - The State of Frontend.md) (#1910)

* Create 853 - The State of Frontend.md * set vercel nodejs runtime version * fix svelte warnings * update timestamp validation --------- Co-authored-by: w3cj <[email protected]>
syntaxfm · Nov 22, 2024 · 997c2f2 · 997c2f2
1 parent 5c4ca22
commit 997c2f2
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/scripts/merging-show-validation.js b/scripts/merging-show-validation.js
@@ -44,9 +44,12 @@ const extractUrls = (content) => {
 };
 
 const validateTimestamps = (content) => {
-	// Updated regex to catch more patterns, including incorrect ones
-	const timestampRegex = /\b([0-5]?\d:[0-5]?\d(:[0-5]\d)?)\b|\b(\d{4})\b/g;
-	const potentialTimestamps = content.match(timestampRegex) || [];
+	// only check timestamps in show notes
+	content = content.split('### Show Notes')[1] || content;
+	// Regex to match timestamps with [ or = prefix, in formats HH:MM, HH:MM:SS, or HHMM
+	const timestampRegex = /(?:\[|=)(?:\d{2}:\d{2}(?::\d{2})?|\d{4})\b/g;
+	// Remove prefix from matched timestamps
+	const potentialTimestamps = (content.match(timestampRegex) || []).map((t) => t.slice(1));
 	const invalidTimestamps = potentialTimestamps.filter((timestamp) => {
 		if (!timestamp.includes(':')) {
 			// Catching cases like '0702' which should be invalid

diff --git a/shows/853 - The State of Frontend.md b/shows/853 - The State of Frontend.md
@@ -0,0 +1,63 @@
+---
+number: 853
+title: The State of Frontend
+date: 1732705200000
+url: https://traffic.libsyn.com/syntax/Syntax_-_853.mp3
+youtube_url: https://www.youtube.com/watch?v=FIYurQvJY2E
+---
+
+Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!
+
+### Show Notes
+
+* **[00:00](#t=00:00)** Welcome to Syntax!
+* **[00:53](#t=00:53)** Brought to you by Sentry.io.
+* **[01:15](#t=01:15)** About the survey.
+    * Follow along! [State of Frontend Survey](https://tsh.io/state-of-frontend/)
+* **[02:10](#t=02:10)** Frameworks.
+* **[06:15](#t=06:15)** Rendering frameworks.
+* **[07:35](#t=07:35)** State management.
+* **[09:14](#t=09:14)** Other libraries.
+    * [Just: Dependency-free Utilities](https://anguscroll.com/just/).
+* **[13:34](#t=13:34)** Data.
+    * [Syntax Episode 453](https://syntax.fm/show/453/why-do-people-still-use-axios-over-fetch).
+    * [Syntax Episode 833](https://syntax.fm/show/833/next-gen-fullstack-react-with-tanstack).
+* **[16:39](#t=16:39)** Hosting.
+    * [AWS Amplify](https://docs.amplify.aws/).
+* **[19:51](#t=19:51)** Continuous Integration.
+* **[21:30](#t=21:30)** Micro-frontends.
+* **[23:25](#t=23:25)** Package Managers.
+    * [pnpm Link Workspace Packages](https://pnpm.io/npmrc#link-workspace-packages).
+    * [Corepack](https://nodejs.org/api/corepack.html).
+* **[28:35](#t=28:35)** JS Runtimes.
+* **[29:47](#t=29:47)** Typescript.
+* **[33:13](#t=33:13)** Browser Technologies.
+* **[35:05](#t=35:05)** What is app property?
+* **[38:20](#t=38:20)** Progressive Web Apps.
+* **[40:11](#t=40:11)** Styling tools.
+* **[43:17](#t=43:17)** Testing.
+* **[45:39](#t=45:39)** Code editors.
+* **[49:02](#t=49:02)** Build tools.
+* **[49:17](#t=49:17)** Linting tools.
+* **[50:26](#t=50:26)** Operating systems.
+* **[51:17](#t=51:17)** The future trends.
+* **[54:14](#t=54:14)** Sick Picks + Shameless Plugs.
+
+### Sick Picks
+
+- Scott: [Candle Warmer](https://amzn.to/3YCXoLZ).
+- Wes: [Flighty iOS App](https://apps.apple.com/us/app/flighty-live-flight-tracker/id1358823008).
+
+### Shameless Plugs
+
+- Scott: [Syntax on Bluesky](https://bsky.app/profile/syntax.fm)
+
+### Hit us up on Socials!
+
+Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)
+
+Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)
+
+Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)
+
+Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)
diff --git a/src/lib/PodcastHero.svelte b/src/lib/PodcastHero.svelte
@@ -50,6 +50,7 @@
 				target="_blank"
 				title="Sentry"
 				class="naked"
+				aria-label="sentry"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 44"
 					><path

diff --git a/src/lib/player/Visualizer.svelte b/src/lib/player/Visualizer.svelte
@@ -18,7 +18,7 @@
 	analyser.fftSize = 128;
 	const bufferLength = analyser.frequencyBinCount;
 	const dataArray = new Uint8Array(bufferLength);
-	let barWidth: 10;
+	let barWidth = 10;
 	let bars: {
 		height: number;
 		width: number;

diff --git a/svelte.config.js b/svelte.config.js
@@ -34,7 +34,9 @@ const config = {
 	],
 
 	kit: {
-		adapter: adapter(),
+		adapter: adapter({
+			runtime: 'nodejs22.x'
+		}),
 		alias: {
 			$: 'src',
 			$actions: 'src/actions',