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

Zpravodajství

Technologické zprávy

Technika

749: Coding Shopify with Anne and Trudy of Design Packs

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 are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites. <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=00:59">00:59</a> Who is Anne Thomas?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:30">02:30</a> Who is Trudy MacNabb?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:06">04:06</a> Shopify themes, how does one build a theme?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:34">05:34</a> Do you have enough control with LiquidJS?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=07:52">07:52</a> Changing components of a liquid template.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=08:58">08:58</a> LiquidJS improving their dev tools.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=09:29">09:29</a> LiquidJS email marketing.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=10:32">10:32</a> Can you make your own LiquidJS methods?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://toomanytabs.xyz/">Too Many Tabs</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=11:34">11:34</a> How would you create a theme from scratch using modern tools?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=13:30">13:30</a> What about local dev and live reload?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://shopify.dev/docs/themes/tools/cli">Shopify Tools CLI</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=15:17">15:17</a> Is Shopify improving?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=17:13">17:13</a> What do you hate about Shopify themes?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://shopify.dev/docs/themes/tools/theme-kit">Shopify Tools Theme Kit</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=18:59">18:59</a> Have you used Hydrogen?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://hydrogen.shopify.dev/">Shopify Hydrogen</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=20:09">20:09</a> Headless has sacrifices.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=22:02">22:02</a> Are people building full websites in Shopify?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=23:56">23:56</a> Apps and integrations.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=25:56">25:56</a> Are people creating businesses around these integrations?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=29:16">29:16</a> What are design packs?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=31:26">31:26</a> Do you run your own servers?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=31:57">31:57</a> How does billing work with clients?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=33:18">33:18</a> Apps being ‘Sherlocked’.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://thehustle.co/sherlocking-explained">‘Sherlocking’ Explained</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=35:21">35:21</a> Where is the data stored?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=36:35">36:35</a> Can you make a custom UI?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=38:40">38:40</a> What are the downsides of building apps on Shopify?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=39:17">39:17</a> Are you expected to maintain versions?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=40:46">40:46</a> Do you manage all the support independently?</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=42:01">42:01</a> How do you match with their existing themes?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=43:54">43:54</a> What are the most popular blocks?</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=45:17">45:17</a> Does Shopify provide bundlers or compilers?</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=46:47">46:47</a> Shopify moving to blocks.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=47:38">47:38</a> Living as a digital nomad.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://syntax.fm/586">Syntax Episode 586 on Nomad Developing</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="#t=49:48">49:48</a> A new app Anne and Trudy launched.</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="#t=51:35">51:35</a> Limited by block size.</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="#t=54:08">54:08</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="46" data-line-end="47"> <a id="Sick_Picks_46"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Trudy: <a href="https://theblacktravelbox.com/">Bar of Shampoo</a></li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Anne: <a href="https://www.alieward.com/ologies">Alie Ward Ologies Podcast</a></li> </ul> <h3 class="code-line" data-line-start="51" data-line-end="52"> <a id="Shameless_Plugs_51"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="53" data-line-end="55"> Trudy: 25% off using SYNTAX25 at <a href= "https://design-packs.com/">Design Packs</a></li> </ul> <h3 class="code-line" data-line-start="55" data-line-end="56"> <a id="Hit_us_up_on_Socials_55"></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 are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites.
 Show Notes  00:00 Welcome to Syntax!
 00:59 Who is Anne Thomas?
 02:30 Who is Trudy MacNabb?
 04:06 Shopify themes, how does one build a theme?
 05:34 Do you have enough control with LiquidJS?
 07:52 Changing components of a liquid template.
 08:58 LiquidJS improving their dev tools.
 09:29 LiquidJS email marketing.
 10:32 Can you make your own LiquidJS methods?
 Too Many Tabs

 11:34 How would you create a theme from scratch using modern tools?
 13:30 What about local dev and live reload?
 Shopify Tools CLI

 15:17 Is Shopify improving?
 17:13 What do you hate about Shopify themes?
 Shopify Tools Theme Kit

 18:59 Have you used Hydrogen?
 Shopify Hydrogen

 20:09 Headless has sacrifices.
 22:02 Are people building full websites in Shopify?
 23:56 Apps and integrations.
 25:56 Are people creating businesses around these integrations?
 29:16 What are design packs?
 31:26 Do you run your own servers?
 31:57 How does billing work with clients?
 33:18 Apps being ‘Sherlocked’.
 ‘Sherlocking’ Explained

 35:21 Where is the data stored?
 36:35 Can you make a custom UI?
 38:40 What are the downsides of building apps on Shopify?
 39:17 Are you expected to maintain versions?
 40:46 Do you manage all the support independently?
 42:01 How do you match with their existing themes?
 43:54 What are the most popular blocks?
 45:17 Does Shopify provide bundlers or compilers?
 46:47 Shopify moving to blocks.
 47:38 Living as a digital nomad.
 Syntax Episode 586 on Nomad Developing

 49:48 A new app Anne and Trudy launched.
 51:35 Limited by block size.
 54:08 Sick Picks + Shameless Plugs.
  Sick Picks  Trudy: Bar of Shampoo

 Anne: Alie Ward Ologies Podcast

  Shameless Plugs  Trudy: 25% off using SYNTAX25 at Design Packs

  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

749: Coding Shopify with Anne and Trudy of Design Packs

Poslechněte si podcast