Syntax - Tasty Web Development Treats

Latest Episodes:

What’s New in Web Development Apr 24, 2019

Show notes

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

××× SIIIIICK ××× PIIIICKS ×××

Scott: Finding Drago
Wes: The Punk Rock MBA

Shameless Plugs

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

Hasty Treat - CSS Frameworks Apr 22, 2019

Show notes

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

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

9 Ways to Stay Sane While Working Remotely Apr 17, 2019

Show notes

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

××× SIIIIICK ××× PIIIICKS ×××

Scott: Doug DeMuro’s YouTube Channel
Wes: Yeti Rambler 14 oz.

Shameless Plugs

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

Hasty Treat - Cranky Developers Apr 15, 2019

Show notes

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

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

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

Syntax Live React Edition Apr 10, 2019

Show notes

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

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?

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

Hasty Treat - Tips For A Good Portfolio Apr 08, 2019

Show notes

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

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

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

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

Show notes

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

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