Toby's Log page 92

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"

Responsive Behavior

in

Styles (ie CSS) are the primary focus when it comes to making a site responsive, but the behavior (ie JavaScript) must also be able to react differently to different circumstances. A site might have a horizontal navigation with drop-down menus for wider viewports, but a simple vertical slide open and closed navigation for narrow viewports. The site must not only be able to change the styles that make those menus look right but also the script that drives the behavior. Some behavior might even need to manipulate that DOM to function properly, such as sliding banners with inserted navigation. The DOM will need to be changed one way for certain viewport sizes and those changes reverted, and possibly other changes made, when switching to different viewport sizes.

One might contend that most viewers won’t be switching their viewport dimensions, but window resizing does happen, text can be resized (for ’em’ breakpoints), and mobile devices can be rotated. The site should not break when this happens. Also, even without changes, the correct behavior must be run.

For dealing with this, I have created a ResponsiveHandler class that listens for resizing of the window and fires an event when changing breakpoints. For each behavior that needs it, I listen for this event and run the appropriate construction and destruction depending on what the new and old breakpoints are/were. Behaviors can also simply use the class to determine which breakpoint the site is currently in and act accordingly.

Continue reading post "Responsive Behavior"

WPThemeHelper, my helper for WordPress themes

in

In remaking my website using WordPress, I’ve been working on a base theme that I can use for other sites. I decided to take some of my experience from the Symfony world, such as organizing functionality into namespaced classes, grouped into “bundles” of functionality that can be (somewhat) independently installed as needed depending on the project. I already mentioned the PHP-BufferManager I’m using in a previous post. I’ve also created a more specific to WordPress project with more varied functionality, a theme helper called WPThemeHelper.

The theme helper has several classes to help make theme development cleaner and perhaps a bit easier. The readme on github has more details, but some of the more important ones are:

  • SettingHelper: Allows setting of WordPress settings with a map (associative array). It calls the appropriate WordPress function at the appropriate time in WordPress’s initialization cycle. Helps clean up the ‘functions.php’ file and makes remembering what functions to call for various theme settings easier.
Continue reading post "WPThemeHelper, my helper for WordPress themes"

PHP Output Buffer Manager

in

With rebuilding my website with WordPress, I have made progress on the WordPress starter theme I’ve been working on. One thing I used for it was PHP’s output buffering to control output and allow me to define “blocks” of content, then render them at a later point in their proper location. To this end, I created some helper methods to manage this for me and allow easy creating of named buffers. I got the idea for this from the slots of Symfony’s PHP templating engine.

I have since broken this out of my WordPress theme helper classes into its own class and created a github repo, PHP-BufferManager to allow its use for generic purposes. This is a very simple repo and class. The most common way to use it would be to use $instance->start('name'); to start a buffer named ‘name’ and $instance->end(); to end it, then $instance->get('name'); at a later point to get the string value of the buffer for output or other purposes. A simple example:

Continue reading post "PHP Output Buffer Manager"

My new resumé site

in

Well, I finally did it. After several years of effort, I finally released a new version of my CV / resumé site. How did I accomplish such a difficult task? Let me tell you, it was not easy. There was the desire to accomplish perfection that I did not have enough time for in my day job, to make everything organized and set up in the best possible way, that I might be able to draw from for other sites. There was the want to learn new things that I don’t use at work that might be useful or at least give me ideas and be important to know for my career in general. And, of course, there was the fatigue from doing very similar work for long periods of time at my actual job, and working on some of the more general use projects I work on on github.

I spent countless hours reading about different best practices and methods. I researched and tried several different frameworks / CMSs. I built and rebuilt my site numerous times in different ways. I played with different design, development, and content ideas, and was not entirely satisfied that any was the best.

Continue reading post "My new resumé site"

CSS: Position absolute with auto values

in

I have been using ‘position: absolute’ for a long time for a lot of things, such as drop down menus, pop ups, decorations, and things that need animating, yet I never realized what using ‘auto’ for one of the coordinates (eg ‘left’ or ‘top’) meant and how useful this could be. I had thought it was the same as ‘0’, but it simply means (in all browsers I test in, including IE 7) that the element will be where it was for that coordinate as if it were statically positioned. This is very simple, but very useful in certain circumstances and probably would’ve saved me a lot of work in the past. I have spent a lot of time getting things positioned properly below items when both are variable height or below fixed height items when I need the positioning parent to be a parent container so that other attributes (such as width and left) can be based on that container.

As an example of where this could be useful, I was recently working on something similar to the grid with slide down details on Zoraab (I’m linking to this because the one I worked on is not live yet and we used it as an example for ideas). It has a grid of items with a variable number of columns. The details slide down below their item when the item is clicked, but they are the full width of the entire grid. I spent some time setting up JavaScript to calculate the ‘top’ the item needed to be at to be below it’s containing item while using the entire grid as a positioning parent so I could have the details be at the left of the grid and 100% of its width. It worked fine, except when switching from one item to another that is below it. Then the top would be off (because it was calculated when the other item was open) and the item would be overlapping items below it. I was going to spend more time working on a JavaScript fix, but then I discovered how the ‘auto’ value works (Zoraab uses it, should’ve looked at that earlier). With it, I still get the ‘left’ and ‘width’ from the grid container, but the top is right where it is in the markup, below the clickable part of the item.

tmclasses: my javascript class library

in

I’ve decided to take my JavaScript class system out of my more general JavaScript library, tmlib. It can now be found in my js-tmclasses repository. I felt it needed to be separated to make it easier to work on without the clutter of all of the other functionality in tmlib. It also will be easier for others to make use of, not being buried among a bunch of other junk and not having all of that junk in the default build file. This decision was made easier since I converted to using require.js a while back. I can include tmclasses in a vendor folder, pull into tmlib and attach everything to the same places in tmlib to provide the same interface as before, and it is basically the same as it had been usage-wise. The build is slightly heavier, but that is partly due to duplication of methods that I will eliminate or limit.

tmclasses is a fairly simple class system so far. It provides a method for creating ‘classes’, which in JavaScript are basically functions with properties attached to their prototypes. The feature set is basic, but I intend to add more to it to get some of the niceties of Qooxdoo’s class system. I like a lot of things about Qooxdoo’s class system, but found it hard

Usage

The heart of tmclasses is the create method. It is passed an argument with all of the configuration to create a class.

Continue reading post "tmclasses: my javascript class library"