vivek Vivek Kuniyil

All articles by vivek

 

Frontend Guidelines 2

http://viv3k.com/blog/wp-content/uploads/2016/05/frontend-guidelines.html...
Continue reading...  

Frontend Guidelines

HTML Semantics HTML5 provides us with lots of semantic elements aimed to describe precisely the content. Make sure you benefit from its rich vocabulary. <!– bad –> <div id=”main”> <div class=”article”> <div class=”header”> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!– good –> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime=”2015-02-21″>21st Feb,...
Continue reading...  

Want to learn JavaScript libraries quickly?

First and most importantly, learn how to write in pure JavaScript. Have an understanding of what libraries are built from. tl;dr – Find an application you like to make, and remake it in every new library you want to learn. I teach a lot of people to write in Javascript. And the thing I have...
Continue reading...  

Throbbing Things in CSS

Throbbing Things in CSS :CSS .throb { border: 3px solid #555; height: 50px; width: 50px; -webkit-border-radius: 50%; -webkit-animation: pulsate 2s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0; z-index: 999; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; } 50% { -webkit-transform: scale(0.75, 0.75); opacity: 0.5; } 100% { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; }...
Continue reading...  

Useful Debug Mode console.log messages in JavaScript

Enable console.log messages only when a variable is set to true: var debugMode = true; var debugLog = function(){ debugMode && console.log.apply( console, arguments ); } Now in your code, you can insert any number of debug log messages, that will be visible only when the debugMode variable is set to true. debugLog(“Ops! Debug Mode...
Continue reading...  

Our Wedlock

...
Continue reading...  

Javascript’s getElementsByClassName Gotcha’s

<div class=“box”>1</div> <div class=“box”>2</div> <div class=“box”>3</div> Let’s say I want to output the innerHTML value, and then delete each box from the DOM. with getElementsByClassName, we can easily do: var boxes = document.getElementsByClassName(‘box’); for(var i=0; i<boxes.length; i++) { console.log(boxes[i].innerHTML); boxes[i].parentNode.removeChild(boxes[i]); } Gotcha! This, sadly, will not work. The output: 1 3 ERROR The reason is...
Continue reading...  

jQuery DOM creation tips

I want to share a neat little trick with jQuery DOM creation. I often see jQuery scripts create DOM elements like this: var $elem = $(‘<div>’ + text + ‘</div>’); // OR var $elem = $(“<div>”).addClass(‘some-class’).text(“text content”); There is nothing wrong with the above methods, but you can actually pass in an object to extend the element being created like so: var $elem =...
Continue reading...  

ARRRRGH… How do I get all the errors created by jquery .validate()

Ahhh yes… So you just validated your awesome form and want to grab all the awesome errors for some awesome reason. Just add a sprinkling of: var validator = $(“#awesomeForm”).validate(); var errors = validator.errorList; This will give you a list of awesome validator error objects that includes the error message and the actual awesome jquery element object. You’re welcome 🙂 (I used “awesome” quite a bit)...
Continue reading...  

JavaScript Design Patterns

After reading Addy Osmani’s book ‘JavaScript design patterns’ , I thought I would summarize some of the patterns I found useful and have been using in some projects.It is an awesome book and has a lot of useful information for JavaScript framework developers. Module pattern The Module pattern encapsulates “privacy”, state and organization using closures. Itprovides a way of wrapping a mix of public and private methods and variables. With this pattern, only a public API is returned, keeping everything else within the closure private. var myNamespace = (function ()...
Continue reading...  

Fast ClassName Manipulation

For those tired of jQuery chaining or bothered by having multiple classLists in your code, I have ingenious solution: function classer(elem, str) { str.replace(/(?:\s|^)\-([^\s$]+)/g, function(m,c) { if (!!c && elem.classList.contains(c)) elem.classList.remove(c); return ”; }).replace(/(?:\s|^)\+([^\s$]+)/g, function(m,c) { if (!!c && !elem.classList.contains(c)) elem.classList.add(c); return ”; }) return elem; } //Example classer(div, ‘+add_class -remove_class’); Prefix your class name...
Continue reading...  

google+

...
Continue reading...  

jQuery tutorial TL;DR

This is just a simple jquery tutorial, more of a reference guide for common jQuery methods and features. For complete documentation visit http://api.jquery.com/ A jQuery object contains a collection of DOM elements that have been created from an HTML string or selected from a document. The jQuery object itself behaves much like an array it...
Continue reading...  

The best css evar

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } W3C really screwed up the box model. This will make your webs better. (It doesn’t work in IE7, but why are you still supporting it anyway?) Side note, IE6 is border-box by default. IE7 changed it to follow W3C standards eventually. Perhaps one of those times...
Continue reading...  

Javascript Array push Object by reference

Let’s have a look at what is happening: var abc = { a: 10, b: 20}; A new object is created in memory and assigned to the variable abc. var def = []; A new array is created in memory and assigned to the variable def. def.push(abc); Inside the array there is now a pointer...
Continue reading...  

online PDF viewing

There are many security concern about PDFs, there’s malware, malicious code that contaminated the file and some other security issues. to tackle those issues, use google docs viewer. <a href=”https://docs.google.com/viewer?url=[url-to-pdf-file]” title=”View PDF ” target=”_blank”>View PDF Online</a> I think it’s much safer than opening the file on your local computer....
Continue reading...  

Do I Need a CSS Reset?

Lately I’ve been getting quite a few emails asking me if they should include a CSS reset stylesheet in their projects. Basically each time I answer these emails, my response is always yes. Not everyone thinks it is necessary to include a reset stylesheet, but I find it can’t hurt by including one. So people...
Continue reading...  

jQuery DOM cache object

The first problem with jQuery is uncached queries. Instead of doing something like: $(‘h1’).addClass(‘inactive’); $(‘h1’).text(‘hello’); $(‘h1’).animate({height: “100px”}); You have to do that: var $h1 = $(‘h1’); $h1.addClass(‘inactive’); $h1.text(‘hello’); $h1.animate({height: “100px”}); Because the h1 is just fetched once in the DOM. This is faster. Sometimes you will reuse this same h1 in another function. So you have to re-declare the $h1 variable,...
Continue reading...  

Get Lazy in javascript coding

Lazy ways of coding in javascript. Array Creation Normal way var a = new Array(); Lazy way var a = []; String to Number Conversion Normal way var num = parseInt(‘100’); Lazy way var num = ‘100’*1; Number to String Conversion Normal way var str = 100.toString(); Lazy way var str = ” +100; var str = +100; Object creation Normal way var obj = new Object(); var obj = Object.create(null); Lazy way var obj = {};...
Continue reading...  

Improving Code Readability With CSS Styleguides

Once your latest project is finished, you are very likely to forget the structure of the project’s layout, with all its numerous classes, color schemes and type setting. To understand your code years after you’ve written it you need to make use of sensible code structuring. The latter can dramatically reduce complexity, improve code management...
Continue reading...  

JavaScript: Is the variable defined?

Sometimes, you may want to check if a variable is already defined e.g. to not override definitions made by other scripts. However, there are many ways to check if a variable is or isn’t defined in JavaScript. Here, I’ll try to cover some of them. The first one is checking if the value of the variable is identical to undefined: var x; // x is declarated, but doesn’t has a value i.e. undefined if...
Continue reading...  

JavaScript: Understanding ‘this’

The ‘this’ keyword in JavaScript can be a bit slippery. If you are coming from aclassical language like C++ or Java you might be surprised by how it behaves inJavaScript. JavaScript uses late binding – meaning that ‘this’ isn’t evaluated until execution time.Here is the main thing to remember: what ‘this’ is a reference to depends on how a function is invoked. There are four ways to invoke a function in JavaScript: Function,Method, Constructor, and Apply. Function When you create...
Continue reading...  

How to comment code

Way too often do I see code that is poorly commented. Here are some guidelines that I try to follow for comments: Only describe how when complicated Always describe what Do this at the file/module, class, and function/method level You can avoid doing it for functions/methods when they’re very short or obvious Describe why if not obvious Which is most of the time More important than what and how since you can eventually figure those out from reading the code Use a style guide that covers comments and refer to it often I’d...
Continue reading...  

Tips for Web Designers

Poorly written web writing misleads visitors and wastes millions of hours daily. For today’s more than one billion Internet users, that translates to frustration. For your web design clients, it means missed opportunities. Gain insight into highly effective web writing tactics that will help promote positive on-line experiences with every website you design and develop....
Continue reading...  

My first blog

Welcome to my blog! 😛...
Continue reading...