Federman Scripts

PHP, JavaScript, and More

An Academic Approach to Optimizing CSS

Recently, I finished my undergraduate honors thesis in computer science entitled, “Applying Formal Concept Analysis to Cascading Style Sheets.” It’s a successful attempt at optimizing CSS using a technique called Formal Concept Analysis. Note that this is not a minifier! This algorithm analyzes the structure of the code and makes optimizations on the structure, not just taking out white space and other syntactic “fluff.”

From a very high level, the algorithm rearranges and restructures selector-declaration pairs into different rule blocks and groups selectors and declarations in different ways. Unfortunately, specificity can get nuked sometimes, so the results should be tested to make sure they are still correct. Also, there are multiple ways to run the optimization, each of which produce very different results, so some thought and analysis is still required when using the algorithm to determine which results work best for the particular input.

One noteworthy result is that I ran the algorithm on a very large (150+ kb) file from a real website and the file was reduced by about 20%. On the other hand, optimizing some CSS files with certain options can also increase the file size. Again, additional analysis is needed both before and after the algorithm is run to get ideal results.

Downloads

Paper: Download PDF

Slides for Talk: View (Note that the slides are web-based, so positioning for some diagrams can be a bit off)

This paper really just skims the surface, and if I were to continue on to graduate school, I would definitely have plenty of room to expand and improve the methods I used for this research.

Soon I’ll get around to making the Java implementation I created public and create a nice little interface for running the algorithm on user input. Ideally, this tool could be used in addition to minification to “compile” CSS, just as JavaScript can be minified and obfuscated to produce smaller file sizes.

AJAX Form

This script will give a form on a page (or multiple forms) the ability to send off an email once complete. Zero Javascript is required on the implementer’s part, and very minimal edits need to be made to the PHP. Basic validation can be enabled, and this form is resistant to spam bots since it works off AJAX (and thus Javascript, which most bots have disabled). All the different input fields should work (text box, checkbox, drop downs, text areas, password fields, etc) except for file uploads, which I’ll probably handle in a later post.

Example: here
Source: ajaxForm.php

Although the source file is a PHP file, it needs to be included in the HTML as if it were a Javascript as shown in the example.

Note that there are two variables which should be edited by the implementor, both of which are at the very top of the file: $to and $from. These (pretty self-explanitorily) variables are the email addresses which the email is sent to and from. Note that the $to field may contain several email addresses separated by commas. This should be the only edit to the PHP/Javascript code that needs to be made.

In your HTML, add the “ajaxForm” class to your form(s) which you want to use this script. Note that the Javascript will overwrite the “action” property of the form, but this shouldn’t be a concern in most cases.

Two hidden fields should be included, “ajaxFormSubject” and “ajaxFormCompleteDiv”. ajaxFormSubject is the subject which you wish the email to have. ajaxFormCompleteDiv is the id of the HTML element you wish to display (display: block) after the form is successfully complete, like a “thank you” div. Note that if you want the ajaxFormCompleteDiv to be hidden initially, you should hide it with your own CSS. This is for flexibility.

After successful form completion, the form element will automatically be hidden (display: none) and the ajaxFormCompleteDiv automatically shown (display: block).

To enable validation for a field, add the class “required” to the field. The validation only consists of checking if some value was entered.

If a field is found to be invalid, the input, select, or textarea will be given the class “ajaxFormError”. You should add your own CSS to determine the style of this.

This code is meant for designers or developers with little to no programming experience and satisfies this requirement quite nicely as only 2 PHP variables should be modified and the rest is in the HTML.

Sortable Table

This article will describe a javascript which will make any <table> sortable on all columns.

Update: Thanks to a comment to this post, I corrected a problem with Firefox. I am now using textContext for non-IE browsers as it’s more widely supported.

Update 2: I’ve written a follow up to this article adding additional functionality not mentioned in this article.

Source: sortableTable.js

Example: Example

Here is an example (the above link will be better for looking at the HTML source):

Name	Age	Email	Phone
Jon Doe	21	jon@doe.com	111-111-1111
Joe Bob	20	joe@bob.com	222-222-2222
Fake Guy	25	fake@guy.com	555-555-5555

With the javascript included, the table needs to have class sortableTable, exactly one <thead> with exactly one row, and exactly one <tbody>.

To make a particular column the default sorted column (it’s be sorted upon the initial page load), add the class defaultSort to the particular <th> in the one row in <thead>.

The javascript also automatically adds the classes even and odd to the even and odd numbered rows for ease of styling.

The sorting is done based off of the ~~innerText~~ textContent of each cell, so if the cell contains HTML and you are expecting it to sort in that way, it may be sorted differently. For example, if one cell had <a href="federmanscripts.com">Z</a> and another had <b>A</b>, the cell containing “Z” would be before the one containing “A” if ~~innerText~~ textContent was used, but with ~~innerText~~ textContent the “A” would come first, as expected by the user. In short, the displayed text in the cell is what the column is sorted by.

Federman Scripts

Recent Posts

Categories

Archives

Request Script

Donate

An Academic Approach to Optimizing CSS

AJAX Form

Sortable Table