WWW posts page 32

And we’re back

in

I haven’t posted anything on this site since 2011. My “professional” site and related blog took my attention as I focused on my career. In 2011, this site was hosted from my home on an iBook. That server probably was taken down within a couple years of that post when I moved and didn’t bother trying to get it back up and running. By that point, I had my “professional” site on a shared host (Dreamhost) and liked what it had to offer. I no longer had to worry about keeping my IP updated with DynDNS or the downtime from internet outages (common with my Windstream DSL), server problems, router problems, etc.

This site was down for a period, but at some point I migrated it over to my Dreamhost server. I started it at personal.tobymackenzie.com. After a while, I decided it needed its own domain and would be a good candidate for a .name domain, so I bought tobymackenzie.name. The site was still not fully functional though. Some pages and sections were completely broken, and for a while I couldn’t log into the WordPress install this blog is run with.

Recently, I went through and got most things working and threw a more recent, responsive theme (Twenty Fifteen) onto the blog. A few sections still don’t work. I may have lost the data for the almost never used forums. The gallery is run by software that shared photos from my iPhoto library, no longer possible on shared hosting. I may replace these at some point, though I would probably only put the forum back in a read-only mode for posterity.

Anyway, this site is old and outdated. Some of the information is inaccurate. At some point soon, I intend to replace it with something new, probably something built on Symfony. I hope to merge the code-base and some of the content of my “professional” and personal sites, though in appearance and most content they will remain separate to serve their own purposes most effectively. I will leave this site as is on a sub-domain for posterity. As with most of my personal projects, who knows when I will actually get to it, but I have been itching to play with some things that I don’t get to at work.

As to this blog, I hope to get back into the habit of writing for it. I’ve put a lot of focus on my career lately, but miss thinking and writing about some of my other interests. It can be somewhat therapeutic to write down my ideas or about things happening in my life. Lately, my interest in homes and architecture has been coming back. Hopefully, this blog will be seeing me as regularly as it once did and my thoughts will be archived for my future self and others.

Load Balancers and HTTPS

in

Until recently, I had no experience working with sites behind load balancers. Cogneato has been moving its sites to Rackspace virtual servers for flexibility, among other things. One of their recommendations that we took was to put our web server behind a load balancer. Even though we haven’t needed multiple nodes behind it yet, it makes it easier to upgrade the server behind it without needing to change IPs in DNS and will allow us to easily pop up another node when it is needed.

This arrangement has gone relatively smoothly except a few issues. The biggest ones have had to do with our HTTPS sites. We run both HTTP and HTTPS sites on the same server. We put the certificates on the load balancer, so traffic goes from the load balancer to the web server over HTTP. Both Apache and code see the request as HTTP as standard methods are concerned. I will discuss some of the problems we had and solutions I found.

Continue reading post "Load Balancers and HTTPS"

Kendo UI

in

We recently acquired licenses for Kendo UI at Cogneato. We have plans to use some of its widgets, most notably the data grid and window, heavily in the admin interface for the new CMS we will be building. We figured that the time we save from not having to build similar widgets ourselves would be well worth the hefty license costs.

Troubles

We have made use of the window in a few sites so far, and the grid on alpleaders.org. I have found that for both widgets, it has helped to build a sort of wrapper around them. The wrapper helps normalize configuration and handles some things that we want to happen for all instances. Some of this was related to problems we ran into with the widgets or features we wanted that weren’t built in.

For instance, the data grid has the ability to be filtered per column client side. A ‘row’ mode provides an input with autocomplete for the values in that column. If you want to use a different mode, however, there is no built in autocomplete feature. You have to create an autocomplete widget for each column. Attaching the same data source as the grid uses results in the same number of items in the autocomplete as there are rows in the grid, meaning if 30 items have a ‘State’ of ‘Ohio’, the autocomplete will show ‘Ohio’ 30 times. I set up a helper to build columns and automatically create a new data source with a single instance of each value for the items in a given column. I’m not sure why, since they already built their own logic for the ‘row’ mode, they couldn’t make that an option for other modes.

Continue reading post "Kendo UI"

Additive overwriting of Symfony security configuration

in

Symfony provides a security component and bundle for managing authentication and authorization in an application. It is versatile and powerful, if not a bit complicated. You can toss as many mixes of authentication and authorization configuration as you want. The important parts of the configuration cannot be overridden or added to by multiple config files, though. This makes sense for one-off applications, where you can be sure that no bundles are messing with your security configuration. However, if you’re building something like a CMS that will be used for multiple sites, where you want the CMS’s bundle to manage security, setting the configuration within the bundle will block the application itself from adding its own configuration.

One way I’ve found to work around this is to have the security configuration set on your bundles configuration extension instead of the ‘security’ extension directly, and have your bundle merge all such configurations and set them on the ‘security’ extension in PHP. If you allow this configuration node to be overridden, any number of bundles can add to it and avoid the “cannot be overwritten” error.

Continue reading post "Additive overwriting of Symfony security configuration"

The Happs

in

New Cogneato people

For a small company like Cogneato, it’s always exciting to bring in new people. New personality, new ideas, new experience, new opportunities. We hadn’t brought on any new people for probably two years, and had even lost a few from our maximum. And most importantly for me, we have only brought in two new developers in my entire tenure, only one of whom remains.

With increasing business and one of our “contenters” (who do client communication, work on content, light development, etc) leaving near the end of the year, we decided to bring on not one but two more people. One of them is a contenter (who has already started) to replace the one leaving, but one is a developer. We just signed her on last week and she will be starting by the beginning of December. She doesn’t have a lot of web experience, at least on paper, but has a masters degree with a focus on programming. It will be nice to have some help and to have another person to discuss development things with. I’m excited.

Continue reading post "The Happs"

Parallax Background Images

in

Recently, I made my first foray into the popular parallax on websites fad. My needs were simple: I needed to make background images move at a different rate than the content that sat on top of them when scrolling occurred. This was the first type of parallax I saw on the web and the most intriguing to me. I figured that there would be a lot of already built libraries to make this easy. Looking through the parallax libraries though, the most popular ones were quite complex or didn’t do what I wanted. I did find a couple of scripts that just handled the background image parallax, but I had some problems getting them working, and they didn’t work with vertically centered images.

In the end, I took ideas from those scripts and some articles to create my own parallax script. With my class library removed, the script would look like the following:

Continue reading post "Parallax Background Images"

Backbone: Maintain scroll position when going back

in

I’ve been spending a lot of time at work recently working on another phone app. Like our other apps, we’re using Phone Gap to build an app with web technologies. Like one previous app, we’re using Backbone, adding Marionette to help this time. Backbone apps are generally SPA‘s that rerender entire pieces of the HTML document when the underlying data changes. This can often be basically the entire content of the document when you change routes.

Because there is no page change, browers don’t typically change the scroll position when you visit a new “page”. So when you click a link at the bottom of one page, you may end up at the bottom of the new page you are loading. It’s common to have apps set the scroll position to the top via JavaScript on page change, like window.scrollTo(0, 0);.

What happens when hitting the back button varies from browser to browser. Some, like Chrome, try to remember the scroll position for each fragment identifier (how Backbone handles routes by default), while others, such as Safari, do not. When they do not, it can be a usability problem working with lists of items. You might visit the detail page of one item by pressing a link in the list, then go back to the previous page wanting to look at the next one, only to find your place is lost.

Continue reading post "Backbone: Maintain scroll position when going back"

Givecamp 2014: Lake Erie Ink

in

Lake Erie Ink mobile home page
Slightly over a week ago, I finished my fourth Cleveland GiveCamp. GiveCamp is a weekend of developing websites and other things for area nonprofits. As usual, it was a good time. My project this year was an update to Lake Erie Ink’s site. They had actually had their site built at the GiveCamp two years prior (I was not on that project, but know someone who was). They just wanted a map added to their site that showed where kids were writing or writing about. With six developers and a developing project manager, along with a WordPress plugin, we were able to get the basic functionality working rather quickly. So quickly that we had something working Friday night and started shedding developers to other projects. By Sunday it was basically down to just me and the project manager (plus the Lake Erie Ink people, of course). We added in some extra improvements in addition to the map. We brought in a couple of designers for brief stints to help us with some design issues.

For my part, I did help some with the map, but spent most of my time making their site responsive and tweaking the home page to include a callout for the map page. The site had not been designed with responsiveness in mind at all. It had nested divs with fixed pixel widths that accommodated padding of the parents’ even when width: 100% would’ve done the same thing. In addition, id’s were used a lot, even multiple times per page, there was a lot of unnecessary redundancy and extra CSS in the styles (such as repeated blocks and things like margin: 0px 0px 0px 0px), and extra heading elements were made up to provide extra heading styles (h7, h8, and h9). The templates were confusing at times and some had different versions or nearly identical related templates.

Continue reading post "Givecamp 2014: Lake Erie Ink"

Working with Composer ‘scripts’ and ‘extra’ from Non-Root Package

in

The goal of my Symfony StandardEditionBundle is to capture as much of the logic and configuration of the Symfony Standard Edition as possible to make it easy to upgrade between versions with as little modification to the in place application as possible. Among things I wanted to try to get into the bundle was as much as possible of the composer configuration file. It contains a ‘scripts’ key of scripts or functions from packages that are supposed to be run upon install / update by composer to set up the application (for instance, one script walks you through creating the ‘parameters.yml’ configuration file). There is also an ‘extra’ key used as configuration for these scripts.

Scripts

Composer only allows the ‘scripts’ to be defined in the root ‘composer.json’, ie the one in your application. The idea is that scripts will only run that the owner has explicitly given permission to, and thus trust. This prevented me from putting them directly in my bundle’s ‘composer.json’, as they would be ignored. My solution was to create functions in my bundle that run the ‘scripts’ from Symfony Standard Edition and can be placed in the root application’s ‘composer.json’. This way, the application wouldn’t have to change those scripts unless Symfony Standard added ‘scripts’ for more events (since they are specified with the composer event they are to be run for).

Continue reading post "Working with Composer ‘scripts’ and ‘extra’ from Non-Root Package"

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"