Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

690: How To Dark Mode and Beyond

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.

In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content. <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> Syntax + Sentry Announcement!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:35">01:35</a> Welcome</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:23">02:23</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:16">03:16</a> How to implement a theme</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=10:27">10:27</a> Writing the CSS</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=11:38">11:38</a> Glasses wearers protip</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=13:02">13:02</a> Class on the body and server side rendering issue</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=14:02">14:02</a> CSS Variables</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=15:05">15:05</a> Color variables in CSS</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=21:07">21:07</a> Working in half pixel sizes</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=22:40">22:40</a> Variable usage</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=25:23">25:23</a> Naming variables after what they style</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=30:42">30:42</a> Component level variables</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=33:27">33:27</a> Using zones</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=38:41">38:41</a> Themes should be defined as light or dark</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=39:20">39:20</a> Issues: Moving from light to dark</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=42:29">42:29</a> Issues: Drop shadow in dark mode</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=44:00">44:00</a> Issues: Flash of unthemed content</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=44:40">44:40</a> Issues: Opacity values</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=49:45">49:45</a> Issues: SVG need change color</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=55:56">55:56</a> Help is on the way!</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <a href="#t=59:57">59:57</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://github.com/syntaxfm/website/blob/v2/src/styles/themes/level-up.css"> website/src/styles/themes/level-up.css at v2</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://syntax.fm/show/678/the-2023-state-of-css-survey-part-2-css-frameworks-tooling-browser-usage"> The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://caniuse.com/?search=color-contrast">“color-contrast” | Can I use… Support tables for HTML5, CSS3, etc</a></li> <li class="has-line-data" data-line-start="30" data-line-end="32"> <a href= "https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/"> The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us</a></li> </ul> <h3 class="code-line" data-line-start="32" data-line-end="33"> <a id="_SIIIIICK__PIIIICKS__32"></a>××× SIIIIICK ××× PIIIICKS ×××</h3> <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> Scott: <a href="https://www.tiktok.com/@engineer.everything">Kala (@engineer.everything)</a></li> </ul> <h3 class="code-line" data-line-start="36" data-line-end="37"> <a id="Shameless_Plugs_36"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h3 class="code-line" data-line-start="41" data-line-end="42"> <a id="Hit_us_up_on_Socials_41"></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>

In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content.
 Show Notes  00:00 Syntax + Sentry Announcement!
 01:35 Welcome
 02:23 Syntax Brought to you by Sentry
 03:16 How to implement a theme
 10:27 Writing the CSS
 11:38 Glasses wearers protip
 13:02 Class on the body and server side rendering issue
 14:02 CSS Variables
 15:05 Color variables in CSS
 21:07 Working in half pixel sizes
 22:40 Variable usage
 25:23 Naming variables after what they style
 30:42 Component level variables
 33:27 Using zones
 38:41 Themes should be defined as light or dark
 39:20 Issues: Moving from light to dark
 42:29 Issues: Drop shadow in dark mode
 44:00 Issues: Flash of unthemed content
 44:40 Issues: Opacity values
 49:45 Issues: SVG need change color
 55:56 Help is on the way!
 59:57 SIIIIICK ××× PIIIICKS ×××
   website/src/styles/themes/level-up.css at v2

  The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage

 “color-contrast” | Can I use… Support tables for HTML5, CSS3, etc

  The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Kala (@engineer.everything)

  Shameless Plugs  Scott: Sentry

 Wes: Wes Bos Tutorials

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads

Aplikace Youradio Talk

690: How To Dark Mode and Beyond

Poslechněte si podcast