Monica's Digital Playground

aboutmonica.com · English

Monica Powell is a Senior Software Engineer who crafts innovative educational software for classrooms.

rss2 fediverse indieweb content

Open the feed

https://aboutmonica.com/rss.xml

Last post: Mar 17, 2025
Posts in 24 h · 7 days · 30 days: 0 · 0 · 0
Our last check: Answering
Served from: United States
Text score at discovery: 9,281
Format: rss2
Features in the feed: content
Community: fediverse, indieweb

Posts

What our queue read from this feed. Open one to read it here, or go to the site that published it.

2019 into 2020, Year in Review
Jan 1, 2020 · original
The past decade included many transitions for me, from graduating high school to graduating from my dream college in New York City to successfully switching careers and becoming a software developer. Tweet tweetLink="waterproofheart/status/1201359059791822851?s"/ I’m hoping in the next decade that I can continue to do meaningful work to make it easier for underrepresented folks to thrive in tech roles, learning how to work smarter not harder, further develop my sense of self & identity outside of my career/professional skills, and tackle some of my vices for the long run (holding onto things too long and procrastinating esp. when that means more work or trouble for me later, etc.). I could go on and on about the last 10 years but it's officially 2020 and I've decided to start by writing my first public year in review! In 2019, I started to learn new technologies including TypeScript, Con
Automating File Creation With JavaScript
Jan 29, 2020 · original
Do you ever find yourself copying and pasting the same boilerplate code for multiple files at a time? Do you stop and think every time you have to construct an ISO 8601 formatted date? 🤔 How frustrating would it be if you could no longer copy and paste your template code from one file to another? This article will walk through how to quickly create a command-line interface (CLI) tool that generates text-based files. In particular, the examples in this article will walk through how to create templates to generate a new .jsx Page in a Gatsby blog with tests as well as how to generate markdown files with the initial structure of a blog post. These examples should serve as inspiration as the sky is the limit in regards to what type of text files can be generated based on the needs of a particular developer or project. Why Scaffolding? The CLI we will be creating is a type of scaffolding sof
Understanding Reduce in JavaScript
Mar 29, 2020 · original
Reducing an array is a helpful functional programming technique to use when you need to reduce multiple values into a single value. Although that single value isn't limited to being an integer it can be an array, an object...etc. I've found reduce to be a handy method to have at your disposal during technical interviews. This article will introduce ES6's reduce() method and then walk through various ways to use reduce and discuss other built-in methods that abstract reduce() like map() and filter() . The general structure when using reduce() is: input.reduce(callback, initialAccValue); // Note: the `initialAccValue` is optional but effects how reduce() behaves When an initialAccValue is supplied,the callback function is called on every item within the input array. The callback function will then mutate the accumulator until it has gone through every item and it reaches it final value. Th
Refactoring useState() To useReducer()
Apr 4, 2020 · original
I recently created a Stimulus Check Calculator based on figures from the CARES Act and the Washington Post to help people estimate the amount of their stimulus check under the CARES Act. This article will walk through how I refactored the calculator's state management by consolidating multiple useState() React hooks into a single useReducer() . useReducer() is an alternative that can be considered when using useState() to manage state in functional React components. This article assumes some familiarity with state management in React and React Hooks . Managing form state with useState(); In order to use the useState() React hook for state management of the calculator I first needed to import useState from React. import { useState } from "react"; Setting the initial state with useState() Then within the function that is returning the Form component I setup the useState() hooks for taxYear
Top Gatsby Plugins For Developer Blogs
Apr 19, 2020 · original
I've published dozens of articles on this site, which was built using Gatsby . In the past year I decided to invest more time into maintaining my blog and want to share the top plugins I recommend to enhance your Gatsby blog. Gatsby has a vast library of plugins which are Node packages that are designed to work with Gatsby APIs to extend the functionality of Gatsby sites. I was motivated to invest more in maintaining my site because as a creator on the web it's important to have a place that you have full control over that houses all of your content. More and more developers are migrating back to self-hosting their blogs and thus retaining greater autonomy and ownership over their content. I encourage all developers who choose to blog and have the time/resources to not only maintain their blog but to consider cross-posting to sites like dev.to . If you're just getting started with syndic
Exploring Art Direction With Gatsby-Image
Jun 24, 2020 · original
import Callout from "../../components/Callout.astro"; While updating my homepage to include my newly-commission illustration from Aishwarya Tandon , I wanted to load different versions of the image based on screen-size in a performant way. For my header image, I use gatsby-image , an official GatsbyJS plugin that optimizes images that makes it straightforward to control how images are progressively enhanced on page load. One of my favorite built-in Gatsby image effects is a href="https://using-gatsby-image.gatsbyjs.org/traced-svg/"traced SVGs/a, which renders an SVG tracing of an image, in a pre-determined color before the image fully loads. You can explore all of gatsby-image's built-in loading effects on the using-gatsby-image site. The above GIF illustrates how gatsby-image transitions from traced SVG to the loaded image While looking into how to load different images at different bre
4 Meetups That Helped Me Grow as A Woman of Color in Tech
Jul 26, 2018 · original
Attending various tech Meetups over the years has been pivotal to my growth as a technologist I took a leap and left my full-time job as an email marketer, to work to pursue software engineering! This summer I kicked off my engineering career as a Full Stack Engineering Intern at Meetup with the Meetups at WeWork team; we are responsible for allowing organizers to seamlessly book space to host their Meetup events. I strongly encourage event organizers to check it out and learn more here as this service is currently free. Tweet tweetLink="heif/status/1016336592141733890"/ Attending various Meetups in New York City over the years has been pivotal to my growth as a technologist and has led me to go to technical talks and conferences that covered topics beyond my comfort zone, pushed me to contribute my writing to multiple Medium publications, helped me to go from student to teaching assista
Adding Environment Variables To GitHub Actions
Aug 23, 2020 · original
This article walks through how to pass environment variables to GitHub Action Workflows. I recently set up GitHub actions on this site to automatically run unit tests whenever I open a new Pull Request to ensure that changes to the site were not introduction breaking changes to unit tests under the radar. I ran into some hiccups when setting it up so that the workflow could install the Font Awesome dependency which requires an NPM token. I went through a few of my GitHub Actions build minutes while testing how to properly pass environment variables to my .github/workflow/test.yml file. Hopefully this article saves you some time and build minutes the next time you set up environment variables for GitHub Actions. In order to setup my GitHub Action, I modeled my new GitHub Action workflow after similar functional workflows and expected everything to run smoothly. However, I merged the pull
How to Add Instagram Timeline To a NextJS Site
Dec 21, 2020 · original
import Callout from "../../components/Callout.astro"; Callout variant="danger" Due to changes in the Instagram API the method for displaying Instagram photos in this article currently bdoes not work/b due to CORS issues. I recommend{" "} a href="https://developers.facebook.com/docs/development/" applying for access to Facebook/Instagram APIs /a{" "} for stable access to content hosted on Instagram. /Callout I recently added an Instagram timeline to my site In Digital Color and wanted to share how I added the Instagram integration to my NextJS site and document some of the hiccups I encountered along the way with authentication. Screenshot of Instagram Timeline integration on indigitalcolor.com Install and import instagram-web-api We'll use the instagram-web-api npm package to do the heavy lifting for the integration. which should be installed within a NextJS site with npm install instagr
Advent of Code - Day 01 2022
Dec 4, 2022 · original
'Tis the season of Advent of Code which is an annual challenge of holiday-themed puzzles to solve with code. I usually attempt a few of the problems each year; the puzzles tend to get progressively more challenging each day and sometimes build on top of solutions from puzzles on earlier days. Each day you can earn up to ⭐️⭐️ (two stars) by solving both Part 1 and Part 2 (which adds a twist to part 1). To keep things interesting, Advent of Code gives different users different values in their input files to test their solution. Once you feel that you've solved a problem you can run the function against the input file that AoC provided and then see if the output matches what AoC expected. They'll generally tell you if your answer is too high/too low to help nudge you in the right direction. Helper Functions I find that because Advent of Code gives large input files it's helpful to have help
Fetch Webmentions Automatically with GitHub Actions
Mar 14, 2025 · original
import Callout from "../../components/Callout.astro"; As I'm re-writing this site in Astro , I'm re-implementing features such as Webmentions [^1]. Webmentions are a web standard that enables cross-site interactions including likes, replies, bookmarks, and reposts. This article walks through setting up an automated workflow that retrieves new Webmentions on a schedule, stores them as JSON files, and opens pull requests for review. This automation is largerly powered by a Node.js script and GitHub Actions. The goal of this workflow is to keep the Webmention data that is displayed relatively up-to-date while also having moderation in place before any any unreviewed content can become visible. Displaying Webmentions Webmentions on this site appear near the bottom of each article as avatars for likes, reposts, and bookmarks, and as comments for replies and mentions. Avatars for likes and sha
Delete Your Code and Other Reflections from Coderetreat Day
Nov 17, 2019 · original
import { Tweet } from "@astro-community/astro-embed-twitter"; Trefoil Knot Conway's Game of Life, Source: Raphaelaugusto I participated in the 2019 Global Coderetreat Day which was held on November, 16th, 2019, and attempted to solve " Conway's Game of Life " five times throughout the day. Each time I went through the problem with different people and focused on a different software development approach such as Test-Driven Development (TDD). TDD is a software development practice where individual unit tests are written before writing any functional logic and the specific tests dictate which functionality should be implemented next. By the end of the day, I had used various code editors including Visual Studio Code, CodeSandbox, Glitch, and Atom as well as different flavors of JavaScript and JavaScript testing. Tweet tweetId="https://twitter.com/coderetreat/status/1088318474487848961?s" /
Conquering the Command Line
Dec 5, 2017 · original
A brief guide to getting started on UNIX/Mac OS terminal Output on Mac OS terminal after typing: telnet towel.blinkenlights.nl When I was first introduced to the command line I really had to adjust to navigating my computer in a black box with just text. So I avoided the command line as much as possible. I was accustomed to the visual cues and feedback that a computer usually provides. In many ways it felt like I was re-learning how to use a computer via the command line. Yet, since first learning how to navigate my computer using UNIX commands I’ve learned that the command line doesn’t have to be a scary thing just because there’s no visual feedback when typing a password in on the command line. As security, nothing shows up as you type in your password to indicate that any characters have been entered. What is the command line? The command line is a software that executes commands or i
Gradients with Lerp
Sep 5, 2024 · original
import P5Sandpack from "../../components/P5CustomSandpack.tsx" import CodePen from "../../components/Pen.astro"; import cliffordAttractor from "./assets/clifford-attractor.png"; import gradientGrid from "../sketches/gradient-grid/preview.png"; import lerpNumbers from "./assets/lerp-numbers.png"; import purplePinkGradient from "./assets/purple-pink-gradient.png"; import P5ExternalLink from "../../components/p5ExternalLink.astro"; import HexColor from "../../components/hexColor.astro"; import Callout from "../../components/Callout.astro"; Creative coding has given me a better appreciation for how math can be used to generate visuals, like this donut-shaped a href="https://paulbourke.net/fractals/clifford/" target="_blank" rel="noreferrer noopener"Clifford Attractor/a I created earlier this year during a href="https://genuary.art/" target="_blank" rel="noreferrer noopener"#genuary/a. img sr
How to Add Search Functionality to a Gatsby Blog
Nov 26, 2019 · original
I recently added functionality to this site to allow visitors to filter posts based on the posts description, title, and tags in an effort to allow better discovery of content. This tutorial will is based off of how I implemented a basic search on this site and will cover how to create a search filter on a site built with GatsbyJS . In particular, this tutorial walks through how to create an input field that allows users to filter a list of an entire Gatsby site's posts if the description, title or tags matches the input query. The solution proposed in this tutorial leverages GraphQL and React hooks to update the state to show appropriate data when content is filtered. centerDemo of the Search Filter/center Getting Started Prerequisites Although, some of the implementation details can be abstracted and applied in any React application to get the most value out of this tutorial you should
Creating New Supabase Users In NextJS
Mar 9, 2021 · original
import Callout from "../../components/Callout.astro"; Callout variant="garden" This article is the beginning of a series about setting up a NextJS with Supabase for user management and database storage. View the next part of this series:{" "} a href="/blog/creating-protected-routes-in-next-js-with-supabase" creating protected routes with NextJS and Supabase /a /Callout This article walks through how to create new users for a Supabase database with an API written in NextJS. Note: at the time of this writing that Supabase is free for a href="https://supabase.io/beta"beta/a users which is pretty nifty as they include a hosted Postgres database which makes it faster to get an application up and running with a functional database. After the Beta period wraps up Supabase is a href="https://supabase.io/docs/pricing"planning on charging for hosting/a and will offer current Beta users 1 year of b
Creating Protected Routes In NextJS With Supabase
Mar 13, 2021 · original
import Callout from "../../components/Callout.astro"; Callout variant="garden" This articles walks through how to create protected routes on NextJS with Supabase's user management. It assumes you already have a NextJS site up and running with the ability to create new Supabase users but if not check out the first part of this series on{" "} a href="/blog/creating-new-supabase-users-in-next-js" creating new Supabase users in NextJS /a /Callout Supabase Auth Overview Supabase has various methods in their JavaScript client library to handle user authentication and uses JSON Web Tokens (JWT) under the hood to manage authentication. If you want to learn more about how Auth works in Supabase check out the Supabase auth deep-dive video series . In order to have protected routes on our NextJS site, we'll need a way to register and authenticate users. We can perform these user actions and checks
Custom ZSH Startup Message
Aug 28, 2024 · original
import Callout from "../../components/Callout.astro"; This post discusses how to customize the ZSH startup message displayed when opening a new terminal window. I recently synced my iTerm2 settings across my computer. I decided while tidying up my local development to update the ZSH startup message that appears on load to include a message and ASCII art. [ASCII art] is the most universal computer art form in the world -- every computer system capable of displaying multi-line text can display ASCII art, without needing to have a graphics mode or support a particular graphics file format. — ASCII Art Archive I browsed the ASCII Art Archive for inspiration from floppy disks to crowns to computers to abstract imagery and eventually settled on this GameBoy-inspired piece by Hayley Jane Wakenshaw . ___ |[_]| |+ ;| hjw `---' Displaying Static Text in New ZSH Window To display these characters w
Getting Started with SVG Animation
Apr 13, 2021 · original
import VanillaCustomSandpack from "../../components/VanillaCustomSandpack.tsx"; export const bobaDemoProps = { html: !DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / titleBubble Tea Animation/title /head body svg xmlns="http://www.w3.org/2000/svg" id="bubbletea" viewBox="0 0 346.68 473.2" defs / g id="tea" stroke="#8574a8" stroke-miterlimit="10" stroke-width="10" path fill="#a89bc4" d="M215.61 415.61c-13.45 21.59-38 47.78-45.61 50-20.94 6.15-107.6-8.78-137-46.11-11.27-14.3-24.81-31.32-27.23-48.54-3.89-27.74 8.33-54.38 9.8-59 17.16-53.69 81.06-197.19 94.31-196.67 56.33 2.23 126.71 34.48 177.65 58.63 9.25 4.39 23.16 9.23 22.63 19.92-2.63 52.72-65.04 174.41-94.55 221.77z" / path fill="#8574a8" d="M42.34 252.37c13.31-8.4 31.25-14.24 44.16-5.25 16.05 11.18 16.84 40.35 36.06 44 10.64 2 20.53-5.74 31.18-7.75 18.39-3.
Getting Started With Webmention and NextJS
Oct 3, 2020 · original
import Callout from "../../components/Callout.astro"; This past week I had the pleasure of being on the Learn with Jason Show to show how to add Webmention functionality to a NextJS website. Webmentions let you pull tweets, other blogs, and other activity from around the web into your site? It was fun live pair programming the implementation of webmentions. Check out the video or read some of the highlights below! Watch the Learn with Jason Episode Watch the Learn with Jason episode below for more information about Webmentions and view the transcript at https://www.learnwithjason.dev/webmention-next-js: iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Ty6tmviF0H0" width="500" /iframe br / What are Webmentions? Webmention are an IndieWeb specification to allow websites to collect comments from across the decentralized social web (i.e., Twitter, Git

Discovered by the rss-feed-index crawler, which checks each feed at most once a month.

Same record as JSON: https://api.agentalog.com/api/feeds/fd_aboutmonica_com_fdfa505dfc075d05. More from this site: aboutmonica.com in the Feeds tab.