Category Archives: Web Technology

Styling table cells in a particular column using CSS

While cleaning up and refactoring my code, i used the following CSS hack. This one made my code look more beautiful and readable,  To apply CSS style to every table cell (td) in a particular column, without applying the class/style attribute to every table cell in that column, and without JavaScript, we can use pseudo classes and /or sibling selectors:  For the first and last columns you can use the :first-child and :last-child pseudo class: td:FIRST-CHILD { /* Properties for first cell of every row */ } td:LAST-CHILD { /* Properties for last cell of every row */ } You can also To style specific table cells you can use and combine :first-child with the adjacent sibling selector+  td:first-child { /* Properties for first column of every row */ } td:first-child + td { /* Properties for second column of every row */ } td:first-child + td + td {… Read the rest

Web development and debugging tools

MVP Summit at Microsoft was an event with loads of information. Within the short span of three days, i learnt about several new tools that can make life of a developer easier. These tools can be used for development, debugging, testing and more processes. Here are some of the tools which i came across and learnt and found useful for a developer . 1. Fiddler : A free web debugging proxy for any browser, system or platform 2. JSHint : A tool that helps to detect errors and potential problems in your JavaScript code. 3. JSComplexity : Software complexity analysis for Javascript projects. 4. ESPrima : A high performance, standard-compliant ECMAScript parser written in ECMAScript. 5. Postman (Chrome extension) : A REST Client that stores history of sent requests and collections. Chrome Webstore : Postman 6. Poster (Firefox extension) : A developer tool for interacting with… Read the rest

Upcoming changes in ECMAScript 6

ECMAScript is a standard that scripting languages like JavaScript and ActionScript are based on. ECMAScript is owned by ECMA International which owns other number of standards like ECMAScript intern and JSON too.  At one of the sessions today during MVP Summit,  the speaker discussed about ECMAScript 6 and changes in programming constructs being added to it. ECMA 6 allows the following constructs: Let and Const let is the new var const is read only let let/const can replace var Semantics Block scoped No use before declaration Const cant be reassigned Let Statement const Statement New collections Set Like an array, but no duplicates and O(1) add/remove/has Map Map any object or primitive to any other object or primitive in O(1) complexity WeakMap Can only map objects to other objects Holds keys and objects weekly Internationalization in ECMA 6 Huge Unicode data tables Culture sensitive string sorting, number/date formatting… Read the rest

Debugging in Smarty template

While trying to debug a variable in PHP i love the var_dump() method. Off course i have debugger tools like xDebug enabled in my IDE i love using var_dumps. One of the thing i like about var_dump is it gives the complete structure of an object at that instance. Using MVC model for PHP usually ties you up with a framework and a choice of view. For Zend it is smarty which i use, and smarty is not straight forward to debug like PHP. After some research i found out various ways to use var_dump. Here are they: Method 1: {php} $var = $this->get_template_vars('var'); var_dump($var); {/php} Using php tags is not good practice and ideally they should be disabled for security reasons anyway Method 2: {$var|@print_r} It only outputs the values and not the keynames, and there are no spaces between the values, so it’s not ideal for debugging. Method… Read the rest

Centre a DIV Block using CSS Styling

Working on some templates these days, one of the most painful thing i found was styling the div containers. While styling the DIV containers, one of the roadblock was to centre align a DIV. At first i thought its as simple as adding text-align styling to center for that div as below: #divToBeAligned { text-align: center ; } However, the rule centres the text inside the box, instead of the block itself. This was causing the block to stay at the same position but internal contents to be aligned center, which is not as I desired i.e. centre the entire block but leave the internal contents formatted as it was before. To center the block in CSS i had to do the following: 1. Specify a width for the DIV block. 2. Set both its left and right margins to auto. When both margins are set to auto, web browsers… Read the rest

Redirect WordPress urls after changing WordPress Permalink Settings

Recently i changed my blog’s permalinks. This means that my blog post urls would be representing a different structure now. Earlier they were in a format You may notice blog post month and year present in the URL. I changed the permalink settings to by selecting an option of setting permalinks as blog post name only. When i started this blog in late 2009 I originally setup my WordPress site to use the “Month and name” permalink option so that my post urls would include the date they were posted. However it is later i realized the “Post name” option to be better as it is short. Post publish date is anyways published in the post content itself and don’t need tobe present in the URL. After I changed the settings all of the earlier blog post URLs started showing a 404. This affected me a lot in… Read the rest

Exclamation mark before a function in Javascript

While digging into bootstrap JavaScript plugin files i stumbled across a piece of code in JavaScript where exclamation mark was used before a function call. !function () {}(); This syntax known as Negated closure is something which i encountered for the first time. Lets see more details about this: Syntax for a function definition in Javascript is : function foo() {} You may note that there’s no semicolon after the curly braces end because this is a statement and you need a separate function call or invocation of foo() to actually run the function. Unlike above code which is a statement, !function foo() {} is an expression, but that still doesn’t make a function call, but we can use !function foo() {}() to do the same, as () has higher precedence than !. So, as we know exclamation mark ! returns Boolean, but it also converts the function declaration statement… Read the rest

Understanding JavaScript Closures

Javascript closures are considered an advanced topic in Javascript and understanding closures is essential to master Javascript. After reading this article, app developers will have an understanding of the following: What are Javascript closures How are Closures useful Why to use Closures How to use Closures Javscript Closure Examples JavaScript is a functional language unlike imperative languages like C/C++/Java. Using Javascript it is possible to assign a function to a var, pass one as an argument to another function, and return a function with the return keyword. Even a function can be declared inside another function, with all the scoping rules. So if there is a function within another function, the inner function has access to variables of the outer function. One of the situation where closures play a role is when a function definition is nested within a parent function that returns the nested function object as the value… Read the rest

WinJS.Binding.optimizeBindingReferences for Windows 8 App

As discussed recently i am working on a Windows 8 app for WindowsVJ readers. The application is in final phase and i submitted the app at the Windows 8 app store to check if it passes the Windows 8 app store requirements. After a few hours of submission i received an email which said my application does not pass the Windows Application Certification Kit test. The report generated mentioned following error: The Optimized Binding References test detected the following errors: Impact if not fixed: When using bindings, WinJS.Binding.optimizeBindingReferences should be set to true to optimize the memory usage. How to fix: Set WinJS.Binding.optimizeBindingReferences to true in the app’s JavaScript. Fixing this error is very simple. By adding WinJS.Binding.optimizeBindingReferences = true in default.js your application can pass through the WACK test. The code to be added would be: WinJS.Binding.optimizeBindingReferences = true; This variable determines whether or not binding should automatically set… Read the rest

What does CSS asterisk selector means

I came across CSS * selector during the Internet explorer session at MVP Summit 2013. In this post i would be discussing about asterisk selector in CSS, multi asterisk selector and another basic CSS selector that i recently used with Bootstrap. CSS * selector selects all elements in a DOM (Document Object Model). The * selector can also select all elements inside another element. For a single * usage in CSS stylesheet, “*” means apply given styles to all the elements. * is sometimes referred as a universal selector and can be used to set a styling for every DOM element. For example, to apply a padding of 10 px to every element on an entire page use: * { padding: 10px; } You can also use CSS * selector with sub-selections. For example to add a margin of 10px to all elements within a paragraph tag use: p *… Read the rest