simpel-template

Simpel | A free single page template for photographers

Simpel is a free responsive html5 template for photographers specially designed for flexibility and ease of use.
This template is a great way to showcase your portfolio and can be adapted for different features and needs.

Demo
Download

It has got the following great features :-

  • Single Page Website.
  • Completely optimized for mobile and tablets.
  • 96% PageSpeed.
  • Completely free to use as in speech.
  • Built on top of the awesome framework Bootstrap.
  • Uses css3 animations and transitions for effects.
  • Smooth scrolling to quickly navigate the page.
  • All the images are downloaded from picjumbo.com and are free to use for commercial.

Here’s is a full screenshot :

full screenshot of simpel

Subah | A free responsive theme for app showcase

Subah | A free responsive theme for app showcase

Quick Links :

Demo

Download

Intro :

There are now more than 1 million apps on android Every app needs a website to showcase the creator or more apps , I am releasing this theme for the app developers.
I hope you like .Subah means morning in Hindi and that is what this theme is : A new beginning.
Did I mention that that it is completely free to use.

Features :-

  • html5 , css3 , jQuery and Modernizr.
  • Completely Responsive.
  • Uses Bootstrap 3.
  • Uses CSS3 transitions as much as possible.
  • Uses flexible nav jquery plugin.
  • Images are downloaded from picjumbo.com that is they are free to use.
  • Uses the web best practices
  • PageSpeed – 96% Link

Here are some screenshots :-

jade templating engine

Getting started with jade

Introduction

Jade is a high performance and feature-rich templating engine heavily influenced by Haml and implemented with JavaScript for node.Jade is a clean, whitespace sensitive syntax for writing html.This a tutorial to get started with jade.

Basic Syntax and command line

Please install node-js for making use of jade.

Run this to install jade globally

npm install -g jade

Fire up your favourite text editor and type this

p.
 Hello World

and save it as hello.jade.

Then from the command line navigate to the directory where you have saved hello.jade and then run jade hello.jade

This will create a new file as hello.html and if you open that in a text editor then it will give :-

<p>Hello World</p>

Be careful not to use spaces and tabs both at the same time :-

Similarly :

this :-

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      p.Hello Hello World

will get converted to

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Jade</title>
		<script type="text/javascript">
			if (foo) {
				bar(1 + 5)
			}
		</script>
	</head>
	<body>
		<h1>Jade - node template engine</h1>
		<div id="container" class="col">
			<p>You are amazing</p>
			<p>
				Jade is a terse and simple
				templating language with a
				strong focus on performance
				and powerful features.
			</p>
			<p class="Hello">Hello World</p>
		</div>
	</body>
</html>

Using jade with express

To understand how to use jade we will have to install node-js and its popular framework express-js.

npm install -g express

Express is bundled with an executable, aptly named express. If you install express globally with npm you’ll have

it available from anywhere on your machine.This tool provides a simple way to get an application skeleton going, but has limited scope, for example it supports only a few template engines, whereas Express itself supports virtually any template engine built for node.

Usage: express [options]

Options:

  -h, --help          output usage information
  -V, --version       output the version number
  -s, --sessions      add session support
  -e, --ejs           add ejs engine support (defaults to jade)
  -J, --jshtml        add jshtml engine support (defaults to jade)
  -H, --hogan         add hogan.js engine support
  -c, --css   add stylesheet  support (less|stylus) (defaults to plain css)
  -f, --force         force on non-empty directory

Then run

express jadedemo

This will create all the essential files for a node-js application like app.js and package.json.

After that ,

cd jadedemo && npm install

This is will install all the dependencies required for the application.

Sources and important Links

  1. Jade Official

    [snap url="http://jade-lang.com/" alt="jade official"]

  2. Jade Github

    [snap url="https://github.com/visionmedia/jade" alt="jade github"]

  3. Interactive Tutorial :

    [snap url="http://naltatis.github.io/jade-syntax-docs/" alt="jade github"]

javascript prototype

Understanding javascript prototype

Every object in javascript has got a prototype method which basically adds new methods to the base object which then can be called on instance objects.

Comparing with other languages , constructor functions are classes and the properties of the prototype (i.e. of the object referenced by the constructor function’s prototype property) as shared members, ie members which are the same for each instance. In class-based systems, methods are implemented the same way for each instance, so methods are normally added to the prototype, whereas an object’s fields are instance-specific and therefore added to the object itself during construction.

A simple example

Type this in Chrome Devtools console :

function Animal() {} // This is a first class functional object
Animal.prototype.speak = function() { console.log('OK'); } //Add a prototype function
var cat = new Animal(); //Creates a new Animal
cat.speak(); // Will call that function and print OK

In the above example we first defined the constructor function and then added speak function to it.
We then initialized cat as an Animal and called the that function on it.

Another Example

//Define a functional object to hold Animal
var Animal = function(name) {
    this.name = name;
};

//A new getter for that name
Animal.prototype.getName = function() {
    return this.name;
};

//Create a new object of type Animal
var cat = new Animal("Kitty");

//alert(cat.getName()); will use the getter

//This is where we add the speak function to Animal
Animal.prototype.speak = function() {
    alert('Hello, my name is ' + this.getName());
};

//Call the new method on cat
cat.speak();

When you will run the above code in devtools console , you will get an alert saying My name is Kitty.
In the above example , we created the instance object then added a method to the base , and then called the new method on the instance object.
This is how Inheritance works in javascript.

Sources :

http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work

http://ejohn.org/apps/learn/#65

svg-element

Understanding SVG elements using Angular-js

Scalable Vector Graphics are an important part in responsive web-design because instead of using different images for each device you can use svg vectors to define an image and it will automatically scale to the appropriate size.

I have made a small demo for understanding basic svg elements using Angular-js.
Drag the sliders and understand how the svg element as well as the code changes accordingly.

DEMO

splice javascript

javascript splice method.

The splice() method of Array in javascript changes the content of an array, adding new elements while removing old elements.
If you specify a different number of elements to insert than the number you’re removing, the array will have a different length at the end of the call.

The Syntax is

array.splice(index , howMany[, element1[, ...[, elementN]]])

where

index : Index at which to start changing the array. If greater than the length of the array, no elements will be added or removed. If negative, will begin that many elements from the end.

howMany : An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed. In this case, you should specify at least one new element. If howMany is greater than the number of elements left in the array starting at index, then all of the elements through the end of the array will be deleted. If no howMany parameter is specified (second syntax above, which is a SpiderMonkey extension), all elements after index are removed.

element1, …, elementN : The elements to add to the array. If you don’t specify any elements, splice simply removes elements from the array.

This method returns an array containing the removed elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

Example Usages of .splice :-

1.To prepend an element at the start of an array.

Type this in your Devtools console

var array = [1,2,3,4] //We define the initial array
->undefined
array.splice(0,0,5) //index is 0, howmany is 0 and element is 5
->[]
array
->[5, 1, 2, 3, 4]
array.splice(0,0,6,7)//You can prepend n elements
->[6, 7, 5, 1, 2, 3, 4]

2.To remove the first element of an array.

To remove the first element from array ,

array.splice(0,1)

Type this in Devtools console :

array = [1,2,3,4]
->[1, 2, 3, 4]
array.splice(0,1)
->[1]
array
->[2, 3, 4]

Similarly to remove n elements from the start of an array :

array.splice(0,n)//n is no. of elems

3.Add and Remove elements from array

Let assume we want to add as well as remove elements from array at the same time
Consider code :
cities.splice(2,1,"Mumbai","Nagpur")

The index is 2 i.e. the 3rd element,
howmany is 1 ,i.e 1 element will be removed ,
“Mumbai”,”Nagpur” will get added at index 2.

Type this in console :-

var cities = ["Pune", "Bangalore", "Delhi", "Kolkata"]
->undefined
cities.splice(2,1,"Mumbai","Nagpur")
->["Delhi"]
cities
->["Pune", "Bangalore", "Mumbai", "Nagpur", "Kolkata"]

Sources

MDN splice

angular-js router

Getting started with Angular-js Router

Angular-js is an awesome MVC framework for javascript.Routing and Deep-linking is an important part of any web application because just a state can be shared directly via the url.
Angular-js Router is one of the most important part an ng-app.

Important Links :-

Github link

Docs for ngRoute
Docs for $routeProvider
Docs for ngView
Download angular-route.min.js

1.Simple Start

Since Angular version 1.2 , you need to angular-route is in a different module and needs to be included seperately .
$routeProvider is angular module where we define the templateUrl and the controller.We need to define the routes inside App.config and give the template Url.The template can be defined inside script tags
<script type= text/ng-template>Your html Template</script>
or can be externally included.

ng-view is the directive that directly complements $route.

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Here’s the most simple version of an angular app running ngRoute

App.config(function  ($routeProvider,$locationProvider) {
    $routeProvider.when("/hello",{ templateUrl : "hello.html"});
    $locationProvider.html5Mode(true);//We are using the html5 mode to make it work in plunkr
});

2.Multiple routes and otherwise

Here’s Another example that makes use of .otherwise() of $routeProvider.
From docs :
.otherwise() sets route definition that will be used on route change when no other route definition is matched.
ngRouter lets you define different paths and their corresponding templates and controllers at the end you can define a otherwise function to redirect or use a template when there is url hash which has not been defined.Its important for error handling.
The Route path is matched against $location.path and if $location.path contains redundant trailing slash or is missing one,the route will still match and the $location.path will be updated to add or drop the trailing slash to exactly match the route definition.

$routeProvider
	.when("/link1",{
		templateUrl : "js/hello.html" , controller : "ChildCtrl1"
	})
	.when("/link2",{
		templateUrl : "js/hello2.html" , controller : "ChildCtrl2"
	})
	.otherwise({
		templateUrl : "js/hello3.html"
	});

Here’s the plnkr for it

3.Using $routeParams

The path defined in $routeProvider can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

For example /list/:id will match /list/1 and give $routeParams.id = 1.

The path can contain optional named group parameters with a question mark.FOr e.g.link1?search=hello will give
$routeParams.search = "hello"

Here’s is the plnkr for that

4.Loading a template according a condition

There are 2 simple ways to load or redirect to a particular route according to some variable or condition.

Here’s is the first way using resolve method :

According to docs ,

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller.If any of these dependencies are promises,the router will wait for them all to be resolved or one to be rejected
 before the controller is instantiated.If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired.If any of the promises are rejected the $routeChangeError event is fired.

To make use of it , lets say we have a boolean variable isCurrentTaskDone defined on $rootScope, which decides whether we should go to the next task.

If the user clicks on the next task , we can check the $rootScope for the boolean value , if true then the factory will return true , and if false the app gets redirected using $location service to /link1.

Here’s the code

App.run(function  ($rootScope) {
	$rootScope.isCurrentTaskDone = false;
});

App.config(function  ($routeProvider,$locationProvider) {
	$routeProvider
	.when("/link1",{
		templateUrl : "js/hello.html" ,
		controller : "ChildCtrl1",
		resolve : {
			factory : function  ($rootScope,$location) {
				if ($rootScope.isCurrentTaskDone) {
					return true;
				}else{
					$location.path('/link2');
					return false;
				}
			}
		}
	})
	.when("/link2",{
		templateUrl : "js/hello2.html",
		controller : "ChildCtrl2"
	})
	.otherwise({
		templateUrl : "js/hello3.html"
	});
	$locationProvider.html5Mode(true);//required to work in plnkr
});

Here’s is the plnkr demo

The awesome blog of a Javascript developer.