Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

762: What to Steal. Finding Inspiration in Web Development

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:57">01:57</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="14"> <a href="#t=02:26">02:26</a> What is okay to steal? <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=02:57">02:57</a> Color palettes.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=03:14">03:14</a> Font stacks.</li> <li class="has-line-data" data-line-start="9" data-line-end="12"> <a href="#t=06:26">06:26</a> Type scales. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://www.tiktok.com/@wesbos/video/7198565156853386502">Warp’s CSS Gradient Border</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://x.com/syntaxfm/status/1775907339792490785">Sentry’s Date Picker</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=08:52">08:52</a> General layout patterns.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=10:39">10:39</a> General vibes.</li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="19"> <a href="#t=11:20">11:20</a> What is NOT okay to steal? <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=11:26">11:26</a> Whole site designs.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=13:32">13:32</a> Taking too many things from ‘what to steal’ list.</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="#t=16:30">16:30</a> Text copy. <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://wesbos.com/parity-purchasing-power">Wes’ Parity Purchasing Power</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=18:48">18:48</a> What we’ve had stolen + how it feels.</li> <li class="has-line-data" data-line-start="20" data-line-end="42"> <a href="#t=21:45">21:45</a> Where to find inspiration. <ul> <li class="has-line-data" data-line-start="21" data-line-end="26"> <a href="#t=21:56">21:56</a> Code inspiration. <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://getcssscan.com/css-buttons-examples">CSS Scan Buttons</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://getcssscan.com/css-box-shadow-examples?ref=beautifulbuttons-bottom"> CSS Scan Box Shadows</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://tympanus.net/codrops/">Codrops</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://codepen.io/">CodePen</a></li> </ul> </li> <li class="has-line-data" data-line-start="26" data-line-end="37"> <a href="#t=25:18">25:18</a> Design inspiration. <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://bentogrids.com/">Bentro Grids</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://dribbble.com/">Dribble</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.siteinspire.com/">Site Inspire</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://saaslandingpage.com/">SaaS Landing Pages</a>.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://onepagelove.com/">One Page Love</a>.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://www.typewolf.com/">Type Wolf</a>.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://mobbin.com/browse/ios/apps">Mobbin</a>.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://syntax.fm/snackpack/">Syntax Newsletter</a>.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://www.hoverstat.es/">Hoverstat.es</a>.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://ilovecreatives.com/internet-gems">Internet Gems</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="42"> <a href="#t=32:48">32:48</a> UX inspiration. <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://goodui.org/">Good UI</a>.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://component.gallery/">The Component Gallery</a>.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://open-ui.org/">Open UI</a>.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://nicelydone.club/">Nicely Done</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="#t=35:25">35:25</a> How to capture inspiration.</li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.
 Show Notes  00:00 Welcome to Syntax!
 01:57 Brought to you by Sentry.io.
 02:26 What is okay to steal?  02:57 Color palettes.
 03:14 Font stacks.
 06:26 Type scales. Warp’s CSS Gradient Border.
 Sentry’s Date Picker.

 08:52 General layout patterns.
 10:39 General vibes.

 11:20 What is NOT okay to steal?  11:26 Whole site designs.
 13:32 Taking too many things from ‘what to steal’ list.
 16:30 Text copy. Wes’ Parity Purchasing Power.

 18:48 What we’ve had stolen + how it feels.
 21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons.
  CSS Scan Box Shadows.
 Codrops.
 CodePen

 25:18 Design inspiration. Bentro Grids.
 Dribble.
 Site Inspire.
 SaaS Landing Pages.
 One Page Love.
 Type Wolf.
 Mobbin.
 Syntax Newsletter.
 Hoverstat.es.
 Internet Gems.

 32:48 UX inspiration. Good UI.
 The Component Gallery.
 Open UI.
 Nicely Done.

 35:25 How to capture inspiration.
  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

Aplikace Youradio Talk

762: What to Steal. Finding Inspiration in Web Development

Poslechněte si podcast