tech posts

Since adding a theme switcher to my site, I've created several new simple themes, including a console theme. It is meant to look somewhat like a command line console / terminal. For this theme, regular borders didn't fit in. I wanted something with repeated characters, looking more like some terminal application output or Markdown would have. Looking for doing this with pure CSS, a Stack Overflow answer helped me come up with a solution.

There is no way with the CSS content or the like to just have a character repeat to fill a given width or height. So the solution has us manually repeat the character in the content of a pseudo element enough times to handle our largest likely container. We position absolutely and use overflow: hidden to prevent our content from expanding our container and to cut it off at the appropriate length. With alignment and padding, we can then have repeating characters that line up properly in a monospace font grid.

I had another health incident yesterday. It kind of makes me feel like I'm dying. Continue reading post "#3389"

I've signed up for the virtual Stir Trek this year. Continue reading post "#3340"

This week, while my car was in the shop, I got a loaner 2019 Subara Impreza with some fancy features. Continue reading post "#2475"

Going to StirTrek tomorrow instead of work. Continue reading post "#2309"

I've been considering a new password storage method for a while now. Currently…

CSS has a concept of specificity wherein more "specific" selectors ta…

[note]This post is not about the grid layout spec, but I have created a solution using it to solve the same problem this post is solving.[/note]

Many of the recent designs at Cogneato have had a responsive grid list of items that have a border between them. By grid I'm meaning like an image or product grid where the items flow horizontally and then wrap and are all the same width. By inner border I'm meaning a border around each item except the edges that don't touch another item. See a more complicated example that uses sub-grids. My solutions thus far haven't been ideal. But I recently thought of and found some solutions that, when combined, make for a better option.

The biggest difficulty with this type of situation can be getting the items on the same row to be the same height so that all borders meet up. I have been either requiring a fixed height for the items or using JavaScript to equalize the heights on a given row (which of course has to be rerun upon screen resize). The fixed height option means content creators are forced to limit how much content they put in each item or it will be clipped. There is also the potential for extra whitespace when there is less content. Considering the JavaScript option, I definitely try to avoid having the presentation depend on JavaScript. It is a potential performance issue as it has to continuously poll for browser resize and update the height when it changes.

position: absolute

Every time I build this sort of thing, I desire a better solution, but have limited time, and settle on my previous solutions. When doing the most recent site with this sort of grid, I theorized a solution taking advantage of a few other tricks, and later implemented it in my off time. The most important was my relatively recent discovery of how position: absolute with auto works.

At times in developing a responsive site, the content that is shown needs to change depending on the viewport. One might want to show a hamburger icon instead of a menu on a small viewport or display extra less critical content on a larger viewport. I recently had to show a more verbose format on wide viewports (like "Tuesday June 8, 2014") and a less verbose date format (like "Tue Jun 8, 2014") on a narrow viewport to make things fit well. I didn't like the options I've used in the past. I didn't want to have duplicate content in my raw markup, to need to inject HTML elements into generated date strings, or to involve JavaScript. I tried fixing the width of a wrapper and hiding the rest, but with the non-monospaced font, it didn't work the same for all cases.

So I did some looking for other options. I found a discussion of a technique that seemed fairly elegant. I had been reluctant to use it in the past because of browser support and just being a bit uncomfortable with it. The technique makes use of the attr() expression to inject content. Since any browsers that support media queries should support attr() and I was using this in a media query, I thought it worth it to embrace it finally. I liked the results and will probably make more use of it in the future, especially since the browsers that don't support it now have low enough market share to almost ignore.