Hasty Treat - CSS and JS Pointer Events
In this Hasty Treat, Scott and Wes talk about pointer events in CSS and JS - what they are, their differences, why you may want to use them, potential downfalls and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:24 CSS pointer events 10:50 JavaScript pointer events 14:24 What are pointer events 17:56 Browser support Links CSS pointer events JS pointer events Pointer events support in WebKit Pointer events Polyfill Wes’ Javascript 30 Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
31 Dec 201821min
CSS Layout
In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. CSS In Depth and In Motion - Sponsor CSS in Depth in Motion from Manning Publications is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout. Show Notes 4:15 When to use position fixed/static/absolute/relative/sticky 15:18 When to use height, width, max-height, max-width, top, bottom, left, right, etc. 21:28 What about relationships between containers and their children? 27:37 What about positioning behaviors of elements like , , , etc.? 30:09 Floating and clearing 35:55 Flexbox, Grid and responsive design 36:58 Mobile-first or desktop-first? 41:20 Viewport units - vw, vh, vmin, vmax, etc Links Keycode.info ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Podcast Wes: Flying a DJI Tello Drone with React and Node.js Shameless Plugs Scott’s Design Systems Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
26 Dec 201853min
Hasty Treat - Where are they now? Part 2
In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any more. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:40 - jQuery UI / jQuery Mobile jQuery UI jQuery Mobile Sencha Touch 6:10 - Flash / Silverlight Flash Cufon Silverlight Netflix Happy Gilmore The Wedding Singer 10:54 - Grid systems 960.gs Golden Susy Bootstrap Foundation 16:02 - CoffeScript CoffeScript Compass 18:18 - Underescore.js Underscore.js Lodash jsPerf 20:04 - Less CSS Less CSS Vue.js Drupal Cappuccino Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
24 Dec 201826min
Potluck - Typescript × E-commerce platforms × Job-hopping × Working for agencies × More
It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping 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. Vue.js In Action - Sponsor Vue.js in Action from Manning Publications is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, this is the one. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout. Show Notes 1:20 How do you distinguish between normal and virtual pixels on high dpi devices. How do you call Pixels? Which tools do you use for optimizing Images? 5:02 What are your thoughts on TypeScript (and selfishly, I’d like to learn about using it with React)? Any temptation to try it out if you’re not already doing so? Why or why not? Any resources you’d like to share on TypeScript? 8:35 I have heard you guys say good things about Digital Ocean before, but am reading a lot of bad reviews about them on various websites. Are these just frustrated developers or is there any merit to these claims? 12:48 If you were to build an eCommerce store, given that your business requirements specify that custom functionality is needed, would it be smart to roll your own solution or use Magento/Shopify/Woocommerce? If the later, what is the developer experience like? Which has the greater ability to implement custom functionality for server and client side code? 19:50 I feel like I’m pretty “bos” at starting projects but so terrible at finishing them. As people who finish courses and projects all the time, what is your advice for getting to that finish line? 23:32 Could you please explain how you organize your files? What is the folder structure you use for both your projects and other documents/videos and stuff? 31:38 You guys mention working for “agencies” in the past. As a freelance web developer, what’s the best way to find these agencies, and to be employed by them? Also, can you explain what “agencies” are? 38:14 I once read an interview Wes gave in which he mentioned that frequently changing jobs is the best way to get salary increases. Do you both believe that to be true? Is job-hopping a bad thing? Is the criticism of it justified? 41:53 If I choose to use Next.js, does that mean I won’t be able to use new React features like hooks and suspense until/if the Next.js team implements those? 43:12 When do you use and when do you use to wrap your many returned components from render()? Links Devon Govett tweet about Typescript Digital Ocean Magento Shopify WooCommerce Reaction Commerce Snipcart Next.js Gatsby.js True Grit Texture Supply ××× SIIIIICK ××× PIIIICKS ××× Scott: Undertale Wes: Ghostly Pixels Shameless Plugs Scott’s Level Up Pro Wes’ YouTube Channel Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
19 Dec 201851min
Hasty Treat - Where are they now?! Gulp, Grunt, Bower, Backbone and Compass
In this Hasty Treat, Scott and Wes talk about libraries that have been super hot in the past, but not so much any more. 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/syntax and get a free pair of socks! Show Notes 4:14 Grunt / Gulp 8:56 Backbone / Marionette 13:00 Bower / Components 15:46 Compass Links Grunt Gulp Backbone Marionette Bower Components Compass 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
17 Dec 201822min
Not a Clip Show - Episode 100!
To celebrate episode 100, Wes and Scott are talking about Syntax - their most popular episodes, stats, Q&A, and a bunch of cool stuff about what it’s been like making this show for 100 episodes. 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:45 - Celebrating 100 episodes 04:18 - Our first episode Syntax001 - React Tools 06:23 - Our first sponsor Delicious Brains 09:37 - Most popular episodes 10 - Syntax074 - 11 Habits of Highly Effective Developers 09 - Syntax039 - Is jQuery Dead? 08 - Syntax046 - What’s New in Javascript 07 - Syntax048 - VS Code Round Two 06 - Syntax050 - Progressive Web Apps 05 - Syntax018 - All About CSS Grid 04 - Syntax051 - Our Workflows: Design, Development, Git, Deployment 03 - Syntax066 - The React Episode 02 - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer 01 - Syntax044 - How to Learn New Things Quickly 21:35 - Top countries Just passed 3 million downloads 10 - Poland - 38,731 downloads 09 - Brazil - 40,475 downloads 08 - Netherlands - 47,601 downloads 07 - India - 50,724 downloads 06 - Sweden - 55,378 downloads 05 - Australia - 80,654 downloads 04 - Germany - 109,842 downloads 03 - Canada - 138,250 downloads 02 - United Kingdom - 231,835 downloads 01 - United States - 1,220,519 downloads 27:34 - Top players AppleCoreMedia Overcast Chrome Pocket Casts iTunes 30:35 - Lessons learned about sponsors Pays the bills - editing, hosting, etc… Podcast Royale - Podcast production Libsyn - Podcast hosting They want hard numbers Conversions are hard to track It’s really cool companies and users that enjoy the product hook up How do we get them? 35:10 - Favorite episodes Wes - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer Scott - Syntax044 - How to Learn New Things Quickly 38:49 - Q&A Q: What’s your favorite soundboard sound? Q: What’s your recording process like? Do you each record your streams locally then edit them together or are there any “hax” you guys have cooked up as developers? A: Pay someone who is good at editing We both have good recording gear We record separate files and send them our production team, Podcast Royale, for editing We do show notes in Dropbox Paper, which are also edited by Podcast Royale Q: Does Scott practice his segues, or do they just come to him on the fly? A: On the fly 😎 Q: Although I am all for peace, why did you choose “peace” as your outro statement? A: It was a random note from Wes in the first episode and we stuck with it Q: how did you meet each other and decided to start the podcast? A: We both released a course around the same time with the same name - we started talking and the rest is history Syntax007 - Scott Tolinski Origin Story Syntax008 - Wes Bos Origin Story 51:20 - Most asked questions What episode was it that you ______ ? Can my boss come on the show and talk about bitcoin? Can you sick pick my thing? Can you do an episode on VueJS? Can you do an episode on Angular? NO EP TODAY? 54:20 - Random thoughts Neat to have community - lots of experts Twitter is great Sales of our own products Transformed Level Up Tuts Doing fitness, hobbies, and life as a developer is fun Learned a lot from researching shows and from community feedback Different voices can give different breakthroughs 57:10 - Future of Syntax No. 1 goal is to always be a fun, helpful show Not going to become a promotional tour stop Maybe more interviews Easy to listen to and and understand Links Netlify Podcast Royale Libsyn Dropbox Paper Studio 3T ××× SIIIIICK ××× PIIIICKS ××× Wes: MongoDB Compass Scott: Notion Shameless Plugs 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
12 Dec 20181h 7min
Hasty Treat - Costs of Running a Business
In this Hasty Treat, Scott and Wes talk about the costs of running a business when you’re a solopreneur or solo founder. 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/syntax and get a free pair of socks! Show Notes 3:48 - Email GSuite Missive Drip Postmark Mailchimp Mandrill SendGrid Mailgun 10:44 - Transactional Costs Stripe PayPal Braintree 12:31 - Software Sketch Figma Screenflow iShowU DaVinci Notion Todoist Things Principle For Mac Textexpander Transmit Cyberduck 17:03 - Services PO Box 17:18 - Domains Hover Cloudflare Name.com Gandi 19:30 - Backup NAS Dropbox Backblaze S3 22:12 - Labor Assistant Part-time developer Contractors for projects 24:53 - Insurance Prescriptions Dental Optical Critical illness Home insurance is higher because of business 26:51 - Professional Accountant Lawyer Bookkeeper TransferWise 29:08 - Hosting CDNs Galaxy Heroku Dokku Netlify Compose Vimeo Amazon S3 Digital Ocean Now.sh Bluehost mlab 34:16 - Travel Taxi / Hotel Dinner Transportation Uber Links Codepen Radio - Software We Pay For 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
10 Dec 201836min
The State of JavaScript 2018
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 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
5 Dec 20181h 2min
