Added By: Feedage Forager Feedage Grade B rated
Language: English
card  content  css  day  event  grid  meta property  meta  new  people  property content  property  twitter card  twitter 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics

Life and Times of a Web Developer



Sun, 14 Jan 2018 18:54:16 +0000


At the Hotel Josephine in Paris, in town for the dotCSS conference. The view both in and outside of the hotel was filled with delightful scenes. These stairs were the quickest way to make our way down the six floors to the main level.

View on Flickr

Safari display:contents bug

Wed, 10 Jan 2018 17:24:36 +0000

I just came across an interesting bug. In Safari 11.0.2 on desktop and on the phone, display:contents falls back to display:inline instead of being ignored.

I created a Pen to demonstrate:

See the Pen display contents by Jonathan Snook (@snookca) on CodePen.

I also was able to test on iOS 10.3.3 and it also seemed to exhibit this behaviour. iOS 9 didn't.

The Open Graph and Sharing Tags

Tue, 09 Jan 2018 19:54:34 +0000

Awhile back, I decided I wanted to have those fancy cards show up when I or anyone else posted a link to my blog. Twitter card with small image on the left To do this, you need to add a few meta tags to your pages. The og: tags are part of the Open Graph. The Open Graph allows you, the web developer, to specify structured data about the content on the page. Services such as Twitter, Facebook, and Google use these in a number of different places. One such place is the “share cards” that are displayed when you post a link to these services. The og: tags are specified using property and content attributes. Twitter allows you to specify the type of card it should use. The summary indicates that this is using Twitter’s smaller card style that has the image off the left side. Facebook appears to choose card layout based on the size of the image attached. For example, since my logo doesn’t meet the minimum 200px width, it won’t be shown in Facebook’s card. (I should probably upload a larger logo!) When I added photography to my blog, the images were going to be bigger. As a result, I wanted to use the larger card style. Twitter card with large image on top My content management system checks to see if there’s a large image attached to the article. If it is, it specifies the summary_large_image value in the content attribute. Duplicate Tags One thing that seemed silly was the duplication of the article description. Since these use different attributes, I decided to try combining them onto a single element. At first, this didn't work. Twitter wouldn't pull in the description. I thought that I was done for and was about to give up. Then I remembered a bug I ran into a long time ago where attribute order caused a SOAP request to fail. That wouldn’t be the case here, would it? It turns out, it is. By specifying the property attribute before the name attribute, the Twitter Card validator was pulling in the description. Other Open Graph validators also seem to be okay with this approach. Final Code Here’s what I now have on my site: You can access the following validators to verify that you've specified everything correctly: Twitter Card Validator Facebook Sharing Debugger [...]

Not So Reflective

Tue, 09 Jan 2018 04:30:28 +0000

It’s the new year. Not all that shocking to you, I’m sure, unless you’ve been busy for the last few weeks. But here we are. Many are posting their retrospectives of how their year went. Or they’re posting their theme word for the year or their resolutions or their goals.

I’ve tried resolutions and themes. A year is a long time to stick to such a thing and—inevitably—things happen.

For this year, I decided not to do any of that. I’m going to take it as it comes, crossing the bridges when I get there.

Photography, for example, has been something that I’ve enjoyed recreationally for years but always felt my photos lacking. In the last couple years, I’ve been increasingly pleased with how my compositions and post-production work has evolved.

Since I hadn’t been blogging much about web development, I decided to expand the topics I post. If you follow my Twitter feed or subscribe to my RSS, you’ve likely seen the sudden introduction of photos to the blog. I’m still not sold on the design, especially on the home page, but instead of waiting for perfection, I decided to just ship something.

I don’t think I’ll ever have a career doing it. It is fun, though, and I plan to print some photos off to put on my walls.

I’ve also found myself delighted at making lattes. Last year, I decided that I wanted to introduce a ritual to my life. This was inspired by a story I had read years earlier about Mister Rogers. Yes, that Mister Rogers.

“...he wanted to do things right, and whatever he did right, he wanted to repeat. And so, once upon a time, Fred Rogers took off his jacket and put on a sweater his mother had made him, a cardigan with a zipper. Then he took off his shoes and put on a pair of navy-blue canvas boating sneakers. He did the same thing the next day, and then the next... until he had done the same things, those things, 865 times, at the beginning of 865 television programs, over a span of thirty-one years.”

To enable this new ritual, I bought an espresso machine. But not just any machine. I decided to invest in one of the best machines out there: the La Marzocco GS3. With the right equipment taken care of properly, the expectation is that this machine will last me a lifetime.

And it has opened up a world of discovery as I learn about beans and brew times and temperatures and all the science and art that goes into creating a really good cup of coffee.

I’ve enjoyed learning again. I’ve enjoyed the ritual of practice. I’ve enjoyed seeing progress in my abilities. A smile grows wide on my face as I take a sip of a drink that is as good as, if not better than, what I’ve had at most coffee shops in town.

I don’t know if 2018 will bring new rituals. But it’ll bring new projects and new ideas. It’ll be filled with family and friends and travel.

Maybe even a bridge or two.

Lone House on the Hill

Tue, 09 Jan 2018 03:19:20 +0000


A lone house sits on the hillside. In the spring of 2017, I went to the Faroe Islands to do a photography workshop. It's mostly an excuse to travel to cool places but it gave me a chance to level up my photography skills, as well. My style has already changed quite a bit in the last year or so as I learn new techniques and try new styles.

View on Flickr

Hemingway's Office

Mon, 08 Jan 2018 17:51:10 +0000


We took a tour of Hemingway's home in Cuba. You can't actually go inside but you can walk around and take pictures through the open windows. His office looks like a place I'd like to get some work done. Although, I think I'd like the desk to be facing towards the outside.

View on Flickr


Wed, 13 Dec 2017 18:39:27 +0000

Personal curation is one way in which we create good experiences. We choose how to use our time, choose the friends we have, and choose the things we collect.

Feeling dispassionate about my experiences on Twitter, I decided to spend some time curating it. Like an overgrown garden, I needed to cut back the branches and pull out some weeds.

I mute keywords. I mute some people. I turn off retweets. (People often retweet different content than they produce.) I switched to Tweetbot from the native Twitter experience to help facilitate some of these changes.

On Facebook, I realized that I don’t have the same ability to curate. All I can do is tell it to show me less of “posts like this” and hope it figures out what I meant by that.

In the name of holy engagement, the native experience of products like Twitter, Facebook, and Instagram are moving away from giving people the ability to curate. They do this by taking control away from you, the user. By showing what other people liked, or by showing recommendations, without any way to turn it off, they prevent people from creating a better experience for themselves.

Curation as Expertise

I think curation, in and of itself, is something that experts do. Beginners need time to acclimate and learn what they do and don’t like about a particular thing. With art, for example, we need to sample a wide variety of works before we know what we prefer and can curate for ourselves. The same applies for wine, whisky, or whatever wonderful object you wish to collect.

For beginners, services push the act of curation as a way to educate, build interest, and create engagement. Like getting a flight of beers every time you go to a restaurant. It’s an important process to learn what your preferences are.

For experts, though, this forced act of curation is intrusive. When I order my Rochefort 8, I don’t want the waiter to keep dropping IPAs at my table. Curation is an active task that is often treated as (and seen as) an act of intrusion to those that have already gone through a lot of curation. It sours the experience.

And to that end, many services are geared towards the beginner. Getting new people onto a platform and getting them engaged is how they make their money. An advertising revenue-driven platform rarely caters their experience to the experts. A platform, however, can create an ecosystem that is friendly to experts.

Twitter does this (both well and poorly) via their API. Third-party apps like Tweetbot and Twitterrific give experts the tools for curation.

Midnight in the Garden of Good and Evil

Many services, with their walled gardens, don’t let you pull out the pruning sheers. As a result, people are leaving these services. Maybe not in droves yet and maybe not enough to offset the new users coming in but enough.

I believe it is important that platforms consider people at all points in their journey—from onboarding all the way to being experts.

Calendar with CSS Grid

Fri, 08 Dec 2017 20:59:34 +0000

Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line. There’s a lot of looping involved just to place an event on the calendar. With CSS Grids, I wondered if I could take advantage of its auto-placement to accomplish the same thing. width="560" height="315" src="" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen> The HTML Of course, the first thing to worry about is the HTML. How should I mark up my events? Here’s what I ended up going with:


Each week has its own container and each day has its own container. Within each day, we have a heading and then a list of events. Why not use an actual list? A definite possibility. I tend to only go with a list if I think I’m going to normally have more than a couple items. I don’t want to overload people with too much information. (But this is conjecture. I should probably ask a bunch of people who use screen-readers.) The CSS I make each week a grid with each day taking an equal amount of space. .week { display:grid; grid-template-columns: repeat(7, 1fr); grid-auto-flow: dense; grid-gap: 2px 10px; } Each week is its own grid because I need all the events to naturally flow into new rows. If the entire month was one big grid, it’d be difficult to flow events within a single week. With Grid, we have a parent element that declares the grid and the child elements that are part of the grid. In this case, that would be the .day. We don’t want that part of the grid. We want its contents to be part of the grid. Therefore, I set the day to display:contents. Unfortunately, display:contents only works in Chrome (with experimental features turned on) and Firefox. Womp womp. If we wanted to broaden support, we’d have to remove our day wrappers. (This would work fine since they don’t really do anything anyways.) Getting Days on the First Row The day numbers should all be on the first row, so we specify that with grid-row-start. .day-label { grid-row-start: 1; } Now, because we specified grid-auto-flow: dense; on our grid, all of the events will just find a spot where it can fit. Without that, each event is placed after the one before it, regardless of whether there’s room somewhere earlier in the grid. And not a lick of JavaScript to do this! Spanning Days The next piece to this is having an event span over multiple days. I opted to use a parameter to do this. Thus, anytime an event needs to span more than a day, a data-span attribute is added to the element. The CSS then uses the span # syntax to span over a number of grid cells. [data-span="1"] { grid-column-end: span 1; } Keep in mind that if an event spans beyond the bounds of your 7 column grid, it’ll create new columns to fit in. (This’ll likely create some display side effects that you don’t want.) James Finley went further and used CSS Custom Properties in his version. .event { --span: 1; background-color: #CCC; grid-column-end: span var(--span); } Doing this, there’s less code in the CSS. In the HTML, you now need to specify an inline style instead of the data attribute.
Start Day Now that we have the events spanning[...]