-
November 7, 2022 •
Earlier this year, I created documentation action to automatically generate documentation for my GitHub Actions.
-
September 25, 2022 •
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.
-
July 16, 2022 •
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.
-
June 1, 2022 •
This year I migrated my scheduled bots (like Weatherbot and Weather status) from using AWS Lambda to GitHub Actions.
-
January 26, 2022 •
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.
-
January 16, 2022 •
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.
-
October 9, 2021 •
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.
-
July 4, 2021 •
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:
-
June 12, 2021 •
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.
-
June 6, 2021 •
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.
-
June 5, 2021 •
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.
-
April 10, 2021 •
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.
-
March 27, 2021 •
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.
-
February 27, 2021 •
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.
-
February 10, 2021 •
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.
-
October 14, 2020 •
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.
-
July 5, 2020 •
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
-
July 4, 2020 •
A few months ago
@jsnmrs and I started to build a linter that provides suggestions for image alternative text: alt-text.
-
December 1, 2019 •
Last month I participated in Codevember, which is a challenge to code every day in November.
-
July 30, 2019 •
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.
-
April 28, 2019 •
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.
-
March 27, 2019 •
You will know if you have a candidate for an automation when you have: a frequent manual process, consistent data, and a trigger.
-
December 11, 2018 •
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.
-
November 4, 2018 •
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!
-
November 4, 2018 •
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.
-
August 31, 2018 •
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.
-
June 22, 2018 •
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).
-
May 11, 2018 •
Filed under: things we probably don’t need, but idk I want it.
-
February 4, 2018 •
For Ela Conf 2015, 2016, and 2017, we turned a private GitHub repository into a system for reviewing talk proposals.
-
January 16, 2018 •
For Ela Conf 2016 and 2017, we created a Google Form to collect speaker feedback. The form had the following fields:
-
January 6, 2018 •
Try the updated version of this post where I’ll teach you how to draft your email in Google docs
-
December 29, 2017 •
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.
-
December 17, 2017 •
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.
-
May 9, 2017 •
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.
-
March 5, 2017 •
I didn’t expect WeatherBot to become a series of posts, but the weather has been fluctuating so much scary.
-
March 1, 2017 •
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:
-
February 22, 2017 •
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:
-
May 8, 2016 •
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.
-
October 14, 2015 •
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.
-
August 15, 2015 •
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.
-
March 25, 2015 •
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.
-
March 4, 2015 •
A year later, I’m back chatting with Tim:
-
February 21, 2015 •
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.
-
January 29, 2015 •
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).
-
December 30, 2014 •
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:
-
December 19, 2014 •
I really wanted to build something last night, heck, something seasonal. Something to celebrate the fact that I’m done teaching and my free-time is katy-time.
-
November 3, 2014 •
Add this post to my love-affair-with-Jekyll-and-Mapbox series.
-
September 2, 2014 •
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.
-
August 26, 2014 •
Two years ago on CodePen I was picked for the first time ever.
-
August 15, 2014 •
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.
-
July 30, 2014 •
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.
-
July 26, 2014 •
I’ve done Static Google Maps Image for Jekyll Posts, Mapbox for Jekyll Posts, but it’s time to settle down.
-
July 25, 2014 •
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.
-
July 9, 2014 •
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.
-
June 5, 2014 •
A few days ago, I wanted to create a single element spinner. (Just for funsies.) After several minutes of tinkering, I whipped up Twinner Spinner.
-
May 29, 2014 •
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.)
-
May 5, 2014 •
I stumbled upon “Ja!” on Pinterest over the weekend. The bright colors and striking shadow drew me in. I decided to code it out with a Sass function.
-
March 27, 2014 •
Given overflowing text, I always needed to stop and think if I wanted to word-break or word-wrap. I cooked up this little visual guide to help understand how each property works. Alas, the answer is truly in the property name.
-
March 23, 2014 •
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.
-
March 19, 2014 •
The other day I came across the Dribbble shot Cross by Helvetic Brands. I loved the pixels and the animation, so I started to code it out. I used a single element to create the first pixel and then used box-shadow to generate the rest. I started to add the animation, but I spun myself in another direction.
-
March 14, 2014 •
I had a nice time chatting with Chris Enns on the East Wing!
-
March 14, 2014 •
I recreated Leadership Letters #2. by Jeroen van Eerden using Hugo Giraudel’s items in a circle Sass mixin and generous use of the border property.
-
March 7, 2014 •
Each box below is an anchor tag with a linear-gradient. On hover, the background-position changes to reveal the second half of the link’s gradient.
-
February 14, 2014 •
Every Valentine’s Day, I like to make my boyfriend a mushy, gushy, hand-coded card.
-
February 11, 2014 •
I recently came across the website for the app THREES. One of my favorite parts of the website is at the bottom. As you scroll, the phone glides down the page and ends up in a pocket, where an app store button awaits you.
-
January 30, 2014 •
I created another scalable, chameleon, single element project. This is based off of the Dribbble shot, Power Up Preloader by Mantas Bačiuška.
-
January 26, 2014 •
As of 7/26/2014, this site has moved to the Mapbox static API.
-
January 15, 2014 •
I have another single element project! I explored the Dribbble shot Escape by Carla Corrales.
-
January 3, 2014 •
I recreated the Dribbble shot Flat icon by Bosco.
-
January 1, 2014 •
I knew that I wanted to code out the Dribbble shot END by Catt as a single element. I planned on using the main element for the text and pseudo elements to create the tails of the ribbon.
-
December 23, 2013 •
I coded out the Dribbble shot, Food by nos, and added some hover pizazz.
-
December 19, 2013 •
I whipped up a little animation in honor of the holidays.
-
December 9, 2013 •
I never fully understood the values of animation-direction, the property that tells the animation in which direction to play. It’s difficult to differentiate between normal, reverse, alternate, and alternate-reverse without a visual reference. I created the animation above to show all the values of animation-direction.
-
December 6, 2013 •
I love trying to find different ways to get a job done. Especially when it means using a certain piece of technology in an unexpected way. Maybe the job is silly, but it’s the problem solving that I really, truly dig.
-
December 4, 2013 •
The .box is a single element. I used the transform property and pseudo elements to achieve the result.
-
November 20, 2013 •
I built this fun little animation from Beard Chicken’s Dribbble shot. (The animation will only run a couple of times here, but on CodePen it’s infinite… hypnotizing even.)
-
November 5, 2013 •
I saw this Dribbble shot and decided to spin out a few ideas. I ended up creating customizable, random-generated, scalable balloons!
-
November 1, 2013 •
For this pen, I made each ice cream a single element. I used border-top for the pink section, border-bottom for the green section, and background for the yellow section. The inner ice cream shadow is a :before and the stick is an :after.
-
October 29, 2013 •
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.
-
October 27, 2013 •
Another Dribbble shot turned code. Hover for zombification.
-
October 10, 2013 •
Another Dribbble shot for the books. This time it’s Navigation Bar by Jan Kaděra. I did my own interpreting for the hover. So please, give that nav a hover!
-
September 30, 2013 •
A Dribbble shot that I coded out and added some fun transitions on hover.
-
September 29, 2013 •
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.
-
September 23, 2013 •
After working with Google Static Maps for some of my posts (re: Static Google Maps Image for Jekyll Posts), I started scheming on an easier way to arrive at a map. I thought this might be helpful for other people too.
-
September 18, 2013 •
I could not have made this without Haml and Sass.
-
September 17, 2013 •
This is typical list-style navigation, in that the dropdown/accordion effect is a nested list.
-
September 13, 2013 •
I use VSCO Cam regularly for iPhone photo editing. The loading animation of the VSCO Cam logo had intrigued me for a while, so I decided to write it out.
-
September 13, 2013 •
The effect is achieved on a single element using the properties border and box-sizing.
-
September 6, 2013 •
As of 7/26/2014, this site has moved to the Mapbox static API.
-
September 5, 2013 •
After creating the Haml calendar, I decided to go for a Haml clock.
-
September 4, 2013 •
Original design by Rovane Durso.
-
September 3, 2013 •
Original design by Ben Bate.
-
August 28, 2013 •
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.
-
August 27, 2013 •
My first try Angular form validation.
-
August 26, 2013 •
While I was looking through the Haml docs today, I found the ability to print out the date. My gears started spinning. Why not create a calendar?
-
August 19, 2013 •
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.
-
August 10, 2013 •
See the Pen Simple border-width loader by Katy DeCorah (
@katydecorah) on CodePen
-
August 7, 2013 •
A few days ago I saw Forebruary by Ilya Birman; a calendar that doesn’t need replacing! Naturally, I needed to figure this out, CodePen style.
-
August 6, 2013 •
I’ve been into simple shapes lately. I found this interesting logo on Dribbble and decided to try it out.
-
August 5, 2013 •
Another Dribbble inspired project!
-
August 1, 2013 •
After creating the CSS Diamond I tried to replicate this Dribbble. I created a list item for each petal. They are all ovals with transparent border-left and border-right and then rotated respectively.
-
August 1, 2013 •
I decided to try to create a CodePen from a Dribbble. I started with Sticker Rebound by Ilja Miskov.
-
August 1, 2013 •
After I showed my boyfriend the CSS Octagon, he pointed out that when the octagon has no width, it looks like a bicycle wheel.
-
July 25, 2013 •
See the Pen Simple chart by Katy DeCorah (
@katydecorah) on CodePen
-
July 3, 2013 •
Update 9/12/2013 I received many requests on CodePen to make this pen its own page. So here is the Google Font Explorer!
-
May 28, 2013 •
I’m always trying to find the optimal line length for my text. After reading several posts, I found that the sweet spot is around 66 characters. While styling my paragraphs I started counting the characters manually. That got old, real fast.
-
May 16, 2013 •
I came in second place during week one season two of the CodePen Rodeo!
-
April 19, 2013 •
I created a functioning combination lock.
-
January 9, 2013 •
If you have a color that you would like to adjust in Sass, but don’t feel like guess and checking, then try out this little tool.
-
January 8, 2013 •
Single element, lots of text-shadow.