Whispers & Screams
And Other Things

Duplicate element ID's in the DOM

Short post today folks since its Friday :)

I've been developing quite a lot lately using Angular JS and React JS as I'm currently heavily involved with a startup preparing to release a new IoT product. The app is pretty complex with heavy calls to the server side database but that's not what we're going to talk about today. 

One of the things that seem very straightforward when you're building small UX is ensuring you have a unique array of element ID's in your DOM at any given time but, as the complexity increases, then so does the difficulty in maintaining a mental map of the DOM you have at any given time, especially if elements of your viewport are loading dynamically via ajax calls or whatever. 

The downside to having a duplicate element ID may not always be immediately apparent as it is not something that will always push an error to the console. This can result in confusing erratic behaviour from your application and often hours can be lost trying to work out what on earth is going on. 

By the time you eventually get to the bottom of the problem you realise that you've wasted hours searching for something that was ultimately such a basic error. 

So anyway, this happened to me once or twice over recent weeks. Our application loads dynamic data via ajax quite frequently and the issue I faced could sometimes be intermittent. The worst-case scenario.

After the dust had settled, I decided to create a tool for myself that I could use to quickly establish the presence or otherwise of duplicate ID's. This is what I came up with. Simply punch this code into the command line on your browser inspector console and hey presto!

var DOMElements = document.getElementsByTagName("*"), DOMIds = {}, duplicateIDs = [];

for (var x = 0, len = DOMElements.length; x < len; ++x) {

  var element = DOMElements[x];

  if (element.id) {

  if (DOMIds[element.id] !== undefined) duplicateIDs.push(element.id);

  DOMIds[element.id] = element.name || element.id;

    }

  }

if (duplicateIDs.length) { console.error("Duplicate ID's:", duplicateIDs);} else { console.log("No Duplicates Detected"); }

Feel free to use and abuse as you see fit. I hope this helps somebody out there save some hair :). Have a fab weekend.

Continue reading
2581 Hits
0 Comments

The Web By Proxy

I've been working on networks for decades and for as long as I can remember, network proxies have existed. I first came across the idea when I worked for IBM as an SNA programmer back in the late 90s but it's in more recent years that network proxies have taken on more importance. 

Continue reading
2467 Hits
0 Comments

Curved Text In Gimp

Photoshop is a pretty well-known piece of software. Indeed its become so well known in the field of manipulating images its transitioned into the catch-all verb to describe the act of artificially changing a photograph. Not so well known, but to all intents and purposes just as powerful as Photoshop is GIMP. GIMP stands for (The) Gnu Image Manipulation Program and one of the best features that place it streaks ahead of Photoshop is the price. It's free.

The power packed into this freely downloadable piece of software is phenomenal. You name it, GIMP can do it. Ok so introductions over, one of the things I get asked about regularly is whether GIMP can create curved text. The answer, you've guessed it is of course yes. Let's take a look at how it's achieved.

 Let's say you have a logo which looks something like this image here on the left. Your friend, who happens to be a Dentist is looking for some help with his website branding and, let's face it, toothy the tooth does look a little isolated over there. So your friend asks if you could help him place some text around the logo to give it some punch. 

The brief is that the words "Toothsome Teeth" need to curve around the top with "Dental Services" on the bottom.

So where do you even begin? Ill explain in the rest of the post.

Continue reading
2695 Hits
0 Comments

Hardening The Joomla Backend

If like me, you manage one or more Joomla websites, you will no doubt be aware of the sorry lack of user friendly documentation and the appalling lack of a powerful native log facility. This seems to me to be an enormous oversight on the part of the developers however it is possible with a little jiggery pokery to get the information you need. 

I noticed recently that there were enormous amounts (1500 per day) of failed login attempts at the default backend URL (site.com/administrator/). This is to be expected of any installation like this however one cannot help but feel uneasy at the incessant minute by minute brute force dictionary attacks rolling by in the log. If your passwords are secure then you'll almost certainly be fine. If your administrator username is anything but admin, you'll be even better. Still I wasn't satisfied and I decided to call in the big guns.

Continue reading
2346 Hits
0 Comments

Passing Dynamic Arguments to Bash Scripts


It is possible to pass arguments to a bash script when it is called from the command line. This is the technique to use when you need to have your script carry out different actions each time it runs dependent on the input and the context. This is done by passing selected parameters to the file on the command line and these parameters are called arguments.

Lets look at an example, you may have a script called "graph.sh" that performs a particular operation on an RRD file, such as extracting the data. If you want to be able to use that script on many RRD files in many different user directories, it is best to pass the file path as an argument, so that you can use the same script for all the files to be processed.

Continue reading
3559 Hits
0 Comments