Tips

Tips

Short, focused development tips from egghead. 37 tips.

  1. TipRun Server Rendered Web Components in a Phoenix LiveView application
  2. TipProfile tasks in an Nx workspace with Chrome Devtools
  3. TipCreate a Custom Type Based of an Object with Typescript keyof OperatorLet's learn how to use the Typescript keyof operator to create a union type from the keys of an object to be used as a prop or function argument
  4. TipCreate a Typescript Union Type from a Javascript ObjectLearn how to create a union type from a javascript object that automatically updates itself using advanced Typescript techniques like Mapped Types
  5. TipImprove Webpage Loading Performance by sorting HEAD tags using Capo.jsUse Capo.js to analyze what currently is - and what should be - the order of elements in your HEAD section of the document.
  6. TipPrevent the Keyboard from Covering React Native UI ComponentsLearn how to create react native views that, when wrapped in a KeyboardAvoidingView component, adjust to accommodate the system keyboard.
  7. TipUse noUncheckedIndexedAccess TypeScript Compiler Option and Improve Type-SafetyTypeScript doesn't track both the length of the array and its index access. We can change that with the `nouncheckedindexedaccess` flag and explore TypeScripts new behavior.
  8. TipWatch for Changes and Automatically Rebuild Projects in an NPM Workspace MonorepoAutomatically rebuild dependencies when they change within an Nx monorepo
  9. TipFix TypeScript Errors related to Function Type Parameters and Generic ConstraintsLearn how does TypeScript resolve function type parameters and generic constraints - and fix related compiler errors.
  10. TipCreate Non-empty TypeScript Array TypesLearn how to make a compile-time restriction that an array cannot be empty with dynamic type annotations.
  11. TipFilter TypeScript Unions of Primitives or Objects depending on the usecaseLearn the different ways to filter members of TypeScript unions.
  12. TipUse Native CSS Parts to Access the Shadow DOM in an Ionic ComponentWorking with the Shadow DOM can be tricky as it scopes styles so normal CSS classes can't target the elements within. In this tip you'll learn a few approaches to styling elements that are within the Shadow DOM.
  13. TipImprove the DX of an NPM Workspaces Monorepo with Task Pipelines and CachingSet up a task pipeline with Nx to properly build dependent projects (like a shared UI) before projects that use those dependents.
  14. TipRestrict that a property cannot exist on a typescript object type.
  15. TipGetting setup with shadcn-vue in Vue 3Shadcn component library is a great option for building out UIs as it gives you full control while setting you up with reasonable defaults. Learn how to install and get started with Shadcn in a Vue 3 project.
  16. TipUse reactive primitives in React and AngularLearn the most important differences between react hooks and angular signals.
  17. TipCreate a Computed Signal in Modern AngularComputed properties allow you to display information based on state that you are tracking which update when your state updates. We'll see how to accomplish this with Angular Signals.
  18. TipUse Infrastructure as Code with Architect to Deploy to AWS
  19. TipInstall and Setup Bootstrap in Next.jsStart using Bootstrap in your Next.js application today.
  20. TipAutomate Package Scaffolding in NPM/Yarn/PNPM Monorepo WorkspacesWe'll explore how to automate new package creation for your existing npm/yarn/pnpm using Nx. Learn to build an Nx Plugin for consistent, error-free package scaffolding. Perfect for easy dev onboarding and maintaining coding standards.
  21. TipCreate a Serverless Postgres SQL Database with AmptAmpt has recently launched [Ampt SQL](https://getampt.com/blog/introducing-ampt-sql/), a fully managed serverless Postgres database service.
  22. Tip3D Scene with Vue using TresJSIn this tip, we are going to learn how to use the TresJS starter with ViteJS
  23. TipCreate an Interactive Spoiler Component in AstroLean how to build an interactive spoiler component in Astro, enhancing web user engagement. Learn to set up, style, and script the component for hover/click reveals, ensuring smooth functionality across multiple instances.
  24. TipReturn HTML from the Backend with Astro Partials and htmxReturn HTML from the backend with htmx and Astro partials
  25. TipCreate a serverless API with Ampt and TypeScript
  26. TipExplore the Console Object for Enhanced JavaScript DebuggingThe console object can be used for much more than simply logging a value out. Learn the various ways you can use it to level up your debugging prowess.
  27. TipCreate a Prerelease Channel in Your NPM Package using semantic-releaseAutomate your package release process with semantic-release to have preview releases when you push or merge specific branches
  28. TipEmbed PDFs in HTML with embed, iframe, and object tagsLearn three different ways to embed PDFs into your HTML document without using JavaScript, and understand the pros and cons of each method, including fallback mechanisms.
  29. TipSimplify Angular Templates that Use Observables with View ModelsLearn how to use view models in your Angular templates to handle multiple observables in a cleaner and more organized way, reducing the need for multiple async pipes.
  30. TipPrevent JavaScript Object Tampering with the SES Library harden FunctionBy default, the objects you create in JavaScript are mutable. This means that if anyone wants to change the code you write in run-time, they can. We can use the SES harden function to prevent this type code hijacking.
  31. TipEnhance Your Testing Workflow with vitestImprove your testing process by understanding how to run vitest in different modes and launch the UI dashboard using NPM package scripts.
  32. TipStreamline Form Creation and Validation with React Hook Form and Yup
  33. TipSecure and Efficient Environment Variables with DopplerLearn how Doppler can replace the need for .env files, providing a more secure way to manage and share environment variables across your entire team.
  34. TipSimplify Your Web App's Authentication Process with ClerkClerk provides out-of-the-box login and signup screens along with social media integration, making authentication incredibly fast and easy compared to building from scratch.
  35. TipChat with a Document Using TypeScript, OpenAI, and PineconeLearn how to build a chatbot that uses a PDF document as a database, extracting text and answering questions using TypeScript, OpenAI, and Pinecone.
  36. TipPrevent Global Prototype Mutability in JavaScript with SES lockdownUnderstand the consequences of global mutability in JavaScript and how it can compromise the security and integrity of your application.
  37. TipAvoid Unexpected Errors in Angular 16 with Required AttributesImprove the reliability of your Angular components by leveraging required inputs and eliminating the chance of omitting critical data.