Random thoughts of a digital web weaver

Content Block Layout with Dynamic Content Using CSS Grid

With the impending introduction of CSS Grid in mainstream versions of major browsers, I have been playing around with it and trying to learn how I can incorporate into current production scenarios.

One scenario is a content block grid where we have multiple blocks of content that each consist of a title, some sort of image or media, copy, and some hyperlinks. In addition to making the grid of blocks responsive (which is the easy part), the scenario calls for each of the elements within the content blocks to line up with the corresponding elements within it’s sibling content blocks on the same row.

For example, if there are 4 content blocks in a row, the copy of each of the blocks should start at the same point on the x axis of the row. While this is relatively easy when you have total control of the content and can craft it so that each element has a consistent (or at least predictable) amount of content, the challenge arises when you don’t have control of the content.

I have been playing around with the following Codepen to see if I can get things to work. I’ve been able to line up the media at the top of the content blocks and the links to the bottom, but the title and copy sections in the middle look “jagged” because the image heights are different. Instead, what I’m looking for is a layout where the titles and copy sections of each block line up with each other so that there is a more uniform look to the grid.

I’m not sure if that’s possible but I’d invite you to checkout my Codepen (currently viewable in Firefox Nightly and Chrome Canary)  to hit me up on Twitter or drop me an email with any feedback or advice you might have.



I’ve opened up an issue with this on Rachel Andrew’s CSS Grid AMA. Check it out and post any ideas you might have. Also check out the other issues on the AMA. It’s a great resource.

2016 US Election: Expression

Like many people, I was extremely surprised at the outcome of the 2016 US election. Many emotions and thoughts have run through my head over the past 24 hours. I have made an effort to be calm about the outcome and have tried to calm others and let them know that it’s going to be okay.

The more I think about it, in just the same way that many (including myself) assumed that Donald Trump would not be the Republican nominee and in the same way we assumed that the American public would not elect him as the next president, I’m making an assumption that everything will be okay.

The truth is, I have no idea what the next four years will bring. I don’t know what situation people are in or how a Trump presidency will affect them. I feel like by telling people it’s going to be okay, I might be coming across as dismissive and it’s certainly not my intent.

It’s a difficult time for many people. People are upset, shocked, confused, and scared. The concerns and fears they have are completely valid and should they should express them freely.

An Event Apart Through My Career

I recently returned from San Francisco where I attended my seventh An Event Apart (AEA) web conference. It was another wonderful experience with an excellent lineup of speakers and topics related to the web design industry. As an attendee of more than five events, I was recognized as “An Attendee Apart” and that got me reminiscing a bit about my previous AEA events that I have gone to.

My first AEA was in Chicago in 2008. It was my first conference of any kind and I can remember being star struck by the speakers, many of whom I learned about through Twitter. I’m pretty sure I had some sort of fan-boy complex, particularly for event founders Jeffrey Zeldman and Eric Meyer. I arrived in Chicago thinking that it would help me with my job (which it did) but I came away from AEA feeling connected with the web design community. I started to look beyond my job and out at the industry as a whole.

I skipped 2009 so that I could attend the 2010 Seattle event. This was a game changer for me. Not only did it introduce me to the city of Seattle (where I would eventually relocate to) but it was the first year that AEA included the “A Day Apart” workshop. Two days of speakers talking about various web design topics and then having the third day to dive deep into a particular area resonated with me as a great way to learn. 2010 was also the first year that I used Twitter as my conference notebook, which led to meeting many attendees and a realization that what I was doing was useful for others. Not only did I feel like a part of the web design community, I felt like I was helping it.

Over the years, I continue to attend AEA whenever I can. What I get out of each conference has evolved from practical code and techniques to inspiring the way I think about web design to thinking about how I can help others in the industry. I’m no longer just looking for ways to implement things, I’m looking for ways to solve problems. I’m no longer just looking for answers, I’m looking for ways to help find the answers. I’m no longer just sitting on the sidelines, I’m getting involved.

An Event Apart is great for learning tips and techniques but I believe the true values lie in the feeling of community, the opportunities to learn from the experiences of others, and feeling empowered to contribute to helping make the web better for everyone.

If you’re interested in finding out more about An Event Apart, visit their website or find them on Twitter.

The Lost Art of HTML

According to MDN, HTML “is the most basic building block of a webpage”. It’s the foundation of the web. The first webpage was built on less than 75 lines of HTML. Yet for such a fundamental part of the web, I find that many front-end developers don’t have a good handle on it.

Editors, templates, and frameworks produce HTML that enable a developer to get content on the page but the resulting code often lacks the features and nuances of the language such as semantics to convey meaning and enhance SEO or attributes and meta data to improve accessibility.

As Jeffrey Zeldman eluded to in his talk at An Event Apart, many of us work in a world where we are spoiled by the technology and access we have. We quickly jump to take advantage of advanced CSS and Javascript to create rich experiences but we don’t take the time to craft that layer of HTML on which we build everything else on.

Building a good foundation using HTML is like building a good foundation for a house. Without it, you run the risk of having to deal with issues that are difficult and expensive to fix later on. For example, poor HTML may lead to SEO or accessibility issues that require you to re-write your HTML. If you’ve built your CSS and/or Javascript on top of that poor foundation, you then have to also rework that code as well.

Even as someone who spends a lot of time thinking of how to write HTML, I can understand the lack of appeal to work on it. It’s not as sexy or cool as CSS or Javascript. But I do believe that we it’s important that we take the time to learn and focus on writing good HTML, not only to save ourselves from headaches later on but also to help build a better web.

If you’d like to learn more about HTML, I find that the MDN docs are a great starting point. You can also hit me up on Twitter as I love talking about this sort of thing.

Normalize (CSS) No More.

Like many web developers, I have used a reset/normalize style sheet in a variety of projects with the intention of having a common starting point for all browsers when it comes to styling CSS. It’s been useful. It works great for setting a baseline to create web pages that are pixel-perfect reproductions of mockups from designs.

However, as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

As a designer, I have come to accept that there may be minor differences from browser to browser. If I can accept that my sites will look different (sometimes significantly) on different devices, there is no reason to get upset if my site does not look the same pixel-for-pixel in different browsers.

This doesn’t mean that I don’t make adjustments to things like margins and padding on a paragraph or list. I choose to embrace the defaults a browser gives me and work off of them instead of stripping them out and starting from scratch every time. I find that this approach makes my code cleaner and more robust without adding any extra overhead.


Diabetes Doesn’t Mean I Can’t Eat Sugar

Diabetes is basically a disease that causes high blood sugar levels (which can be fatal if high enough) because your body is unable to produce or use insulin in order to properly regulate glucose in your body.

There are two types of diabetes, aptly defined as Type 1 and Type 2.

Type 1 diabetes is where the body’s immune system attacks the pancreas (which produces insulin) and destroys it. Because the pancreas no longer produces insulin, it needs to be administered through external means such as injection or an insulin pump. Proper diet and lifestyle changes makes it much easier to deal with blood sugar levels but a type 1 diabetic would still need to take insulin injections or use the pump for the rest of their life.

Type 2 diabetes is where the body either doesn’t produce enough or the body has developed a resistance to the insulin which interferes with the body’s ability to regulate glucose. This is by far the most common form of the disease and is most often linked to obesity/bad diet habits as the cause. People who have had type 2 diabetes in their family history are at higher risk of becoming type 2 diabetics themselves. For type 2 diabetics, it is possible to completely manage the disease through proper diet and lifestyle changes but it may required the assistance of oral medications and insulin.

In both cases, having diabetes doesn’t mean that you can’t eat sugar. It means that you have to be a bit more careful about your diet and lifestyle. By putting a little effort into learning about nutrition (particularly about glucose and carbohydrates), and cleaning up your diet, you dramatically improve your chances of living a long, healthy life.


Canadian Diabetes Association:
American Diabetes Association:

Mental Recharge

A little while ago, I was afforded the opportunity to take a day away from the office and volunteer at a warehouse for Northwest Harvest, the only non-profit state-wide food bank distributor in Washington state. In addition for volunteering for a good cause, it was a great way to get rid of some mental fatigue that’s been creeping.

We spent the day parcelling and packing rice to send to food banks. It was a rewarding experience that allowed me to meet some great people and have a good time. It also reminded me that once in awhile, I should raise my head up from the web development world and do something completely different.

It’s easy to think that taking a day away from our work will reduce our productivity but most of the time, the best way to increase our productivity is to shift our brains into a lower gear for a short period of time to give ourselves a chance to recharge.

NAICS Industry Code for Web Development

If you’re a Canadian web developer that works as a freelancer (or does a few freelancing gigs on the side), you may be in the process of doing your taxes for your business.

On the T2125 – Statement of Business or Professional Activities tax form there is a field for “Industry Code” that you’ll need to fill in. For the 2012 tax season, that code is 541514. If you want more information on the code, you can visit this NAICS page on the Stats Can website.