Easing is a topic that has been solid for a while. There hasn’t been much of anything since Robert Penner introduced his compendium of easing functions in 2001. Which makes it an excellent time for something new.
Ding-dong the witch is dead
The Witch of Agnesi seemed like an excellent candidate for an easing function. It smooth, its continuous, and it 300 years old. As we know, easing gets better with age, but don’t take my word for it try it out, or check it out on github.
January 27th, 2011 by AaronAsAChimp
Posted in Sachimp Labs
No Comments »
John Graham-Cumming, an author and fellow geek, is trying to raise £500,000 to build Charles Babbage’s Analytical Engine. Run entirely on steam power, the Babbage engine, was the first modern computer ever conceived. It was never built.
If you have 10 bucks to spare.
UPDATE: There were not enough pledges. We may have to wait to see this amazing machine built.
October 10th, 2010 by AaronAsAChimp
Posted in Uncategorized
No Comments »
A quick way to improve the usability of your forms is to use the label tag. It will increase the size of the click-able area of a form input. As we know from Fitts’ law the larger an element the easier it is to interact with it. Try it with a check box. The clickable area is outlined in red.
<label>
<input type="checkbox"> label text
</label>
September 1st, 2010 by AaronAsAChimp
Posted in Quickies
No Comments »
Something I run across every so often when fixing bugs is a problem of content overflowing its parent element. The child has padding, margins, or a border, and a width set to 100%. This seems like it should fill the available space, but it protrudes out instead.
The weird behavior comes from the standard box model. According to the standard box model, when you set the width, it sets the width of the content area. The padding, border, and margin get wrapped around it. Meaning that the box, which is already the full width of it’s parent, gets pushed out beyond the edge.
The fix is painfully simple. Simply set width of the chid element to auto, or remove it entirely. Block level elements automatically fill the available space, and that calculation takes into account the borders, margin, and padding.
June 13th, 2010 by AaronAsAChimp
Tags: box-model CSS Posted in Quickies
2 Comments »
The non-breaking space ( ) is the workhorse of the web. It can be used in so many contexts from its use as a poor-mans indent or even to workaround bugs in IE6 and Firefox.
Not many people know the true value of a non-breaking space. As its name implies, its primary purpose to prevent line breaks. Essentially the opposite of a break tag.
A few examples
Prevent widows:
By replacing the last space in a paragraph you can prevent a widowed word.
In aliquet leo aliquet enim tincidunt non tristique tortor
feugiat. Donec gravida egestas risus quis eleifend. Donec
adipiscing dolor nec augue dignissim pharetra.
Ensure words always appear together
In aliquet leo aliquet enim tincidunt non tristique tortor
feugiat. ACME Widget XL donec gravida egestas
risus quis eleifend. Donec adipiscing dolor nec augue
dignissim pharetra.
May 30th, 2010 by AaronAsAChimp
Posted in Quickies
No Comments »
Managing styles can be frustrating. Most people just stuff everything into one stylesheet. This works for smaller sites really well, but it doesn’t scale to larger sites. The stylesheet gets so large that it’s difficult to know what is going to override what. You end up relying in tools like Firebug to find out how adding a new style is going to affect the site.
She’s a brick house
You can’t really get rid of that global stylesheet because defining styles that apply to the whole site incredibly useful. You don’t want have the same styles duplicated across multiple stylesheets. That causes bloat. It makes updating the styles difficult too, but it would be great to have page level granularity. So when the creative department comes down on you like a ton of bricks, you can change the blue to gold in a flash. (actually it was more of a amber-canary with a splash of wheat).
The trick is to do both. Start with a global stylesheet and define the most commonly used styles. Use good defaults: define all your font families and sizes; create classes for all of your sprites; and create all of the utility classes for floating and clearing elements. This will be the foundation for all of your future work.
Then create a set mid-level of stylesheets. You would include this one immediately after your global sheet. One for each section of your site. These stylesheets will be your work horses. This is where you setup your layout fundamentals for section.
And finally
On the pages that need it. Create page specific stylesheets. Included after your section stylesheet. So, now, when the client says that they actually liked the blue better. It’s now a 5 second change.
May 23rd, 2010 by AaronAsAChimp
Tags: CSS heierarchy stylesheets Posted in Ideas
No Comments »
A few days ago I was testing a soon to be released site. I followed a link I had never seen before and suddenly found my self confused and disoriented. In retrospect it could’ve been the fact I had just ran into a glass door on my way in (I totally didn’t see it there).
But, never the less, it lead me to tweet this:
Ice, Ice, Baby
The reason why I suggested that is not because of the severe “bling” deficiency on the internet. Which, I might add, is getting worse by the day. Its, also, definitely not because I just got laid off and really need a job (see my resume). Its because its just plain bad UI design.
Now, don’t get me wrong. There are a lot of reasons you want link to a specific part of a document, but the way browsers implement this functionality is bad. Fortunately this is an easy fix if you use the scrollTo jQuery plugin
$(function() {
$("a[href^='#']").click(function (e) {
var element = this.hash;
e.preventDefault();
$.scrollTo(element, 1000, {
offset: -50,
onAfter: function() {
$(element).css({"background": "red"});
}
});
})
});
March 29th, 2010 by AaronAsAChimp
Tags: anchors html javascript jQuery UI Posted in Sachimp Labs
No Comments »
Number.prototype.toScientific = function (x) {
var parts = this.toExponential(x).split( /[e]\+?/i ,2);
return parts[0] + ((parts[1] != 0 && parts [1] != 1)? " × 10<sup>" + parts[1] + "</sup>": "");
}
January 16th, 2010 by AaronAsAChimp
Posted in Quickies
No Comments »
So, with the release of PHP 5.3 some of the new features got me thinking about better ways to query and interact with data. I’m tentatively calling it bbQuery, or bbQ for short.
Data Driven Apps
Web applications are typically driven by data and interactions between it. A typical situation involves: Querying data from the database, formatting as HTML, outputting. A few years ago it was just that simple. Today you have JSON, RSS, and other various formats.
Going by the standard model, you have to create each page separately for all of the various formats, duplicating code. I can’t say I solved this problem entirely, but I’m getting close.
Grab the Steaks, It’s Time for a bbQ
The goal is to be functionally similar to SQL but include a formatting layer that intelligently determines the way to display the data. The following snippet show how the old model can be transitioned to bbQ.
$DB('Children')
->select('children_id', 'dob', 'fitness', 'status')
->format(function ($row) {
echo "${row['dob']} - ${row['fitness']} - ${row['status']}";
});
A simple example using the gFonted database. The first line selects the table from the database. On the second we select the columns we want in the query. The query results are then returned in to a callback from the format function. Very quickly you could create predefined formatting functions.
$DB('Children')
->select('*')
->left_join('Template', 'children_id')
->format(bbQuery::format_table); // predefined format functions
But thats far from automatic, intelligent maybe. Its impossible to guess what format anyone will need. There are a few generic formats (JSON and XML) that could be dealt with automatically.
$DB('Children')
->select('*')
->left_join('Template', 'children_id')
->limit(5)
->order_by('fitness', bbQuery::asc) // bbQuery::asc == "asc"
->set_type("application/json")
->format();
$DB('Children')
->select('*')
->left_join('Template', 'children_id')
->limit(5) // is a variable that gets overwritten
->order_by('fitness', bbQuery::desc) // order by's are string
->order_by('dob', bbQuery::asc) // and gets appended to
->set_type("application/xml")
->format();
Going the Other Direction
Sometimes its useful to put data into a database. I guess thats an understatement. Its also an understatement to say that doing so is a simple task. An example of standard data insertion:
$DB('Correct')
->insert_into('children_id', 'correct') // returns an insert object
->values(12, false);
However this could be greatly simplified. MySQL already knows the datatype for the column, so validation could be automated. The data could even be automatically inserted from a form.
<form>
<input name="children_id" type="text" value="12" />
<input name="correct" type="checkbox" />
</form>
<?
$DB['Children']
->insert_into('children_id', 'correct') // returns an insert object
->from_form();
?>
And finally some other useful snippets:
$DB->query("select * from Children")
->format(bbQuery::format_table);
$DB('test')
->create_table() // returns a create_table object
->column('test_id', bbQuery::id_column()) // id is special if set as a primary key, unsigned integer autoincrement
->column('test_foreign_id', bbQuery::id_column()) // just a unsigned integer
->column('test_char', bbQuery::char_column(10)) // field length as parameter
->column('test_int', bbQuery::integer_column(bbQuery::big), 0) // default as third parameter to column
->column('test_enum', bbQuery::enum_column('val', 'val3', 'val2')) // enum is varidaic
->primary_key('test_id')
->foreign_key('test_foreign_id', 'Correct');
$DB('test')
->alter_table() // returns a alter_table object
->add('test_timestamp', bbQuery::timestamp_column, bbQuery::now)
->drop('test_int');
$DB->query("truncate table test"); // format is not appropriate here
July 6th, 2009 by AaronAsAChimp
Tags: bbQuery php Posted in Ideas
No Comments »
Cosmic Sans, a font showing the planets to scale, is now available at GitHub.
If you are an artist, astronimer, or a space enthusiast you can help contribute. A list of desired space objects are at Google Docs. If your interested leave a comment, or just fork the get repository and send me a Pull Request.
June 5th, 2009 by AaronAsAChimp
Tags: "Google Docs" cosmic sans fonts GitHub Posted in Original Fonts
No Comments »