Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × 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 memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>Linode - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.</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"> 04:07 - Can you explain the concept of memoization in JS?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 16:36 - How do you decide how specific a (React) component should be?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 22:03 - My question is about the <code>npm run eject</code> feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on <a href= "http://leveluptutorials.com/">leveluptutorials.com</a> using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 41:07 - Can you disable local fonts from the OS and check if the site actually loads them?</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots?</p> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Links_43" name="Links_43"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://mux.com/">https://mux.com/</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://vimeo.com/">https://vimeo.com/</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://github.com/cure53/DOMPurify">https://github.com/cure53/DOMPurify</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href= "https://wesbos.com/sanitize-html-es6-template-strings">https://wesbos.com/sanitize-html-es6-template-strings</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://svelte.dev/">https://svelte.dev/</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://vercel.com/">https://vercel.com/</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://begin.com/">https://begin.com/</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href= "https://en.wikipedia.org/wiki/Scott%27s_Tots">https://en.wikipedia.org/wiki/Scott%27s_Tots</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="_SIIIIICK__PIIIICKS__53" name= "_SIIIIICK__PIIIICKS__53"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Scott: <a href="https://www.netflix.com/title/80986854">I Think You Should Leave Season 2</a></li> <li class="has-line-data" data-line-start="55" data-line-end="57"> Wes: <a href="https://amzn.to/2Vutc8J">Underground Wire Locator</a></li> </ul> <h2 class="code-line" data-line-start="57" data-line-end="58"> <a id="Shameless_Plugs_57" name="Shameless_Plugs_57"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="58" data-line-end="61"> Scott:<br /> 1: <a href="https://www.leveluptutorials.com/pro">Level Up Tuts Pro</a> - Sign up for the year and save 25%!<br /> 2: <a href="https://forms.gle/47fnupLTnpatKXiH6">Become a Level Up Tutorials Author</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> 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="63" data-line-end="64"> <a id="Tweet_us_your_tasty_treats_63" name= "Tweet_us_your_tasty_treats_63"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> 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 memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, and more!
 Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
 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 04:07 - Can you explain the concept of memoization in JS?
 07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”?
 09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this?
 16:36 - How do you decide how specific a (React) component should be?
 22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists?
 24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique?
 31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover?
 33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site?
 38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach?
 41:07 - Can you disable local fonts from the OS and check if the site actually loads them?
 46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do?
 49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots?
 Links  https://mux.com/

 https://vimeo.com/

 https://github.com/cure53/DOMPurify

 https://wesbos.com/sanitize-html-es6-template-strings

 https://svelte.dev/

 https://vercel.com/

 https://begin.com/

 https://en.wikipedia.org/wiki/Scott%27s_Tots

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: I Think You Should Leave Season 2

 Wes: Underground Wire Locator

  Shameless Plugs  Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author

 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

Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!

Poslechněte si podcast