A few years back, to make my site more festive for Hallowe’en, I made a script to have ghosts move around my web-page. I based it on my snow script for winter / Christmas, using the basic structure, reducing the number of moving objects, and changing their movement to look better for ghosts. I meant to post about it. This year I decided to break it out into its own Github repo, which led to me refining it and cleaning it up somewhat. See the ghosts.js repo and the ghosts.js demo.
Continue reading post "Ghosts.js"javascript posts
JS: ES Modules and Node bare specifiers via response rewrite
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.
Recaptcha and prototype.js conflict
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.
Javascript: Submit form with overridden submit method
I come across the situation occasionally where I am trying to submit a form programmatically with javascript, but it happens to contain a field with an id or name attribute of submit.
Website Snow Script
I finally built a snow animation for my site to celebrate Christmas.
Continue reading post "Website Snow Script"First play with ES modules, rollup, webpack
I played with ES modules, rollup, and webpack on my site for the first time over the weekend.
Continue reading post "First play with ES modules, rollup, webpack"Opera Mini now supports fixed position (sometimes)
Looks like an update to Opera Mini brought support for position: fixed at last (in high savings mode, or sometimes extreme). I’ll finally be able to remove my JS test for it.
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:
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"