-
April 10, 2024 •
I redesigned my sitea few months ago and had fun creating small generative art pieces that change atbuild time.
-
December 14, 2023 •
I added a now reading section to my site to sharethe book I’m reading. It’s powered by GitHub Actions and the pressure that comeswhen all my library loans become available on the same day.
-
November 7, 2022 •
Earlier this year, I createddocumentation action toautomatically 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 thisyear. It’s powered by myGitHub Action to track books, aRaspberry Pi, epaper.js, and ane-paper module.
-
July 16, 2022 •
I have been using GitHub Desktop for years nowand it’s one of my favorite development tools. Desktop has evolved over theyears from an interface for git commands to the command center for development.
-
June 1, 2022 •
This year I migrated my scheduled bots (likeWeatherbot andWeather status) fromusing AWS Lambda to GitHub Actions.
-
January 26, 2022 •
Last year, I started to track new recipes I tried andbooks I read by saving their metadata to YAML files. I hadalready been saving Spotify playlists in thesame way and then this year I started savingWordle games. I have found something deeply gratifyingabout maintaining metadata libraries.
-
January 16, 2022 •
I’m playing Wordle. I love a wordpuzzle and like many have been hooked by the daily game. I wrotewordle-to-yaml-action toarchive my Wordle games to a yaml file.
-
October 9, 2021 •
Withnpm@v7,you no longer have to install peer dependencies. This feature removed a hugemaintenance burden for our documentation sites at Mapbox. Through strategic useof peer dependencies anddependabot,we’ve significantly reduced our dependency maintenance.
-
July 4, 2021 •
Like our markdown linters, all Mapbox documentationrepositories use ashared ESLint configuration.Our configuration covers everything from enforcing React best practices toimproving accessibility, including:
-
June 12, 2021 •
Do you track searches with no results on your site? To the Mapbox documentationteam, it’s an interesting dataset. We can learn what the user wants, but cannotfind, and then turn those failed searches into improvements.
-
June 6, 2021 •
Yesterday I wrote about the markdown linters we use atMapbox. Our other test suite focuses on language and asserts the Mapboxdocumentation styleguide. Our copyeditor is a fork ofalex, which helps you find gender favoring,polarizing, race related, religion inconsiderate, or other unequal phrasing intext.
-
June 5, 2021
-
April 10, 2021 •
Since moving to the documentation team at Mapbox at the end of 2018, I’ve helpedsolved 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 withread-action andinstagram-rss-action. Most recently, I createdbookmark-action that saves aURL along with the page’s metadata to a YAML file. I created this totrack 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 createdInstagram RSS action thatwill generate an RSS feed from one or more public Instagram accounts.
-
February 10, 2021 •
To support my post Haiku 2018-2019, I createdremark-lint-haiku to makesure that each haiku is in 5, 7, 5 syllable pattern. The linter usessyllable to count the syllables.
-
October 14, 2020 •
I built read action, aGitHub Action, that tracks the books thatyou’ve read by storing the book metadata in a yaml file. Services like Goodreadsexist, but I want to own my data.
-
July 5, 2020 •
After working on a feedback feature for Mapbox’s documentation sites, I startedcollecting screenshots of how other companies offer user feedback. I decided tobuild a site to store them all:Feedback Library
-
July 4, 2020 •
A few months ago
@jsnmrs and I started to build a linter that providessuggestions for image alternative text:alt-text.
-
December 1, 2019 •
Last month I participated in Codevember, which is achallenge to code every day in November.
-
July 30, 2019 •
Last year I wrote about how tocreate emails from a Google spreadsheet. I’mgoing to show you how to simplify the process by creating your email template ina Google doc.
-
April 28, 2019 •
Inspired by a recent tilesearch, I set out to create a tiledfloor pattern with CSS grid. Thanks to helpful examples onGrid by Example byRachel Andrew, I triedgrid-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 everyweekday. Members can submit questions via a Slack command if they wish. It’sgreat for ice breakers, to spark conversation, or to have something to lookforward to every morning.
-
November 4, 2018 •
This is part II toDownload Flickr photos in your Jekyll posts and arundown of how I setup a subdomain that points at an AWS S3 bucket to host mysite’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 kickedaround the idea of finding a new home for them. One big reason being that a lotof the images are bloated and I would like to create my own system to controlthem. And now that Flickr is changing its storage policies, it’s time to move myboxes of photos out of their basement.
-
August 31, 2018 •
Earlier this year I attended aSlack Session called Buildingyour first Slack integration. It gave me a ton of ideas. Naturally, I decidedto turn my office lamp into a mood ring as dictated by the emoji in my Slackstatus.
-
June 22, 2018 •
For the past ten years, I’ve created a playlist for each season. I wrote aboutthis 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 aprivate GitHub repository into a system for reviewing talk proposals.
-
January 16, 2018 •
For Ela Conf 2016 and 2017, we created a GoogleForm 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 forall 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 anddiapers changes which may mean needing to turn on our smart bulbs withoutfumbling for our phones or asking Alexa.
-
May 9, 2017 •
I wroteKeep your streak in the work weekonThe Human In The Machinetoday. My article is about how I built ChillBot, a Slack bot that messages me onthe weekends to let me know if I’ve contributed on GitHub for seven consecutivedays and to encourage me to take a break.
-
March 5, 2017 •
I didn’t expect WeatherBot to becomea series of posts, but the weather has beenfluctuating so much scary.
-
March 1, 2017 •
Last week I talked about how I built a WeatherBot thatgives us a heads up if there will be snow over the next several hours. Therecent 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 plowthe driveway if our cars are in the way. I built a little Slack bot that runsthree times a day (7 am, 1 pm, and 7 pm). And if there will be more than oneinch of snow in the next 12 hours thenWeatherBot will ping our Slack:
-
May 8, 2016 •
Yesterday, I had the pleasure of speaking atJekyllConf. My talk, Unconventional use cases forJekyll, is a love story about Jekyll, and ok, some of the experiments andprojects I’ve made with it.
-
October 14, 2015 •
Font Library has delicious data packed into aJSON file. I’ve had an urge to see how else I canhack 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 withlunr.js. Lunr.js is a full text client-side search engineand it works rather well. It took me a few tries to understand how lunr worksand 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 everyoneat FOSS4G NA. I had a great time! You canclick through my slides, follow along withmy notes, orwatchthe 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 maybea handful of states or all the states. You want to assign your data to eachstate or country as a polygon of that area, not a point, so you can do funcolors or popups and make a darn cool map.
-
January 29, 2015 •
After flipping through past posts, I realized that my lush green static mapdidn’t match wintery posts. For example,Christmas day hike. It’s winter, nothing isgreen. 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 onMDN’s article tovisualize 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 iskaty-time.
-
November 3, 2014 •
Add this post to mylove-affair-with-Jekyll-and-Mapboxseries.
-
September 2, 2014 •
For the class that I’m teaching this Fall, I created a Jekyll site to hold thecourse materials. I’m in the camp that Jekyll can doanything 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 theGuide to Responsive-Friendly CSS Columnson CSS-Tricks, I was invited back to write up an Almanac post for eachmulti-column property.
-
July 30, 2014 •
At work today, I’m styling an app. The code is automatically generated, makingme a CSS jockey. It can be challenging, but it makes me flex my CSS powers. Thismorning I found a great use case for :empty.
-
July 26, 2014 •
I’ve doneStatic Google Maps Image for Jekyll Posts,Mapbox for Jekyll Posts, but it’s time tosettle down.
-
July 25, 2014 •
With CSS columns you can create a print-inspired layout with little added markupthat can adapt beyond a fixed canvas. A supported browser will make calculationsto wrap and balance content into tidy columns. If you’re already working with afluid layout, the columns will flow automatically. With the right combination ofproperties, CSS columns can be an interesting layout option that isresponsive-friendly while degrading gracefully.
-
July 9, 2014 •
I love writing my pens in Haml, but I still have a hard time remembering thesyntax. I created a post on my CodePen blog as a running reference guide of allthe 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 ona 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 andstriking 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 toword-break or word-wrap. I cooked up this little visual guide to helpunderstand how each property works. Alas, the answer is truly in the propertyname.
-
March 23, 2014 •
In 2008, I started creating a playlist for every season. I kept my playlists iniTunes, but have migrated to Rdio. These playlists are my audio diaries. I canlisten to one and remember where I was, where I was going, who I was with, andhow I felt. I love these playlists.
-
March 19, 2014 •
The other day I came across the Dribbble shot Cross by Helvetic Brands. I lovedthe pixels and the animation, so I started to code it out. I used a singleelement to create the first pixel and then used box-shadow to generate therest. 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 Eerdenusing Hugo Giraudel’sitems in a circle Sassmixin and generous use of the border property.
-
March 7, 2014 •
Each box below is an anchor tag with a linear-gradient. On hover, thebackground-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-codedcard.
-
February 11, 2014 •
I recently came across the website for the appTHREES. One of my favorite parts of the website isat the bottom. As you scroll, the phone glides down the page and ends up in apocket, where an app store button awaits you.
-
January 30, 2014 •
I created another scalable, chameleon, single element project. This is based offof the Dribbble shot,Power Up Preloader by Mantas Bačiuška.
-
January 26, 2014 •
As of 7/26/2014, this site has moved to theMapbox static API.
-
January 15, 2014 •
I have another single element project! I explored the Dribbble shotEscape 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 singleelement. I planned on using the main element for the text and pseudo elements tocreate the tails of the ribbon.
-
December 23, 2013 •
I coded out the Dribbble shot,Food by nos, and added some hoverpizazz.
-
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 thattells the animation in which direction to play. It’s difficult to differentiatebetween normal, reverse, alternate, and alternate-reverse without avisual reference. I created the animation above to show all the values ofanimation-direction.
-
December 6, 2013 •
I love trying to find different ways to get a job done. Especially when it meansusing a certain piece of technology in an unexpected way. Maybe the job issilly, 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 pseudoelements to achieve the result.
-
November 20, 2013 •
I built this fun little animation fromBeard Chicken’s Dribbble shot. (Theanimation will only run a couple of times here, but on CodePen it’sinfinite… hypnotizing even.)
-
November 5, 2013 •
I saw this Dribbble shot and decided tospin 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 forthe pink section, border-bottom for the green section, and background for theyellow 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 tomake sure that the Git history followed. When I tried to move the filesmanually, SourceTree thought I deleted the files and then created new fileselsewhere. When I commit files like this, SourceTree is usually smart enough tocatch 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’sNavigation 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 puta lot of effort into managing it. Instead I spent a little effort into makingsure 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 behelpful 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 isa nested list.
-
September 13, 2013 •
I use VSCO Cam regularly for iPhone photo editing. The loading animation of theVSCO 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 andbox-sizing.
-
September 6, 2013 •
As of 7/26/2014, this site has moved to theMapbox static API.
-
September 5, 2013 •
After creating the Haml calendar, I decidedto go for a Haml clock.
-
September 4, 2013 •
Original design byRovane 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 cageon the other. When you spin it back and forth quickly, it seems that the bird isin 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 printout 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 thesource 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 byIlya Birman; a calendar that doesn’t need replacing! Naturally, I needed tofigure this out, CodePen style.
-
August 6, 2013 •
I’ve been into simple shapes lately. I foundthis interesting logoon Dribbble and decided to try it out.
-
August 5, 2013 •
AnotherDribbble inspiredproject!
-
August 1, 2013 •
After creating the CSS Diamond I tried to replicatethis Dribbble. I created a listitem for each petal. They are all ovals with transparent border-left andborder-right and then rotated respectively.
-
August 1, 2013 •
I decided to try to create a CodePen from a Dribbble. I started with StickerRebound by Ilja Miskov.
-
August 1, 2013 •
After I showed my boyfriend the CSS Octagon, he pointed out thatwhen 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 ownpage. So here is the Google Font Explorer!
-
May 28, 2013 •
I’m always trying to find the optimal line length for my text. After readingseveralposts,I found that the sweet spot is around 66 characters. While styling my paragraphsI started counting the characters manually. That got old, real fast.
-
May 16, 2013 •
I came in second place during week one season two of theCodePen 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 likeguess and checking, then try out this little tool.
-
January 8, 2013 •
Single element, lots of text-shadow.