Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Slow Connections Part 2

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 Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Kyle_Prinsloo_Freelancing__Sponsor_9" name= "Kyle_Prinsloo_Freelancing__Sponsor_9"></a>Kyle Prinsloo Freelancing - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at <a href= "https://studywebdevelopment.com/freelancing">studywebdevelopment.com/freelaning</a>. Use the coupon “SYNTAX” and get 25%.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 03:27 - Images</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Resize client-side when uploading</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Lazy load or progressive JPG</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Width + height so the content doesn’t shift with placeholders</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Compress your images - lossless and lossy</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> Use SVG where possible</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 08:33 - Scripts + CSS assets</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://syntax.fm/show/239/hasty-treat-5-things-that-make-your-site-slow"> Hasty Treat - 5 Things That Make Your Site Slow</a></li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <a href= "https://syntax.fm/show/241/hasty-treat-5-more-things-that-make-your-site-slow"> Hasty Treat - 5 More Things That Make Your Site Slow</a></li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 08:51 - Video</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="31"> Variable-rate video is key</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 09:13 - Connections that go in-n-out a lot</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Save form state on page refresh</li> <li class="has-line-data" data-line-start="34" data-line-end="37"> Show UI when user goes offline <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> <code>window.addEventListener('offline', updateOnlineStatus);</code></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <code>window.addEventListener('online', updateOnlineStatus);</code></li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Retrying in _____</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 10:27 - Service workers!</p> <ul> <li class="has-line-data" data-line-start="41" data-line-end="43"> Serves up local cache initially</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 12:05 - Fonts</p> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> Font-display CSS <a href= "https://css-tricks.com/font-display-masses/">https://css-tricks.com/font-display-masses/</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Sometimes possible: tree shake your fonts - load only the characters you need</li> <li class="has-line-data" data-line-start="47" data-line-end="49"> <code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;</code></li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 14:04 - CSS tricks</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="53"> Text over background image — make sure you also set a color so the text will show while the image is loading</li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 14:37 - Testing slow connections</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Dev tools</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Mimic a speed, or 3G</li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Links_58" name="Links_58"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://imageoptim.com/">ImageOptim</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://slack.com/">Slack</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://discord.com/">Discord</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.cloudflare.com/">Cloudflare</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://developers.google.com/web/tools/workbox">Workbox by Google</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href= "https://developers.google.com/web/tools/chrome-devtools">Chrome Dev Tools</a></li> <li class="has-line-data" data-line-start="65" data-line-end="67"> <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Dev Tools</a></li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.
 Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.
 Show Notes 03:27 - Images
  Resize client-side when uploading
 Lazy load or progressive JPG
 Width + height so the content doesn’t shift with placeholders
 Compress your images - lossless and lossy
 Use SVG where possible
  08:33 - Scripts + CSS assets
  Hasty Treat - 5 Things That Make Your Site Slow

  Hasty Treat - 5 More Things That Make Your Site Slow

  08:51 - Video
  Variable-rate video is key
  09:13 - Connections that go in-n-out a lot
  Save form state on page refresh
 Show UI when user goes offline  window.addEventListener('offline', updateOnlineStatus);
 window.addEventListener('online', updateOnlineStatus);

 Retrying in _____
  10:27 - Service workers!
  Serves up local cache initially
  12:05 - Fonts
  Font-display CSS https://css-tricks.com/font-display-masses/

 Sometimes possible: tree shake your fonts - load only the characters you need
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  14:04 - CSS tricks
  Text over background image — make sure you also set a color so the text will show while the image is loading
  14:37 - Testing slow connections
  Dev tools
 Mimic a speed, or 3G
  Links  ImageOptim

 Slack

 Discord

 Cloudflare

 Workbox by Google

 Chrome Dev Tools

 Firefox Dev Tools

  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

Hasty Treat - Slow Connections Part 2

Poslechněte si podcast