PROGRAMMING/UI-DEVELOPMENT

This article highlights some interesting tools that I’ve worked with and which I’ve come to appreciate over time. Consider using the given links to access full details on the documentation pages for any given tool.

1. Primer Tooltips.

Github primer is the CSS design system that powers GitHub. The primer tooltips package gives its tooltips a really smooth look and feel.

Agile approaches are not usually standards-driven, so issues of standards compliance are not usually considered. Taking the initiative to refactor code relies on (and, should be) individual responsibility. The following pointers apply to both JavaScript usage in frameworks and plain native JavaScript.

1. Substitute directly evaluated expressions with descriptive variables

While considering performance, the ideal approach would be to use fewer variables and thus reduce overall memory requirements. While working with jQuery, I find myself using the following code more than often:

$(‘.some-el’).click((event) => {
    $(‘.’+$(this).attr(‘id’)).addClass(‘some-css-class’);
});

At the time I’m writing this code, I know that the HTML element with the class 'some-el' has an id that represents a target element, and a click event on this element should modify that target. It gets the job done, but it’s messy. Not so easy for future maintenance. This once, we can forego performance in favor of legibility. Besides, this is 2020, computers can handle a few variables! …

PROGRAMMING / UI-DEVELOPMENT

Popstate Event

The popstate event is fired each time when the current history entry changes. This entry can either be triggered when a user navigates to a new state by clicking on the browser’s Back/Forward buttons or when history.back(), history.forward() history.forward(), history.go() methods are programmatically called.

History API

The history API gives access to page navigation in JS using the browser’s history. Open your browser’ console and type window.history or simply history. In modern browsers you should see the following:

PROGRAMMING / REGEXPS

Now You Have two Problems.

As a developer, you’ll invariably come across the following saying:

Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems. ~ Jamie Werner Zawinski.

Jamie coined the term in 1997 in a USENET discussion to counter a proposed idea of embedding Perl into Emacs (which IMO, wasn’t that great), and it has since then gained a lot of historical significance. The saying generally tries to put across how the overuse of regular expressions can turn out to be problematic. …

I recently had a chance to pair program with a friend who was just breaking into Front-End web development. Considering him, myself, and others I’ve had the chance to work with over time, I’d say it’s a lot more easier to resolve to use a validation library, especially for someone who’s just getting acquainted with developing applications.

Input validation is a paramount control for testing inputs provided by both users and other applications, usually before the inputs enter the workflow of our app. We do this to protect intermediate resources — DBs, data, APIs, networking/computing power, e.t.c.

Why should I go for Custom Validation?

Validation libraries are shipped with a range of precompiled validators that we can directly access from within our apps. Sounds super easy, right? It is. Why then should we have to write custom procedures while we can have a lib do the work for us? Well, here are the three basic things that come to…

Have you ever stumbled on someone’s else’s desktop only to find every space filled with files and folders, so much so that there’s barely any room left to bring up a context menu? It’s plain out annoying. We can think of our GitHub repositories as a file system.

Having every project in its repository is a good idea. It’s been working for me for a long time. This approach however has the following downsides:

• Manual searching and retrieving of repositories gets complicated with an increased number of repositories.
• Lightweight projects take up entire repositories.
• Projects with the same attributes, or submodules of the same project get separated into different independent repositories. …

Understanding how a piece of code will scale helps us estimate algorithm efficiency. I’ve discussed four tips on how to go about auditing code below.

a. JavaScript Console Object

If I have the following search function:

function search(index,searchPhrase) {
  for(var key in index) {
    var current = index[key];
    if(Object.keys(current).length > 1 ) {
      search(current);
    } else {
      contentsArray = current["__file-names__"];
      if(~contentsArray.indexOf(searchPhrase){
        return {
          "objName":"searchResults",
          "searchPhrase": searchPhrase,
          "resultIndex:contentsArray.indexOf(searchPhrase),
          "filePath":current["path"]
        }
      }
    }
  }
}

Then I can use console.time(label) and console.timeEnd(label) to calculate execution time:

console.time('start');
search(fileServerIndex,"BBAM.pdf");
console.timeEnd('start');

The console.time(label) statement starts a timer named label. The label identifies the timer and is passed to the console.timeEnd() …

(a) Number Theory.

Leetcode describes a Happy Number as a number defined by the following process: Starting with any positive integer, replace the number by the sum of the squares of its digits, and repeat the process until the number equals 1 (where it will stay), or it loops endlessly in a cycle which does not include 1.

Using 23 as an example,

2² + 3² = 13Hence 23 is replaced by 13. The process is now repeated:1² + 3² = 10Then:1² + 0² = 1The process ends at this point since 1² = 1. From this we conclude that 23 (and 13 and 10) are happy numbers. …