30
Jul 14

The latest clearfix technique

A trick from CSS Tricks that you should just commit to memory.

.group:after {
    content: "";
    display: table;
    clear: both;
}
categories: Web Development   tags:
27
Jul 14
23
Jul 14

Obsessed with Margins vs Padding

One of the things I remember from Hagakure was the concept of resolution and the importance of being resolved beforehand so you don’t waste time or energy in indecision resulting in possible death.

I’m reminded of this idea whenever I come across the decision to use margin or padding. Setting the border-box css property levels the playing field and enables us to use margin and padding predictably. There really is no better or worse here. It’s a matter of preference. And here’s mine…

For page margins, if the margin is consistent with maybe a few exceptions here and there, then use a page margin. For page elements, default to putting margins on the right and/or bottom if needed. The key is speed. You don’t want to be thinking about this stuff ever.

categories: Web Development   tags:
16
Jul 14

Awesome fixed table header technique and the Angular directive it inspired

This is one of those solutions you wished you could’ve came up with yourself. The kind that gives you that edge and confidence from having a cool and utterly useful trick you can pull out whenever you have the slightest need.

The explanation of how it came to be: http://salzerdesign.com/blog/?p=191

An Angular directive using the technique: https://github.com/alalonde/angular-scrollable-table

categories: Web Development  
15
Jul 14
08
Jul 14

D3: enter-update-exit pattern

From Data Visualization with D3.js Cookbook

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
 
function render(data) {
    // Enter
    d3.select("body").selectAll("div.h-bar")
        .data(data)
        .enter()
        .append("div")
            .attr("class", "h-bar")
            .append("span");
 
    // Update
    d3.select("body").selectAll("div.h-bar")
        .data(data) 
        .style("width", function (d) {
            return (d * 3) + "px";
        })
        .select("span")
            .text(function (d) {
                 return d;
            });
 
    // Exit
    d3.select("body").selectAll("div.h-bar")
        .data(data)
        .exit().remove();        
}
 
setInterval(function () { // <- K
    data.shift();
    data.push(Math.round(Math.random() * 100));
    render(data);
}, 1500);

The key is to focus on the selector returned by the function.
enter() returns a new selector containing all the data/element pairs that do not yet contain elements.
In the update mode, the focus is on the selection returned by data(), which contain all the data/element pairs that have both data and elements.
exit() returns a new selector containing all the data/element pairs that no longer have data.

categories: Data Visualization   tags:
06
Jul 14

CSS: Classes vs IDs

Finally, after many months of not working on my 3-site project, I added a new table for the music database out of necessity. I decided to use the production version of the music site as a log for the music I listen to. There is still, as of this moment, no way to add albums. For now, I built a way for me to retrieve albums connected to a group (group detail page). Now I have two sections showing up, which is immensely gratifying to see, but visually they are too close together. I have to style them.

Since they were just divs, I changed them to sections. Then I got stuck trying to figure out whether to use classes or ids to select them in the stylesheet. This is a problem that always comes up and I never fully resolve.

I decided to err on the side of specificity because classes invite a multitude of issues related to overriding and levels of specificity. With ids, you don’t have specificity conflicts nearly as much because you can only have one element with an id per page. So the final word is use ids whenever possible. Second to that would be a uniquely named class like “nav-contact” and only use it when you need it and not a moment sooner.

When placing selectors on the body tag, always use an id especially since third party scripts and libraries, such as modernizr, alter classes.

As for the two sections I was styling, I decided to use neither a class nor an id because of another new rule I made today. Don’t put add selectors on elements if you don’t have to. Cross that bridge when you get to it. The change from divs to sections was enough so that I could just add a bottom margin of 1rem on all sections and call it a day.

categories: Web Development   tags:
05
Jul 14

Form Messaging: Absolute vs Relative Positioning

Form messaging, has been plaguing my mind since last year when I first started seriously thinking about it. We implemented something that was inspired by this article.

I’ve been ok with the way we’ve used it, but the thing that has been bothering me most about it is its placement on the page. When it appears, it pushes anything that is underneath it down further on the page. Although it is almost always a very short distance, it is unpredictable. In response, I’ve decided that I will make all messaging absolutely positioned to the top of the window (not the top of the document). I think this will work well for mobile as well.

It’s something I’ve seen on many sites, but it is something that has to be done well to work seamlessly, which is why I stayed away from this solution. The main hurdle is to absolutely position the message AND make it so that it does not look like a mistake. It should be subtle enough to not draw attention away from the content of the page, yet not too subtle that it can be missed.

categories: UX Design   tags:
02
Jul 14

Stacked Charts in D3/AngularJS

In preparation for an upcoming project at work, I’m ramping up on D3 and building D3 directives in AngularJS. The choice of D3 and AngularJS has already been made in my mind and Matt needed no convincing.

The kind of chart we’re planning on doing is a stacked chart. I found a perfect one to model one after (http://bl.ocks.org/mbostock/3886208). I already have a good handle on how it’s made.

Unlike this chart, ours has a time-based x axis. So that will be my next hurdle, the time scale. If I need help, I have another stacked chart to reference (http://bl.ocks.org/anupsavvy/9513382).

categories: Data Visualization   tags: ,
16
Jun 14

Sticking with PHP for now

There are a couple reasons why I had been thinking about dropping Laravel. The first reason is that it’s been such a struggle to get what I want to work (especially complex table relations). The second is that I feel PHP is getting less and less popular and might eventually just fade out altogether like ActionScript did.

Unfortunately, I don’t enjoy coding in the alternative languages such as Python and Ruby, and I’d rather code in Laravel, which is PHP, than code in those languages (I can’t seem to let go of my curly braces). I thought I could use Laravel without dealing with raw PHP much the same way jQuery is to JavaScript, but I’m finding myself feeling a little helpless whenever I come upon something I don’t understand.

So I’ve decided to bite the bullet and really give PHP one more shot.

categories: Web Development   tags: ,
« Older Entries

Copyright © 2014 Soultrust / Process
Proudly powered by WordPress, Free WordPress Themes