-
Notifications
You must be signed in to change notification settings - Fork 494
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create 775 - Components We Need on Every Project.md
- Loading branch information
1 parent
57a9c9f
commit b770534
Showing
1 changed file
with
63 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| number: 775 | ||
| title: Components We Need on Every Project | ||
| date: 1716980400000 | ||
| url: https://traffic.libsyn.com/syntax/Syntax_-_775.mp3 | ||
| youtube_url: https://www.youtube.com/watch?v=st2JGON63Kg | ||
| --- | ||
|
|
||
| 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](#t=00:00)** Welcome to Syntax! | ||
| * **[01:48](#t=01:48)** Brought to you by [Sentry.io](https://sentry.io/syntax). | ||
| * **[02:53](#t=02:53)** Nav / Mobile Nav. | ||
| * **[08:43](#t=08:43)** Header. | ||
| * **[10:41](#t=10:41)** Toast message. | ||
| * [Wes' TikTok Demo](https://www.tiktok.com/@wesbos/video/7355529411547942150). | ||
| * **[18:51](#t=18:51)** Portal. | ||
| * **[21:02](#t=21:02)** Drawer. | ||
| * **[22:56](#t=22:56)** Auth forms. | ||
| * **[28:49](#t=28:49)** Dialog / Modal. | ||
| * **[31:30](#t=31:30)** Whats the difference between popover and dialog? | ||
| * **[33:48](#t=33:48)** Confirm. | ||
| * [Scott's YouSureAboutThat](https://github.com/stolinski/the-break/blob/main/src/lib/YouSureAboutThat.svelte). | ||
| * **[35:46](#t=35:46)** Bonus tip on becoming a better developer. | ||
| * **[36:29](#t=36:29)** Admin menu. | ||
| * [Level Up Tutorials - Side Menu Demo](https://svelte.dev/repl/d7d81d10ada74b83a574492964c3e5d0?version=3.44.0). | ||
| * **[37:51](#t=37:51)** Scott's package directory rant. | ||
| * **[40:26](#t=40:26)** Mobile only / Desktop only. | ||
| * **[40:41](#t=40:41)** Client only. | ||
| * **[40:57](#t=40:57)** Admin table. | ||
| * **[41:23](#t=41:23)** The dump. | ||
| * **[43:39](#t=43:39)** Share / Social links. | ||
| * [Syntax ShareWindow](https://github.com/syntaxfm/website/blob/main/src/lib/share/ShareWindow.svelte). | ||
| * **[45:44](#t=45:44)** Markdown renderer. | ||
| * **[45:58](#t=45:58)** Tabs. | ||
| * **[46:08](#t=46:08)** User menu. | ||
| * **[46:18](#t=46:18)** Icon. | ||
| * **[48:07](#t=48:07)** Loading. | ||
| * **[49:21](#t=49:21)** Drop-down menu. | ||
| * **[49:31](#t=49:31)** Accordion. | ||
| * [CSS Tricks - How to Animate the Details Element](https://css-tricks.com/how-to-animate-the-details-element/). | ||
| * **[52:13](#t=52:13)** Sick Picks + Shameless Plugs. | ||
|
|
||
| ### Sick Picks | ||
|
|
||
| - Scott: [Supercommunicators](https://amzn.to/3y6Aenm). | ||
| - Wes: [Klack](https://tryklack.com/), [Mech Vibes](https://mechvibes.com/). | ||
|
|
||
| ### Shameless Plugs | ||
|
|
||
| - Scott: [Syntax on YouTube](https://youtube.com/@syntaxfm). | ||
|
|
||
| ### 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) |