Project: PhotoHosting

Description

This is a very simple website offering uploading and sharing of 2 megapixel size photos, at a relatively high quality, social-media aware, and very hard to “steal”.

Motivation

A lot of free image hosting services are either overly ad-filled, or explicitly prevent uploading content which may be considered “NSFW”.

I wanted something less restrictive, less busy with ads (but still able to have ads on it), using some technologies which I would hope would facilitate fast I/O.

One principle was to try to always have the photo viewer coerced into visiting the website itself, as opposed to simply serving the image file.

This is accomplished by having the social media thumbnails relatively small, and a lower quality. Any attempt to actively open the image itself will always result in the webapp serving an entire page with the image embedded.

Technologies

I wrote this website is written in Java on the Apache Struts 2 framework accessing an HBase database.

Of the NoSQL databases, HBase seemed to be the only one which natively supports larger binary content, so it was a relatively easy option.

You can access the primary site here: https://photohosting.hostnucleus.ca/

To view an example of how the photos are presented: https://photohosting.hostnucleus.ca/show/cooked-chicken-on-white-plate-8de5b69c-020d-4480-addc-5d3af7013ba8.action

Project: Kalliope

Last year, I set myself the task of trying to actually produce a bunch of smaller web projects for s few reasons:

  • To learn some new frameworks
  • To illustrate my ability to learn there different frameworks
  • To showcase my skills in development in general

To that end, I thought I’d explain each project here in my blog, and the motivation behind each.

First up is Kalliope – https://kalliope.hostnucleus.ca

This is a “font server” with two primary end-goals – be able to arbitrarily upload a true type font, and have it produce web downloadable fonts, or to actively serve unlicensed fonts (in the same vein as Google Fonts).

The latter end-goal (as detailed above) was actually the primary goal on project inception – I wanted to have the ability to use a variety of fonts, but I didn’t want Google snooping the traffic on my sites (e.g. cookies, etc.). You can think of it as a replace for Google Fonts, really.

The other end-goal came about when the place where I worked had a client who had purchased some proprietary font, and wanted it used on their website. I didn’t want this font directly in the font server itself (as it requires a license), but all the leg-work had already been done to perform the conversion.

Interestingly enough, the original work on this was actually done for a completely different project – I had implemented a lot of the code within a project for generating print materials using SVGs. Since the SVGs needed to be displayable in all browsers, as well as the final PDF, I decided to use “FontForge” to do all the heavy lifting. It was only years later when developing a website where it occurred to me to break out the functionality into a separate web service.

It’s also a good project to learn and showcase the Grails framework.

Turning off Rails’ annoying “secret_key_base”

One of the most frustrating things with Rails is how they force shit down your throat when you don’t need or want it. Enter Rails “credentials” and their “securing” thereof. Where I work, we have no use for it. We don’t use Heroku or AWS. So why force me to set up a bunch of files or environment variables for something which I don’t want???

And setting “config.require_master_key = false” does not resolve the issue.

Well, here’s how I killed that filthy bitch:

In the file “/config/application.rb” add the following method:

There – now Rails can take their stupid “security” and shove it up their asses.

Alternative to Ruby’s const_defined? method

Today I wrote a bit of code in a base class which checks to see if a constant named “EXPORT_MAPPING” was defined. I’m not a Ruby expert, so off to Professor Google I go, and all the references I could find say to use the “const_defined?” method, thus resulting in the following implementation:

self.class.const_defined?(:EXPORT_MAPPING)

Now, since the intention here is to facilitate multiple levels of inheritance, I have a subclass called “ImageSlideshowComponent”, and a subclass of that “NivoSlideshowComponent”. ImageSlideshowComponent contains the EXPORT_MAPPING definition, with the intention of NivoSlideshowComponent simply inheriting it. Which is sort of does. We correctly see if it we do this:

NiveSlideshowComponent::EXPORT_MAPPING

However, invoking the following gives us “false”:

NiveSlideshowComponent.const_defined?(:EXPORT_MAPPING)

Clearly I’ve misunderstood the intention of the “const_defined?” method. It seems to only indicate if the class in question itself has defined the constant.

Here is the revised code block from the superclass which works correctly:

self.class.constants.include?('EXPORT_MAPPING')

Grails/Spring service autowiring

While working on a Grails project, I came across 2 interesting things:

  1. autowiring for domain classes doesn’t work, even if you follow all the instructions on how to enable it (either globally, or in the domain class definition itself)
  2. autowiring on abstract service classes doesn’t work (so if you’re implementing a data service with some custom functionality, your services won’t get autowired)

I’ve been able to fix both of these issues using a very simple utility class:

import grails.util.Holders

/**
 * Since Grails doesn't seem capable of autowiring into abstract classes, this
 * causes a bit of an issue when creating data services which do more than
 * just get/save.
 * 
 * All those context beans are available, so we just need to fudge the idea of
 * autowiring, and this class helps by providing a quick reference to the
 * singe long line required to get those Spring beans.
 * 
 * This also helps with domain classes, which have autowiring disabled, and
 * despite all the documentation saying the contrary, into which you cannot
 * autowire.
 * 
 * That said, this might prove to be a faster solution for use within domain
 * classes anyway since we don't have to worry about autowiring happening on
 * every object instantiation, but rather we just have a reference to the
 * singular instance with in the main context.
 */
class Beans {
	
	static def get(String name) {
		Holders.grailsApplication.mainContext.getBean(name)
	}
	
	static def $static_propertyMissing(String name) {
		get(name)
	}
	
}

Now, instead of setting up a service like this:

def myService

You instead define a getter method like this:

def getMyService() {
    Beans.myService
}

You can then use “myService” as you would’ve expected to under normal autowiring circumstances.

Gradle deployment script for Grails webapp

I haven’t had much success with finding useful deployment strategies and/or scripts for Grails anywhere. The extent of the documentation I’ve been able locate for deployment simply tells you to create a WAR and upload it to the servlet container.

Not terribly helpful if you want to run a formal process.

So, for my Grails webapps, I came up with this. I create a file in the “gradle” directory named “deploy.gradle” containing the following:

Also in the “gradle” directory is a subdirectory named “deploy” where I have the files specific to the environments to which I can deploy, such as “staging.gradle”:

Using the script above, I can deploy a particular branch from within my git repository to a specific environment thus:

It’s probably not perfect, but since I’m new to Gradle and Grails, I think it’s a pretty good start!

WordPress Shortcodes – My Way

As anyone whose work in WordPress whose tried to create their own shortcodes knows, it can be a nuisance. Trying to come up with unique names for the shortcodes so as not to cause conflicts, supporting nested shortcodes, etc., etc. It can be a challenge.

Instead of using functions, however, I’ve started using enclosures and classes. Such a class itself registers shortcodes which it can have embedded. And to overcome the actual shortcode tag itself conflicting – I’ve found you can “namespace” those, too. Here’s an actual example:

So, what we have here is a shortcode “sunsport:tiles:start” which creates an instance of our class. That instantiation registers a new shortcode “sunsport:tiles:create”, which would be unavailable otherwise, thus we avoid have to check to make sure it’s properly enclosed in a parent “start” shortcode, and we gracefully deregister it at the end of the run.

It’s probably worth include the “fragments/tiles/start.php” file just for reference:

And here’s the actual usage:

There’s is one word of warning – do not do a naming convension like this:

  • parent shortcode – sunsport:tiles
    • child shortcode – sunsport:tiles:create

The child shortcode will never fire. For some reason, it seems WordPress doesn’t actually read in the full shortcode in this scenario – instead of “sunsport:tiles:create” firing, WordPress will simple re-run “sunsport:tiles”.

That caveat aside, I find this feels a lot cleaner and less collision-prone than other examples I’ve seen.

Another “WTF?!” IE9 Bug

With Internet Explorer’s complete lack of support for any of the neat and useful CSS styles, one always has to revert to Microsoft’s disgusting “filter” hack. The filters don’t take in very many useful parameters (such as color stops in gradients) and disable text anti-aliasing. 

But here’s something you probably really didn’t see coming – under IE9 only (this doesn’t affect IE8), filters completely cripple events. If you define any mouse over or even click events, they will not fire.

This created a situation where I could no longer use a horizontal sliding accordion, because IE doesn’t support text rotation and uses a … you guessed it … filter.

I hate Microsoft so much … so very very much …

XMLSerializer for Internet Explorer

While trying to convert a jQuery element object into a string, I noticed that all the major browsers support “XMLSerializer”, which does precisely that task. Of course, Internet Explorer is the exception. However, IE does offer the “outerHTML” property on DOM elements, which seems to do the same thing.

I herewith present an extremely short JavaScript snippet which allows global use of XMLSerializer

Is It Time For More SVG?

I’ve always been a proponent of SVG, even back when everyone was gung-ho with using Flash for every little thing, whether it was a good idea even back then or not.

However, recently I’ve started thinking that perhaps it’s time to start taking it a lot more seriously. With the obvious demise of Flash as a main-stream RIA choice; greater support in all the major browsers; and with Apple pushing Retina displays on their laptops as well as tablets, I think it’s time to start moving away from pixel-defined websites and raster graphics to using “em”-defined websites and SVG graphics.

The combination makes perfect sense – it’s clear you cannot rely on website layouts which are strictly defined using “px” unit-of-measure – that would result in a website being 1000px wide (a good idea if you want to support 1024 x 768 screen resolutions) looking ridiculous on ultra-high resolution displays (such as retina). The obvious problem then becomes fitting graphics in PNG and other raster formats into this different unit-of-measure. Sure, you could scale the graphics image, or have several versions of it and try to detect the screen resolution, but all of that becomes moot if you use SVG, which by it’s very design will scale up and down without pixelation.

What I find interesting is that Sun saw the writing on the wall (even before they were taken over by Oracle) when it comes to greater resolutions, which is why the “Nimbus” look and feel for Swing was specifically designed using vector graphics and not bitmaps/raster images.

As with everything in web programming, however, you’re always stuck with users refusing to upgrade their version of IE to something even vaguely useful (I’m talking IE9 at least), or moving onto a better browser. I wonder if perhaps as an industry we (as programmers, business people, scientists) need to drag consumers along, kicking and screaming. Imagine, if you will, if 90% of all major websites dropped support for IE8 and below tomorrow morning. Users would have no room to complain, and would simply be forced into upgrading. No more “why can I use IE6 on my bank website, but not on your website?”

Bliss.