W3.CSS & W3.JS: modern & responsive

W3.CSS is a free to use CSS framework with features of responsiveness whereas W3.JS is a javascript library

W3.CSS is based on standard CSS therefore easier to learn and use. It supports responsiveness and provides CSS equality across all browsers and all devices.

W3.JS is smaller and faster than other JavaScript libraries. It is designed to speed up application development.

W3.CSS classes start with “w3-propertyname” and W3.JS  selects and performs action using “w3.action(selector)”

SVG – Scalable Vector Graphics

What is SVG?

SVG is Scalable Vector Graphics. SVG is a XML based format to represent vector based graphics. It is used to draw two dimensional vector images, which support animation. SVG allows three types of graphic objects: vector graphics, raster graphics, and text

Can SVG be rendered in webpages?

Yes, SVGs can be rendered in webpages using an html tag using attributes like height and width.

Some facts about SVGs

SVG can be created using any text editor.

Since they are XML based, SVG images are searchable, indexable and can be scripted and compressed

SVG is an Open Standard

Being text format,  size is larger as compared to binary formatted graphics.

KnockOut It is

Knockout.js is a javascript library that helps you implement dynamic data hadling with more simplicity and maintainability. Since it’s  a pure javascript library it can work with any client-server technology.

Features:

  • Declarative data binding
  • Automatic UI refresh
  • Can be added on top of your existing web application without requiring major architectural changes
  • Very light weight library
  • Assists in dependency tracking between HTML element and the underlying data

How KO works?

Instead of manually tracking, each element of the HTML page that rely on the updated data , it will automatically update the DOM when any changes to the data model occurs.

Knockout is not a replacement of jQuery. KO provides a complementary, high-level way to link a data model to a UI. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. Knockout is focused only on designing scalable and data-driven UI.

MVVM Design Pattern

Knockout uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data and ViewModel acts as the intermediary between the model and the view.

Actually, the ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.

Getting started with Ionic

First few steps for setting up the IONIC environment:

  • Install the latest stable version of NodeJS. If already installed then update it with latest stable version.
  • Install ionic with command:
    [sudo] npm install -g ionic
  • Create a project with command:
    ionic start myProject

    Start customizing your project app according to your requirements

  • Test myProject in a browser with command:
    ionic serve
  • Add ios and android platform to target with respective command:
    ionic platform add ios
    ionic platform add android
  • Build your app for ios and android with respective commands:
    ionic build ios 
    ionic build android
  • Ionic comes with its own icons called ionicons, Over 500 custom designed font icons MIT licensed & ready to use with ionic.
  • Additional features include reusable and customizable CSS components for UI elements.
  • HTML5 input types specifically designed for mobile apps come in handy.

Responsive website UI with Bootstrap

Bootstrap is a popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. It makes front-end development easier and responsive.

Important feature of Bootsrap is its CSS adjusts to phones, tablets, desktop. Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element

History Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

  • Grid System: Bootstrap achieves its responsive feature through Grid System which allows 12 columns across the webpage.
  • Glyphicons: Bootstrap includes glyphs from the Glyphicon Halflings set which are free to use.
  • Navigation Components:  Tabs, pagination, labels, navbar helps in making the website more user-friendly.
  • Other features include BS buttons, BS alerts, BS Dropdown, BS Carousel, BS inputs etc

Responsive web design can also be achieved with Media Queries.

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries can also be used to change layout of a page depending on the orientation of the browser.

Angularity of AngularJS

What is AngularJS?

AngularJS an open source javascript framework, mainly used in Single Page Applications(SPAs). Applications are easy to build and easy to maintain. AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google.

What makes it special?

  • Most important feature, allows building of Single Page Applications(SPAs)
  • Data binding capability to HTML, gives a responsive user experience. Data-binding is the automatic synchronization of data between model and view components. The two-way data binding  reduces the amount of code to be written by relieving the server backend of templating responsibilities. Instead, templates are rendered in plain HTML according to data contained in a scope defined in the model
  • Filter feature helps a subset of items from an array and returns a new array.
  • Built-in directives such as ng-app, ng-bind, ng-model, ng-view etc. are markers on DOM elements (such as elements, attributes). These can be used to create custom HTML tags that serve as new, custom widgets.
  • The $scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller. Likewise, any alterations to the view are reflected in the model.

The AngularJS framework can be divided into following three major parts:

  • ng-app : This directive defines and links an AngularJS application to HTML.
  • ng-model : This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind : This directive binds the AngularJS Application data to HTML tags.

Framework and its potentialities

What is so special about frameworks? We hear about these web frameworks frequently like Django, Cake PHP, Rails etc.  Let’s dive into frameworks.

Framework gives you a ready-made code base which has been tested and designed by many developers and is ready to use solution for common generic problems. That is, it provides with a generic functionality which has flexibility to be changed, which helps you take advantage of this generality. It provides powerful template where the logic can be injected, helps in simplifying complex things.

Pros

  • Saves lot of time, DRY(Don’t Repeat Yourself) means fewer lines of code
  • Provides a standard through which the user can develop the module or a complete application instead of starting from lower level details.
  • More time can be devoted in developing the software and not in preparing the environment and tools of development.
  • Code is extensible for future use with clean code

Heads Up! Framework doesn’t work everywhere, for instance smaller projects which require simple coding seems to work faster than setting up a framework.