Contents I use Firebase Remote Config to manage AB tests in most of my software projects. Boolean AB Testing Whenever I want to run a new AB test, I create a new boolean parameter in my Remote Config (RC) console with the name of the new test (ex. show_pro_button). The default should be false since the test will be off for anyone not in the test set. ...
Contents You should use VS Code snippets more than you do and that’s not just an opinion. The Snippet Syntax section of the VS Code snippet docs is a minefield of knowledge bombs. Common Transformations "Snippet Test": { "scope": "dart", "prefix": "foolsTest", "body": [ "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", "${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}", "${TM_FILENAME_BASE/(.*)/${1:/upcase}/}", "${TM_FILENAME_BASE/(.*)/${1:/downcase}/}", "${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}", ], "description": "Snippet Test" } For the file test_test.dart, this outputs: TestTest testTest TEST_TEST test_test Test_test Step by Step Placeholders A placeholder in VS Code is a “tabstop” that appears in the rendered snippet. A tabstop is simply a cursor position within a snippet body. ...
Contents The Firebase documentation leaves much to be desired. If you just want answers, these docs were made just for you. If you want more questions, head over here and start reading. In this blog, I’m going to walk you through setting up the Resize Images Firebase Extension and listening to a custom event so you can add the resized images to documents in your Firestore database. Setting Up the Extension Navigate to your Firebase project and select the Extensions item from the “Build” side menu. Select the “Explore all Extensions” button and then search for “resize images”. Press the “Install” button. Good job, buddy. ...
Contents After publishing my first article on building a Chrome Extension using React, TypeScript, TailWind, and Webpack, a handful of people commented that Webpack was an antique best left on the shelf. In this article, I will walk you through creating the a Chrome Extension that uses the same tech stack but with Vite as the build tool. For the full code, check out the GitHub repository. Introduction In this tutorial, we’ll build a Chrome extension using React, TypeScript, Tailwind CSS, and Vite. Vite is a modern build tool that offers a fast and lean development experience. By the end of this guide, you’ll have a fully functional Chrome extension with a popup and side panel, all powered by React components styled with Tailwind CSS. ...
Contents This article was inspired by Creating a Chrome Extension with React a Step by Step Guide. For the full code, check out the repo. Creating a Popup 1. Create React App Use the official Create React App CLI to kickstart your project: npx create-react-app react-chrome-ext --template typescript cd react-chrome-ext 2. Update the Files Update App.tsx to show a simple string: function App() { return ( <div className="App"> Hello World </div> ); } export default App; Update index.tsx: ...
Just The Steps In the terminal, run the following command flutter create --template=package my_package Make your changes in the lib directory Update the pubspec.yaml file with your package information. Here’s an example: name: my_package description: A new Flutter package version: 0.0.1 homepage: https://example.com repository: type: git url: https://github.com/me/example Create an example directory with a sample Flutter app that demonstrates how to use your package flutter create example --empty Inside the pubspec.yaml file in the example directory, add the following: ...
Claude Sonnet is undeniably one of the best frontier models for programming and I still reach for it despite having GPT-4o and o1 inside my VS Code editor. To make it even smarter and more effective, I use the Projects feature (available on the pro plan) to manage all of the documentation and general context related to what I’m working on. By uploading text and files related to the technology I’m using, Claude becomes a genius in exactly what I want him to be a genius in. ...
Welcome to this tutorial where we will create a simple API using TypeScript and deploy it using Vercel. This guide is suitable for beginners and assumes basic familiarity with Node.js. Let’s dive in! Setting Up Your Project Create a New Directory: Start by creating a new directory for your project. Open your terminal and run: mkdir chitter-vercel This creates a directory named chitter-vercel. Initialize Your Node.js Project: Navigate into your new directory and initialize a Node.js project: ...
Slack 1. Create a new Slack channel Create a slack channel in your workspace where the notifications will be displayed (ex. “notifications”) 2. Create a Slack app Visit the Slack API webpage and “Create New App”. Give the app a name and select the Slack workspace you’re working with. 3. Configure the Slack app Select “Incoming Webhooks” and flip the “Active Incoming Webhooks” switch on. 4. Create the webhook Add New Webhook to Workspace and select the “notifications” channel you created before. ...
Instead of hardcoding Supabase interfaces or types in your TypeScript projects, you can use the Supabase CLI to generate types directly from your database tables. Make sure to add the output inside your src folder so the rest of your application can access it: supabase gen types typescript --project-id abcdefghijklmnopqrst > src/types/database.types.ts This command will generate a .types.ts file that contains a single Database interface containing all of your tables and their columns. The output looks something like this (I pulled this from the official docs): ...