WWW posts page 33

CSS: Inner Border Grid List

in

[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.

Continue reading post "CSS: Inner Border Grid List"

The Happs

in

It’s been a few weeks since I’ve posted a Happs or any blog post. I think a lot of the things I want to post about, I want to post a dedicated post, but that doesn’t always end up happening.

Conferences

The weekend before last, I went to two conferences. I took notes, which I plan to post once I get them digitized and cleaned up. I enjoyed the conferences even though having both in one weekend, with one in Pittsburgh, was a bit tiring. I went to Rustbelt Refresh and Pittsburgh Tech Fest.

Rustbelt Refresh

I had gone to this last year (the initial year) as well. I was pleased with the talks again. It’s a single track, single day event on general front end development and design. It brings in some of the “celebrities” of the industry. This year included Karen McGrane and Jeremy Keith, for instance, and last year had Eric Meyer (our local web “celebrity”) and Jonathon Snook. It is definitely nice to be able to hear talks by some of the people driving the thoughts in the industry. I had a good time, the talks were good, and I learned some things or shored up some ideas I already had.

Continue reading post "The Happs"

Responsively Changing Date Formats

in

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.

Continue reading post "Responsively Changing Date Formats"

Notes on Using PHP Class With Statics for Configuration

in

I will be talking about using namespaced PHP classes with static properties for configuration. Since my use was in relation to Symfony, it is important to note that the Config component should be used for everything possible, but that it can’t be used before it is instantiated.

Reasons to use namespaced static class properties for configuration:

  • A class can be defined in a file. When that file is included from elsewhere, the class is defined.
  • Once a class is defined, it is accessible anywhere after that point, regardless of scope. Like a superglobal.
  • Statics are variables set on a class rather than on an instance and can be accessed directly from the class. This means no variables outside of the class need to be set to work with the variables. Like a superglobal singleton.
  • Statics are not static and can be modified just like any other variables.
  • Static methods can control access and provide other behaviors you may want for working with your configuration.
  • Namespaces help prevent collisions of class names by essentially adding characters to a class name that make it less likely to be used elsewhere. With psr-0 / psr-4 autoloaders, the namespaces should be well controlled.
  • Variables can’t be namespaced, so classes (or constants or functions) are the only way to take advantage of their benefits.
  • Using constants and functions inside of a namespace is similar to static properties and methods of a class, except the constants are immutable and have limited data types, and there aren’t the niceties like self for the functions.
  • Being in PHP (as opposed to some config file format) allows use of __DIR__ (my primary need was for storing paths, and it wouldn’t be ideal to have to put in the full filesystem paths to things), string concatenation and other operations, and any other PHP behavior or values desired.
Continue reading post "Notes on Using PHP Class With Statics for Configuration"

Symfony Console

in

This passed weekend, I released a github project called sy-console. It is a starting point for building command line applications that takes the symfony console component and adds symfony’s dependency injection, configuration handling, plus some other niceties like automatically adding commands from configured directories. If you don’t want those features, you can use the console component directly, but if you do, this takes some of the pain out of setting those up.

Background

I spend a fair amount of time doing things on the command line. I’ve made plenty of command line scripts, mostly in bash. Bash is kind of a pain to work with for anything beyond simple command running scripts. The control structures are a bit limited and have a hard to remember syntax. Data structures are very limited. There’s no such thing as object orientation. Working with Symfony, I really liked the console component, how easy it was to add commands to app/console, how easy it was to work with arguments, how configuration and services were shared between commands, how it was PHP. I’ve been wanting to use the component for standalone CLI apps for a while now, but was struggling to find how to make it work independently from a full blown Symfony Standard Edition install. I finally found enough resources to get me started and had the requisite free time.

Continue reading post "Symfony Console"

The Happs

in

These happs blogs don’t always allow me to go into as much depth as I would like, but they are definitely a lot easier to write. I have been writing much more frequently now that I’ve started them. “Remember, a writer writes, always.”

WordPress Starter Theme

After much time and effort, I’ve finally released my WordPress base theme, TJMBase. It is the very bare parent theme for what my website has been running on for several months now. These days, I don’t use WordPress for very much, but I have done several projects with it, especially earlier in my web development life, and to some extent still like it.

Years ago, I had made a theme starter that was basically bare of any styles and extra fluff, the kind of thing you might want to start with if you wanted a good starting point for doing a theme basically from scratch. I never released it (didn’t release anything open source at that point), though I did use it for some projects and let at least one interested party use it. I had stopped doing much with WordPress once I got my current job, but I did want my theme starter to be useful to the community. WordPress 3 came out and brought some important changes that made my old theme behind the times, missing some important features.

Continue reading post "The Happs"

The Happs

in

Shell Games

I have been toying with some shell alternatives to bash; fish and zsh. Auto-suggestions were the main draw, though there are other features as well that are nice to have. I especially like the auto-suggestions functionality that fish provides. I have tried to get similar behavior in zsh, but haven’t been able to get something going that doesn’t have problems of some sort. Another feature I like is implicit cd, where you can change to a directory simply by typing its path.

zsh is really configurable and also mostly bash compatible, so I can use the same config files for both. fish requires its own syntax, so I must use separate config files. zsh is also more commonly installed than fish. For these reasons, I would like to move to zsh, but the auto-suggestion problems have led me to go with fish for now.

Dotfiles

My shell experiments have led me to release my dotfiles as open source. I had previously had a much simpler dotfiles setup that I never released openly. My new dotfiles project was mostly written from scratch, with a much more advanced setup script and file organization. I’m maintaining as close to the same configuration as possible between bash, zsh, and fish, and attempt to deal with differences between Linux and Mac OS X.

I have a dotfiles script for setting things up. It symlinks all the relevant files into the home folder. I wrote it in PHP since I know it well and can do OO stuff in it. I have the actual dotfiles plus files they include/reference separated into folders by application / shell. Each folder has a ‘dotfiles.json’ file that defines which files are to be symlinked into the home folder (or other path, if necessary), so that I can have other files mixed in with the dotfiles without the install script paying them any attention.

Looking at some other peoples’ dotfiles, I have improved and added some new functions, aliases, and other features. For instance, I found some neat git log functions that gave some really nice output and modified them to my liking (see my vcs.sh). There were a bunch of other neat things I’ve found but haven’t added.

I put a lot more time into this than I wanted, but am happy with the results. It has brought some improvements to my shell experience and made it easier to share this experience across devices. I still have places I have to log into that I can’t install my dotfiles (namely the servers at work), but for my computers and my server, it has been really nice.

I would like to do something similar with other configuration that isn’t “dotfiles”, such as for Sublime Text and other desktop application. I just have to figure out a good way to do it in an organized fashion. I’m not sure if I’d want that mixed in with my dotfiles or if I’d want a separate repo. Not sure if I’d want a repo per OS either, maybe with a shared repo for things on multiple OS’s.

The Happs

in

For a while now I’ve been trying to write posts that draw people, such as solutions to specific problems or things that might be called articles. I think I’ve focused on these types of writings because parts of me want to be bring myself more prominently into the larger web community, help others, get some praise or critique for my work, and perhaps get offered a high paying job from some bigger web firm. I think I got a bit heady when I started getting above 50 visitors a day, peaking at 98. But that flow has dried up and I’m back down to less than 20.

I do like writing those types of posts sometimes, and I’m not going to stop, but I think I’m going to write a lot more smaller and less focused posts that are more generally about anything on my mind. I think I shall call the posts “The Happs” so I don’t have to think of a title and to emphasize their lack of a specific topic. The article type posts really take a long time and some research to compose, and I don’t have a lot of free time for them. It is often so long between when I do whatever is the impetus for them and when I write them that I’ve forgotten a lot of the details. I think “The Happs” will get me writing more often and allow me to put out snippets of what might later go into more thorough articles.

So, what has been happening with me lately?

Continue reading post "The Happs"

Ode to Open Source

in

I am definitely a proponent of open source / free software and other things. I don’t mind paying a fair price for things that I like and that benefit me: It’s one way for me to speak my preferences to the creators, and it provides them a livelihood and incentive to continue. However, in a way, for both developers and society, open source is all we truly have, available to all to use and evolve. I think this is similarly true for non-code things as it is for code, and the same reasons and advantages can apply, even if the tools aren’t developed to the same degree.

The web industry is filled with open source and free sharing of ideas, methods, and practices. I use open source projects and freely shared knowledge every day to do my job, to solve problems, to improve my work, and to have a starting point that includes work that has already been done and improved upon by others. This job would be a lot harder without open source and shared knowledge, and the results, the countless websites across the world, would be far worse without it.

Continue reading post "Ode to Open Source"

SCSS rem fallback mixin, my take

in

The rem CSS unit allows you to base your font sizes off of the user’s configured font size, but not be affected by parent elements like ems are. Older browsers don’t support rems though, so it’s good to provide a fallback in px for them by defining the property with a px value, then a rem value. Old browsers take the px value, then see they don’t know how to handle the rem value and ignore it. New browsers take the px value, then override it with the rem value.

There are a number of SCSS mixins out there for making rem fallbacks automatically by passing in a property and some values and having it automatically output both versions of the property. I started with the css-tricks one. None of the ones I found, though, worked exactly as I wanted. I wanted to be able to work with any property values. I wanted:

  • unitless number values (other than 0) to be treated as px values
  • px or rem values to be converted to the other unit
  • values with other units or non-numbers to be output as is (auto, none, url, etc)
Continue reading post "SCSS rem fallback mixin, my take"