Syntax - Tasty Web Development Treats cover image

775: Components We Need on Every Project

Syntax - Tasty Web Development Treats

Building Nav Components in Projects

1min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

When starting a project, a crucial conversation involves designing and implementing the navigation component, either by copying a nav component from elsewhere, using the hamburger menu approach, or customizing a new one. The strategy is to create a simple and descriptive HTML structure that can be easily styled and manipulated using CSS. While some navigation bars can be complex, many projects benefit from creating a custom nav structure. It's essential to ensure that if using multiple navs, updates are reflected across all instances.

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.

Show Notes

00:00 Welcome to Syntax!
01:48 Brought to you by Sentry.io.
02:53 Nav / Mobile Nav.
08:43 Header.
10:41 Toast message.
- Wes’ TikTok Demo.
18:51 Portal.
21:02 Drawer.
22:56 Auth forms.
28:49 Dialog / Modal.
31:30 Whats the difference between popover and dialog?
33:48 Confirm.
- Scott’s YouSureAboutThat.
35:46 Bonus tip on becoming a better developer.
36:29 Admin menu.
- Level Up Tutorials - Side Menu Demo.
37:51 Scott’s package directory rant.
40:26 Mobile only / Desktop only.
40:41 Client only.
40:57 Admin table.
41:23 The dump.
43:39 Share / Social links.
- Syntax ShareWindow.
45:44 Markdown renderer.
45:58 Tabs.
46:08 User menu.
46:18 Icon.
48:07 Loading.
49:21 Drop-down menu.
49:31 Accordion.
- CSS Tricks - How to Animate the Details Element.
52:13 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Supercommunicators.
Wes: Klack, Mech Vibes.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.

App store banner

Play store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode