Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee! This is my site about being a developer, a dad and a maker.
Sponsorship

Determine current route in Rails

Written on March 6, 2019

Let’s say you’re building a sweet navigation in your Rails application and the design you’re implementing shows that you’ve got different states that have different visual cues.

Those states might be inactive, hovering and active or current. Inactive and hovering seems pretty straight forward, you can do all that in CSS.

.Nav-Item {
  // Styles for the "inactive" nav item state
  // would go here.
}

.Nav-Item:hover {
  // Styles for the "hover" nav item state
  // would go here.
}

But the active or nav item state that indicates you’re currently on the same page as an item in the nav isn’t a simple CSS solution. To solve this, you’ll need to use a built-in Rails helper called current_page?.

With the current_page? helper you can pass it things like a relative or absolute path that you’d like to check or you can even pass it actions and controllers with parameters for it to check. Doing so will return either a true or false.

How this could look in your mark up is this,

<%= link_to({ controller: 'page', action: 'about' }, { class: "Nav-Item #{'is-current-page' if current_page?(controller: 'page', action: 'about')}" }) do %>
  About Us
<% end %>

I’m using the current_page? helper inside a link_to helper block. Specifically it is being passed to the class attribute where it is saying, if the current page current_page? is the same as the page handled by the about action in the page controller, then add the value of is-current-page to the class attribute.

Now I could have this in my CSS,

.Nav-Item {
  // Styles for the "inactive" nav item state
  // would go here.
}

.Nav-Item:hover {
  // Styles for the "hover" nav item state
  // would go here.
}

.Nav-Item.is-current-page {
  // Styles for the nav item that corresponds
  // with the current page the user is viewing
}

Now we’re able to handle inactive, hovering and current page states in a Rails application nav.

Silencing the lizard brain

Written on March 5, 2019

Seth Godin describes a phenomenon of what happens when someone gets close to shipping something. He calls it the lizard brain or plainly, the resistance. The lizard brain is what often sabotages a project. It tells you to slow down, be careful or back off.

And it’s something I’ve been dealing with lately. There’s a project that I’ve been thinking about for about two years. Two years ago when I came up with the idea, I got really amped about it. I told my wife about it, I told my friends about it, I even worked on it for a few days and then the lizard brain came in and it fizzled. I don’t even remember why I stopped but I stopped.

Recently the idea popped into my head again and for some reason I’ve felt compelled to pursue it again. Again I told my wife and I told a different set of friends about it. My wife rolled her eyes, my friends think it’s a great idea and I’m off to building it.

But as the days go by, and as I chip away at the idea, I noticed the lizard brain is starting to kick in again. I have been dealing with the fear of what if it actually works? I’ve been focusing on the hypothetical and trying to think through so many future scenarios that my brain can’t possibly understand. This sort of thinking actually almost left me paralyzed in fear to keep working on it again.

I spent 15 minutes working on it tonight and that silenced the lizard brain. I think being in the state of concentration of working on the project was good for silencing the lizard brain temporarily. I’m now at a place where I’d like to get to shipped faster in order to subdue the lizard brain. The more I let the project drag out the easier it is for the lizard brain to get louder.

Reusable UI patterns

Written on February 24, 2019

Lately, I’ve been thinking a lot about reusable UI patterns. Things like a nav element and such. I’m not sure why I hadn’t done this before, but I’d like to put together a library of reusable UI patterns. This is so that I can get up and running quickly with projects, but also not having to rebuild the wheel every single time I need to build a common UI element.

For this reason, I spent a couple hours tonight putting together a nav element that is also fully responsive. It’s a common element that’s needed in pretty much any web application or web site nowadays.

It isn’t anything fancy, just HTML, CSS and vanilla JavaScript. I decided to go this route instead of building it in some fancy JS framework because it’s more portable and I think future proof. I’d like to also iterate on it by adding things like proper role attributes and accessibility minded things.

Spell It Out: 600+ acronyms spelt out

Written on February 22, 2019

A little over a year has passed since I started a little project called Spell It Out. I started the project when I started working at CloudBees. During my first few weeks there as I was learning about the different projects at various meetings, I observed that there was a frequent use of acronyms. Being the new guy, I didn’t interrupt the meetings because of my lack of knowledge of what an acronym meant, instead I would jot it down and either ask another team member what it meant or Google it.

Since running Spell It Out I’ve observed a few things around the use of acronyms.

First, it is totally ok to make someone pause and ask them to explain what an acronym means. I’m now on a different team at a different company and they have their own set of acronyms that they use. Now when I hear an acronym and aren’t sure what it means, I’ll usually ask what it means at the moment it is used. This usually leads to the person who used the acronym to be more than happy to explain what it stands for.

Second, I think most of the time the person who uses the acronym makes an assumption that it’s a commonly used acronym that the person hearing it should know it too. I don’t think it’s something that happens just with acronyms but in general. It reminds me of doctors. I’ve had doctors in the past blurt out a medical term for something I’m describing and look at you as if you’re supposed to know what it is.

I’m not sure if there is some correlation or if it’s a more generalized thing that humans do, but I’m observing that it happens outside of just acronyms.

Third, those who both uses and spells out an acronym in the same sentence are often seen as more inclusive. I remember being in meetings where people would use acronyms and no one pausing the speaker to ask what it meant. This would make me feel like I wasn’t on the inside or the know of things. When a speaker is able to both use and spell out an acronym I find them to be more caring and thoughful. And I appreciate it, even though they might be speaking to a group who might already know what the acronym means. I also don’t think anyone will scoff and be disgusted by someone who uses an acronym and also spells it out.

I’m not honestly not sure what I’ll add to Spell It Out to enhance it or make it better in the future. I know I have a desire to put context around acronyms so I might start there. For example the acronym GoF (Gang of Four) refers to the four authors who authored a book on design patterns in object-oriented programming.

I’ve also had an itch to put together an API to perhaps make a plugin that could be used to spell out acronyms as you find them when reading in your browser or computer.

What is sure is, I’ll keep curating and adding acronyms that I find almost daily to the growing list of acronyms on Spell It Out.

A few highlights since starting Spell It Out:

  • My first project I’ve shared on Product Hunt
  • Got mentioned on a national radio called Sound*Bytes
  • Hit 600+ acronyms :tada:
  • Added one Easter egg :egg:

Add CSS to 11ty

Written on February 6, 2019

One of the things that was a bit confusing when first setting up an 11ty project was getting certain files and folders in the project’s folder structure from showing up in the output _site folder.

An example might be if you wanted to add some CSS to your site and all your CSS files live in a folder at the root of your project called css. By default, 11ty will not output this folder into its _site.

In order to have 11ty copy the css folder through to the _site output folder, you’ll need to add what’s called a pass through in your 11ty configuration file.

First in your project folder, at the root make sure you’ve got a file called .eleventy.js.

.
├── .eleventy.js
├── _includes
├── _site
├── css
└── index.md

Next in your .eleventy.js configuration file, you’ll want to add this:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy('css')
  return {
    passthroughFileCopy: true
  }
}

What eleventyConfig.addPassthroughCopy('css') does is tells 11ty to look for a folder named css and copy it through to the output folder. The passthroughFileCopy: true is needed in order to use the addPassthroughCopy function.

Now when you either serve from the command line or look in the _site output folder, you’ll see that your css folder has also passed through. Now in your template file you can reference your stylesheet like this:

<link rel="stylesheet" href="/css/relax.css">

And it’ll render because it’s in your output folder.

First impressions on 11ty

Written on February 6, 2019

I started checking out the static site generator (SSG) 11ty tonight. It is pretty impressive so far. I’m digging the fact that it is a JavaScript based generator, it’s super flexible and pretty fast from what I’m seeing so far.

I’m liking it more than Hugo. Hugo has never really clicked for me. Although it’s got a pretty huge community around it, I always found it hard to understand and couldn’t get the information I needed from the documentation.

It seems 11ty is the opposite. It is different from Jekyll in that it is less opinionated, but where it shines is its documentation and flexibility. I’ve found the onboarding quite good even after just spending an hour on it. It has definitely piqued my interest and I’m looking forward to diving into 11ty some more.