933: Hackweek Overview - What Is It, What Did We Build

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 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. 49:55 - Paid Advertising Don’t be sleazy. Ads are good for getting likes and driving some traffic to something, but it takes experimentation to get the best bang for you buck. 54:40 - Email marketing Wes: Email is probably responsible for most of my sales. Keeps people up to date and helpful for promoting new courses. Helpful for figuring out what people want. 59:17 - Partnerships A lot of companies want to partner rather than just sponsor. It can be a great way to fund the creation of products/courses. Affiliate programs are great when they work out. 67:30 - Freebies Giving away free content is a surefire way to get people to pay attention. It’s about giving back to the community as much as marketing your products. ××× SIIIIICK ××× PIIIICKS ××× Scott: Cypress: End to end testing Wes: Audiobook: Own the Day, Own Your Life Shameless Plugs Scott’s New Electron Course Wes’ Advanced React and GraphQL 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

27 Juni 20181h 18min

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 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 for each feature and merge in) Contributors issue pull requests into develop 42:34 - Deployment Workflow Scott: Hosted on Meteor Galaxy, container based hosting Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script. Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master. Secrets are kept in a settings.json file that’s used during deployment. Wes: Codeship DeployHQ Git Rsync Dealing with secrets 49:53 - Project Folder Structure Wes: Folder Structure - 0100, 0101… Scott: API UI element -> styled components with index Startup Utilities Links BNO Train Wreck Album Atomic Design Guide Design Systems BrowserSync FontSquirrel fontplop Creative Market Delicious Brain’s WP Migrate DB Pro Ryan Dahl - 10 Things I Regret About Node.js ××× SIIIIICK ××× PIIIICKS ××× Scott: Overcooked - Nintendo Switch Wes: SkyRoam Solis 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

20 Juni 20181h 6min

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 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 ××× PIIIICKS ××× Scott: myNoise Wes: Ozark Trail Drinkware 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

13 Juni 201859min

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

6 Juni 20181h

Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor, VS Code. 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 01:45 Why Scott and Wes use VS Code vs all the other options Stay up to date with all releases 06:05 - Favorite new updates Notification API Auto Import Listing errors in the file explorer Column Selection Interface Customization Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do React Snippets Library Wes’ VS Code settings Visual Studio Live Share 27:40 - Favorite/New Extensions Bracket Pair Colorizer Rainbow Brackets Auto Rename Tag Better Comments Jest Snapshot Tools JS Refactor Import Cost Polacode Carbon - An alternative way to share beautiful images of your source code 38:49 - Themes LevelUp Official Night Owl Cobalt2 40:35 - Tips and Tricks Learn how to jump and select by letter, word, line, etc. Move a line (or Line Bubbling) - Use this for rearranging and/or moving lines of code quickly. Cycling through multiple windows of the same app - If you have multiple VS Code windows open, “Cmd + backtick” will cycle through them, so you don’t have to drag them in and out of view. Adjust MacOS keyboard settings - change Key Repeat to “fast” and Delay Until Repeat to “short”. This will make your editor super fast when holding down arrow keys. Use Git features Git History Spell Checker - “Cmd + .” will open up code actions and you check for possible misspellings, etc. Code Spell Checker Rename Symbol - Much more reliable than find/replace. Sort Lines Select everything between quotes - (Cmd + Shift + Space) 57:25 - Things that could be improved Region folding is inconsistent and sometimes doesn’t work at all. No easy way to tell which extension is causing CPU performance issues. Sidebar indentation isn’t clear. ××× SIIIIICK ××× PIIIICKS ××× Wes: Melnor 4-Zone Digital Water Timer Scott: Tosowoong Enzyme face cleanser Shameless Plugs Scott’s Intermediate React Series Wes’ All Course Secret Sale 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

30 Maj 20181h 8min

Scott and Wes detail the tips and tools you need to get better at debugging. 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 4:00 Read the stack trace 7:35 Make sure you aren’t debugging production Make sure you’re not cached 8:40 Check the network panel for the whole response CORS (Cross-Origin Resource Sharing) 12:04 Use debugger commands in the browser Set breakpoints (race conditions 13:40 Use Source Maps 15:29 Make full use of all console methods console.group/groupEnd/info/ console.log({objNAme}) 17:02 View your code in other browers Make sure your browser is up to date 18:50 Step into and step over function Useful for especially tricky issues 19:47 Look into Scope in dev tools panel 20:33 Recreate it in CodePen or Create React App Helps to quarantine your code Verify where the problem actually is 24:12 Take a break Helps clear your head and approach your problem from a different angle 25:40 Rubber Duck Debugging Forcing yourself to talk it out will often reveal problems/issues 26:40 Check Github issues / ask in Slack Leave your solution in the comments for others 28:12 Use Node --inspect flag 29:57 Read the code in your libs (if you can) 32:34 - Chrome Dev Tools Tabs Rundown 33:10 - Network tab 34:15 - Preformance tab 35:58 - Lesser known tools 36:15 - Firefox Grid Debug 36:20 - Firefox Fonts tab 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window) 37:39 - Chrome Animations Inspector 38:34 - /dev tips & Modern DevTools Course 39:41 - Chrome & FF Layers for 3d and full view of canvas & window 40:51 - Sensors for overriding fake devices sensors Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back 43:12 - Favorite DevTools extensions Apollo React Redux Vue Lighthouse JSON Formatter 44:06 - Application/Storage tab 44:41 - FireFox Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: Hotel Tonight App Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite Shameless Plugs Scott’s Level 2 React Course coming out THIS WEEK! - subscribe and be notified when it’s released Wes’ Courses - Advanced React course coming soon - subscribe to be notified when it’s released 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

23 Maj 201856min

Scott and West talk about what’s new in JavaScript. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX 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. They are also hiring! netlify.com/careers Show Notes 1:55 - Scott’s new studio 4:57 - Pop Motion Pose New library for React or vanilla JavaScript Define locations instead of CSS styles Pass the animation state into a React component as open or closed instead of active or inactive Flip animation techniques Style Fire - Simple HTML & SVG styler optimised for animation 8:44 - Intersection Observer Browser-based API based on observables Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page 10: 32 - MDX Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it Turns MarkDown files into components in Webpack 12:56 - Resize Observer Watch elements for resize 15:47 Web Animations API Works with animations natively in JavaScript Tell your animations to play, pause, reverse, etc. Instead of changing classes, you have full control over what the animation is doing Web-Animation-JS Polyfill Can I use 18:00 - Window Face Detector API Create a new window.face detector and pass it an image tag and it returns an array of faces. 22:53 - Payment Request API Eliminates check out forms Allows platform to handle payment safely and securely 29:23 - INTL.NumberFormat Format pricing with different currencies 32:59 - V8 BigInts Makes working with big numbers more viable 34:53 - Speech Recognition Converts speech to text Pipe in different accents 36:22 - Text To Speech Simulates text into spoken words 41:46 - ES6 Modules In Node There are no ES6 modules in Node. It’s still being developed. If you want to build an ES6 module in Node, you have to use the .mjs extension ××× SIIIIICK ××× PIIIICKS ××× Scott:Dank Mono Wes:Video Doorbell Pro from Ring 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

16 Maj 201856min

It’s a Potluck episode - you bring the questions and we turn them into tasty treats. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax, and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:42 What is an efficient way to process huge data, greater than 740 MB when not working in JS? 6:45 What’s new and shiny thing in web development do you think is going to go the distance? GraphQL Prisma GraphCool GraphQL Playground 11:09 Wes, can you make a course on how to barbecue meat properly? 12:31 How do you go about learning a new language or framework? Ep 44 - How to Learn New Things Quickly 12:54 What are the best things to keep in mind when you are the only developer on a team? 18:07 Is Redux for React dead with the new context API? Redux 21:41 What’s the funnest project you have ever worked on and why? LevelUpTuts 27:19 What’s the best use case for JWP? JWP 29:50 Should I focus on one thing and try to master one technology instead of being a jack of all trades? 35:00 Why do thousands of entrepreneurs build SaaS products on Ruby on Rails? Laravel Laravel Spark CodeIgniter Meteor Hackathon Starter 39:41 Would you use single page application vs SSR for large reactor view apps? SSR Next.js 41:06 What do you use for online learning platforms? Ep 14 - Our Stacks Explained Teachable Moodle ××× SIIIIICK ××× PIIIICKS ××× Wes: Parcel Scott: Nebo Shameless Plugs Scott’s Headless WordPress course Wes’ Instgam Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter

9 Maj 201852min