Forem: Cassey Lottman

npx eleventy !== npx @11ty/eleventy

Cassey Lottman — Wed, 07 Apr 2021 21:38:09 +0000

The other day when I went to add a post to my TIL blog, I got a scary error message. The site runs using the static site generator Eleventy, but I got a warning when I tried to start up the site that the command I had just run was not the static site generator at all.

Instead, it seemed I had run a package called eleventy that is completely unaffiliated with the static site generator, which is listed on NPM as @11ty/eleventy.

How did this happen?

My package.json used npx eleventy in its build/start scripts, when it should have used npx @11ty/eleventy as specified in the usage docs. You can see the changes on GitHub.

npx eleventy was being used from the very first commit to my site, which I re-wrote in Eleventy in June of 2019. I had never encountered issues before, and none of the packages involved had changed names recently.

Okay, so why does this work most of the time?

Usually, when I'm setting up to run an Eleventy project in a new workspace, I run npm install, then npm start. If you've forgotten to run npm install, and also don't have Eleventy installed globally on your system, you might see that npx eleventy will try to use the wrong package.

But why??

To understand what happened, we need to look at how npx works. The readme for npx was really helpful for me here.

npx tries to find a command name in $PATH (so, globally installed modules), or in local project binaries, which means specifically, in an entry at the key bin in package.json. The commad name defined in bin doesn't need to match the package name. For example, the package @11ty/eleventy has one command defined, that's just called eleventy. If you call npx using the name of a package, npx will try to guess which command from that package you want - so if you do npx @11ty/eleventy, it will guess that you mean to run the one command that's defined, eleventy.

So, if you've already installed @11ty/eleventy locally or globally, you can run npx eleventy and get the version on your machine - a nice JavaScript static site generator.

If you don't have the static site generator installed locally or globally, and you run npx eleventy, npx will look to the NPM registry and try to find a package there matching the name you entered - just eleventy. It will pull down the package and try to run a command defined in it, and at least currently, find that there is no command for it to run. The package eleventy has a postinstall script that runs, warning you that you just installed a package that is not the popular static site generator.

So what do I do?

If you're using npx eleventy in your build/run scripts or directly on the command line, update those to be npx @11ty/eleventy to make sure you don't accidentally fetch and execute the entirely wrong package.

It also seems like a good idea more generally when using npx to prefer using the fully qualified package name when you can, instead of the command name from bin. If there is just one bin command defined or the name of the command you want matches the package name, this should work. This way, you can avoid being surprised by a command that executes code you didn't actually mean to even download, let alone run.

PS

Did you know that Unabridged Software, where I work, is part of the Eleventy Super Professional Business Network? If you need help with your Eleventy site or want to have one built and don't have the time, get in touch.

Adding a field to your sign-up form with Devise

Cassey Lottman — Fri, 19 Feb 2021 22:39:48 +0000

Devise is the go-to solution for user authentication in Ruby on Rails, and it's extremely customizable. There is documentation galore on everything you can do with it, but when I first started using it, I found it all a bit overwhelming.

I wanted to have a basic sign-up flow and add one custom field that users would be required to enter in order to create an account. Here are the steps I took, starting with installing Devise.

Install Devise

Here we're following the Devise Getting Started guide directly.

Add gem 'devise' to your Gemfile
Run bundle install to install it
Run rails generate devise:install Read the instructions here and make any changes you need to make - probably setting including setting the default Action Mailer URL in config/environments/development.rb.

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

Step 4 of the instructions, at least at time of writing, tells you to optionally run rails g devise:views. Don't do this yet; we just want to bring in the views that we intend to customize little by little.

Run the model generator for Devise

If you want to use the User model, you'll run:

rails generate devise User

As mentioned in the getting started guide, this will create a model if one doesn't already exist, and configure it with the default Devise modules.

Check your User model to make sure you like the included modules, and add more if you want to. If you do, you'll need to uncomment the corresponding sections in migration file.

Add the additional column you want to save on sign up

I knew when I was getting set up with Devise that I'd want to save a the user's name (as in Cassey) along with their email and password on sign-up. So, I went ahead and added the column I wanted to the generated devise_create_users migration. A new user must have a name, so I made it non-nullable.

t.string :name, null: false

You can also create a separate migration to add the extra column if you want, to make it clear what what you added to the base Devise configuration.

When you're ready, run rails db:migrate.

Run the app.

Test your routes

Run your Rails app, and make sure that you can navigate to the new user registration path - by default /users/sign_up. When you're there, you should see a simple form that asks the user for their email, their password, and a password confirmation.

You might want something like this in your main layout, so that users can sign in if they're not signed in already, or sign out. The current_user variable is available automagically thanks to Devise.

<% if current_user %>
  <li><%= link_to "Sign out", destroy_user_session_path, method: :delete  %></li>
<% else %>
  <li><%= link_to "Sign up", new_user_registration_path %></li>
<% end %>

Watch out for the method on the sign out link - it needs to be DELETE, and won't work if you try to make the request with POST.

Bring in the controllers you need to customize

If we try to submit the form at this point, it won't work! We'll see SQLite3::ConstraintException: NOT NULL constraint failed: users.name.

We need to modify the controller that accepts sign ups, in order to actually save the name field to the database.

At first, when you install Devise, the views and even the controllers that will be used are all located in the engine itself - not in your app where you can edit them directly. You can use a generator to bring copies into your app that you can edit.

rails generate devise:controllers users -c registrations

This will create a file at controllers/users/registrations_controller.rb.

In registrations_controller.rb, we have a class Users::RegistrationsController that inherits from Devise::RegistrationsController. All the methods in it are commented out - and as long as you leave them commented out, the behavior of the class will fall back to what's in the parent class, aka Devise's default behaviors.

To make sure this class is actually used for Devise routes, we need to change the settings for devise_for in config/routes.rb, like so:

devise_for :users, :controllers => { registrations: 'users/registrations' }

Okay, back to Users::RegistrationsController.

Uncomment the following lines:

before_action :configure_sign_up_params, only: [:create]

def create
  super
end

def configure_sign_up_params
  devise_parameter_sanitizer.permit(:sign_up, keys: [:attribute])
end

We need to make a change here, to the configure_sign_up_params method, to get rid of the placeholder :attribute that's helping us know what to put where, and add in the form field that we want to allow through the controller.

-   devise_parameter_sanitizer.permit(:sign_up, keys: [:attribute])
+   devise_parameter_sanitizer.permit(:sign_up, keys: [:name])

Bring the views into your app to customize them

Our sign up form is pretty basic but mostly functional (you'll probably want to customize the design a bit soon), but it's still not asking the user for their name. So, let's copy the view over from the Devise engine using the generator.

rails generate devise:views users -v registrations

After running this command, you should see a new folder under views: views/users, which contains ./registrations (and ./shared, if this is the first time you've generated views with Devise). The views/users/registrations folder will have two files, one for editing an account registration, and one for a new sign up.

In views/users/registrations/new.html.erb, we see the code that was generating the form we saw earlier. Let's add a field for the user's name, matching the structure of the generated parts of the form:

<div class="field">
  <%= f.label :name %><br />
  <%= f.text_field :name %>
</div>

When you reload the /users/sign_up in the browser, you should see your new name field! You should be able to submit it at this point, too, since we've already made changes in the controller to allow through the name parameter.

Happy customization!

Let the browser do what browsers do: a story about accessibility on Medium

Cassey Lottman — Fri, 23 Oct 2020 22:42:14 +0000

Hello, friends! Perhaps you have already heard an old web accessibility accessibility principle: developers should rely on browser semantics as much as possible.

Maybe you have heard it in the form of The First Rule of ARIA:

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

The rules of ARIA generally describe how to make interactive aspects of your site accessible. In this post, we're going to look at how overriding browser styling defaults can also lead you astray, accessibility-wise.

This story begins with me, reading some interesting blog posts on Medium.com, on my phone. I use the browser's built-in text magnification, because even with glasses, vision remains a challenge for me. (Specifically, I use Brave and Chrome on Android, with text magnification of 150%.) I had been noticing that link underlines on Medium posts made the words look as if they were struck out.

On Chrome on Android, this isn't a strikeout - these are misbehaving link underlines.

(The story ends with me procrastinating a month to write this post, and in the meantime, Medium has actually fixed the issue. If you change your text magnification settings and go looking for it, you won't find it. Took you a while, *cough* six years but good job, Medium! The screenshots for this piece were all collected on October 1st, 2020, and shared in two different slacks where I was trying to parse through the issue with the help of friends.)

I opened up the same post in a browser to inspect the HTML and CSS, and was surprised: on desktop Firefox, the links were unmarked entirely! Surely someone had noticed this, right? But the misplaced underlines had been happening for me for quite a while on mobile; what was going on?

In desktop (macOS Catalina) Firefox, the link underlines have vanished completely!

Eventually, with the help of folks in some tech slacks I'm in, I realized others weren't seeing what I was seeing. What?!? Then I remembered I also use vision accommodations in desktop browsers. Specifically, I have a minimum font size set at the browser level, and all sites I visit have to display text no smaller than that font, regardless of what the developers wanted. When I turned that off, the underlines snapped back into their normal places.

In mobile chrome, at 100% text magnification, the underlines are present and in their proper places

In Chrome on macOS Catalina, with no font size overrides active, the text underlines are present and in their proper places!

Something you might have noticed in the browser tools of those screenshots (or you might not because the screenshot is blurry; sorry, I didn't copy out the HTML and it's gone forever now) is that Medium is doing some funny-business with the underlines. Each of the links has text-decoration: none, and the underline is being provided through a background-image which is an SVG.

Someone in one of the slacks I was documenting my perplexity in pointed me to this post: "Crafting Link Underlines on Medium", posted on Medium's official design blog way back in 2014. In this post, a designer at Medium documented the design team's frustration with browser built-in underlines, and what considerations went in to building "better" underlines. The frustration seems to be that the underlines were a bit bolder than the design team would like; to my non-designer (and admittedly, lower-than-average vision) eyes, a comparison of the previous and new-then underlines look very similar, and the previous ones certainly don't offend me enough that I'd go to much effort to change them. The author went on to document implementations that the team had considered and rejected, and the one they chose: some code that looked suspiciously like what I was seeing in the developer tools of my browser on October 1, 2020.

Here is where I get a little snarky, because I was going down a deep rabbit hole to figure out why these underlines behaved so poorly for me, then was a bit ragey to find it was yet another broken thing resulting from site builders not anticipating & accounting for the assistive technology I use. And then, I opened this post, from Medium, about the exact thing that has been causing this problem for 6 years now, and it started like this:

How hard could it be to draw a horizontal line on the screen?

insert very snarky comment right about here

Another standout line, that many others before me have highlighted, goes like this:

Web design always seemed like this, too: finding convoluted, “dirty” solutions to often simple problems, using a very limited set of tools.

insert mirthless laugh here

To be fair to the Medium design team, they did consider some accessibility issues in the implementation they eventually chose.

Their list of criteria for the final design includes these lines:

We adjust the sizes of fonts for tablets and mobile phones.
We fall back to a default system font for when we decide that our type doesn’t support all the characters in a given language.
Some people zoom in (or zoom out) their browsers.
Some people use uncommon browsers.

People do zoom in & out their browsers, and good site designs should account for that, and not break. But some people, like me, find that browser zoom is not the best solution for reading text better. If you zoom your browser, you might need to adjust the zoom level on every page you visit. Browser zoom also means that ads and the images accompanying posts have also gotten bigger, so you're going to need to scroll more. (In my case, I can typically see images just fine, except for tiny profile images. I really just need the text to be bigger, and when it's already huge, to not get any bigger. One might say... to be always bigger than a minimum size.)

So here we have a case where a design/dev team wanted to customize the styling of a built-in browser affordance. And they did want to ensure the thing they were building would still be accessible. But, they failed to account for one particular way of making the web accessible that users with low vision might use, and made their experience much worse. (It's distracting that many of the words of some posts appear to be crossed out, as in mobile browsers, and it's even more confusing to have links not visually indicated at all, as in desktop Firefox.)

How has Medium fixed the issue? Took out most of their custom background-image stuff, basically. Now they have a class on all their links, adding text-decoration: underline. Wait Cassey, you said that's built-in, why do they need that? Only because when cleaning up their legacy code that did the background-image stuff, they didn't also axe the CSS that did a { text-decoration: none }, which removes that handy browser built-in.

You can read more about link underlines in this post from @aardrian who does not (in a 2016 blog post, with a few updates since then) take for granted, like I do, that link underlines are obviously good and important, and considers a whole host of reasons people like and dislike them, and what is best for accessibility. (Spoiler, they conclude link underlines are best.)

How Animal Crossing is Bringing Glitch Together

Cassey Lottman — Fri, 27 Mar 2020 17:58:35 +0000

Last Friday, I saw a tweet from my manager that made me a bit nervous. I wanted to engage with it, but would it be crossing a line if I did? I wasn't sure, so I tentatively messaged him in Slack to find out: "Was that tweet for me, too?"

The tweet in question contained a Nintendo Switch friend code, and coincided with the much-hyped launch of Animal Crossing: New Horizons. I was looking forward to the game, too, and wasn't really sure what being Animal Crossing friends would mean, but it sounded very exciting.

My manager replied that it was absolutely fine for us to be friends in the game, and informed me that it meant we could send each other gifts, perhaps to exchange types of fruit that can be planted for big in-game rewards.

Later that day, I joined the #gaming channel in the Glitch slack, where I discovered many other coworkers excited to play Animal Crossing. There was even already a thread someone to share friend codes, and another post where we could use reacji to indicate what type of fruit our island was growing.

After work, I jumped right in to the new game. In this new release of Animal Crossing, your character has just moved to a previously uninhabited island alongside a few anthropomorphic animals. You can catch bugs, go fishing, and decorate your tent and island with all sorts of furniture. The game progresses in real time (an in-game day really lasts 24 hours), and new things to do and explore slowly unlock over time.

Starting on Day 2, players have access to an airport which they can use to visit other player's islands, or host guests themselves. After you've exchanged a visit with a friend, you can also send that friend letters and packages that they'll see the next time they're online.

The #gaming channel in Slack has been very active over the last week. Posts range from memes about the game, to screenshots of our own unique creations, to in-depth discussions of the best tarantula-catching technique. Someone even shared an Animal Crossing-themed Glitch app created by one of our users.

// Detect dark theme var iframe = document.getElementById('tweet-1242881381404835840-104'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1242881381404835840&theme=dark" }

There are around 15 folks who have the game, but we're not the only ones having fun.

The adorable virtual dodo pilots of the in-game airline have also been quite busy, ferrying players and packages back and forth each night for collaborative adventures.

Through the game, I've gained a deeper appreciation for many coworkers: Potch is a gracious host, with a dedicated fenced-in area to make clear what he's giving away to any guests. Melissa is a talented pixel fashion designer, with an elaborate cosplay costume for their character. Osmose has cherries, and since cherries were the last fruit I needed to complete my collection of all the types of trees, I really appreciate that about Osmose.

Opening a new window from a Firefox Add-On

Cassey Lottman — Sun, 15 Mar 2020 21:51:58 +0000

Last year, I made my first couple browser extensions! Both were built to solve immediate needs I have: one to go between the various representations of a Glitch project (the project page at glitch.com/~projectname, the editor, and the running code at projectname.glitch.me), and one to add things to my Pinboard bookmarks.

The code that opens the Add to Pinboard page originated as code for a bookmarklet, provided by Pinboard, but I like extensions better. Bookmarklets show up in my browser's Bookmarks toolbar, which I usually keep hidden. Extensions show up right next to the address bar, in a single line.

I use my Pinboard extension pretty regularly¹, in both Chrome and Firefox as an Add-On. But my Firefox version was annoying: when I clicked the extension, I'd see a little warning that a popup had been blocked, and would I like to allow it to be opened anyways? Yes, I would, every time. But the only options available in the little menu were to always allow popups on whatever site I was trying to save, or allow it just this once. That wasn't great- I might want to allow my Pinboard add-on to open a popup so I can save a link to a cute dress in an online shopping website, but I wouldn't want that shopping site to start sending me its own popups.

How can I allow my extension to always open a popup window in Firefox?

The answer turned out to be something I needed to change in code.

Previously, my extension used the exact same code as the bookmarklet, which called open('https://example.com') to open the new tab.

If I changed my tab-opening code to use the APIs that exist especially for browser extensions, the popup would not be blocked.

chrome.tabs.create({ url: 'https://example.com' });

You can see the full source code for my extension on Glitch.

Thanks to these friends in a Mozilla forum question in 2018 for pointing me in the right direction!

Addendum

Judging by the active user stats, I am probably the only person using my extension, albeit from two different computers. I agree with Robin Sloan that an app can be a home-cooked meal.

Testing Modern React with Enzyme Shallow

Cassey Lottman — Wed, 11 Mar 2020 22:03:32 +0000

tl;dr:

I learned recently that the only way to use Enzyme to test a React component that relies on a useContext hook appears to be to use render or mount, not shallow.

more detail:

I've been helping some coworkers with thorny questions about testing React components lately, and found some surprising issues I hadn't seen blogged about elsewhere. Specifically, let's dive in to testing with the shallow render method from Enzyme.

Assumptions you can make for this post include:

I'm talking about React with hooks, so 16.8+
I'm talking about using the Adapter from Enzyme for testing
I've tested with mochapack and jest and gotten the same results
I am not an expert, nor a maintainer of any of the above libraries.
I do use React for work, and have a basic familiarity with React testing libraries.

General Concerns about `shallow`

Famous JavaScript guy Kent C. Dodds says to never use shallow rendering, and he doesn't even mention the useContext weirdness I'm about to describe. He makes some great points; I recommend giving it a read.

If I do use `shallow`, I still can use `React.Context`, right?

The docs for shallow imply that you can still use context in shallowly rendered components, by providing the wrappingComponent option. This is misleading.

options.wrappingComponent: (ComponentType [optional]): A component that will render as a parent of the node. It can be used to provide context to the node, among other things. See the getWrappingComponent() docs for an example. Note: wrappingComponent must render its children.
options.wrappingComponentProps: (Object [optional]): Initial props to pass to the wrappingComponent if it is specified.

The only way to test a component with Enzyme that relies on a useContext hook appears to be to use render or mount, not shallow.

I made a CodeSandbox of every method I could think of to potentially use useContext with shallow, all of which fail.

Later, I found this longstanding issue in the Enzyme repository describing this exact issue.

Here's a helpful comment from another user with suggested workarounds;
here's a maintainer confirming that fixing this would take substantial effort and probably won't happen.

What about context from React-Redux?

You might think you can avoid this by using React-Redux as your context provider, instead of React's built-in context. You might think this is supported, since the code sample in the Enzyme docs for ShallowWrapper-getWrappingComponent show exactly this. You would be wrong, since React-Redux now also uses useContext for its operations. I have a test demonstrating this in my Code Sandbox repro. (Look for "can use a react-redux provider"). (h/t to coworker Greg, who separately stumbled on this problem this week, for pointing this out!)

I hope this post saves you time and frustration. (No fewer than 3 members of my team spent several hours each on this, just this week.) Happy testing!

My Web Creations from 2019

Cassey Lottman — Thu, 02 Jan 2020 17:33:23 +0000

I coded quite a bit this year - I'm a full-time software developer, after all. I didn't just code for work, though - this year, like last year, I branched out and also wrote code outside of projects that were strictly for work. It certainly helps that Glitch encourages employees to spend some work time working on whatever personal projects we'd like, as long as we build on Glitch. While not all of the work for these projects took place during my work day, you'll notice that most of them were built on Glitch, because Glitch makes it easy to start creating new things based on a starter project ("remix" in Glitch parlance) and get something instantly on the web without thinking about hosting at all.

Accessibility Audit (for work)

In my work at Glitch.com, I was most excited this year to work on an accessibility audit for the parts of the site my team is responsible for, that is, everything except the editor portions. Through the audit and tackling the implementation of accessibility improvements, I gained a deeper understanding of how to make sure the web is accessible to all users. I even returned to my alma mater as a guest lecturer on accessibility for a Design Studio class.

Eleventy

This year was the first time I used Eleventy, and I ended up using it for a lot of different sites. Eleventy is a Javascript static site generator created by a fellow Nebraskan. I like how easy it is to customize and how fast it is, but most of all, I love that it's written in Javascript, which is a language I use all the time. After moving off Wordpress.com, I first created my blog using Jekyll, a Ruby-based static site generator, but it's been years since I worked regularly with Ruby. I have an almost-working copy of my site ported to Hugo, but since I know even less Go than I do Ruby, it was frustrating to work with and I never finished.

cassey.dev

My main personal site is now built with Eleventy! It was ported over in August from Jekyll hosted on GitHub Pages, and it now lives in Netlify. I never got around to adding a search feature, but the tagging system is much more flexible and easy to maintain than it was in the Jekyll version. Also, I didn't notice until too late that the generated URLs use a slightly different format than the old blog did, so there's a lot of broken links out there, mostly on my Twitter and Facebook. Other than that, I'm quite happy with how the site turned out.

TIL Blog

Starting in June, I kept track of things I was learning about tech on an Eleventy site I built called cassey-til. The site also contains some learnings I recorded before creating the site, which I had been storing in a GitHub repository. Want your own Today I Learned blog? Head over to Glitch and remix my "TIL-Blog" project! I set it up so it will be easy to add your own author info and blog title, and you'll start with a blank slate in the posts directory. Follow the instructions in the readme for what to do after remixing.

Link Trees with Eleventy

I built a few link tree-style sites this year, that is, standalone sites with nothing but a list of links on them. After building the first one, when I wanted to make another, I would remix a previous site and then edit a bunch of CSS colors, meta tags, and of course, the links themselves. After going through this manual process enough times, I created a new template for my link trees using Eleventy. It pulls info for the meta tags and page title from a metadata file, and info on each link is pulled from a Javascript file and formatted uniformly into HTML.

My link trees from this year include a list of the best stories captured by local activists in Lincoln, Nebraska, a list of my favorite artists, and a list of resources on digital community health & moderation.

Browser Extensions

Glitch App to Project Extension

At the end of May, I worked on a browser extension to make it easy to go between the various representations of a project on Glitch: the project page (glitch.com/~soulpatch), the editor (https://glitch.com/edit/#!/soulpatch), and the running app (soulpatch.glitch.me). I blogged about creating the App to Project extension, but the initial app was much more limited in features. It would take you from an app to a project page and vice versa, but not the editor. And, it only worked in Chrome. Later, I modified it to add a context menu that lets you choose which page you want to go to from any of the other pages, and made it run in Firefox. A coworker helped refactor the app and fixed a few bugs with it. Overall, the extension works great (I still use it basically every day) and it was a great learning experience.

Pinboard Extension

My first ever browser extension, built this year, was a simple extension to enable me to save the page I'm viewing to Pinboard. Pinboard is a bookmark manager I use to keep track of interesting stuff I find online. Its documentation includes code for a bookmarklet (a snippet of code that you drag to your bookmarks bar in Chrome, which will then run when you click it) to save new links to Pinboard. I don't like bookmarklets though - I prefer to keep my bookmarks bar hidden. So, I took the code from the bookmarklet and made it into a browser extension! Get the Pinboard extension for Chrome or for Firefox.

Progressive Web Apps

Share-to-Pinboard Progressive Web App

I built my first progressive web app this year, once again writing code to facilitate my use of Pinboard. Progressive web apps are websites that can do special things on mobile. When you add this Pinboard PWA to your home screen on Android (you'll see a prompt to do so when visiting the site on a mobile browser), it adds an option to the native share menu (those options you see when you go to share a tweet or a web page) that makes it easy to add something to your collection of bookmarks on Pinboard.

Tools

Airtable as a Newsletter CMS

This is one of the most useful things I built this year - an app that, in conjunction with Airtable, functions as a CMS for my housing & streets policy newsletter. I wrote about the app more extensively already, but basically, it uses the Airtable API to pull in records marked as 'Next Newsletter' in a specified base, and passes those records as data to a Handlebars template that outputs HTML I can paste into TinyLetter, so every newsletter is sent with a consistent format.

Duplicate a Spotify Playlist

In September, I was listening to the Spotify playlist of Lizzo songs curated by Lizzo (or someone on Lizzo's staff at least) all the time, but some new remixes of a few songs were added, and I didn't enjoy them as much. I liked all the other songs on the playlist, though, and copying them over one-by-one sounded tedious. So, I built a little utility app where you can log in with your Spotify account, enter a playlist name and the identifier of a playlist you want to copy, and the app will create a new playlist on your account with all the same songs as the playlist you copied. Then, you can go into Spotify and add/remove songs at will.

When I was first learning to code I kept seeing advice like "write code that solves a problem you have!" but I could never think of any problems I had that had a code-able solution. While I don't encounter problems like this every day, I do have a running backlog of app ideas now.

Threaded Tweet Viewer

Initially intended to be used on threads of tweets full of cartoons and memes, this app shows a thread one panel at a time using the Twitter API. I finished it on March 26, 2019.

Date Night Idea Generator

I found a bunch of good uses for AirTable this year. For example, I created a base and filled it full of things I might plausibly want to do on a date in or around Lincoln, along with some metadata like if it involves being outdoors and what category of date I'd consider it. Then I made this little app to display a random record from that base from a given category. Work on this app happened between July 19 and July 22 of 2019.

Just for Fun

Tally Cat

I finished a website for Tally, so she can have one just like her brother Soul Patch!

My Best Friend Liz

This app was easy - I remixed an app another user (and later, Glitch team member!) created that displays a random grid of gifs alongside some text. I just needed a few modifications to the gif search terms and some different text options, and I had a site! I did end up adding a bit more customization though, so that I could source my "facts" about Elizabeth Warren from the Twitter user who initially made the claim.

A Neopets PetPage I Created Around 2005

Okay, I didn't really write this code this year - but I did, at long last, manage to log in to my old Neopets account, so I could find out the name of one of my pets and see the petpage I created sometime around 2005. I encountered code for the first time on Neopets.com - the virtual pet world allowed users to create a static site for each pet, and even had comprehensive text-based lessons on HTML for users like me to learn from. You can't see my original pet page unless you're logged in to Neopets.com - so I grabbed the HTML while logged in and brought it into the light. I think this probalby wasn't the only site I had, just the final iteration of the one that survived until now.

This post initially appeared on my personal site.

Building a Mini CMS with Node, Handlebars, and Airtable

Cassey Lottman — Fri, 05 Jul 2019 20:23:43 +0000

I recently started a newsletter on housing & streets policies using TinyLetter.com. For my first couple editions, I used TinyLetter's WYSIWYG editor, but I found before long that the HTML & styling it generates can be very inconsistent. How embarrassing!

Fortunately, the TinyLetter WYSIWYG editor also lets you enter HTML source directly. I decided that would be the best route, but I'd prefer to write my newsletters in Markdown and generate the HTML in a structured way. I also was looking for a way to enter ideas for my newsletter on the go - the TinyLetter editor on mobile isn't the most friendly, and I don't have a go-to notes app that I use already.

I came across this blog post on using Trello as a CMS and decided to try to build something similar using Airtable, which I already use for storing structured personal data and to-do lists. I knew that there are some great Airtable starter projects to remix on Glitch.com, so building off one of those felt like a natural step. I remixed the Glitch project Airtable-Example and began hacking.

First, I built the Airtable base to hold my newsletter content. My newsletter is typically in the form of a link roundup, so I expect each newsletter to have multiple entries with a title and associated URL, and a description that tells why I think people might find this link interesting.

Next, I started working on the code. At first I thought maybe I'd want to write the generated HTML to a file that I could copy, but I also wanted to be able to see the rendered HTML of a given newsletter before pasting it in to the TinyLetter editor. So, I decided on a format where the HTML will be displayed side-by-side with the rendered newsletter contents.

At first I was using EJS, as it's a templating engine that has worked well for me on simple projects in the past. I soon found some limitations though that led to a switch to Handlebars. Primarily, there is no support for custom filters in the latest major version of EJS. I wanted a filter to render some of my data (the description field of each newsletter item) as markdown, so that I could have nicely formatted descriptions when I had a lot to say about a given link.

The case where I had a lot to say about one particular link also led to a new format for my newsletter: instead of an <ul> with many links, I wanted to send out info about just a single link, which wouldn't belong in a <ul>. So, I found some helper code for a compare filter in Handlebars that would let me render a <ul> if I have multiple links to show, and a <div> if there is just one link. I found it a bit odd that this isn't built in to Handlebars, but it was easy enough to add a custom helper for it.

I wanted my work-in-progress newsletters to be private, so I added some very basic authentication. I created a form on the index page with a password field, which has to be filled in to match the value I set in .env in order to reveal the contents of the newsletter.

I also wanted my newsletter CMS to be as generalized as possible so others who found it useful could use it. So, I stored all the info that's custom to my app (the name of my newsletter, my name, the values to configure the base to pull newsletter contents from, etc.) in the .env file. When you remix the Airtable-Newsletter-CMS project on Glitch, you'll get a version of the project with the .env ready to fill in with your own values.

You can see the running project on Glitch and remix it for your own use if this is something that feels useful to you.

And of course, if you care about housing & streets policy developments, subscribe to Cassey's Livable Communities Roundup, which was the main impetus for creating this app.

Why I Became a Community Health Engineer

Cassey Lottman — Wed, 03 Apr 2019 22:28:12 +0000

I recently transitioned from a general software engineering position to become a "Community Health Engineer" at Glitch. That job title means I use software engineering to make sure that Glitch stays a safe and welcoming place to create and discover the app of your dreams.

I wasn't initially looking for a community role when I found the job posting, but I discovered it was a perfect fit.

Here's an excerpt from the job posting:

We’re looking for an experienced and community-focused front-end web developer to join our team and help us build the features on Glitch that will help keep it the friendliest community of coders ever!

Our Community Health Engineer will work with the rest of the team to brainstorm, prototype and implement community health features on Glitch, like reporting abuse or displaying safe search results. This role requires both technical skills and the ability to communicate with the Glitch community.

We want someone who will be actively thinking about the effects of our design and features on the community as we grow, and can interact with the community to make sure we’re doing it right.

We’re looking for people with these technical skills:

Strong skills in client-side JavaScript, but you’re okay with diving into Node.js

An ability to stay up-to-date on modern additions to the language (like ES7 features)

Experience in building a11y-compliant interfaces right from the start

Proficiency in component-based development (Glitch uses React!)

Understanding of and experience in using APIs, both internal and 3rd party

CSS savvy, meaning that you know when to use border vs. padding vs. margin, flexbox vs. tables vs. floats, and responsive, fluid design

We’d be particularly delighted to hire someone with:

User interface (UI) and user experience (UX) skills – enough to better collaborate with the designers on our team to make sure our health features are inclusive and relevant to our community health goals.

Experience and/or interest in speaking at technical conferences – so we can communicate our work to the tech community and be a model for others in a similar space.

A passion for online communities and an understanding of the interplay between interfaces and human interactions.

The interpersonal skills will be crucial to your success in this role:

Effective, responsive and frequent multi-platform communication to make sure we hear and deliver on the needs of the Glitch community

Ability to translate, communicate, and prioritize the needs and desires of the community with the needs and desires of the organization.

Enthusiasm for our inclusion goals and an ability to help us measure and promote our progress in working towards them.

Willingness to help us create a roadmap for creating and maintaining a best-in-class healthy community as we grow and evolve.

Most importantly, we’re looking for:

People who care deeply about empowering everyone to create on the web, and who are thoughtful about how to serve a broad set of audiences with sometimes conflicting community goals.

Fluency and familiarity with issues around multiple facets of accessibility and healthy communities.

Comfort with creating in collaboration, both with colleagues on our team and with members of the Glitch community. Ability to both handle projects and effectively delegate projects.

As part of the application, I was asked to describe what community means to me, and what kind of roles I've had in communities in the past. My answer was long and heartfelt, touching on topics ranging from what it meant to be a member of the rural community where I grew up, to finding solace in a subreddit focused on a health condition I experienced, to organizing a grassroots movement for safer streets in my neighborhood with people I'd just met.

In the role I held before starting my current job, I had been an active user and community member before being hired as a software engineer. Once on staff, while my insights as a former active user were highly valued, I also wanted to continue engaging with the community as I had done before. That engagement felt important, but it wasn't factored in to my weekly story points or my team's expectations for how I was spending my time. I felt a lot of frustration in that tension - by engaging with the community, I was discovering bugs and pain points, getting a lot of feedback, and learning about how others used the product. I wasn't on the team that was formally charged with managing the community, so I also ran into friction when my ideas for how to engage with users differed from the official moderators' opinions. Sometimes I found harsh negative feedback from the community that I felt should be shared with the wider staff, but when I did, it was interpreted as a personal attack coming straight from me.

While that experience was challenging and often frustrating, it turned out to be valuable in my application to be a Community Health Engineer. It also helped that I've been reading and engaging in discussion for years on topics like inclusion, accessibility, and the culture of the web.

So far, I'm really happy in my role as a Community Health Engineer. I get to spec out new features and write code, and also engage with a passionate, creative community who surprise and delight me every day. I also feel safe fighting for accessibility and proactively pointing out ways our software could be used for harm, because it's literally in my job description.

Nevertheless, Cassey Lottman Coded (and more)

Cassey Lottman — Fri, 08 Mar 2019 20:18:25 +0000

I'm a web developer, but first and foremost, I'm a community member. My communities include women-in-tech-on-Twitter, progressives fighting for change in a red state, r/weddingplanning, advocates for renters' rights and affordable housing, my book club, people making cool stuff on Glitch, and so many more. My communities are what drive me - coding is my job but not my life, even though some of those community memberships only make sense because I code.

I continued to code in 2019 because...

I need that $$$ to pay my mortgage.

But also, because I am so excited about my new role @glitch as a Community Health Engineer. My job is to build the tools to make sure that as Glitch grows, we don't become the kind of hellscape for minorities that other big social networks have turned into. The job combines my skills in Javascript and React with my passion for building inclusive community spaces both in person and on the web.

I deserve credit for...

Attempting to run for public office while maintaining a full-time job and a healthy home life. My goal is to advance the conversation in local politics to include more people whose voices have been ignored, and prioritize the needs of those who are facing the greatest challenges.
Some big projects I shipped in 2018 at my last job, especially around major speed improvements to our PHPUnit test suite.
All the silly side projects I've made this year in Javascript. It's been so long since I've coded for fun, and being surrounded by the amazing creativity of people building on Glitch has inspired me to join in.

Trying out a new skill - pixel art! I made this truly horrendous turtle, but I know with practice I can get better.
Fighting to make accessibility a first-class concern on every product I'm involved with, and training coworkers on semantic HTML and testing with Voiceover. I even made this app to help fellow devs practice their screenreader skills.

Helping organize my neighbors to fight for (and win!) increased safety on a major street through our neighborhood.

I hope to see my tech community...

Build accessibility into product design from the beginning of every iteration.
Promote more women into leadership roles and give them authority to foster healthy teams.
Reckon with the ethics of every piece of software we write.
Teach our families how to use password managers, switch to encrypted messaging systems, and protect their personal info. (Including DNA!)
Run for office and support candidates who are working to make the world a more inclusive place for all. (Not sure how? @ me!)