Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

704: Stump'd JS + CSS Interview Questions

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.

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:25">00:25</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:31">01:31</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:01">02:01</a> Explain CSS Contain and why it exists?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=07:27">07:27</a> In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://twitter.com/wesbos/status/1256229763225657348">Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=10:31">10:31</a> Which of the following elements are fake?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=13:00">13:00</a> Which of the following HTML tags are deprecated?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=16:38">16:38</a> What is the samp element?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=17:27">17:27</a> Name the 7 parts of CSS Houdini</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=21:07">21:07</a> In JavaScript for loop with 10 items, how can you exit a loop early?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=22:34">22:34</a> What is the difference between a pseudo element and a pseudo class?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=25:59">25:59</a> How could you implement CSS :has with JavaScript?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=27:56">27:56</a> What are two attributes that would make an SVG more accessible?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=29:43">29:43</a> How can you stop your process from exiting if you have an unhandled rejection?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=32:27">32:27</a> How do you prevent flex children from getting squished?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=34:40">34:40</a> In TypeScript, what does using keyof and typeof together do?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=37:19">37:19</a> What does ARIA stand for?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=37:39">37:39</a> Name 5 limitations that a serverless or edge function have over tradtional long running server?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=40:38">40:38</a> Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=42:03">42:03</a> If I’m building an application that needs to announce a change to the user, how would I do that?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=43:46">43:46</a> Name the 5 different Git elements methods on a document?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=45:39">45:39</a> What does the CSS prospective property do?</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="#t=48:23">48:23</a> Sick picks</li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Sick_Picks_28"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Scott: <a href="https://amzn.to/3T280mh">Pushpin hangers</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Wes: <a href="https://amzn.to/3NrAQcn">Niimbot Label Maker</a>, <a href= "https://www.amazon.ca/laffeya-Picture-Hanging-Bearclaw-Decorations/dp/B0BDLWNH5W/ref=sr_1_6?crid=34F92PAL21FN3&keywords=bearclaw+hanger&qid=1701712316&sprefix=bear+claw+hang,aps,107&sr=8-6"> Bearclaw Screws</a>)</li> </ul> <h3 class="code-line" data-line-start="34" data-line-end="35"> <a id="Shameless_Plugs_34"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Wes: <a href="https://wesbos.com/courses">Wes Bos Courses</a></li> </ul> <h3 class="code-line" data-line-start="39" data-line-end="40"> <a id="Hit_us_up_on_Socials_39"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more.
 Show Notes  00:25 Welcome
 01:31 Syntax Brought to you by Sentry
 02:01 Explain CSS Contain and why it exists?
 07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them?
 Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X

 10:31 Which of the following elements are fake?
 13:00 Which of the following HTML tags are deprecated?
 16:38 What is the samp element?
 17:27 Name the 7 parts of CSS Houdini
 21:07 In JavaScript for loop with 10 items, how can you exit a loop early?
 22:34 What is the difference between a pseudo element and a pseudo class?
 25:59 How could you implement CSS :has with JavaScript?
 27:56 What are two attributes that would make an SVG more accessible?
 29:43 How can you stop your process from exiting if you have an unhandled rejection?
 32:27 How do you prevent flex children from getting squished?
 34:40 In TypeScript, what does using keyof and typeof together do?
 37:19 What does ARIA stand for?
 37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server?
 40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size.
 42:03 If I’m building an application that needs to announce a change to the user, how would I do that?
 43:46 Name the 5 different Git elements methods on a document?
 45:39 What does the CSS prospective property do?
 48:23 Sick picks
  Sick Picks  Scott: Pushpin hangers

 Wes: Niimbot Label Maker, Bearclaw Screws)
  Shameless Plugs  Scott: Sentry

 Wes: Wes Bos Courses

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads

Aplikace Youradio Talk

704: Stump'd JS + CSS Interview Questions

Poslechněte si podcast