Build this Blog Medium. Hashnode. Wordpress. Ghost. Log Rocket. There are a thousand blogging platforms that want your content, knowledge, and time. I say nay! In this article I’ll lay out all the steps you need to build this exact website and host your content on GitHub pages. What you’ll get: A blogging website hosted on GitHub The Hugo PaperMod theme Menus to filter content by categories and tags Full text search Tracking with Google Analytics ...
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. ...
I write a lot of tech focused content for my personal Hugo blog and my side project’s Astro website. Both of these documentation frameworks require you to add Frontmatter to the top of each article that outlines specific metadata. For example, the article’s title, description, and draft status would go here: --- title: "Workspace Specific Markdown Snippets" date: 2025-01-13T17:57:48-05:00 draft: true --- My issue is that I never remember everything that’s required by my blog schemas. Tags, categories, publish dates, update dates, etc. ...
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: ...
Just the Steps Open settings Search for “address bar” (Privacy, search, and services -> Address bar and search) Select “Manage search engines” Select “Add” Fill in the fields with the following information: Search engine: SearchGPT Shortcut: @ai URL with %s in place of query: https://chatgpt.com/?q=%s&hints=search Click “Save” Click the three dots next to SearchGPT and select “Make default” If you don’t want to set SearchGPT as your default search engine, you can still use it by typing “@ai” in the address bar followed by your search query. ...
Just the Steps Open settings Search for “address bar” (Privacy, search, and services -> Address bar and search) Select “Manage search engines” Select “Add” Fill in the fields with the following information: Search engine: Perplexity Shortcut: @ai URL with %s in place of query: https://perplexity.ai/search/new?q=%s Click “Save” Click the three dots next to Perplexity and select “Make default” If you don’t want to set Perplexity as your default search engine, you can still use it by typing “@ai” in the address bar followed by your search query. ...