Skip to main content
I'm streaming on Twitch right now. You should stop by. Let's go!

Tagged: javascript

  • A chat bot in your browser


    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 experiment. The bot responds with a random "thank you" emote …

  • Track change events for YouTube with MutationObserver


    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 on my Twitch stream. YouTube isn't going to provide you with …

  • Vue.js long-press directive


    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 had a few reservations: It was TypeScript. I only want to be …

  • Minifying Javascript using ESBuild with Flask-Assets


    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 ES2016+ is that modules (and importing them) are part of the …

  • Nexus Clash UserScripts


    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 whose AP is running low and shows their decay time in both GMT …

  • Tail for browser windows


    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 a bookmarklet that does just that. The first time you invoke …

  • UserScripts for Urban Dead


    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 to the experience (in my opinion). I abandoned them–and …

  • repo2site: Make a web site out of a git repo's MarkDown files


    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 hosting services.  …

  • ASP.NET/C# image resizer for responsive layouts


    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 dimensions (note: not window dimensions) of the web browser requesting them. This way, you're not sending huge images to phones. Pair this with some CSS to scale your images to fit their containers, and you're cooking with gas!  …

  • jQuery visibility pseudo-selectors


    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 only display certain items (like a "back to top" link) after you've reached a certain point on the page, or only while some other element is within the viewport.  …

  • SVG polyfill in pure Javascript


    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 selector engine and each function. So, I rewrote it in pure Javascript.  …

  • Give-Me-Coins.com Condensed UserScript


    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 joined a Litecoin mining pool (Give-Me-Coins.com) and decided that I could do without a few of the widgets on their dashboard page. Bing-bang-boom, I wrote a UserScript to rearrange things a little bit. Here it is for your consumption.  …

  • Mozilla's TogetherJS in a bookmarklet


    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


    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 pretty frickin' sweet. What I did not find to be as frickin' sweet, however, is the fact that the TowTruck Javascript file must be included in the source of your page in order to use it.  …

  • ascii.js: A font-based rendering engine for ASCII artwork


    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 stumbling across a faithful recreation of the Amiga's Topaz 500 …

  • scrollFollow: An auto-scrolling extender for knockout.js


    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 well, and will not interrupt them. I've found this to be a useful mechanism for logs.  …

  • Javascript document.write alternative


    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 document.write, a function which wreaks havoc where AJAX is involved (and flies in the face of modern web development best practices).  …

  • UserScript: Tidy up TVGuide.com listings


    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, manageable scroll bar for perusal.  …

  • WordPress plugin minify Makefile


    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 automation mechanism to fulfill my need. As such, I wound up going with a Makefile, to be parsed and executed by the GNU make application. The result is an incredibly convenient automated build that minifies my Javascript/CSS (thanks to reducisaurus), and creates a version-appropriate archive of my plugin.  …

  • JavaScript Challenge #2 (Whac-A-Moo)


    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 JavaScript challenges where developers are tasked with building …

  • Add password maintenance feature to cgit with PHP


    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


    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


    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 <span /> elements for your CSS styling pleasure. Under the hood, the original elements are still being used for storing the user's selection(s), so there's nothing extra for you to do when the form is submitted. Additionally, it can be configured to operate as a "rating" system—so that, for example, checking the 4th star in a 5-star list would swap the first 4 stars in the list to the "checked" state (visually speaking, at least… in the underlying radio buttons, only the 4th star would be selected).  …

  • jQuery.noFlickerSlide Plugin v1.0.0 released


    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 declaration worked for me, but was unfortunately not an option in the project at hand—which was filled with XHTML 1.0 Transitional pages.) To correct the problem with a JavaScript solution, you can overload the $.fn.slideUp prototype for all Internet Explorer versions and have it animate the element to a minimum height of 1px. The bug with IE seems to stem from it being unable to elegantly handle 0px-tall elements. I've built a jQuery plugin, jQuery.noFlickerSlide, which does just that.  …

  • Forward Gawker sites to their UK counterparts for a better layout


    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 instead of a userscript is a better way to handle it (since you're still going to see a flash of the lifehacker.com site before being redirected with the userscript), but this method is far less intrusive—and less likely to break any pages on the UK site which may rely on resources from the naked domain.  …

  • Create anchor links in Twitter status text with JavaScript


    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 widget for the WordPress PHP platform. I had spent a fair amount of my time trying to convert the various tokens (such as @mentions, #hashtags, and URLs—both with and without a protocol prefix) into clickable links when I realized that StatusNet, being the cool folks that they are, provide HTML-rendered versions of status posts through their API. However, my work hasn't been for naught! Twitter uses an incredibly similar API—or rather, StatusNet's API is similar to/based off of Twitter's API—but does not provide HTML-rendered versions of the status posts (to my knowledge). With this in mind, I've re-engineered the code to accept options for pointing the various token URLs to the particular service—whatever it may be.  …

  • Check all CheckBoxes in a GridView using jQuery


    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 example will show how to do just that; and with only the tiniest bit of jQuery script!  …

  • Photobucket thumbnail bookmarklet


    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 basic HTML thumbnail link. Save the links below to use them: bbCode Thumbnailer HTML Thumbnailer Have a look at the code yourself:  …

  • View live page source with Javascript


    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 are viewing its initial state, since the browser loads a fresh copy for the source view. That's just fine if everything you need to check was all set up and ready to go when the page was initially loaded; but that is rarely the case with AJAX.  …

  • Consuming newlines with the Javascript regex engine


    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 the constant PCRE_DOTALL. This modifier will cause the "dot" character–which will usually match any normal character–to include newlines. This is especially useful if you are dealing with text files and your pattern match may span multiple lines of those files.  …

  • Urban Dead Greasemonkey Scripts


    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 out–and I plan to begin working with Google Gears in order to …

  • UDInventory - GreaseMonkey script for Urban Dead


    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 screen shot. …

  • chud - GreaseMonkey script for Urban Dead


    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 anyone in your map cell who can be healed with a first-aid kit, …

  • Browser-independent XSLT with Javascript


    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 exception to the rule. So, we write a function that tells every browser except for IE to use our previously-defined loadXML() function, and an exception for Internet Explorer to load the XSL as a "free-threaded document."  …

  • Browser-independent XPath with Javascript


    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


    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 "browser agnosticism" comes into play: a method that works in Firefox may not (read: won't) work in Internet Explorer; and both methods may fail for WebKit (Safari, Chrome, etc.).  …

  • Wipe all elements in a form with Javascript


    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 browser. That's great… but if you want to revert the values to nothing, then some scripting is required:  …

View all tags