Toby's Log page 93

GiveCamp 2013

in

Finished my third Cleveland GiveCamp last weekend. Another successful event. This year, my project was a new web site with more features for Bike Cleveland. We were doing well enough with that project that I was able to help another project Saturday night and Sunday, a web application for the Cuyahoga Valley National Park Environmental Education Center.

Bike Cleveland

Bike Cleveland is a bicycle advocacy group for the greater Cleveland area. They had an existing site that was in WordPress, but wanted it to be more engaging for members, allowing more involvement and discussion. Our group was composed of a team lead, four developers, a designer/ux person, and a learning teen with photo editing knowledge. Our client was good with WordPress, able to install plugins and what not, and generally understood what we were doing, so he was very easy to work with.

We started Friday night discussing what he wanted. We decided what was most important and what we could skip if time was short. He wanted to involve members with forums, an ability to submit events, forms to submit accidents and thefts, to have buttons to share things, and to emphasize ways to become involved with the organization. They also wanted the site to work on mobile devices so that people could use it from phones while out cycling.

Continue reading post "GiveCamp 2013"

Working on a new WordPress bare theme

in

I haven’t been doing much with WordPress, since at Cogneato we have our own CMS. But a customer request for a WordPress site a while back and the upcoming GiveCamp which I will be participating in this weekend have rejuvenated my interest in working with it. Back when I was using WordPress more often, I had built a bare theme I used as a starting point, including for the Stearns Homestead site I was working on when I first started this blog. That was the WordPress 2.x era though, and the theme is now outdated. I decided to begin work on a new theme, making use of the new 3.x features.

I have learned a lot since building that theme, and wanted to bring in some of my new knowledge and coding practices to the new theme. I also wanted to put this one on GitHub, since I now have an account and others might find it useful. I still haven’t decided for sure what I’ll call it (for now it is TJMBare) and have more work to do, so it isn’t on there yet, but hopefully will be by this weekend. Anyway, I wanted to mention some of the things I have done or will be doing with it.

Class helpers

I am putting all of my functionality and data into classes that in most themes is put into the global namespace. The classes will help group functionality and data together, making it easier to develop and to avoid collisions. Since WordPress doesn’t yet require PHP 5.3+, I am avoiding using PHP namespaces, but am compensating by putting the equivalent on the front of the class names. Functions.php will just include the class files and instantiate what is needed. Child themes will be able to extend parent theme classes to change functionality.

Continue reading post "Working on a new WordPress bare theme"

Responsive: Turn Image Maps Into Selects

in

I’ve been doing quite a few responsive sites since I first started into them. I like doing them. They are fun to build, requiring new techniques and a different way of thinking to handle different situations. I like the concept and I like looking at the sites. One recent fun thing was dealing with an image map. Scaling the image and coordinates would be a pain and very expensive. An alternative option is to replace the image with a select drop down when the screen is too small for the image.

Breakpoint detection

I don’t remember where I found this method of dealing with breakpoints in JavaScript, but I’ve been setting the line height on the html tag with media queries and reading it with JavaScript to determine which breakpoint I’m in. This works with the ’em’ based breakpoints I use. I convert the numbers to more descriptive names, such as ‘small’, ‘medium’, and ‘large’. It looks something like this:

Continue reading post "Responsive: Turn Image Maps Into Selects"

Conference: Rustbelt Refresh

in

I went to my first real full length web development conference today, Rustbelt Refresh. It was a very good conference with good speakers and interesting topics. Finally something like this in Cleveland. I learned and got to thinking about various things. I was rather tired though after waking up so early and spending a whole day there. I will summarize / talk about each presentation, as sort of a minimal review, but primarily to store and cement what I’ve taken away in my mind.

Presentations

Eric Meyer: The Era of Intentional Layout

Eric Meyer is our local global CSS celebrity. I’ve gone to every local presentation he gave that I was aware of, which I think totals three with this one.

His talk started with a history of CSS layout, and how CSS never got a real layout system and the things we still use today are mostly hacks, limited in what can be done with them, and often create problems. To summarize this history: At first the web had no layout, and content just went with the flow. Then tables came in for tabular data. They quickly became used for layout because of the lack of alternatives, and soon made markup a nested mess that was difficult to maintain and impossible to change the layout without changing the site structure. Floats were added to allow content to flow around things like images, and quickly became usurped for layout. Since they were designed without layout in mind, they had a lot of problems in use for it, and a lot of creative hacks have been created to get around them, like equal height columns and zero height containers. Then came positioning, which was actually designed for layout, but had the problem of taking things out of flow and thus not allowing things to move in relation to each other, etc.

Continue reading post "Conference: Rustbelt Refresh"

TMLib meets Require JS

in

I’ve recently been working on reorganizing, cleaning up, and improving my javascript library, TMLib. This has included folder reorganization, source cleanup and normalization, a (so far crappy) build system, adding unit testing, a (mostly still unused) class system, etc.

My most recent effort has been to bring in the use of Require JS. Require is an AMD implementation, which is an interesting extension of the module pattern. It takes the dependency injection part of the module pattern (ie passing variables the module will use as arguments into the function expression) a step further by handling auto loading of those modules with a script loader that will asynchronously load and run all dependencies for a module before running the dependent module, injecting the dependencies as either parameters or assigned variables. Require does this with names based on file path, sort of like a JS equivalent of PSR-0. Require also provides a build process that will combine all required module files into one and minify. I have not played with this yet, but am hoping it will take over my currently crappy build process.

So far, I’ve only converted over a small core part of my library, but I really like the direction it is going. The scoping/dependency wrappers around each module may add some bulk, but will also allow minification of all module dependencies and what not, so it may end up being insignificant in the build, especially since my current build process doesn’t involve much minification. Even if it ends up a bit larger than it could be, the development benefits outweigh that concern for me. It has also required a change in the way I construct my library pieces. The early pieces require being constructed in a certain order, and things don’t work as well when modules to depend on each other. But I think it will be really nice when I get the full library converted over and the build process figured out.

JavaScript: Callable namespaces and other namespacing options

in

It is a good practice to not pollute the global “namespace” (ie window in browsers) when creating JavaScript code, especially if it is to be reusable, to avoid collisions with other bits of code that may be used on a page. It is common to use objects as namespaces. You can say window.myLibrary = {} and then add whatever you want to that object with confidence of no collisions with other libraries as long as myLibrary isn’t taken. Larger libraries will often have a namespacing function that will manage the creation of these namespaces, allowing them to be accessed if they already exist or created and then accesed if not, and easily handling multiple levels of depth. A simple example may look like the following:

namespace = function(_namespace, _scope){
    if(!_scope){
        _scope = window;
    }
    var _currentScope = _scope;
    var _identifiers = _namespace.split('.');
    for(var _i = 0; _i < _identifiers.length; ++_i){
        var _identifier = _identifiers[_i];
        if(!_currentScope[_identifier]){
            _currentScope[_identifier] = {};
        }
        _currentScope = _currentScope[_identifier];
    }
    return _currentScope;
}

Then you can do something like:

ns = namespace('myLibrary.mySubNameSpace');
jQuery.extend(ns, {
    'component1': function(){}
    ,'component2': function(){}
});

I’ve been doing the more manual approach for my library, but have been desiring for a while to get more organized and streamline repetition by adding my own namespace function. I got to thinking about doing more with the namespace objects, so that they can perform operations on themselves once created. For example, they might be able to create and return sub-namespaces as well as easily extend themselves.

Continue reading post "JavaScript: Callable namespaces and other namespacing options"

My first responsive site

in

I’ve been interested in the basic idea of responsive design since I first started into web development. Back then it was mainly limited to flexible widths that accommodated changing screen widths and font sizes. I experimented with that when development was just a hobby. Still, I found CSS2 and browser compatibility issues to greatly limit the flexibility. When starting to actually get paid as a developer, I went with what was already being done at the places I worked, which was pixel-perfect design. Sites had to work in old browsers and time was limited. Designs were flat images that were easy to cut up and use CSS to match exactly. I did play with some flexibility when I had more free time.

When responsive design became a thing, I thought it looked pretty awesome. It gave a lot more flexibility than what I had been playing with. Still, browser support was too bad for parts of it for me to use at work. I played with some aspects of it, adding a bit of flexibility here and there, but still kept mostly with the pixel perfect type design. When we eventually discussed it with my boss, he didn’t like the idea, particularly for accommodating his designs and the browser support issues. I started a yet unfinished remake of my own site that allowed me to play much more, but didn’t get very far towards a finished design.

The Site

Recently, my boss came up with a simple design for a simple site that he thought would be perfect for trying responsive techniques with, the annual report for the Gay Community Fund. It lent itself well to flexibility and him and the client were fine with graceful degradation / progressive enhancement. It consists of basically two layouts: the home page, with a gallery layout of boxes; and an internal layout with a heading, a possible image, a possible small image gallery, and a possible long list.

Continue reading post "My first responsive site"

IE 10 and CSS Grid Layout

in

IE 10 has recently graduated from beta and is now the current official release. It started out Windows 8 only, but now is available on 7 as well as a preview release. Hopefully that will allow it to grab more IE users quickly. IE, which has long been the bane of web developers, has been getting better and better with each release. IE 6 has always been a pain to develop for, having many bugs/quirks in rendering pages. In all but fairly simple sites, it always took me a fair amount of time to fix after getting things looking right in other browsers. Luckily, the market share is low enough that at work we don’t even worry about it anymore. IE 7 was better. Using a subset of HTML4/CSS2 level development, I usually have had to do only minor tweaks unless the sites were fairly complex. Luckily, It’s share is almost to the cutoff point where we stop developing for it as well. With IE 8, I’ve been able to do most HTML4/CSS2 level stuff without worries. display: inline-block;, :before, :after, onhashchange, etc. It still remains a limiter in using some selectors and in making use of HTML5/CSS3 level techniques, though using an HTML5 shiv and CSS3 PIE or allowing for progressive enhancement to skip over some features in it works rather well. IE 9 has brought some HTML5/CSS3 stuff to the table, like selectors, HTML5 semantic elements, SVG, though it’s missing some important ones, like CSS3 columns and HTML5 form stuff. Since I develop to support IE 8 usually without browser specific tweaks, IE 9 basically works automatically, and has some style enhancements over 8.

And now there’s IE 10. IE 10 has added a lot more and is finally coming close to other browsers in implementing the not-yet-fully-standardized standards. It’s still missing some good ones, but the list of things that have to be skipped, worked around, etc, for IE’s current version has shrunk a good bit. It even implements some features that others haven’t yet.

The big one is the CSS3 grid layout module, which is the one I’m most excited about for the future. This module is pretty close to allowing for a real decoupling of markup from style that CSS has promised finally for page layout.

Continue reading post "IE 10 and CSS Grid Layout"

GiveCamp 2012

in

This past weekend I went to my second GiveCamp. GiveCamp is an event where a bunch of developers/designers get together with local charities to build them websites, applications, databases, etc. to meet a need of theirs. The product is started Friday evening and finished Sunday afternoon. The developers donate their time and get food, fun, and great experience in return. It’s a great way to learn new techniques, practices, even languages, as well as meet new people in the industry, often some of the well known in the area.

This year my team was to build a website for Buckeye Industries, a division of New Avenues to Independence. Buckeye Industries is a business enterprise that provides training and jobs for people with disabilities. They have info on the New Avenues site, but wanted to separate out the content into its own site. So it was basically a new site except for the content. Sarah Dutkiewicz was our able project leader. She did a great job working with our client, organizing things, and keeping us moving even through some troubles. Our client contact, named Karen, was very helpful and probably the most enthusiastic client I’ve met. The rest of our team started out as five people but then dropped to four as one went to another project.

Continue reading post "GiveCamp 2012"

I’m on GitHub

in

A couple months ago I finally made my first repos on GitHub. It provides a good place for me to store some of the code I use in an easily accessible location and also offers the potential for others to be able to make use of it and even contribute to it. I definitely like it so far. It has been quite easy to work with and offers a rather nice web interface. I can now not only access these repos from anywhere (with internet connectivity), but also read the source with its file browser and reader and view commit history with diffs.

I started off by adding some Symfony related repos, three that will form a basis for my personal Symfony projects (Symfony-Initial, Symfony-BaseBundle, and Symfony-Shared). I also added another Symfony one related to a project I’m working on (Symfony-BaseBundle). Then I added some more generic web related ones, a new CSS repo Web-Presentation and my JavaScript codebase TMLib (Web-ClientBehavior). I’ve been working on TMLib for a while now and have been wanting to add it.

I will work on these as need warrants and time allows. I will probably continue to add more of my collections of code that I’m fine with making public.