javascript posts

First play with service workers

I started playing with service workers as a client side cache manager a bit tonight. I’m using this Smashing Magazine article as a guide. I’ve been reading a bit here and there about them, intrigued by their role in making web sites installable as apps and their ability to allow sites to function even while offline. However, my site’s current lack of pages and other priorities plus the learning curve and things that have to be done to set them up kept me from playing with them until now.

Workers require HTTPS, unless, luckily, you are serving from localhost. I had to modify my local app install to use that instead of the more site-indicative name it was using. They also require placement at or above the path level they apply to, or theoretically a Service-Worker-Allowed header, though I was unable to get that working. I’m assuming this is for some security reason. Because my file is stored in a Symfony bundle and because I am serving multiple sites with the same application, I didn’t want an actual file in my web root. I made a Symfony route and action that passes through the file, like:

Continue reading post "First play with service workers"

Konami easter egg

What web developer’s site is complete without an easter egg? Until today, mine didn’t have one, but I had long wanted something. Since I was struggling to make forward progress on what I had actually wanted to work on this weekend, and had just been reminded of the Konami Code, I decided it was finally time to add one. I had seen a friend do a key sequence easter egg on a site he built a while back, which had put the idea in my head. The Konami Code sequence has been used on several websites already (Digg and Vogue are two examples I could get to work), so why not mine?

A simple Konami Code script:

Continue reading post "Konami easter egg"

Parallax Background Images

Recently, I made my first foray into the popular parallax on websites fad. My needs were simple: I needed to make background images move at a different rate than the content that sat on top of them when scrolling occurred. This was the first type of parallax I saw on the web and the most intriguing to me. I figured that there would be a lot of already built libraries to make this easy. Looking through the parallax libraries though, the most popular ones were quite complex or didn’t do what I wanted. I did find a couple of scripts that just handled the background image parallax, but I had some problems getting them working, and they didn’t work with vertically centered images.

In the end, I took ideas from those scripts and some articles to create my own parallax script. With my class library removed, the script would look like the following:

Continue reading post "Parallax Background Images"

tmclasses: my javascript class library

I’ve decided to take my JavaScript class system out of my more general JavaScript library, tmlib. It can now be found in my js-tmclasses repository. I felt it needed to be separated to make it easier to work on without the clutter of all of the other functionality in tmlib. It also will be easier for others to make use of, not being buried among a bunch of other junk and not having all of that junk in the default build file. This decision was made easier since I converted to using require.js a while back. I can include tmclasses in a vendor folder, pull into tmlib and attach everything to the same places in tmlib to provide the same interface as before, and it is basically the same as it had been usage-wise. The build is slightly heavier, but that is partly due to duplication of methods that I will eliminate or limit.

tmclasses is a fairly simple class system so far. It provides a method for creating ‘classes’, which in JavaScript are basically functions with properties attached to their prototypes. The feature set is basic, but I intend to add more to it to get some of the niceties of Qooxdoo’s class system. I like a lot of things about Qooxdoo’s class system, but found it hard

Usage

The heart of tmclasses is the create method. It is passed an argument with all of the configuration to create a class.

Continue reading post "tmclasses: my javascript class library"

Responsive: Turn Image Maps Into Selects

I’ve been doing quite a few responsive sites since I first started into them. I like doing them. They are fun to build, requiring new techniques and a different way of thinking to handle different situations. I like the concept and I like looking at the sites. One recent fun thing was dealing with an image map (on this page). Scaling the image and coordinates would be a pain and very expensive. An alternative option is to replace the image with a select drop down when the screen is too small for the image.

Breakpoint detection

I don’t remember where I found this method of dealing with breakpoints in JavaScript, but I’ve been setting the line height on the html tag with media queries and reading it with JavaScript to determine which breakpoint I’m in. This works with the ’em’ based breakpoints I use. I convert the numbers to more descriptive names, such as ‘small’, ‘medium’, and ‘large’. It looks something like this:

Continue reading post "Responsive: Turn Image Maps Into Selects"

TMLib meets Require JS

I’ve recently been working on reorganizing, cleaning up, and improving my javascript library, TMLib. This has included folder reorganization, source cleanup and normalization, a (so far crappy) build system, adding unit testing, a (mostly still unused) class system, etc.

My most recent effort has been to bring in the use of Require JS. Require is an AMD implementation, which is an interesting extension of the module pattern. It takes the dependency injection part of the module pattern (ie passing variables the module will use as arguments into the function expression) a step further by handling auto loading of those modules with a script loader that will asynchronously load and run all dependencies for a module before running the dependent module, injecting the dependencies as either parameters or assigned variables. Require does this with names based on file path, sort of like a JS equivalent of PSR-0. Require also provides a build process that will combine all required module files into one and minify. I have not played with this yet, but am hoping it will take over my currently crappy build process.

So far, I’ve only converted over a small core part of my library, but I really like the direction it is going. The scoping/dependency wrappers around each module may add some bulk, but will also allow minification of all module dependencies and what not, so it may end up being insignificant in the build, especially since my current build process doesn’t involve much minification. Even if it ends up a bit larger than it could be, the development benefits outweigh that concern for me. It has also required a change in the way I construct my library pieces. The early pieces require being constructed in a certain order, and things don’t work as well when modules to depend on each other. But I think it will be really nice when I get the full library converted over and the build process figured out.

Continue reading post "TMLib meets Require JS"

JavaScript: Callable namespaces and other namespacing options

It is a good practice to not pollute the global “namespace” (ie window in browsers) when creating JavaScript code, especially if it is to be reusable, to avoid collisions with other bits of code that may be used on a page. It is common to use objects as namespaces. You can say window.myLibrary = {} and then add whatever you want to that object with confidence of no collisions with other libraries as long as myLibrary isn’t taken. Larger libraries will often have a namespacing function that will manage the creation of these namespaces, allowing them to be accessed if they already exist or created and then accesed if not, and easily handling multiple levels of depth. A simple example may look like the following:

namespace = function(_namespace, _scope){
    if(!_scope){
        _scope = window;
    }
    var _currentScope = _scope;
    var _identifiers = _namespace.split('.');
    for(var _i = 0; _i < _identifiers.length; ++_i){
        var _identifier = _identifiers[_i];
        if(!_currentScope[_identifier]){
            _currentScope[_identifier] = {};
        }
        _currentScope = _currentScope[_identifier];
    }
    return _currentScope;
}

Then you can do something like:

ns = namespace('myLibrary.mySubNameSpace');
jQuery.extend(ns, {
    'component1': function(){}
    ,'component2': function(){}
});

I’ve been doing the more manual approach for my library, but have been desiring for a while to get more organized and streamline repetition by adding my own namespace function. I got to thinking about doing more with the namespace objects, so that they can perform operations on themselves once created. For example, they might be able to create and return sub-namespaces as well as easily extend themselves.

Continue reading post "JavaScript: Callable namespaces and other namespacing options"

#Page top