Jico Baligod

LESS extends suck

2012-12-02T00:00:00-05:00

CSS preprocessors such as Sass and LESS provide a really great way to modularize and reuse our CSS properties with the @extend concept. Extending essentially allows us to inherit properties from another existing selector. This is especially powerful in Sass, as it merely modifies the extended CSS declaration. So something like:

.foo {
  background: #000;
}

.bar {
  @extend .foo;
  color: #eee;
}

Outputs the following:

.foo, .bar {
  background: #000;
}

.bar {
  color: #eee;
}

Stupidly simple and highly efficient.

Where LESS does less

We can do the same thing in LESS:

.foo {
  background: #000;
}

.bar {
  .foo;
  color: #eee;
}

But notice LESS doesn’t use an @extend keyword, instead we just drop in the selector. The funny thing that’s not so funny is, we use periods to include LESS mixins as well, which can make our LESS code pretty convoluted. So what happens when we have a class and a mixin called foo? It turns out that both the foo mixin is included and the .foo class extended. Obviously this conflict will only occur when extending classes, but that’s likely 99% of the time. Granted we should probably avoid situations like this, but still, yikes.

One other disadvantage of LESS extends is in the way it inherits the extended properties, which is by simply copying those properties into the extending block. The above LESS code will output the following:

.foo {
  background: #000;
}

.bar {
  background: #000;
  color: #eee;
}

Still stupidly simple, yet not so efficient. For small projects with minimal CSS, the extra generated output is negligible. But imagine a large project where we want to modularize our CSS for easy maintainability and updates. Extending large classes would keep things very clean, but the output of these extends may add unnecessary weight to your CSS files.

automata

2012-05-11T00:00:00-04:00

The Gem

As a final project for my Theory of Computation class, I worked with Lukas Sabota in writing this fine Gem for creating a number of types of automata, including:

Deterministic Finite Automata (DFA)
Nondeterministic Finite Automata (NFA)
Push-down Automata (PDA)
Turing Machines

These automata are formally defined by n-tuples, and as such we can build them by defining their corresponding instance fields in one of two ways: individually through setter methods, or through a structured YAML file. Once we’ve built our automaton, we’re then able to feed it input and evaluate the output.

There’s a ton of documentation available at the following:

But wait! There’s more!

To make our Gem and its features more accessible to non-Rubyists, non-programmers, and other students, I spun up a little web interface for it at automata.byji.co. You’re able to build an automaton by defining its features via YAML structure. Once you’ve built your machine, you can then feed it input and evaluate its output.

avcado.com

2012-05-10T00:00:00-04:00

Overview

Shortly after getting into web development, I made a number of websites for some clients. Once their site was built, I would set up their domain under their own account at a registrar, and I’d push their site onto a cheap, shared host, also under their own account. I thought this was great! I could focus on other things without having to worry about managing their websites, and my clients weren’t paying much to keep their site up and running.

It turns out this wasn’t the greatest set up after all. When I needed to make a change on one of their sites, it was a huge headache trying to push an update when the server constantly timed out, or better yet, threw me a 500 error while I couldn’t do anything about it. But I guess you get what you pay for.

To make things easier for both myself and my clients, I decided to build avcado. The goal in building this is to abstract all of the technical details of running a website, from domain registration to hosting, for a minimal fee (just enough to cover my expenses). The benefit to me is that I have full control of my server, and hence the ability to make updates quickly and easily. Avcado is the web portal for my clients to view their site’s analytics, as well as manage their billing information.

Metrics

Everyone loves graphs, it’s a fact. Clients want to see how their website’s performing, and they want to view this data easily. I recently discovered Gauges (now acquired by GitHub) and absolutely love their service, so I decided to plug into their API and bring their wonderful analytics data to my clients through avcado.

I create a new Gauge and and add it to each website I make. A step-by-step process walks through creating a new client account on avcado. During this process I can add a new domain or choose an existing one, automatically create a new Gauges API key, and then choose the corresponding Gauge to connect the website to. Just like that, my client has access to the following metrics from Gauges:

Traffic
Content
Referrers
Search Terms
Search Engines
Locations

Most of the data is read well enough in tabular or list form. But there are a couple metrics that can be enhanced with a chart or graph, such as the Traffic and the Search Engines metrics. Using Rickshaw, a graphing toolkit by Shutterstock built on d3, I can create a nifty interactive chart for traffic analytics to show the number of people and views for each day in the current month. As for the Search Engines metric, I use RGraph, an HTML5 Canvas based graphing toolkit, to generate a little donut chart of the search engines split.

A map for the Locations metric would be super useful. I’m working on that.

Billing

Payments, subscriptions, and invoicing has been made incredibly easy thanks to Stripe. Using their awesome API, I can even create new subscriptions, coupons, and invoices right from the avcado admin section. Aside from making payments simple, my clients' payment information is also secured, since I don’t need to worry about storing it on my own servers.

Katie Boyd Photography

2012-04-15T00:00:00-04:00

About the artist

Katie Boyd is a photographer and Fine Arts student based in New Jersey. She’s keen on shooting surrealist, conceptual photography, but you can also find her snapping portraits, landscapes, and the like. Aside from working the camera, she also enjoys making paper sculptures from books and has recently taken up some graphic design projects on the side.

On the website

With her senior project finished and on display at The Richard Stockton College of New Jersey, we decided it was time for a major redesign of her website. We had an HTML5 canvas-based website in the works for some time, but we scratched it and started new. This website is the culmination of a couple long nights of hacking, just in time for her Senior Project Exhibition reception.

Notable features

Aside from serving as a portfolio, Katie’s website is also an experiment of some of the latest CSS features, with a little Javascript goodness baked in. Some of the neat things about this website:

The front book cover is built using CSS 3D transforms to construct the front, inner cover side, and edge.
CSS transitions + CSS 3D transforms are used to achieve a 3D opening for the front cover. No 3D glasses required (unless you want to wear them, I won’t stop you).
The postcard and polaroid tucked under the book are clickable. They use CSS animations to slide out and center. The top navigation bar also initiates the same animations respective to each element.
Images and photosets are hosted on Flickr. They’re automatically pulled at start and arranged by photoset as a menu on the polaroid. We used Fancybox for a rockin' lightbox gallery.
We integrate some sweet browser history features. Navigate through the site and try hitting your browser’s Back button!
The different page sections are bookmark-friendly. Hitting http://katieboydphotography.com/#gallery will automagically pull up the Gallery section for you. Neato.

Browser support

The site uses some new CSS3 features to achieve a pretty sweet interactive experience. You’ll need to view the page in a modern web browser, such as the following:

Chrome
Firefox 10.0+
Safari 5.0+
iOS Safari and Android browser 3.0+ (Supported, but not tested on touch devices yet)

Unsupported browsers get redirected to the old version of the site, which you can still check out here. A new fallback page is in development for better degradation with unsupported browsers.

Git Info in Rails

2012-03-27T00:00:00-04:00

Initializer

When developing a Rails application (or any app) with Git, it’s sometimes useful to see which branch or commit you’re currently on. You can initialize some global constants pretty easily in Rails by creating a file under your config/initializers/ directory. I like to make a single file with all of my application-wide constants in config/initializers/global_constants.rb, but you can also split it up into specific files like config/intializers/git_info.rb for example.

Git information

To get your current branch and commit information, just stick this in your initializer file:

# Get branch information
GIT_BRANCH = `git branch`.split.last
GIT_COMMIT = `git log | sed -n 1p`

If you come across some color codes in the output, you can strip it out like so

# Strip out color codes
GIT_COMMIT = `git log | sed -n 1p`.gsub(/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[m|K]/,'').split.first

Tags and versions

A great feature of Git is tagging, which is typically used to tag version numbers, feature releases, and patches. An annotated tag is probably the simplest way to tag the current or any specified commit. For example:

# Simple annotated tagging
$ git tag -a v1.0.0 454ef4d -m 'Initial public release!'

Note that you can drop the 454ef4d commit specification, which would then just tag the current commit. You can also sign your tags with GPG using the -s option instead of the -a option. If you’re on GitHub, you can push your tags using git push --tags.

If you’ve been tagging along, a neat thing you can do is to display the latest version number or release in your application. Again, we can do this by creating a global constant

# Get latest tag information
APP_VERSION = `git describe --tags`.strip

which will output something similar to v1.0.0-1-g6a9ee26. The format here is [tag name]-[# commits ahead]-[current commit]. This might be useful in a development environment, but you might want to strip it down to just the version number or tag name in your production app:

# Get only tag name
APP_VERSION = `git describe --tags \`git rev-list --tags --max-count=1\`
`.strip

Now you can print the APP_VERSION or any of the other constants out in one of your views, like your site’s footer, and make your app feel super official.

yawn

2012-02-22T00:00:00-05:00

I’m somewhat of a night owl. Lately I’ve found myself staying up later than usual, which I wouldn’t mind too much if I didn’t have morning classes everyday. It’s a little difficult to try to increase my quantity of sleep every night, so I opted to try to improve my quality of sleep every night.

Enter, Sleepytime

A nifty site popped up a short while ago on Hacker News called Sleepyti.me, which helps you determine the optimal times to fall asleep or wake up, based on the notion of 90-minute sleep cycles. Essentially, we fluctuate in and out of different sleep phases categorized by levels/patterns of brain activity, from light REM sleep to shorter time periods of deep sleep. Waking up during this deep sleep phase is no bueno, and leaves you feeling tired and groggy. So the goal here is to wake up between sleep cycles, at which you’ll feel more energized and replenished.

I vaguely remember this discussion in my Intro to Psych class, and sounding convincing enough I thought I’d give it a whirl. I’ve been getting into the habit of hitting up Sleepyti.me when I’m ready to go to bed to find out when to sleep/wake up. So far it’s turned out to be great, as I feel pretty recharged even after those super late nights.

yawn

Am I boring you? Fine, I’ll get to the point! Check it. I’m usually always on the computer right before I hit the hay. Sleepyti.me has become pretty routine after the past couple weeks, so I thought, “Wouldn’t it be great if there was a Sleepyti.me shell script?”

Yeah! Thus, “yawn” came to fruition in between classes. It’s a simple shell script with the same function of calculating optimal sleep/wake times on the basis of 90-minute sleep cycles. No mouse clicks, and you save like, 3 seconds.

When should I wake up?

Good question. Just yawn and you’ll know right away!

Wait. What if I want to wake up around 7am? No probs, just yawn and it’s on! Erm… I mean, you can find out the best times to go to bed.

Sweet! All the output times account for the average time to fall asleep (14 minutes). So if it says you should go to bed at 10:00pm, then it assumes you’ll be asleep in around 14 minutes. No need to make adjustments. If it takes you longer (or shorter) to fall asleep, you can adjust the time in the script!

That’s all there is to it for now. Kudos to Sleepyti.me for the inspiration. Check out the source on GitHub.

Brand spankin' new

2012-02-20T00:00:00-05:00

New year, new home

Page, that is. This must be the third redesign of my website in the past year. You heard right, THIRD. “But this is the one,” I always say. False. I keep scrapping and rebuilding this darn site. It’s not that I thought the old versions were bad, they just could be better. Hence, this latest redesign: stronger, better, faster.

Is that a blog I see?

Yes, it is, thanks for noticing!

Aside from my insatiable appetite for changing my home page, the main purpose of this latest iteration was to launch not just a splash page but also a blog. I’ve been wanting to blog about more than memes and cat gifs (I less than three you, Tumblr), specifically about my latest findings, projects, hacks, and other snippets I feel like sharing. Not only do I push content out into the Web, I also benefit by gaining a better understanding of what I write about, more practice expressing ideas clearly and concisely, and a neat log of milestones in my development career.

Dr. Jekyll

I had a tough time choosing which blogging platform to host this site on. It eventually boiled down to Tumblr and Jekyll. The appeal of Tumblr came from the fact that I was already always on it, which I felt would have motivated me to blog more. It also has a pretty simple editing and publishing platform, not to mention easy theme rolling.

I started developing the new site on Tumblr for some time, then stumbled across Jekyll. After some contemplating, Jekyll seemed to be the better solution for the following reasons:

I get to own, manage, and completely customize my posts, data, etc.
Jekyll builds static pages, which I can serve up really quickly.
Markdown is awesomely simple!
I can roll my own publishing and deployment methods.

The last point has turned out to be the coolest. Working at Linode for the past few months, I’ve grown to love the command line. A lot. It’s oddly exhilarating to be able to draft a new page with a rake new:post and publish it with a simple rake publish && rsync.

I’m looking forward to writing more and building out this site’s content (as it’s pretty empty right now). As for the design, I think it’s here to stay, at least for a little while. I can’t promise I won’t be making a few tweaks here and there.

P.S. You can view the source on GitHub! Feel free to do what you want with it. I’d appreciate if you didn’t copy it exactly though.

Marie Elaine Lanza

2011-09-26T00:00:00-04:00

Marie Elaine Lanza is a ceramics artist based in Cape May Courthouse. She designs and produces functional earthenware pottery out of her home studio and showroom. Her work is an exemplified display of brilliant colors, aquatic visuals, and calligrophic strokes of paint.

Her website is an embodiment of her work, from the contemporary style to contrasting palette and typefaces. A touch of javascript adds some dynamic elements to the pages and a slight modern feel. The website also acts as her online storefront, offering the pieces featured for sale either through PayPal or a custom request form. A custom backend administrative system also gives her nearly complete access to modify and update copy, gallery items, and more.

Genie Salon

2011-08-24T00:00:00-04:00

The Genie Salon and Spa is a full service salon located in Brigantine, NJ. Their website provides business details in a contemporary setting, while maintaining some modern features. The single page site relies on Javascript/jQuery and a touch of CSS3 to create smooth background and section transitions. Their Services and Team sections feature tiered-column layouts for easy navigation.

Jacqueline Boyd Fine Art

2011-05-12T00:00:00-04:00

Jacqueline Boyd is a fine artist based in Brigantine, NJ, who works prominently with oil and acrylic to create pieces of painterly realism to abstraction. She recently opened her own studio in Brigantine, which is one of a kind in South Jersey. The Jacqueline Boyd Fine Art Studio functions as her working studio, as well as a venue for art shows, classes, and other events.

The website serves as both a gallery for her work and her studio page. It features a full back-end administration system that allows her to add/update classes, events, and exhibitions, as well as modify pieces of text including studio info, her biography, and others.

ATCLP

2011-05-04T00:00:00-04:00

The ATCLP was a semester-long, group project for Stockton’s Software and Security Engineering I course, in collaboration with the Federal Aviation Administration. The FAA’s Human Factors Team – Atlantic City, conducts research to ensure that systems that include human operators and maintainers perform as effectively and safely as possible. They employ advanced virtual reality simulations for air traffic controllers to interact with, however, the commands are interpreted by behind-the-scenes human controllers, who take the ATC commands and manually enter them into the VR system.

The goal of this project was to develop a system able to take a transcripted ATC command and interpret it to return the recipient, instruction type, and parameter. Our team successfully developed the system over a span of three months. At the end of the semester, our ATCLP was implemented with CMU’s open-source Sphinx voice recognition software, along with the FAA’s air traffic simulation system. The resulting system took Voice to Text to a valid ATC command that could be understood by the FAA’s software.

fflocks

2010-10-27T00:00:00-04:00

fflocks is a web service that pulls the latest images from the public Twitter timeline into a photostream. It queries Twitter’s Search API for tweets containing links to Twitpic, yFrog, Plixi/Lockerz or Twitgoo, then uses the appropriate service’s photo API to deliver the source image. Tweets on fflocks only go as far back as 48 hours.

Aside from the photostream users can search through recent images, and view the album of any public profile. To view someone’s fflocks album, simply go to fflocks.com/username. Photo albums sift through the user’s tweets for any supported image links, and loads each photo and tweet into their album.

fflocks spawned from a 4-hour hack and was built with PHP, jQuery, and of course, the Twitter API!

Oh no!

The site’s not in service at the moment (how sad..). I might be sticking it in a project archives page sometime soon.

Katie Boyd Photography (v1)

2010-09-08T00:00:00-04:00

Katie Boyd is a Fine Arts student and photographer based in South Jersey. She primarily shoots conceptual images, but is keen on snapping portraits and even her self-made paper sculptures from time to time.

First!

After taking my first programming class and being exposed to the wonders of code at the start of 2010, I decided to dive head first into web design and web development over the summer. I needed a project to work on to better understand things. Luckily, my girlfriend wanted a web portfolio and was kind enough to let me develop one for her absolutely free of charge!

After pouring over Internet references, tutorials, and a couple books, I cooked up my first ever website and launched it on a super-cheap, shared web host. The site was crafted using valid XHTML 1.0 Strict, a little CSS3, and jQuery for some subtle cloud-moving action, as well as the gallery (using the awesome Galleria plugin).

The site-wide graphics were done by the artist herself. Check out Katie’s work by visiting her gallery.