Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Our React Wish List

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.

<div> <p>In this episode of Syntax, Scott and Wes talk about what they wish existed in React!</p> <h2 id="devlifts-sponsor">DevLifts - Sponsor</h2> <p>Refactor your body with DevLifts. They have a few different programs: 1) <a href="https://devlifts.io/join/fitstart" target= "_blank" rel="noopener noreferrer">fit.start</a> (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.</p> <h2 id="freshbooks-sponsor">Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax" target="_blank" rel= "noopener noreferrer">freshbooks.com/syntax</a> and put SYNTAX in the "How did you hear about us?" section.</p> <h2 id="show-notes">Show Notes</h2> <h3 id="react">React</h3> <p>03:53 - Unmount delay for animation</p> <p>06:20 - Suspense with SSR released (or not because I think they are shelving it)</p> <ul> <li>Dan's tweet: <a href= "https://twitter.com/dan_abramov/status/1259614150386425858" target="_blank" rel= "noopener noreferrer">https://twitter.com/dan_abramov/status/1259614150386425858</a></li> </ul> <p>09:24 - File based components</p> <ul> <li>Like Svelte and Vue</li> <li>This would look like a file with a special scoped <code><style></code> tag per page.</li> </ul> <p>11:50 - Prevent Default shortcuts</p> <p>13:00 - No more useIsoLayoutEffect</p> <ul> <li>useLayoutEffect on SSR should just work without a custom hook</li> <li>Simple data fetching strategy based on promises</li> </ul> <p>15:52 - Recommended hooks</p> <ul> <li>E.g. "here is the best way to do things"</li> <li>Official list of best practice hooks</li> </ul> <p>18:25 - A good form strategy</p> <ul> <li>Bind inputs to state directly without any change handlers</li> <li>Inputs and forms all around need more magic - it's painful</li> </ul> <p>20:43 - Write once deploy everywhere</p> <ul> <li>Not likely ever</li> <li>E.g. automatic transformation into react-native (obviously not going to happen)</li> </ul> <p>22:28 - Compile time directives</p> <ul> <li><a href="https://github.com/bukharim96/directive-x" target= "_blank" rel= "noopener noreferrer">https://github.com/bukharim96/directive-x</a></li> </ul> <p>25:11 - Slots instead of children</p> <ul> <li>Allows for things like named slots more explicit than children</li> </ul> <h3 id="jsx">JSX</h3> <p>26:44 - Removal of htmlFor, className and all other abominations of html</p> <p>29:09 - Import Raact from React for JSX to work</p> <ul> <li>Soon will be fixed <a href= "https://github.com/babel/babel/pull/11154" target="_blank" rel= "noopener noreferrer">https://github.com/babel/babel/pull/11154</a> <ul> <li><a href= "https://www.npmjs.com/package/babel-plugin-react-require" target= "_blank" rel="noopener noreferrer">react-require</a></li> </ul> </li> </ul> <p>32:31 - Better conditional / if statement syntax</p> <p>33:09 - Fragments by default</p> <ul> <li>Just do it for us - the error message already knows</li> </ul> <p>33:54 - Automatic key ids</p> <ul> <li>If mapping an object, check for common <code>_id</code> or id</li> </ul> <p>36:36 - Simple scoped CSS built in</p> <p>37:29 - Short hand for props with same name is prop={prop}</p> <p>39:00 - Prop interpolation without backticks: name="$first $last"</p> <ul> <li>Or just backticks without brackets name=<code>${first} ${last}</code> instead of name={<code>${first} ${last}</code>}</li> </ul> <h3 id="tooling">Tooling</h3> <p>39:43 - Story for typescript/prettier/babel</p> <p>40:11 - Automatic a href client side routing</p> <p>41:51 - Scaffolding and component generation</p> <h2 id="links">Links</h2> <ul> <li><a href="https://svelte.dev/" target="_blank" rel= "noopener noreferrer">Svelte</a></li> <li><a href="https://vuejs.org/" target="_blank" rel= "noopener noreferrer">Vue</a></li> <li><a href="https://reactnative.dev/" target="_blank" rel= "noopener noreferrer">React Native</a></li> <li><a href="https://nativescript.org/" target="_blank" rel= "noopener noreferrer">NativeScript</a></li> <li><a href="https://www.react-spring.io/" target="_blank" rel= "noopener noreferrer">react-spring</a></li> <li><a href="https://twitter.com/0xca0a" target="_blank" rel= "noopener noreferrer">Paul Henschel</a></li> <li>Scream Sneeze: <a href= "https://twitter.com/morganc_smith/status/1235332301044801538" target="_blank" rel= "noopener noreferrer">https://twitter.com/morganc_smith/status/1235332301044801538</a></li> </ul> <h2 id="-siiiiick-piiiicks-">××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://softwareengineeringdaily.com/" target= "_blank" rel="noopener noreferrer">Software Engineering Daily Podcast</a></li> <li>Wes: <a href="https://amzn.to/2MEQiC7" target="_blank" rel= "noopener noreferrer">PicQuic Screwdriver</a></li> </ul> <h2 id="shameless-plugs">Shameless Plugs</h2> <ul> <li>Scott: <a href="https://www.leveluptutorials.com/pro" target= "_blank" rel="noopener noreferrer">Sapper For Everyone</a> - Sign up for the year and save 25%!</li> <li>Wes: <a href="https://wesbos.com/courses/" target="_blank" rel= "noopener noreferrer">Wes' New Gatsby Course</a> - Use the coupon code 'Syntax' for $10 off!</li> </ul> <h2 id="tweet-us-your-tasty-treats-">Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/" target="_blank" rel="noopener noreferrer">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" target= "_blank" rel="noopener noreferrer">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" target="_blank" rel="noopener noreferrer">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" target="_blank" rel= "noopener noreferrer">Wes' Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" target= "_blank" rel="noopener noreferrer">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" target="_blank" rel= "noopener noreferrer">Scott's Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" target="_blank" rel="noopener noreferrer">@SyntaxFM</a> in your tweets</li> </ul> </div>

In this episode of Syntax, Scott and Wes talk about what they wish existed in React!
 DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
 Show Notes React 03:53 - Unmount delay for animation
 06:20 - Suspense with SSR released (or not because I think they are shelving it)
 Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858

 09:24 - File based components
 Like Svelte and Vue
 This would look like a file with a special scoped tag per page.
 11:50 - Prevent Default shortcuts
 13:00 - No more useIsoLayoutEffect
 useLayoutEffect on SSR should just work without a custom hook
 Simple data fetching strategy based on promises
 15:52 - Recommended hooks
 E.g. "here is the best way to do things"
 Official list of best practice hooks
 18:25 - A good form strategy
 Bind inputs to state directly without any change handlers
 Inputs and forms all around need more magic - it's painful
 20:43 - Write once deploy everywhere
 Not likely ever
 E.g. automatic transformation into react-native (obviously not going to happen)
 22:28 - Compile time directives
 https://github.com/bukharim96/directive-x
 25:11 - Slots instead of children
 Allows for things like named slots more explicit than children
 JSX 26:44 - Removal of htmlFor, className and all other abominations of html
 29:09 - Import Raact from React for JSX to work
 Soon will be fixed https://github.com/babel/babel/pull/11154 react-require

 32:31 - Better conditional / if statement syntax
 33:09 - Fragments by default
 Just do it for us - the error message already knows
 33:54 - Automatic key ids
 If mapping an object, check for common _id or id
 36:36 - Simple scoped CSS built in
 37:29 - Short hand for props with same name is prop={prop}
 39:00 - Prop interpolation without backticks: name="$first $last"
 Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}}
 Tooling 39:43 - Story for typescript/prettier/babel
 40:11 - Automatic a href client side routing
 41:51 - Scaffolding and component generation
 Links Svelte
 Vue
 React Native
 NativeScript
 react-spring
 Paul Henschel
 Scream Sneeze: https://twitter.com/morganc_smith/status/1235332301044801538

 ××× SIIIIICK ××× PIIIICKS ××× Scott: Software Engineering Daily Podcast

 Wes: PicQuic Screwdriver

 Shameless Plugs Scott: Sapper For Everyone - Sign up for the year and save 25%!
 Wes: Wes' New Gatsby Course - 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

Our React Wish List

Poslechněte si podcast