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.CSS classes start with “w3-propertyname” and W3.JS selects and performs action using “w3.action(selector)”
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.
- 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.
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:
- 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.
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
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.
What is AngularJS?
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.
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.
- 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.