Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Syntax Highlight — We Review Your Portfolios

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 review your portfolios!</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="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 03:59 - <a href="https://cudd.io/">cudd.io</a></p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> Shared component animation between home / about really nice</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Readable, clear</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Simple</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Check the contrast ratio on the white text on light blue: <a href= "https://coolors.co/contrast-checker/ffffff-56ccf2">https://coolors.co/contrast-checker/ffffff-56ccf2</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Nice SSR from <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> CSS vars</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Very tall cards without much text, looks like a mistake</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Better on a short browser window - peep the tall and skinny</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> Card heading should be h3 or h4</li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 10:35 - <a href= "https://damonbolesta.com/">damonbolesta.com</a></p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Nice design = super fun!</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Good color palette</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Shows your skills straight up</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Animation</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Not accessible - EASY fixes with <a href= "https://www.deque.com/axe/devtools/">Axe Dev Tools</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Text on background images hard to read</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> White text on buttons</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Bold some words in your bio</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Border radius</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 21:52 - <a href= "https://www.walterkjenkins.com/">walterkjenkins.com</a></p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Map is fun</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Contrast issues with the color choices</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Transparency not needed on body content</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Cursive font for links / buttons is a no for me dog</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Labels on social media icons</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Hero overlaps section below it</li> <li class="has-line-data" data-line-start="48" data-line-end="50"> Maps data processing should be h4</li> </ul> <p class="has-line-data" data-line-start="50" data-line-end="51"> 29:40 - <a href="https://suhit.me/">suhit.me</a></p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> This is an example of a really good one</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Wicked domain name</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Design is ON POINT, like this is the type of polish I like to see - I’d hire on this</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Can’t get enough <a href= "https://fonts.google.com/specimen/Inter">Inter font</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Fun little animation</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> I’d go a little easier on the box-shadow</li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Github even has a custom readme</li> <li class="has-line-data" data-line-start="58" data-line-end="65"> Resume <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Very modern - JS, TS, Bootstrap</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> TypeScript A+</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Drop the “5” and “3” from “HTML” and “CSS”</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> I’d add color to the resume, its likely not printed</li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Don’t need to say Github and LinkedIn in front of the URLs</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="65" data-line-end="66"> 37:20 - <a href= "https://jacobpawlak.com/">jacobpawlak.com</a></p> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> Initial loading is great - transitions are hot</li> <li class="has-line-data" data-line-start="67" data-line-end="68"> Typography looks nice - not sure about those serif all-cap nav items</li> <li class="has-line-data" data-line-start="68" data-line-end="69"> Slider not very usable</li> <li class="has-line-data" data-line-start="69" data-line-end="70"> View circle on hover is cool, but I’m not sure about following your mouse, covers text</li> <li class="has-line-data" data-line-start="70" data-line-end="71"> T-shirt portfolio is awesome</li> <li class="has-line-data" data-line-start="71" data-line-end="72"> Fun little bits in the footer</li> <li class="has-line-data" data-line-start="72" data-line-end="73"> SSL is broken - fix that sh!t</li> <li class="has-line-data" data-line-start="73" data-line-end="74"> Links don’t show over background images - common issue today</li> <li class="has-line-data" data-line-start="74" data-line-end="75"> External links should probably be indicated as such</li> <li class="has-line-data" data-line-start="75" data-line-end="76"> HTML, paragraphs as h3 & h4, h5, should be <p> - (i.e. “here are a few of my recently completed…” should be a <p>)</li> <li class="has-line-data" data-line-start="76" data-line-end="78"> Design of resume is KEY - different colors, eh?</li> </ul> <p class="has-line-data" data-line-start="78" data-line-end="79"> 47:04 - <a href="https://mrtnvh.com/">mrtnvh.com</a></p> <ul> <li class="has-line-data" data-line-start="79" data-line-end="80"> This is a good example of subtle flex of skills</li> <li class="has-line-data" data-line-start="80" data-line-end="81"> FAST AF</li> <li class="has-line-data" data-line-start="81" data-line-end="82"> Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)</li> <li class="has-line-data" data-line-start="82" data-line-end="83"> Personal Photo A+</li> <li class="has-line-data" data-line-start="83" data-line-end="84"> Position sticky</li> <li class="has-line-data" data-line-start="84" data-line-end="85"> Love the skills layout on the about page</li> <li class="has-line-data" data-line-start="85" data-line-end="88"> Email is a button <ul> <li class="has-line-data" data-line-start="86" data-line-end="87">I can’t copy your email</li> <li class="has-line-data" data-line-start="87" data-line-end="88"> We have mailto links - don’t reinvent</li> </ul> </li> <li class="has-line-data" data-line-start="88" data-line-end="90"> A+</li> </ul> <h2 class="code-line" data-line-start="90" data-line-end="91"> <a id="Links_90" name="Links_90"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://www.bravotv.com/top-chef">Top Chef</a></li> <li class="has-line-data" data-line-start="92" data-line-end="94"> <a href= "https://syntax.fm/show/354/the-surprisingly-exciting-world-of-html-elements"> Syntax 354: The Surprisingly Exciting World of HTML Elements</a></li> </ul> <h2 class="code-line" data-line-start="94" data-line-end="95"> <a id="_SIIIIICK__PIIIICKS__94" name= "_SIIIIICK__PIIIICKS__94"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> Scott: <a href= "https://starburns.audio/podcasts/what-had-happened-was/">What Had Happened Was Podcast</a></li> <li class="has-line-data" data-line-start="96" data-line-end="98"> Wes: <a href= "https://www.amazon.com/s?k=wago+lever+connectors">WAGO Lever-Nuts</a></li> </ul> <h2 class="code-line" data-line-start="98" data-line-end="99"> <a id="Shameless_Plugs_98" name="Shameless_Plugs_98"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="99" data-line-end="100"> Scott: <a href="https://www.leveluptutorials.com/pro">Building Svelte Components</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="100" data-line-end= "102">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="102" data-line-end="103"> <a id="Tweet_us_your_tasty_treats_102" name= "Tweet_us_your_tasty_treats_102"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "106"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="106" data-line-end= "107"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "109"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="109" data-line-end= "110">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 review your portfolios!
 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.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Cloudinary - Sponsor  Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
 Show Notes 03:59 - cudd.io
  Shared component animation between home / about really nice
 Readable, clear
 Simple
 Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2

 Nice SSR from Next.js

 CSS vars
 Very tall cards without much text, looks like a mistake
 Better on a short browser window - peep the tall and skinny
 Card heading should be h3 or h4
  10:35 - damonbolesta.com
  Nice design = super fun!
 Good color palette
 Shows your skills straight up
 Animation
 Not accessible - EASY fixes with Axe Dev Tools

 Text on background images hard to read
 White text on buttons
 Bold some words in your bio
 Border radius
  21:52 - walterkjenkins.com
  Map is fun
 Contrast issues with the color choices
 Transparency not needed on body content
 Cursive font for links / buttons is a no for me dog
 Labels on social media icons
 Hero overlaps section below it
 Maps data processing should be h4
  29:40 - suhit.me
  This is an example of a really good one
 Wicked domain name
 Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
 Can’t get enough Inter font

 Fun little animation
 I’d go a little easier on the box-shadow
 Github even has a custom readme
 Resume  Very modern - JS, TS, Bootstrap
 TypeScript A+
 Drop the “5” and “3” from “HTML” and “CSS”
 I’d add color to the resume, its likely not printed
 Don’t need to say Github and LinkedIn in front of the URLs

  37:20 - jacobpawlak.com
  Initial loading is great - transitions are hot
 Typography looks nice - not sure about those serif all-cap nav items
 Slider not very usable
 View circle on hover is cool, but I’m not sure about following your mouse, covers text
 T-shirt portfolio is awesome
 Fun little bits in the footer
 SSL is broken - fix that sh!t
 Links don’t show over background images - common issue today
 External links should probably be indicated as such
 HTML, paragraphs as h3 & h4, h5, should be - (i.e. “here are a few of my recently completed…” should be a 

 Design of resume is KEY - different colors, eh?
  47:04 - mrtnvh.com
  This is a good example of subtle flex of skills
 FAST AF
 Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)
 Personal Photo A+
 Position sticky
 Love the skills layout on the about page
 Email is a button I can’t copy your email
 We have mailto links - don’t reinvent

 A+
  Links  Top Chef

  Syntax 354: The Surprisingly Exciting World of HTML Elements

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: What Had Happened Was Podcast

 Wes: WAGO Lever-Nuts

  Shameless Plugs  Scott: Building Svelte Components - Sign up for the year and save 25%!
 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

Syntax Highlight — We Review Your Portfolios

Poslechněte si podcast