Logo

    Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!

    enJuly 31, 2019
    What is meant by state in web development?
    How does Wyze enhance smart home technology?
    What challenges do Wyze bulbs face?
    Why are bitwise operators often avoided by developers?
    What alternatives to Dropbox are suggested for project backups?

    Podcast Summary

    • Understanding the current state of an applicationRecognizing and managing state is vital for creating and managing complex web applications, from simple loaded/not loaded conditions to user authentication and dynamic page changes.

      State in web development refers to the current condition or situation of an application at any given moment. It's important to understand state because as applications grow, they have more situations they can be in. For instance, a user logging in changes the state of the application, or the navigation being open or closed is also the state of that navigation. The state of an application can be as simple as whether it's loaded or not, or as complex as user authentication and dynamic page changes. Understanding state is crucial for building and maintaining web applications effectively.

    • Managing States in ApplicationsEffectively managing states in applications involves using tools like state machines, Firebase, and WebSockets to model, manage, and communicate real-time data.

      State refers to the current condition or data in an application. This can include things like the logged-in user, open navigation menus, or items in a shopping cart. State can be compared to different states of CSS elements, such as regular, visited, hover, and active. Outside of programming, state can also refer to real-world information, like the current president or number of family members. State machines are a way to model and manage the different states of a system, and can be useful for complex applications. Firebase and WebSockets serve different purposes. Firebase is a platform for storing and managing data in real-time, while WebSockets are a technology for creating a real-time, bidirectional communication channel between a client and a server. Using Firebase can simplify the process of implementing real-time functionality, as it includes hosting and other services. However, for more control and customization, WebSockets may be a better choice. Overall, understanding state and how to manage it effectively is crucial for building dynamic and responsive applications.

    • Firebase vs Self-Hosted Solutions: Pros and ConsFirebase offers ease of use and investment from Google, but lacks flexibility and control. Self-hosted solutions like Meteor and MongoDB offer more flexibility and control, but require more effort and resources for maintenance. Beginners or smaller projects may benefit from starting with Firebase and transitioning to a custom solution later.

      While Firebase is a popular choice for building real-time applications due to its ease of use and Google's investment, it comes with the potential downside of being a closed platform. On the other hand, using a self-hosted solution like Meteor and MongoDB offers more flexibility and control, but requires more effort and resources for maintenance. For beginners or smaller projects, Firebase could be a good starting point, with the possibility of transitioning to a more custom solution later on. As for personal updates, the hosts discussed their fitness journeys and the challenges of maintaining a healthy lifestyle as parents. They agreed that while progress has been made, there is always room for improvement and that a third fitness episode could be a good addition to their content lineup.

    • Focus on core programming skills and staying updated with industry trendsLearn HTML, CSS, and JavaScript as a foundation, adapt to new tools and frameworks, and continuously reevaluate and learn to stay relevant in the tech industry

      It's challenging to predict the specific technologies and skills that will be relevant in the tech industry five years out. Instead of focusing on the distant future, it's recommended to focus on learning core programming skills like HTML, CSS, and JavaScript, and keeping an eye on industry trends. The tech landscape may change, but having a solid foundation in these areas will make it easier to adapt to new tools and frameworks as they emerge. Additionally, constantly reevaluating and learning new things is crucial to staying relevant in the industry. As the speakers noted, technology may evolve, but the fundamental principles of programming remain constant.

    • Managing billing and accounting with FreshBooksFreshBooks simplifies invoicing and payment processing for developers, saving time and effort. Remote work offers flexibility and opportunities, but effective communication skills are crucial.

      FreshBooks is a valuable tool for managing billing and accounting needs for developers looking to advance in their careers. FreshBooks simplifies the process of sending invoices and getting paid online, saving time and effort. While it may be easier for juniors to learn from colleagues in person, remote work is not a disadvantage for everyone. The skills of working remotely and effectively communicating through digital channels are important to master. Ultimately, the decision to pursue a remote job depends on individual circumstances and priorities. For those who value learning from experienced colleagues in person, it may be worth considering an in-office role. However, remote work can offer flexibility and opportunities that may not be available in a traditional office setting.

    • Finding motivation in coding through personal interests and setting goalsIncorporating personal interests into coding projects and setting goals can increase motivation and engagement in the work. However, using obscure features in production apps can make the code less readable and harder to maintain.

      Finding motivation in coding comes from being excited about the work itself. This excitement can be fostered by incorporating personal interests and hobbies into projects, or by finding ways to make the work more engaging and challenging. For instance, if someone is passionate about animation, they might focus on learning and implementing animations in their coding projects. Motivation can also be increased by setting goals, such as making money from the work or working on projects with potential for growth. Regarding the use of obscure features in production apps, while they may look neat and offer some benefits, they can also make the code less readable and harder to understand for other engineers. This can lead to difficulties in debugging and refactoring the code in the future. It's generally recommended to use clear and well-documented code that is easy for the team to understand and maintain.

    • Bitwise operators vs. readability and understandingBitwise operators may offer faster performance but their lack of readability and difficulty in understanding can outweigh the benefits for many developers. Consider alternatives for version control and backups like Backblaze instead of resource-intensive tools like Dropbox.

      Bitwise operators, despite their perceived benefits like faster performance and fewer characters in code, may not be worth the downsides for many developers due to their lack of readability and difficulty in understanding their effects on bits. The speaker shared his personal experience of removing them from his codebase due to frequent confusion and the need to constantly look up how to use them. Another topic discussed was the use of Dropbox for JavaScript projects. The speaker shared that he had been using Dropbox to back up his projects for over a decade and found it useful for reverting accidental changes. However, he mentioned that Dropbox has become a resource hog on his computer, taking up significant CPU and memory, and that he was looking for alternatives. He also expressed disappointment with Dropbox's recent focus on tools for teams and competition with Slack, and mentioned that he still uses Backblaze for backing up his entire computer, including node modules folders, without any noticeable impact on system resources.

    • Experimenting with Tools: Dropbox for Passive Backup and Firefox Developer Edition for Developer ToolsTry new tools like Dropbox for passive backups and Firefox Developer Edition for impressive developer features, but understand personal preferences to optimize workflows.

      While tools like Dropbox and Firefox Developer Edition offer numerous benefits, personal preferences and habits can make it challenging to fully commit to using them as primary options. The speaker shared his experience of using Dropbox for passive backup and Firefox Developer Edition for its excellent developer tools, but he still found himself returning to his default browsers. He suggested trying a week-long experiment with Firefox to identify specific reasons for continuing or discontinuing its use. The speaker also emphasized the importance of passive backups and using tools like Dropbox for safeguarding work. He acknowledged feeling uneasy about Dropbox as a company but appreciated its functionality. Regarding Firefox Developer Edition, the speaker highlighted its impressive features, particularly its font and clip path tools, but admitted that he couldn't fully commit to it as his daily driver. He encouraged those who enjoy visual editor-style tools to give it a try. Overall, the discussion underscored the importance of experimenting with various tools and understanding personal preferences to optimize workflows.

    • Discussing the future of web development with BEM and AIWhile AI may take over some web development tasks, the importance of understanding CSS structure and human connection ensures continued demand for web developers.

      While there may be concerns about machine learning and AI taking over certain front-end development jobs, it's unlikely that web developer jobs will disappear entirely anytime soon. The discussion touched upon the use of methodologies like BEM in organizing CSS and the potential for native scoping solutions in CSS. The speakers expressed their appreciation for the structure and consistency that BEM provides, even if they don't always prefer its syntax. They also acknowledged the potential for AI to take over some basic web development tasks, but noted that services like Wix and Squarespace already exist and haven't eliminated the need for human developers. Ultimately, the importance of understanding the structure and components of CSS, as well as the need for people to connect and build things, ensures that web development jobs will continue to be in demand.

    • Focusing on complex problems as technology simplifies tasksPractice regularly to build confidence and tackle future complexities despite anxiety during interviews or coding challenges

      Technology will continue to advance and automate easier tasks, but the hard, complex challenges will remain for humans. The speaker suggests that as technology makes the simple tasks easier, we can focus on tackling more complex problems. However, anxiety and fear during interviews or coding challenges can hinder performance. The solution is to practice regularly, whether through real interviews or simulated ones with friends or partners. The more experience we gain, the more confident and prepared we will be to tackle the complexities of the future.

    • Practice makes perfect in overcoming fear and improving skillsRegular practice and exposure to challenging situations helps build confidence and reduce anxiety. Useful tools like Sentry can make the process less intimidating in software development.

      Practice is key to overcoming fear and improving skills, whether it's public speaking or job interviews. Exposure to challenging situations through practice helps build confidence and ease anxiety. For instance, if you're preparing for a coding interview, find and practice solving common coding challenges related to the specific technology or job role. If you're feeling rusty, consider going on practice interviews. Repetition and consistent exposure to the fear-inducing situation will make it less intimidating over time. This concept is known as exposure therapy, where individuals are gradually introduced to their fears in a safe environment. The same principle applies to children and their fears. Instead of shielding them from their fears, expose them to them in a controlled manner and provide positive reinforcement. In the context of software development, Sentry is a useful tool to help developers identify and solve bugs in their applications, making the development process less daunting and more productive.

    • Discussing favorite picks on Sentry and childhood showsThe hosts recommend Sentry for transparency in monitoring and endorse Arthur and Wyze Sense pack for cost-effective and upcoming Google Home integration

      Sentry is a highly recommended operating system and browser monitoring platform that the hosts have personally used and endorse. They appreciate the transparency it provides, making it clear when their endorsement is sponsored or not. The hosts' current picks are Arthur, an old childhood favorite kid's show now available on the CBC Kids YouTube channel, and the Wyze Sense pack, a cost-effective set of sensors for Wyze cameras that offer contact sensors, motion sensors, and a bridge. The hosts are excited about the upcoming Google Home integration for these sensors. While discussing their picks, they also shared a light-hearted moment about their love for Arthur and the possibility of anteaters eating bugs.

    • Affordable and Easy-to-Use Wyze Smart Home SolutionsWyze offers battery-operated, hub-free smart home devices like motion sensors, cameras, and bulbs with real motion detection and no monthly fees.

      Wyze is a company offering affordable and easy-to-use smart home solutions, including motion sensors, cameras, and bulbs. These devices are battery-operated and can be connected to a bridge that plugs into an existing camera or hub. Real motion detection is possible due to the comparison of frames on the camera. Wyze is known for its lack of monthly fees and no requirement for a hub or hub purchase. The company is continuously innovating and has a strong community of developers and beta testers. While there are some challenges with their bulbs, such as the need to keep the switch on for them to work, they offer a nifty solution for those interested in smart home technology. Wyze is also rumored to be releasing a new outdoor camera soon. If you're interested in learning more about Wyze and its offerings, consider joining their Facebook group, WiseLabs Beta Testers. Wes and I, as part of this podcast, also create web development courses where we teach various topics. I'd like to shamelessly plug my CSS Grid course, which provides a comprehensive understanding of the CSS Grid layout system. If you're interested in expanding your web development skills, be sure to check it out.

    • Explore free CSS Grid courses and ecommerce with GatsbyLearn CSS Grid for free with a Firefox-sponsored course, build a Gatsby store in the 'ecommerce with Gatsby' course, and master dev tools with the 'dev tools and debugging' course.

      There are several free learning resources available for mastering CSS Grid, including a comprehensive course sponsored by Firefox. This course not only teaches CSS Grid but also helps users get comfortable with the Firefox dev tools. Additionally, a new course titled "ecommerce with Gatsby" will be released on July 31st for those interested in building their own Gatsby store. Furthermore, there's a course on "dev tools and debugging" that dives deep into every tab and feature of Chrome Dev Tools, helping users solve common bugs. Make sure to check out Level Up Tutorials for these courses and save 25% with the gear offer.

    Recent Episodes from Syntax - Tasty Web Development Treats

    817: You Need These 30 Apps - PART 1

    817: You Need These 30 Apps - PART 1

    Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    816: Why Your CSS Sucks

    816: Why Your CSS Sucks

    Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    815: Deno 2 with Ryan Dahl

    815: Deno 2 with Ryan Dahl

    In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    814: Fundamentals: HTML

    814: Fundamentals: HTML

    In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    813: CSS: Scroll Driven Animations

    813: CSS: Scroll Driven Animations

    In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    How To Stay Up To Date with Daily.dev’s Francesco Ciulla

    How To Stay Up To Date with Daily.dev’s Francesco Ciulla

    In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!

    808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!

    In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    Use The Platform!

    Use The Platform!

    In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Advice for New Devs

    Advice for New Devs

    In this episode of Syntax, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level up.

    Sanity - Sponsor

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

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    01:59 - Get comfortable with your code not working

    • All of our code is broken much of the time.

    02:40 - Compound learning and momentum is your biggest tool

    • There is no formation without repetition.
    • It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs.

    04:05 - Learn to read error messages

    • Is this error coming from my code?
    • Is this coming from the library? If so, maybe the library wasn’t expecting that.
    • Is this coming from the browser? An extension? Is it even related?
    • Stack trace is a treasure map

    09:42 - Take the time to learn the concepts that scare you

    • They are often easier than they seem (though not every time).

    10:40 - We all struggle

    • This stuff is hard — give yourself a break.

    12:56 - Taking a walk is good for solving bugs

    • It’s hard to walk away from broken code, but it really helps.

    14:33 - Get comfortable with the command line

    • You’ll need it

    18:09 - The ability to replicate a design pixel perfect is a valuable skill

    • You will be shocked at how many devs can’t or don’t do this. If you want to avoid spending extra time on something, don’t make the designers tell you to go back and fix simple spacing, color, and detail things.

    21:26 - You are on a team

    • Don’t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something.

    24:10 - You are not an expert

    • Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game.

    26:14 - Scaffold with comments

    • It helps keep you organized once you get into the mess

    28:30 - From Twitter

    29:30 - Ben Newton

    32:46 - Eric McCormick

    33:31 - Jason Liggi

    35:34 - Andrew Nickerson

    37:15 - Michael Powers

    39:33 - Jason Liggi

    40:14 - Swashata

    49:59 - Max Stoiber

    43:34 - Pat Clarke

    44:21 - Musa Barighzaai

    45:20 - David Moore

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Hasty Treat - Web Dev Resource Sick Picks

    Hasty Treat - Web Dev Resource Sick Picks

    In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!

    LogRocket - Sponsor

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

    Show Notes

    2:03 - Twitter Accounts

    5:00 - Web Dev Resources

    7:37 - Design Resources

    11:36 - Desktop Tools

    14:59 - YouTube

    Links

    Tweet us your tasty treats!

    Quick Update: Jake Likes React

    Quick Update: Jake Likes React

    Dude, check it out! In this totally rad podcast sesh, you got Seth Whiting, this mega experienced coder with like a decade of tech wizardry, and then there's Jake Pacheco, this chill barber turned code surfer riding the learning waves for 13 weeks. They're diving deep into React, man. Jake's stoked on how React vibes with him, especially after he got the lowdown on JavaScript, HTML, and CSS. He's all about Code Academy's React course, diggin' the hands-on code action over those vid tutorials. He's cruising through concepts like conditional rendering and mapping, and it's all starting to fit in the big picture, ya know?

    The hosts are all about teamwork in the coding lineup. They're sharing tales of hooking up with Chelsea, this other coder shredding through JavaScript. They're high-fiving over helping each other carve through coding challenges. And they're laying it down that grasping the core logic of coding concepts is key to riding the gnarly learning curve. They're throwing in some tips for checking out documentation, suggesting newbie-friendly stops like W3Schools.

    And hey, they're not just riding the wave, they're shaping it too! Seth and Jake are spilling the beans on crafting clean, efficient code. They're droppin' knowledge on the art of efficient code reviews, bro. They're tossing around the idea of "modular code," think of it like building legit components that work together like a killer squad. They're all about nailing that efficient vibe while being cool with different coding styles.

    Wrapping it up, these dudes are pumped about their coding journey, ready to catch more React barrels and ride the coding currents. They're vibing on the energy of their listeners and even throwin' the idea of future collabs into the mix. Seth's leaving you with some stoked words, saying as your coding mojo grows, those initial bumps turn into a seriously tubular coding ride. Keep it cruisin', bro!

    Special thanks to Diarrhea Planet for our intro and outro music and @SkratchTopo for our artwork.

    How Long Is This Going To Take??

    How Long Is This Going To Take??

    Get ready to hang ten with Seth Whiting and Jake Pacheco in this enlightening podcast episode. They'll take you on a gnarly journey through the coding and web development world. From Jake's transition from barber to coder, to the simplicity of HTML and the creative power of CSS, they cover it all. They even dive into Jake's wild Vegas trip, the importance of health, and Seth's daughter's rad birthday party.

    In the next segment, they explore website design, career opportunities, and Seth's transition from freelancing to a full-time gig. They highlight the blend of artistry and coding in web design, the competitive market, and the challenges of estimating project timelines. They also share insights into the pride of being a coder in their location, the non-monetary benefits of learning to code, and the value of non-technical skills like networking and communication.

    The episode wraps up with an in-depth discussion on coding interviews, algorithms, and problem-solving skills. They debate the relevance of algorithmic questions in real-world scenarios and the importance of interview simulations mirroring actual job tasks. They touch on recruiters reaching out, using Google as a reference, and the time it takes to reach high-paying positions in programming. Tune in and ride the wave of coding knowledge with Seth and Jake!

    Special thanks to Diarrhea Planet for our intro and outro music and @SkratchTopo for our artwork.