Web Speaks

Project Wide JavaScript Code Styling

2014-11-19T21:05:00.000-08:00

JavaScript is one of the hottest technologies in modern time. There are large teams working now on JavaScript projects. Due to a number of programmers involved in development, the code quality degrades and standards are forgotten. Every programmer writes JavaScript in her own way as we lack some standard conventions to follow. To avoid such situations, we have a utility available which is known as JSCS (JavaScript Code Styling). JSCS scans you JavaScript code and finds the styling errors in the code. You can then fix the code and fix it as per the standards. JSCS scans your code as per the standards followed by Google, jQuery, Airbnb, Crockford etc. JSCS is available as node package as well as Grunt task.

Here is the presentation of the whole process:

JSCS - How to Style your JavaScript Code from Arvind Bhardwaj

Fork on GitHub

Install as Grunt Task:

If you have implemented Grunt in your project, it is easier to use the JSCS Grunt task.
Command:

npm install grunt-jscs --save-dev

Now create your Gruntfile.js at project root as below:

// Gruntfile.js

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jscs: {
      src: "src/*.js",          // Source file to be checked
      options: {
          config: "config.json" // See in next step
      }
    }
  });

  // Load the plugin that provides the "jscs" task.
  grunt.loadNpmTasks("grunt-jscs");

  // Default task(s).
  grunt.registerTask('default', ['jscs']);
};

Create config.json for JSCS at project root:

// config.json
{
    "preset": "jquery",
    "fileExtensions": [ ".js", "jscs" ],

    "requireParenthesesAroundIIFE": true,
    "maximumLineLength": 120,
    "validateLineBreaks": "LF",
    "validateIndentation": 4,

    "disallowKeywords": ["with"],
    "disallowSpacesInsideObjectBrackets": null,
    "disallowImplicitTypeConversion": ["string"],

    "safeContextKeyword": "_this",

    "excludeFiles": [
      "test/data/**"
    ]
}

Run the Graunt task

grunt default

Here is the sample output for styling errors:

Here is the sample result for success:

Command line usage:

To use JSCS as command line utility, install the JSCS node package as:

npm install jscs -g

Now run the utility as

jscs <file_path> --config=config.json

jscs src/app.js --config=config.json

jscs src/app.js --preset=google

How to Enable AJAX in Magento Admin Grid

2014-10-18T00:09:00.000-07:00

Magento provides an ultra awesome framework for creating grids in admin panel. All the CRUD features are available in Magento admin grid. But sometimes you may want more. Like it may be nice to apply search or filter using AJAX in the admin grids. Again Magento provides an ultra easy way to apply AJAX in thee admin grids. Its just a three step process and your grid will start implementing AJAX.

Animating View in Backbone JS

2014-08-25T21:41:00.000-07:00

This is a small Backbone JS application that shows how we can animate views in Backbone JS. The animation effects have been generated using CSS3. The advantage of this application is that you need not to change anything in your views to apply the transition effect. This plugin only changes the way the viiews are rendered in the main application. This plugin has a render method that will render the views and apply necessary classes for the transition.

Animating Views in BackboneJS

Correct Way to Use Media Object in Phonegap

2014-08-25T05:56:00.000-07:00

Media object is the default PhoneGap API for playing audio files. But if you are frequently changing/playing the audio tracks in your application using Media, you may end up in some uncommon behaviours like audio stops playing. The console will show some error like 'Cant create audio track..'. Here is the right way to use Media object in PhoneGap.

Inheriting Views in BackboneJS

2014-07-29T06:57:00.001-07:00

BackboneJS provides an awesome technique for structuring our application code. And RequiresJS makes it modular. So we can write separate modules for each HTML block on our page. But sometimes separate views in our application have similar kind of functionalities. Most of the functions in both views are common. So it is not at all recommended to write that common code in both of the Backbone views. It will make application difficult to maintain. To avoid this we can implement a simple OOP technique known as 'Inheritance'. We can inherit one of the view in other view. So the child view will have all the functionalities of the parent view. Additionally we can add our own methods in the child view or we can override the parent methods in child view by creating methods with same name.

Implement Inheritance in BackboneJS

Live Demo Download Script

Communicating between views in BackboneJS

2014-06-23T21:32:00.002-07:00

If you have just started working in BackboneJS then you would have found yourself in a situation where you want one of the views to update or call a function in second view of your application. This is quite common situation while developing a Backbone application. There is no direct way to solve this problem and there may be several workarounds to do this. In this article we will take a look at two of the most common techniques to achieve communication between Backbone views.

Better Templating with Partials in Handlebars and BackboneJS

2014-06-17T20:32:00.000-07:00

One common problem that we face during BackboneJS is view management. Things are simpler when you are developing single page application. But when it comes to multi-page application in BackboneJS, it is common that views become unmanageable. Consider a situation where you are developing a mobile application in BackboneJS with multiple screens. Now you want that the header and footer should remain same throughout the application. There may be several strategies to handle this situation. Note that we have used Handlebars as templating system and the text plugin for reading templates.

Free Social Media Icon Set With PSD

2014-06-15T20:36:00.000-07:00

Here is the free social media icon set for your web site or blog. You can download the icon set along with the PSD file. The free icon set contains icons for all well known social media sites like Facebook, Twitter, Google Plus, LinkedIn, YouTube and lot more. This Icon set is contributed by Troy Hall, he works at Artful Club.

Top 100 Design Blogs to Follow

2014-06-15T20:23:00.000-07:00

Here is the list of top 100 design blogs that that you should follow in 2014. This infographic has been compiled by the awesome team at Artfulclub.

The substring Helper for Handlebar Templates

2014-04-28T20:55:00.000-07:00

Handlebars provide a very simple and sleek solution for microtemplating. You may like the simplicity of Handlebars for the first time. But with time your requirements may grow up and the simplicity may convert into pain as you will not be finding the common utility functions in Handlebars. In this article I have shown how to create a simple Handlebar helper for "substring". We will see how we can pass parameters to the helper functions in Handlebars.

Getting Started with Game Development in CreateJS

2014-04-07T20:03:00.000-07:00

CreateJS is a suite of JavaScript libraries and tools for creating rich and interactive web applications. CreateJS can be used for creating web pages, presentations as well as rich HTML5 games. CreateJS is basically a bunch of 4 different libraries which are:

EaseJS
TweenJS
SoundJS
PreloadJS

Introduction to CreateJS

Integrating Angular JS with Magento

2014-03-26T03:02:00.001-07:00

AngularJS is one of the most powerful JavaScript MVC these days. On the other hand Magento is the leading e-commerce framework. In this tutorial I have shown how to integrate angularjs with Magento. At the end of this tutorial we will end up with a single page application in Magento. Isn't that cool...

Integrate Angular JS with Magento

An Ultimate Guide to Openlayers: Free Maps for Web

2014-03-17T19:56:00.000-07:00

This article is dedicated to OpenLayers, a free maps service for the web. Openlayers is a decent alternative for the Google Maps. In this tutorial I will tell you how to use the basic features in Openlayers.

Openlayer Maps

Implementing Spell Check in PHP using Pspell

2014-02-19T01:45:00.005-08:00

If you want to implement spellcheck functionality in PHP then believe me, there is no easy way to do it. PHP has some built in functions to check the similarity between two strings. Two of these are levenshtein and similar_text. But you still need a database of words to match the input. PHP has an extension Pspell to do it, but due to lack of documentation, it is little bit difficult to implement. Here we will see how to implement the spell check functionality in PHP with Pspell.

20 Cool Hover effects Using CSS3 Transition

2013-12-15T22:07:00.001-08:00

CSS3 has provided the designers a magic wand for which designers have always craved for. Now using CSS3 they can create such effects which were not possible without Flash few years back. In this tutorial I have created some link hover effects using CSS3 tansitions and CSS pseudu elements. The effects have been achieved using simple tricks combining the transitions and pseudo elements.

CSS3 Transition Effects

Live Demo Download Script

Dynamically Enable/Disable Payment Method in Magento

2013-12-04T23:01:00.000-08:00

In my recent Magento project I faced a situation in which the Payment methods needed to be enabled/disabled dynamically based on the some conditions. I googled a bit around I found some interesting solutions. I am wrapping up the solution in this article. Magento provides the isAvailable() method in the model of the each payment method. This method tell Magento if the corresponding payment method is available or not for checkout.

Create Smiling Face in HTML5 Canvas

2013-11-30T03:58:00.000-08:00

Today we will create an interactive smiling face in HTML 5 canvas. The eyes of the face will follow the movement of the mouse over the canvas. The concept is very simple, just to redraw the eyes according to the position of the cursor over the canvas. Here is the step by step tutorial to achieve this.

Smiling Face in HTML 5

3 ways to Add JavaScript Translations in Magento

2013-10-24T02:10:00.000-07:00

If you want to add translation in JavaScript code of your Magento module, there are three ways to achieve that. You can select any approach that suits your requirement the best.
Method 1: Direct Translation: In this method you can use the defalt Magento translation function to perform the translations. For example in your .phtml you can write the following code:

//javascript
alert("<?php echo Mage::helper('mymodule')->__('I have been translated.') ?>");

How to create new helpers in Magento custom module

2013-08-18T22:31:00.004-07:00

Magento's Helper classes contain utility methods that will allow you to perform common tasks on objects and variables. Sometimes you may want to add new utility methods or classes in your Magento module. Helpers are a good place to create these utility methods or classes. This tutorial will show you how you can add a new helper class to your Magento module.

How to Add Translation to Custom Module in Magento

2013-06-05T22:53:00.005-07:00

If you are a Magento extension or module developer then you might want to internationalize your module/extension by translating it into different languages. This article will tell you how to add translation to your Magento module or extension. First of all you need to keep in mind that to make translation work in Magento, you should never write bare strings anywhere in your module.

How to Add Date Picker in Magento Config Page

2013-05-15T01:54:00.000-07:00

Sometimes you may want to add date picker in the Magento admin configuration page. There is no direct model that can be called to add the date picker. However there is an easy workaround. Just follow these simple steps and add the date picker. You can find this implementation working in my new Magento extension Featurise.

Featurise - A Feature Tour Plugin for Magento Released

2013-05-15T01:27:00.000-07:00

Featurise is a new feature tour extension. This extension allows you to highlight new features on your Magento store. You can specify newly added features through back-end which are highlighted in form of a beautiful demo playback on your store.

Identifying WordPress Vulnerabilities

2013-05-05T23:15:00.000-07:00

Introduction

We all know that Wordpress is the primary CMS system used on the Internet. We also know that security in Wordpress is not always taken for granted. The Wordpress CMS system can have different vulnerabilities in older versions, so it’s vital keep it up-to-date. We should also be on alert for new zero-day vulnerabilities and patch those systems that are affected. Keep in mind that it's not uncommon to see new zero-day vulnerabilities being discovered in newest versions of Wordpress. We should also configure the Wordpress system as securely as possible; there are multiple articles on the Internet describing how to do that, so we won't go into that in this article. Instead, we'll describe basic principles of identifying vulnerabilities on Wordpress.

Fancy Product Compare Magento Extension Released

2013-04-15T22:48:00.001-07:00

Recently I have released my new Magento extension with the name 'Fancy Product Compare'. Fancy Product Compare allows the visitors on your store to compare the products in a very convenient way. Product comparison is done in a fancy popup window where user can add the product to cart or wishlist. So user is never moved away from the current page and can manage the product comparison list easily and effectively.

Advanced Version of Basket Magento Extension Released

2013-04-14T23:12:00.000-07:00

I have upgraded the 'Basktet' Magento extension to its advanced version. Basket shows all your cart details on a popup box in a beautiful fashion. Just click on 'My Cart' and all products are shown in the popup window. You can easily remove and update the items in the cart without navigating to any other page and your cart is updated in seconds. So Basket can save a lot of customer's time that they spend navigating here and there.