Building Steam Games with React
In this episode, Scott and Wes talk with Drew Conley about building games with Javascript. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. 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 1:58 - What is Danger Crew? 5:25 - Did you have a background in game dev before this? 8:36 - What were the initial resources you went to to make a game in React? 10:27 - How much of it is Canvas? 13:06 - What other libraries are you using? 14:00 - How did you lay out the environments? 16:35 - How is text rendered? 22:40 - How did you do all of the animation? 26:08 - What performance issues did you run into? 27:31 - How do you handle user states and saves? 29:21 - Is there any server side aspect? 30:42 - What was the process for creating the level editor? 34:38 - How did you publish the game / wrap it as an executable to sell? 38:16 - How do you update it? 39:43 - How difficult was creating the game logic? 41:20 - The dev theme in the game is super prominent, did that make working on it more fun? Links Steam Danger Crew aseprite Buy Danger Crew Drew Conley Pixels to SVG GameMaker Making an editor Electron ××× SIIIIICK ××× PIIIICKS ××× Drew: Strange Planet Instagram Wes: MX Master Config Tweet Thread Scott: Figma Shameless Plugs Drew: Danger Crew Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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
4 Sep 201952min
Hasty Treat - Stump'd
In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 3:54 - What is the difference between NULL and undefined? 5:40 - What is short circuit evaluation in JS? 7:25 - What is use strict? 9:07 - What is the only value not equal to itself in JS? 10:36 - When would you create a static class member? 11:54 - What is a pure function? 13:08 - What is JSONP? 14:24 - Describe the layout of the CSS box model? 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
2 Sep 201916min
How to Build an API
In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”. Show Notes 2:15 - How do you build an API from scratch? 3:54 - Choose an API type REST GraphQL 8:15 - Setup some sort of server that will accept requests and send responses Express Koa Meteor 11:11 - Document the endpoints What is the end point What parameters are required Filters Sorting Headers required What you get back when you hit this endpoint Any request limits Examples in common languages JS PHP Ruby 21:20 - Naming Make it obvious 27:39 - Securing Only accept requests from logged-in users oAuth Cookie/Session jwt API key CORS Check roles - access level Syntax 055: Hasty Treat - User Role Systems 32:42 - Protecting Rate limit Whitelist / blacklist Cloudflare 36:00 - Write resolvers Modify data if needed Send back the data requested Send back the correct HTTP code Log what happened 37:56 - Tools Postman Swagger Links Stripe ××× SIIIIICK ××× PIIIICKS ××× Scott: Hoax Podcast Wes: Solar Lights Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify Wes: All Courses - 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
28 Aug 201946min
Hasty Treat - Wes & Scott Look At Svelte 3
In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more! 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 2:16 - What is Svelte? 11:32 - Sapper 13:05 - Svelte Native 14:58 - Questions we have What’s the Typescript story here? How hard would it be to convert a large React app to Svelte? Will Svelte be able to capture the market share it needs to grow and compete? Would you (Wes & Scott) use this? Links https://svelte.dev/examples#hello-world Mustache Webpack Rollup.js Next.js Sapper Svelte Native React Native Svelte - Typescript support Rethinking Reactivity 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
26 Aug 201922min
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”. 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 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis. 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up. 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.). 13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project? 18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :) 22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it! 26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well. 29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project? 34:15 - Q: Do you plan to launch a Syntax.fm app? 45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation? Links Develop Denver AWS Zeit Heroku CircleCI Buddy.works Travis CI Gitlab CI Kubernetes VSCode Typescript Blazor Linkedin ××× SIIIIICK ××× PIIIICKS ××× Scott: VIVO Premium Heavy Duty Arm Wes: AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze Shameless Plugs Scott: LevelUpTutorials Pro - Gatsby Ecommerce Wes: All Courses - Beginner JS Course 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
21 Aug 201946min
Hasty Treat - How To Publish A React Component To NPM
In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 2:40 - Create React Library 6:55 - Documentation libraries 10:54 - What I’m building 13:13 - Linking library to projects 14:52 - Improvements and community thoughts Links Rollup testing-library/react-testing-library transitive-bullshit/create-react-library leveluptuts/fresh How To Make a React Component Library - Making A React Library React Styleguidist Storybook Docz DocSource npm-link Yarn wesbos/dump wesbos/Waait 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
19 Aug 201917min
State In React
In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. 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 3:38 - What is state? 4:58 - What kind of things are kept in state? Data Temporary client side data From forms, button clicks, etc. Cached server data Data from API UI status AKA isModalOpen isToggled 12:48 - Global state vs. Local state Ask yourself: does the data need to be accessed outside this component? If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”. Do you count Apollo API calls as global state? 21:15 - Managing Local state useState, setState Passing state & update functions down State machines 31:12 - Approaches to Global state Redux Complicated, hard to learn Very useful, organized and structured Actions, reducers and more Time traveling do to nature of store Immutability Tons of Redux based hooks libs Mobx Based on Observables An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. Context Functions just work and update global state. Downside is there are no fancy tools Apollo Apollo quires for data in global cache Apollo client for global UI state Not quite there, isn’t super elegant Links Thinkso Learn Node! Meteor Session xstate-react React Context Mobx easy-peasy hype.codes providerCompose.js Relay React Podcast ××× SIIIIICK ××× PIIIICKS ××× Scott: Command Line Heroes Wes: MASSDROP CTRL MECHANICAL KEYBOARD Shameless Plugs Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up! Wes: All Courses — 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
14 Aug 201955min
Hasty Treat - Remote Internet
In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work. 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 for more info. Show Notes 4:31 - Remote internet options 7:55 - Modems and routers 10:52 - Antennas 13:47 - Boosters 14:54 - Plans, data and speeds 20:11 - Other things to think about Links Deadmau5 house ZTE MF288 Netgear LB1120 Mofi Routers ZBT WE826T Rogers Ubiquiti Networks Tomato Firmware 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
12 Aug 201924min
