Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Client vs Server Data Validation

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">In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Netlify__Sponsor_9" name="Netlify__Sponsor_9"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 02:49 - Wes’ story</p> <p class="has-line-data" data-line-start="16" data-line-end="17"> 06:28 - What is the role of client-side validation?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Help the user input the correct data as they type it.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Show correct data in UI.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Show correct UI.</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> Just about all of these things are for the user’s benefit, and how they feel when using the site.</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 11:10 - What is the role of server-side validation?</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Validate that all the data is correct before it’s saved to the database</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Security first and foremost</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 15:03 - What process should a store follow to validate on the server?</p> <ol> <li class="has-line-data" data-line-start="27" data-line-end="28"> Check that correct types are coming in. Very easy with Graphql.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Get current stock and price information from unique ids from the database.</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user.</li> </ol> <p class="has-line-data" data-line-start="31" data-line-end="32"> 17:17 - What do you do if you don’t want people messing with your React state?</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> <code>@fvilers/disable-react-devtools</code></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <code>if (process.env.NODE_ENV === 'production') disableReactDevTools()</code></li> <li class="has-line-data" data-line-start="34" data-line-end="36"> We do this on LUT. Why? Because it’s a deterrent.</li> </ul> <h2 class="code-line" data-line-start="36" data-line-end="37"> <a id="Links_36" name="Links_36"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://flipp.com/home">Flipp App</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href="https://graphql.org/">GraphQL</a></li> </ul> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="Tweet_us_your_tasty_treats_41" name= "Tweet_us_your_tasty_treats_41"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for!
 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:49 - Wes’ story
 06:28 - What is the role of client-side validation?
  Help the user input the correct data as they type it.
 Show correct data in UI.
 Show correct UI.
 Just about all of these things are for the user’s benefit, and how they feel when using the site.
  11:10 - What is the role of server-side validation?
  Validate that all the data is correct before it’s saved to the database
 Security first and foremost
  15:03 - What process should a store follow to validate on the server?
  Check that correct types are coming in. Very easy with Graphql.
 Get current stock and price information from unique ids from the database.
 Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user.
  17:17 - What do you do if you don’t want people messing with your React state?
  @fvilers/disable-react-devtools
 if (process.env.NODE_ENV === 'production') disableReactDevTools()
 We do this on LUT. Why? Because it’s a deterrent.
  Links  uses.tech

 Flipp App

 GraphQL

  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

Hasty Treat - Client vs Server Data Validation

Poslechněte si podcast