Bra podcast

Sveriges 100 mest populära podcasts

Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

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

Prenumerera

iTunes / Overcast / RSS

Webbplats

syntax.fm

Avsnitt

Debugging Tools + Tips

In this episode of Syntax, Scott and Wes talk about debugging ? tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the ?How did you hear about us?? section.

Show Notes

1:41 - Tools

CLDD - console.log driven development How To Pause Your Code With Breakpoints In Chrome DevTools Other types of break points XHR DOM break on attribute change DOM break on children Conditional break Break on exception Break on event listener

21:49 - Network requests

Doesn?t take place in your site/dom, so might not always have all info in your console, debugger Network tab in dev tools shows you all requests going in and out of your app Filters by type, sees length in request Sees headers, responses and more Failed requests will be red

26:50 - Debugging mindset

Check different browsers Check the docs/examples Isolate when possible ?What has changed?? Get minimal working code Rubber Duck Debug Step back and re-think Links Debugging Visual Studio Code (Node) - James Q Quick CodePen Spencer Carli?s Youtube ××× SIIIIICK ××× PIIIICKS ××× Wes: DeWALT Lawn Mower Scott: Cold Brew Coffee Maker Shameless Plugs Wes? Courses - Use the coupon code ?Syntax? for $10 off! Level 2 React Native with GraphQL Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-06-12
Länk till avsnitt

Hasty Treat - Std Lib in JavaScript

In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal ? what it is, how it could influence dev, and what they?d like to see.

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

1:38 - What is a Standard Lib?

Still experimental Built-in modules don?t have to be downloaded because they ship with the browser Not exposing built-in modules globally has a lot of advantages: They won?t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker) They won?t consume any memory or CPU unless they?re actually imported They don?t run the risk of naming collisions with other variables defined in your code

6:47 - Key Value Storage is the first one:

KV Storage: the Web?s First Built-in Module

8:36 - What do we want to see?

Deep clone Basically all of Lodash util.isDeepScrictEqual Async json.parse() / json.stringify UUID URL Lib for building and parsing URLs Missing Array Methods Most of underscore JS

15:53 - International

Currency Formatting Lists DateTimeFormat RelativeTimeFormat Links JavaScript Standard Library Proposal Add remaining Underscore / Lodash features JavaScript standard library contents Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-06-10
Länk till avsnitt

Gatsby Themes

In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It?s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbook and put SYNTAX in the ?How did you hear about us?? section.

Show Notes

2:18 - Jason Lengstorf - What do you do?

9:37 - Gatsby refresher

Gatsby is statically generated gatsby-config.js file determines which plugins you use gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages gatsby-browser.js contains code that should hook into browser events

13:54 - Gatsby themes

Layouts in Gatsby are done the same way in React - simply create a component with children How is this different than a plugin? Is it a collection of plugins? How do you share themes? Can they include functionality (plugins?) Like Markdown rendering? What about a theme that needs a UI once activated? What about custom fields for Gatsby? Do you foresee a marketplace like WordPress themes? Are there some themes already out there? What will come for themes soon?

34:07 - Questions about Gatsby

What do you think about WordPress? E-commerce? How do you make money? Suggested way of doing dynamic things What is the future of Gatsby? Links Gatsby Jason Lengstorf Livestream Progressive Disclosure of Complexity Gatsby Themes Sanity Gatsby + Sanity.io Snipcart Axios Algolia Netlify Airtable Hope in Source - Henry Zhiu ××× SIIIIICK ××× PIIIICKS ××× Jason: Kamado Joe Grill Scott: Zojirushi Hybrid Water Boiler and Warmer Wes: Waterproof Digital Instant Read Meat Thermometer Shameless Plugs Jason?s Weekly Live stream Scott?s Courses Wes? Courses - Use the coupon code ?Syntax? for $10 off! Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-06-05
Länk till avsnitt

Hasty Treat - Workshops

In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices!

Sentry - Sponsor

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

Show Notes

3:00 - Types of workshops

Public Private

4:29 - Choosing a topic

Create original content Create custom content for companies

5:55 - Building content

Choose seven to eight different little things ES6 Progressive web apps Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application Gatsby website React Beer application React Notes Application Process: Build the app Rewind back to starter files Build it again while writing notes Follow your own notes to see if it makes sense

13:25 - General information

How long should it be? Fixed price vs split cost How many people?

16:46 - Other Tips:

Break away from your app and show other apps using - gives better context Stop often and ask if anyone needs help Give large breaks Give challenges for those who need more to do Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-06-03
Länk till avsnitt

Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation and more!

Sentry - Sponsor

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

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at Sanity. Get an awesome supercharged free developer plan on Sanity.

Show Notes

3:23 - Q: How big is too big for state? I have an object of around 1000 items which will be used in a search box on the frontend of my site, but the list of items won?t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven?t thought of?

7:17 - Q: How much do I need to know before I start applying for dev jobs?

9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we?ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there?s any best practices for this or ways we can improve our setup.

13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer?

14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you.

20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you?re more comfortable and have used React and Vue more often, so they?re largely at the center of any framework discussions?

22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app?

29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale application? I guess what my question really boils down to is, for a freelancer, I understand that I need to have my hands in a lot of different tech stacks, but should I really dive in on PHP (or something else) to handle some of these simpler features a client might need?

33:24 - Q: What do you guys think about Svelte? Before everything goes WASM will Svelte be the future of web programming?

37:24 - Q: What smart phones and laptops do you use for work? (specific model and why)

42:38 - Q: Should I apply for other jobs even if my contract might get renewed? Should I feel loyal to a company?

××× SIIIIICK ××× PIIIICKS ××× Scott: DaVinci Resolve 16 Wes: Affinity Photo Shameless Plugs Wes: Wes? Courses ? use coupon code ?syntax? at checkout and get and extra $10 off. Scott: Scott?s Crouses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-29
Länk till avsnitt

Hasty Treat - Knowing Your Weaknesses

In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses.

Logrocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It?s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Show Notes

2:45 - Why care about weaknesses?

If we avoid the things we?re afraid of or bad at we?ll always grow in lopsided ways

7:32 - As a developer

What skills / languages are you not good at or afraid of?

14:06 - As an employee

Communication Company and personal goals Efficiency Compatibility

16:54 - As a human

How you treat people Sharing your time What you?re neglecting Your living space Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-27
Länk till avsnitt

CSS the ??? Cool Parts

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS 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?.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:28 - Clip path

6:35 - Filters

16:24 - Background mix blend mode

21:47 - Border images

25:46 - Multiple background images

27:47 - Multiple background gradients

28:25 - Radial gradients

29:06 - Multiple box-shadows

34:30 - HEX + Alpha

40:41 - Viewport units

42:17 - Calc

44:32 - CSS variables

47:44 - Text decoration

Links Can I use Clippy - CSS clip generator CSS Filters Tweet: Using mix-blend-mode:multiply CSS blend mode generator Lea Verou Codepen - Scott?s digital text animations Steve Schoger Mother-effing HSL Diana Adrianne ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar string lights Wes: Digital Calipers Shameless Plugs Wes: Wes? Courses ? use coupon code ?syntax? at checkout and get and extra $10 off. Scott: Animating React Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-22
Länk till avsnitt

Hasty Treat - AMA - Our Wives, Careers Outside Tech, and Favorites

In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more!

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.

Show Notes

2:58 - What do your wives do?

6:40 - If you had to choose a different career, what would you do?

If you started learning another (programming) language today, what would it be?

11:50 - Favorites (e.g. colors, movies, brands, etc.)

18:08 - Who inspires you?

26:19 - What?s your ratio of client work, learning new tech, and teaching via your courses, talks or Syntax.fm? You guys seem awfully busy, and it?s making me feel kinda lazy.

Links Pigeonhole Live Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-20
Länk till avsnitt

Side Hustles with Courtland Allen from Indie Hackers

In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, and more.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It?s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the ?How did you hear about us?? section.

Show Notes

1:05 - What?s the back story behind Indie Hackers?

5:30 - What is a side hustle?

11:21 - How do you validate your idea?

13:15 - What are some different types of side hustles?

31:55 - What about people who don?t like marketing?

33:57 - What are some important pieces of side hustles?

39:04 - How do you sell a business?

42:40 - Listener Questions:

Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment? Q: Should you frame yourself as a one-man-band or as a company? Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview? Links Carrd Balsamiq Mockups Flickity Nomad List Evan You Evan You Patreon Park.io Making $125,000 a Month as a Solo Founder with Mike Carson of Park.io Patreon Drift Stripe ××× SIIIIICK ××× PIIIICKS ××× Courtland: Post-it Notes and Poor Charlie?s Almanack: The Wit and Wisdom of Charles T. Munger Scott: Akimbo Wes: Elastic Wallet Shameless Plugs Courtland: IndieHackers Podcast Scott: Animating React Wes: CSS Grid Course Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-15
Länk till avsnitt

Hasty Treat - The SHADOW DOM

In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they?re important, and how to get started using them.

Sentry - Sponsor

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

Show Notes

2:41

What is the shadow DOM?

4:25

What elements are shadow DOM?

5:47

Styling shadow DOM elements

8:54

Creating your own

9:22

Frameworks Links Using shadow DOM Shadow DOM v1: Self-Contained Web Components Polymer Svelte 3 Wildhoney - ReactShadow Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-13
Länk till avsnitt

Travis Neilson on Skills Gap, Design, Focus and Working at Google

In this episode of Syntax, Scott and Wes talk to Travis Neilson about his career at Google, the challenges he faced, how to choose projects tips for devs wanting to get better at design, and more.

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.

Sanity - Sponsor

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

Show Notes

2:43 - Career path

On ambitions and where it all started

23:15 - Being all in

On how to choose your next project

33:31 - Working at Google

On the day-to-day at Google, the challenges of a big team, and constraints

43:23 - Design tips for developers

Advice for devs who want to get better at design but are struggling Thoughts on CSS frameworks The one thing devs often get wrong about design Links Travis Neilson?s Website Travis Neilson?s Podcasts Helvetica ? Gary Hustwit How one typeface took over movie posters Just My Type: A Book About Fonts Work-Life Balance is a Joke ××× SIIIIICK ××× PIIIICKS ××× Travis: Cults and Extreme Belief and Google Method Podcast Scott: Sony Noise Canceling Headphones WH1000XM3 Wes: Little People Big Dreams Book Series Shameless Plugs Wes? Courses & Wes? Youtube Animating React How to Use Adobe XD Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-08
Länk till avsnitt

Hasty Treat - Async + Await Error Handling Strategies

In this Hasty Treat, Scott and Wes discuss different error handling strategies.

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:07 - Try / Catch

This can be done at call time or inside the function

4:10 - Higher Order Function

Makes a function that returns a new function which in turn calls your original function (but with a .catch chained on)

7:46 - Handle the error when you call it

Use async/await but chain a .catch onto the end

9:03 - Node.js Unhandled Rejection Event

process.on('unhandledRejectionEvent', callback)

9:40 - What do do with those errors

Send to error tracking service Possible to give the user a reference number Display good error text to user Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-06
Länk till avsnitt

Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!

It?s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, 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?.

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

Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO?

7:08

Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough?

11:19

Q: Should I worry about the critical vulnerabilities when installing an NPM package?

15:06

Q: I?ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors?

20:19

Q: Any SICK TIPS on career change? I?m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn?t enough to apply for jobs.

20:49

Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)?

30:39

Q: Should I learn Fullstack JS or JAMstack for freelancing?

35:34

Q: Is front-end development dying?

37:30

Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/selectors like a [CSS] grid container and a grid child (think grid-area)? CSS-in-JS feels very verbose for this use case.

42:07

Q: Scott always talks about Meteor. I thinks its really cool too. What?s the future of it and why didn?t it take off? It seems to have slowed down. They seem to have moved on to other projects like GraphQL stuff. Links Influx WebVR WebXR Google Maps will use a core Waze feature to improve public transit ××× SIIIIICK ××× PIIIICKS ××× Scott: The Making of a Manager Wes: DeWalt Oscillating Tool Shameless Plugs Wes: Wes? Courses ? use coupon code ?syntax? at checkout and get and extra $10 off. Scott: Animating React Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-05-01
Länk till avsnitt

Hasty Treat - AMA - Money x Investments x Online Presence x More!

In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence and more!

LogRocket - Sponsor

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

Show Notes

2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)?

9:03 - How do I build my online presence?

13:05 - What?s your favorite tasty treat (as in actual food)?

16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 ? whats up with that?

18:41 - How do you get out of a rut?

Links Canadian Couch Potato Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-29
Länk till avsnitt

What?s New in Web Development

In this episode of Syntax, Scott and Wes talk about what?s new in web development: new promise static methods, new CSS functions, PWAs 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?.

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.

Show Notes

5:38 - New Promise static methods

Promise.all Promise.race() Promise.allSettled() Promise.any()

10:16 - Lazy loading images

Addy Osmani?s Lazy-Loading blog post

14:25 CSS Houdini aka JS in CSS

CSS Houdini Experiments

20:32 - Subgrid

Syntax 109: Hasty Treat - CSS Grid Level 2 aka Subgrid Subgrid is coming to Firefox - Jen Simmons Bugzilla

24:31 - Native modules in browser

type="module" dynamic import()

27:08 - Node Native Modules update

package.json will now have a type entry where NodeJS - Plan For New Modules Implementation New ESM Implementation

29:17 - PWA install app and Google PlayStore

Already shipped in Chrome Java API that communicates through services with Chrome Trusted Web Activity aka TWA All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite Passing the PWA Criteria Performance Score with a minimum of 80/100, tested with Lighthouse All current Google Play Store rules

35:49 - CSS Scroll Snap

In many browsers already scroll-padding

38:17 - Aspect Ratio Unit

Designing An Aspect Ratio Unit For CSS

39:32 - CSS nesting

Disallows cross-domain cookies unless on the same domain/subdomain Links Gatsby Promise.allSettled() Promise.any() Apollo CodePen UC Browser Parcel Node.js Myles Borins? Twitter Twitter Lite Google Maps Go Instagram Lite Lighthouse Opera Can I Use - modules Apple?s ITP ××× SIIIIICK ××× PIIIICKS ××× Scott: Finding Drago Wes: The Punk Rock MBA Shameless Plugs Scott?s Gridsome Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-24
Länk till avsnitt

Hasty Treat - CSS Frameworks

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they?re important, and when (and when not) to use them.

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:52 - What is a CSS framework?

Pre-written CSS that takes over the basic styling of your app Can include just utilities or lots of styles (minimal to overboard) Twitter Bootstrap and Zurb Foundation were the pioneers Follow different CSS styles from ?functional CSS? to utility-first to BEM

7:33 - Functional (aka Utility) based

Tachyons Tailwind

9:59 - Preprocessor based

Bootstrap

11:33 - Styled Components based

Rebass Styled Systems Facepaint

15:50 - Why use one?

Makes styling FAST Makes hard things easy Some, like Bootstrap, have themes Keeps your own CSS minimal and organized Built on an established system Lots of people use the same CSS

19:22 - Why not use one?

CSS class hell Stops you from learning how CSS works Size (not all have this problem) Brotli, Purify CSS You will be overriding a ton of it You like exclusively writing the code you need and nothing else Links Jamstack Gatsby Hugo Jekyll Bootstrap Foundation Tailwind CSS Tachyons Styled System REBASS Facepaint Brotli Purify CSS Cloudflare Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-22
Länk till avsnitt

9 Ways to Stay Sane While Working Remotely

In this episode of Syntax, Scott and Wes talk about working remotely ? problems, challenges, and how to keep yourself sane, productive and efficient.

LogRocket - Sponsor

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

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the ?How did you hear about us?? section.

Show Notes

4:34 - Find your spots

Coffee shops Cafes Library

7:40 - Deal with Distractions

Log out of Twitter/Facebook/Instagram Delete Apps ? only use the browser Put phone and computer on ?do not disturb? Focus App

11:33 - Prioritize your tasks

Drifting is possible when it isn?t clear what you need to do If you don?t have someone telling you what to do, it can be hard to get started Todo lists

17:15 - Make time to be social

Go to meet ups Chat in Slack or Discord rooms Talk to people at work spaces

21:48 - Get fresh air

Go for a walk Open the windows

24:03 - Get moving

Hit the gym Do push-ups in your office

28:09 - Have a separate work space

Designated office Don?t work from the couch with the TV on Clean your damn office ?

38:16 - Act like you are going to work

Dress well Fix up, look sharp - get yourself ready to go

40:44 - Take Breaks (not too many, not too long)

Some people like the Pomodoro Technique Take a lunch break away from your computer Don?t make a break longer than 15 minutes or so Links Focus Discord Todoist Getting Things Done Eat That Frog The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing ××× SIIIIICK ××× PIIIICKS ××× Scott: Doug DeMuro?s YouTube Channel Wes: Yeti Rambler 14 oz. Shameless Plugs Scott?s Gridsome Course Wes? YouTube Channel Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-17
Länk till avsnitt

Hasty Treat - Cranky Developers

In this Hasty Treat, Scott and Wes talk about cranky developers ? those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a ?fad? or unnecessary.

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:20 - How to deal with cranky devs

Many experienced developers prefer older, stable technology for a reason. They have been through it before.

7:14 - Questions to ask when considering new tech:

Is it better for the product? Is it better for the users? Is it better for the business? Is it better for the developer?

16:39 - How to convince them:

Proof of concept - show them it?s better.

18:28 - Things to acknowledge:

There are risks in changing technologies. There are costs - training, tooling, hosting.

21:20 - Some people are not interested in improving themselves

They got the job they want and are short sighted about the future. You can appeal to management about making progressive choices. If management isn?t interested, you should look for a new job. Links Sass Backbone Babel Gulp Babel ES6 React for Beginners Missive Swix React Flux Glamorous PayPal GraphCool Facebook Netflix MJML Juice Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-15
Länk till avsnitt

Syntax Live React Edition

It?s another live episode of Syntax in which Wes and Scott do Hook?d on Hooks, Who?s Snackin? on React, Stump?d, Unpopular Opinions, Q & Eh, 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?.

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

6:54 - Who?s Snackin? On React

Guess which of these websites have their homepage partially or fully built in React?

EltonJohn.com or ArianaGrande.com? Ferrari.com or Lamborghini.com? Starbucks.com or Dunkindonuts.com? WayFair.com or Ikea.com? Walgreens.com or Cvs.com?

10:55 - Hook?d on Hooks

Wes:

useSocket useStaticQuery (gatsby) useKeyPress

Scott

useLocalStorage useClickOutside useMeasure useGesture

17:47 - This, That, Both, or Neither?

Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90?s budget TV show about Cyborgs who read? Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland? Easy Peasy: A React state library, or children?s spoon set? Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children? Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear? Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV? Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company? Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API?

26:22 - Tag Team Coding React

Fetch Data from the data jokes API Show a loading indicator Have a button to fetch a new joke

36:24 - Stump?d

What is a react PureComponent for? Why might you use a callback with setState? How would you reverse an array without mutating the original array? Can you explain what a ?downtown job? is? When would you use useReducer? What makes useLayoutEffect different from useEffect? What propType would you use for an object that contains a number and a string

43:11 - Unpopular Opinions. Overrated, Underrated?

Our own unpopular opinions Scott: React devs like to make things harder than they need to be. Dan Abramov Ryan Florence Sebastian Markbage Jared Palmer Sean Thomas Larkin Sergey Ryzhov Sophie Alpert Parker McMullin Vue does it better _____

52:45 - Q + EH with Wes and Scott

What where the first apps you worked on? What React problem stumped you for the longest time? What?s your most expensive mistake? Do we need classes in Javascript? How do you explain what you do to your mom? How do you explain React? What made you start wanting to code? What?s the hackiest thing you?ve ever done? Where do you see yourselves in 10 years? Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-10
Länk till avsnitt

Hasty Treat - Tips For A Good Portfolio

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways.

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:21 - Include screenshots (or don?t). Often clients can ruin a site after you hand it off.

6:19 - Include list of technologies used

7:25 - Include list of problems solved

7:48 - Use company logos (if allowed)

9:13 - Show mockups on modern laptops/phones

10:04 - Show your work (mockups, sketches, layouts, etc.)

11:39 - Keep it updated

12:10 - You don?t need a million examples ? max out somewhere around five. People just need a few quick examples of the type of stuff you work on.

14:11 - What about using side projects and tutorials?

16:28 - Dribbble, Github and Instagram are all valid portfolio options as well ? often that is the first place people look. Don?t ignore these.

A hot stuff profile on any of these will make you more hireable. Make sure it?s creative and looks nice. Links Wordpress Google Ford Air Canada Dribbble Github Instagram Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-08
Länk till avsnitt

Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!

It?s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, 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?.

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

Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)?

5:12

Q: Do you have any suggestions for picking a headless CMS?

8:55

Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search?

15:13

Q: How much importance would you place in the design of a resume? Is it worth the cost?

21:09

Q: With the new React Hooks and Context API, do we still need Redux?

25:37

Q: If either of you could change anything about your personal tech stack, what would it be and why?

29:07

Q: Do you prefer to use React?s defaultProps or plain JS default function parameters to give your component?s props some default values?

30:44

Q: You guys chat CMS sometimes - why no love for Umbraco?

35:53

Q: I?m ready for a new challenge, how do I break this to my employer?

38:16

Q: What?s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }? Links Udacity Coursera Contentful Ghost Prismic Strapi HeadlessCMS Sanity WordPress Drupal ××× SIIIIICK ××× PIIIICKS ××× Scott: J.A. Henckels International 10-piece Capri Granitium Nonstick Cookware Set Wes: IRWIN VISE-GRIP 2078300 Self-Adjusting Wire Stripper, 8" Shameless Plugs Scott?s Gridsome Series Wes? YouTube Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-03
Länk till avsnitt

Hasty Treat - Bike Shedding

In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run.

LogRocket - Sponsor

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

Show Notes

3:03 - What is Bike Shedding?

Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished.

4:39 - Tabs vs spaces

Two spaces

5:50 - Single vs double quotes

Single in JS, double in HTML

7:05 - Semicolons or not

Semicolons

9:01 - Grouping/ordering CSS properties

Wes: Format Scott: Alphabetical

12:35 - var vs let vs const

Scott: const for life ? let when needed Wes: const by default ? change to let when needed

14:24 - Default vs named exports

Use both Mix-n-match

15:58 - Should designers code?

If interested, sure

17:58 - Which front-end framework

Whichever one best suits your needs

19:30 - Vim/Emacs vs Atom/VS Code/Sublime

VS Code

21:53 - Small perf wins

Micro optimization often aren?t needed

25:14 - Browser support

If you?re required to support it, then support it

25:47 - Block formatting

Function block Else on a new line vs else after block

29:07 - Trailing comma

Links Law of Triviality React Vue.js AngularJS Ember.js Vim Emacs Atom Sublime VS Code Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-04-01
Länk till avsnitt

The VueJS Show (Scott teaches Wes)

In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it.

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

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free.

Show Notes

2:22 - What?s the deal with VueJS?

Combines ideas from Angular 1, React and Blaze Ease of Angular 1 App structure of React

8:02 - Components

Template syntax is similar to handlebars

aka {{stuff}}

v-bind:property

v-bind:property or simply :bind allows you to dynamically bind a value to a property

Props

Props must be declared before they can be used in a template.

Script tag

Where imports happen Where props are defined, computed properties, action events and lifecycle

Actions

v-on:click="doSomething" @click="doSomething" These will run a doSomething event defined in your script export via methods

Lifecycle

How does data fetching work?

CSS

Can be scoped to file by adding  to your property

Global Registration

You can register a global component and not have to import it

36:38 - Features

CLI

Easy to use when creating new projects

Animations

Baked in to core A transition component wraps your code and just have a v-if on the element you are transitioning There is also more intense javascript options via v-on

Routing

1st party router vue-router with support for 3rd party routers

Global State

Vuex

45:57 - Ecosystem

Nuxt ? AKA Next.js for Vue Gridsome ? AKA Gatsby for Vue Native? Links Angular React Blaze What Hooks Mean for Vue Nuxt.js Next.js Gridsome Gatsy NativeScript Vue Native ××× SIIIIICK ××× PIIIICKS ××× Wes: Modified Power Wheels Scott: Ezy Jeans by Uniqlo Shameless Plugs Wes: Node.js and React Scraper Tutorial Scott: Static Vue with Gridsome Coming Soon! Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-27
Länk till avsnitt

Hasty Treat - Why Use a Frontend Framework at All?

In this Hasty Treat, Scott and Wes talk about frontend frameworks ? what they are, when you need one, how to organize your code for maximum efficiency, and more!

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

3:08 - What is a frontend framework?

JavaScript based Controls applications such as: Routing Rendering Data Fetching Examples: React Angular VueJS Ember Backbone Svelte

5:54 - When to use a frontend framework

The Link between your JavaScript data and the DOM (your HTML) isn?t live The use of frameworks makes re-updating the DOM (after the initial variable update) easy You need an opinionated way to handle complexity Example: You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the ?Add to cart? button Event Handlers - binding and un-binding Your client wants a fast, modern experience Seamless routing and page transitions Fast prototyping Access to battle-tested libraries Security Perf

14:24 - When not to use a frontend framework

When using CMS like WordPress and Drupal A medium amount of JavaScript is needed - Vanilla JS will work fine Modals Slideshows Form submits Static pages, no JS functionality Updating an existing project

17:20 - Why can?t I just use jQuery?

Vanilla JS contains all of jQuery?s available DOM APIs Frameworks provide structure Organizes code for big projects Links Syntax 039: Is jQuery Dead? Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-25
Länk till avsnitt

How To Find Freelance Clients

In this episode Wes and Scott talk about how to find freelance clients ? tangible things you can do to position yourself and set yourself up for success.

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.

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

1:27 - Question from Andreas Trattner: I am a backend developer with 4+ years experience working on large systems in Europe and am considering moving toward freelancing/contracting. However, I find it difficult to discover quality opportunities. Any tips you can share on how to strategically get projects?

There isn?t a secret trove of work, and there?s no one way to do it.

4:50 - Relationships

Trust and relationships rule all. The best paying gigs are never advertised. Who should you know? Other developers How? Meetups, Conferences, Twitter, Slack rooms, Friends Tip: Volunteering is a great way to get in to conferences, plus you often get to know people Tip: If you are friends of a friend who gets a lot of work, as for a introduction Designers and marketers You usually work together How? Twitter, Email, Dribbble, Instagram Project managers How? Cold emails, tweets Office managers Life blood of the office - they know everyone Often move into other roles How? Meetups, previous employees Entrepreneurs Lots of connections, often switching gears How? Demo camps, Facebook marketing groups Venture capitalists Have dozens of companies and tons of connections How? Demo camps, introductions, cold email

19:08 - Display of expertise

It certainly is an option to just be really freaking good at what you do Speaking at conferences and local meetups Working on open source Helping in chat rooms Posting guides Maintaining docs Offering reviews / Make things public Performance - Harry Roberts from CSS Wizardry Accessibility - HeydonWorks WordPress speed React checking Start a podcast Blogging Volunteering

9:22 - Visibility

You need to let everyone know what you do. Your mom?s uncle?s friend?s cousin on Facebook might casually ask for recommendations. Instagram / Photos. Showing people what you are doing and what you are working on will make a mental note in their head that you do that type of work. Facebook / Twitter / Instagram Blogging This makes the ?vetting? process much easier Tweeting YouTube videos Slack channels you are involved in

38:02 - Other tactics

SEO - Locality (Toronto designer), specific technologies (Redux contractor) Craigslist This one sucks, but it can lead to decent work occasionally You need to be more vigilant in screening, most clients will suck Cold asks - Just ask people what works well ?Hey, I?m looking to book a few contracts starting June 2019. I love working with ______ and you can see my work here? Put a phone number on your website. Seriously. UpWork Won?t make as much money here because of competition Local business listings Find online and offline biz listings Old fashioned ? putting your card on bulletin boards

47:29 - Maintaining Relationships

Check in every few months with non-biz related contact But also just straight up ask for work Christmas / Thank-you gifts Links Canadian Couch Potato ××× SIIIIICK ××× PIIIICKS ××× Scott: Google Drive Scanner Wes: Endy Mattress Shameless Plugs Scott?s React Hooks For Everyone Wes? All Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-20
Länk till avsnitt

Hasty Treat - React Suspense

In this Hasty Treat, Scott and Wes talk about React Suspense ? what it is, how it works, support 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

Not live yet - it may/will change. Be warned!

3:59 - The problem we have with React right now

API calls Image loading Code splitting

7:16 - What is React Suspense?

First we convert our async data fetching functions into resources Resources can then be read inside render - above the return Resources can be read from cache Resources can be preloaded into a cache if you anticipate needing them Resources reads are blocking for that function - you can?t return JSX until the resource is read In your component that fetches data, there is no need to maintain a loading state Then, anywhere higher up in that tree, you can introduce a suspense component The suspense component can detect if any of it?s children are currently loading data If they are, we can then choose to show a loader via the fallback prop We can also choose to show nothing via the maxDelay prop ? this is helpful for fast connections that shouldn?t see the spinner for a short split-second

15:20 - Support

React.lazy and suspense for code splitting is already here The React.lazy function lets you render a dynamic import as a regular component Loadable Components is recommended if you need splitting with SSR Data Resources is not here yet Links React 16.x Roadmap Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-18
Länk till avsnitt

Bootcamps vs School vs Self-learning

In this episode Wes and Scott talk about developer education ? what to look for, what to avoid, and how to be a life-long learner with good problem solving skills.

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.

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

3:59 - Our experiences

Scott:

Went to college - Go Blue! Worked odd jobs while self teaching Was mentored and taught more while working at my first job Self directed since then Started teaching via LUT in 2012

Wes:

Went to university for Business Tech - entirely self-taught Led and created part-time HTML + CSS program at HackerYou Led and created first bootcamp at HackerYou Led and created first JS part-time at HackerYou Been offered jobs at colleges + universities

10:02 - School - $$$

Pros

The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding Co-ops can help you find what you like and what you don?t like Life skills that involve you being on your own and figuring things out more You are exposed to interesting people and ideas CS Degree work can open more career doors Professional networking Many companies wont hire you without some sort of bachelor?s degree (this might change)

Cons

Not everyone has the time or money to devote two to five years to school ? especially to something they might not end up enjoying Potentially outdated staff and course material Wes was often asked to lead a video editing course, print design course and a web development course Lot?s of distractions

23:10 - Bootcamp - $$

Pros

Very fast, lots of info, but can be a bit overwhelming You can get up-to-speed extremely quickly Focused on hire-ability and job-ready skills Focused information Personality is really the deciding factor here - lots of people do well, and some don?t

Cons

Hit or miss ? quality of bootcamps aren?t vetted, so do your research Talk to someone who took it, find out who the instructors are You absolutely must continue learning after the bootcamp The bootcamp is just a push and you are expected to continue learning once you are done Not great for individuals that can?t handle the pace You have to quit your job

37:09 - Self-Taught - $

Pros

Self-directed people will prevail here Can be drip-fed while earning money at another job Can be supplemented by a job (e.g. you are front-end and want to go full stack) Can get real world experience as a freelancer while you evolve

Cons

Not for everyone Can be difficult to self-motivate Hard to get help - sometimes you can be stuck for hours on a two-second fix Potentially discouraging You might go down the wrong path without guidance on what you should learn

47:11 - Part Time Programs - $

Pros

Fantastic way to get up to speed with a new tech Goes at a good pace - twice a week usually Offered on weekends and evenings where you can maintain a regular job Very low risk - you can try it out

Cons

Might not be as fast as you like it Quality is all over the map

49:55 - Mentored Self Learning - $

Pros

Best to do with a mentor on the job Mentor can help steer what to learn in your free time Good feedback and a place to ask lots of questions

Cons

Can?t be done without someone willing to mentor you Only as good as your mentor

52:55 - What approach would we take?

Bootcamp > then immediately supplement with courses Links Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Digital Minimalism by Cal Newport Wes: American Kingpin Shameless Plugs Scott?s React Hooks For Everyone Wes? All Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-13
Länk till avsnitt

Hasty Treat - Communication Skillz

In this Hasty Treat, Scott and Wes talk about communication ? why it?s important, how to improve, building good habits, tools 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

3:59 - Why it?s important

Projects can live or die by the team?s communication Project timelines can be disrupted leading to big problems with scheduling

5:53 - How to improve communication skills

PRACTICE Pay attention to what works Have a system ? standups, weekly meetings, etc. Over communicating can be annoying but effective Realize that people can?t read your mind, so having your intentions and timelines public and known is important

9:12 - Building good habits

Need to practice Build systems to support new habits

11:04 - Tools we use to communicate

Email / Standups Notion GitHub Issues Slack Missive Links Syntax 075: Hasty Treat - Feedback and Criticism Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-11
Länk till avsnitt

Potluck - Are classes dead? × Tutorials vs Real Life × CRA vs Next × Scraping × More

It?s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, and more!

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the ?How did you hear about us?? section.

Sentry - Sponsor

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

Show Notes

1:30

Q: What advice would you give to someone wanting to get involved with the open source community, coming from closed-source full-time work? How do people make time to code on the side and balance a life/family?

5:38

Q: In Syntax 060, you mentioned making your life easier as a motivation. How do you get your data from sites that may not have an API? Web scraping? Any tools you?d recommend?

11:34

Q: Do you think React aims toward a world with functional components only or will class based components always play a role?

17:10

Q: Just feedback on the recent Smart Home podcast?I really enjoyed it! I have about 48 (color) HUE lights throughout my home, and use an IFTTT applet for my Ring PRO doorbell, so when someone rings the doorbell, all the lights in the home blink (e.g. so I can see when an Amazon Prime package arrives, or know someone is at the front door, etc?while I?m working and wearing my Bose QC35II?s, and of course listening to your podcast)! I?m a huge fan of the podcast since early last summer (I rarely comment, but you guys are great)!

21:37

Q: What would you do in the event your clients sends you a ?thank you? card along with cash that is MUCH lower than you are preparing to invoice them? Would you remove it from the invoice, ask them what they would prefer, etc? I?m stuck in an awkward situation and it doesn?t even cover the hosting costs.

24:39

Q: I?ve heard a lot of good things about Next.js, but what exactly is it? How does it compare to just using the create-react-app? Is it worth it to migrate a small side project that I have to Next.js?

28:26

Q: I take tutorials all the time for web dev. I have taken many of both of your courses. Thank you, they are great! I am completely self taught and have zero computer science education whatsoever. As well as your courses and other tutorials have taught me various languages and libraries, they do not prepare me for real work interviews or jobs. No offense. How do I make the jump from tutorials to real life?

34:39

Q: Do you have exercises to warm up your brain before you start coding? I always find it a bit difficult to jump straight into a project. I would never start working out before warming up and I feel that?s also true about development!

36:42

Q: How should developers deal with depression and mental health? Links Sentry Freshbooks Syntax 060: The Undocumented Wed Syntax 118: The Smart Home IFTTT Hue/Ring applet Syntax 120: Gatsby vs Next Next.js ××× SIIIIICK ××× PIIIICKS ××× Scott: Clarity Money Wes: Wyze Camera Shameless Plugs Scott?s React Hooks For Everyone Wes? CSS Grid Course Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-06
Länk till avsnitt

Hasty Treat - Authentication: LocalStorage vs Cookies vs Sessions vs Tokens

In this Hasty Treat, Scott and Wes talk about authentication ? the difference between localStorage, cookies, session, tokens 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.

Show Notes

4:20 - How should we track users?

Token based - generally stored in the client Session based - stored on the server Token Based (JWT)

6:00 - Token-based auth

Stateless - the server does not maintain a list of logged in users Scalable - you can use serverless functions easily Cross domain Data can be stored in JWT Easy to use on non-web sites like mobile apps Hard to expire tokens ? you must maintain a list of blacklisted tokens

7:48 - Session-based auth

Stateful - generally you maintain a list of session IDs Passive - once signed in, no need to send token again Easy to destroy sessions

10:48 - How do we identify the user on each request? localStorage or Cookies?

A common misconception is that localStorage is for tokens while cookies is for sessions With localStorage, we need to grab the token and send them along on each request With cookies, the data is sent along on each request

11:25 - Security Issues

XSS for Tokens - make sure bad actors can?t run code on your site Sanitize inputs XSRF - CSRF tokens are needed Links Cookies vs Tokens: The Definitive Guide Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-03-04
Länk till avsnitt

How We Manage Our Lives ? Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!

In this episode, Wes and Scott talk about life management ? the systems and tools for managing all the the busy details of life and work.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the ?How did you hear about us?? section.

Sentry - Sponsor

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

Show Notes

5:00 - Todos

GTD philosophy Todoist Things

12:31 - Focusing

Focus app Turn off all notifications on iOS and desktop Rename apps Ask yourself why you feel the way you do Should be doing email? Do I need to eat that frog? Why do I not enjoy this? Sticky note on screen or desk

21:27 - How we track ideas, thoughts, and notes

Get everything out of your head Markdown files Evernote Notion

27:23 - Calendar and schedule

Google calendar USB light switch

33:30 - Goal tracking / Life progression

Keep concepts and ideas in Notion Milestones (bigger ideas) are separated Use the system that works best for you

36:58 - Fun things with Notion

What is Notion? Cross-linking/referencing between boards Episode calendar and possible episodes kanban Links Freshbooks Sentry Todoist Things Getting Things Done: The Art of Stress-Free Productivity Focus Notion Evernote Bryant Electric USB light switch Bear app Airtable ××× SIIIIICK ××× PIIIICKS ××× Scott: LG Ultrawide Monitor Wes: LG 4k 32" Monitor Shameless Plugs Scott?s React Hooks For Everyone Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter
2019-02-27
Länk till avsnitt

Hasty Treat - Tips to Succeed on YouTube

In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube!

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

How YouTube has affected our careers

3:45

YouTube money is just OK

6:28

SEO is king

7:15

The title is most important

8:59

Description is important

11:00

Use Tags. All of them.

12:00

Scheduled content works

13:26

Keeping Viewers

15:20

Pinning comments

15:41

Liking Comments

17:00

Practice Finishing Sentences

17:34

Collaborate when you can

19:00

Use all the features YouTube has to offer

20:44

Don?t get sucked into the BS Links TubeBuddy Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-25
Länk till avsnitt

Gatsby vs Next

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 LogRocket The Armoury Next.js Gatsby Netlify Node Express ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion LED Lights Wes: The Dream Podcast Shameless Plugs Scott?s Pro Gatsby 2 Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-20
Länk till avsnitt

Hasty Treat - Better Living Through Side Projects

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

Next.js Express diskDB Meteor Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-18
Länk till avsnitt

The Smart Home

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

Light Switches Leviton Lutron Bulbs LIFX Philips Hue AMAZING Much cheaper now than before Blinds Chromecast ? turn the TV off Plugs Wemo Leviton Sonoff Power strip Change each plug or have timers Thermostat Ecobee 3 Lite Ecobee 4 with Alexa Nest Nest-E Cameras Ring Doorbells Ring Flood Light Camera Super slow to open the app Wyze cameras Small one Larger Panning Camera Mesh Wifi Google Wifi Amplifi Fire Alarms / CO2 Nest Protect Dumb Lithium Garage Door Opener Non-connected ?smart items? Solar powered lights on a timer. No app needed, no WiFi connection needed Roomba - meh. We play ?find the body? when it comes home. Locks - Code based lights

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 Sanity Stackbit Google Home Mini Amazon Echo Google Pixel Apple Homepod Raspberry Pi GearBest ××× SIIIIICK ××× PIIIICKS ××× Scott: Philips Hue Wes: All the recommendations from above Shameless Plugs Scott?s Level Up Pro Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-13
Länk till avsnitt

Hasty Treat - How To Email Busy People

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! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-11
Länk till avsnitt

Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More

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 Sanity Techmeme Ride Home Podcast Concurrently Rachel Andrew CSS Grid auto height of elements? Cloudflare Intl.NumberFormat ××× SIIIIICK ××× PIIIICKS ××× Scott: Voxon Screwdriver Set Wes: Technology Connections Shameless Plugs Scott?s Level Up Pro Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-06
Länk till avsnitt

Hasty Treat - Code Quality Tooling Part 2

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 Sentry Log Rocket Rollbar Jest Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-02-04
Länk till avsnitt

The Freelance Client Lifecycle - Part 2

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 Syntax 112: The Freelance Client Lifecycle - Part 1 Syntax 088: Pre-launch Checklist ××× SIIIIICK ××× PIIIICKS ××× Scott: Synology 4 bay NAS DiskStation DS918+ Wes: Backblaze Shameless Plugs Scott?s Level Up Pro Wes? Advanced React Course Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-30
Länk till avsnitt

Hasty Treat - Code Quality Tooling

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 ESLint JSHint Prettier Wes? dotfiles Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-28
Länk till avsnitt

The Freelance Client Lifecycle - Part 1

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 Syntax 036: Hasty Treat - Freelancing Hot Tips docracy Boomerang for Gmail ××× SIIIIICK ××× PIIIICKS ××× Scott: The Great Suspender Wes: Food Busker YouTube Channel Shameless Plugs Scott?s Level 1 Styled Components Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-23
Länk till avsnitt

Hasty Treat - Tidying Up Code #MarieKondo

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 Tidying Up with Marie Kondo Better Comments VS Code Prettier ESLint Nicole Sullivan - Object Oriented CSS Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-21
Länk till avsnitt

Tips for Work Life Balance

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 Wes? Head Bob Spotify playlist Portable Text from Sanity Portable Text Forget about Gutenberg, no seriously What you need to know about block text ××× SIIIIICK ××× PIIIICKS ××× Scott 1: Todoist Scott 2: Notion Wes: PassSource Shameless Plugs Scott?s Level Up Tutorials Pro Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-16
Länk till avsnitt

Hasty Treat - CSS Grid Level 2 aka Subgrid

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?

Create your grid as normal - you can create columns, rows, named lines, etc. Your grid-item will also be display grid - this is nothing new - just regular nesting of grid 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 Sentry is hiring Grid Level 2 and Subgrid by Rachel Andrew Css Grid Level 2 specs CSS Grid Level 2: Here Comes Subgrid Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-14
Länk till avsnitt

Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

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 WordPress Gatsby Javascript30 Dead Man?s Snitch Corntab Syntax106: A Look Forward to 2019 Drip Segment.io Hotjar ××× SIIIIICK ××× PIIIICKS ××× Scott: Tiding Up on Netflix Wes 1: Capital Gaines by Chip Gaines Shameless Plugs Scott?s Level 1 Styled Components Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-10
Länk till avsnitt

Hasty Treat - CSS Units

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 Sentry Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-07
Länk till avsnitt

A Look Forward to 2019

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 Next.js Gatsby Parcel Hasura Prisma TakeShape GraphCMS Contentful WPGraphQL Apollo Github VS Code Microsoft Edge WordPress Svelte Vue.js Syntax 067: Goal Setting ××× SIIIIICK ××× PIIIICKS ××× Scott: Fake or Fortune? Wes: Heavyweight Shameless Plugs Scott?s new course on design systems Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2019-01-02
Länk till avsnitt

Hasty Treat - CSS and JS Pointer Events

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 CSS pointer events JS pointer events Pointer events support in WebKit Pointer events Polyfill Wes? Javascript 30 Course Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2018-12-31
Länk till avsnitt

CSS Layout

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 , , , etc.?

30:09

Floating and clearing

35:55

Flexbox, Grid and responsive design

36:58

Mobile-first or desktop-first?

41:20

Viewport units - vw, vh, vmin, vmax, etc Links Keycode.info ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Podcast Wes: Flying a DJI Tello Drone with React and Node.js Shameless Plugs Scott?s Design Systems Course Wes? Courses Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2018-12-26
Länk till avsnitt

Hasty Treat - Where are they now? Part 2

In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any 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:40 - jQuery UI / jQuery Mobile

jQuery UI jQuery Mobile Sencha Touch

6:10 - Flash / Silverlight

Flash Cufon Silverlight Netflix Happy Gilmore The Wedding Singer

10:54 - Grid systems

960.gs Golden Susy Bootstrap Foundation

16:02 - CoffeScript

CoffeScript Compass

18:18 - Underescore.js

Underscore.js Lodash jsPerf

20:04 - Less CSS

Less CSS Vue.js Drupal Cappuccino Tweet us your tasty treats! Scott?s Instagram LevelUpTutorials Instagram Wes? Instagram Wes? Twitter Wes? Facebook Scott?s Twitter Make sure to include @SyntaxFM in your tweets
2018-12-24
Länk till avsnitt
En liten tjänst av I'm With Friends. Finns även på engelska.
Uppdateras med hjälp från iTunes.