Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Environmental Variables

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 environment variables — what they are, where you should keep them, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/" target="_blank" rel= "noopener noreferrer">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:54 - What are they?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> API Keys</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Secrets</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Database URLs</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> NODE_ENV</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 06:16 - Type of env variables</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Plain text</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Encrypted</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Frontend</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Backend</li> <li class="has-line-data" data-line-start="27" data-line-end="30"> .env files <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> <code>.env</code> is a good package for all langs</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <code>.env.local</code></li> </ul> </li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Framework env variables</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> System env variables</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> Host-provided variables</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 16:20 - Where should you keep them?</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://1password.com/">1Password</a></li> <li class="has-line-data" data-line-start="36" data-line-end="38"> <a href="https://1password.com/downloads/command-line/">1Password CLI</a></li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 17:34 - Other gotchas</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Netlify Limit is 4096</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> Netlify needs a clear cache before it works</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <code>THING=yo node index.js</code></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://github.com/kentcdodds/cross-env">cross-env</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> NODE_OPTIONS="–inspect"</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Require before run</li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Links_46" name="Links_46"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.digitalocean.com/docs/app-platform/">Digital Ocean App Platform</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://render.com/">Render</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://vercel.com/">Vercel</a></li> <li class="has-line-data" data-line-start="50" data-line-end="52"> <a href="https://www.netlify.com/">Netlify</a></li> </ul> <h2 class="code-line" data-line-start="52" data-line-end="53"> <a id="Tweet_us_your_tasty_treats_52" name= "Tweet_us_your_tasty_treats_52"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> 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 environment variables — what they are, where you should keep them, and more!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Show Notes 03:54 - What are they?
  API Keys
 Secrets
 Database URLs
 NODE_ENV
  06:16 - Type of env variables
  Plain text
 Encrypted
 Frontend
 Backend
 .env files .env is a good package for all langs
 .env.local

 Framework env variables
 System env variables
 Host-provided variables
  16:20 - Where should you keep them?
  1Password

 1Password CLI

  17:34 - Other gotchas
  Netlify Limit is 4096
 Netlify needs a clear cache before it works
 THING=yo node index.js
 cross-env

 NODE_OPTIONS="–inspect"
 Require before run
  Links  Digital Ocean App Platform

 Render

 Vercel

 Netlify

  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 - Environmental Variables

Poslechněte si podcast