Select all “obsolete” html elements with yolo-selector!

Never think all npm packages have been created already. The world is full of inspiration if you’re open to it. For example, this Rob Dodson tweet:

After seeing it, yours truly thought: “that sounds like a capital idea!”. So, in a rush of inspiration, the  yolo-selector npm package was born. It is a jQuery extension that adds a pseudo selector :yolo. This selector uses a list pilfered from the Mozilla Documentation for HTML elements that have fallen from grace, like blink, marquee, acronym, font, and many more.

The implementation may be half-joke, but it has tests, and CI and the works. Feel free to create issues if more elements need to be added.

Play YouTube videos filling the browser window

If you are like me, you like using as much of your screen to watch videos on YouTube. The comments, title bar, and the rest of the edge of the screen takes away the possibility of looking at all those 1080p pixels available now.

To make any video fill your browser window, drag the link that says YT Full below to your bookmarks toolbar. You can also right click and save to bookmarks. Then, while on a YouTube video page, click on it. The page will be replaced by the URL of the embedding version of the video, filling the viewport.

[codepen_embed height=”120″ theme_id=”light” slug_hash=”xLMaEw” default_tab=”result” user=”javver”]See the Pen <a href=’https://codepen.io/javver/pen/xLMaEw/’>xLMaEw</a> by Javier (<a href=’https://codepen.io/javver’>@javver</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Inside the bookmarklet you will see this:

javascript:u=window.location.toString().match(/v=([^&]*)/)[1];window.location.replace(`https://www.youtube.com/embed/${u}`)

It’s a short script that takes the current URL from the address bar, yanks the video ID from it, and replaces the tab URL with the embedded version URL.

😀

Dynamic JavaScript Function Names

The other day I had to make a long list of functions where the name was derived from an object key name. Since programming is the art of automating stuff, I thought “There has to be a way to have the code do this!”. Searching on our good friend stackoverflow.com there were plenty of examples of how to set the name of a function by using eval, or the Function constructor. Eval has some security issues, and by extension the constructor that uses it behind the curtains. So, what other way is there?

Well, the name property of functions is read-only, so that cannot be created and just renamed. However, there is more than one way to name a function.

One way is in the declaration, but that name is fixed upon declaration.

function superCoolFunction() {
}

superCoolFunction.name === 'superCoolFunction';

The same is true for function expressions, where the anonymous function name is derived from the variable name (doesn’t that make it not anonymous though?):

const nameOrigin = function() {
};

nameOrigin.name === 'nameOrigin';

Another is through object literal notation:

const objectLiteral = {
    evenCoolerFunction() {
    }
};

objectLiteral.evenCoolerFunction.name === 'evenCoolerFunction';

But, since object literals can have computed properties we can have:

const dynamicName = 'coolDynamicName';
const objectLiteral = {
    [dynamicName]() {
    }
};

objectLiteral[dynamicName].name === 'coolDynamicName';

And thus we can have a function that creates a function with a dynamically named method and return that method!

[codepen_embed height=”320″ theme_id=”0″ slug_hash=”JyWoWP” default_tab=”js,result” user=”javver”]See the Pen <a href=’https://codepen.io/javver/pen/JyWoWP/’>JyWoWP</a> by Javier (<a href=’https://codepen.io/javver’>@javver</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

You may ask, can’t this be done with Object.defineProperty? Well, not really, you can create functions in the object, but the Function.name value returned will not be what you input to that function, since the function in the property descriptor will be named value. You can play around with a near solution in this pen.

Caveat emptor: this has not been benchmarked in any way or tested for JS engine optimization compatibility. Just another tool in the belt, just in case. 😉

A node package appears: tagged-replace

I’ve recently become acquainted with node.js and it’s been a delight so far. It’s taken some time to get used to a new package manager and build tools and it’s been some time since I last touched ECMAScript (we all know it as Javascript though, right?). In an attempt to get truly familiar with it I’ve ventured to create a module and publish it to the npm.

Continue reading

Where is the log4j XML config reference?

When it comes to logging in Java™ there is no shortage of alternatives. The one I’ve used the most is log4j by the Apache Foundation. In its basic usage it has no dependencies and you only need to add the ones you’ll use like SMTP support for mailing loggers, JSON configuration support or a JDBC connector to log to your favorite database. The newest version even allows asynchronous logging through the LMAX Distruptor interthread messaging API that promises greater throughput than concurrent queues and lock based thread synchronization.

Since the 2.x version came out, however, the documentation for the 1.x versions has become fragmented. There are dead links everywhere and the XML configuration method reference is not even half complete. A common question about the XML format is about validation. A more thorough search can land you on the source control version of the DTD. Let’s go through the details of what makes a valid log4j XML configuration file.

Continue reading

Zero padded hexadecimal numbers in Java

A quick recipe, converting an int or long like 65 to a string like 000041. It’s useful for converting integer RGB colors to the common #FFBBCC kind of web encoded colors.

 

int number = 65;
String hexString = String.format("%06X", number);
System.out.println(hexString);

:>

Decoding Base64 without newlines

So, I was trying to decode some base 64 encoded data to verify a request’s details but openssl kept returning nothing. To see what it expected I encoded a random string and when I saw the output it dawned on me. Base 64 wraps lines of a certain length with new line characters, every 64 characters (bytes, actually).

Wrapping data isn’t that hard, but I suspected there had to be a command that already did something like that. The answer was fold. It wraps lines of input to fit a specified width. The default was 80, but it can be changed with the -w switch. The result is:

 input | fold -w 64 | openssl base64 -d | output

:>