Figma, CSS, and Code Editors

20min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter covers the advantages of using Figma as a tool for implementing CSS designs, including reusable and flexible components. The speakers also discuss different code editors and text-based interfaces, highlighting VS code as the preferred option. They touch on terminal applications for web development and compare various terminals like WSL, bash, fish, ZSH, Warp, and i-term. Additionally, they discuss tools and options for coding in TypeScript, such as build tools like VIT, Parcel, and webpack, and the importance of dev tools in browsers like Chrome and Firefox. Lastly, linting and formatting options in TypeScript, such as ESLint and Tailwind, are mentioned.

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.