Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Thinking Ahead for Emergency UI When Building a Website

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.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website?</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 5:40 - Banners and popups</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Interfere</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Static</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Dismissible</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Cookie/localstorage</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated.</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <a href="https://news.ycombinator.com/item?id=22686602">Private client-side-only PWAs are hard</a></li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 14:35 - Good styling</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> What happens if they add an image?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Do they have access to the branded fonts and colors in their WYSIWYG?</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> Can you revoke 100px red Times New Roman?</li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 18:32 - Page alerts</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> Yellow, green, red</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Alerts on existing pages</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 21:08 - New pages</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Is there a good template for new pages?</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Can they easily set the slug? <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="http://whatever.com/covid19">whatever.com/covid19</a></li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Can they add it to the nav?</li> </ul> <p class="has-line-data" data-line-start="44" data-line-end="45"> 23:52 - Google’s “Hours of Operation”</p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Is that easy to change?</li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Meta tags: <a href= "https://schema.org/OpeningHoursSpecification">https://schema.org/OpeningHoursSpecification</a></li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 25:43 - Other</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Own your audience!</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Email newsletter ready to rock</li> <li class="has-line-data" data-line-start="53" data-line-end="56"> Online pickup? Basic scheduling software <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://www.cityhive.net/">https://www.cityhive.net/</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://snipcart.com/">https://snipcart.com/</a></li> </ul> </li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Live streaming - have a YouTube account ready to go, even if empty</li> </ul> <p class="has-line-data" data-line-start="58" data-line-end="59"> 34:38 - Deployment</p> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Detail how to deploy everything</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> It might have been years and the CSS will only compile on Node 6 and Gulp 3</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Do any caches need clearing?</li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Does the CSS need to be cache busted?</li> </ul> <h2 class="code-line" data-line-start="65" data-line-end="66"> <a id="Links_65" name="Links_65"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://1password.com/">1Password</a></li> <li class="has-line-data" data-line-start="67" data-line-end="69"> <a href="https://www.cloudflare.com/">Cloudflare</a></li> </ul> <h2 class="code-line" data-line-start="69" data-line-end="70"> <a id="_SIIIIICK__PIIIICKS__69" name= "_SIIIIICK__PIIIICKS__69"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="70" data-line-end="73"> Scott: <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.youtube.com/user/Jeffreyhansful">Mellow Groovy Sounds YouTube Channel</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.youtube.com/watch?v=wrNIj10un9o">Mellow Grovvy AOR / West Coast Mix #4</a></li> </ul> </li> <li class="has-line-data" data-line-start="73" data-line-end="75"> Wes: Used projectors are cheap and can be a great deal</li> </ul> <h2 class="code-line" data-line-start="75" data-line-end="76"> <a id="Shameless_Plugs_75" name="Shameless_Plugs_75"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="76" data-line-end="77"> Scott: <a href="https://www.leveluptutorials.com/pro">All Courses</a> - 50% everything!</li> <li class="has-line-data" data-line-start="77" data-line-end="79"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="79" data-line-end="80"> <a id="Tweet_us_your_tasty_treats_79" name= "Tweet_us_your_tasty_treats_79"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website?
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Show Notes 5:40 - Banners and popups
  Interfere
 Static
 Dismissible
 Cookie/localstorage
 When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated.
 Private client-side-only PWAs are hard

  14:35 - Good styling
  What happens if they add an image?
 Do they have access to the branded fonts and colors in their WYSIWYG?
 Can you revoke 100px red Times New Roman?
  18:32 - Page alerts
  Yellow, green, red
 Alerts on existing pages
  21:08 - New pages
  Is there a good template for new pages?
 Can they easily set the slug?  whatever.com/covid19

 Can they add it to the nav?
  23:52 - Google’s “Hours of Operation”
  Is that easy to change?
 Meta tags: https://schema.org/OpeningHoursSpecification

  25:43 - Other
  Own your audience!
 Email newsletter ready to rock
 Online pickup? Basic scheduling software  https://www.cityhive.net/

 https://snipcart.com/

 Live streaming - have a YouTube account ready to go, even if empty
  34:38 - Deployment
  Detail how to deploy everything
 It might have been years and the CSS will only compile on Node 6 and Gulp 3
 Do any caches need clearing?
 Does the CSS need to be cache busted?
  Links  1Password

 Cloudflare

  ××× SIIIIICK ××× PIIIICKS ×××  Scott:  Mellow Groovy Sounds YouTube Channel

 Mellow Grovvy AOR / West Coast Mix #4

 Wes: Used projectors are cheap and can be a great deal
  Shameless Plugs  Scott: All Courses - 50% everything!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Thinking Ahead for Emergency UI When Building a Website

Poslechněte si podcast