Logo
    Search

    Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman

    enApril 18, 2018

    Podcast Summary

    • Discussing the merits of Vue.jsScott found Vue.js to be a nice hybrid of Angular and React concepts, but with some 'magical stuff' that wasn't as explicit as React. He believes it requires less work to get things going if one is familiar with it.

      The hosts of the Syntax podcast, Scott Talensky and Wes Boss, had a "potluck episode" where they answered various listener questions. During this discussion, they talked about their thoughts on Vue.js, a popular JavaScript framework. Scott shared his experience of working with Vue.js after using React for a long time. He found Vue.js to be a nice hybrid of Angular and React concepts, but with some "magical stuff" that wasn't as explicit as React. However, he believed that if someone was very comfortable and familiar with Vue.js, they would appreciate its benefits as it requires less work to get things going. Overall, Scott expressed a positive opinion about Vue.js, regarding it as another great flavor of web framework.

    • Speaker's Positive Experience with Vue.jsSpeaker found Vue.js ecosystem, docs, and community excellent, but didn't see reason to switch from React for current project. Values TypeScript and Flow for tooling and preventing messy code, and interested in ViewPress for static site generation.

      The speaker had a positive experience with Vue.js, particularly the Vue CLI, and found the ecosystem, docs, and community to be excellent. However, they didn't see a compelling reason to switch from React to Vue for their current project. They also mentioned that TypeScript and Flow, which offer more rigid typing than JavaScript, can provide valuable tooling and help prevent messy code. The speaker hasn't used either extensively but has seen their benefits when working with GraphQL. Additionally, they mentioned the release of ViewPress, a static site generator for Vue, and expressed interest in exploring it further. Overall, the speaker sees value in Vue and believes it's a worthwhile consideration for developers looking at different frameworks.

    • From jQuery to full-stack JavaScript developmentThe speaker's experience transitioning from jQuery to building full-stack applications with JavaScript, including working with Express and Passport JS, marked a significant advancement in their learning journey.

      The speaker had a transformative experience when they began working with JavaScript frameworks, moving from simple tasks like creating slideshows or adding event handlers with jQuery, to building full-fledged applications with interactive features and database calls. This shift marked a significant advancement in their learning journey from primarily back-end development with PHP, to working with JavaScript for both the front-end and back-end. The speaker mentioned their experience with Express and Passport JS, where they built a Facebook contest app, as a particularly impactful project. However, they also expressed a desire to explore statically-typed languages like TypeScript, Flow, or Reason, but are hesitant to invest time until one becomes the clear industry standard.

    • Learning Node.js and Express for custom applicationsExploring Node.js and Express broadened skillset, led to image uploads and nudity detection projects, and now favored for smaller packages and customization in JS community

      Building a custom application using Node.js and Express expanded the speaker's skill set beyond jQuery and led to the creation of several medium-sized projects. An early experience involved implementing image uploads and nudity detection using the library nude.js. At the time, Node was still new and required more effort to set up compared to popular CMS platforms like WordPress. However, the speaker's curiosity and belief in Node's potential led them to invest time in learning it, even when others were learning Rails. Today, the JavaScript community favors smaller packages and customization, making it an interesting contrast to frameworks like Rails and Laravel. The speaker also mentioned Deploy HQ as a helpful tool for deploying websites directly from git repos to servers.

    • Simplify and automate application deployments with Deploy HQDeploy HQ is a continuous deployment service that automates application deployments for developers, supports various frameworks, offers features like automatic deployments, scheduling, and multiple environments, and integrates with Google sign-up. Try it for free with a 10-day trial and a 50% discount for Syntax listeners.

      Deploy HQ is a continuous deployment service that simplifies and automates the process of deploying applications, making it easy and efficient for developers. It supports various frameworks like React and Vue, and offers features such as automatic deployments from Git repos, scheduling deployments, and multiple environments for testing and production. Pricing is reasonable, with a 10-day free trial and a 50% discount for Syntax listeners. The service integrates with Google sign-up and offers a mug or t-shirt for the first 25 successful deployments. It's a valuable tool for developers who want to streamline their deployment process and avoid the stress and uncertainty of manual deployments. Additionally, the speaker shared some tips for motivation and avoiding procrastination, which include using the Getting Things Done methodology and doing a brain dump of tasks into an app to prioritize and focus on the most important projects.

    • Tackle tasks causing anxiety first for a productive dayEffective time management includes prioritizing tasks based on anxiety level and completing them early for a productive day. Consider using a to-do app like Todoist to help prioritize tasks.

      Effective time management involves tackling tasks that cause anxiety first to clear the way for a productive day. The speaker shares his personal strategy of dedicating a day to completing small tasks, sorting them by the level of anxiety they evoke, and getting through the tougher parts as quickly as possible. He also mentions the book "Eat That Frog" which advocates for the same approach. The speaker also shares his appreciation for Todoist, a to-do application that automatically sorts tasks by priority, making it easier to focus on the most important tasks. Regarding the current state of Content Management Systems (CMS), there are various options available including flat file, markdown file, headless, and database-driven CMSs. The choice between these options depends on the specific needs of the project. Flat file and markdown file CMSs offer simplicity and ease of use, while headless CMSs provide flexibility and the ability to decouple content from presentation. Database-driven CMSs offer robust features and scalability. Ultimately, the best CMS for a project depends on the unique requirements of the project and the preferences of the developer or team.

    • Exploring Headless CMS Options: Markdown, Netlify, GraphCMS, and MoreHeadless CMS options offer technical advantages but may not be ideal for non-technical clients due to build times and learning curves. GraphCMS, a GraphQL-based CMS, is a promising alternative with a modern interface and open-source version. The choice of CMS depends on the client's technical expertise, project requirements, and content management needs.

      The headless CMS landscape is rapidly evolving with various options like markdown file-driven CMS, Netlify CMS, GraphCMS, and more. Markdown files and headless CMS systems like Netlify CMS offer technical advantages but may not be ideal for non-technical clients due to the need for build times and a learning curve. GraphCMS, a GraphQL-based CMS, is a promising alternative with a modern interface and open-source version. The speaker is excited about the possibilities of headless WordPress and plans to explore it further in a new series. Ultimately, the choice of CMS depends on the client's technical expertise, project requirements, and content management needs. The speaker is also planning to redesign their own website using a headless CMS to address the limitations of their current WordPress setup.

    • Exploring Headless CMSs for Dynamic Websites and Course CreationHeadless CMSs offer potential benefits for dynamic websites and course creation, but may present challenges with data querying and long build times. Focus on front-end skills like Angular, React, and Vue, and consider using a headless CMS for course creation to simplify the process.

      While WordPress with a React front end using a headless CMS like Next.js, Gatsby, or Headless WordPress, is a viable option for building dynamic websites, it may not be the best choice for everyone, especially for those with clients or large teams who require an easy-to-update platform. The speaker shared his experience of using a headless CMS and encountered challenges with querying data and waiting for long build times. However, he expressed excitement about the potential of headless CMSs and the separation of front-end and back-end technologies. For those interested in creating and selling courses, the speaker suggested focusing on developing skills in front-end technologies like Angular, React, and Vue, as these technologies are becoming increasingly popular in the industry. He also recommended using a headless CMS for course creation, as it simplifies the process and aligns all necessary components in one place. The speaker emphasized the importance of balancing the desire for innovation with the need for a stable and easy-to-manage platform.

    • Starting a tech teaching career: Share your knowledge and build an audienceTo start a tech teaching career, share your knowledge on blogs, YouTube, meetups, etc. Focus on improving content based on feedback, build multiple touchpoints, and be persistent to grow an audience and make a living

      Starting a tech teaching career involves putting yourself out there and finding your audience. Begin by sharing your knowledge through blogs, YouTube videos, local meetups, or other platforms. Don't expect an immediate following; instead, focus on improving your content based on feedback. Building an audience is crucial, and having multiple touchpoints like email, Twitter, and podcasts can help you reach and engage with your followers effectively. Remember, growing a teaching career takes time and dedication, but with persistence and a passion for sharing knowledge, you can make a living doing what you love. For more insights on business aspects, stay tuned for upcoming episodes. In the meantime, check out the Fluent Conference in San Jose, California, for a comprehensive learning experience on all things web development.

    • Learning and networking at conferencesConferences offer opportunities to learn new skills, meet industry leaders, and expand your network by sharing knowledge.

      Attending conferences like the Fluent Conference can be an excellent opportunity for developers to learn new skills, meet industry titans, and build valuable relationships. Wes, the speaker in the discussion, emphasized that he gained recognition in the developer community by focusing on creating content first, without it being a goal, and that his ability to share his knowledge with others led to opportunities in his career. Scott, on the other hand, started LevelUp Tutorials on YouTube, and both speakers highlighted the importance of being active in the community and sharing knowledge. Attending conferences and creating content are effective ways for developers to expand their reach, learn new skills, and potentially advance their careers.

    • Learning and Sharing Knowledge Builds a FollowingConsistently sharing web dev knowledge on Twitter with 'hot tips' can grow a following. Server side rendering (SSR) benefits include improved SEO and faster initial page load times, but setting it up can be challenging.

      Sharing knowledge and helping others learn is a powerful way to build a following and make a difference in the industry. People like Chris Coyer, Jonas Schmedtmann, and others, inspired the speaker by consistently sharing their web development knowledge through blogging, YouTube, and social media. The speaker decided to focus on Twitter and posting "hot tips" to grow a following. It takes time and consistency, but the momentum and impact can be significant. Server side rendering (SSR) is another topic discussed. SSR is the process of rendering web pages on the server-side, delivering HTML to the user instead of a blank page while the JavaScript loads. Benefits include improved SEO and faster initial page load times. However, setting up SSR can be challenging, making tools like Next.js valuable for simplifying the process.

    • Challenges of implementing SSR in JavaScript appsSSR in JavaScript apps brings benefits like improved SEO and performance, but comes with challenges like authentication and rehydration. Tools like Next.js and Meteor can simplify the process, but unexpected issues may arise during transition.

      Implementing Server Side Rendering (SSR) in JavaScript applications can bring about significant ease, but it also comes with its own challenges. These challenges include dealing with authentication and rehydration, and ensuring that server and client communicate effectively. The speaker mentioned encountering issues with JSON Web Tokens (JWT) for authentication and having to refresh parts of the page after it loads. However, using tools like Next.js or Meteor can simplify the process. The speaker also acknowledged that unexpected issues may arise when transitioning from client-side to server-side rendering, but these challenges are becoming less frequent as SSR becomes more mainstream. Overall, the consensus was that the benefits of SSR, such as improved SEO and performance, outweigh the challenges.

    • Using Yeoman and NPM to create projects and boost productivityEasily set up projects with Yeoman and NPM, streamline workflow, and boost productivity with minimal setup and the upcoming NPM create app feature.

      Generators like Yeoman and NPM's create app are still valuable tools for quickly setting up projects, even though they may not be as popular as they once were. The speaker shared his experience of using Yeoman to create a React Apollo snippet library, praising its ease of use and the minimal setup required. He also mentioned the upcoming feature of NPM to create apps directly from the command line. The speaker also recommended the book "Eat That Frog" by Brian Tracy, which focuses on accomplishing tasks and getting more done in less time. The speaker and his wife have found the concepts in the book to be impactful and frequently discuss them. Overall, these tools and resources can help streamline project setup and productivity.

    • Recommended resources for productivity and learningCheck out 'Eat That Frog!' for workflow improvement and overcoming procrastination. Use devdocs.io for offline access to programming docs and LevelUpTutorialsPro for premium tutorial series

      The speaker highly recommends the book "Eat That Frog!" for improving workflow and overcoming procrastination. The method outlined in the book has helped the speaker eliminate procrastination and get more done. The speaker also recommends the website devdocs.io for easy access to documentation for various programming languages and tools, which can be accessed offline, making it particularly useful during flights or when internet access is limited. Additionally, the speaker promotes LevelUpTutorialsPro, a subscription account offering access to premium tutorial series on various topics such as modern WordPress, Vue JS, Gatsby, Redux, React, and modern CSS layouts, among others. The account provides access to all existing series and new series added each month.

    • Handling criticism and growing through sharing knowledgeCriticism is a natural part of putting yourself out there, learn to handle it for personal growth and share knowledge with others to build a supportive community.

      Putting yourself out there, whether it's through teaching a course, creating content on YouTube, or sharing your code online, can be a rewarding experience but also comes with its challenges. You'll encounter various types of audiences, some supportive and others critical or even offensive. The speaker shared an experience of receiving homophobic messages. It's important to remember that criticism is part of the process and learning to handle it is essential for growth. The speakers also encourage listeners to check out their back catalog of episodes, which covers a wide range of topics, and share their favorite episodes with them. They plan to create a list of top episodes based on listener feedback. Overall, the conversation emphasizes the importance of resilience and perseverance in the face of criticism and the value of sharing knowledge and experiences with others.

    Recent Episodes from Syntax - Tasty Web Development Treats

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    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

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    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

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    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

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    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

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    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

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    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

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    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

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    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

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    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

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

    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

    Related Episodes

    045 | Zero to Hero: Complete Tutorial on Building SharePoint Embedded Apps

    045 | Zero to Hero: Complete Tutorial on Building SharePoint Embedded Apps

    WATCH

    ▶️ Watch this episode on YouTube

    **********

    EPISODE DESCRIPTION

    Build document-centric apps in this tutorial with SharePoint Embedded. Leverage SharePoint's document libraries & more Microsoft 365 capabilities!

    Get any links, images, and resources mentioned in this episode in the associated article and YouTube video.

    If you enjoyed this episode, you might like my YouTube Channel, my The Full Stack Dev's Microsoft 365 Playbook newsletter, and my articles on voitanos.io/blog!

    Hasty Treat - Async + Await Error Handling Strategies

    Hasty Treat - Async + Await Error Handling Strategies

    In this Hasty Treat, Scott and Wes discuss different error handling strategies.

    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:07 - Try / Catch

    • This can be done at call time or inside the function

    4:10 - Higher Order Function

    • Makes a function that returns a new function which in turn calls your original function (but with a .catch chained on)

    7:46 - Handle the error when you call it

    • Use async/await but chain a .catch onto the end

    9:03 - Node.js Unhandled Rejection Event

    • process.on('unhandledRejectionEvent', callback)

    9:40 - What do do with those errors

    • Send to error tracking service
    • Possible to give the user a reference number
    • Display good error text to user

    Tweet us your tasty treats!

    From React To SvelteKit

    From React To SvelteKit

    In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!

    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.

    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

    07:28 - Thoughts

    • Apples to oranges, so unfortunately, no super legit ability to compare.
      • SvelteKit isn’t analogous with a custom React setup that uses CSR
        • SSR is usually going to be faster - we can ship less JS
        • Some big things changed beyond React → SvelteKit
        • HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer.
    • Whole conversion took a couple of months.
    • Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough

    16:14 - Converting React components to Svelte

    • useState becomes just a straight-up variable
    • Graphql calls were hooks now just imported generated functions
    • Remove extranous fragments
    • Convert {things && } to {#if thing}{/if}
    •  becomes 

    24:06 - Spark joys

    • State
      • Our checkout flow became way more transparent, way easier with Svelte stores
    • Render flow
      • Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to
    • Overall developer experience
      • It’s honestly a joy to work in and I don’t want to go back
    • Making a library
    • Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts
    • CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props
    • Animations are all done with Svelte’s internal animations lib

    32:45 - Hosting

    • adapter-node
    • Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU,
    • Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere

    35:50 - Things to do

    • Admin tools

    37:00 - Challenges

    • ESM is not always smooth sailin
      • Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
        • Solution was to use lodash.has as the dependency
        • Apollo included all React as a dep unless you import from @core
    • TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible
    • Drag animations

    Cloudinary

    42:46 - Wes’ questions

    • What about the ecosystem?
    • What about forms + DOM data?
    • Serverless functions?
    • Do you always bind to state? Or just access directly?
     formData = writable({   title: "yo" })  {$formData.title}    

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    The VueJS Show (Scott teaches Wes)

    The VueJS Show (Scott teaches Wes)

    In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it.

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Clubhouse - Sponsor

    Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free.

    Show Notes

    2:22 - What’s the deal with VueJS?

    • Combines ideas from Angular 1, React and Blaze
    • Ease of Angular 1
    • App structure of React

    8:02 - Components

    • Template syntax is similar to handlebars

      • aka {{stuff}}
    • v-bind:property

      • v-bind:property or simply :bind allows you to dynamically bind a value to a property
    • Props

      • Props must be declared before they can be used in a template.
    • Script tag

      • Where imports happen
      • Where props are defined, computed properties, action events and lifecycle
    • Actions

      • v-on:click="doSomething"
      • @click="doSomething"
      • These will run a doSomething event defined in your script export via methods
    • Lifecycle

      • How does data fetching work?
    • CSS

      • Can be scoped to file by adding 

    Stacks On Stacks On Stacks

    Stacks On Stacks On Stacks

    Dude, in this gnarly podcast episode, Seth Whiting and Jake Pacheco are all about web development frameworks, bro! They break down the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js) and compare SQL and NoSQL databases. It's all about choices, man!

    Frameworks and libraries, bro, they got you covered! Frameworks like Angular and Vue give you rules and guidelines for writing code, while libraries offer pre-written code blocks for specific tasks. Seth shares his experience with jQuery and Knockout.js, and he's all about that MEAN stack for full-stack projects. Express.js, a back-end framework, makes working with databases a breeze, dude.

    Now, here's the kicker: Next.js, the full-stack framework that combines React on the front end with Node.js on the back end. It's like a one-stop shop, man! Next.js hooks you up with project scaffolding and amps up the user experience. Just make sure you know React and Node.js before you ride the Next.js wave, bro.

    This podcast episode is a tubular journey through web development frameworks, their role in creating killer apps, and how the front end and back end talk to each other. It's a rad ride, bro!

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