I've been tinkering with tmi.js (Twitch's messaging interface) in node as of late, and it occurred to me: the library works in the browser, as well! With this in my back pocket, I went off and built a tiny little chat bot as an …
Tagged: javascript
A chat bot in your browser
Tags:Track change events for YouTube with MutationObserver
Tags:Have you ever wanted to react to events taking place on a web page, but they aren't capital-e Events that you can catch and handle? I was in this situation recently, where I wanted to grab the current video and chapter titles to display …
Vue.js long-press directive
Tags:I was looking for an easy way to incorporate the "long press" event so popular in mobile UI into a web project of mine. In my searching, I came a cross a Vue directive that claimed to do the trick. Well, it certainly did, but I …
Minifying Javascript using ESBuild with Flask-Assets
Tags:I've been using Flask and its Flask-Assets package (which is a wrapper around the webassets package) for quite some time now without issue, but recently, I've been scratching an itch for ES2016 and beyond. One of my favorite features of …
Nexus Clash UserScripts
Tags:Carrying on my rich tradition of shoehorning quality-of-life improvements into PBBGs, I've created a couple of UserScripts for the Nexus Clash browser game. The first is an improvement to the Pets management panel which color-codes pets …
Tail for browser windows
Tags:Have you ever been watching log output via a web application, and you just want your browser window to jump to the bottom of the document whenever new output shows up? Well, stranger, let me tell you, I certainly have. That's why I wrote …
UserScripts for Urban Dead
Tags:Several years ago, I wrote a series of UserScripts for a persistent, browser-based game (PBBG) called Urban Dead. These scripts tidy up the user interface a bit and add some new features to the game that make quality-of-life improvements …
repo2site: Make a web site out of a git repo's MarkDown files
Tags:I've just finished the initial work on a script that will make a full-HTML website, driven by AJAX, out of the MarkDown (*.md) files in a git repository. It's currently geared toward GitHub, but could easily be adapted to other repository …
ASP.NET/C# image resizer for responsive layouts
Tags:I will probably elaborate on this a bit further when I find some more time, but for now, this post is going to be mostly code. What I have here is a relatively simple way to generate images that are resized server-side based on the screen …
jQuery visibility pseudo-selectors
Tags:To help me with a project at work, I've written two jQuery pseudo-selectors which will help determine if an element is currently in the viewport or if it has been reached during scroll. This can be incredibly powerful if you're looking to …
SVG polyfill in pure Javascript
Tags:A designer at work pointed out this SVG polyfill as a candidate for our new production site. While I like the elegance of it, I was a bit disappointed that the author felt the need to include jQuery as a dependency simply to use its …
Give-Me-Coins.com Condensed UserScript
Tags:Lately, my interest has been piqued by cryptocurrency. After discovering that my ATI card could produce a decent hash rate without seriously spiking my electricity bill, I got specifically interested in Litecoin. Long story short, I …
Mozilla's TogetherJS in a bookmarklet
Tags:Mozilla recently introduced TogetherJS, a succession of their TowTruck service. Being that it is so similar to TowTruck, I went ahead and made a bookmarklet for it.
Truck It!: Mozilla TowTruck in a bookmarklet
Tags:Mozilla Labs has this really nifty, Javascript-based collaboration utility, TowTruck, which allows real-time web editing collaboration in the browser. It's got a lot of nifty features I won't get into in this post; sufficed to say, it's …
ascii.js: A font-based rendering engine for ASCII artwork
Tags:A long-standing and thoroughly-enjoyed hobby of mine is creating and consuming ASCII artwork (though not the kind of watered-down crap you would see in, say, an e-mail signature or a chain letter). I recently went on a wild tear after …
scrollFollow: An auto-scrolling extender for knockout.js
Tags:With the following knockout.js extender, you can tie an observable array to a scrollable HTML element. When the array is updated, the element will keep scrolling to the bottom. It's smart enough to realize if the user has scrolled up, as …
Javascript document.write alternative
Tags:When a script is loaded synchronously, its element's position in the DOM can be determined. With this information, the <script> element can act as a pivot point for inserting dynamic content. This eliminates the need for …
UserScript: Tidy up TVGuide.com listings
Tags:The way that TVGuide.com's listings are organized is difficult to work with. This UserScript (compatible with GreaseMonkey, Chrome, Opera, and perhaps more) will gut the listings from the layout and give you one all-encompassing, …
WordPress plugin minify Makefile
Tags:While working on my first commercial WordPress plugin, the need for build automation finally struck me. The environments in which I do my most development are all driven by Linux, and so I wanted to use a tried, true, and ubiquitous build …
JavaScript Challenge #2 (Whac-A-Moo)
Tags:Though I am not a proponent of the MooTools JavaScript framework, their blog is an interesting resource that I enjoy reading. Not only is it packed with sensible practices and interesting insights, but they have recently begun posting …
Add password maintenance feature to cgit with PHP
Tags:Have you ever wanted to have a nifty, browser-driven password maintenance feature in your htpasswd-secured cgit site? I've been meaning to build this for a while—and I finally did it.
Add threaded discussions to cgit with disqus
Tags:While it provides an efficient, organized web front-end for your personal git repositories, the cgit application is missing a few of the more sparkling features found at github–notably, a comments/discussion system. Enter: disqus.
jQuery.imgradio Plugin v1.0 released
Tags:The default HTML radio buttons and check boxes aren't the most aesthetically pleasing things in the world of web design. With this in mind, I have created a jQuery plugin that will replace those pesky <input /> elements with …
jQuery.noFlickerSlide Plugin v1.0.0 released
Tags:Since 1.1.3, jQuery's slideUp() method has had problems with flickering in Internet Explorer. While this issue can generally be fixed by avoiding Quirks Mode with a DOCTYPE declaration, it doesn't always work so easily. (The HTML 5 …
Forward Gawker sites to their UK counterparts for a better layout
Tags:I wrote a (really) simple userscript today that reloads Lifehacker pages under uk.lifehacker.com. Why did I do this? Because the Lifehacker UK site doesn't have the trendy new (horrendous) AJAXified layout. Maybe using a hosts redirect …
Create anchor links in Twitter status text with JavaScript
Tags:Note: This also applies to any service using a Twitter-compatible API, such as StatusNet (see: identi.ca) with some minor configuration changes. As a side project, I have been working on a StatusNet (specifically, identi.ca) status feed …
Check all CheckBoxes in a GridView using jQuery
Tags:If you're working with a GridView control where you've built a CheckBox control into each row of data displayed, odds are, it would be convenient for your users if a "Check/Un-check All" option was available. The following …
Photobucket thumbnail bookmarklet
Tags:I've built a pretty simple little utility for turning the URL of an image hosted on Photobucket into a thumbnail which links to the full-sized image. I've designed one version for building bbCode (forum) mark-up, and one for building a …
View live page source with Javascript
Tags:Have you ever been working on an AJAX-enabled webpage, or a page with complex redirects and permissions, and tried to view its source? What you wind up getting generally looks nothing like the current state of the page in question. You …
Consuming newlines with the Javascript regex engine
Tags:In most server-side languages (with an available regex engine), programmers are given a wonderful set of pattern modifiers. One such modifier for PCRE (Perl-compatible regular expressions) is the "s" modifier, known in PHP as …
Urban Dead Greasemonkey Scripts
Tags:I've built a home for all of my Urban Dead Greasemonkey scripts at sites.google.com/site/udscripts. It currently houses CHUD, UDInventory, and the UDBrain Frame Fix script. It will be my base of operations for UD mods from here on …
UDInventory - GreaseMonkey script for Urban Dead
Tags:I've written another GreaseMonkey script for the web game, Urban Dead. This one will compact your inventory by grouping together guns, ammo, first-aid kits, syringes, etc. You can install it from GreasyFork. Click here for an iWitness …
chud - GreaseMonkey script for Urban Dead
Tags:I've finished putting together my first GreaseMonkey script! It's called "chud"—the Caddy Healer for Urban Dead. It's been built to plug-in to my favorite web-based zombie apocalypse, Urban Dead. It will bring up a list of …
Browser-independent XSLT with Javascript
Tags:To piggy-back on the Javascript function to load an XML document: what can be done to load an XSL stylesheet and apply it to the XML? For the most part, loading it is a snap… but, as is often the case, Internet Explorer is the …
Browser-independent XPath with Javascript
Tags:Now that you're able to load XML and transform it using an XSL stylesheet, wouldn't it be handy to also be able to perform XPath selects/functions on that XML outside of the stylesheet's formatting? Why, yes. Yes, it would:
Browser-independent XML load with Javascript
Tags:XML data is, in a word, awesome. It's standardized, it's well-formatted, and there are XML parsing methods in nearly every major programming language–including Javascript. However, when using Javascript, the nasty problem of …
Wipe all elements in a form with Javascript
Tags:Javascript has a nifty method associated with the form DOM object called reset(). Using this method will revert all values of the form's associated input controls to the values they contained when the page was last sent to the user's …