Syntax - Tasty Web Development Treats

By Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Listen to a podcast, please open Podcast Republic app. Available on Google Play Store.


Category: Tech News

Open in iTunes


Open RSS feed


Open Website


Rate for this podcast



 Oct 24, 2018

james
 Sep 20, 2018
funny and informative for web devs

A Podcast Republic user
 Sep 5, 2018

Description

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

Episode Date
Hasty Treat - Costs of Running a Business
36:55

In this Hasty Treat, Scott and Wes talk about the costs of running a business when you’re a solopreneur or solo founder.

Contentful - Sponsor

Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntax and get a free pair of socks!

Show Notes

3:48 - Email

10:44 - Transactional Costs

12:31 - Software

17:03 - Services

  • PO Box

17:18 - Domains

19:30 - Backup

22:12 - Labor

  • Assistant
  • Part-time developer
  • Contractors for projects

24:53 - Insurance

  • Prescriptions
  • Dental
  • Optical
  • Critical illness
  • Home insurance is higher because of business

26:51 - Professional

29:08 - Hosting

34:16 - Travel

  • Taxi / Hotel
  • Dinner
  • Transportation
  • Uber

Links

Tweet us your tasty treats!

Dec 10, 2018
The State of JavaScript 2018
01:02:03

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry.

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”.

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:48

  • What is the State of JS survey

3:58

  • The tech behind State of JS

12:55

  • How was the data collected?

16:38

  • JavaScript Flavors

23:14

  • Frameworks

31:49

  • DataLayer

34:53

  • Backend

40:09

  • Other Tools

44:37

  • Opinions

47:48

  • Awards

49:58

  • Criticism

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Dec 05, 2018
Hasty Treat - Uses for CSS Variables
25:30

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid.

Kyle Prinsloo’s Freelancing & Beyond — Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.

Show Notes

3:25 - What

  • --example-name, represent custom properties

  • called using var()

  • Overwrite with a more specific style

  • Use JavaScript to append .style.setPropert(

  • How are they scoped?

    • Just like normal CSS
    • Can be set on :root {}
    • Can be set on any element down

9:10 - Why

  • Uses:

    • Can make more sense if used semantically
    • var(–accent) vs var(–yellow)
  • Independent values for things that can’t be broken up:

    • box-shadow: 2px 2px 2px 2px red
    • transform: rotate(var(–rotate)) scale(2);
  • Inline properties can be picked up by regular CSS (color, size, etc.)

    • hey

  • Themes that can easily be changed at runtime for entire app

19:15 - Calculations

  • You can use them inside of calc()
  • Animations

20:10 - Bummers

Tweet us your tasty treats!

Dec 03, 2018
Holiday Gift Guide
01:05:25

In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks.

Contentful - Sponsor

Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntaxfm and get a free pair of socks!

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:57 - Foodie Gifts

11:27 - Experiences

  • Knife Skills Class
  • Butchering Class
  • Cooking Class
  • Float tank Subscription
  • Massages

18:15 - Subscriptions

23:07 - Books / Audible

29:47 - Clothes

39:08 - Gadgets

48:00 - Smart Home

54:40 - Grooming and Wellness

58:57 - High End

Shameless Plugs

Tweet us your tasty treats!

Nov 28, 2018
Hasty Treat - Should you install a dependency or roll your own?
19:15

In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

2:15 - Reasons To roll your own

  • Learning Experience
  • Fun
  • Features
  • Add your own features
  • Lightweight - only use what you need

8:08 - Reasons not to roll your own

  • Battle Tested
  • Actually Tested
  • Time
  • Money
  • Experience

11:27 - Fork

  • Something needs extra features
  • Upstream your changes

13:10 - Some Examples

  • Fetch + function vs Axios
  • Date functions vs Stack Overflow copy/paste
  • Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash

Links

Tweet us your tasty treats!

Nov 26, 2018
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
52:46

It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more.

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.

React in Action - Sponsor

React in Action by Mark Thomas from Manning Publications is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you, React In Action is a great book that covers everything you need to know. Also be sure to check out this page for 40% off all manning books and videos.

Show Notes

2:29

  • I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts?

6:55

  • I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)?

14:00

  • I’ve read on Twitter that React.Context can be a good replacement for Redux. Why?

18:40

  • What’s it like running a podcast?!

24:03

  • I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks!

27:36

  • What has been the most awkward situation you’ve been in as a dev?

31:20

  • Do you have any good resources on JWT? I’m unclear when my front end needs to send what to my back end, to ensure my sites and only my sites can get the data requested from my server. Thanks for everything you do!

35:34

  • How do you move selected text horizontally (or vertically) in VSCode? I’ve seen it in Wes’ videos and I tried to ask him on Twitter, but I’m sure that is a chore to keep up with. I’ve googled a ton, but the only thing I found was an extension that adjusts indentation, which is not really what I’m after.

38:57

  • How do you recommend providing feedback on “bad” code to a developer more experienced than you, without coming off as an uppity, know-it-all junior who just read a bunch of textbooks??

42:39

  • How do you set up an IP whitelist? I am just getting started managing databases and I am using Mongo Atlas. They require an IP whitelist for all connections. Developing from my computer is fine because I can just add my IP to the whitelist, but what do I do if I actually want to make my API or website public? Just whitelist everything? That sounds like a terrible idea…

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Nov 21, 2018
Hasty Treat - How to become well liked at work
24:17

In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

5:01 - Foster a culture of asking “why” and “how”

7:58 - Show your own mistakes

9:26 - Be understanding of people’s life situations and accommodate them accordingly

11:36 - Be okay with people taking your time

13:10 - Don’t take up other people’s time

15:40 - Be nice

15:57 - Share things

16:50 - Respect personal space

18:08 - Respect people’s time

Links

Tweet us your tasty treats!

Nov 19, 2018
React Hooks
58:58

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.

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.

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:30

  • Function components

4:50

  • What are React hooks?

8:12

  • What problem does this solve?

12:00

  • State hooks

21:50

  • Context hooks

26:02

  • Effect hooks

36:46

40:40

  • Ref Hooks

48:00

50:30

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Nov 14, 2018
Hasty Treat - How to become a sticker mogul
35:29

In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out Bos.af for more info.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

6:08

  • Design

9:23

  • Printing

16:08

  • Types of Stickers

19:34

  • Selling

21:43

  • Envelopes, stamps and shipping

30:47

  • Returns

32:42

  • The future

Links

Tweet us your tasty treats!

Nov 12, 2018
Live at JAMstack_conf
01:03:35

This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As 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/syntaxfor more info.

Show Notes

7:14 - Spicy JAM Tips

  • Set default headers in your request library - this way it comes along for the ride on every request
  • Don’t get hung up on “static” - static sites can be as dynamic as needed
  • Don’t wait to use new tech - progressively enhance and gracefully degrade where needed
  • There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment
  • Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it

10:10 - This, That or Both?

  • Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript?
  • Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework?
  • Aphrodite - React Styling Library or Best Selling Erotic novel?
  • Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia?
  • C-Control - A modern state management library for web components or studio headphone mixer?
  • Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy?
  • Joose - A hip east coast juice bar or a metaobject system for JavaScript?
  • Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers?
  • Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach?
  • Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go?
  • Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner?

21:13 - Stumped!

  • Question 1: What does “age” console.log to and why?

    let age = 26;
    age /= 2;
    console.log(age); // ??

  • Question 2: What are all seven types in JS?

  • Question 3: How do you pronounce “specificity”?

  • Question 4: What is event delegation and when might you want to use it?

  • Question 5: What is CSS @supports for?

  • Question 6: An arrow function takes in an unlimited number of arguments - how would you capture them?

  • Question 7: What is the difference between .slice() and .splice()?

  • Question 8: How would you calculate the number of milliseconds since midnight of January 1, 1970?

  • Question 9: What does “age” console.log to and why?

    const age = console.log(100) || 200;
    console.log(age);

31:26 - Overrated or Underrated?

  • Arrow Functions
  • Downtown scooters
  • Using Sass inside Styled Components
  • Website that play sound in the interface
  • The amount of JS frameworks
  • Soft close toilet seats
  • GraphQL
  • ES6 Destructuring
  • Instapots
  • Implicit Return
  • CSS Houdini
  • Service Workers and Offline Applications
  • Modern Design Tools - Figma, FramerX, Moudlez, Sketch, Studio
  • Decorators
  • Optional Chaining Proposal

42:35 - Q+A with Scott and Wes

  • Since this is your first time meeting, what was the thing that surprised you the most?
  • If you could create any Tycoon game, what would you create?
  • In 2018, how concerned should we be about no-JS users?
  • How many spaces should a tab be?
  • How important is integration testing and the decentralized ecosystem?
  • What are your thoughts on the new React Hooks API?
  • Are we going to have a serverless function architecture apocalypse?
  • Are you ever going to create an online course together?
  • How will the future look for component-based design?
  • What’s your least favorite jam?
  • What would be your goto headless CMS?
  • What do you disagree on?

Shameless Plugs

Tweet us your tasty treats!

Nov 07, 2018
Hasty Treat - Stumped! 03
21:53

In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from Flashcards for Developers.

EmailOctopus - Sponsor

Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at emailoctopus.com/syntax and get your first three months free.

Show Notes

4:03

  • What’s the difference between synchronous and asynchronous code?

5:56

  • What’s the difference between .call and .apply?

7:08

  • How do you share code between files?

8:18

  • What’s the difference between double equals and triple equals?

10:40

  • What’s the difference between null, undefined, and undeclared?

14:18

16:02

  • Why is extending built-ins never a good idea?

Tweet us your tasty treats!

Nov 05, 2018
Pre-launch Checklist
58:47

In this episode Wes and Scott discuss their pre-launch checklists. They talk about performance, accessibility, compatibility, SEO, analytics, and more - all the things you should check before launching something to the world.

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”.

.tech Domains - Sponsor

Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.

Show Notes

1:45 - Overall

  • Let robots do the work for you - use auditing tools

2:58 - Performance

11:43 - Compatibility

  • Test on actual browsers that need to be supported
  • Ask people to check on their devices
  • Use a service like Browserstack
  • Browser resolution and ratios
  • Cache busters

16:00 - Sales / Credit Cards

  • Use package.lock
  • Have multiple people test your checkout
  • Make sure your company name is listed on customer’s credit card bills
  • Have a phone number listed for disputes

24:55 - Tips from the Trenches

  • Secure API endpoints
  • Scale up server just in case
  • Early access
  • Soft launch
  • Make sure URLs are correct - no “localhost:3000”, etc.

31:25 - Content

  • Check spelling and grammar
  • A working 404 page
  • Check for leftover placeholder text → launching with lorem ipsum is not good

34:39 - Accessibility

  • Alt text
  • Run color contrast checker
  • Run Lighthouse
  • Correct tab order
    • Use the site with keyboard only and make sure it’s a good experience

37:35 - SEO

  • Sitemap created and uploaded to Google Webmaster Tools
  • SEO checkers
  • Meta tags
  • Correct heading hierarchy

41:55 - Analytics

  • Google analytics
  • Facebook tracking pixel
  • Drip

43:23 - Server config & access

  • .htaccess
    • redirects where needed
  • robots.txt
    • prevent indexing of some pages
  • Enable GZIP
  • Caching
  • Cloudflare or other CDN

46:12 - Company Processes

  • Make sure tests are passing
  • Git issues are closed
  • Merge pull requests
  • Write documentation on processes (readme, etc.)
  • Deploy to staging environment and test production build
  • No unwanted logs or errors left in production build
  • DNS Propagation

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 31, 2018
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 3
25:01

In this Hasty Treat, Scott and Wes conclude a three-part series about old browsers, fallbacks and polyfills. In part three, they talk specifically about transpiling and polyfilling.

VueSchool.io — Sponsor

Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.

Show Notes

2:20 - Polyfills and Transpile

5:18 - Back in the day

  • Border-radius htc hack
  • PNG fix for transparent PNGs
  • Flash for custom fonts
  • Cufon and SIFR

10:48 - JavaScript Polyfills

13:47 - JavaScript Transpile

  • Syntax is transpiled
  • babel-preset-env
  • Babel has plugins and presets
  • Meteor bundle to different browsers on demand
  • There are polyfills for most things, but performance can be an issue
    • Resize observer
    • Intersection Observer
  • Some things can’t be done with either
    • New browser APIs
    • Service workers, device access, inline video on old iOS, etc.

Tweet us your tasty treats!

Oct 29, 2018
Potluck - Working with designers × Is WordPress Crap? × When to stop working × More
59:18

It’s another potluck episode in which Wes and Scott answer your questions! This month - working with designers, criticisms of WordPress, avoiding burnout, time management, 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”.

.tech Domains - Sponsor

Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.

Show Notes

5:05 - How can you help a designer understand how styling works and how layouts work in the web? In other words: How do I explain my boundaries as a front-end developer to a designer?

  • Work closely with the designer
  • Allow the designer to push your limits
  • You can help them understand by:
    • Showing them poor performing websites
    • Showing them things that usually are taxing on the GPU to paint - rotations, background images, drop shadows, etc.
  • Don’t be afraid to let a tough design push your boundaries

13:23 - How do you manage your time for learning new things when you have children and a daily full-time job?

  • Those who figure out how to make it a priority will win out
  • Family first - talk to your spouse
  • Ask your boss for time to learn and grow
  • Find ways to get paid for learning

19:45 - How do you deal with burnout in this constantly evolving front end tech ecosystem?

25:00 - Do you code at night (past 9pm)?

  • Start your wind-down time earlier
  • Let your brain wok on problems while you sleep
  • Get it out of your head
  • Listen to podcasts, audiobooks, etc.

29:23 - How do you compress your videos/audio for your courses/tutorials?

  • Handbrake Fast 1080
  • Use presets
  • Output from video editor, rip from YouTube, or compress directly from video editor

33:10 - It seems like in the web dev community, a lot of people give WordPress crap. Any idea why?

  • WordPress is dope - people just like to complain.
  • WordPress is often one of the first things people learn and have bad memories of it
  • It’s easy to write bad code with WordPress
  • It can be slow
  • It can attract a certain type of developer

33:10 - What are some of the biggest mistakes that people make when they are learning programming and what’s the best way to overcome them?

  • Don’t focus on too many things
  • Don’t worry about picking the right technology
  • Focus on the fundamentals
  • Let your curiosity and excitement drive you
  • Celebrate wins

40:29 - What are your best tips for writing documentation?

43:08 - What are some good questions or techniques to better understand a client’s requirements?

  • How does your business work right now?
  • What are people coming to the website for?
  • Questionnaires are good - they get people thinking
  • It’s your job to understand what a client want out of a website - what problems they have and need solved

45:38 - Do you guys have any tips for taking over maintenance and development of existing websites where the previous developer is no longer reachable?

  • Take time to asses the codebase before writing anything
  • Learn what’s there any and why
  • Don’t start ripping out code without understanding what’s really going on
  • Don’t leave it worse than you found it
  • It depends on the stack, but it’s probably worth giving it an honest go before re-writing the whole thing

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 24, 2018
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 2
22:54

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them.

VueSchool.io — Sponsor

Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.

Show Notes

3:08 - CSS Grid and Flexbox

12:38 - CSS Variables

  • Double define
  • Just like Grid, unknown def will be ignored and fallback to CSS
  • CSS Houdini

17:00 - Fallback Code

  • @supports
  • Display block then display grid
  • Feature Testing
  • Detect the browser as a last resort

Tweet us your tasty treats!

Oct 22, 2018
Fitness for Developers
01:02:45

In this episode Wes and Scott discuss fitness for developers. As a follow-up to Episode 20, they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018.

DevLifts — Sponsor

DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today!

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:30

  • Why is fitness important as a developer?

6:08

  • Working Out Update: Wes

14:37

  • Working Out Update: Scott

25:06

  • Nutrition Update: Wes

35:12

  • Nutrition Update: Scott

45:40

  • Supplement Update: Wes

48:00

  • Supplement Update: Scott

52:18

  • Plans for the future: Wes

54:53

  • Plans for the future: Scott

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 17, 2018
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1
28:36

In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all.

VueSchool.io — Sponsor

Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.

Show Notes

5:10 - How do you decide if you should support an older browser?

  • Google Analytics Data
  • User base / Money earned from that audience
  • IS it worth it? Time vs Money?

11:35 - How do you test your websites and app in older browsers?

18:24 - Supporting and Testing Mobile Browsers

  • Resize your browser
  • Build a device lab
  • Remote Debugging
  • Browser device view
  • Faking Geolocation
  • Emulators in XCode / Android dev tools
  • Browsersync
  • Ghostlab

Tweet us your tasty treats!

Oct 15, 2018
Top 18 New Things in JS - Part 2
53:11

In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript.

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.

Graph CMS - Sponsor

GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at graphcms.com/syntaxfm.

Show Notes

3:30

  • Spread

8:40

  • Rests

11:54

  • Arrow Functions

15:48

  • Default Function Arguments

19:47

  • Named params

21:26

  • Modules

35:35

  • Classes

41:54

  • Things we never use

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 10, 2018
Hasty Treat - Hacktoberfest
25:30

In this Hasty Treat, Scott and Wes talk about this year’s Hacktoberfest - a great way to support open source.

NativeScript - Sponsor

NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.

Show Notes

2:42

7:35

  • Things to PR

12:56

  • Things not to PR

18:05

  • How Pull Requests work

21:45

Tweet us your tasty treats!

Oct 08, 2018
Top 18 New Things in JS - Part 1
51:45

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript.

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.

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

Show Notes

6:02

  • Const / Let

10:00

14:29

  • Object destructuring

21:28

  • Array destructuring

27:25

  • Function Param destructuring

30:14

36:24

40:59

  • Object Computed Property Name

43:42

  • Object Method Syntax

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 03, 2018
Hasty Treat - Stumped! 02
22:02

In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from 30 Seconds of Interviews.

NativeScript - Sponsor

NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.

Show Notes

5:05

  • What are defer and async attributes on a script tag?

7:15

  • What are the differences between var, let, const and no keyword statements?

8:45

  • What is a callback? Can you show an example using one?

9:52

  • What is recursion and when is it useful?

12:06

  • What is the difference between the array methods map() and forEach()?
  • Syntax Ep 023

14:02

  • What is Big O Notation?

15:28

  • What does 0.1 + 0.2 === 0.3 evaluate to?
  • wtfjs

17:44

  • What is CSS BEM?

Tweet us your tasty treats!

Oct 01, 2018
Potluck - JS × Web Components × Security × They took our jobs!
01:10:11

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development.

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

Sanity.io - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

3:33 - Would you ever consider doing a live Syntax show?

4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now?

9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation?

14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project?

  • Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites
  • Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura)

21:51 - What are your thoughts on 100 Days of Code Challenge?

25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React?

  • Dynamic vs static. What are your needs, how often does the content change.

  • Next.js

    • Use for dynamic needs
    • It can do static exports too
    • Convert to markdown
    • Nothing special other than Routing and SSR (Server request getInitialProps)
  • Gatsby.js

    • Use for static needs
    • Gatsby has lots of adapters

30:38 - What are websockets and when should they be used?

  • A request that is always open - it responds to events instead of pinging, pushing or pulling data

35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them?

40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe

  • Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident.
  • Look up PIPEDIA

43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood.

  • Pausable function that can return multiple values - call .next() on it

46:54 - Are web components worth it in 2018?

49:52 - How soon the designers replace React Developers with the invent of tools like Framer X?

56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into?

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 26, 2018
Hasty Treat - Positivity and Web Development
21:05

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you.

NativeScript - Sponsor

NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.

Show Notes

The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity.

3:18 - The effects of negativity and how the web industry is improving

  • Mental health awareness is very real
  • Stack overflow sees that it needs to change
  • Linus Torvalds’ apology
  • Negativity is a disease, and it spreads
  • Positivity is a force as well
  • You can be constructive while still being nice
    • Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face

11:50 - Healthy ways to approach disagreements

  • Never assume malice
  • Kill them with kindness
  • Take note of the people you admire and how they deal with aggressiveness

17:08 - The power of positivity

  • Inspire the change you want to see
  • It’s good for your productivity - it makes you feel good

Tweet us your tasty treats!

Sep 24, 2018
Specialization vs Generalization
01:02:28

In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path.

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.

Dev Lifts — Sponsor

Dev Lifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called Fit.Start. Get 50% off with the coupon code “tasty”. Check it out today!

Show Notes

4:18 - What is a specialist?

  • Someone who is very good at one or two things
  • Can be very lucrative if you’ve taken the time to become well-known in you’re industry

12:20 - What is a generalist?

  • Two ways to look at generalists:
    • Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.)
    • Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend)
  • There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”.

22:22 - Frontend vs Backend

  • Frontend

    • Frameworks (React, Vue, etc.)
    • CSS
    • Performance
    • Animations
  • Backend

    • Web servers
    • Serverless / AWS
    • Scaling
    • Frameworks
    • Performance
    • Databases
    • Docker
    • CI

26:50 - When to widen your focus

  • When you are complacent with your mastery
  • You need a skill to get something done.
  • For fun
  • For a specific job

30:42 - When to narrow your focus

  • You don’t feel control over your skills
  • You are missing out on employment because a lack of skills in one department
  • You feel overwhelmed by the options available
  • You want to be the "go to person”
  • For fun

35:48 - How to master and expand

  • Focus on one skill at at time. Master it and then expand on your skillset
  • Find satellite skills - things that work in harmony

38:47 - Scott’s journey

42:31 - Wes’ journey

44:55 - How to know where to focus

  • Necessity will dictate a lot - what do you need right now?
  • Job postings - you can stack the deck in your favor by learning React. Once you are in, you’re can lean anything you want.
  • Follow your heart - but have a plan

51:03 - Should I be a generalist or a specialist?

  • Wes: There is nothing wrong with having a large skillset as long as you aren’t mediocre at everything. If you’re optimizing for hire-ability I think having a defined focus on either front-end or back-end is best, but still an understanding of how the other works. Ideally you have 1) Very good JS skills, 2) an understanding of how things work on both ends.

  • Scott: You can do either, but whatever you do, do it well. It’s easier to do a few things well than many things well. That said there are some virtuosic devs out there who can be amazing at many things, however those people are not common. Most people have holes in their armor.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 19, 2018
Hasty Treat - Feedback and Criticism
38:32

In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry.

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

4:00 - Getting Feedback

  • Don’t assume malice - tone is easily lost in digital communication
  • Don’t take it personally
  • Evaluate the feedback through the eyes of who it’s coming from
  • Look for the truth in the feedback
  • Be open to feedback

15:15 - Giving Feedback

  • Don’t be negative - phrase your feedback in positives
  • Don’t give unrequested feedback
  • Explain the why behind your feedback
  • Don’t be rude or an asshole
  • Use Tools and Standards for Code Quality
  • Give an opportunity to improve
  • Explain the “why” behind the feedback
  • Sandwich criticism with something positive
  • When things are heated, try to diffuse the situation
  • Give frequent positive feedback

Links

Tweet us your tasty treats!

Sep 17, 2018
11 Habits of Highly Effective Developers
49:30

In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy.

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.

Sanity.io - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:55 - You understand stakeholder and business goals

  • What is the website (or project) ultimately trying to accomplish?
  • How does the business make money?
  • Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business

5:13 - You’re curious and always learning

  • This industry is ever-changing and isn’t slowing down

7:36 - You have an open mind about new technology

  • Don’t “poopoo” something because it’s intimidating, new, scary or different
  • Like foods you’ve never tried, sometimes something unusual turns out to be game changing

9:57 - You ask for help

  • #LifeHack - most people know more than you
  • Be comfortable with NOT knowing
  • Be comfortable with failing and with how others might perceive that
  • Check your ego at the door

15:35 - You help others

  • Helping others solidifies your own knowledge
  • Answering questions
  • Blogging
  • YouTube videos
  • Mentoring co-workers
  • Not offering unwanted advice

19:12 - You have a “problem solver” mentality

  • General curiosity - figuring out why things aren’t working
  • Break things down into testable components to pinpoint an issue
  • Have a clear head under pressure (e.g. interviews)

24:37 - You have fun with what you do

  • Enjoying challenges
  • Even if something isn’t particularly fun, you find ways to make it fun and interesting

27:54 - You understand work-life balance

  • Burnout is huge in our industry
  • It can be difficult when you love what you do, but it’s so important to maintain balance

34:00 - You are empathetic to your co-workers and users

  • Be a team players while getting things done
  • Make everyone around you better at what they do
  • Be someone others want to work with by being inclusive and professional
    • Don’t make inappropriate jokes, put co-workers in a tough position, etc.

37:08 - You pay attention to detail

  • Think about edge cases

39:03 - You’re part of the community

  • Local meetups / lunch and learn
  • Twitter #100daysofcode
  • Conferences

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 12, 2018
Hasty Treat - Reading Documentation
33:06

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation.

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

5:10 - What are the different kinds of documentation?

14:34 - How to read documentation

  • Understanding how you learn will save you lots of time

16:03 - Understanding Parameters

  • Parameter types
  • Required / Optional
  • Parameter order

22:45 - How do you tackle learning something new?

  • Look at some examples
  • Scan the entire docs to get an idea of the surface area
  • Have something specific in mind that you want to build

27:34 - What to do when the docs suck?

  • Look at other people’s code
  • Chat rooms
  • Tests for examples
  • Read the source code
  • Github search
  • Contribute

Tweet us your tasty treats!

Sep 10, 2018
Accessibility
01:13:58

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more!

Cloudinary - Sponsor

Cloudinary is a heavy duty media hosting stack for your websites and applications.

Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets.

Deque - Sponsor

Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible.

For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications.

Show Notes

6:00 - Basics

15:03 - How do you write accessible code (easy wins)?

  • Clean HTML
  • Semantic elements
  • Use the alt attribute on images
  • HTML5 (article, section, header, footer, aside)
  • Proper inputs types - number, text,
  • CSS order property on Flexbox and Grid
  • Colors and proper contrast
  • Use links and buttons properly
  • Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.)
  • Keyboard only navigation
  • Tabindex
  • Skip to content
  • “Skip Navigation” Links
  • a11y ESLint rules
  • Video captions for ESL
  • Transcripts for Podcasts

44:48 - Tools

54:35 - Resources

62:22 - Important Ideas

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 05, 2018
Hasty Treat - Stumped! Interview Questions
30:09

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews.

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

4:33

  • What is the difference between the postfix (i++) and prefix (++i) increment operators?

7:15

  • What’s the difference between a static method and an instance method?

9:25

  • What is a focus ring? What is the correct solution to handle them?

11:20

12:47

  • What are the advantages of using CSS preprocessors?

14:29

  • What is memoization?

15:48

  • Describe the different ways to create an object. When should certain ways be preferred over others?

19:15

  • What is event delegation and why is it useful? Can you show an example of how to use it?

22:06

  • How do you compare two objects in JavaScript?

26:00

  • Can you describe how CSS specificity works?

Tweet us your tasty treats!

Sep 03, 2018
Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends
01:05:31

It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, and more.

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.

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

Show Notes

5:00

  • Why don’t you work with Typescript?

10:52

  • How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)?

13:40

  • What is meant by the word “state” when referring to Vue or React?

16:32

28:23

32:43

  • As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries?

38:52

  • What would WordPress be like if it were built on Node and GraphQL?
  • Ghost

46:54

  • I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too?

51:16

  • How do you handle high level page layout when using styled components?

53:13

  • As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 29, 2018
Hasty Treat - Framer X and Prototyping Tools
24:16

In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline.

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:35

  • Framer X - What it is and what it isn’t

13:20

  • What it means for other prototyping and design tools

17:00

  • Future of prototyping and design and development

21:40

  • Final thoughts

Links

Tweet us your tasty treats!

Aug 27, 2018
Design Tips for Developers
01:06:18

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects.

Sanity.io - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

Show Notes

6:18 - General Design Tips

  • Spacing is important

  • Using patterns and textures

  • Use subtle gradients

  • Use subtle drop shadows

    • Multiple shadows on one element can have a nice effect
  • Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white

    • Use CSS Variables for custom blacks and whites
    • CSS default colors are almost always too harsh
  • Default browser UI is almost never the best UI

    • Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been

40:22 - UX Design & Animation

51:30 - How To Get Better

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 22, 2018
Hasty Treat - Goal Setting
32:26

In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals.

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

4:14

  • Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time)

7:45

  • What kinds of thing should you set goals for?

10:49

  • Business goals

16:50

  • Visualizing Goals

22:58

  • When should you set goals?

27:42

  • Accountability

Links

Tweet us your tasty treats!

Aug 20, 2018
The React Episode
01:13:52

In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works.

Dev Lifts — Sponsor

DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called fit.start(). Get 50% off fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your DevLifts Premium subscription. Check it out today! 

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com

Show Notes

5:23

  • Components

12:30

  • JSX

25:13

  • Data and Props

44:48

  • Fetching

49:22

  • Event Handlers

54:00

  • Instance classes + properties

55:02

  • Lifecycle Methods

59:55

  • Context

1:01:35

  • Routing

Links

Preact
Inferno
How to Comment in JSX (article)
Apollo
Redux
LevelUpTutorials.com Level II React Course
React Informed (forms)
Meteor
Axios
Firebase
Gatsby
Here’s how React’s new Context API works

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 15, 2018
Hasty Treat - Building Curriculum for Courses
32:01

In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation.

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

4:32 - Wes’ process

  • Figure out what to make
  • Build the thing you’re teaching in the course
  • Have it reviewed by experts
  • Simplify and create a linear flow for what you’re teaching

16:25 - Scott’s process

  • Chose a topic
  • Build the thing
  • Create the outline as you go
  • Have goals in mind, for individual topics
  • Record with final code open

28:25 - How to get started

Tweet us your tasty treats!

Aug 13, 2018
Our Office Setups (Gotta Get The Gear)
01:04:58

Scott and Wes talk office setups and all things gear. Gotta get the gear!

Mlab - Sponsor

mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com

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

11:00

13:30 - Computer

  • Wes: Macbook Pro 15"
  • Scott: Macbook Pro 15"

17:39 - Monitors

28:33 - Keyboards and Mice

33:14 - Desks

37:53 - Chairs

39:24 - Headphones

43:50 - Hard Drives / Backup Systems

47:28 - Charging Stations

48:52 - USB Splitters

50:35 - Wifi

54:26 - Recording Gear

58:32 - Misc

Links

××× SIIIIICK ××× PIIIICKS ×××

  • All of the above ;)

Shameless Plugs

Tweet us your tasty treats!

Aug 08, 2018
Hasty Treat - JSON, JSONP and CORS
17:10

In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, 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

3:52

  • What is JSON?

5:09

  • Origin policy in the browser

6:00

  • Cookies + how they work

6:38

  • How do you get data from one site to another?

7:00

  • JSON P (JSON with Padding)

9:00

  • CORS (cross-origin resource sharing)
  • CORS errors + learning on the fly

11:31

  • Canvas elements

12:24

Tweet us your tasty treats!

Aug 06, 2018
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
59:44

It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more!

VueSchool.io's Vue.js Masterclass — Sponsor

Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

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

2:37

  • Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place?
  • Operator Mono
  • Dank Mono
  • Fira Code

6:10

  • Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency?

9:10

  • Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source?

10:45

  • Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it?
  • Try Github

13:35

  • Question: Grant Chambers - What are some tips for going to your first meetup?
  • React Meetups

20:23

27:39

  • Question: Would you recommend using Upwork for starting out freelancing or something similar?

31:18

  • Question: Mike C. - What do you guys think about sites like Codewars and Code Fights? Being new to web development, I find the problems hard to solve. Is it important to know how to solve all these problems? If so, how do I get better at developing the mindset to solve them?
  • JavaScript 30
  • Level Up Tutorials

38:47

  • Question: When I work on a website, I need to record user names, passwords, URLs, keys, logins, cPanel, WordPress, ftp, MySQL for each and every website, local and remote.
    Currently, I use a text file to save all that information. How are you storing all this info? How others do it? How the pros are managing this? Pros and cons?
  • SSH Key
  • LastPass
  • 1Password

42:15

44:57

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 01, 2018
Hasty Treat - Whats the deal with npm, yarn and lock files?!
26:25

In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much 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

4:10

  • What is npm and yarn?

8:00

  • What’s the difference between npm and yarn?

12:00

  • What is semver?

16:40

  • What is the dependency tree?
  • This is the problem that lock files solve

20:32

  • Cool new features of npm and yarn
    • npx
    • security warnings

Tweet us your tasty treats!

Jul 30, 2018
The Undocumented Web: scraping, private APIs, proxies and “alternative solutions”
01:04:49

What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices.

Kyle Prinsloo’s Freelancing & Beyond — Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.

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:05 - What Is the undocumented web?

  • When traditional methods don’t give you what you want
  • Wild West

6:10 - Undocumented APIS

17:34 - Faking

  • Faking User Agents
    • Sending headers from requests
    • Free Blackberry wifi on plane

23:52 - Scraping

  • What is craping?
  • Cheerio - jQuery like node package

27:30 - Automation

33:30 - Proxies

  • Need a fresh IP address
  • Need a different country
  • Side note: Canadians buying stuff in USA M4S1P1 === 41100
  • API throttling

39:00 - Tips and Tricks

  • Multiple API keys
  • diskDB - Text files as databases
  • Search Github for API keys
  • Inspect Element and Delete Overlays
  • Delete Cookiesokay

44:45 - Stories

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 25, 2018
Hasty Treat - Refactoring
26:54

In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much 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

5:00 - What is refactoring and why would you do it?

  • Re-writing code while maintaining functionality
  • The first code you write is most likely not your best code

7:32 - Benefits To Refactoring

  • Keep part of your codebase in your head
  • Keep codebase timely and up to date (E.g. promises, async, await, etc.)
  • Writing code from the vantage point of having already built your product
  • Performance improvement

12:54 - When to refactor

  • When it’s stopping your from progressing
  • When brining someone new on to your team
  • When you can see a more elegant solution
  • When you’re having performance issues
  • When you’re sharing or presenting code
  • When you have a large codebase that needs to be broken up into smaller components

19:03 - Tips on how to refactor

  • Testing will make refactoring easier
  • Identify bad code and problem areas
  • Use git as an escape hatch
  • Break things into smaller chunks
  • Publish often use code to npm as modules

Links

Tweet us your tasty treats!

Jul 23, 2018
Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More
01:00:50

Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more…

Coffeecup’s CSS Grid Builder Tool — Sponsor

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

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

4:46 - Advice for gaining new skills

  • Patience and momentum are key
  • You likely won’t get anywhere significant in two months
  • Think about where you want to be in five years
  • Start small
  • Start with was excites you and let that drive your exploration
  • Start writing code ASAP. Don’t worry about the right way, just get started.

17:15 - Advice for applying to jobs

  • Apply for everything. Failing an interview is no big deal.
  • Each interview is an opportunity to gain experience
  • Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead
  • Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary”
  • Negotiate salaries and perks.

29:32 - Advice for knowing what to focus on

  • What gets you jazzed? Find something cool and figure out how to recreate it.
  • Find a problem and figure out how to solve it - build real things.
  • Don’t focus on tech - tech is just a tool.

38:32 - Advice for impostor syndrome

  • Listen to this podcast! ;)
  • Almost everyone has it.
  • Don’t worry about other people’s progress.
  • You don’t need to know how to do everything, but you should be able to figure out how to learn.

46:45 - Misc advice

  • Evaluate things for yourself - don’t blindly follow the loudest voices on the internet
  • Focus on soft skills as well - time management, communication
  • Get a mentor
  • Health and Hobbies - don’t let yourself burnout

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 18, 2018
Hasty Treat - Dot Files
25:14

In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices 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

3:15 - What is a dot file?

  • Access tokens
  • Settings for editors, etc.

4:40 - Dot file examples

  • .gitignore
  • .gitkeep
  • .rc
    • .babelrc
    • .bashrc
    • .eslintrc
  • .env
  • .DS_Store
  • .editorconfig
  • .meteorignore

23:46 - How to keep your dot files in sync

Hot Tip

  • In MacOS, toggle dot files with “Shift + Cmd + .”

Links

Wes’ dot files repo
Prettier

Tweet us your tasty treats!

Jul 16, 2018
Design Systems
56:44

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more…

VueSchool.io's Vue.js Masterclass — Sponsor

Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

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

2:40

9:40

  • Organizational elements of design systems
    • It’s all about consistency

23:07

41:52

  • Where to learn more

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 11, 2018
Hasty Treat - User Role Systems
18:34

In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc.

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

3:30

  • How to manage user role systems

11:30

  • Client side best practices
  • Don’t rely on front-end role systems as a security measure

14:13

  • Where to store your roles
  • Start simple and get more complex as needed

Tweet us your tasty treats!

Jul 09, 2018
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
01:03:40

It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much more!

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.

Coffeecup’s CSS Grid Builder Tool — Sponsor

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

Show Notes

4:48

  • How long should you stay with each job and/or company?

8:20

  • What is the best way to work remotely?
  • Tips for remote working
    • Have a dedicated space
    • Clear on and off times
    • Have a time for winding down
    • Make specific TODO lists
    • Use blocking software to help you stay focused
    • Switch up the scenery / Work in different places

15:26

  • What are the trade-offs with using WordPress in a headless setup vs a tradition setup?

21:28

  • How do you deal with API credentials in React?

27:15

  • How do you keep an eye on performance with an app/site over the long-term?
    • Check uptime
    • Check the performance features in browser dev tools
    • Use error checking software
    • Host-based performance tools
    • Newrelic
    • pingdom
    • LogRocket

34:28

  • What happened to Canvas after all the hype around HTML5 a few years ago?

40:15

  • How do you deal with analysis paralysis?
    • Just get to work - you can always change things later
    • Do research, but don’t let it get in the way of shipping

44:05

  • If you were forced to change your career (and it had to be something you’ve never done professionally in the past), what would it be?
    • Wes: Some sort of buying and selling (eBay, Amazon, etc,)
    • Example: Buying things at wholesale prices and selling them with a markup
    • Scott: Could go a lot of different directions.
    • Example: DJ, Snowboarding instructor, develop a video game that is a sequel to Cruis’n USA

50:14

  • As a freelance developer, what are some good questions to ask before taking on a client?
    • Budget
    • Scope
    • Preferred communication methods
    • How do you make money?
    • What are the ultimate goals?
    • Basically, ask as many questions as possible

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 04, 2018
Hasty Treat - Domain Management
27:20

In this Hasty Treat (Short episode) Scott and Wes discus all things domains. Where to get them, how to set them up and how to safe time managing them all in one place.

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

3:30

  • What is a domain?

4:59

  • What is DNS?

6:00

  • Nameservers

8:30

13:30

  • Different types of DNS records

17:00

  • Different kinds of domains
    • .com, .tv, .io, etc.

Tweet us your tasty treats!

Jul 02, 2018
Marketing for Developers
01:18:19

Scott and Wes talk about marketing. Specifically how to do marketing if you’re a developer wondering where to start.

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.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax

Show Notes

7:58 - Personal Branding

  • Build trust and reciprocity
  • Be authentic to yourself and let that carry through in your work.
  • Have the guts to put yourself out there and establish yourself as an expert.
    • Speak at conferences
    • Write blog posts
    • Make YouTube videos
    • Be on podcasts
    • Start your own podcast

14:50 - Running a Business

  • Treat people well.
  • Reward your customers.
  • Don’t punish your users.
  • Have a refund policy.

19:26 - Social Media

  • Don’t push people off a platform. Bring content to them that is tailored for that platform.

  • Get in early, before the platform becomes super crowded.

  • YouTube

    • Quality content through quantity.
    • Write good SEO titles.
    • Tease your paid content or create a free one-off.
    • Don’t expect to make a lot of money, but it can be great for growing a brand.
  • Twitter

    • Be helpful - small, digestible tips and tricks and great for growing a Twitter following.
    • Quality is still the key.
    • Steve Schoger is a great example of consistent, high quality content.
  • Facebook

    • People have other interests besides web development. People like to see into your life.
    • Use Facebook to give people a window into who you are.
  • Reddit

    • Reddit is really difficult. It’s easy to get banned. The best strategy is to not focus on marketing and just try to be helpful.
    • It’s sort of replaced forums and is a great place to build communities around different hobbies.
  • Instagram

    • Recently IG has been blowing up for web developers.
    • Dhanish is a perfect example of how to do Instagram well.

49:55 - Paid Advertising

  • Don’t be sleazy.
  • Ads are good for getting likes and driving some traffic to something, but it takes experimentation to get the best bang for you buck.

54:40 - Email marketing

  • Wes: Email is probably responsible for most of my sales.
  • Keeps people up to date and helpful for promoting new courses.
  • Helpful for figuring out what people want.

59:17 - Partnerships

  • A lot of companies want to partner rather than just sponsor.
  • It can be a great way to fund the creation of products/courses.
  • Affiliate programs are great when they work out.

67:30 - Freebies

  • Giving away free content is a surefire way to get people to pay attention.
  • It’s about giving back to the community as much as marketing your products.

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 27, 2018
Our Workflows: Design, Development, Git, Deployment
01:06:48

It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.

Coffeecup’s CSS Grid Builder Tool

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

VueSchool.io's Vue.js Masterclass

Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

Show Notes

4:00 - Design Workflow

  • Wes:

    • Screenshots of look + feels
    • Sketch layouts out in pencil
    • Mock up layout in Sketch
    • Once rough layout is done, I refine
    • Once I have: colors, type, patterns, textures and overall layout, I move to code.
    • A design program is important to vs designing in code
  • Scott

    • Mirrored component structure in Figma
    • Using Ideas from Atomic design and React components
    • Goal is for Figma components to be 100% mapped to styled components
    • Flexible and testable in different layouts
    • My design philosophy is refinement through iteration
    • Light theft

15:55 - Design to Dev Workflow

  • Wes:

    • Happy with design so far
    • Setup tooling - styled components, stylus, sass…
    • Setup type, variables, partials, resets…
    • Do as much HTML as possible before styling
    • CSS it up for layouts, then go section by section
    • Broad first, then zoom in on finesse
    • Browsersync / Hot Reload
    • Test across browsers / Devices
  • Scott:

    • Define parameters in Figma
    • Styled components in React, hand write that CSS bruh
    • Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components

32:06 - Git Workflow

  • Wes:

    • Tear off a branch - name after issue - DEV113
    • Do your work
    • Rebase
    • Squash
    • Pull Request
    • Rinse + Repeat
  • Scott

    • Master branch is 1-1 with live
    • Develop is where work is done (but not really because I make a feature branch for each feature and merge in)
    • Contributors issue pull requests into develop

42:34 - Deployment Workflow

  • Scott:

    • Hosted on Meteor Galaxy, container based hosting
    • Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.
    • Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master.
    • Secrets are kept in a settings.json file that’s used during deployment.
  • Wes:

    • Codeship
    • DeployHQ
    • Git
    • Rsync
    • Dealing with secrets

49:53 - Project Folder Structure

  • Wes:

    • Folder Structure - 0100, 0101…
  • Scott:

    • API
    • UI
      • element -> styled components with index
    • Startup
    • Utilities

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 20, 2018
Progressive Web Apps
59:47

Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps.

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.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax

Show Notes

2:00

  • What’s the deal with the GitHub / Microsoft acquisition?

6:05

  • What is a Progressive Web App?

8:55 - Progressive Web App Checklist

What are the baseline features for a Progressive Web App?

09:25

11:05

  • Pages are responsive on tablets & mobile devices

11:35

16:35

  • Metadata provided for Add to Home screen

18:40

  • First load fast even on 3G

20:00

  • Site works cross-browser

20:15

  • Page transitions don’t feel like they block on the network

22:20

  • Each page has a URL

What makes an exemplary Progressive Web App?

27:42

  • All content is indexed by Google

28:38

  • Schema.org metadata is provided where appropriate
  • Social metadata is provided where appropriate

29:42

  • Canonical URLs are provided when necessary

User experience

31:43

36:52

  • Pressing back from a detail page retains scroll position on the previous list page

37:34

  • When tapped, inputs aren’t obscured by the on screen keyboard

The Best of the rest

38:22

  • Content is easily shareable
  • Site is responsive
  • Any app install prompts are not used excessively
  • The Add to Home Screen prompt is intercepted

39:20

  • Use cache-first networking

Device APIs

40:34

41:50

45:12

  • Accelerometer
  • GPS

45:55

47:12

48:03

48:35

51:45

52:58

  • Use Lighthouse to improve the quality of your web apps

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 13, 2018
SSR, SEO, Tips for Students, music, security and GraphQL
01:00:38

It’s a Potluck episode - you bring the questions and we turn them into tasty treats.

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.

Coffeecup’s CSS Grid Builder Tool

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

Show Notes

2:15

  • What’s the best resource for staying up to date with Javascript?

3:48

  • How do you stay motivated if you don’t like your current project?

7:08

  • What’s your favorite music to work to?

11:10

  • In what order should developers learn tools related to GraphQL?

13:48

  • As a JS developer, is it a good idea to learn other languages like PHP or Python?

19:55

  • As a CS undergrad, what can you do in terms of programming that could be a great benefit after graduation?

23:14

  • Should you be concerned about SEO when using JS frameworks like React?

28:17

  • How can you build your network when you’re too tired or busy to go to a bunch of meetups?

32:55

  • How do you come up with such good designs and UI for your courses?

36:37

  • As more websites move to secure connections, where can a noob learn the basics of https, SSL certificates, how to deploy a secure website, etc.?

43:05

  • Have you had experience working for large companies and how does it compare to smaller companies and/or freelancing?

47:30

  • What are other programming podcasts you listen to?

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 06, 2018
VS Code Round Two
01:08:40

Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor, VS Code.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax

Show Notes

01:45

06:05 - Favorite new updates

  • Notification API
  • Auto Import
  • Listing errors in the file explorer
  • Column Selection
  • Interface Customization
  • Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do
  • React Snippets Library
  • Wes’ VS Code settings
  • Visual Studio Live Share

27:40 - Favorite/New Extensions

38:49 - Themes

40:35 - Tips and Tricks

  • Learn how to jump and select by letter, word, line, etc.
  • Move a line (or Line Bubbling) - Use this for rearranging and/or moving lines of code quickly.
  • Cycling through multiple windows of the same app - If you have multiple VS Code windows open, “Cmd + backtick” will cycle through them, so you don’t have to drag them in and out of view.
  • Adjust MacOS keyboard settings - change Key Repeat to “fast” and Delay Until Repeat to “short”. This will make your editor super fast when holding down arrow keys.
  • Use Git features
  • Spell Checker - “Cmd + .” will open up code actions and you check for possible misspellings, etc.
  • Rename Symbol - Much more reliable than find/replace.
  • Sort Lines
  • Select everything between quotes - (Cmd + Shift + Space)

57:25 - Things that could be improved

  • Region folding is inconsistent and sometimes doesn’t work at all.
  • No easy way to tell which extension is causing CPU performance issues.
  • Sidebar indentation isn’t clear.

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 30, 2018
How to Get Better at Debugging
56:52

Scott and Wes detail the tips and tools you need to get better at debugging.

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.

Coffeecup’s CSS Grid Builder Tool

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

Show Notes

4:00

  • Read the stack trace

7:35

  • Make sure you aren’t debugging production
  • Make sure you’re not cached

8:40

  • Check the network panel for the whole response
  • CORS (Cross-Origin Resource Sharing)

12:04

  • Use debugger commands in the browser
  • Set breakpoints (race conditions

13:40

  • Use Source Maps

15:29

  • Make full use of all console methods
    • console.group/groupEnd/info/
    • console.log({objNAme})

17:02

  • View your code in other browers
  • Make sure your browser is up to date

18:50

  • Step into and step over function
  • Useful for especially tricky issues

19:47

  • Look into Scope in dev tools panel

20:33

  • Recreate it in CodePen or Create React App
    • Helps to quarantine your code
    • Verify where the problem actually is

24:12

  • Take a break
    • Helps clear your head and approach your problem from a different angle

25:40

  • Rubber Duck Debugging
    • Forcing yourself to talk it out will often reveal problems/issues

26:40

  • Check Github issues / ask in Slack
    • Leave your solution in the comments for others

28:12

  • Use Node --inspect flag

29:57

  • Read the code in your libs (if you can)

32:34 - Chrome Dev Tools Tabs Rundown

  • 33:10 - Network tab
  • 34:15 - Preformance tab
  • 35:58 - Lesser known tools
    • 36:15 - Firefox Grid Debug
    • 36:20 - Firefox Fonts tab
    • 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window)
    • 37:39 - Chrome Animations Inspector
    • 38:34 - /dev tips & Modern DevTools Course
    • 39:41 - Chrome & FF Layers for 3d and full view of canvas & window
    • 40:51 - Sensors for overriding fake devices sensors
      • Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device
      • Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back
    • 43:12 - Favorite DevTools extensions
  • 44:06 - Application/Storage tab
  • 44:41 - FireFox Grid Inspector

××× SIIIIICK ××× PIIIICKS ×××

  • Scott: Hotel Tonight App
  • Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite

Shameless Plugs

Tweet us your tasty treats!

May 23, 2018
What's New in Javascript
56:27

Scott and West talk about what’s new in JavaScript.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

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.

They are also hiring! netlify.com/careers

Show Notes

1:55 - Scott’s new studio

4:57 - Pop Motion Pose

  • New library for React or vanilla JavaScript
  • Define locations instead of CSS styles
  • Pass the animation state into a React component as open or closed instead of active or inactive
  • Flip animation techniques
  • Style Fire - Simple HTML & SVG styler optimised for animation

8:44 - Intersection Observer

  • Browser-based API based on observables
  • Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page

10: 32 - MDX

  • Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it
  • Turns MarkDown files into components in Webpack

12:56 - Resize Observer

  • Watch elements for resize

15:47 Web Animations API

  • Works with animations natively in JavaScript
  • Tell your animations to play, pause, reverse, etc.
  • Instead of changing classes, you have full control over what the animation is doing
  • Web-Animation-JS Polyfill
  • Can I use

18:00 - Window Face Detector API

  • Create a new window.face detector and pass it an image tag and it returns an array of faces.

22:53 - Payment Request API

  • Eliminates check out forms
  • Allows platform to handle payment safely and securely

29:23 - INTL.NumberFormat

  • Format pricing with different currencies

32:59 - V8 BigInts

  • Makes working with big numbers more viable

34:53 - Speech Recognition

  • Converts speech to text
  • Pipe in different accents

36:22 - Text To Speech

  • Simulates text into spoken words

41:46 - ES6 Modules In Node

  • There are no ES6 modules in Node. It’s still being developed. If you want to build an ES6 module in Node, you have to use the .mjs extension

××× SIIIIICK ××× PIIIICKS ×××

Tweet us your tasty treats!

May 16, 2018
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
52:06

It’s a Potluck episode - you bring the questions and we turn them into tasty treats.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: 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

2:42

  • What is an efficient way to process huge data, greater than 740 MB when not working in JS?

6:45

11:09

  • Wes, can you make a course on how to barbecue meat properly?

12:31

12:54

  • What are the best things to keep in mind when you are the only developer on a team?

18:07

  • Is Redux for React dead with the new context API?
  • Redux

21:41

  • What’s the funnest project you have ever worked on and why?
  • LevelUpTuts

27:19

  • What’s the best use case for JWP?
  • JWP

29:50

  • Should I focus on one thing and try to master one technology instead of being a jack of all trades?

35:00

39:41

  • Would you use single page application vs SSR for large reactor view apps?
  • SSR
  • Next.js

41:06

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 09, 2018
How to Learn New Things Quickly
01:02:45

Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend.

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.

They are also hiring! netlify.com/careers

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Show Notes

2:00

  • Scott recounts his crazy story about getting Lymphangitis

8:30

  • Know your learning type
  • videos, blogs, docs, source
  • no right or wrong way

15:00

  • Foundational Skills

23:00

  • Narrow your focus
  • Should you learn Redux with React?
  • blurring skills hurts future progress
  • don't learn too many things at once

26:00

  • Get excited
  • try to reclaim your initial excitement
  • flow happens when you are excited
  • pick projects around hobbies
  • Star wars sucks

33:00

  • Grind Time
  • write code first ask questions later
  • break shit
  • Submit to yourself that you are going to build this 3-4 times
  • iteration driven development
  • quality from quantity
  • use smarter people
  • snippet libs
  • style guides

40:00

  • Immersion
  • follow every kind of media you can
  • put things on in the background
  • permeate into your brain

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

1:00:00

  • Scott comes out of nowhere with a story about TEA!

Tweet us your tasty treats!

May 02, 2018
20 JavaScript Array and Object Methods to make you a better developer
55:30

Wes and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer.

Freshbooks - Sponsor

This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.

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.

They are also hiring! netlify.com/careers

Show Notes

For the docs for all these, just google mdn and the method you are looking for 😃

3:00

  • Why are these great?
  • They are chainable
  • Immutable

5:30

  • .filter()
  • Truthy or Falsy

8:00

  • .map()

10:00

  • .reduce() - returns any shape! filter, create a new shape, add up numbers...

14:30

  • .forEach()
  • Side effects

16:00

  • .some()
  • can be used as a short circuit forEach

25:00

  • .every()
  • .includes() (why not contains?)

26:00

  • Array.from()
  • Array.from() takes a secondary map arg
  • Array.of()

29:00

  • Object.values()
  • Object.keys()
  • Object.entries()

32:00

  • Array spread - converts iterable to array
  • Array spread - Concats arrays
  • Array Spread + Slice. Don't splice - remove an item from an array.

34:00

  • Object Spread

37:00

  • Function Rest

39:00

  • Object.freeze()

40:00

  • Object.seal()

41:00

Shameless Plugs

Tweet us your tasty treats!

Apr 25, 2018
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
01:05:10

It's a Potluck episode - you bring the questions and we turn them into tasty treats.

DeployHQ - Sponsor

DeployHQ is the easiest way to deploy websites to your servers. Invite your team and set up automated deployment processes to:

  • Compile a production build of your assets
  • Deploy securely to servers behind VPNs and firewalls
  • Execute SSH commands
  • Manage and upload your config files
  • Preview and schedule deployments
  • Track and monitor your deployments in real-time

Deploy to multiple servers at the same time, whether that be your own server via FTP/SSH, or an Amazon S3 bucket. You can even start deployments automatically whenever you push!

Instant setup for repositories hosted on GitHub, Bitbucket, GitLab and Codebase, plus realtime notifications in your favourite chat services like Slack or HipChat.

To get 50% off your first 6 months, head on over to deployhq.com/syntax. The first 25 listeners to deploy successfully will receive a FREE branded mug or t-shirt!

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Submit Your Questions Here

Show Notes

02:44

6:20

10:45

  • What was your biggest breakthrough in Programming?
  • Nude.js

20:00

25:00

  • Thoughts on CMSes? Headless? Database Driven? Static Site Generator?
  • Headless WordPress
  • Gatsby

34:00

  • How can I start creating and selling courses?

40:00

  • How did you two become renown in the developer community?
  • We don't think we're renown :)
  • YouTube Ad Revenue is poor

46:00

  • Server Side Rendering with JavaScript Apps

53:00

  • Is Yeoman still a thing?

×SICK×PICKS×

Shameless Plugs

Tweet us your tasty treats!

Apr 18, 2018
Preventing and Dealing with Burnout in Web Development
01:02:50

Scott and Wes Chat about burnout!

Freshbooks - Sponsor

This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Show Notes

01:50

  • What is burnout?
  • Losing Enthusiasm for web development
  • That Hustle

7:00

  • Why is being burnt out bad?
  • Putting off hobbies

12:30

  • How do you prevent burnout?
  • Farming out Work
  • Automating content
  • Busy work

18:00

  • Aggressively turn down meetings
  • Work to cut out busy work
  • Locus on Control
  • Managing Email and Notifications
  • Scrubbing Plates

24:00

  • Health and Nutrition
  • Sleep

27:00

  • Motivation
  • What to do when you just don't like the work you are working on
  • Small Wins
  • Learning new Things
  • Getting a new job
  • Taking Courses
  • Keeping Up With The Codeashians

37:00

  • Being overworked at work
  • Overtime

41:00

  • So you've burnt out, what do you do?
  • How do you reignite the spark?
  • Taking a day off
  • Delegating GitHub
  • Online chat with other developers

×SICK×PICKS×

Shameless Plugs

Tweet us your tasty treats!

Apr 11, 2018
The Testing Show!
01:08:59

Wes and Scott talk all about testing!

SnapShooter - Sponsor

SnapShooter is a Digital Ocean backup service. You get fine grain control over when you backup and how long you backup for. Easily restore from previous snapshots.

Use the code SYNTAX to get 20% off your first 12 months.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Show Notes

3:00

  • Testing Talk
  • Is testing scary?

8:00

  • Unit Testing
  • Pure Functions
  • Mutations
  • Pass in dates to functions

11:40

14:00

  • Visual Regression Testing

17:00

  • End to End Testing

21:00

  • Why would you want to test?
  • Confidence
  • Easy Refactoring
  • Finding edge cases

33:00

50:00

  • Mocking
  • Spy Functions

54:00

57:00

  • TDD (Test Driven Development)
  • BDD (Behaviour Driven Development)
  • Continuous Integration
  • Travis CI

×SICK×PICKS×

  • None today!

Shameless Plugs

Tweet us your tasty treats!

Apr 04, 2018
Is jQuery Dead?
01:03:38

Wes and Scott dive into jQuery. Is it dead? Should you still use it? Why not? What are some alternatives?

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

03:00

  • A stroll down jQuery Memory Lane
  • What was the first jQuery plugin you wrote?
  • jQuery Conference
  • jQuery IRC room
  • Ben Alman

9:00

13:00

  • So, why is jQuery going away?

16:00

21:00

27:00

30:00

  • Data / Utility Functions
  • Lodash
  • Just use Map/Reduce/Filter
  • Data Massaging 💆🏻‍

34:00

37:00

  • Event Listeners
  • Event Delegation
  • Listening for events on multiple elements

47:00

Seeeaaaaacccckkkk PIX

Shameless Plugs

Tweet us your tasty treats!

Mar 28, 2018
20 Easy Win Performance Tips
01:03:28

In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites.

Cloudinary - Sponsor

Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!

Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.

Fluent Conf - Sponsor

Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.

Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.

Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX

Show Notes

So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to this tweet

0:00

  • We just cracked 1,000,000 downloads! Thank you!

4:00

  • Network Tips
  • Reducing the amount of HTTP requests
  • A little bit about HTTP2
  • An interview about http2

8:00

  • Use Caching and LocalStorage
  • Turn on aggressive caching on your server - long expire times
  • What is gzip? / Enabling gzip

12:00

13:00

  • When to load your JS
  • Blocking Requests

15:00

  • Use Lazy Loading

17:00

  • Preloading content with Link rel="preload"
  • rel="prefetch"

19:00

  • Picture, picturefill and srcset=""
  • Article on srcsrc and Picture
  • srcset vs picture/source elements

25:00

  • Image Compression
  • One less jpg
  • Serve less data

26:00

  • Inline SVG
  • Talk about Font Awesome

33:00

37:00

  • Remove unused code
  • Purify CSS
  • no-unused-imports with ESlint

38:00

  • Code Splitting

40:00

  • Transpile less
  • babel-preset-env

41:00

42:00

45:00

  • Icon Fonts
  • Web Fonts
  • Native Font Stack:
  • Good: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

47:00

49:00

SIIIIICKkkkkkkkk PIXXXXX

Shameless Plugs

Tweet us your tasty treats!

Mar 21, 2018
Recording Screencasts - Hardware, Software, Dos and Don'ts
01:07:07

In this episode, Scott and Wes everything about their recording — from gear to software to tips and tricks for creating a good screencast.

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.

They are also hiring! netlify.com/careers

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

2:00

4:00

14:30

  • What are the essentials for hardware?
  • Put a t-shirt under your keyboard

16:00

32:00

  • Making Mistakes
  • Leaving in goof ups and debugging

40:00

  • Bad screen recordings
  • What is boring? What is annoying?
  • Recording pet peves
  • Tips for sizing your editor
  • Gross sounds
  • Too many files

50:00

  • What makes a good recording?
  • Good contrast on colour scheme
  • Keeping the code open
  • Short recordings

SIIIIICKkkkkkkkk PIXXXXX

Tweet us your tasty treats!

Mar 14, 2018
Hasty Treat — Freelancing Hot Tips 🔥
29:41

In this Hasty Treat (Short episode) we answer your questions about Freelancing - how to charge more, building a portfolio, finding clients and our thoughts on using pre-made WordPress themes.

Sign up for the Value Pricing Bootcamp - Sponsor

Get Jonathan Stark's free 6 day email course on value based pricing for freelancers over at valuepricingbootcamp.com.

Jonathan Stark is the author of Hourly Billing is Nuts and has worked with companies such as Staples, Time and T-Mobile. These days he routinely commands an effective hourly rate of $2000+ per hour, so I'd say you should check his course out.

Show Notes

1:00

4:00

  • Q: Ideas on building a portfolio and landing those first customers
  • Your portfolio doesn't really matter as a web developer
  • Your reputation and referrals is key
  • Reputation in the community is important
  • Put yourself out there!
  • You have to tell people what you do
  • You have to ask people if they need work
  • Good communication is key

8:00

  • Q: What are some strategies for budging and quoting?
  • Understanding what a website is worth to a client
  • Talking to your client ablut pricing
  • Asking how much they have available to spend
  • Chunking the project into multiple bits so they can build on it

14:00

  • Q: How do you tell your existing clients that you need to charge more?
  • Clean Scope / Scope Creep
  • Quote in Features and pieces, not entire projects
  • Fixed Pricing
  • Becoming a better/faster developer
  • Getting more expensive as you move
  • Don't charge hourly
  • Taking big Ls

18:30

  • Q: What is your opinion on value based pricing?
  • We're huge proponents
  • Clients don't like hourly billing
  • The client should know what you are paying and what you are getting

22:00

  • Q: When is it okay to use WordPress and pre-made themes? Is that cheating?
  • The beauty of open source
  • The business Wes answer
  • The developer Wes answer
  • Building your own starter files
  • Undoing other developer's work

Tweet us your tasty treats!

Mar 09, 2018
Keeping Up with the Codeashians. Dealing with our fast paced industry.
01:08:43

Scott and Wes talk about how to deal with being overwhelmed with our fast paced industry. How do you keep you and your team's skills up to date?

Wes' Note: Scott came up with the title for this one. I know.

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.

They are also hiring! netlify.com/careers

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

1:00

4:00

  • That feeling
  • Being okay with not knowing everything

9:00

  • How to wait it out
  • When you should jump into a library
  • 1.0 of libraries
  • Dogfooding

13:00

  • Just In Time learning
  • Doubling down on the fundamentals

21:00

  • What is JAM Stack?

22:00

  • Why do you need to stay up to date?
  • Moving or Losing Jobs
  • Comfy Chairs

25:00

  • Hipster Web Developers

27:00

  • Someone think of the customers!
  • Technical Debt
  • Falling in love with web development again
  • Constantly challenging yourself

30:00

  • Complacency in Web Devleopment
  • Motivating Comfortable Web Developers
  • You have to stay up to date

32:00

  • Working on the weekends
  • Real Talk: part of your job is staying up to date
  • How to find time to learn on the clock

36:00

  • Adding new tech to projects as a way to learn

39:00

  • What if your senior developer is holding back progress?
  • How to convince your team or boss that you aren't just a hipster and this new tech is worth it
  • Show them the why!

47:00

Siiiiiiiick Pixxxx

Shameless Plugz

Tweet us your tasty treats!

Mar 07, 2018
Why Static Site Generators are Awesome
01:04:36

Wes and Scott talk all about Static Site Generators!

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.

They are also hiring! netlify.com/careers

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

1:00

  • Woah Scott's Audio!

4:00

  • #TastyTreats Winners

8:00

  • What are static site generators?

10:00

24:00

34:00

41:00

  • Using with a Headless CMS
  • Reloading The Pages

48:00

  • WHAT WHAT Scott is Canadian?!

50:00

Siiiiiiiick Pixxxx

Shameless Plugz

Tweet us your tasty treats!

Feb 28, 2018
Large Files - CDNs, Image Compression, Video Hosting, and Big Zips
01:08:45

Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?!

Cloudinary

Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!

Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.

Xojo — Sponsor

Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.

With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.

Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.

Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.

Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax

Show Notes

1:30

  • Chit-chatting about GraphQL Testing

3:45

  • What is a CDN? Why do you need one?
  • How does the internet even work?

7:00

  • Amazon S3 + Cloudfront
  • CacheFly
  • MaxCDN
  • Cloudflare

11:30

16:00

26:00

  • How we use Cloudinary

29:00

41:00

46:30

50:00

55:00

  • Video Formats

59:00

Siiick Pixxxx

Shameless Plugz

Tweet us your tasty treats!

Feb 21, 2018
Designing, Templating, Inlining and Sending Email!
01:02:18

In this show, Scott and Wes talk about about sending both transactional and marketing email. Everything from designing to templating to inlining the CSS to getting it sent. Enjoy!

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Xojo — Sponsor

Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.

With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.

Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.

Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.

Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax

Show Notes

0:00

  • WELCOME!

2:00

  • An update on GraphCool, Prisma and Yoga

3:45

Syntax Contest!

  • You can win a free course from either Scott or Wes by screenshotting yourself listening to the podcast and uploading to Twitter or Instagram.
  • We will pick 1 winner from Twitter and 1 winner from Instagram
  • Make sure to tag @wesbos and @stolinski on Twitter and @wesbos and @stolinskion Instagram
  • #TastyTreats

5:40

  • Email ain't easy!

6:20

  • How do Scott and Wes use email in their apps and businesses?
  • Transactional vs Marketing Email

9:00

  • Dealing with multiple emails and modifier
  • Signing in with Facebook vs Email?!

11:00

  • Transactional Email
  • The Process to creating single one-off email

13:00

20:00

30:00

37:22

45:00

52:00

Siiick Pixxxx

Tweet us your tasty treats!

Feb 14, 2018
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
01:15:02

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

0:00

  • Goofing Around

1:30

  • Real show starts

2:12

  • Scott explains his breakdancing hobby
  • "Breaking" is breakdancing
  • What is flavour?

10:20

19:00

  • Scott talks about how he is into making music
  • Domestic Robot
  • Scott is starting up a new project called "Shift. Super."

21:30

  • How do you find time for these hobbies?
  • Avoiding burnout
  • Work/Life Balance
  • Buy in from significant others

28:00

  • Wes talks about working out and going on date nights with his wife
  • Hamilton is cool
  • Home Renos

35:00

  • Doing a downtown job
  • Problem Solving

40:00

  • Scott talks about his love for KungFu Movies
  • 5 Fingers of death
  • 5 Deadly Venoms
  • secret service of the imperial court
  • Boxer from shantung
  • 36th Chamber of Shaolin
  • Human Lanterns

46:00

  • What kind of cars do we drive?

55:00

1:05:00

  • What are you working on Personally / Mentally?
  • Habit Tracker
  • Doing a downtown job

Quuuuuiiiiiick SIIIIIIICK PICKS

Tweet us your tasty treats!

Feb 07, 2018
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
01:03:11

Dev Lifts - Sponsor

Dev Lifts - Thad and JC are on a mission to make web developers healthy. Get a Personal Training and Nutrition Plan — use the code SYNTAX for $75 off. They have also just announced their slack-only memberships for $5/month

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

01:10

03:00

  • Skateboarding on a TRAMPOLINE?!

04:30

  • Q: What are your favourite features coming to HTML 5.2
  • Dialog Box
  • Multiple Main Tags
  • Thanks Jordan!

10:00

  • Q: How do you retain all the info you learn like a sponge?
  • Thanks Ozan

13:30

  • What are your favourite CSS Libraries / Frameworks?
  • Thanks Blake!

21:00

  • What were some of the struggles you had early on in your career? How did you overcome them?
  • Learning how to read error logs and messages
  • Dealing with Impatience
  • Coding is very frustrating

26:50

34:45

  • Q: When should you just drop the towel on code?
  • When should you throw in the towel on code?
  • Scrapping a codebase and moving from PHP to JS
  • Let's talk about if it's worth it

41:00

  • Q: What is the best way for a JS beginner to get their hands dirty?
  • Don't work on apps, work on pieces!

47:50

  • How do you recommend a designer falling in love with frontend dev sharpen their skills while being (happily) committed to a full time design position?
  • Should designers code?

SIIIIIIICK PICKS

Shameless Plugs

Tweet us your tasty treats!

Jan 31, 2018
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
52:47

Xojo — Sponsor

Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.

With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.

Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.

Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.

Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax

Show Notes

  • Take a drink every time Wes says exactly

01:10

03:50

  • The most basic hosting / services
  • WordPress.org, Medium, Wix, Squarespace

05:00

  • Your Cheap PHP/Apache Hosts
  • Endurance International Group owns most of the cheap web hosting world
  • cPanel
  • Bluehost doing shady stuff
  • Siteground seems p good

13:20

15:00

  • What does "spinning down" mean?
  • Deploying to these services

17:20

  • How these services do instant cut-overs to new servers
  • SSL Certificates

20:00

29:00

32:00

38:20

40:00

  • SPA Apps - React, Angular, Vue...
  • How to handle Routing
  • Netlify

SICK PICKS

Shameless Plugs

Tweet us your tasty treats!

Jan 24, 2018
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!

Xojo — Sponsor

Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.

With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.

Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.

Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.

Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax

Show Notes

  • Take a drink every time Wes says exactly

01:10

03:50

  • The most basic hosting / services
  • WordPress.org, Medium, Wix, Squarespace

05:00

  • Your Cheap PHP/Apache Hosts
  • Endurance International Group owns most of the cheap web hosting world
  • cPanel
  • Bluehost doing shady stuff
  • Siteground seems p good

13:20

15:00

  • What does "spinning down" mean?
  • Deploying to these services

17:20

  • How these services do instant cut-overs to new servers
  • SSL Certificates

20:00

29:00

32:00

38:20

40:00

  • SPA Apps - React, Angular, Vue...
  • How to handle Routing
  • Netlify

SICK PICKS

Shameless Plugs

Tweet us your tasty treats!

Jan 24, 2018
Async + Await
54:31

Freshbooks — Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

02:55

06:00

  • Callback Hell
  • Q
  • Bluebird
  • What is a promise?
  • Promises are an IOU

8:30

  • Async + Await IS promises
  • What is Async + Await?
  • How does the code look?
  • Returning values from an await

15:20

  • Performance Considerations
  • MEGA PROMISES
  • Promise.all()
  • Here is an example:
  • const [weather, store] = Promise.all(getWeather(), getStores());

19:22

22:48

27:00

  • Snackisodes
  • Snack Packs
  • Hasty Treats?!!!

28:00

30:00

  • Error Handling Methods
  • View my slides for some code examples.
  • Try/Catch
  • High Order Function
  • Just handle the error when you callIt().catch(dealWithIt);
  • Node's process.on('unhandledRejection') event

36:00

  • Browser Support
  • Babel it!

38:00

SIIIIICK PICKS

42:00

47:00

  • Sick Tip
  • Chrome's Autoplay is changing
  • Details on this
  • Visit chrome://media-engagement to see your scores

Shameless Plugs

Tweet us your tasty treats!

Jan 17, 2018
GraphQL? Here is what you need to know!
01:06:42

Snipcart — Sponsor

Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!

Freshbooks — Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

{ show(id: 027) { notes }}

02:40

  • What is GraphQL anyways?
  • GraphQL Relational Data

04:45

  • How is it different than REST?

08:30

  • GraphQL's self documenting Nature

09:20

  • You don't need to replace your existing REST api
  • It can sit infront of multiple APIs

10:00

11:50

13:30

  • Why we like Apollo
  • Setup is amazingly fast

15:00

  • Pagination
  • Refreshing of data

18:00

  • The GraphQL Core Concepts
  • Queries
  • Mutations
  • Filtering and Sorting
  • It's not really a query language

21:00

  • How do you say Schema?

22:00

  • More on Resolvers

22:50

  • Mutations
  • Updating the cache

27:00

  • Using with existing APIs
  • Do you have two schemas now? One for MongoDB and one for GraphQL?

35:00

45:00

53:00

  • Apollo Link
  • Apollo VS Redux

56:00

  • Graphiql

SIIIIICK PICKS

Shameless Plugs

Tweet us your tasty treats!

Jan 10, 2018
All About Redux && Cookies vs JWT
26:01

Dev Lifts — Sponsor

Dev Lifts will create a personal training plan tailored to your 2018 health and fitness goals. Use the code SYNTAX for $50 off.

Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off.

Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018.

The Show Notes!

01:00

06:00

  • Modifying Your State
  • Immutability

07:15

  • Actions + Actions Creators
  • Dispatching

09:00

  • Reducers

14:00

18:30

  • What is the difference between Cookies and JWT?

Tweet us your tasty treats!

Jan 03, 2018
Dealing With Email Overload && Prettier Setups
30:48

Wes details "Breakout" — his email management strategy for overwhelmed creatives and Scott and Wes chat about how they have their prettier setup.

Freshbooks — Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Show Notes!

01:00

02:00

  • Do you like minisode or snackisode?
  • Any other ideas for names for these short episodes?

04:00

  • Email is often busywork

04:30

  • You likely have a decision problem

06:00

  • Kill it at the source! How do you stop email from getting to you in the first place?

08:00

  • Your inbox is not the world's TODO list
  • Process it when you get it
  • Getting Things Done

09:30

  • Filter! Filter! Filter!

10:30

  • Germans sure do get a lot of vacation time!

13:00

15:30

  • Dictation is great!

17:30

  • Video responses

18:30

  • Defer

19:19

  • Batch Processing Email
  • Send + Archive

20:31

  • Stop emailing yourself

24:00

  • Listener Question: How do you use Prettier?

Tweet us your tasty treats!

Dec 27, 2017
All About CSS BEM!
23:06

Scott and Wes dive into CSS BEM — What is it? Why do you need it? How does it work?

Sign up for D3 in 5 Days — Sponsor

D3 has a bit of a bad reputation for being hard to learn so Ben Clinkinbeard has put together this awesome 5 day email course that will get you comfortable with the 3 or 4 fundamental concepts that are needed to create amazing data visualizations with D3.js. Get it now

The Show Notes!

01:00

  • Minisode! What do you think?
  • Meijer is the best!

05:00

  • What is CSS BEM?
  • What problems does CSS BEM solve?
  • Block, Element, Modifier!

8:00

  • What about really long class names?

9:00

  • Use with Sass/Stylus

12:00

  • What about styled components?!

15:00

  • Listener Question: Do / should you use Dropbox for a website with Git and node_modules?

Tweet us your tasty treats!

Dec 21, 2017
Web Development in 2017 && a look ahead at 2018 🍾🍷
01:08:20

What happened in web development in 2017? What were our personal and professional feats in 2017? What should we look forward to in 2018?

Snipcart — Sponsor

Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!

Freshbooks — Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Show Notes!

02:00

  • Scott's 2017 Look Back
  • Scott is a new parent
  • Dealing with kids who don't sleep
  • Scott's Breakdancing Gains

05:20

  • Wes' Look Back
  • Taking Health Seriously
  • First full year of Wes doing tutorials full time
  • Course Correction VS Goals
  • Course Platform Improvements
  • Lots of Email Marketing
  • Migration to Drip

09:10

  • Scott cut ties with startup
  • 100% Invested in Levelup Tutorials
  • Major Platform improvements
  • New Payment Gateways
  • Lots of new Series - 400 videos!

11:25

  • We Launched Syntax!
  • Thank you!
  • The show is getting good (we think?)

13:50

16:20

  • Goals for 2018
  • The Yacht Club
  • S.M.A.R.T. Goals

18:00

  • Scott's 2018 Goals
  • More videos
  • More Youtube
  • Building a Set
  • Less Overtime

20:35

  • Wes' 2018 Goals
  • Releasing lots and lots of Content
  • CSS Grid
  • VS Code
  • Some ideas around JavaScript and CSS Courses (tweet Wes your feedback)
  • If it's not a Hell Yes, it's a no
  • Double down on what works
  • New Checkout Experience
  • Delegate + Automate
  • Get faster at recording

29:40

  • JavaScript in 2018
  • SSR Frameworks: Next.js, Gatsby, Nuxt.js
  • ParcelJS
  • Tooling is becoming less of a pain in the ass

33:00

  • GraphQL Is Blowin' Upppppp
  • Typed Languages / Typings
  • Flow / Typescript / ReasonML / GraphQL Typings

38:00

  • WordPress' Gutenberg Editor

41:00

  • React Patent's Dropped
  • Vue became really popular

45:30

  • CSS Changes!
  • CSS Grid
  • Firefox CSS Grid Dev Tools

48:50

  • Componentized CSS
  • Design Systems
  • Figma
  • CSS Variables

54:00

  • VS Code became very popular

55:00

  • The Iron Yard shut down

58:00

  • Progressive Web Apps

59:00

  • What do we hope for in 2018?

Sick Picks

Tweet us your tasty treats!

Dec 13, 2017
Failure
01:08:42

Failure. How do you deal with it? How to learn from it? How do you know when you should give up vs keep pushing?

Snipcart — Sponsor

Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!

Get In Shape with DevLifts — Sponsor

DevLifts is how I (Wes) got in shape. After an indepth consultation about your goals, They will create you a personal training and nutrition plan. If you are looking to get in shape in 2018, now is the time to sign up. Use the code SYNTAX for an extra $50 off.

The Show Notes!

01:34

  • Scott and Wes shoot the shit
  • Wes is back from the DotJS conference
  • Wes does a terrible (and hopefully not offensive) French Accent

03:50

  • What's the deal with the #FailFast culture
  • We talk about Fear of Failure and how it can stop you from starting anything at all
  • High Stakes vs Low Stakes Failure

09:20

  • Be aware of how fear of failure manifests itself in your work
  • Just do it, put in the work
  • Pen to Paper

12:20

  • How to deal with mid-project failure
  • Getting sick of a project part way through
  • Finishing Things is such an underrated skill
  • Small wins is key for confidence
  • Take the emotion out of the decisions

18:00

  • MVP - Minimum Viable Product

19:30

  • Do you plan for failure?
  • Wes' Life is Course Correction
  • Wes is Unapologetically Confident
  • Scott is Ignorantly Confident

23:00

  • Another one of Scott's amazing segueways into our Sponsor

26:20

  • Wes' Facebook Ads Failures
  • The cost of admission
  • Own your role in something failing

33:33

  • Eating burnt rice is a huge character trait
  • Pivoting

41:20

Sick Picks

Tweet us your tasty treats!

Dec 06, 2017
What's New in CSS? Variables, Scoping, New Selectors and Color Functions
58:17

Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?

Bug Replay - Sponsor

You need to try out Bug Replay for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster.

Freshbooks - Sponsor

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Show Notes!

03:30

06:24

19:20

28:20

31:00

36:00

  • CSS Level 4 Selectors
  • ITS NOT CSS4!!!!!!
  • css4.rocks

40:00

  • nth-of-selectoed
  • :nth-child(3n of img.dog)
  • div:has(img)

44:00

  • Some not-so-new-but-still-cool units
  • Viewport Units
  • min-height: 100vh
  • ch units
  • ex units
  • CSS Angles - deg(), grad(), rad(), turn()

Sick Picks

Tweet us your tasty treats!

Nov 29, 2017
Fitness, Nutrition, and Losing Weight 💪🏻
01:10:27

Wes and Scott talk about their fitness journey and how it relates to being a web developer in terms of energy, focus and mental clarity.

Get Fit with Dev Lifts — Show Sponsor

Dev Lifts - Thad and JC are on a mission to make web developers healthy.

They are currently offering Personal Training and Nutrition Plans for $149 (Regular $249) and with the code Syntax you'll get an extra $50 off. That's only $99 for the next ~95 people!

The Show Notes

Sick Picks

Tweet us your tasty treats!

Nov 22, 2017
How to get into Speaking At Conferences
01:07:35

Wes talks to Scott about speaking at conferences. What are the benefits of speaking? How do you apply? What talk should you give? What makes a good conference talk?

Freshbooks is the best!

Freshbooks.com/syntax - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Show Notes

  • Snow Tires are supes important
  • Blizzzzaaaaakkksss!!!

Benefits

  • Free travel / accommodations / vacation
  • Fantastic Friendships and Industry Connections
  • Job Opportunities
  • Industry Recognition
  • Renewed Excitement

How do you Apply / Where to Find Conferences

Types of Talks you could give

  1. Lessons Learned Talk
  2. The New Concept Talk (the tasty treats talk)
  3. My Approach to XYZ
  4. The Complicated Concepts Explained
  5. The Super Interesting Deep End Talk

What makes a good talk?

  • Skip the history lesson - hook them
  • Keep your personal bio short
  • Start with a banger ‼️
  • Short Code Examples
  • Short Looping video examples
  • Scott's Origin Story Podcast
  • Make sure your talk works offline
  • Prepare for aspect ratios
  • Plug into the projector before your talk
  • Live that dongle life
  • Show people why they need to know something

Slide Deck Software

Conference Training

  • Training pays well
  • More hands on experience for conf attendees

Getting the Most out of a tech conference

Sick Picks

Tweet us your tasty treats!

Nov 15, 2017
All About CSS Grid
01:04:51

It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox?

  • Save A Bro is selling absolutely hilarious mustache t-shirts for $18 - all proceeds go to support the fight against prostate cancer. Use the coupon code "syntax" at checkout to get free shipping in the US.

The Show Notes

Sick Picks

Tweet us your tasty treats!

Nov 08, 2017
22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More
01:04:54

Buzz Words! WTF Do they mean?! Do They Mean Things?? Let's Find Out!

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Buzz Words

This is the order in which we talk about the different concepts. If you have anything you'd like to add to the next buzz words show, tweet us @SyntaxFM 

  • Serverless / Cloud Functions
  • Composition in functional programming
  • funfunfunction
  • Progressive Enhancement
  • Singleton
  • APIs + SDKs
  • Pure Functions + Side Effects
  • Date-fns
  • Immutable / Mutable / Mutations
  • Immutable.js
  • JavaScript30 Array Cardio
  • Isomorphic / Universal JavaScript
  • Microservices
  • Scoping
  • Closures
  • Model View Controller Pattern
  • Learn Node with a stupid explanation of MVC
  • Bike Shedding
  • Tree Shaking
  • Hoisting
  • ES Next
  • Asynchronous / Synchronous

Sick Picks

Shameless Plugs

Tweet us your tasty treats!

Nov 01, 2017
Tasty Treats — Rems VS Ems, Remote Work, Making Money, Getting good at Design + more! 🍬
01:10:26

Show Notes

  • Q: Rems vs Ems vs Pixels? What do you use?
  • Q: What activity, that isn't developer related, benefits you most as a developer?
  • Becoming a Supple Leopard
  • Q: Is a hot dog a sandwich? 🌭
  • Q If Google offered you a job today, would you take it?
  • Mike Rowe: Why Entrepreneurs Crave the 'Reverse Commute'
  • Q: How did Wes and Scott Meet?
  • Q: What are your thoughts on CMSs, like WordPress, adding JavaScript frameworks, like React?
  • Q: Where do you find remote work?
  • Q: How do you make money?
  • Q: Can a back-end dev become a good designer?
  • Hero Patterns
  • Steve Schoger's Twitter
  • Q: Do you ever feel tired?
  • Q: What do you think about live streaming?
  • Should we do a Syntax live stream?!
  • Q: What stack should a new developer use?
  • Q: What is your process for deciding on new tools?
  • React FAQ - sign up for Tim's newsletter!
  • Q: Where do you see yourself in 5 years?

Sick Picks

Tweet us your tips!

Oct 18, 2017
Advice for New Developers, Imposter Syndrome and Interviewing at Google
01:11:37

Scott and Wes dish out some tasty advice to developers who are new to web development. How do you get better? How do you deal with imposter syndrome?

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Shameless Plugs

Show Notes

This show is light on links :)

Sick Picks

Tweet us your tips!

Oct 11, 2017
Our Stacks Explained 🖥️ 💪
01:19:34

Scott and Wes detail their current stacks that run their training platforms. From front end code linting to the server side and databases.

Intro to The Serverless Framework by Loren Stewart. The first 20 people to use the code SYNTAX_FREE will get the course for free! After that make sure to use the code SYNTAX for an extra $10 off.

Show Notes

Sick Picks

Tweet us your tips!

Shameless Plugs

Oct 04, 2017
The Command Line for Web Developers
01:08:23

This episode is all about how to become comfortable and proficient with the command line. This one includes windows users too!

Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale!

Show Notes

Sick Picks

Tweet us your tips!

Shameless Plugs

Sep 27, 2017
Why is everyone switching to VS Code?
01:08:46

Scott and Wes talk about switching to VS Code. What is so good about it? Killer features? Must have Plugins!

Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale!

Follow us on twitter!

Show Notes

Sick Picks

Shameless Plugs

Sep 20, 2017
Our favourite Productivity Hacks 🔥
01:00:23

Scott and Wes - Do you sleep? How do you get so much done? You replied to me way too fast! We share our best productivity hot tips and the apps we use the GSD.

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Follow us on twitter!

Show Notes

Keyboard Shortcuts You Should Know

Sorry windows users.

  • ⌘ + Tab switch between apps
  • Press q to quit an app from this place
  •  + Backtick to switch between multiple windows of an app
  • ⌘ + T for a new tab
  • ⌘ + Shift + T to reopen a closed tab
  • Crank up Key Repeat in your keyboard setting
  • Option + ←/→ to move word-by-word
  • Add Shift to select those itesm
  • ⌘+option+Arrow to switch tabs
  • ⌘ + Number to go to that tab #
  • Enable tabbing on OSX dialog Boxes
  • Press question mark in any google app to get a list of shortcuts

Sick Picks

Shameless Plugs

Sep 13, 2017
CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)
01:05:57

The most requested syntax episode ever! We break down CSS in JavaScript. Pros/Cons? What is it? What problems does it solve? What libraries should you use? Is it stupid or amazing?

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Follow us on twitter!

Show Notes

Sick Picks

Shameless Plugs

Sep 06, 2017
Dang, that's handy! JavaScript Utility Libraries 🛠️
59:06

Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!"

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

Sick Picks

Shameless Plugs

Twitter

Aug 30, 2017
Wes Bos Origin Story 🎸💼💻🔥🐷
56:37
Aug 23, 2017
Scott Tolinski Origin Story 🎧 📹 💻 🕺
56:05

In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love.

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

Sick Picks

Shameless Plugs

Twitter

 

Aug 16, 2017
Accepting Money on the Internet 💰💸
01:03:38

In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal.

  • Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

Show Notes

Sick Picks

Shameless Plugs

Twitter

Aug 09, 2017
How to Slam Dunk Freelancing 🏀🤑
58:10
Aug 02, 2017
JavaScript Tooling - 004
50:00

Show Notes

Sick Picks

Figma

Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma.

CalDigit TS3 Dock

The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace.

Shameless Plugs

JavaScript30

A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.

React Native for everyone

Twitter

Jul 26, 2017
CSS Preprocessors and Structuring CSS - 003
01:03:16

Show Notes

Sick Picks

Bartender 2

Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar.

Vanilla

Hide menu bar icons on your Mac.

Power Blocks

One set of Power Block replaces racks of dumbbells

Shameless Plugs

JavaScript30

A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.

The Sketch Course & UX Prototyping with Principle Combo

Limited Sale Price: $39.99 $49.99

Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world.

Animate Your Ideas, Design Better Apps

Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.

Twitter

Jul 19, 2017
Webcam and audio access with WebRTC and getUserMedia() - 002
40:59

Show Notes

Sick Picks

Shameless Plugs

JavaScript30

A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.

Level Up Tutorials

Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free video tutorials.

Twitter

Jul 12, 2017
React Tools - 001
50:27
Jul 05, 2017