Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes. 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. Show Notes 02:26 - The old Syntax site Next.js Custom server for API - shows, Latest shows, sick picks On-demand page builds Custom routing 06:41 - The new Syntax site Next.js has solved those things now, no need for a custom server. API Routes On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose Custom routing is now done with [pages] Very fast to load Very fast to build Very fast to deploy It’s now a “dynamic static site” Zeit Now 1 to “Vercel” Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen. 13:23 - Why not: Gatsby Entire site would need to be regenerated exactly at 9am eastern API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes Sapper Links Next.js Gatsby Sapper Vercel 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

3 Aug 202017min

In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world! 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. 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”. Guests Filipe Névola @filipenevola Show Notes 01:20 - What is your background? 03:41 - What exactly is Meteor? 12:00 - What are the biggest misconceptions of modern meteor? 18:20 - What do you say to people who think Meteor is dead? 21:33 - How does data get from your Meteor into your React app? Example of getting data on client side import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) { return Create an Account Log in } return {page.title} {page.content} Log out ({user.username}) } 27:50 - What do you think is the ideal usecase for Meteor? 31:09 - Why did Meteor 1.0 fail to maintain hype? 36:41 - What does Meteor’s future look like? 45:27 - Are there any plans to integrate serverless into Meteor? 46:55 - Any little known features of Meteor that people might be interested in? Links Meteor Tiny Capital Deno Meteor Galaxy Mongoose Parcel Apollo MongoDB Svelte Meteor repo Meteor Up https://howtocreateanapp.dev/ https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A Cordova Missive Meteor Forums ××× SIIIIICK ××× PIIIICKS ××× Filipe: 1: Galaxy 2: Terere Scott: Amplifi Alien Router Wes: Parcel - Global Package Tracking Shameless Plugs Filipe: @filipenevola Scott: All Courses - Sign up for the year and save 25%! 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

29 Juli 20201h 4min

In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets. 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 03:35 - What’s the big deal? If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer” Retail Me Not uses it Valid use cases: Same domain change the page from a popup Cross domain changing page data Example: https://mathiasbynens.github.io/rel-noopener/ 05:39 - Why doesn’t the browser just fix it? Safari did - You can use rel=“opener” to allow it Firefox did Chrome hasn’t yet https://twitter.com/HugoGiraudel/status/801475801397030912 10:48 - Does this hurt SEO? It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead. Links @argyleink 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

27 Juli 202014min

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader 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. 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 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”? 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips. 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel). 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level? 18:01 - Why should you choose Styled Components over other ways of writing CSS? 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa. 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better? 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal. 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do. Links inputmag.com Focus app TSdx Rollup Webapck Parcel Beginner Javascript Typescript Darknet Diaries ××× SIIIIICK ××× PIIIICKS ××× Scott: Malicious Life Podcast Wes: LaCie Rugged USB-C External HDD Shameless Plugs Scott: Modern CSS Design Systems - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

22 Juli 202050min

In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 02:50 - What is turbolinks? Generate HTML on the server Send it over the ajax request Load it in the page 03:55 - Who is using Turbolinks? GitHub Basecamp Hey.com 05:24 - Turbo Links javascript browser bundle Intercepts any link click Fetches the page HTML 09:19 - JS Sprinkles Vanilla JS jQuery Stimulus Alpine JS Links Turbolinks Syntax 254: Headless CMS Break Down & Roundup pjax Svelte Next.js 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

20 Juli 202015min

In this episode of Syntax, Scott and Wes talk about the future of video for the web! 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. 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 08:19 - Scott’s Background in video Started editing in middle school Worked professionally as an editor and production assistant for magazine Created specialty flash video players Have been hosting video content since the start of my web career 09:12 - Terminology Transcoding - digital to digital conversion of one format to another Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server) 10:51 - Streaming vs Downloading Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing. 11:16 - Formats MP4 WebM DASH HLS (HTTP Live Streaming) m3u8 21:35 - Players shaka-player - https://github.com/google/shaka-player/ hls.js - https://hls-js.netlify.app/demo/ dash.js - https://github.com/Dash-Industry-Forum/dash.js video.js - https://videojs.com/ jw player - https://www.jwplayer.com/ Bit Movin player - https://bitmovin.com/docs/player Ooyala Brightcove - https://www.brightcove.com/en/ 27:48 - Services Roundup 🐴 YouTube - free Vimeo - $ MUX - $$ Wistia -  Cloudflare - $$ JW Player - $ Cloudinary - $$$ Brightcove - $$$ Azure - $$ Bit Movin - $$ AWS - $$ 46:59 - What Scott did and how/why upchunk Mux Video.js Custom uploader Using polling Links Basecamp Hey Inbox YouTube Wistia Drip ConvertKit Vimeo https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski https://www.vidbeo.com/blog/hls-vs-dash HLS Can I Use youtube-dl Syntax Ep 254: Headless CMS Break Down & Roundup Cloudflare Mux Framer Motion Cloudinary upchunk ××× SIIIIICK ××× PIIIICKS ××× Scott: Flexibility Focus Podcast Wes: Mustie1 YouTube Channel Shameless Plugs Scott: CSS Variables Course - Sign up for the year and save 25%! 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

15 Juli 202053min

In this Hasty Treat it’s another edition of the Top Level Domain Game! 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. Show Notes 02:25 - How it works We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? +5 points What country, business, or type of business is it for? +5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/ Is scott._ and wes._ available? -10 points for each 04:00 - .sd Scott: 5 + -5 + -126 + -10 + 10 = -126 05:46 - .ong Wes: 5 + -5 + -30 + 20 = -10 07:53 - .koeln Scott: 5 + -5 + -20 + 20 = -126 09:23 - .co.ke Wes: 10 + -15 + 0 = -15 11:00 - .tr Scott: 5 + -5 + 0 + 0 = -126 12:25 - .ist Wes: -5 + 5 + -10 + 0 = -25 13:57 - .xn—45q11c Scott: 5 + 5 + -295 + 10 = 20 = -401 16:40 - .reit Wes: 10 + -1460 + 10 = -1465 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

13 Juli 202019min

In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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”. Guests Jerome Hardaway Show Notes 01:50 - Captain America of Tech 03:25 - Where do you work and what type of stuff do you work on? 08:03 - What was your introduction to programming? 15:46 - When did you start Vets Who Code? 24:13 - What is the stack behind Vets Who Code? 29:56 - How do you help prep vets to get jobs? 41:32 - How can you be an ally and amplify black voices in tech? 50:05 - Everybody against racism Links Vets Who Code Quicken Loans Eventbrite Animate.css Laws of UX react-spring General Assembly Code Bootcamps uses.tech keycode.info Tech Talent Pipeline @vetswhocode ××× SIIIIICK ××× PIIIICKS ××× Jerome: 1: HBO’s Watchmen 2: https://vidr.io/ Scott: Explained on Netflix Wes: Jeremy Fielding YouTube Channel Shameless Plugs Jerome: Vets Who Code Scott: Design Systems with CSS Variables - Sign up for the year and save 25%! 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

8 Juli 20201h 2min