javascript posts

JS: ES Modules and Node bare specifiers via response rewrite

in

I’ve been playing with JS lately, including ES modules and building with Rollup, Babel, and Terser, along with other accessories. One thing I’m disappointed with of ES modules in the Nodejs ecosystem is dealing with third party imports. Using the “bare” specifiers that Node expects works fine in that environment and thus tools running in it (possibly needing helpers), but they don’t work at all directly in the browser. This is discussed in this post by Jake Archibold, for instance.

Import maps are one solution in the works, but that requires explicitly mapping every dependency, which could get complicated fast when dependencies have dependencies. It also is only in draft stage and only works in Blink based browsers currently.

I eventually gave in to the idea of having server code rewrite the paths in the js file responses to point to a symlinked node_modules folder, similar to what is mentioned in this post by the Polymer project. I created a PHP test server for one of my projects that does this.

Continue reading post "JS: ES Modules and Node bare specifiers via response rewrite"

Recaptcha and prototype.js conflict

in

One of Cogneato’s clients noticed that Recaptcha wasn’t working on their site. The checkbox wouldn’t check at all. I noticed that there was an error like “Unexpected token in JSON at position 0” in the browser’s console log. Since this was one of our really old sites, I figured it might have some sort of inadequate polyfill for JSON.parse(). I saw that the site was using Prototype.js, so I looked through the script to see if it was overriding that method, but it wasn’t. That did put me on the right track, though, to find the Stackoverflow answer that solved it for me.

Prototype was overriding the now browser standard reduce() method of Array.prototype with its own, incompatible functionality. The solution was simply to remove that method from the “prototype.js” file. We weren’t using the special Prototype functionality anywhere, so this didn’t cause a problem. If we were, we’d probably have to duck punch the browser’s functionality to handle both method signatures.

First play with service workers

in

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

in

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

in

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

in

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"