When I was 9 or 10, the toy ever kid needed to have (and the toy every kid was talking about if they didn’t have it) was a Tamagotchi. For the unaware, this toy was a virtual pet from another planet that you could take care of and play with. And maybe, if you did a good enough job, you’d get rewarded when the creature decided to go back to its home planet.

When the fad was on its way out and Wal-Mart had too much stock and was selling them at a deep discount, I got one. I played with it for a while and enjoyed it, even though I never got the reward for taking great care of it. Then, I put it away, its batteries died, and it sat in a bin until this past weekend.

While visiting the toy store with my kids, surprise of all surprises, I saw that they had new Tamagotchis for sale. My son had seen my lifeless Tamagotchi before and was intrigued by what this toy could do, and I couldn’t help but buy it for him. And what do you know – it used the “Gen 2” software, just like mine, 20 odd years later. Check out the date on the back of each device:

After seeing the new one, I had to see if mine still worked. Some new batteries, a new screw (from an eyeglasses repair kit), and some Isopropyl Alcohol later, I had an egg bobbing up and down on my screen, just waiting to hatch. After going through all of the features, they were almost identical. The one change I could discern was in the icon for the “medicine” feature, which you use when the Tamagotchi feels sick.

In my old version, it’s a bottle and spoon:

In the new version, it’s a syringe:

I’m not sure why they would change this icon. Perhaps it’s indicative of what people in 2017 (and beyond) consider good medicine – vaccines are at the top of most of our minds nowadays. Whatever the reason, the Tamagotchi is still quite a fun little toy. I’ll probably enjoy playing with it for a few weeks, then stick it back in its box, waiting for when I’m ready for my next trip down memory lane.

Last month, the Verge published an exclusive excerpt from The One Device by Brian Merchant, which I read with much interest. While there were many interesting anecdotes about the origins of the iPhone, one paragraph in particular caught my eye:

“The iPhone is the reason I’m divorced,” Andy Grignon, a senior iPhone engineer, tells me. I heard that sentiment more than once throughout my dozens of interviews with the iPhone’s key architects and engineers. “Yeah, the iPhone ruined more than a few marriages,” says another.

Consumers and journalists alike have been recollecting the announcement and release of the original iPhone as we approached its 10th anniversary, echoing that this device changed the world and ushered in the new mobile regime. And while the iPhone is an innovation and a product that’s worth celebrating, I don’t believe that even such a great device is worth the human cost to those families. My family is the most important thing in the world to me. More important than any career goal, more important than introducing a cool computer into the world.

This disturbing misplacement of priority isn’t just present with the release of the iPhone. When Apple posted this promo for Planet of the Apps, my Twitter blew up with people telling it like it is: workaholism isn’t a badge of honour; it’s abuse. I especially liked this tweet from Marco Arment:

If you expect your employees to abandon their families or home life in “devotion” to your business, you’re abusive and should manage better.

Other companies have not been blameless in supporting workaholism, such as Microsoft with their #GetItDone campaign late last year. Workaholism is a plague that afflicts the modern workforce, silently destroying marriages and separating families for the sake of the next great thing or improving the bottom line.

On the other hand, it’s encouraging to see workaholism being inoculated against with initiatives like Basecamp’s Work Can Wait and this amazing billboard by the Red X. Aside from the actions of companies, I hope that workers in these situations would realize that the company they are working for is not worth shipwrecking your marriage and splitting up your family over.

When creating HTML templates with Rails, my go-to templating language is the default: ERB. It’s an incredibly powerful yet simple way of creating dynamic documents and it’s built right in to Ruby. What’s not to like? Until recently, I had never used ERB templates outside of Rails. Here are a few things I learned:

First things first

Getting started with ERB is easy. Just initialize a new ERB object with a string template, and then call #result on the ERB object, like so:

template = "Hello, today is <%= Time.now.strftime('%A') %>"
ERB.new(template).result
# => "Hello, today is Sunday"

Templates are just strings

Chances are you don’t want to have to define an ERB template in the same file as you render the result. That was my main hangup: how was ERB going to get my template file? Then, I learned about the File library and something clicked: “I’m working with strings!” The example changes to something like this:

# template.erb

Hello, today is <%= Time.now.strftime('%A') %>

# renderer.rb

template = File.open('template.erb', 'rb', &:read)
ERB.new(template).result
# => "Hello, today is Sunday"

Binding

Now that we can read a template from a file, what about being able to call variables and methods from my template? In Rails, I would define my variables in the Controller and methods in Helpers, but I’m not using Rails. Then I learned about Binding, which is the way to pass the “execution context” of some code around. Execution context is just a fancy way of saying variables and methods. Any variables and methods defined in the class that you call #binding on, as well as any methods defined in any included module, get passed to ERB, ready to use.

# template.erb

Hello <%= name %>, today is <%= Time.now.strftime('%A') %>.

<%= benediction %>

# renderer.rb

class Renderer 
  attr_reader :template, :name

  def initialize
    @template = File.open('template.erb', 'rb', &:read)
    @name = "Jonathan"
  end

  def benediction
    Time.now.hour >= 12 ? "Have a wonderful afternoon!" : "Have a wonderful morning!"
  end

  def render
    ERB.new(template).result(binding)
  end
end

Renderer.new.render 
# => "Hello Jonathan, today is Sunday.\n\nHave a wonderful afternoon!"

The Renderer class above works, but it isn’t ideal. It doesn’t conform to the Single Responsibility Principal, putting both rendering the template and providing the execution context. Let’s refactor to fix this:

# view.rb
def View
  attr_reader :name

  def initialize
    @name = "Jonathan"
  end

  def benediction
    Time.now.hour >= 12 ? "Have a wonderful afternoon!" : "Have a wonderful morning!"
  end

  def get_binding
    binding
  end

  def build
    Renderer.new(self)
  end
end

# renderer.rb
class Renderer 
  attr_reader :template, :binding_klass

  def initialize(binding_klass)
    @template = File.open('template.erb', 'rb', &:read)
    @binding_klass = binding_klass
  end

  def render
    ERB.new(template).result(binding_klass.get_binding)
  end
end

Since the execution context that the template needs is now outside of Renderer, I have to pass in self to Renderer from View. In View, you’ll see that I also defined a method called get_binding which just returns the binding. Why couldn’t I just call binding directly on the instance of View I passed in? Let’s try it:

def render
  ERB.new(template).result(binding_klass.binding)
end

Renderer.new.render
# => NoMethodError: private method `binding' called

So, binding is private, but we can access it through a method like get_binding.

Encoding

Finally, let’s spice up this template with an emoji. Emoji, after all, are just Unicode code points. Lets see:

# template.erb

Hello <%= name %> 😬, today is <%= Time.now.strftime('%A') %>.

Renderer.new.render
# =>  incompatible character encodings: ASCII-8BIT and UTF-8

That’s not what I expected! I eventually figured out that I needed to change the way that I was opening my template file to include an encoding:

File.open("template-file-path", 'rb', encoding: 'utf-8', &:read)

Opening the template as a utf-8 file makes everything run perfectly.

Rendering ERB for Fun and Profit

Rendering ERB templates without Rails is a little daunting at first. Once you get the hang of it, it’s as powerful and simple as ERB itself.

If you want to read more about ERB without Rails, I highly recommend this article by Stuart Ellis.

On December 25, 2006, I opened up my first real iPod: the 80GB 5.5th generation iPod with Video. It was a device I wanted ever since getting an iPod Shuffle and realizing that Apple really knew what they were doing with hardware and software.

I used and loved this iPod daily until 2012, when I got my iPhone 4S. In the weeks and months leading up to getting my iPhone, I thought frequently of how awesome it would be to consolidate all of my various devices into this one master device. At that time, I had a Blackberry Bold 9700 as my phone, everyday carry camera and Internet Communicator; a Flip Ultra HD camera for video; and my trusty iPod for music. The iPhone would replace all of these devices. From then till now, I’ve enjoyed the iPhone 4S as the ultimate consolidated device.

While feeling nostalgic yesterday, I took my old iPod out of storage, charged it up, and plugged in a pair of headphones. It hadn’t been synced with my Mac for a while and was thus a time capsule of my musical preferences back in 2012. I found some of my favourite songs and started listening. I was struck by how little this device actually did: all I could do was pick a song, press play, and adjust the volume. There was nothing else to distract me. I couldn’t switch apps and start browsing the web or check my email. I just put the iPod down and let the music take my full attention, and it was really, really fun.

Using my old iPod has given me a fresh perspective on the technology I use daily. I often wonder what people used computers for before the Internet¹. Wouldn’t a computer without a Internet connection have been rather limited in purpose? After using this iPod, I see that computers did have a limited purpose. Limited purpose, however, is not necessarily a bad thing like I originally thought.

A computer with a Internet connection is not just a computer. A Internet connected computer is also a reference library, a source of entertainment, a social hub, and pretty much anything else you can think of, and thus can be almost endlessly used. But with all of this power comes the potential to get stuck doing practically everything except for the thing that you should be doing. Sometimes, having a single purpose is preferable. And perhaps, even with the endless possibilities of the Internet, a modern computer can be used with a purpose in mind. Thanks for that, iPod.

A long time ago, I opened an issue that simply said:

SCSS features aren’t being used effectively. Needs refactoring.

When I first started making my theme, I decided to use Bootstrap to speed up development. Bootstrap is a wonderful framework, making websites look great right out of the box. Since it’s so full featured, it also included a lot of elements that I would never use for this site. Why not explore some of Sass’ interesting features and remove what I didn’t need.

I first took a baseline of how much code Bootstrap contributed:

$ cloc jonathanpike.github.io/
     137 text files.
     137 unique files.
      79 files ignored.

http://cloc.sourceforge.net v 1.60  T=0.94 s (101.9 files/s, 9558.7 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
SASS                            82           1245           1603           5822
HTML                             9             34              3            179
Javascript                       3              7              3             39
XML                              1              0              0             30
YAML                             1              6              7             26
-------------------------------------------------------------------------------
SUM:                            96           1292           1616           6096
-------------------------------------------------------------------------------

A whopping 5822 lines of Sass! Some of that was my own code, but the vast majority was from Bootstrap.

I decided to do the obvious thing and search “lightweight grid framework” on Google, and I found Neat by Thoughtbot. Neat uses Sass mixins instead of concrete classes, like Bootstrap. This would be a great opportunity to learn more about Sass’ mixin system. This also turned out to be the biggest learning curve.

The Container

The starting point for both Bootstrap and Neat is the grid container. Bootstrap defines it through a class, either .container for fixed-width grids or .container-fluid for full-width grids. All of the options for the container are taken care of for you with either of those classes. With Neat, I had to define my own container class (called .container, which I carried over from Bootstrap) and then mix in Neats grid-container:

.container {
  @include grid-container;

  @media only screen and (min-width: 768px) {
    max-width: 750px;
  }

  @media only screen and (min-width: 992px) {
    max-width: 970px;
  }

  @media only screen and (min-width: 1200px) {
    max-width: 1170px;
  }

  margin-left: auto;
  margin-right: auto;
}

grid-container is super simple. It adds the following to my .container::after class:

  clear: both;
  content: "";
  display: block;

I also added a few extra rules to keep the container in the centre of the page and make it not fill up the full width of the screen at different screen sizes.

The Columns

Bootstrap has several different classes for columns. I was using col-xs-[x] and col-md-[x] to define columns for desktop and mobile. My main content container (the one you’re reading in right now), for example, used col-xs-12 col-md-8 to make it span 8 of 12 columns on desktop and 12 of 12 columns on mobile.

Neat, out of the box, doesn’t provide you with different sized columns defined by breakpoints for mobile, desktop, etc. Instead, it provides you the tools to make those decisions for yourself. This was the hardest part, for me, when I switched from Bootstrap to Neat.

Neat’s default grid is defined as follows:

$neat-grid: (
  columns: 12,
  gutter: 20px,
);

I played around with it a little, and found that these settings were fine for my site. Neat provides the grid-media mixin function that allows you to define a custom Neat grid and use that to create a media query for different sized screens. At first, I thought that I would use the default $neat-grid for desktop and define a custom $mobile-neat-grid for my mobile needs. That ended up not working as I expected, although I realized later that my mistake was the order my media queries were in: media queries need to be ordered from smallest to biggest, but I was ordering from biggest to smallest. What I ended up doing was exactly the opposite. I defined a $large-neat-grid as follows:

$large-neat-grid: (
  media: 1000px,
);

This just provided a media query breakpoint of 1000px, and didn’t change any of the default settings on $neat-grid. Next, wherever I used the Neat grid-column mixin, I also used grid-media to provide the media query for desktop. Using the example of my main content container:

.contentbox {
  @include grid-column(12);

  @include grid-media($large-neat-grid){
    @include grid-column(8);
  }

  margin-bottom: 20px;
  padding: 0px 30px 0px 30px;
  @media only screen and (max-width: 500px) {
    padding: 0px;
  }
}

grid-media wraps the grid-column styles in a media query defined by the rules set for the custom $large-neat-grid that I defined earlier. Easy and clear. The transition was made even easier because I had already defined classes on all of my main container elements, so I just had to add the Neat mixins to each of these to replicate the layout I had made with Bootstrap.

Other Styles

One thing I didn’t realize was how much Bootstrap defined things like font styles and spacing within divs. When I removed it, the whole layout looked really weird. After the initial shock, I got to work defining just the styles I needed to make the site look the way I wanted. This was more work, involved more trial and error, but left me with a result that is much leaner and meaner.

Results

$ cloc jonathanpike.github.io/
      87 text files.
      87 unique files.
      79 files ignored.

http://cloc.sourceforge.net v 1.60  T=0.79 s (58.1 files/s, 2393.9 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
SASS                            32            181            541            842
HTML                             9             33              3            179
Javascript                       3              7              3             39
XML                              1              0              0             30
YAML                             1              6              7             26
-------------------------------------------------------------------------------
SUM:                            46            227            554           1116
-------------------------------------------------------------------------------

From 5822 lines to 842 lines – an 85% decrease!

Conclusions

Neat provides a, ahem, neat way of creating a grid based layout with Sass mixins. I enjoyed learning how to use the library and cleaning up my Sass codebase to use more Sass features, such as variables. Neat just had a major upgrade, which dramatically simplified the API. Read all about the changes here.