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
Gatsby vs Next
52:16

In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.

The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.

Show Notes

5:07 - Server Side Rendering

  • Next.js will render on demand — this allows you to have server rendered pages on demand.
    • Think of a blog website — publish a new blog post and it will immediately start working.
    • Authenticated pages can be server rendered, and thus, pre-loaded for better performance.
  • Gatsby runs at build time only — so you need to have all of your data ready at build time.
    • Pro: This makes for very fast page load.
    • Con: Large websites can take a long time to build.
    • Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR.
  • Ease of SSR:
    • Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component.
      • This will probably get easier with Suspense. Demos are simple, but any real application requires harder config.
    • Gatsby is Easy Peeezy!

11:09 - Data

  • Next.js is unopinionated. Like React, it doesn’t care where your data comes from.
    • getInitalProps();
  • Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL.

22:50 - Routing and Creating Pages

  • Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a ?query=string. There are several third-party options for getting around this that require a node server.
  • Gatsby allows you to programmatically create pages with their createPage API.
  • For both navigating between pages, they make a Link Component available.

30:49 - Plugins

  • In Gatsby, everything goes through the Gatsby pipeline. This makes things like image compression, pagination, sass, service workers and many other progressive web app pieces very easy.
  • Gatsby makes building a really good website easy.
  • Gatsby Image is SOOOOO amazing.
  • The scope of Next.js is much smaller. They give you a few things, but you generally bring your own approach for most things
    • Routing
    • Linking and prefetching
    • Dynamic Importing

38:42 - Deploying and Hosting

  • Gatsby is just HTML, CSS, and JS at the end of the day, so it can be deployed almost anywhere — Netlify, Github Pages, cheap PHP hosting, etc.
  • Next.js is a Node app. It can be integrated into an existing Express app, or run by itself. Requires a Node server to run it.
  • Next.js has a static generation option, but you’re better off using Gatsby for that.

44:41 - The verdict?

  • Us Next.js for Apps, Gatsby for Websites

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Feb 20, 2019
Hasty Treat - Better Living Through Side Projects
16:32

In this Hasty Treat, Scott and Wes talk about side projects — what you can learn, why they’re great, how to come up with ideas, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:17 - Why?

  • Keeps you sharp
  • It’s actually useful
  • Try new technology

5:28 - How to come up with ideas

  • What sucks in your life?
  • How do you get a competitive advantage in life?

12:10 - Quick and dirty tech

Tweet us your tasty treats!

Feb 18, 2019
The Smart Home
01:11:33

In this episode, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more!

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.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

2:25 - The tech

  • Wifi devices
  • Zigbee
    • Can operator on low power
    • Usually Cheaper
    • Water Sensor, door sensor, temperature
  • iOS
    • HomeKit sucks
    • You need an Apple TV or iPad to access outside of your house

9:13 - Controlling your smart home

  • Smart Things
  • Home Assistant
    • Host your own
    • Lots of add-ons
    • You need to babysit it
  • Android
    • Google Assistant
  • Google Pixel squeeze to assistant is way better than saying “Hey Google”.
  • Google Home
    • Google Home is awesome
    • Custom sayings with IFTTT
    • Custom via Routines
  • Alexa

23:52 - Software

  • Stringify
  • IFTTT
    • Basic automations
    • Makers accounts
    • Web hooks to trigger actions
  • Homebridge
    • Make non-iOS stuff work with HomeKit
    • Swipe up control is nice

28:15 - Hardware

67:32 - What we want in the future

  • Scott
    • Motion sensors
    • Door sensors
    • Locks
    • Blinds
    • More bulbs
  • Wes
    • Fireplace
    • Constantly recording cameras
    • Sensors galore
      • Windows open
      • Doors open
      • Garage door
    • Zigbee Hub
    • Xiaomi Sensors
      • Gear Best

Links

××× SIIIIICK ××× PIIIICKS ×××

  • Scott: Philips Hue
  • Wes: All the recommendations from above

Shameless Plugs

Tweet us your tasty treats!

Feb 13, 2019
Hasty Treat - How To Email Busy People
23:53

In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive.

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

  • Subject lines

11:26

  • The body

14:33

  • Best practices

Tweet us your tasty treats!

Feb 11, 2019
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
50:11

It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more!

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.

Techmeme Ride Home Podcast

From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player.

Show Notes

1:55

  • Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs?

5:12

  • Q: In web dev, what’s the difference between a freelancer and independent contractor?

9:45

  • Q: Default export vs named export?

11:35

  • Q: I’m looking to change careers, but I’m 41 this year. Is it too late?

16:12

  • Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses?

20:11

  • Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make?

23:52

  • Q: When is a certification needed for both jobs and side-projects?

29:35

  • How do you deal with spammers filling out forms?

34:05

  • Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means.

37:44

  • Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Feb 06, 2019
Hasty Treat - Code Quality Tooling Part 2
13:21

In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way.

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 at https://logrocket.com/syntax.

Show Notes

2:28

  • Typescript and Types

5:42

  • Jest and Testing

7:48

  • Exceptions & Error Tracking

Links

Tweet us your tasty treats!

Feb 04, 2019
The Freelance Client Lifecycle - Part 2
01:02:43

In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between.

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.

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:47 - Design

  • Collect all assets from your client
    • Logo
    • Brand guidelines
    • List of likes and dislikes
  • Create initial look and feel
  • Don’t show client too early—they can be distracted by little unfinished things
  • Back up the “whys” of what you did. Otherwise, it’s just a pretty picture and and the client only thinks about it in terms of taste. Remember, you are the expert they hired, so it’s not totally subjective—you have the expertise and you need to flex that.
    • This button is teal because it’s your call to action—this is the button that makes you money so we want to highlight that
    • Grey text on white background is hard to read—you’ll be leaving people out if you do this.
    • When possible, draw circles or golden ratio lines around everything ;)
  • Be prepared for non-standard feedback
    • E.g. this feels cloudy, can it look more sunny? Please make it pop, etc.
  • Don’t get offended by feedback on creative work
    • Clients didn’t go to art school and don’t know about good feedback.
    • Clients will ignore all finished aspects of a design and only focus on the one minor thing that’s incorrect.
  • Revisions

17:58 - Development

  • Clear requirements make development much easier.
  • Sometimes this starts at the same time or in the process of design.
  • Only show dev progress if client is capable of understanding dev process.
    • Showing a developed site too early can cause clients to worry about visual aspects that aren’t yet in line with the design.
    • Showing to early is also a recipe for a feedback list of things you already know.
  • Give regular progress updates, as previously established. Make it happen on a schedule so expectations are set and so you won’t forget. Stick to your timeline!
  • Clients don’t care about technical jargon.
    • Don’t tell clients about Gatsby/React as much as telling them about the benefits, how fast the site is, etc.

23:48 - Feedback and revisions

  • Feedback is done in revisions or rounds.
  • For smaller projects, have your client email (one email) a list of feedback.
  • For larger projects, and more technical clients, use bug tracking software, such as Github issues, Trello, etc.
  • Write down everything, and then have a follow-up call to discuss the feedback.

30:08 - Deployment

  • Get your client to pay for domains and hosting.
  • Make sure their old website has everything off of it, or host the website somewhere else.
  • If you’re moving servers, best to just point the A records at the new server.
  • If changing nameservers for DNS, make sure the client doesn’t have email or any other apps on that server that will be nuked or broken when moving.
  • Many clients use their server to uploaded PDFs and other files that may still need to be accessible.
  • If you are changing URL structure, you’ll need to be aware of any redirects.
  • Backup strategies
  • Restoration strategies

40:05 - Handoff

  • Create a video detailing how to do each thing
  • Don’t give more options than they need in the back end.
  • Do in-person training when possible.
    • Only teach them the things that are important for their day to day usage.

44:28 - Bug fixes and support

  • Very common for clients with wrong idea of project guidelines to want to add on at the end of a project.
  • Not about adding new, non-established features.
  • Emergency bugs require an emergency response if they are your fault
    • Set expectations and be careful what you promise.

48:03 - What to do when things go to shit

  • There should be a trail of communication leading up to things going awry.
  • Project is behind.
  • Product is not met with acceptance.
  • Client isn’t paying.
  • When to fire your client.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jan 30, 2019
Hasty Treat - Code Quality Tooling
26:11

In this Hasty Treat, Scott and Wes talk about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way.

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:11 - ESLint / JSHint / Linters in general

  • Eslint took over as a flexible solution for code style and quality
  • Use plugins and presets to set your rules for different types of project
  • Don’t be afraid to tweak rules, they are not the word of god

10:55 - Prettier

  • Strictly formatting
  • Can work with or without ESLint
  • Provides an enforceable standard for teams
  • Configurable
  • Prettier for CSS, PHP, GraphQL, etc.

18:46 - VS Code

  • Red underlines like spellcheck for code
  • Tooltip for lint errors
  • Fix on save vs fix on command

Links

Tweet us your tasty treats!

Jan 28, 2019
The Freelance Client Lifecycle - Part 1
53:45

In this episode Scott and Wes talk about the freelance client lifecycle—from gathering requirements, to project hand-off, and everything in between.

Techmeme Ride Home Podcast

From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player.

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 at https://logrocket.com/syntax.

Show Notes

03:29 - Gathering Requirements

  • Probably the most important part of the process. If you botch this, you’ll be dealing with change orders and scope-creep throughout the entire project. Poor planning is why agencies have project managers and why many freelancers hate their clients.
  • Ask lots of questions
  • Get lots of examples
  • Break down each page into functionality
  • Ask about budget
  • Clarify who will be updating the site
  • Do this in person if possible

17:00 - Quote

  • Figuring out the quote
  • Break it down into major functional areas that don’t necessarily depend on each other.
  • Multi-staged quotes are great because if it’s too expensive, the client knows they can add additional features later in the project.
  • Explain the tech you will use in relation to how it will help their business, or how easy it will be for them to manage.
  • Presenting the quote
    • List what will be included
    • List what won’t be included
    • Make your quote valid for two weeks
    • Create a template that looks professional
      • Our agency had a professional template, printed on heavy paper in an embossed folder with our logo on it.
    • You don’t have to go this far, but experience matters. Think Apple. You can quote more if you have a higher perception of quality.

30:20 - Timelines

  • Timelines should include hard dates. You should have a “hard on” and and “hard off”.
  • Assume 24-hour turnaround on questions
  • Be generous with your estimates. Under promise, over deliver.
  • Quoting time is a huge skill

35:58 - Contract

  • You best have one
  • Spell out what the client is getting (from quote)
  • At the very least, have the client sign your quote
  • Clear communication and a good relationship is extremely important
  • Use online templates, or have a lawyer create something specific

41:09 - Setting Expectations

  • Don’t make yourself available 24/7
  • Establish a professional environment by not being too casual
  • Your choices will set the course for your relationship
  • Don’t be too quick to reply to email
  • Schedule emails for 10a.m.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jan 23, 2019
Hasty Treat - Tidying Up Code #MarieKondo
21:20

In this Hasty Treat, Scott and Wes talk about tidying up your code - why it’s important and how it can make your (dev) life better.

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:24 - Removal

  • Unneeded comments
  • Unused CSS
  • Unused Functions

8:06 - Organizing

  • A system that works for you
  • Know when to break things out into a new file, components, functions otherwise
  • Index file works sometimes - other times it’s too much work

11:45 - Tiding Up

  • Refactoring bad/old code
  • Non-ironically, does this code spark joy?
  • Unused Functions
  • Add in comments
  • Folding - use a code formatter
  • CSS

Links

Tweet us your tasty treats!

Jan 21, 2019
Tips for Work Life Balance
44:38

In this episode Scott and Wes talk about work life balance. These tips aren’t hard-and-fast - part of the beauty of being a web developer is that you do get to enjoy some flexibility. Work is a big part of our live and these are tips that will hopefully allow you to get the most enjoyment out of both work and life.

 

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.

 

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

8:06 - Know when you work best

  • The 9-5 isn’t for everyone - you know when you work best, so use that to your advantage

9:39 - Work when it’s time to work, life when it’s time to life

  • Don’t do laundry during work time

11:08 - Make it clear to family members when you are working

  • Wishy-washy in-between can cause tension - are you working? Can I interrupt you?
  • Working after hours
  • Text if you need me

14:34 - Have a defined space for work

  • If I bring my laptop downstairs, I don’t bring a charger
  • Clean yo nasty desk space
  • It’s a mental shift when you sit down - “okay now I am working”

21:14 - Know how to “zone it”

  • Headphones
    • Music or podcasts
  • Block all distractions
  • Close email
  • Pay attention to what gets you there, when it stops working, change it up

24:46 - Keep hobbies

  • Away from screens
  • Physical or relaxing or both

26:37 - Exercise

  • Good for mind and body
  • Huge gains long term and short term

27:31 - Prioritize your to-do list

  • One reason many people over-work is that they feel they have too much to do
  • Add items to your to-do list when they pop into your head - out of your head, into your system

31:28 - Walk away from difficult problems

  • Your brain will chew on problems as time goes on and help you solve them
  • Literally take a walk outside

34:04 - Meetups, conferences or tutorials

  • Reinvigorate your hunger for coding and make you happier both at home and work
  • Easy to get burned out from working too much (or not paying enough attention to your work)

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jan 16, 2019
Hasty Treat - CSS Grid Level 2 aka Subgrid
15:08

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 2 - aka subgrid.

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:27 - CSS Grid Level 2 and subgrid

  • CSS subgrid will allow you to place grid-items’ children along the same lines at the parent grid

5:40 - How it works - Why do we need it? What problem do we have right now?

  1. Create your grid as normal - you can create columns, rows, named lines, etc.
  2. Your grid-item will also be display grid - this is nothing new - just regular nesting of grid
  3. The magic comes in when you want to define the rows and or columns of the sub-item. You can inherit the parent item’s grid-rows / columns by simply saying display: subgrid

11:19 - Browser support

  • It’s about a year out

Links

Tweet us your tasty treats!

Jan 14, 2019
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
51:31

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more!

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! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off.

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

1:40

  • Where is the best place to start with JS coming from WordPress?

5:36

  • How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?

17:13

  • What new skills, frameworks, projects are you look forward to learning in 2019?

21:35

  • Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?

28:24

  • What’s your best tip for young coders to stay productive and not lose time?

32:08

  • I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?

37:26

  • What is React Native? How do people tend to use it? If you want a native and web app, do they share code?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jan 10, 2019
Hasty Treat - CSS Units
24:10

In this Hasty Treat, Scott and Wes talk about CSS units (e.g. rems vs ems, px, ch, vmax), when and why you want to be using them, tips and tricks, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

2:32

  • Typography with CSS units

12:04

  • Pixels

15:17

  • Viewport units

15:51

  • ch units

16:35

  • inch/cm for print

17:19

  • Percentages

18:10

  • Media queries

19:41

  • Flexbox (flex-grow)

20:28

  • CSS Grid: flexible units: 1fr 2fr

Links

Tweet us your tasty treats!

Jan 07, 2019
A Look Forward to 2019
01:00:06

In this episode Wes and Scott take a look back at 2018 as well as a look forward to what’s coming in 2019.

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

CSS In Depth and In Motion - Sponsor

Electron in Action from Manning Publications guides you, step-by-step, as you learn to build cross-platform desktop applications that run on Windows, OSX, and Linux. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.

Show Notes

3:00 - What was hot in 2018?

  • Tooling got easier
  • GraphQL got easier and more accessible
  • New GraphQL companies left and right
  • CSS has gotten more awesome
  • React
  • Improvement in React Dev Tools
  • JavaScript frameworks overall
  • Edge adopting Chrome engine
  • Microsoft bought Github
  • Vue continues to impress and evolve
  • VS Code continued to get amazing

31:29 - Predictions for 2019

  • Headless CMS game is going to get really real
  • We’re gonna see rails for JavaScript start making some noise
  • React will continue to see growth
  • Design tools will get more code-y (Figma, etc.)
  • VueJS will continue to see growth
  • Developer Experience Tools will continue to get easier
  • Wasm
  • Code splitting easier
  • ES6 Modules in Node
  • Server Side Hot reloading

41:00 - Scott’s Year in Review

  • Released 12 courses
  • Major growth in Level Up as a platform
  • Hired first employees to work and grow site
  • Greatly improved quality and video production
  • Gave first conf talks and spoke internationally

44:03 - Wes’ Year in Review

  • Released two courses - CSS Grid and Advanced React
  • Started work on JavaScript course
  • Delegated lots of development to contractor
  • Continued to work well with assistant
  • Spoke at lots of confs
  • Live Syntax!
  • Grew Instagram
  • Continued hot tips on twitter

47:00 - BIG ANNOUNCEMENT

  • We’re both having babies!

48:09 - Wes’ Goals for 2019

  • Keep doing what I’m doing!
  • New Website!
  • JavaScript course
  • Platform upgrades - been in the works for months - working on a faster rollout
  • CSS course? VS Code course? More React?
  • 8 YouTube Videos
  • Instagram to 30k
  • Parental Leave

52:26 - Scott’s Goals for 2019

  • Courses
  • First non-Scott LUT courses (big plans / announcements here )
  • Parental Leave
  • Major platform updates that are stuck in bottleneck
  • More hires, more growth
  • More free content
  • More teaching from real world code
  • Codebase to Hooks & Suspense

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jan 02, 2019
Hasty Treat - CSS and JS Pointer Events
21:08

In this Hasty Treat, Scott and Wes talk about pointer events in CSS and JS - what they are, their differences, why you may want to use them, potential downfalls and more!

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

  • CSS pointer events

10:50

  • JavaScript pointer events

14:24

  • What are pointer events

17:56

  • Browser support

Links

Tweet us your tasty treats!

Dec 31, 2018
CSS Layout
53:36

In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for 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”.

CSS In Depth and In Motion - Sponsor

CSS in Depth in Motion from Manning Publications is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.

Show Notes

4:15

  • When to use position fixed/static/absolute/relative/sticky

15:18

  • When to use height, width, max-height, max-width, top, bottom, left, right, etc.

21:28

  • What about relationships between containers and their children?

27:37

  • What about positioning behaviors of elements like