Alle afleveringen

1.049 afleveringen, van nieuw naar oud

The State of JavaScript 2018

5 december 2018 · 1 uur 2 min
Afspelen

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:48
What is the State of JS survey
3:58
The tech behind State of JS
12:55
How was the data collected?
16:38
JavaScript Flavors
23:14
Frameworks
31:49
DataLayer
34:53
Backend
40:09
Other Tools
44:37
Opinions
47:48
Awards
49:58
Criticism
Links Nivo
Gatsby
Netlify
Reason
Parcel
Relay
Express
KeystoneJS
Ghost
Jest
GraphQL
VueX
Storybook
Real Analysis of Angular, React, and Vue
××× SIIIIICK ××× PIIIICKS ××× Sacha: DIY and woodworking
Wes: Alex French Guy Cooking Lees meer

Scott: Silverback Open 2018

Shameless Plugs Sacha - Vulcan.js
Scott - Level Up Pro
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
Hasty Treat - Uses for CSS Variables

3 december 2018 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid.
Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.
Show Notes 3:25 - What
--example-name, represent custom properties Lees meer

called using var()

Overwrite with a more specific style

Use JavaScript to append .style.setPropert(

How are they scoped?
Just like normal CSS
Can be set on :root {}
Can be set on any element down

9:10 - Why
Uses:
Can make more sense if used semantically
var(–accent) vs var(–yellow)

Independent values for things that can’t be broken up:
box-shadow: 2px 2px 2px 2px red
transform: rotate(var(–rotate)) scale(2);

Inline properties can be picked up by regular CSS (color, size, etc.)
hey

Themes that can easily be changed at runtime for entire app

19:15 - Calculations
You can use them inside of calc()
Animations
20:10 - Bummers
Not super well supported just yet (IE 11)
No good fallback other than manual fallback
Syntax - Old Browsers, Fallbacks and Polyfills series Part 1
Part 2
Part 3

PostCSS Custom Properties
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
Holiday Gift Guide

28 november 2018 · 1 uur 6 min
Afspelen

In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks.
Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntaxfm and get a free pair of socks!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:57 - Foodie Gifts
Hot Sauce Merfs
Every Cholula Hot Sauce
Jalapeno from Trader Joes
Blue Top Creamy Buffalo Lees meer

Everything but the bagel Spice
Loose leaf Teas from Teahaus.com
Wes’ Tea Steeper
Scott’s Tea Mug & Steeper
Flavored Salts (No link, just go find them)
Savory Spice Shop
Rainbeers - make it yourself
Beer Making Kit
Umai Dry Steak Aging and Charcuterie Bags
11:27 - Experiences
Knife Skills Class
Butchering Class
Cooking Class
Float tank Subscription
Massages
18:15 - Subscriptions
Headspace
Spotify
HBO Go
YouTube TV
MeUndies Underwear Subscription
Memrise
LastPass
Magazines
Mantry Crates
Kids Crates
23:07 - Books / Audible
BadBlood
Beat the bank - for Canadians Only
American Kingpin
Rich Dad / Poor Dad
Kingpin: How One Hacker Took Over the Billion-Dollar Cybercrime Underground
Anything You Want
Essentialism
The E-Myth Revisited
29:47 - Clothes
Uniqlo Jeans - w/ elastic
Carhart Beanie (TOQUE)
Naked and Famous Raw Selvedge Denim Jeans Skinny Guy
Weird Guy

Nudie Raw Selvedge Denim “thin Finn”
“Unbranded” Raw Denim
Custom Leather Belt
TNF Fanorak Windbreaker
Hoodies Adidas Black-on-black NMD crewneck
Champion Hoodie

Sneakers Nike Airmax 270
Jordans DonTrip

RayBans with mirrors Original Wayfarer Sunglasses

Under Armour Boxer Jock Underwear
Reebok Boxer Brief Underwear
dvlpr.io Merch…
Hasty Treat - Should you install a dependency or roll your own?

26 november 2018 · 19 min
Afspelen

In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 2:15 - Reasons To roll your own
Learning Experience
Fun
Features
Add your own features
Lightweight - only use what you need
8:08 - Reasons not to roll your own
Battle Tested
Actually Tested
Time
Money
Experience
11:27 - Fork
Something needs extra features
Upstream your changes
13:10 - Some Examples
Fetch + function vs Axios
Date functions vs Stack Overflow copy/paste
Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash
Links React PowerPlug
Lodash
Axios
Stack Overflow
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 Lees meer
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More

21 november 2018 · 53 min
Afspelen

It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
React in Action - Sponsor React in Action by Mark Thomas from Manning Publications is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you, React In Action is a great book that covers everything you need to know. Also be sure to check out this page for 40% off all manning books and videos.
Show Notes 2:29
I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts?
6:55
I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)?
14:00
I’ve read on Twitter that React.Context can be a good replacement for Redux. Why?
18:40
What’s it like running a podcast?!
24:03
I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks!
27:36
What has been the most awkward situation you’ve been in as a dev?
31:20
Do you have any good resources on JWT? I’m unclear when my front end … Lees meer
Hasty Treat - How to become well liked at work

19 november 2018 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 5:01 - Foster a culture of asking “why” and “how”
7:58 - Show your own mistakes
9:26 - Be understanding of people’s life situations and accommodate them accordingly
11:36 - Be okay with people taking your time
13:10 - Don’t take up other people’s time
15:40 - Be nice
15:57 - Share things
16:50 - Respect personal space
18:08 - Respect people’s time
Links Adam Grant - Give and Take: Why Helping Others Drives Our Success
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 Lees meer
React Hooks

14 november 2018 · 59 min
Afspelen

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:30
Function components
4:50
What are React hooks?
8:12
What problem does this solve?
12:00
State hooks
21:50
Context hooks
26:02
Effect hooks
36:46
Reducer hooks
40:40
Ref Hooks
48:00
Libraries already using React hooks
Rehooks → Listing of hook libraries
React Spring
React Measure
Formik
Immer Lees meer

50:30
Resources Dan Abramov’s Talk
Harry Wolf
Use Hooks Newsletter
Awesome React Hooks

××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Blood

Wes 1: Swindled Podcast

Wes 2: Scrub Brush Drill

Shameless Plugs Scott’s Pro Gatsby 2 Course

Wes’ Advanced React Course - use the 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
Hasty Treat - How to become a sticker mogul

12 november 2018 · 36 min
Afspelen

In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out Bos.af for more info.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 6:08
Design
9:23
Printing
16:08
Types of Stickers
19:34
Selling
21:43
Envelopes, stamps and shipping
30:47
Returns
32:42
The future
Links Bos.af
Patrick DePuydt
Alibaba
Sticker Mule
Shipstation
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 Lees meer
Live at JAMstack_conf

7 november 2018 · 1 uur 4 min
Afspelen

This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.
Show Notes 7:14 - Spicy JAM Tips
Set default headers in your request library - this way it comes along for the ride on every request
Don’t get hung up on “static” - static sites can be as dynamic as needed
Don’t wait to use new tech - progressively enhance and gracefully degrade where needed
There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment
Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it
10:10 - This, That or Both?
Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript?
Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework?
Aphrodite - React Styling Library or Best Selling Erotic novel?
Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia?
C-Control - A modern state management library for web components or studio headphone mixer?
Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy?
Joose - A hip east coast juice bar or a metaobject system for JavaScript?
Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers?
Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach?
Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go?
Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner?
21:13 - S… Lees meer
Hasty Treat - Stumped! 03

5 november 2018 · 22 min
Afspelen

In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from Flashcards for Developers.
EmailOctopus - Sponsor Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at emailoctopus.com/syntax and get your first three months free.
Show Notes 4:03
What’s the difference between synchronous and asynchronous code?
5:56
What’s the difference between .call and .apply?
7:08
How do you share code between files?
8:18
What’s the difference between double equals and triple equals?
10:40
What’s the difference between null, undefined, and undeclared?
14:18
What is the event loop?
Philip Roberts - What the heck is the event loop anyway?
16:02
Why is extending built-ins never a good idea?
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 Lees meer
Pre-launch Checklist

31 oktober 2018 · 59 min
Afspelen

In this episode Wes and Scott discuss their pre-launch checklists. They talk about performance, accessibility, compatibility, SEO, analytics, and more - all the things you should check before launching something to the world.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
.tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.
Show Notes 1:45 - Overall
Let robots do the work for you - use auditing tools Lighthouse
SEO Checkers
Accessibility checkers like axe Lees meer

2:58 - Performance
Compress those images Build process
Cloudinary
ImageOptim
imgIX

Minify
Code Splitting Smaller bundles where it makes sense
A future where it’s done for us

Run page speed tests like Google PageSpeed Insights

Don’t service worker on launch
Syntax Ep 50 - Progressive Web Apps
11:43 - Compatibility
Test on actual browsers that need to be supported
Ask people to check on their devices
Use a service like Browserstack

Browser resolution and ratios
Cache busters
16:00 - Sales / Credit Cards
Use package.lock
Have multiple people test your checkout
Make sure your company name is listed on customer’s credit card bills
Have a phone number listed for disputes
24:55 - Tips from the Trenches
Secure API endpoints
Scale up server just in case
Early access
Soft launch
Make sure URLs are correct - no “localhost:3000”, etc.
31:25 - Conten…
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 3

29 oktober 2018 · 25 min
Afspelen

In this Hasty Treat, Scott and Wes conclude a three-part series about old browsers, fallbacks and polyfills. In part three, they talk specifically about transpiling and polyfilling.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 2:20 - Polyfills and Transpile
5:18 - Back in the day
Border-radius htc hack
PNG fix for transparent PNGs
Flash for custom fonts
Cufon and SIFR
10:48 - JavaScript Polyfills
Features are polyfilled
MDN Polyfill
Core-js
Polyfill.io
HTML5 Cross Browser Polyfills
13:47 - JavaScript Transpile
Syntax is transpiled
babel-preset-env
Babel has plugins and presets
Meteor bundle to different browsers on demand
There are polyfills for most things, but performance can be an issue Resize observer
Intersection Observer Lees meer

Some things can’t be done with either New browser APIs
Service workers, device access, inline video on old iOS, etc.

Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Potluck - Working with designers × Is WordPress Crap? × When to stop working × More

24 oktober 2018 · 59 min
Afspelen

It’s another potluck episode in which Wes and Scott answer your questions! This month - working with designers, criticisms of WordPress, avoiding burnout, time management, and more.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
.tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.
Show Notes 5:05 - How can you help a designer understand how styling works and how layouts work in the web? In other words: How do I explain my boundaries as a front-end developer to a designer?
Work closely with the designer
Allow the designer to push your limits
You can help them understand by: Showing them poor performing websites
Showing them things that usually are taxing on the GPU to paint - rotations, background images, drop shadows, etc. Lees meer

Don’t be afraid to let a tough design push your boundaries
13:23 - How do you manage your time for learning new things when you have children and a daily full-time job?
Those who figure out how to make it a priority will win out
Family first - talk to your spouse
Ask your boss for time to learn and grow
Find ways to get paid for learning
19:45 - How do you deal with burnout in this constantly evolving front end tech ecosystem?
Make time for hobbies away from the computer
Do projects just for fun
Solve your own problems
Syntax 035: Keeping Up with the Codeashians
Syntax 041:…
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 2

22 oktober 2018 · 23 min
Afspelen

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 3:08 - CSS Grid and Flexbox
Flexbox old spec
Flexbox new spec
CSS Grid
Some popular options for supporting for supporting CSS Grid and/or Flexbox: Just serve the mobile layout
Display block
Separate layout that you will eventually delete Lees meer

Can I Use
Do websites need to look exactly the same in every browser?
Modernizr
CSS3, Please!
Autoprefixer
12:38 - CSS Variables
Double define
Just like Grid, unknown def will be ignored and fallback to CSS
CSS Houdini
17:00 - Fallback Code
@supports
Display block then display grid
Feature Testing
Detect the browser as a last resort
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Fitness for Developers

17 oktober 2018 · 1 uur 3 min
Afspelen

In this episode Wes and Scott discuss fitness for developers. As a follow-up to Episode 20, they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018.
DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:30
Why is fitness important as a developer?
6:08
Working Out Update: Wes
14:37
Working Out Update: Scott
25:06
Nutrition Update: Wes
35:12
Nutrition Update: Scott
45:40
Supplement Update: Wes
48:00
Supplement Update: Scott
52:18
Plans for the future: Wes
54:53
Plans for the future: Scott
××× SIIIIICK ××× PIIIICKS ××× Scott: Fitness Blender Lees meer

Wes: Dr. Peter Attia - The Drive Podcast

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
Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1

15 oktober 2018 · 29 min
Afspelen

In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 5:10 - How do you decide if you should support an older browser?
Google Analytics Data
User base / Money earned from that audience
IS it worth it? Time vs Money?
11:35 - How do you test your websites and app in older browsers?
Actual hardware - there’s no substitution for the real thing
Browser Stack
Virtual Box
Modern.ie
Can I Use
18:24 - Supporting and Testing Mobile Browsers
Resize your browser
Build a device lab
Remote Debugging
Browser device view
Faking Geolocation
Emulators in XCode / Android dev tools
Browsersync
Ghostlab
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer
Top 18 New Things in JS - Part 2

10 oktober 2018 · 53 min
Afspelen

In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Graph CMS - Sponsor GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at graphcms.com/syntaxfm.
Show Notes 3:30
Spread
8:40
Rests
11:54
Arrow Functions
15:48
Default Function Arguments
19:47
Named params
21:26
Modules
35:35
Classes
41:54
Things we never use
Links Jake’s Minesweeper
××× SIIIIICK ××× PIIIICKS ××× Scott: Trader Joe’s Everything by the Bagel Sesame Seasoning Blend Lees meer

Wes: Trader Joe’s Green Dragon Hot Sauce

Shameless Plugs Scott’s Better Javascript Course
Wes’ ES6 For Everyone
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 - Hacktoberfest

8 oktober 2018 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes talk about this year’s Hacktoberfest - a great way to support open source.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes 2:42
Hacktoberfest - The rules
7:35
Things to PR
12:56
Things not to PR
18:05
How Pull Requests work
21:45
Some of our repos Wes’ ES6 course blog posts
Syntax Show Notes
KeyCode.info
CSSCursor.info Lees meer

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
Top 18 New Things in JS - Part 1

3 oktober 2018 · 52 min
Afspelen

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.
Show Notes 6:02
Const / Let
10:00
Template literals / Template strings
Toggle Quotes Extension
Prettier
14:29
Object destructuring
21:28
Array destructuring
27:25
Function Param destructuring
30:14
Promises
Wes’ Async + Await Talk
36:24
Async + Await
Syntax Ep 028 - Async + Await
40:59
Object Computed Property Name
43:42
Object Method Syntax
Links Denver Startup Week
××× SIIIIICK ××× PIIIICKS ××× Scott: Red Bull VC One World Final 2018 Lees meer

Wes: Jura Impressa

Shameless Plugs Scott’s Better Javascript Course
Wes 1: CSS Grid in 45 Minutes
Wes 2: Async + Await Talk
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 - Stumped! 02

1 oktober 2018 · 22 min
Afspelen

In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from 30 Seconds of Interviews.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes 5:05
What are defer and async attributes on a script tag?
7:15
What are the differences between var, let, const and no keyword statements?
8:45
What is a callback? Can you show an example using one?
9:52
What is recursion and when is it useful?
12:06
What is the difference between the array methods map() and forEach()?
Syntax Ep 023
14:02
What is Big O Notation?
15:28
What does 0.1 + 0.2 === 0.3 evaluate to?
wtfjs
17:44
What is CSS BEM?
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer
Potluck - JS × Web Components × Security × They took our jobs!

26 september 2018 · 1 uur 10 min
Afspelen

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development.
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.
Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 3:33 - Would you ever consider doing a live Syntax show?
Yes! Get tickets at JAMstack_conf Lees meer

4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now?
Google’s answer to React Native.
Flutter
NativeScript
9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation?
Not cool. Always do server-side validation.
Netlify
Cloudflare
14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project?
Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites
Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura)
21:51 - What are your thoughts on 100 Days of Code Challenge?
Consistency and accountability.
The best way to get good.
100 Days of Code
25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React?
Dynamic vs static. What are your needs, how often does the content change.

Next.js
Use for dynamic needs
It can do static exports too
…
Hasty Treat - Positivity and Web Development

24 september 2018 · 21 min
Afspelen

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity.
3:18 - The effects of negativity and how the web industry is improving
Mental health awareness is very real Lees meer

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

11:50 - Healthy ways to approach disagreements
Never assume malice
Kill them with kindness
Take note of the people you admire and how they deal with aggressiveness
17:08 - The power of positivity
Inspire the change you want to see
It’s good for your productivity - it makes you feel good
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Specialization vs Generalization

19 september 2018 · 1 uur 3 min
Afspelen

In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Dev Lifts — Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called Fit.Start. Get 50% off with the coupon code “tasty”. Check it out today!
Show Notes 4:18 - What is a specialist?
Someone who is very good at one or two things
Can be very lucrative if you’ve taken the time to become well-known in you’re industry
12:20 - What is a generalist?
Two ways to look at generalists: Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.)
Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend) Lees meer

There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”.
22:22 - Frontend vs Backend
Frontend
Frameworks (React, Vue, etc.)
CSS
Performance
Animations

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

26:50 - When to widen your focus
When you are complacent with your mastery
You need a skill to get something done.
For fun
For a specific job
30:42 - When to narrow your focus
You don’t feel control over your skills
You are missing out on employment because a lack of skills in one department
You feel overwhelmed by the options available
You want to be the "go to person”
For fun
35:48 - How to master and expand
Focus on one skill at at time. Master it and then expand on your skillset
Find satellite skills - things that work in harmony
38:47 - Scott’s journey
42:31 - Wes’ journe…
Hasty Treat - Feedback and Criticism

17 september 2018 · 39 min
Afspelen

In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:00 - Getting Feedback
Don’t assume malice - tone is easily lost in digital communication
Don’t take it personally
Evaluate the feedback through the eyes of who it’s coming from
Look for the truth in the feedback
Be open to feedback
15:15 - Giving Feedback
Don’t be negative - phrase your feedback in positives
Don’t give unrequested feedback
Explain the why behind your feedback
Don’t be rude or an asshole
Use Tools and Standards for Code Quality
Give an opportunity to improve
Explain the “why” behind the feedback
Sandwich criticism with something positive
When things are heated, try to diffuse the situation
Give frequent positive feedback
Links Tweet from Dan Blundell
Tweet from Dan vs Code
Manager Tools’ Feedback Model
Elon Musk on The Joe Rogan Experience
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 Lees meer
11 Habits of Highly Effective Developers

12 september 2018 · 50 min
Afspelen

In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 2:55 - You understand stakeholder and business goals
What is the website (or project) ultimately trying to accomplish?
How does the business make money?
Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business
5:13 - You’re curious and always learning
This industry is ever-changing and isn’t slowing down
7:36 - You have an open mind about new technology
Don’t “poopoo” something because it’s intimidating, new, scary or different
Like foods you’ve never tried, sometimes something unusual turns out to be game changing
9:57 - You ask for help
#LifeHack - most people know more than you
Be comfortable with NOT knowing
Be comfortable with failing and with how others might perceive that
Check your ego at the door
15:35 - You help others
Helping others solidifies your own knowledge
Answering questions Stack Overflow
Quora Lees meer

Blogging
YouTube videos
Mentoring co-workers
Not offering unwanted advice
19:12 - You have a “problem solver” mentality
General curiosity - figuring out why things aren’t working
Break things down into testable components to pinpoint an issue
Have a clear head under pressure (e.g. interviews)
24:37 - You have fun with what you do
Enjoying challenges
Even if something isn’t particularly fun, you find ways to ma…
Hasty Treat - Reading Documentation

10 september 2018 · 33 min
Afspelen

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 5:10 - What are the different kinds of documentation?
Tutorials Lees meer

Docs

API references

Video docs

Examples of good documentation
Stripe
Next.js Examples
New PayPal Docs
Gatsby
Jest
Meteor

14:34 - How to read documentation
Understanding how you learn will save you lots of time
16:03 - Understanding Parameters
Parameter types
Required / Optional
Parameter order
22:45 - How do you tackle learning something new?
Look at some examples
Scan the entire docs to get an idea of the surface area
Have something specific in mind that you want to build
27:34 - What to do when the docs suck?
Look at other people’s code
Chat rooms
Tests for examples
Read the source code
Github search
Contribute
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Accessibility

5 september 2018 · 1 uur 14 min
Afspelen

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more!
Cloudinary - Sponsor Cloudinary is a heavy duty media hosting stack for your websites and applications.
Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets.
Deque - Sponsor Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible.
For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications.
Show Notes 6:00 - Basics
What is accessibility?
Amy Carney Tweet
Tim Berners Lee Quote
a11y
What types of disabilities are there? Temporary, situational, and permanent Lees meer

Tweet thread with lots of info
15:03 - How do you write accessible code (easy wins)?
Clean HTML
Semantic elements
Use the alt attribute on images
HTML5 (article, section, header, footer, aside)
Proper inputs types - number, text,
CSS order property on Flexbox and Grid
Colors and proper contrast
Use links and buttons properly
Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.) Introduction to ARIA
Using ARIA: Roles, States, and Properties

Keyboard only navigation
Tabindex
Skip to content
“Skip Navigation” Links
a11y ESLint rules
Video captions for ESL
Transcripts for Podcasts
44:48 - Tools
aXe
Lighthouse - Audits tab in Chrome dev tools
Inclusive Design Posters
HTML Code Sniffer
Pa11y runs code sniffer from the CLI
Accessibility features in OS
Screen Rea…
Hasty Treat - Stumped! Interview Questions

3 september 2018 · 30 min
Afspelen

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:33
What is the difference between the postfix (i++) and prefix (++i) increment operators?
7:15
What’s the difference between a static method and an instance method?
9:25
What is a focus ring? What is the correct solution to handle them?
11:20
How does hoisting work in JavaScript?
Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More
12:47
What are the advantages of using CSS preprocessors?
14:29
What is memoization?
15:48
Describe the different ways to create an object. When should certain ways be preferred over others?
19:15
What is event delegation and why is it useful? Can you show an example of how to use it?
22:06
How do you compare two objects in JavaScript?
26:00
Can you describe how CSS specificity works?
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer
Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends

29 augustus 2018 · 1 uur 6 min
Afspelen

It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.
Show Notes 5:00
Why don’t you work with Typescript?
10:52
How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)?
13:40
What is meant by the word “state” when referring to Vue or React?
16:32
How do you practice and get better at “soft skills” (e.g. burnout, freelancing, time management, confrontation)?
Syntax 025 - Dealing with email overload
PaperKarma - The App to Stop Junk Mail
28:23
Do you guys use different environments (e.g. “QA” and “Prod”)? What are some best practices?
Semaphore - Test and deploy your code
Sentry - Open-source error tracking
32:43
As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries?
38:52
What would WordPress be like if it were built on Node and GraphQL?
Ghost
46:54
I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too?
51:16
How do you handle high level page layout when using styled components?
53:13
As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over.
Links react-async-script-loader
Netflix Explained
××× SIIIIICK ××× PIIIICKS ××× Scott: Alfred Emoj Lees meer

Wes: Motherboard YouTube Channel

Shameless Plugs Scott’s React Testing Course
Wes’ Courses
Tweet us your tasty tre…
Hasty Treat - Framer X and Prototyping Tools

27 augustus 2018 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:35
Framer X - What it is and what it isn’t
13:20
What it means for other prototyping and design tools
17:00
Future of prototyping and design and development
21:40
Final thoughts
Links Scott’s Framer X Fist Look Video
Sign up for Framer X Beta
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 Lees meer
Design Tips for Developers

22 augustus 2018 · 1 uur 6 min
Afspelen

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects.
Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.
Show Notes 6:18 - General Design Tips
Spacing is important Lees meer

Using patterns and textures
Subtle Patterns
Hero Patterns
Heroicons
FlatIcon
True Grit Texture Supply
Steve Schoger

Use subtle gradients
ColorSpace

Use subtle drop shadows
Multiple shadows on one element can have a nice effect

Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white
Use CSS Variables for custom blacks and whites
CSS default colors are almost always too harsh

Default browser UI is almost never the best UI
Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been

40:22 - UX Design & Animation
Don’t use animations when not necessary

Subtle scale/transitions on hover can be a nice effect

Particles.js

Patagonia’s Bears Ears

CSS transitions vs Physics based

51:30 - How To Get Better
Follow UI-themed Instagram accounts

siteInspire

Dribbble

UISources

Follow Steve Schoger

Find a free mockup and build it out pixel for pixel

Take time to challenge what you think is possible or doable technically and creatively

××× SIIIIICK ××× PIIIICKS ××× Scott: Louis Cole

Wes: r/posthardcore Spotify Playlist

Shameless Plugs Scott’s Rea…
Hasty Treat - Goal Setting

20 augustus 2018 · 32 min
Afspelen

In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:14
Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time)
7:45
What kinds of thing should you set goals for?
10:49
Business goals
16:50
Visualizing Goals
22:58
When should you set goals?
27:42
Accountability
Links ProfitWell
Forever Jobless Goals Worksheet
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 Lees meer
The React Episode

15 augustus 2018 · 1 uur 14 min
Afspelen

In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works.
Dev Lifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called fit.start(). Get 50% off fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your DevLifts Premium subscription. Check it out today!
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com
Show Notes 5:23
Components
12:30
JSX
25:13
Data and Props
44:48
Fetching
49:22
Event Handlers
54:00
Instance classes + properties
55:02
Lifecycle Methods
59:55
Context
1:01:35
Routing
Links Preact Inferno How to Comment in JSX (article) Apollo Redux LevelUpTutorials.com Level II React Course React Informed (forms) Meteor Axios Firebase Gatsby Here’s how React’s new Context API works
××× SIIIIICK ××× PIIIICKS ××× Scott: Dark Net Diaries Podcast Lees meer

Wes: Any suggestions for key management products? + Iliza Shlesigner Stand-Up

Shameless Plugs Scott’s Level Up Tuts 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
Hasty Treat - Building Curriculum for Courses

13 augustus 2018 · 32 min
Afspelen

In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:32 - Wes’ process
Figure out what to make
Build the thing you’re teaching in the course
Have it reviewed by experts
Simplify and create a linear flow for what you’re teaching
16:25 - Scott’s process
Chose a topic
Build the thing
Create the outline as you go
Have goals in mind, for individual topics
Record with final code open
28:25 - How to get started
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer
Our Office Setups (Gotta Get The Gear)

8 augustus 2018 · 1 uur 5 min
Afspelen

Scott and Wes talk office setups and all things gear. Gotta get the gear!
Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 11:00
Wes’ gear
Scott’ gear
Scott’s podcasting/screencasting gear
13:30 - Computer
Wes: Macbook Pro 15"
Scott: Macbook Pro 15"
17:39 - Monitors
Wes:
[22" vertical Cheap Acer: https://amzn.to/2vkXomG Lees meer

[27" Dell 4k - https://amzn.to/2Mo3NnO

[Ergotron Monitor Arms - https://amzn.to/2voS9CF

Scott:
LG 34UC88-B 34-Inch 21:9 Curved UltraWide
VIVO Dual stand

28:33 - Keyboards and Mice
Twitter Thread about mice

Wes:
Apple Magic Keyboard
Magic Mouse
Logitech MX Master 2S

Scott:
CODE Keyboard
Apple Magic Trackpad

33:14 - Desks
Wes:
Ikea Countertop
Ikea Alex Drawers

Scott:

Ikea Karlby Walnut Countertop + Jarvis Legs === dope desk!

37:53 - Chairs
Wes:
Herman Miller Aeron Polished Aluminum

Scott:
Herman Miller Aeron

39:24 - Headphones
Wes:
Bose QC35s
Apple AirPods

Scott:
AKG K 553 Pro
M-Audio Bx8 monitors

Polk Audio 12” Subwoofer for that booom booom!

43:50 - Hard Drives / Backup Systems
Wes:
WD My Passport 1TB
Backblaze Backup

Scott:
WDMyCloud EX4100

47:28 - Charging Stations
Wes: Anker USB Wall Charger

48:52 - USB Splitters
Wes:
CalDigit TS3 Plus
Amazon Basics USB 3 Hub

Scott:
CalDigit TS3 Plus

50:35 - Wifi
Wes:
Amplifi HD Mesh

Scott:
Google Wifi Mesh

54:26 - Recording Gear
Check out episode 037 for a full rundown of all of our recording gear

Wes:
Heil PR40 Pack
dbx 286s
Focusrite Scarlett 2i2

Scott:
Electro Voice RE-20
Sony a7 III
Focusrite Scarlett 2i2

58:32 - Misc
Wes:
Peak Design Everyday 30L Backpack
Skyroam Solis…
Hasty Treat - JSON, JSONP and CORS

6 augustus 2018 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:52
What is JSON?
5:09
Origin policy in the browser
6:00
Cookies + how they work
6:38
How do you get data from one site to another?
7:00
JSON P (JSON with Padding)
9:00
CORS (cross-origin resource sharing)
CORS errors + learning on the fly
11:31
Canvas elements
12:24
Proxies
Crossorigin.me
Enable-cors.org
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 Lees meer
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources

1 augustus 2018 · 1 uur
Afspelen

It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more!
VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:37
Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place?
Operator Mono
Dank Mono
Fira Code
6:10
Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency?
9:10
Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source?
10:45
Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it?
Try Github
13:35
Question: Grant Chambers - What are some tips for going to your first meetup?
React Meetups
20:23
Question: Michael Hoffman - Have you ever thought about using Linux or Windows as your main operating system?
Google Pixelbook
Microsoft Surface Pro
Figma
Logic
Sketch
Mint OS
Final Cut Pro
27:39
Question: Would you recommend using Upwork for starting out freelancing or something similar?
31:18
Question: Mike C. - What do you guys think about sites like Codewars and Code Fights? Being new to web development, I find the problems hard to solve. Is it important to know how to solve all these problems? If so, how do I get better at developing the mindset to solve them?
JavaScript 30
Level Up Tutoria… Lees meer
Hasty Treat - Whats the deal with npm, yarn and lock files?!

30 juli 2018 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much more!
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 4:10
What is npm and yarn?
8:00
What’s the difference between npm and yarn?
12:00
What is semver?
16:40
What is the dependency tree?
This is the problem that lock files solve
20:32
Cool new features of npm and yarn npx
security warnings Lees meer

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
The Undocumented Web: scraping, private APIs, proxies and “alternative solutions”

25 juli 2018 · 1 uur 5 min
Afspelen

What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices.
Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:05 - What Is the undocumented web?
When traditional methods don’t give you what you want
Wild West
6:10 - Undocumented APIS
Instagram’s private API
Use dev tools’ XHR Request
React Dev Tools will also have the data
Ep 008 - Wes Bos Origin Story
Realtor.ca - MLS Mapping
Simon Willison’s Zeit Day Talk about XML files Lees meer

Charles Proxy App - also good for debugging requests
17:34 - Faking
Faking User Agents Sending headers from requests
Free Blackberry wifi on plane

23:52 - Scraping
What is craping?

Cheerio - jQuery like node package
27:30 - Automation
Cron Jobs
Filling out forms instantly
Headless browsers Puppeteer
PhantomJS

33:30 - Proxies
Need a fresh IP address
Need a different country
Side note: Canadians buying stuff in USA M4S1P1 === 41100
API throttling
39:00 - Tips and Tricks
Multiple API keys

diskDB - Text files as databases
Search Github for API keys
Inspect Element and Delete Overlays
Delete Cookiesokay
44:45 - Stories
Photo Voting
MLS Listing
Top Entrepreneur voting cheating
Vanity Plate Checker
My Hockey Team Sucks
Vehicle auction bidding app
youtube-dl
××× SIIIIICK ××× PIIIICKS ××× Scott: Octopath Traveler & OST

Wes 1: AvE Youtube Channel

Wes 2: Mustie1 Youtube Channel

Shameless Plugs Scott’s Level Up Tuts Pro
Wes’ Courses
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes…
Hasty Treat - Refactoring

23 juli 2018 · 27 min
Afspelen

In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 5:00 - What is refactoring and why would you do it?
Re-writing code while maintaining functionality
The first code you write is most likely not your best code
7:32 - Benefits To Refactoring
Keep part of your codebase in your head
Keep codebase timely and up to date (E.g. promises, async, await, etc.)
Writing code from the vantage point of having already built your product
Performance improvement
12:54 - When to refactor
When it’s stopping your from progressing
When brining someone new on to your team
When you can see a more elegant solution
When you’re having performance issues
When you’re sharing or presenting code
When you have a large codebase that needs to be broken up into smaller components
19:03 - Tips on how to refactor
Testing will make refactoring easier
Identify bad code and problem areas
Use git as an escape hatch
Break things into smaller chunks
Publish often use code to npm as modules
Links Facebook’s Codemod
Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer
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 Lees meer
Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More

18 juli 2018 · 1 uur 1 min
Afspelen

Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more…
Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 4:46 - Advice for gaining new skills
Patience and momentum are key
You likely won’t get anywhere significant in two months
Think about where you want to be in five years
Start small
Start with was excites you and let that drive your exploration
Start writing code ASAP. Don’t worry about the right way, just get started.
17:15 - Advice for applying to jobs
Apply for everything. Failing an interview is no big deal.
Each interview is an opportunity to gain experience
Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead
Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary”
Negotiate salaries and perks.
29:32 - Advice for knowing what to focus on
What gets you jazzed? Find something cool and figure out how to recreate it.
Find a problem and figure out how to solve it - build real things.
Don’t focus on tech - tech is just a tool.
38:32 - Advice for impostor syndrome
Listen to this podcast! ;)
Almost everyone has it.
Don’t worry about other people’s progress.
You don’t need to know how to do everything, but you should be able to figure out how to learn.
46:45 - Misc advice
Evaluate things for yourself - don’t blindly follow the loudest voices on the internet
Focus on soft skills as well - time management, communication
Get a mentor
Health and Hobbies - don’t let yourself burnout
Links Ep 044 - How to Learn New Things Quickly
Javascript30
××× SIIIIICK ××× PIIIICKS ××× Scott: Sony A… Lees meer
Hasty Treat - Dot Files

16 juli 2018 · 25 min
Afspelen

In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:15 - What is a dot file?
Access tokens
Settings for editors, etc.
4:40 - Dot file examples
.gitignore
.gitkeep
.rc .babelrc
.bashrc
.eslintrc Lees meer

.env
.DS_Store
.editorconfig
.meteorignore
23:46 - How to keep your dot files in sync
Hot Tip In MacOS, toggle dot files with “Shift + Cmd + .”
Links Wes’ dot files repo Prettier
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Design Systems

11 juli 2018 · 57 min
Afspelen

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more…
VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:40
Design Systems 101 Wes’ Tweet about Design Systems Lees meer

9:40
Organizational elements of design systems It’s all about consistency

23:07
Best tools for building design systems and style guides Figma
Relay for Figma
InVision Design Systems Manager
Airbnb Lona
Brad Frost’s Pattern Library
uiengine

41:52
Where to learn more
Links Guide to Design Systems by InVision
Shopify’s Design System
Mailchimp’s Voice and Tone
Zendesk Garden
Material Design
Awesome Design Systems
Design Systems Repo
Design Systems
Docz
Facebook Yoga
StorybookJS
Stuart Clarke-Frisby Tweet
Figma’s Platform
Figma Styles and Prototyping
Design Systems Newsletter
××× SIIIIICK ××× PIIIICKS ××× Scott: CalDigit TS3 Plus

Wes: Picasso Tiles

Shameless Plugs Scott’s Level 1 Electron Course
Wes’ Advanced React Course (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
Hasty Treat - User Role Systems

9 juli 2018 · 19 min
Afspelen

In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:30
How to manage user role systems
11:30
Client side best practices
Don’t rely on front-end role systems as a security measure
14:13
Where to store your roles
Start simple and get more complex as needed
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets Lees meer
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials

4 juli 2018 · 1 uur 4 min
Afspelen

It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Show Notes 4:48
How long should you stay with each job and/or company?
8:20
What is the best way to work remotely?
Tips for remote working Have a dedicated space
Clear on and off times
Have a time for winding down
Make specific TODO lists
Use blocking software to help you stay focused
Switch up the scenery / Work in different places Lees meer

15:26
What are the trade-offs with using WordPress in a headless setup vs a tradition setup?
21:28
How do you deal with API credentials in React?
27:15
How do you keep an eye on performance with an app/site over the long-term? Check uptime
Check the performance features in browser dev tools
Use error checking software
Host-based performance tools
Newrelic
pingdom
LogRocket

34:28
What happened to Canvas after all the hype around HTML5 a few years ago?
40:15
How do you deal with analysis paralysis? Just get to work - you can always change things later
Do research, but don’t let it get in the way of shipping

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

50:14
As a freelance developer, what are some good questions to ask before taking on a client? Budget
Scope
Preferred communication me…
Hasty Treat - Domain Management

2 juli 2018 · 27 min
Afspelen

In this Hasty Treat (Short episode) Scott and Wes discus all things domains. Where to get them, how to set them up and how to safe time managing them all in one place.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:30
What is a domain?
4:59
What is DNS?
6:00
Nameservers
8:30
What is a DNS provider? DNS Simple
Cloudflare
Hover
Name
Domainr
iwantmyname Lees meer

13:30
Different types of DNS records
17:00
Different kinds of domains .com, .tv, .io, etc.

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
Marketing for Developers

27 juni 2018 · 1 uur 18 min
Afspelen

Scott and Wes talk about marketing. Specifically how to do marketing if you’re a developer wondering where to start.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Show Notes 7:58 - Personal Branding
Build trust and reciprocity
Be authentic to yourself and let that carry through in your work.
Have the guts to put yourself out there and establish yourself as an expert. Speak at conferences
Write blog posts
Make YouTube videos
Be on podcasts
Start your own podcast Lees meer

14:50 - Running a Business
Treat people well.
Reward your customers.
Don’t punish your users.
Have a refund policy.
19:26 - Social Media
Don’t push people off a platform. Bring content to them that is tailored for that platform.

Get in early, before the platform becomes super crowded.

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

Twitter
Be helpful - small, digestible tips and tricks and great for growing a Twitter following.
Quality is still the key.

Steve Schoger is a great example of consistent, high quality content.

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

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

Instagram
Recently IG has been blowing up for web developers.

Dhanish is a perfect example of how to do Instagram well…
Our Workflows: Design, Development, Git, Deployment

20 juni 2018 · 1 uur 7 min
Afspelen

It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.
Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
VueSchool.io's Vue.js Masterclass Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Show Notes 4:00 - Design Workflow
Wes:
Screenshots of look + feels
Sketch layouts out in pencil
Mock up layout in Sketch
Once rough layout is done, I refine
Once I have: colors, type, patterns, textures and overall layout, I move to code.
A design program is important to vs designing in code Lees meer

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

New card animation idea from Patagonia

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

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

32:06 - Git Workflow
Wes:
Tear off a branch - name after issue - DEV113
Do your work
Rebase
Squash
Pull Request
Rinse + Repeat

Scott
Master branch is 1-1 with live
Develop is where work is done (but not really because I make a feature branch…
Progressive Web Apps

13 juni 2018 · 1 uur
Afspelen

Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Show Notes 2:00
What’s the deal with the GitHub / Microsoft acquisition?
6:05
What is a Progressive Web App?
8:55 - Progressive Web App Checklist
What are the baseline features for a Progressive Web App? 09:25
Site is served over HTTPS
Let’s Encrypt
11:05
Pages are responsive on tablets & mobile devices
11:35
All app URLs load while offline
Use a Service Worker
16:35
Metadata provided for Add to Home screen
18:40
First load fast even on 3G
20:00
Site works cross-browser
20:15
Page transitions don’t feel like they block on the network
22:20
Each page has a URL
What makes an exemplary Progressive Web App? 27:42
All content is indexed by Google
28:38 Lees meer

Schema.org metadata is provided where appropriate
Social metadata is provided where appropriate
29:42
Canonical URLs are provided when necessary
User experience 31:43
Content doesn’t jump as the page loads
Scott’s Pro Gatsby Course
36:52
Pressing back from a detail page retains scroll position on the previous list page
37:34
When tapped, inputs aren’t obscured by the on screen keyboard
The Best of the rest 38:22
Content is easily shareable
Site is responsive
Any app install prompts are not used excessively
The Add to Home Screen prompt is intercepted
39:20
Use cache-first networking
Device APIs 40:34
Web RTC
Get User Media
41:50
Push API
45:12
Accelerometer
GPS
45:55
Payment Request API
47:12
Local Storage
48:03
IndexedDB
48:35
StorageManager
51:45
Vibration API
52:58
Use Lighthouse to improve the quality of your web apps
××× SIIIIICK …
SSR, SEO, Tips for Students, music, security and GraphQL

6 juni 2018 · 1 uur 1 min
Afspelen

It’s a Potluck episode - you bring the questions and we turn them into tasty treats.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Show Notes 2:15
What’s the best resource for staying up to date with Javascript?
3:48
How do you stay motivated if you don’t like your current project?
7:08
What’s your favorite music to work to?
11:10
In what order should developers learn tools related to GraphQL?
13:48
As a JS developer, is it a good idea to learn other languages like PHP or Python?
19:55
As a CS undergrad, what can you do in terms of programming that could be a great benefit after graduation?
23:14
Should you be concerned about SEO when using JS frameworks like React?
28:17
How can you build your network when you’re too tired or busy to go to a bunch of meetups?
32:55
How do you come up with such good designs and UI for your courses?
36:37
As more websites move to secure connections, where can a noob learn the basics of https, SSL certificates, how to deploy a secure website, etc.?
43:05
Have you had experience working for large companies and how does it compare to smaller companies and/or freelancing?
47:30
What are other programming podcasts you listen to?
××× SIIIIICK ××× PIIIICKS ××× Wes: SpikeBall / Slammo Lees meer

Scott: Stance

Shameless Plugs Scott’s Level 2 React 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

Alle afleveringen

The State of JavaScript 2018

Hasty Treat - Uses for CSS Variables

Holiday Gift Guide

Hasty Treat - Should you install a dependency or roll your own?

Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More

Hasty Treat - How to become well liked at work

React Hooks

Hasty Treat - How to become a sticker mogul

Live at JAMstack_conf

Hasty Treat - Stumped! 03

Pre-launch Checklist

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 3

Potluck - Working with designers × Is WordPress Crap? × When to stop working × More

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 2

Fitness for Developers

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1

Top 18 New Things in JS - Part 2

Hasty Treat - Hacktoberfest

Top 18 New Things in JS - Part 1

Hasty Treat - Stumped! 02

Potluck - JS × Web Components × Security × They took our jobs!

Hasty Treat - Positivity and Web Development

Specialization vs Generalization

Hasty Treat - Feedback and Criticism

11 Habits of Highly Effective Developers

Hasty Treat - Reading Documentation

Accessibility

Hasty Treat - Stumped! Interview Questions

Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends

Hasty Treat - Framer X and Prototyping Tools

Design Tips for Developers

Hasty Treat - Goal Setting

The React Episode

Hasty Treat - Building Curriculum for Courses

Our Office Setups (Gotta Get The Gear)

Hasty Treat - JSON, JSONP and CORS

Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources

Hasty Treat - Whats the deal with npm, yarn and lock files?!

The Undocumented Web: scraping, private APIs, proxies and “alternative solutions”

Hasty Treat - Refactoring

Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More

Hasty Treat - Dot Files

Design Systems

Hasty Treat - User Role Systems

Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials

Hasty Treat - Domain Management

Marketing for Developers

Our Workflows: Design, Development, Git, Deployment

Progressive Web Apps

SSR, SEO, Tips for Students, music, security and GraphQL