704: Stump'd JS + CSS Interview Questions

Dec 13, 2023

Wes and Scott dive into a lively quiz of JavaScript and CSS interview questions. They tackle topics like the CSS 'contain' property and the intricacies of CSS Grid layouts. Discussions include the seven parts of CSS Houdini, and differences between pseudo elements and classes. The duo explores error handling in JavaScript and the limitations of serverless architecture, along with accessibility in SVGs. They also uncover flex properties and share tips on organizing your coding life with a touch of humor.

Ask episode

AI Snips

Chapters

Transcript

Episode notes

INSIGHT

CSS Contain

CSS contain improves rendering performance by controlling what the browser renders.
It's useful for critical performance situations, affecting layout, size, and paint.

INSIGHT

CSS Grid Equal Columns

In CSS Grid, repeat(1fr, 3) doesn't guarantee equal columns due to content overflow.
Use minmax(0, 1fr) for truly equal width columns, handling content overflow gracefully.

INSIGHT

HTML Bidirectional Text

The <bdi> tag isolates bidirectional text, preventing surrounding text direction conflicts.
<bdo> overrides the text direction.

Get the Snipd Podcast app to discover more snips from this episode

Get the app

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