JavaScript Training Day 1

Introduction to Basic HTML, CSS & JavaScript

(Day - 1)

This tutorial is meant to give you a crash course into most important concepts of HTML tags, CSS declarations and JavaScript Programming. It is assumed that you have some very basic exposure to HTML Tags.

HTML Tags Basics

At the most basic level understand following are most popular HTML tags

  1. Div - <div>
  2. Span - <span>
  3. Text Format - <b>, <i>, <strong>
  4. Paragraph - <p>
  5. Headers - <h1> to <h6>
  6. Table,Row, Column - <table><tr><td>col1</td><td>col 2</td></tr></table>
  7. Anchor Tag - <a href="...."></a>
  8. Image Tag - <img src="...."></img>
  9. Line Break - <br>
  10. Bullets - <ul>, <ol> and <li>
  11. Forms - <form>
  12. Form elements - <input type="..."></input>, <textarea>, <select> etc

These elements can be distinguished between two type

  1. Block Elements - Which take up a block of area on HTML, forcing next element to come on next line
  2. Inline Elements- Which all elements to exist on the same line

 

It is important to understand which of these elements are Block and which are Inline. This jsFiddle code should help you understand the difference. The home work is to try out all the above elements and distinguish if they are block or inline elements

[iajsfiddle fiddle="4W2NN" height="500px" width="100%" show="result,html,css" skin="default"]

 

CSS Primer

CSS properties can be declared in <style> tag with in the same HTML Page or in separate css files which are included as <link href="special.css" rel="stylesheet" type="text/css">

CSS style can be applied in following manner

  1. CSS style can be applied globally for a particular element 
    1. div { background:yellow}  - This makes all div's background yellow
  2. CSS style can be applied to a CSS Class
    1. .myclass {border:1px solid blue; } - This makes any element with class="myclass" border as solid blue
  3. CSS style can be applied to a Element Id
    1. #myid { color: white ; } - This makes any element with id = "myid" text color to white

Refer to following JSFiddle to understand the above

[iajsfiddle fiddle="UG22N" height="300px" width="100%" show="result,html,css" skin="default"]

CSS Styles can also be used in permutation and combinations of above. There are mainly 2 things to look at here

  1. CSS Style for multiple combinations - These are comma separated
  2. CSS Style for nested elements - These are space separated

[iajsfiddle user="rohitghatol" fiddle="aHASr" height="500px" width="100%" show="result,html,css" skin="default"]

Understanding Padding and Margin

[iajsfiddle user="rohitghatol" fiddle="D83bP" height="300px" width="100%" show="result,html,css" skin="default"]

 

JavaScript Primer

In this part of JavaScript Primer we will cover precisely the following

  1. Global Vs Local Variables - Most important Anti Pattern
  2. Functions in JavaScript. How functions are first class objects in JavaScript?
  3. Popular and Easy to understand Class System
    1. Function based Class Systems
    2. Closure based Class Systems and private variables
    3. Prototype based Class System
  4. Understanding Scope in JavaScript. The misconception around 'this' keyword

We are deliberately not covering DOM Manipulation, Ajax as this would be covered in Day 2 - jQuery Primer

Topic 1 - Global Vs Local Variables

In JavaScript we have variable scope defined at function level. However a common mistake or anti pattern is how we define the variable. See the jsFiddle below

 

[iajsfiddle fiddle="4bTmm" height="400px" width="100%" show="result,js,html" skin="default"]

 

Topic 2 - Functions are first class Objects

 

[iajsfiddle fiddle="KRnBJ" height="500px" width="100%" show="result,js,html" skin="default"]

 

Topic 3 - Object Oriented Programming - Simple way to declare Classes

[iajsfiddle fiddle="bpYFU" height="400px" width="100%" show="result,js,html,css" skin="default"]

 

Topic 4 - Object Oriented Programming - Private Variables

[iajsfiddle user="rohitghatol" fiddle="DM8FJ" height="400px" width="100%" show="result,js,html,css" skin="default"]

Topic 5 - Inheritance

Until you get out of your Java or C# Class paradigm, it is best to delay this topic. First of all JavaScript doesn't have classes, it only have objects and a Function is a first class Object. The whole confusion is caused by the use of new keyword.

In JavaScript, Inheritance can be done is two ways

  1. Classical - Mimicking a concept of Class in JavaScript
  2. Modern/Prototypal - Leaving Classes out and inheriting from other Objects

More on this later.

Topic 6 - Variable Scope and confusion around 'this' keyword

Lets see the problem first

 

[iajsfiddle fiddle="aAakG" height="500px" width="100%" show="result,js,html" skin="default"]

 

 

Here is the solution for the same

 

[iajsfiddle user="rohitghatol" fiddle="ALxSN" height="500px" width="100%" show="result,js,html" skin="default"]

 

 

Amazon AWS - NodeJs - Solr Search Experiment

At Synerzip we are doing a new experiment with Amazon AWS, NodeJs and Solr Search.

Overview

Synerzip is a growing company, and we are seeing need of software stack to manage our internal operations. One such requirement is the ability to search our growing number of documents (especially our HR Team).

Application Scope

In the spirit of MVP (Minimal Viable Product) we are keeping our scope very limited. The Scope is to develop a short and sweet Resume Management System, that can be later bloated for other Document and Information Management Service

User Stories

Few User Stories to layout a picture

As a HR, I want to upload a Resume with a form (stating various aspect of an Employee), so that this gets registered in the Company Database

As a Employee, I want to search for the Resumes, so that I can find which person meets my skill set criteria

As a Employee, I want to see categories along side search search result for skills (Java, JavaScript, .NET), so that I can further narrow the search result

As a Employee, I want to see experience range along side search result (1-3, 3-6,7-10,10+), so that I can further narrow the search result

Search and Upload Resume UX

Managers can search for people's resume and will see the following Search interface

[singlepic id=26 w=480 h=320 float=]

HR can upload the employee resume or this can be done through Self Service interface

[singlepic id=27 w=480 h=320 float=]

Underlying Technologies

Following is the architecture of Search App.

There are following modules

  1. Single Page Application which is built on backbone. This is the javascript application. Think about this as a separate client (UX)
  2. Restful API which allows
    1. Uploading Attributes and Resume
    2. Search for Resumes
  3. OAuth Server (not depicted in the diagram)
    1. Generates a token which tells if the client app has permission to
      1. Upload Resume
      2. Search Resume
    2. The Restful API will need this token to function
  4. Apache Solr - Which is configured to index attributes and resume files
  5. Mongo DB - This will also store the attributes and resume for book keeping. This would also have the roles collection

[singlepic id=28 w=480 h=320 float=]

 

Deployment

The above would be deployed on Amazon AWS. Following technologies of Amazon AWS would be used to do so. The idea is to automate setting up Amazon AWS environment

  1. AWS IAM - To delegate aws responsibilities to the team (some will be admin, some will be operator with access to only start or shutdown, some will be only be able to backup to S3)
  2. AWS Cloud Formation - To create a template which automates creation of security group, ec2 + ebs image from pre determined ami, setup dns or elastic ip, initiate bootstrap of ec2 linux machine which will install nodejs, solr etc automatically
  3. AWS EC2/EBS - To actually host the single instance of server which runs everything
  4. AWS S3 - To periodically back up the EBS Instance to S3

TechNext Talk - Building Single Page Applications

Building Single Page Applications (in Browsers)

Online Reservations
Register on Meetup to reserve a seat - http://www.meetup.com/TechNext/events/69134552/
When
Saturday, July 21, 20124:00 PM To 6:00 PM
Where

Synerzip Softech Recreational Area

3rd Floor, Revolution Mall, next to CityPride Kothrud, Sheth U M Rathi Path, Pune, Maharashtra, India Kothrud, Pune (map)

Building Single Page Applications (in Browsers)

This session will talk about All Browser based technologies, old, proven, emerging and exciting.

Ajax came in picture around 2005ish and since then became defacto. Then Technologies like Dojo, jQuery, GWT emerged changing how Web Applications where built. Emerging services like Twitter, Facebook defined a new way of writing Web Application called "Single Page Application". And recently we are seeing a surge of frameworks like Sencha Touch 2, ExtJs, Backbone, Spline, Knockout, AngularJs, KindoUI, RequireJs, HandlerBar, Underscore and so many things appear. Its hard to understand where what fits in.

This session will focus on

1. First Understanding Single Page Applications

2. Looking at different Aspects of it

3. Fitting popular Frameworks in different aspects of Single Page Applications

4. We will go and see few of these frameworks at a very high level

Please note this session will not have any major code dives like the others we had in past, but there will be some small code demos. The main purpose of this session is to educate we need to start taking "Single Page Applications" seriously and understand it thoroughly and be able to choose right frameworks for it.

This session will teach you about

1. MVC, MVP and MVVM patterns in the JavaScript world

2. Tell you why History is so important in your Single Page Applications and how to handle it

3. How to do Modular Development using AMD?

4. What are Data Bound Views, What is Micro Templates?

5. How to support HTML 5 properly?

If this session does not suffice we will schedule a follow up session for the same 2 weeks after this one.

  • You must be a member to post a comment. Join or login.