Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

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 potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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="Netlify__Sponsor_12" name="Netlify__Sponsor_12"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href= "https://netlify.com/syntax">netlify.com/syntax</a> for more info.</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"> 02:18 - I’m curious to know what you guys think of <a href= "https://mdxjs.com/">MDX</a>. I’d love to learn more about pros and cons, if you guys had a chance to use it.</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :)</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 30:00 - What are your thoughts on <a href= "https://sailsjs.com/">SailsJS</a> as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc.</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness?</p> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="Links_39" name="Links_39"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://github.com/jxnblk/mdx-deck">https://github.com/jxnblk/mdx-deck</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://mdsvex.com/">https://mdsvex.com/</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://formidable.com/open-source/spectacle/">Spectacle</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://github.com/pngwn/MDsveX">MDsveX</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://vuejs.org/">Vue.js</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://redux.js.org/">Redux</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://vuex.vuejs.org/">VueX</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href= "https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"> Better Comments</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://getkap.co/">Kap</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://redwoodjs.com/">Redwood.js</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://blitzjs.com/">Blitz.js</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://graphql.org/">GraphQL</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href= "https://github.com/ryanmcdermott/clean-code-javascript">https://github.com/ryanmcdermott/clean-code-javascript</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="_SIIIIICK__PIIIICKS__54" name= "_SIIIIICK__PIIIICKS__54"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Scott: <a href= "https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet">Easy Snippet</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Wes: <a href= "https://www.amazon.com/17-2062LG-Foam-Pool-Noodle-Green/dp/B01N5USCX3/">WOW Pool Noodles</a></li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Shameless_Plugs_58" name="Shameless_Plugs_58"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Scott: <a href="https://www.leveluptutorials.com/pro">All Courses</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="60" data-line-end="62"> 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="62" data-line-end="63"> <a id="Tweet_us_your_tasty_treats_62" name= "Tweet_us_your_tasty_treats_62"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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.
 Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
 Show Notes 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it.
 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind?
 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions?
 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why?
 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :)
 30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out.
 34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again?
 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects?
 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc.
 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful?
 48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness?
 Links  https://github.com/jxnblk/mdx-deck

 https://mdsvex.com/

 Spectacle

 MDsveX

 Vue.js

 Redux

 VueX

  Better Comments

 Kap

 Redwood.js

 Blitz.js

 GraphQL

 https://github.com/ryanmcdermott/clean-code-javascript

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Easy Snippet

 Wes: WOW Pool Noodles

  Shameless Plugs  Scott: All Courses - 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

Pro přehrání dalších podcastů se prosím registrujte.

Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

Poslechněte si podcast