Syntax - Tasty Web Development Treats

727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

Feb 7, 2024

59:37

Snipd AI

In this podcast, the hosts provide a 30,000 foot view of web development, covering topics such as design tools, code tooling, CSS styling, programming languages, backend frameworks, user interface libraries, databases, image pipelines, hosting options, and the importance of application monitoring. They also share their experiences with browser crashes and discuss the usefulness of CAPTCHA solutions.

AI Summary

Highlights

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

Design tools and coding tools are essential for web development.

Choosing the right back-end options, databases, and hosting providers is crucial.

Deep dives

Overview of Web Development Tools and Choices

This podcast episode provides a comprehensive overview of the main ideas, key points, and various insights related to web development tools and choices. The episode covers a range of topics, including design tools like Figma, Adobe XD, and Sketch; coding tools like VS Code, Sublime Text, and Vim; terminals like Terminal and WSL; build tools like Vite, Parcel, and Webpack; browser and dev tools like Chrome, Firefox, and Safari; CSS options like Vanilla CSS and utility-based CSS libraries; programming languages like JavaScript and TypeScript; back-end options like meta frameworks (Remix, Next, SvelteKit), Node.js, and different databases (MySQL, Postgres, MongoDB); image pipelines like Cloudflare, Cloudinary, and Imgix; hosting, CDNs, and CI options like Netlify, Vercel, and AWS; and finishing touches like CAPTCHA, analytics (Google Analytics, Plausible), and image pipeline services.

Adapt to the Shifting Landscape of Web Development Tools

01:20

Introduction

2min

Personal Updates and Design Tools for Building Websites

2min

Figma, CSS, and Code Editors

20min

Choosing a Back End Framework

20min

Image Pipelines and Hosting Options

5min

Exploring Rising Cloud Service Costs and the Importance of Application Monitoring

3min

Browser Crash and CAPTCHA Solutions

8min

Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting.

Show Notes

00:00 Welcome!
00:21 30,000 foot view of web development
02:37 Brought to you by Sentry.io
02:55 Starting with design tools.
06:10 Code Tooling
- 06:22 Text Editors
- 09:34 Terminal
- 14:28 Build Tools
- 16:07 Browser and dev tools
- 18:21 Formatter and linter.
21:43 CSS (how you style your website).
25:34 Programming languages.
27:14 Backend with metaframework.
29:36 Backend without metaframework.
32:20 Runtimes (JavaScript).
What is Bun? The New JS Runtime
The Deno Show
34:02 User interface libraries.
Shoelace.style
39:43 Data management: Databases
41:42 Data management: ORM
WTF is an ORM
You should learn Drizzle, the TypeScript SQL ORM
42:53 Other data management considerations.
43:33 Image pipelines.
45:52 Hosting, CDN, CI.
Where Should You Host Your App? Hosting Providers Compared
Hasty Treat WTF × SSR vs JamStack vs Serverless?
47:21 Hosting your site.
50:19 The finishing touches.
- 50:26 Brought to you by Sentry.io
- 52:18 Captcha
55:03 Sick Picks + Shameless Plugs.