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.

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

Cofeecup’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.

Cofeecup’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
Syntax 000 - PREVIEW
02:34

Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm

Jun 27, 2017