Code

Earlier this year, I created documentation action to automatically generate documentation for my GitHub Actions.

I built a display that shows the book I’m reading and how many books I read this year. It’s powered by my GitHub Action to track books, a Raspberry Pi, epaper.js, and an e-paper module.

I have been using GitHub Desktop for years now and it’s one of my favorite development tools. Desktop has evolved over the years from an interface for git commands to the command center for development.

This year I migrated my scheduled bots (like Weatherbot and Weather status) from using AWS Lambda to GitHub Actions.

Last year, I started to track new recipes I tried and books I read by saving their metadata to YAML files. I had already been saving Spotify playlists in the same way and then this year I started saving Wordle games. I have found something deeply gratifying about maintaining metadata libraries.

I’m playing Wordle. I love a word puzzle and like many have been hooked by the daily game. I wrote wordle-to-yaml-action to archive my Wordle games to a yaml file.

With npm@v7, you no longer have to install peer dependencies. This feature removed a huge maintenance burden for our documentation sites at Mapbox. Through strategic use of peer dependencies and dependabot, we’ve significantly reduced our dependency maintenance.

Like our markdown linters, all Mapbox documentation repositories use a shared ESLint configuration. Our configuration covers everything from enforcing React best practices to improving accessibility, including:

Do you track searches with no results on your site? To the Mapbox documentation team, it’s an interesting dataset. We can learn what the user wants, but cannot find, and then turn those failed searches into improvements.

Yesterday I wrote about the markdown linters we use at Mapbox. Our other test suite focuses on language and asserts the Mapbox documentation styleguide. Our copyeditor is a fork of alex, which helps you find gender favoring, polarizing, race related, religion inconsiderate, or other unequal phrasing in text.

At Mapbox, we write a majority of documentation in markdown. We have a suite of markdown linters to help us stay consistent and improve the quality of our documentation.

Since moving to the documentation team at Mapbox at the end of 2018, I’ve helped solved a lot of fun problems, but haven’t written about them. Let’s change that.

I have been on a GitHub actions kick with read-action and instagram-rss-action. Most recently, I created bookmark-action that saves a URL along with the page’s metadata to a YAML file. I created this to track all the new recipes I tried so far this year.

After missing a local pierogi pop up, I needed a better way to manage Instagram. I created Instagram RSS action that will generate an RSS feed from one or more public Instagram accounts.

To support my post Haiku 2018-2019, I created remark-lint-haiku to make sure that each haiku is in 5, 7, 5 syllable pattern. The linter uses syllable to count the syllables.

I built read action, a GitHub Action, that tracks the books that you’ve read by storing the book metadata in a yaml file. Services like Goodreads exist, but I want to own my data.

After working on a feedback feature for Mapbox’s documentation sites, I started collecting screenshots of how other companies offer user feedback. I decided to build a site to store them all: Feedback Library

A few months ago @jsnmrs and I started to build a linter that provides suggestions for image alternative text: alt-text.

Last month I participated in Codevember, which is a challenge to code every day in November.

Last year I wrote about how to create emails from a Google spreadsheet. I’m going to show you how to simplify the process by creating your email template in a Google doc.

Inspired by a recent tile search, I set out to create a tiled floor pattern with CSS grid. Thanks to helpful examples on Grid by Example by Rachel Andrew, I tried grid-template-areas.

You will know if you have a candidate for an automation when you have: a frequent manual process, consistent data, and a trigger.

I built a Slack app that asks your workspace channel a random question every weekday. Members can submit questions via a Slack command if they wish. It’s great for ice breakers, to spark conversation, or to have something to look forward to every morning.

This is part II to Download Flickr photos in your Jekyll posts and a rundown of how I setup a subdomain that points at an AWS S3 bucket to host my site’s assets. And https, too!

I’ve stored all my photos for this blog on Flickr. For a while now I have kicked around the idea of finding a new home for them. One big reason being that a lot of the images are bloated and I would like to create my own system to control them. And now that Flickr is changing its storage policies, it’s time to move my boxes of photos out of their basement.

Earlier this year I attended a Slack Session called Building your first Slack integration. It gave me a ton of ideas. Naturally, I decided to turn my office lamp into a mood ring as dictated by the emoji in my Slack status.

For the past ten years, I’ve created a playlist for each season. I wrote about this before when I made Jekyll data playlists. At the end of each season, the playlist gets a post and I store all the data in _data/playlists.yml (for safe keeping).

Filed under: things we probably don’t need, but idk I want it.

For Ela Conf 2015, 2016, and 2017, we turned a private GitHub repository into a system for reviewing talk proposals.

For Ela Conf 2016 and 2017, we created a Google Form to collect speaker feedback. The form had the following fields:

Try the updated version of this post where I’ll teach you how to draft your email in Google docs

I made a command line tool to run when I go into labor, AwayBot. This bot can also be used for all types of leave that take you out of the office for a while.

When our son arrives next year, we’re anticipating late night feedings and diapers changes which may mean needing to turn on our smart bulbs without fumbling for our phones or asking Alexa.

I wrote Keep your streak in the work week on The Human In The Machine today. My article is about how I built ChillBot, a Slack bot that messages me on the weekends to let me know if I’ve contributed on GitHub for seven consecutive days and to encourage me to take a break.

I didn’t expect WeatherBot to become a series of posts, but the weather has been fluctuating so much scary.

Last week I talked about how I built a WeatherBot that gives us a heads up if there will be snow over the next several hours. The recent warm weather inspired me to add warm weather alerts:

We live in Upstate New York so there’s snow and it’s kind of pain for J to plow the driveway if our cars are in the way. I built a little Slack bot that runs three times a day (7 am, 1 pm, and 7 pm). And if there will be more than one inch of snow in the next 12 hours then WeatherBot will ping our Slack:

Yesterday, I had the pleasure of speaking at JekyllConf. My talk, Unconventional use cases for Jekyll, is a love story about Jekyll, and ok, some of the experiments and projects I’ve made with it.

Font Library has delicious data packed into a JSON file. I’ve had an urge to see how else I can hack the file with Jekyll and tonight I was up for the challenge.

I recently spent some time hooking up a Jekyll site with lunr.js. Lunr.js is a full text client-side search engine and it works rather well. It took me a few tries to understand how lunr works and then translate that into a Jekyll site (I had some help from this post) so here’s a walk through of I how got it all connected.

A couple weeks ago I gave my talk Writing for everyone at FOSS4G NA. I had a great time! You can click through my slides, follow along with my notes, or watch the video.

A year later, I’m back chatting with Tim:

Say you have a dataset for a handful of countries or all the countries, or maybe a handful of states or all the states. You want to assign your data to each state or country as a polygon of that area, not a point, so you can do fun colors or popups and make a darn cool map.

After flipping through past posts, I realized that my lush green static map didn’t match wintery posts. For example, Christmas day hike. It’s winter, nothing is green. Everything is white and then gray and then cold and then sometimes sad. So I needed a map style to match winter (minus the sad).

Way back in May, I built a pen based on MDN’s article to visualize and compare all CSS lengths. Here’s the original pen:

See the Pen Snowflaker by Katy DeCorah (@katydecorah) on CodePen.

Add this post to my love-affair-with-Jekyll-and-Mapbox series.

For the class that I’m teaching this Fall, I created a Jekyll site to hold the course materials. I’m in the camp that Jekyll can do anything and I want to use it always (Jekyll, you fantastic son of a bitch).

Two years ago on CodePen I was picked for the first time ever.

After writing the Guide to Responsive-Friendly CSS Columns on CSS-Tricks, I was invited back to write up an Almanac post for each multi-column property.

At work today, I’m styling an app. The code is automatically generated, making me a CSS jockey. It can be challenging, but it makes me flex my CSS powers. This morning I found a great use case for :empty.

I’ve done Static Google Maps Image for Jekyll Posts, Mapbox for Jekyll Posts, but it’s time to settle down.

With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you’re already working with a fluid layout, the columns will flow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.

I love writing my pens in Haml, but I still have a hard time remembering the syntax. I created a post on my CodePen blog as a running reference guide of all the fun Haml snippets that I have used to date.

See the Pen Twinner Spinner by Katy DeCorah (@katydecorah) on CodePen.

I’m a total AngularJS rube, so it took me a few tries to get Angular to work on a Jekyll site. Since both use {{ curly brackets }}, Jekyll will gobble up the brackets first. (And none for AngularJS.)

See the Pen Ja! by Andreas Samuelsson by Katy DeCorah (@katydecorah) on CodePen. Ja! by Andreas Samuelsson

See the Pen word-break or word-wrap? by Katy DeCorah (@katydecorah) on CodePen.

In 2008, I started creating a playlist for every season. I kept my playlists in iTunes, but have migrated to Rdio. These playlists are my audio diaries. I can listen to one and remember where I was, where I was going, who I was with, and how I felt. I love these playlists.

See the Pen Dots by Katy DeCorah (@katydecorah) on CodePen.

I had a nice time chatting with Chris Enns on the East Wing!

See the Pen Leadership Letters #2. by Jeroen van Eerden by Katy DeCorah (@katydecorah) on CodePen. Leadership Letters #2. by Jeroen van Eerden

See the Pen Slidey Background by Katy DeCorah (@katydecorah) on CodePen.

See the Pen calc(you + me) by Katy DeCorah (@katydecorah) on CodePen.

See the Pen THREES App Store Button by Katy DeCorah (@katydecorah) on CodePen.

See the Pen Power Up Preloader (GIF) by Mantas Bačiuška by Katy DeCorah (@katydecorah) on CodePen.

As of 7/26/2014, this site has moved to the Mapbox static API.

See the Pen Escape by Carla Corrales by Katy DeCorah (@katydecorah) on CodePen.

See the Pen Flat icon by _Bosco by Katy DeCorah (@katydecorah) on CodePen

See the Pen END by Catt by Katy DeCorah (@katydecorah) on CodePen

See the Pen Food by nos by Katy DeCorah (@katydecorah) on CodePen

See the Pen Holiday tree(s) by Katy DeCorah (@katydecorah) on CodePen

See the Pen Animation Direction by Katy DeCorah (@katydecorah) on CodePen

See the Pen Heroes Queue by Antonas Deduchovas by Katy DeCorah (@katydecorah) on CodePen

See the Pen Simple Box by Katy DeCorah (@katydecorah) on CodePen

See the Pen Rabbit by Beard Chicken by Katy DeCorah (@katydecorah) on CodePen

See the Pen Random Customizable Balloons by Katy DeCorah (@katydecorah) on CodePen

See the Pen Ice Cream Pattern by Dorottya Porkolab by Katy DeCorah (@katydecorah) on CodePen

Today at work I needed to move and rename a ton of files, but I also needed to make sure that the Git history followed. When I tried to move the files manually, SourceTree thought I deleted the files and then created new files elsewhere. When I commit files like this, SourceTree is usually smart enough to catch on, but it wasn’t happening. No good.

See the Pen Hallowiener by Bobby McKenna by Katy DeCorah (@katydecorah) on CodePen

See the Pen Navigation Bar by Jan Kaděra by Katy DeCorah (@katydecorah) on CodePen

See the Pen BoldMedia Logo Variation by Jeroen van Eerden by Katy DeCorah (@katydecorah) on CodePen

For this site I wanted my categories to be color coded, but I didn’t want to put a lot of effort into managing it. Instead I spent a little effort into making sure I didn’t have to manage it.

View the Google Static Map Marker.

See the Pen Bowl of Trees by Katy DeCorah (@katydecorah) on CodePen

See the Pen Accordion Nav by Katy DeCorah (@katydecorah) on CodePen

See the Pen VSCO CAM logo by Katy DeCorah (@katydecorah) on CodePen

See the Pen Simple Split Color Element by Katy DeCorah (@katydecorah) on CodePen

As of 7/26/2014, this site has moved to the Mapbox static API.

See the Pen Haml Clock by Katy DeCorah (@katydecorah) on CodePen

Original design by Rovane Durso.

Original design by Ben Bate.

As a kid, I remember drawing a picture of a bird on one side of paper and a cage on the other. When you spin it back and forth quickly, it seems that the bird is in the cage. Here’s a take on that.

My first try Angular form validation.

See the Pen Haml Calendar by Katy DeCorah (@katydecorah) on CodePen

I gave a few optical illusions a try to flex my Sass skills. You can find the source file for each illusion in the JS tab.

See the Pen Simple border-width loader by Katy DeCorah (@katydecorah) on CodePen

See the Pen Forebruary by Katy DeCorah (@katydecorah) on CodePen

See the Pen Triangles by Katy DeCorah (@katydecorah) on CodePen

See the Pen Font Awesome Buttons by Katy DeCorah (@katydecorah) on CodePen

See the Pen Octagon by Katy DeCorah (@katydecorah) on CodePen

See the Pen Diamond by Katy DeCorah (@katydecorah) on CodePen

See the Pen Bicycle Wheel by Katy DeCorah (@katydecorah) on CodePen

See the Pen Simple chart by Katy DeCorah (@katydecorah) on CodePen

See the Pen Google Font Explorer by Katy DeCorah (@katydecorah) on CodePen

See the Pen Line Length-icator by Katy DeCorah (@katydecorah) on CodePen

See the Pen Rodeo 5 by Katy DeCorah (@katydecorah) on CodePen

See the Pen Combination Lock by Katy DeCorah (@katydecorah) on CodePen

See the Pen Sass adjust-hue reference by Katy DeCorah (@katydecorah) on CodePen

See the Pen Double Vision by Katy DeCorah (@katydecorah) on CodePen