Skip to content

This Dot Blog

This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.

Newest First
How to test React custom hooks and components with Vitest cover image

How to test React custom hooks and components with Vitest

In this guide, we'll navigate through the process of testing React hooks and components using Vitest—a powerful JavaScript unit testing framework. Discover how Vitest simplifies testing setups...

4 Angular Component Libraries That are Perfect for Beginners cover image

4 Angular Component Libraries That are Perfect for Beginners

For beginners starting with Angular, the journey can feel daunting, especially when it comes to setting up projects from scratch. However, there is a range of outstanding Angular component libraries that alleviate this initial hurdle: ready-made toolkits, empowering newcomers to start building Angular applications without the complexities of bootstrapping their projects. Let’s take a look! Angular Material Angular Material is a UI component library by Google for Angular applications. It provides a variety of pre-built components following the Material Design guidelines, offering customization options, responsive design, and accessibility features. It's seamlessly integrated with Angular and offers extensive documentation and community support. NG-ZORRO NG-ZORRO is an Angular UI component library based on Ant Design by Alibaba. It offers a variety of customizable components for building modern web applications. With seamless Angular integration, responsive design, and accessibility features, NG-ZORRO simplifies development while following Ant Design principles. NG Bootstrap NG Bootstrap is a library for Angular developers to easily incorporate Bootstrap components into their applications without relying on jQuery. It offers Angular-specific directives and components, ensuring compatibility and performance within Angular projects while maintaining Bootstrap's responsive design and customization options. Clarity Design System Clarity is an open-source design system by VMware that offers a set of Angular components for building enterprise-scale applications. It provides components specifically tailored for data-centric applications, dashboards, and complex user interfaces. Clarity Design System emphasizes clarity, consistency, and usability in its components. The beginner’s journey can be both exhilarating and challenging. However, with the advent of powerful component libraries like Angular Material, NG-ZORRO, NG Bootstrap, and the Clarity Design System, the path becomes significantly smoother. These libraries offer pre-built components and design systems that eliminate the need to bootstrap projects from scratch. As beginners embark on their Angular journey, these libraries provide a sturdy foundation, allowing them to dive into development with confidence. By harnessing the capabilities of these libraries, beginners can not only expedite their learning curve but also craft exceptional Angular applications with ease and efficiency....

The Democratization of AI with Carter Rabasa cover image

The Democratization of AI with Carter Rabasa

Tracy Lee, Adam Rackis, Ben Lesh, and guest Carter Rabasa touch upon a wide range of topics, including the democratization of technology, challenges in implementing AI as developers, and vector databases for fuzzy and similarity searches. The panelists explore how advancements in AI have made these technologies more accessible to a wider audience. They discuss the potential benefits of this democratization, such as increased innovation and productivity, but also highlight the challenges that come with it, such as the need for responsible development and addressing potential biases in algorithms. The podcast also explores the differences in technology adoption mindsets between regions like Asia and the West. The panelists discuss the socio-economic impacts of technology adoption and the need for businesses to adapt to changes in the AI landscape. They emphasize the importance of responsible development and the need to address ethical concerns associated with AI technologies. Download this episode here....

Detoxify Your Team Culture with Angela Nelms cover image

Detoxify Your Team Culture with Angela Nelms

Angela Nelms emphasizes humility, transparency, and continuous learning as essential elements of effective leadership and company culture. Her insights shed light on leadership's critical role in organizational success, the essential elements of great leadership, and how to embrace failure as a means of combating workplace toxicity. Angela emphasizes that customer service and a positive work culture form the foundation of company success. By fostering humility and transparency, leaders create environments where employees feel valued and motivated to deliver outstanding service. Angela stresses the importance of building collaborative teams, nurturing healthy relationships, and addressing toxic cultures promptly, ensuring organizations thrive on trust and respect. In this conversation, Angela believes that trust is a cornerstone of successful company culture. Building trust among team members and leaders encourages innovation and growth. Investing in employee development, both personally and professionally, fosters a motivated, engaged workforce committed to the organization's success, and helps retain great talent. Throughout the episode, Angela emphasizes that effective communication and shared vision are paramount in leadership. Promoting transparency and open dialogue cultivates trust and collaboration. By embracing failures as opportunities for growth and openly discussing lessons learned, leaders foster environments where employees feel empowered to take risks and learn. Shared vision ensures alignment with the company's goals and values throughout the organization. Download this episode here....

TypeScript Integration with .env Variables cover image

TypeScript Integration with .env Variables

Learn to integrate .env variables with TypeScript effectively. Our guide covers creating an environment.d.ts file, a simple solution for improved type-checking and development clarity in TypeScript projects....

Dismantling Your AI Bias with Jerome Hardaway and Tracy Lee cover image

Dismantling Your AI Bias with Jerome Hardaway and Tracy Lee

In this inaugural episode in a series on the six steps to AI adoption, Tracy Lee and Jerome Hardaway explore the impact of AI on various industries, emphasizing the need to address bias and adapt as developers. The first step is dismantling your own bias against AI. They advocate for treating AI as a tool to enhance human capabilities, and how it can revolutionize education and streamline workflows by augmenting our everyday tasks. Even better, the transformative potential of AI creates new job opportunities, necessitating education and upskilling initiatives to prepare individuals for the changing job market. By addressing bias, embracing continuous learning, and recognizing AI's capacity to augment human capabilities, we can unlock its full potential in shaping a better future. Download this podcast episode here....

How to Provide Value to Your Organization in a Developer Relations Role cover image

How to Provide Value to Your Organization in a Developer Relations Role

A few years ago, a multi-billion dollar corporation we all know and love hired what could be perceived as every developer with Twitter influence on the market into a Developer Relations role. Suddenly, everyone you spoke to worked at the said corporation. While many of us were excited to see the value of Developer Relations recognized by a prominent tech organization, many were also left scratching their heads at the alignment, or lack thereof, between what those hired Developer Relations professionals did to “evangelize or build” and how it related to their employer. A majority of those DevRel professionals were not even creating value in communities related to that organization’s products. An insider look will tell you that the reason is that those hired were just told to “keep doing what they were doing” and not given any additional direction or focus outside of that. Without clearly defined expectations, DevRel professionals cannot provide value to your organization. This is not sustainable and no one wants this. Below is a list of four ways that those in developer relations can deliver value to their organizations. Aligning with your Organization's Goals and Objectives DevRel professionals recognize that all activities should be tangentially related to providing value to the organization and ensure that these activities contribute to the organization's goals and objectives. The best way to align DevRel efforts with organizational goals is to make sure you understand what the strategic objectives of your organization are. Is it product awareness? Is it customer satisfaction? Is it revenue growth? Is it pushing new concepts in a market? Is it fostering innovation? Depending on the objective, you will be able to better tailor your DevRel efforts to the organization. Product Awareness as a Goal For example, if the current goal of the company is product awareness, Developer Evangelism is the best way to provide value. Twilio is still the canonical example of evangelism done right. In the beginning, Twilio needed to spread awareness of their product, and show developers how easy it was to use. They did this by showing up at events with developer-centric swag, creating the best tutorials for developers to follow, giving workshops on how to use Twilio APIs, giving talks about how to use Twilio, and creating a strong community of Twilio adopters that shared their use cases around the internet. Through this, the perception was that Twilio was the best solution, and considered the easiest, most obvious tool choice to use when developers were trying to build unique communication features and capabilities like voice, text, chat, video, and email into their applications. Customer Satisfaction as a Goal If the organizational goal is customer satisfaction, then Developer Community and Developer Experience are the two areas a DevRel professional should key in on. By building a community and creating customer feedback loops where developers can share struggles, and their issues can be heard and resolved directly by engineers and product in a quick manner, customer satisfaction will increase because you are helping solve the pain points of using the product. Creating a community allows other developers adopting the product to bond and share solutions in an open forum. Currently, most organizations choose Discord as a way to engage developers and build community. As a DevRel professional, you are in a unique position to help with the Developer Experience in a way that engineers may not be able to. For example, the customer satisfaction metrics may be affected by a lack of documentation, which can easily be solved by improving the documentation where you see the pain points. This does not require engineering or product to get involved and can often solve developer problems overnight. There may be an issue with the migration of one technology to another. Many Developer Relations professionals have built excellent migration tools to help developers ease this pain. Having the flexibility to work outside of the product roadmap and engineering sprints can serve as an invaluable resource for organizations and serving their needs, and the needs of their users. Revenue Growth as a Goal If the goal for your organization is revenue growth, then helping get developers into the top of the sales funnel is key to providing value to your organization. This does not have to be done in a way that compromises the other principle of DevRel or the core value either. One example I’ll bring up again is Test Automation University by Applitools. By providing a free resource that was able to garner the interest of over 150,000 developers through a DevRel initiative (shout out to Angie Jones for leading this initiative), Applitools was able to collect the email addresses of all these individuals and engage them. Since our focus is DevRel and contributing to the top of the funnel, I won’t speak to the “right way” sales or marketing should engage these developers, but I will say it is critical for DevRel to educate and advocate for marketing and sales to engage with these developers the right way that does not erode brand trust. Delivering Value to Your Organization Delivering value to an organization while upholding the core value of authenticity is not difficult. The hardest part is advocating internally to stakeholders within the organization on the approach to developers and helping them understand the “why” behind the DevRel strategy you are employing. Balancing authenticity and providing value to both the community and to organizations allows DevRel professionals to thrive and achieve mutual success for both developers and the organizations they support. Through living these core values and principles, Developer Relations is the way to forge a path of innovation, collaboration, and long-term success in the technology....

Redux Toolkit 2.0 release cover image

Redux Toolkit 2.0 release

This change is considered a major version of the library and comes with breaking changes because, as the core team declared, it has been 4+ years since they released Redux tool kit...

Configure your project with Drizzle for Local & Deployed Databases cover image

Configure your project with Drizzle for Local & Deployed Databases

It was a fun Friday, and Jason Lengstorf and I both decided to try and use Drizzle on our respective projects. Jason went the SQLite route and wrote an amazing article about how he got his setup working. My approach was a bit different. I started with Vercel's Postgres + Drizzle Next.js Starter and wanted to use PostgreSQL. If you don't know what Drizzle is, it's a type-safe ORM similar to Prisma. My colleague, Dane Grant, wrote a great intro post on it, so go check his article out if you want to learn more about Drizzle. Getting my project off the ground took longer than I expected, especially coming from a starter kit, but I figured it out. This is the article I wish I had at the time to help get this project set up with less friction. I will focus on using local and Vercel PostgreSQL, but this same setup should work with other databases and adapters. I'll make some notes about where those places are. While I did use Next.js here, these setup instructions work on other projects, too. Configuring Drizzle Every project that leverages Drizzle requires a drizzle.config in the root. Because I'm leveraging TypeScript, I named mine drizzle.config.ts, and to secure secrets, I also installed dotenv. My final file appeared as follows: ` The schema field is used to identify where your project's database schema is defined. Mine is in a file called schema.ts but you can split your schema into multiple files and use glob patterns to detect all of them. The out field determines where your migration outputs will be stored. I recommend putting them in a folder in the same directory as your schema to keep all your database-related information together. Additionally, the config requires a driver and dbCredentials.connectionString to be specified so Drizzle knows what APIs to leverage and where your database lives. For the connectionString, I'm using dotenv to store the value in a secret and protect it. The connectionString should be in a valid connection format for your database. For PostgreSQL, this format is postgresql://:@:/. Getting your connection string Now, you may be wondering how to get that connection string. If you're hosting on Vercel using their Postgres offering, you need to go to your Vercel dashboard and select their Postgres option and attach it to your app. This will set environment variables for you that you can pull into your local development environment. This is all covered in their "Getting Started with Vercel Postgres" guide. If you use a different database hosting solution, they'll offer similar instructions for fetching your connection string. However, I wanted a local database to modify and blow away as needed for this project. Out of the box, Drizzle does not offer a database initialization command and I needed something that could be easily and quickly replicated across different machines. For this, I pulled in Docker Compose and set up my docker-compose.yaml as follows: ` The 3 most important values to note here are the values in the environment key and the ports. These are what allowed me to determine my connection key. For this example, it would be: postgresql://postgres:postgres@localhost:5432/my-local-db. With the compose file set, I ran docker-compose up -d to get the container running, which also initializes the database. Now, we can connect and operate on the database as needed. Creating the database connection To make operations in our app, we need to get a database connection instance. I put mine in db/drizzle.ts to keep all my related database files together. My file looks like: ` This is a bit more complicated because we're using 2 different Drizzle adapters depending on our environment. For local development, we're using the generic PostgreSQL adapter, but for production, we're using the Vercel adapter. While these have different initializers, they have the same output interface which is why this works. The same wouldn't be true if you used MySQL locally and PostgreSQL in production. If we chose a RDS or similar PostgreSQL solution, we could use the same postgres adapter in both cases but change the connection string. That's all this file does at the end - detects which environment and uses the chosen adapter. If we go to use this exported instance, it won't be able to find our tables or provide type safety. This is because we haven't created our database tables yet. Creating database tables To get our database tables created, we're going to leverage Drizzle's Migrations. This allows us to create atomic changes to our database as our schema evolves. To accomplish this, we define the schema changes in our schema files as specified in our config. Then we can run npm run drizzle-kit generate:pg (or whatever script runner you use) to generate the migration SQL file that will be located where we specified in our config. You want to check this file into source! By default, Drizzle doesn't allow you to override migration names _yet_ (they're working on it!) so if you want to make your migration file more descriptive, you need to take both of these steps: 1. Rename the migration file. Take note of the old name. 2. Locate _journal.json. It should be in your migration folder in a folder called meta. From here, find the old file name and replace it with the new file name. Now, we need to run the migrations. I had some issues with top-level awaits and tsx like the Drizzle docs recommend, so I had to go a slightly different route and I'm not thrilled about it still. I made a file called migrate.mts that I stored next to my drizzle.ts. In theory, I should have been able to import my drizzle connection instance here and use that, but I ran out of time to figure it out and ended up repeating myself across files. Here's the file: ` Here, I'm connecting to the correct database pending environment then running the drizzle migrate command. For local development, I set my connection pool to max at 1. This probably isn't necessary for this use case, but when connecting to a cluster, this is a recommended best practice from the Drizzle team. For the local case, I also had to close the connection to the db when I was done. For both cases, though, I had to specify the migrations folder location. I could probably DRY this up a bit, but hopefully, the Drizzle team will eliminate this need and use the config to set this value in the future. With the above file set and our schema generated, we can now run npm run tsx db/migrate.mts and our database will have our latest schema. We can now use the db client to fetch and store data in our database. Note: Jason uses the push command here. This is fine for an initial database creation, but it will override tables in the future. The migration path is the recommended pattern for non-destructive database updates. Conclusion Congratulations! We can connect to our database and perform CRUD operations against our tables. We can also use Drizzle Studio to modify and inspect our data. To review, we had to: 1. Setup a local PostgreSQL server via a tool like Docker Compose 2. Configure the database adapter to work in local mode 3. Generate a schema 4. Create a script to execute migrations so our database is aligned with our schema This was my first experience with Drizzle, and I enjoyed its SQL-like interfaces which made it easy to quickly prototype my project. I noticed in their Discord that they're about to have a full-time maintainer so I'm excited to see what their future looks like. I hope you enjoy it too!...

Are Product Roles Going Away? with Maggie Pint cover image

Are Product Roles Going Away? with Maggie Pint

Maggie Pint, Engineering Manager at Istari, discusses the trend for companies to focus on streamlining their processes and reducing complexity to deliver products faster and more efficiently versus spending time on innovation this past year. This trend has led to the convergence (maybe consolidation) of product management and engineering roles, where engineers are not only responsible for building the product but also for shaping its strategic direction. Maggie and Tracy discuss whether this is good for the business, or something that should be more concerning to watch out for. Maggie talks about design in the product role and emphasizes the significance of design beyond aesthetics. It's not just about making things look pretty; it's about understanding user needs and creating intuitive experiences. User research skills and customer engagement are becoming essential for engineers, as they need to build products that truly resonate with their target audience. They talk about companies like Airbnb and Apple are leading the way in this regard and the successful integration of design thinking into their engineering processes, resulting in innovative and user-friendly products. By involving engineers in the entire product development lifecycle, from ideation to delivery, these companies are able to create seamless experiences that delight their customers. Download this episode and listen now!...

This is the Worst Thing a DevRel Team Could Do cover image

This is the Worst Thing a DevRel Team Could Do

At its core, a successful Developer Relations (DevRel) program focuses on forming strong connections within its target audience to ensure that developers can easily connect with the company or organization behind the product they’re using. Great teams in DevRel build genuine relationships, earn trust, and actively engage with developers. DevRel takes a different approach from traditional marketing strategies. Instead of just chasing numbers and leads for sales, it puts emphasis on making developers happy and retention. This creates a cycle of feedback between users and a company, helping to better understand their needs and fostering a sense of community among users. There have been organizations that consider DevRel a revenue-driving function, but this is where challenges arise, since DevRel teams cannot consistently show value in this area and meet the expectations of stakeholders expecting this based on where their focus and the profession lies. When DevRel professionals are forced to be revenue drivers, the breakdown between developers and that company is inevitable. Developers can smell hidden agendas from a mile away. They realize when their needs are being overlooked in favor of sales initiatives. *“Companies fail at DevRel when they try to turn them into sales teams. This hurts customer trust.” - Michael Liendo, Senior Developer Advocate at AWS. * Developers care about education, resources, opportunities, and the overall experience of a product or platform. When they are a target for sales pitches, they leave or shut down. Their focus is getting the job done, and they talk to companies to solve problems in their development lifecycle, not to be on the receiving end of a pitch. Furthermore, since all successful DevRel teams are focused on building authentic relationships with developers, strategic partnerships with other organizations will be hard to come by or have dismal retention numbers since no one wants to be associated with trying to sell to developers. Good DevRel teams are focused on helping developers and understand that being helpful goes a long way to help the sales cycle. Many DevRel efforts also focus on providing value to a community before asking for something in return. The trust and authenticity of brand building in this area and those initiatives - the loyalty a DevRel team is trying to generate - many times does not make direct corollary sense from a monetary perspective, and sales organizations often overlook the non-monetary value and impact these efforts generate and how they correlate to long-term growth for an organization. In DevRel, genuine connections matter more than immediate revenue. When teams prioritize developers' needs over sales, trust grows, fostering lasting relationships that drive long-term success. Treating DevRel as solely a sales function erodes trust and misses the true value of building authentic partnerships and community loyalty. Interested in learning more about launching your own DevRel program, feel free to reach out!...

Introduction to Babylon.js cover image

Introduction to Babylon.js

Babylon.js is a powerful and easy to use open-source rendering engine for the web. In this blog post, we will explore its capabilities including 3D rendering and VR support....