What the hell?

So I was minding my own business in my humble abode when I receive an email. A quick look at my phone’s notification bar tells me that it was from the admissions counselor (, let’s call her Daisy,) of a college that had accepted me. I wasn’t at all surprised because the decision day for that college had just passed and I hadn’t shared mine at all.

The email said “Daisy has shared a document with you.” And had a button that said:Open in Docs.

Like a dumbass, I clicked on it. I did wonder why she’d share a document with me and I did, kinda, wonder why it didn’t look like the average Google Doc invitation, but I was on my phone and I chose to overlook it.

Then I land on a page that asks me if I want Google Drive to have access to my email account. It asked for permissions like “Edit, delete and create emails.” I was certain, by this point, that something was not right. And I just allowed it. You know why? Cause the goddamned address bar clearly showed that I was still on Google and still on https. I was redirected and then it appeared to be completing a request and loading something and after waiting for a few minutes, I realized what I had done.

Now I noticed another weird email, and it said “Anas Khan has shared a document with you.” That was it. Now I realized what those permissions were for. I checked the sent mail and realized that this shit had forwarded itself to “hhhhhhhhhhhhhhhh@mailinator.com” and that email was BCC’d to virtually every email address that I had ever communicated with.

Well, kinda screwed up. But I have to say this: It was a clever scam.

 

The Dilemma of Programming Languages

So, I’ve been up and laptop-ing for the last two hours or so, and all I’ve been doing is reading one article after another centered on programming languages. A good fraction of those articles lashed on how Javascript sucks. It’s been a lot of continuous reading, all thanks to catchy links located throughout the articles, and at any given time there have been at least 7 tabs (with articles) open at all times. Even as of now, there are exactly seven other tabs, besides Facebook, open in my browser.

It all started when I, scrolling through my news feed, out of sheer boredom, landed on a post by Richard Eng, an evangelist for SmallTalk whom I first came across on Quora, and while reading, I clicked on some other links and opened them in new tabs, and then the process repeated itself. The more I read, the clearer became Eng’s views on the different languages. It was clear that he hates JavaScript, and just the first part of this post by him shows that he definitely has a point.

While going through his list of his JavaScript alternatives, which are all basically Transpilers, I also discovered Brython, which is basically Python running in JavaScript’s place as the client-side scripting language. It’s pretty cool actually, although apparently the code is transpiled from Python to JS during runtime and that’s gotta take a toll on the performance.

Also, like countless other people, Mr. Smalltalk was kind enough to tell us that PHP is one of the three languages he can’t stand. While I agree that JS deserves to be on that list, my love for and comfort with PHP is too strong. It hurts when people constantly tell me that PHP sucks, and that it shouldn’t be used on any serious projects. Maybe they are right, maybe they aren’t, but I do believe that PHP is going to be around for a long time.

While reading about the desire for improvements to JavaScript, I wondered about what would be the best way to work towards them. They can’t just change everything like Angular did with the 2.0, that could break the web. But if they offer backwards compatibility, it would just keep growing and ultimately become a huge confusing mess.
I guess that it’s fairly safe to say, that with programming languages, it’s important to make the correct decisions during the initial stages of development.

You might be wondering what the point of this article is, or what exactly is the actual “dilemma.” To be honest, there isn’t a point. I’m just thinking out loud. Incoming opinions lead to indecisiveness, which in turn results in time going wasted.

 

Contextmenus.js

Purely Javascript based solution allowing for easy creation of right-click context menus. Browse the code on GitHub. Demo

So, Haider posted on his Facebook timeline, a link to his then newly setup github repo which he had named “rightclick.js.” It was pretty clear what it was about so I gave his code a look. He is using JQuery, and (for some reason unclear to me,) NodeJS.

This morning, I decided to make my own in pure Javascript. I started around afternoon and got done with it a couple of hours ago. I wanted to call it contextmenu.js but there already exists a script by that name, and thus, out of respect, I renamed mine to contextmenus.js. The code happens to be a couple of files that together take up a total of 1812 Bytes of disk space. Everything  that you need to know, in order to get it to work for you, is explained in the README.md on the GitHub page.

 

Progresive Web Apps

You are using a computing device, be it a smartphone, a tablet, a desktop computer. It’s new, shiny, with little or no applications installed, apart from the bloatware that the manufacturer could have generously shipped with it. You fire up Facebook in a web browser, like a couple of pictures, post a status, have a small chat with a friend, and then after a while, you close the tab and lock your phone. After a while you do it again, and this time, you spend a whole hour scrolling through the news feed, and then once again you close the tab, and lock your device.

Now while it’s locked, and still connected, your device makes a decision. Assuming that you like Facebook, it adds a Facebook icon to your homescreen, or your app-drawer, for easy access to facebook.com. So the next time you unlock your iPhone, you simply tap on that icon, and it opens facebook.com in your default web browser. You love it.. It’s just a simple link, but it already feels great, and it could be better. Soon enough, after another day’s usage of the site, you notice that tapping the app icon no longer opens a browser window with facebook.com. Instead, you get a window solely running Facebook like it’s a standalone native application for your operating-system. … 

 

Alexarank.io

On January 3rd, I launched a tool, that’s hosted at; yep, that’s right. You guessed it: alexarank.io. What the tool does, is pretty simple. It tracks the global Alexa ranks for domains, and shows the change over time in a chart. It’s not exactly tracking every damn domain on the web, but nothing prevents it from doing so. Except that someone, and I mean anyone who cares enough, has to submit the domain once, and that very instant, the tool would start tracking the domain.

On December 27th, Amin messaged me and shared his desire for tool that would track changes in Alexa ranks for particular domains. On the slightest effort at googling, we both discovered a shitty tool that offered to do so at some price I didn’t even bother to remember. Alexa itself offers to do that for you, but they too, yep you guessed it, do it for a fee. So I say to Amin, we need to make a free alternative, and we immediately start concepting, and after a while we started playing with code. Within the next few days we had a working buggy prototype up, but it was uglier than you could possibly imagine, so we fixed the bugs, and made it look presentable and on the 3rd day of 2016 we registered the domain and it was up.

 

Highlight menu link of the current page.

On some websites, regardless of whether or not they are wordpress or even PHP, the menu link for the page you are viewing gets highlighted or it becomes active. An example could be the 2014 theme for WordPress (see how, in the nav bar at the top, the link for home is green?) or css-tricks.com (link for the current page is orange.)

In static web pages, there could be more than one ways of doing this, and I’m not even gonna go there. But in dynamic websites, where there could be tons of pages with the same elements loaded, like the nav, the header, e.t.c. you can’t really change the attributes of a certain list item to suit a particular page.
Now the thing is, this isnt exactly rocket science.. Most good WordPress themes have this by default, but thanks to those few that don’t, I know that there’ll always be those who’d ditch a theme they spent ages styling on, simply because they’ll be tempted to use one that has it.

The day before I was modifying a theme, and I was almost completely done making it look like I wanted to, when I noticed that the css for :active state on the links didn’t apply. Of course that was stupid, no one really bothers with the active state anyway, they usually just define their own class.. After comparing the theme with another, and failing to find out how a general theme does it, I decided to code it in myself.

CSS-Tricks has this age old tutorial video  that shows a way to code it in yourself. Basically the idea is to parse the URL, and get the page request from the permalink. If you played the video, you can see how he got the page’s name and he applied it to the body as an id, and in his css he defined a style for body with ids matching the names of all his pages.

I however would do it slightly differently.. Just like he did, we get the request URL, get rid of slashes and question marsk (if any,) and apply it to a var ready to be echoed. But instead of applying and id to the body, and adding a comma separated “body#pagename” a number of times, we can define css for a particular class, like, for example “.current,” and add a script to the page, which gets the page’s name from the url, and finds the menu item with that name in it’s “title” attribute, and applies the “.current” class to it.

So all you gotta do is add the style for the .current class to the css file and then add the php from that css-tricks tutorial (the $page variable,)  to the header.php. And then you need to add a small Javascript script, that takes that $page var (don’t underestimate the power of <?php echo $page; ?>,) and applies the class to the corresponding menu link.

As a bonus, I will add below all the code you need to make this work.

<?php

$page = $_SERVER[‘REQUEST_URI’];
$page = str_replace(“?”,””,$page);
$page = str_replace(“/”,””,$page);
$page = str_replace(“.php”,””,$page);
$page = $page ? $page : “home”; ?>

Add this PHP at the very top of the header file.. before everything, and then, anywhere below below the nav markup, add this JS script:

<script>
nav = document.getElementsByClassName(“nav”)[0];
nav = nav.getElementsByTagName(“a”);
for(i=0;i<nav.length;i++){
if(nav[i].getAttribute(“title”).toLowerCase() == “<?php echo strtolower($page);?>”){
nav[i].setAttribute(“class”,”current”);
}}
</script>

You might have noticed that this only works if the container of the nav has a “.nav class to it. Even if it doesn’t that can simply be added, and if there’s a different class name you are inclined to use, then simply use it, or if there’s an id, replace the “getElementsByClassName” with  “getElementById.” But that wasn’t just it. Another prerequisite for it to work is for the tags in the nav to have title attributes. So yeah maybe I’m just wasting my time posting this. But hey! Whatever works, works.

 

Using two routers to extend a network – Part 2

The goal: Create two separate networks, each with its own router. Both routers will have different security and SSID, while the WAN settings of A are configured to connect to the internet while B, being a subnetwork of the first, will connect to the internet through it.

Now the thing is that the LAN and WAN IP addresses can not be in the same subnet, so here’s what I did. I changed the subnet of A from 255.255.255.0 to 255.255.0.0 .. Also, I changed to IP Adress to 192.168.1.1. That’s all the config you need to do in Router A, assuming it is already configured to connect to the internet.

Now get an Ethernet cable and plug one end of it into any of the LAN ports (some reccomend the first) in A, and the other end into the WAN port of B. Login to it’s portal.. yeah it’s at 192.168.0.1. Though I don’t see why dynamic shouldn’t  work, but since it didn’t for me, let’s assume it won’t work for anyone else. Select Static IP in the startup wizard and you’d be greeted by a number of blank input-boxes.  Fill them in as follows:

IP Address: 192.168.1.2

Subnet Mask: 255.255.255.0

Gateway: 192.168.1.1

Primary DNS Server: 192.168.1.1

That ought to do the trick. You might want to do a reboot, but that’s not always necessary.

 

Using two routers to extend a network – Part 1

Umm, yeah, so let’s get to it. What was the first interpretation? oh that’s right, Router B to act as a wireless access point for A.

So, A has an internet connection and B has to be connected to it via a cable and configured in such a manner that the connected devices automatically connect to either of the two devices with the best signal as you move about, and as B is acting as an access points, all data B receives and sends would of course need to be sent to and received from A. (Pardon me if something I’ve written doesn’t seem correct, I’m merely a noob and explaining in terms your grandma could understand.)

This was actually pretty simple, so I’d just list the steps leaving out the screenshots.

  1. Get an ethernet cable and insert one end of it into any LAN port on A, and the other end into the first LAN port of B. (actually I’m not sure if it has to be the first port or not.)
  2. Login to the web interface of B and set the SSID, i.e the name of the network, and the security settings of B to be the same as those of A. e.g. if A is called “narlges” and it’s using WPA, with passphrase “flutterwacken”, then you need to apply the same settings on B.
  3. Making sure that both A and B are in the same subnet, change the LAN IP adress of B to something other than that of A. So if the IP of A is 192.168.0.1, then you can set B to 192.168.0.X. Basically X can be any number between 0 and 255 except 1 as it is being used by A.
  4. Disable DHCP on B as it won’t be assigning IP addresses and all.
  5. Other wireless and radio settings like channel and all need to be the same too
  6. Reboot both routers?

And basically that’s it.

 

Using two routers to extend a network

I have recently been faced with this challenge, partly for learning, as it’s kind of an enthusiast thing and partly because I might actually need to to that in the near future. Since the title might seem a bit vague or ambigous to some, let me first make a bit clear exactly what it is I’m after. How about we start by listing interpretations? (My goal and the whole point of all this can be seen to later.)

Router A= TL-WR841N, and this one’s configured to connect to the internet using PPTP

Router B = Tenda W268R,

  1. I have two routers, and I want B to act as a wireless access point to extend it’s range.
  2. I have two routers, and I want B to have a LAN of it’s own, with A as a gateway providing access to the internet.
  3. I want to do either of the things listed above over a wireless bridge.

Let me say this much. I am a newbie. I’m not much of a networking guy, nor do I really know how this is going to work. I’m simply Google-ing and experimenting.

In the next few posts, I will explain what I have tried and what was the outcome.

 

Animating Vegeta – The Power of CSS3 and Sprites

Check this out before you read any further.

Some time back, I googled the term “sprite”, [I tend to forget what it is (not anymore though)], and in return was presented with a fine number of them, however, my eyes were quick to notice that the very first one of the results featured a few actions of Vegeta, one of the main characters from DragonBall Z. I thought it’d be cool if I tried creating a program, a web-page to be precise where one could animate Vegeta, by merely clicking on buttons.

So well, on May 21, around sunset, i got to work. I googled and checked out a number of sprites until I finally decided on this one.

Though I had initially decided to do it purely using JS, but then it hit me, that CSS3 supports animations so why not use that?
Anyways, as soon as I began, I realized that this sprite is not very well suited to the job and thus I had no choice but to slice it up into several smaller ones, each representing a different move. I started with the ‘stance’. Made a four step sprite which initially was 176×83. And tried animating it. Still the problem that remained was that I couldn’t get it to work like I wanted it to. What was happening was that the Image would just Slide from left to right. After like an hour or two I finally managed to get it right. Turned out that the number of “Steps” I was wasnt well suited to the initial and final positions  I had defined in the keyframes. In the end, I managed to get it right. I used 4 steps and set the final keyframes to ‘-widthOfImage.’ That was it.  Now all I had to do was to create sprites for the other moves.
Next I tried the “duck-and-punch,”  which too worked like a charm with the existing code. But as I progressed, I realized that the size wasnt well suited to all actions. Some required a broader frame, while some (initially) required more than 4 steps, and that was when I somehow messed up the keyframes and wasted another hour fixing them. In the end, I decided to 4 steps where possible, (I actually ommited some of the images), and to use a 300×87 canvas, where each frame was 75×87.

Tried them all one by one by replacing the url in the code. All worked like a charm. Now I moved on to the ‘kamehamehaa'(s). The problem with these was that both the sprites were of 6 steps, so I had put them off for later. However the number of steps didnt make much difference except for the fact that I had to update the number of steps in the CSS , and resize the box everytime.

Now to the UI. What actually happens is that when you click on any of the buttons, it calls out a JS function which replaces the URL of the image with a different one, and thus a new sprite replaces the existing and thus is seen to perform a different action. Also, the function restores the original ‘stance’ sprite after the animation has completed one cycle.
As for the 6-step Kamehamehaa(s), I wrote a different function and keyframes. Now this function though worked in a similar manner, it would update the animation attribute (keyframes and steps) along with the image, and once completed one cycle, it’d restore the original keyframes and image. That was all.

As for the Energy bar, I declared a variable, initially equal to 50. Every Kamehameha decreases it by 10, while the rest increase it by 5. The Bar is updated every time the variable is updated, it’s width being directly proportional to the value of the var.

 

Flappy48 – Combining “Flappy Bird” and “2048”

Flappy bird and 2048, two of the best games if the year, in terms of their rate of going viral, though totally different in themselves, have been combined into Flappy48.
The objective is to keep joining the numbers, just like in the game 2048 and eventually reach the 2048 tile, while at the same time, avoiding the obstacles. The obstacles being vertical columns, rather like those green pipes in flappy Bird.
You start off with a two, and as you flap, you collect more numbers, usually 2s… This would go on until you reach the 2048 tile.
The game is based on the unity engine. You can play it online, or download it on your android, though the web version would require you to install the Unity Web Player.
The game seems finely developed. The theme and scheme is similar to that of 2048, with all solid-ly applied shades from yellow-red.
The idea itself is great. At least better than the other pointless clones of flappy bird like flappy doge and shit. At least it brings something new.

 

Connect to the Internet via a Network Bridge [Windows]

You’ve got 2 computers at your place. A nice laptop, and a desktop that’s deprived of a wireless adapter. The laptop connects to the internet through the router, to which it wirelessly connects, however the PC has to do without internet since the router’s a bit too far away from the computer for a wired connection. 

In such a case, you might wanna consider (or might already have unknowingly) going for a network bridge. The idea is that you connect your computer to the laptop via an ethernet cable,  and the laptop to the router (WiFi). So in simple terms, you are connecting to the internet through the laptop which is connected to the internet.

But it’s not as simple as simply plugging in a cable. Some configurations have to be made, so here’s what you can do:

Open the “Network and Sharing Center” on your Laptop, and click on the “Change Adapter Settings” link. Select/Highlight both the Wireless and the Ethernet adapter, right-click, and click on “Bridge Connections.”
Now sit back and relax while Windows sets up the bridge and once done, check if another icon appeared among the adapters, representing the “Bridge.” Also, you might wanna check if both the two adapters are part of the Bridge. It’s pretty simple and all you gotta do is see whether or not it says ‘bridged’  next to enabled on the adapters’ icons. If either of them doesnt, right-click and select “Add to Bridge.”

Before you proceed, on your laptop, fire up CMD, and type in “ipconfig /all”, Note down the values it returns for “IPv4 address”, “Default Gateway”, “Subnet Mask” and “DNS Server.”

Now the Client-side configuration. On the other computer, go to the Ethernet Adapter’s IPv4 properties; check “Use the Following IP address.” Fill in the ‘Subnet Mask’, ‘Default Gateway’, and ‘DNS Server’ fields with the values you previously copied after running the ipconfig command on your laptop. However, in the IP Address field, add 1 to the last three digits, so that e.g. 168 becomes 169. As for the ‘Alternate DNS Server’ field, add 1 to the last digit just like you did for the IP Address. That’s it; check “Validate Settings upon exit”, click “ok”,”ok”,”close.”  After a few seconds, the other computer would be connected to the internet.

 

How to Assign a Static IP to on Windows Computer

A Static IP differs from a Dynamic one in the sense that the latter changes with every router reset, while the former always stays the same.

To change your IP to a dynamic one, follow these steps:

  1. Fire up CMD, and type in “ipconfig /all”
  2. Note down the values it returns for “IPv4 address”, “Default Gateway”, “Subnet Mask” and “DNS Server.”
  3. Open Network and Sharing Center (quickest and simplest way is to right-click the network icon in the system-tray and clicking on the link therein.)
  4. In the sidebar on the left, click on the ‘change adapter settings’ link.
  5. Double-click on the icon of whatever adapter you are connecting to the internet through.
  6. A window would pop-up. Right in the centre of the box, would be a list of items that the connection makes use of. Look for “Internet Protocol Version 4(IPv4)” in the list; select it; click properties.
  7. Another box would pop-up, but this one’s the last in the row. Now this step is where you make the real changes, but before you change anything, check if the “Use the following IP address” radio button is already checked, and if it is, quit straight away since it’s already static. However if not, then do check it.
  8. At least three of the previously disabled input fields would now be enabled. Fill the fields with the details you copied from the results to the ipconfig command. The last bit of the IP Address is variable and you can give it any value you wish, however, copying the existing would do the trick too.

That’s it you are done.

 

Printing 2014 using a JS code free from numerals [Explanation]

Came across this thread on stack exchange. The challenge was to write a code, using whatever language you want, that would print the number 2014 to the console, without using a single numeral in the code. The person to post the code with the least number of characters wins.

After scrolling a whole lot over a number of Befunge codes and all, I came across a JS code, where the guy had said “Using pure-Math only..”, and he’d posted two codes, one used some type-conversion while the older version  was like in plain JS. This:

m=Math;p=m.pow;t=true;++t+m.floor(p(m.exp(m.PI),t))*t*t++-p(++t,t--)/--t

Since the guy had written that the code was pure-math, I decided to give it a closer look.
As I was going to try it out, I opened another tab, and in the console, I pasted his code. It did really print out 2014, but how? It’s been ages since I even printed my own name in JS, so figuring out the code took me quite a while.
In the address bar i typed “data:text/html, <html contenteditable>” to make it editable, as i wanted to make notes while trying shit in the console.

So, the first thing I did was add a little whitespace to the code and make it slightly more presentable.The code is basically 4 lines, should i say? Notice the three semicolons? yes, they ensure that the code wont screw up if you give a line break right after the semicolon.
The first bit is “m=Math”. This the guy did simply to save space and perhaps for his own ease. Math.function() is the syntax for performing and implementing in your code various mathematical functions, rather like the Math module in Python. Followed by “p=m.pow”, and “t=true.” m.pow is his code’s version of Math.pow(x,y), which sets the index of parameter x to y, so Math.pow(2,3) would be equal to 2³. This too was merely to save space. The t = true could be confusing for some. That’s when JSs automatic type-conversion comes in handy, (True = 1; 0 = False). So “t-true” sets “t=1.”

Now the main expression:

++t+m.floor(p(m.exp(m.PI),t))*t*t++-p(++t,t--)/--t

The ++t sets the variable t= t+1. I’ts the same as t += 1 in Python. You might have noticed that the code also contains “t++“, so what’s the difference between the two?
t++ increases ‘t’ by 1, but does not implement therein. Means if the code is t=3; t++*3; The first bit set’s ‘t’ equal to 3, and in the second, t is multiplied by 3 while at the same time increased by one. ++t is slightly different. It increases and implements right then. So ++t*3 would result in 9 not 6.
Then the m.floor function is used to round off a number to the last integer. So 5.9 would become 5. Math.exp(a) results in 10ª, while Math.PI is a constant, which of course is equal to 3.141592653589793.

That’s pretty much all the functions explained. After starting with the very deepest bracket, and working my way out to the end, I ended up with the following expression that’s equal to ‘2014’, and is like a simplified version of the original code. this:
2+(1070*2-Math.pow(4,4)/2).

To see how I got there, here’s a copy of the page on which I was making all the notes.