WWW posts page 32

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"

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"