Image for post
Image for post

Logic accounts as the most significant factor affecting the speed and performance of any given algorithm. On the other hand, simplified syntax comes in as an important feature in reducing syntax noise and clarifying the intent of code, and generally helps us reduce the amount of code we have to write. Our JavaScript algorithms could be made more performant by using the following tips (as a few possible tools in a much bigger bag).

(1) Tilde (~) operator in search functions.

The tilde operator is a useful bitwise operator that flips all bits in its operand. Any digit that is a 1 in the expression becomes a 0 in the result whereas any digit that is a 0 in the expression becomes a 1 in the result. …


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.

Image for post
Image for post

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.


Image for post
Image for post
Photo by Steven Wright on Unsplash

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

Handling browser back/forward navigation events and programmatic history updates

Image for post
Image for post
Photo by Jametlene Reskp on Unsplash

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

What are your thoughts on RegExps? Let’s talk about it!

Image for post
Image for post
Photo by NONRESIDENT on Unsplash

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


How to leverage RegExps for processing user inputs

Image for post
Image for post
Photo by Michael Fousert on Unsplash

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…


Project repo management on git.

Image for post
Image for post
Octocat (github.com)

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


Audit Your Code With Time Complexity Analysis

Image for post
Image for post

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()


Image for post
Image for post
Example Happy Numbers (stemorg.uk)

(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.

— Learn how to integrate Safaricom’s Lipa Na MPESA Online API to your web app in 30 min.

This code walkthrough describes how to go about creating, integrating the MPESA LipaNaMpesa API to and deploying a complete web app. We’ll take advantage of the numerous open-source resources at our disposal. This will translate to zero development costs (not to mention the already catered for database setup and deployment costs), apart from, of course, your concentration and complete attention. I do hope you brought your A-game with you, we’re going to need it!

Image for post
Image for post
Photo by Alvaro Reyes on Unsplash

To get a glimpse of what we’ll be building, take a look at the already operational version of the app here. For more details about the MPESA APIs, refer to the (mostly technical, excruciatingly long but otherwise very-well detailed) official documentation. In a nutshell, Safaricom’s LNM is one of the MPESA APIs and provides a programming interface that creates a link between a Merchant’s MPESA BusinessShortCode to their respective applications, allowing their customers to make payments for products from within those applications (via standard STK push). The following are the bare minimum requirements this walkthrough demands. …

About

Daniel N.

BSc., Computer Science. Web & API Developer. Writer. Good at drinking coffee. Nairobi, KE📍

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store