Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Syntax Highlight (We Review Your Portfolio)

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">It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager.</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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/" target="_blank" rel= "noopener noreferrer">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>Mux - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit <a href= "https://mux.com/syntax">mux.com/syntax</a>.</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"> 04:50 - <a href= "https://shaquilhansford.com/">https://shaquilhansford.com/</a></p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> Not optimized for desktop</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Lots of spacing issues overall</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Too many accordions - could be lists in multiple columns</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Social links could be in the footer</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Twitter is on point - <a href= "http://iwantyoutohire.me/">iwantyoutohire.me</a></li> <li class="has-line-data" data-line-start="25" data-line-end="27"> Phone number on website is good</li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 11:31 - <a href= "https://www.benlammers.dev/">https://www.benlammers.dev/</a></p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Gimmy dat yellow</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> The design and polish is really good</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Data URI images can overload CPU</li> <li class="has-line-data" data-line-start="31" data-line-end="37"> Semantic headings, but HTML should use some work <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Four H1s on the page</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> 20 H2s</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> 40 H3s</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Main tag</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 20:28 - <a href= "https://www.zubairaziz.com/">https://www.zubairaziz.com/</a></p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Lots of empty space</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> Photo is key</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> Not sure what to do when I land on the page</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Blog is nice, but two posts from May - add more or drop it</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Portfolio is just enough</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> Nav animation should only happen on initial load</li> </ul> <p class="has-line-data" data-line-start="45" data-line-end="46"> 29:39 - <a href= "https://codebyfil.dev/">https://codebyfil.dev/</a></p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> This is a great example of something that is good, but needs a bit of polish</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Tone down the border radius</li> <li class="has-line-data" data-line-start="48" data-line-end="50"> Tone down the box shadow <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> Border and drop shadow</li> </ul> </li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Images aren’t links</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Footer padding or space - contact is ridding the bottom</li> <li class="has-line-data" data-line-start="52" data-line-end="59"> Scott’s HTML breakdown <ul> <li class="has-line-data" data-line-start="53" data-line-end="54"> Four H1s</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Six H2s</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Four H3s</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> 18 H4s</li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Five H5s</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="59" data-line-end="60"> 37:39 - <a href= "https://www.johngeorgesample.com/">https://www.johngeorgesample.com/</a></p> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Clean but maybe too clean</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Nav is too distractingly too big</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Need active link indicator in main nav</li> <li class="has-line-data" data-line-start="63" data-line-end="66"> div div div div - take a look at those semantic HTML tags <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> No H1 or H2</li> <li class="has-line-data" data-line-start="65" data-line-end="66"> HTML needs work brother</li> </ul> </li> <li class="has-line-data" data-line-start="66" data-line-end="67"> Use × instead of X</li> <li class="has-line-data" data-line-start="67" data-line-end="69"> Asterisk doesn’t work on mobile</li> </ul> <p class="has-line-data" data-line-start="69" data-line-end="70"> 46:52 - <a href= "https://stordahl.dev/">https://stordahl.dev/</a></p> <ul> <li class="has-line-data" data-line-start="70" data-line-end="71"> Great images</li> <li class="has-line-data" data-line-start="71" data-line-end="72"> Nice typography</li> <li class="has-line-data" data-line-start="72" data-line-end="73"> Sign-up for newsletter is great</li> <li class="has-line-data" data-line-start="73" data-line-end="74"> Store = A+</li> <li class="has-line-data" data-line-start="74" data-line-end="79"> Scott’s HTML breakdown <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> Two H1s, one of which is just nice to meet you</li> <li class="has-line-data" data-line-start="76" data-line-end="77"> Zero H2s</li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Articles should be articles</li> <li class="has-line-data" data-line-start="78" data-line-end="79"> No section</li> </ul> </li> <li class="has-line-data" data-line-start="79" data-line-end="81"> 1px move on hover is nice - could use a transition</li> </ul> <h2 class="code-line" data-line-start="81" data-line-end="82"> <a id="Links_81" name="Links_81"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.deque.com/axe/">Axe Accessibility Testing</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://www.gatsbyjs.com/">Gatsby</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href= "https://feathericons.com/">https://feathericons.com/</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://snipcart.com/">Snipcart</a></li> <li class="has-line-data" data-line-start="87" data-line-end="89"> <a href="https://www.geoguessr.com/">GeoGuessr</a></li> </ul> <h2 class="code-line" data-line-start="89" data-line-end="90"> <a id="_SIIIIICK__PIIIICKS__89" name= "_SIIIIICK__PIIIICKS__89"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="90" data-line-end="91"> Scott: <a href= "https://www.mightycoconut.com/minigolf">Walkabout Mini Golf</a></li> <li class="has-line-data" data-line-start="91" data-line-end="93"> Wes: <a href="https://amzn.to/2ZHrQGs">60w Portable Charger</a></li> </ul> <h2 class="code-line" data-line-start="93" data-line-end="94"> <a id="Shameless_Plugs_93" name="Shameless_Plugs_93"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="94" data-line-end="95"> Scott: <a href="https://www.leveluptutorials.com/pro">Node Fundamentals Authentication</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="95" data-line-end="97"> Wes: <a href="https://advancedreact.com/">Advanced React</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="97" data-line-end="98"> <a id="Tweet_us_your_tasty_treats_97" name= "Tweet_us_your_tasty_treats_97"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="100" data-line-end= "101"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager.
 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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes 04:50 - https://shaquilhansford.com/
  Not optimized for desktop
 Lots of spacing issues overall
 Too many accordions - could be lists in multiple columns
 Social links could be in the footer
 Twitter is on point - iwantyoutohire.me

 Phone number on website is good
  11:31 - https://www.benlammers.dev/
  Gimmy dat yellow
 The design and polish is really good
 Data URI images can overload CPU
 Semantic headings, but HTML should use some work  Four H1s on the page
 20 H2s
 40 H3s
 Main tag

  20:28 - https://www.zubairaziz.com/
  Lots of empty space
 Photo is key
 Not sure what to do when I land on the page
 Blog is nice, but two posts from May - add more or drop it
 Portfolio is just enough
 Nav animation should only happen on initial load
  29:39 - https://codebyfil.dev/
  This is a great example of something that is good, but needs a bit of polish
 Tone down the border radius
 Tone down the box shadow  Border and drop shadow

 Images aren’t links
 Footer padding or space - contact is ridding the bottom
 Scott’s HTML breakdown  Four H1s
 Six H2s
 Four H3s
 18 H4s
 Five H5s

  37:39 - https://www.johngeorgesample.com/
  Clean but maybe too clean
 Nav is too distractingly too big
 Need active link indicator in main nav
 div div div div - take a look at those semantic HTML tags  No H1 or H2
 HTML needs work brother

 Use × instead of X
 Asterisk doesn’t work on mobile
  46:52 - https://stordahl.dev/
  Great images
 Nice typography
 Sign-up for newsletter is great
 Store = A+
 Scott’s HTML breakdown  Two H1s, one of which is just nice to meet you
 Zero H2s
 Articles should be articles
 No section

 1px move on hover is nice - could use a transition
  Links  Axe Accessibility Testing

 Gatsby

 Next.js

 https://feathericons.com/

 Snipcart

 GeoGuessr

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Walkabout Mini Golf

 Wes: 60w Portable Charger

  Shameless Plugs  Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
 Wes: Advanced React - 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 Portfolio)

Poslechněte si podcast