Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Tales from Web Dev Past - 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 episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more!</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="Prismic__Sponsor_12" name="Prismic__Sponsor_12"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</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"> 03:00 - iFrames</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Sidebar menu</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> target</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 05:42 - JavaScript image hovers</p> <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a></li> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href= "https://www.adobe.com/products/photoshop.html">Photoshop</a> Slice and Select Tool</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 08:24 - <a href="http://css3pie.com/">CSS Pie</a></p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 09:42 - Animated gifs of people and construction</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="30"> <a href= "http://textfiles.com/underconstruction/">http://textfiles.com/underconstruction/</a></li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 11:20 - CSS Zoom 1 / IE CSS Hacks</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="33"> Forced IE 7 to redraw floats</li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 13:42 - Layout trends</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> 800x600 fixed websites</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://960.gs/">960gs</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://goldengridsystem.com/">Golden Grid</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> 12-col grid creators</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 16:26 - Sprite maps</p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="http://www.spritecow.com/">Spritecow</a></li> <li class="has-line-data" data-line-start="41" data-line-end="44"> ☠️ Killed icon fonts <ul> <li class="has-line-data" data-line-start="42" data-line-end="44"> ☠️ Killed by SVG icons</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="44" data-line-end="45"> 18:40 - <a href="https://getfirebug.com/">Firebug</a> and Firebug Lite</p> <ul> <li class="has-line-data" data-line-start="45" data-line-end="47"> Lite was a bookmarklet</li> </ul> <p class="has-line-data" data-line-start="47" data-line-end="48"> 20:14 - Image maps / Background gradients</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> 1px wide and 2000px tall image to make repeating gradients</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href= "http://www.squidfingers.com/patterns/">Squidfingers</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.toptal.com/designers/subtlepatterns/">Subtle Patterns</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.heropatterns.com/">Hero Patterns</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="http://projects.verou.me/css3patterns/">CSS3 Patterns</a></li> </ul> <p class="has-line-data" data-line-start="54" data-line-end="55"> 25:53 - Web rings</p> <p class="has-line-data" data-line-start="56" data-line-end="57"> 27:41 - Glossy buttons</p> <p class="has-line-data" data-line-start="58" data-line-end="59"> 28:09 - Flaming text</p> <ul> <li class="has-line-data" data-line-start="59" data-line-end="61"> <a href="https://flamingtext.com/">FlamingText.com</a></li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 30:01 - Marquee tags</p> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> Staggered</li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Speed attribute</li> </ul> <p class="has-line-data" data-line-start="65" data-line-end="66"> 31:26 - Spacer gifs</p> <p class="has-line-data" data-line-start="67" data-line-end="68"> 34:30 - <a href= "https://en.wikipedia.org/wiki/Angelfire">AngelFire</a> / <a href="https://en.wikipedia.org/wiki/Yahoo!_GeoCities">GeoCities</a></p> <p class="has-line-data" data-line-start="69" data-line-end="70"> 36:11 - <a href= "http://xanga.com/">Xanga</a> / <a href= "https://www.livejournal.com/">LiveJournal</a></p> <p class="has-line-data" data-line-start="71" data-line-end="72"> 37:29 - Above the fold content</p> <ul> <li class="has-line-data" data-line-start="72" data-line-end="74"> <a href="http://abovethefold.fyi/">Abovethefold.fyi</a></li> </ul> <p class="has-line-data" data-line-start="74" data-line-end="75"> 39:36 - <a href="https://homestarrunner.com/">Homestar Runner</a></p> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="Links_76" name="Links_76"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.drupal.org/project/omega">Drupal Omega theme</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href= "https://syntax.fm/show/032/designing-templating-inlining-and-sending-email"> Syntax 032: Designing, Templating, Inlining and Sending Email</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://mailchimp.com/">Mailchimp</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://www.litmus.com/">Litmus</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.emailonacid.com/">Email on Acid</a></li> <li class="has-line-data" data-line-start="82" data-line-end="84"> <a href= "https://www.hermanmiller.com/products/seating/office-chairs/aeron-chairs/"> Herman Miller Aeron</a></li> </ul> <h2 class="code-line" data-line-start="84" data-line-end="85"> <a id="_SIIIIICK__PIIIICKS__84" name= "_SIIIIICK__PIIIICKS__84"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="85" data-line-end="86"> Scott: <a href="https://newrustacean.com/">New Rustacean Podcast</a></li> <li class="has-line-data" data-line-start="86" data-line-end="88"> Wes: <a href="http://autonomous.ai/">Autonomous Ergo Chair</a></li> </ul> <h2 class="code-line" data-line-start="88" data-line-end="89"> <a id="Shameless_Plugs_88" name="Shameless_Plugs_88"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> Scott: <a href="https://www.leveluptutorials.com/pro">Advanced Animating React with Framer Motion</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="90" data-line-end="92"> Wes: <a href="https://mastergatsby.com/">Master Gatsby</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="92" data-line-end="93"> <a id="Tweet_us_your_tasty_treats_92" name= "Tweet_us_your_tasty_treats_92"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> 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 are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more!
 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.
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 Show Notes 03:00 - iFrames
  Sidebar menu
 target
  05:42 - JavaScript image hovers
  Dreamweaver

 Photoshop Slice and Select Tool
  08:24 - CSS Pie
 09:42 - Animated gifs of people and construction
  http://textfiles.com/underconstruction/

  11:20 - CSS Zoom 1 / IE CSS Hacks
  Forced IE 7 to redraw floats
  13:42 - Layout trends
  800x600 fixed websites
 960gs

 Golden Grid

 12-col grid creators
  16:26 - Sprite maps
  Spritecow

 ☠️ Killed icon fonts  ☠️ Killed by SVG icons

  18:40 - Firebug and Firebug Lite
  Lite was a bookmarklet
  20:14 - Image maps / Background gradients
  1px wide and 2000px tall image to make repeating gradients
 Squidfingers

 Subtle Patterns

 Hero Patterns

 CSS3 Patterns

  25:53 - Web rings
 27:41 - Glossy buttons
 28:09 - Flaming text
  FlamingText.com

  30:01 - Marquee tags
  Staggered
 Speed attribute
  31:26 - Spacer gifs
 34:30 - AngelFire / GeoCities
 36:11 - Xanga / LiveJournal
 37:29 - Above the fold content
  Abovethefold.fyi

  39:36 - Homestar Runner
 Links  Drupal Omega theme

  Syntax 032: Designing, Templating, Inlining and Sending Email

 Mailchimp

 Litmus

 Email on Acid

  Herman Miller Aeron

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: New Rustacean Podcast

 Wes: Autonomous Ergo Chair

  Shameless Plugs  Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%!
 Wes: Master Gatsby - 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

Tales from Web Dev Past - Part 2

Poslechněte si podcast