React to Native React

I hope you have already done enough with ReactJS. Now its time to work with Native React. When native react was launched response was super awesome and positive. This is the revolution for Mobile web world. Internet says it was launched on March 2015, so just a very new technology. As we know a country can not be built in a day, similarly it applies to programming language. It takes some time to be mature.

When we talk about mobile technologies, two name comes in mind- Cordova and Phonegap. But now they have some drawback. Cordova are significantly slower than native applications. especially for graphical-heavy applications.

So key solution is React Native. We can just transform our React Application into React Native but changing some elements. The concepts are same for the both – react and React Native.

  1. When we work on a React component first things we notice – Our component has to a ‘render’ function. And if there is no render function, we got an error.

screen-shot-2016-10-03-at-3-26-45-pm

The best thing is, we never mess with DOM here, but we return a JSX. JSX is  XML-based construct that represents what will be rendered in the DOM.

Lets rndor here: <div className=”main-component”>Hello World</div>

 screen-shot-2016-10-03-at-3-30-12-pm

JSX converts XML coding into functions: 

return React.createElement(“div”, {

           className: “main-component”

 }, “Hello world”);

 So the advantage of this is, We can’t render our components anywhere else than inside of the “render” function, so there is never the concern that we don’t know where exactly our rendered component came from.

  1. In addition to props, components can also have an internal state. The most prominent example of that behavior would be a click counter that updates its value when a button is pressed. The number of clicks itself would be saved in the state. Each of the prop and state change triggers a complete re-render of the component.

 

So now let’s convert our react app into React Native App. Some pre requirements are needed, like we need OS Mac and X Code. Since iOS is currently the only supported platform. System should have Node.JS pre installed. Then Install the React Native Using –

npm install -g react-native-cli

       Then you can Run your ‘FirstNativeApp’ using

 react-native init FirstNativeApp

 It created a FirstNativeApp folder, in which the boilerplate code can be found. Now we have a React app –

screen-shot-2016-10-03-at-3-46-38-pm

Our Aim is to convert this into Native React App. For this we have to follow some simple steps. 

  1. First step is to change requiring the React module to “react-native”.

var React = require(‘react’);  << == >> var React = require(‘react-native’);

 

  • Do you know, there is no DOM in Mobile. So we can not use elements like DIV and SPAN. So we’ll use <View> in place of <DIV> and <Text> in place of <Span>

screen-shot-2016-10-03-at-4-00-23-pm

But here, we can not put text directly in to <DIV>. So We’ll change Hello…. Thing like this :

screen-shot-2016-10-03-at-4-00-09-pm

  • Next thing is React Native doesn’t use CSS. So for this we’ll use inline CSS. Using inline CSS seems bewildering at first. It is similar to the transition React developers had to go through when being confronted with JSX and previously using templating engines.

So here we declare the CSS directly at component level, and so we have all the information we need to see what our component does, the layout it creates, and the styles it applies.

screen-shot-2016-10-03-at-4-02-04-pm

  • Next point is how to handle events in Native React? We want to give an alert message in above example. So here instead of events being directly available on “<View />” components, we need to explicitly use elements that trigger events, in our case a touch event when pressing the view. There are different types of touchable components available, each of them providing a different visual feedback.

screen-shot-2016-10-03-at-4-11-02-pm

  • Now our Native React Application is ready, now time to register – When we do it in react we just write – React.render but in Native React, it is bit different. First we should register our app for the Objective-C side of things which is done using the “AppRegistry” object. Here we can see our FirstNativeApp native app has more lines than react one.

screen-shot-2016-10-03-at-4-19-51-pm

Now you can run your Application. To run the React Native App, we need to replace the contents of the “index.ios.js” file with the piece of code of our transformed app from the last step. Then we just need to open the Xcode project and press the big Run button. First a terminal will open with the React Native server, and then the simulator window will appear.

Press Command +D will show a development menu. Then Click on the Box:

screen-shot-2016-10-03-at-4-26-14-pmscreen-shot-2016-10-03-at-4-26-29-pm

Try this, thing and write me back or comment if you face any issue, We’ll solve it together.

Some Basics React.js beginner should know

React.Js is an emerging programming thing for developers. This is the language which makes hard stuff as easy as easy stuff, but sometime it makes easy stuff as hard as hard stuff, which you do by using simple jQuery or Javasript. Many documentations are available online by using then you can set your environment and can start working with React.JS. but before starting big things you have to know some basics. I learnt some react.JS. sharing my points:

  • First thing you have to be clear, React.JS is not an MVC framework or any other kind of framework. React JS is just a library which renders your views. If you are a MVC guy, you should only have in your mind ‘V’ – Views, nothing else. So always keep this thing in mind otherwise you will end-up with your awesome react code.
  • Second thing, you have to be clear on your all components. Always make them SMALL. This is simple and easy to understand you code to the other developers. So always make your components as small as possible.

Example:

screen-shot-2016-10-02-at-2-47-04-pm

Here I have created a carousal for my Testimonial Section. Simple and small component. <DIV> with only one rendering element – <Slider>.

 

  • Third point is, we should write functional components. There were two types of defining react components :
    • Using ES6 Class:screen-shot-2016-10-02-at-2-36-19-pm
  • Using React.createClass():

screen-shot-2016-10-02-at-2-36-12-pm

But now new update React 0.14 has new ways to define the components:

screen-shot-2016-10-02-at-2-36-26-pm

  • Next most Important thing is we should always use At the time of development when you are a required Prop, It will show an error and which will benefit to you, Catches bugs by preventing silly mistakes. Use of isRequired makes you free from bugs like undefined OR null.

ProTykes look like this :

screen-shot-2016-10-02-at-2-29-29-pm

  • The main and only react specific thing is JSX. JSX is a no-brainer over manually calling createElement. Use of this gives you an disadvantage – it will add some amount of build time complexity.

But this will be solvable usinf Babel.

ES6 features are also important – like constants, arrow functions, default arguments, array and object destructuring, spread and rest operators, string interpolation, iterators and generators, a decent module system, etc.

We round things out with Webpack for bundling our code, and NPM for package management, and we’re now fully JavaScript buzzword compliant 🙂

  • React DEV tools are awesome. We can set up hot module replacement with webpack, so that our page updates as soon as we save our code – no browser refresh required.
  • As in above points I have discussed about ‘V’- views, so the question is where we’ll put our state and logic? So the Answer is here : We all know about Flux ?

Flux is a style for designing web applications. So for the same thing here we’ll use Redux.JS.

You can know more about Flus: https://facebook.github.io/flux/

And Abour Redux.JS: http://redux.js.org/

So I how this will give you a head start on React. Follow the rules/ ricks and tips and create your React application.  🙂

Heart of a Layout: CSS Display Properties

Before starting any design, you need work on building blocks of that design, with a strong foundation, you always try new techniques, and creating something awesome that you’re proud of. So for gaining this proud, you should be aware with basics. I know you are an expert and Writing a good CSS is no different for you and it all starts with understanding what you’re working with, before you write a single line of CSS. In a design we have many blocks with different elements, like paragraph with full width, images block with different width and height, and many more. Web browsers that render to a screen defines their own style to govern the default layout of HTML elements. This CSS are called the user agent CSS, and are responsible for a mostly consistent experience across the different Web browsers.

For every HTML element that the WHATWG define some CSS. This CSS is not much different to the CSS we will write, and also can override. WHATWG defines display: block;  for body Tag automatically.

But we can change it in many ways, Like- display: none; OR anything else.

 Let’s understand the display properties: Experiments says <DIV> and <P> behave like same.

 :- Block -:

 p {

display:block;

margin: 0;

}

 

div{

display:block;

}

 

Here both div and p tags are assigned display: block;. Only one thing is different, <p> has some assigned margin. display: block; makes block-level elements, which have the following properties:

  • Bu Default – Occupy full width of a container.
  • Respect top / bottom padding and margin.

Given properties are very useful.

:- Inline -:

display: inline; Very Important style. You can get this property in anchors, spans, strongs, and a slew of other mostly typographical elements by default. Display: Inline; elements allow us to stack HTML tags next to each other, without affecting the layout of pages and these elements ignore most vertical and horizontal layouts. Also ignore the height, top and bottom padding and margin.

inline occupy only the width of their content block – as if they are shrink-wrapping around their content.

:- inline-block -:

display: inline-block; This property gives you the best of inline and block-level elements in one.

Block can be assigned explicit widths They respect vertical margins and padding values.

inline-block will stack with other non-full width elements, until content width reaches the full width of the content block, at which point it will always occupy its own line. Inline elements, in contrast, will always wrap to new lines with adjacent non-full width HTML elements.

 

:- Vertical Alignment -:

Other very helpful attribute of inline-block elements is that they also respect the vertical-align property for differing vertical Ys. inline-block elements respect vertical properties while Block elements don’t respect any vertical-alignment properties and inline elements respect vertical alignment.

 

When To Use What?

Simple way is to start your design by asking some yourself:

Screen Shot 2016-06-05 at 3.16.21 PM

Must Try these display properties carefully.

 

Create a new AngulaJS controller

Controllers are the heart and most important component of an AngularJS Application. AngularJS controllers are not always clearly defined in some JavaScript client side frameworks, and that tends to confuse programmers who have good experience in MVC. So this never happens with AngulaJS, AngularJS always defines controllers.

Everything in an AngularJS application passes through a controller. Dependency injection is used to add the needed dependencies. See given example.

This tells how to create a new controller:

/* Comment */

Screen Shot 2016-05-03 at 2.13.47 AM

  • In above code first I created a new model : addonsController (Using call to module method of angulaJS)
  • Then I created a new controller: addonsCtrl (By Calling the controller of above module)
  • So we created all controllers which will be added in addonsControllers module.
  • Here we have used JSON.stringify method. This line log the JSON that’s returned from the web service to the JavaScript console. We can simply access the JS console to troubleshoot REST service issue by seeing the JSON logged in success call back function.

This controller plays an important role in the Application. It represents many dependencies. It also has some primary responsibilities, which will explore in next article.

So this is the simple method by which we can create a new controller in AngularJS.

Which one is the Best, Python OR PHP ?

We read Java, .Net, HTML5 and many other programming languages a lot; now let’s work with PHP and Python. I don’t know more about both, Just started my Reading. Sharing my first Study with you, find out which one is suitable for you OR which one is better for you.
Both languages have different purposes and history, and it is not fair to compare. I am writing the things I like about both of them.

Python:

·         Syntax and standard library: I LOVE the readability of Python syntax. The standard Python library ships with a great set of tools and utilities.
·         General purpose: Python can be run on the servers, to build applications and in many other places.
·         Elegant: Python has an elegant language design which makes it much easier to write great code.
·         Unicode support: Python has great support for Unicode.
·         Modular and definitive: Python is less quirky compared to PHP.
PHP:

·         Forgiving: PHP is one of the most ‘freeform’ languages I have used, probably comparable only to Javascript.
·         Easier learning curve: You can quickly start coding in PHP with a basic understanding or experience of programming. This was the main purpose PHP was created to serve. This also helps in faster development.
·         Hobbyist-compliant: The code doesn’t need to be elegant for it to work. I think this is the biggest reason for it to have become the most popular web development language. You can cook up some code in a hurry, and it works.
·         Open source and communities: There is a huge community and open source projects that use PHP. Makes it easy to get support if you run into a roadblock.
·         De-facto language for the web: Majority of the popular web frameworks (WordPress, Drupal, Joomla, Zend, CodeIgniter, OSCommerce) are built on PHP. Which also makes it very easy to find a web developer who knows PHP.
·         Hosting support: Because of popularity, PHP hosting is supported by almost every provider out there.
·         PHP 5 is actually a huge improvement over the versions before in terms of language design etc.
And my Conclusion says PHP is relatively easier to learn, especially for someone who is not a good programmer. For web development, PHP has many more libraries – the community is (probably) larger. Anything you want to do in the area of web development, there is a good chance that there will be an existing library for it in PHP. For anything new in the area of web development, the first library will show up in PHP and the others (Ruby, Python, Java) will follow later.
(Via Net Solution India)


A Developer Says: “I was a PHP dev for 7 years and now Ruby for 2 and I still say: PYTHON
And My suggestion is if you are from JAVA background please go with Python, otherwise PHP will make you nerdrage.
So After Reading above Points I love Python but fresher will choose PHP, Simple and Smiley Easier.

Keep Reading, Keep Writing , Keep Developing, 
   

Best framework for creating mobile applications with HTML, CSS, and JavaScript…

Let’s assume you are trying to create a location-based mobile application for Android. What framework will you prefer? Phonegap… ???
OR any better option?
As per my study, we can use PhoneGap to wrap HTML/CSS/JS mobile web apps to create native apps for iOS, Android, Blackberry, etc. There are many other Frameworks, Tools, and Libraries for Creating Mobile Applications. And from My experience I would be very careful with HTML Mobile Framework. They tend to be heavy and require lot of CSS/HTML elements.
I will suggest to use jQuery and target webkit (iOS and Android) and try to optimize your DOM and UI component as much as possible. Then, you can degrade for other browsers.

If you are building an offline application, you can use a MVC. Anyway, the rule is that the less framework you use the better you are. So, pick carefully, and make sure they are not kitchen sink.

And here is the List of Top 10 Frameworks To Build Mobile Application With HTML, CSS & JavaScript: 

1. JQuery Mobile
jQueryMobile is a robust mobile development framework to build cross-mobile-platform app. 

2. Cordova / PhoneGap
PhoneGap is essentially based on Cordova. Cordova/Phonegap provides a set JavaScript APIs that connect to the device’s native functions such as Camera, Compass, Contacts, and Geolocation. Cordova/Phonegap lets us build a mobile application without the native programming language; instead we can use a framework like jQuery Mobile. 

3. Sencha Touch
Sencha Touch is a mobile framework powered by HTML5 and CSS3, providing APIs, animations, and components that are compatible with the current mobile platforms and browsers. 

4. Ratchet
Ratchet was originally used by Twitter as an internal tool to create their mobile app prototype which is then released publicly as an open source project. 

5. Ionic
If you are concerned with your app performance, Ionic is the right framework for you. Ionic is an HTML5 mobile framework with focus on performance, by leveraging hardware acceleration, and it requires no third-party JS library. 

6. Lungo
Lungo is a lightweight mobile framework based on HTML5 and CSS3. 

7. JQT
jQT is a Zepto plugin for mobile framework primarily designed for Webkit browsers. 

8. Junior
Junior is also a Zepto plugin for building a mobile app similar to jQT. 

9. Jo
Jo supports a wide variety of mobile platforms including Tizen and Chrome OS. Jo also comes with a starter, that is powered by CSS3, so it makes it easy for web developers at any level of experience to grasp and start styling their apps. 

10. Famo.Us
A new kid on the mobile framework block, Famo.us
 promises to eliminate HTML5 performance issue on mobile devices with its lightweight JavaScript engine (only 64k). 

Recommended CMS for a static HTML5 blog

Normally I use WordPress for blogging but I don’t like it very much. I would prefer making my blog static offline, then deploy to Amazon S3 or any other platform to distribute my blog.  But I am not good in coding, so I am finding some cool CMS for my HTML5 website.
I googled many times, I read many Books then find some solutions. They are all similar, simple and flexible. Once you’ve understood the basics, they all kill wordpress for what you want to do. It will help enormously to understand a minimal amount of code. You need to get past the initial stage of everything looking like moon language though. Once you’re there, it’s a hell of a lot faster to go from install to something that matches what you envisaged. Everything ends up a lot cleaner as well.
Here are different Solutions with different technologies:

PHP:  Staceyapp.com  is a good platform for PHP users. Stacey is a lightweight content management system. No database setup or installation files, simply drop the application on a server and it runs. Your content is managed by creating folders and editing text files. No login screens, no admin interface.
It provides a good, simple structure. Kirby is also good, but it costs a minimal fee for the license. Because you’ll be generating a static site locally, you lose the great benefit PHP has over Ruby, Python, JS etc (easy deployment on basic hosting).
Node: Docpad.org is excellent, good set of plugins as well.  DocPad removes limitations and closes the gap between experts and beginners. Designers and developers can create websites faster than ever before. Harp markets itself as a web server that processes whatever you chuck at it and turns it into HTML/CSS/etc. It does the same as the above, and does it well. Winter smith has been getting some good press, but I haven’t used it.
Ruby: Jekyll.com is the most popular, and has a huge ecosystem. You have to remember that it’s just a parsing engine. The core of it doesn’t come with anything resembling a blogging engine or templates, you need to make them. That said, everything you’re likely need is available as plugins. Octopress is a fork of Jekyll built to quickly generate blogs. Middleman is more complete out-of-the-box than Jekyll, smaller and more focussed, but it’s great.
Above is the list of Static Site Generators. Ordering by stars will give you the most joy. You also want projects under constant maintainance, so check how long they’ve existed, and when the last update was.

You can use more Top Open-Source Static Site Generators like: Middleman, Hugo, Metalsmith, Roots, Hyde… Etc.

How to use CSS in a HTML document

We are much aware what is CSS, and it’s uses in previous blogs, Now Let’s try to understand How to use CSS or Style sheet in a HTML document. CSS present the good presentation in a document and Web page or App.
We can use Style sheet using three methods:
·        We can use an external style sheet, either by importing it or by linking to it.(External Style Sheet)
·        Directly embed a document-wide style in the head element of the document. (Document – Wide Style)
·        Set an inline style rule using the style attribute directly on an element. (Inline Style)
Each of these style sheet approaches has its own pros and cons, as listed below:

   Now let’s some work using all three method

1.       External Style Sheet: An external style sheet is simply a plain text file containing CSS style   
Rules. The common file extension .css indicates that the document provides style sheet information. As an example, the following CSS rules can be found in a file called sitestyle.css, which defines a style sheet used site-wide:
After above sheet we will work with HTML doc…
So now we are done with both files Let’s see the Output:
CSS is, at least theoretically, not the only style technology we could use, though as it stands, by default, most browsers assume that CSS is being used. We set type to be specific but that may get a bit redundant. The HTML specification suggests you can set a default style sheet language in the head element of the document by using the <meta> tag, as
shown here,
<meta http-equiv=”Content-Style-Type” content=”text/css”>
by outputting this value in the HTTP headers delivered to a site. Interestingly, many sites
set the <meta> tag and use the type attribute, which is particularly appropriate as of this
edition’s publication as the specification dictates that the type attribute must be set and
thus the W3C validator will complain if the attribute is not set regardless of the appearance
of the <meta> tag.
2.      Embedding Style Sheets: The second way to include a style sheet is to embed it. When you embed a style sheet, you generally write the style rules directly within the document with a <style> tag found within the <head> </head> of the document.
The basic syntax of the <style> tag is as follows:
<style type=”text/css” media=”all | print | screen” >
* Style Rules….*
</style>
Now let’s do an Example:



You can have multiple occurrences of the style element within the head of the document, and you can even import some styles with these elements.
OutPut for the above code:

While this technique is common practice and used for script masking as well, there are some subtle issues, particularly when including non-comment-friendly content like multiple dashes or trying to address XML strictness. (McGraw-Hill CSS)
3.      Inline Styles:  Instead of using a style sheet for a whole page, you can add style information directly within a single element. Suppose you want to set one particular <h1> tag to render in extra-large, green, Arial font. You could quickly apply the style to only the tag in question using its style attribute, which is a core attribute common to nearly any HTML element.
As an example, the following markup shows an inline style applied to a heading:
<h1 style=”font-size: xx-large; font-family: Arial; color: green;”>
This sort of style information doesn’t need to be hidden from a browser that isn’t style sheet-aware, because browsers ignore any attributes that they don’t understand.
Although using inline styles seems to be an easy route to using CSS, it does have a number of drawbacks. The largest problem is that inline rules are bound very closely to a tag. If you want to affect more than one <h1> tag, you have to copy and paste the style attribute into every other heading of interest. The separation of markup from CSS presentation is not optimal with an inline style. However, for quick and dirty application of CSS rules, this might be appropriate, particularly for testing things out.
The second and lesser-known concern with inline CSS rules is that you simply cannot perform every task with them. For example, if you want to change the look of various link states, this is easily accomplished in a document-wide or linked style sheet with pseudo-class rules like
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}
However, if you attempt to put such rules in an <a> tag, how are other states indicated? The simple example here would appear to set the color to blue for any state:
<a href=”http://www.w3.org” style=”color: blue;”>Inline Link Styles?</a>
Similarly, in order to change the first letter of a paragraph to large, red text, you might use a pseudo-element rule like
 p:first-letter {color: red; font-size: xx-large;}
However, when you attempt to do this inline, you are forced to introduce an element to hold the first letter:
<p><span style=”color: red; font-size: xx-large;”>T</span>his is a test.</p>
While these examples indicate why these selectors were given the names pseudo-class and pseudo-element, they don’t really show us how to use such inline styles.
<a href=”http://www.w3.org/”
style=”{text-decoration: none;}
:link {color: blue;}
:visited {color: red;}
:hover {color: red; text-decoration: underline;}
:active {color: red;}”>Inline Link Styles?</a>
To set the first letter on paragraphs, we would use:
<p style=”{text-indent: 1em;
text-align: justify;
line-height: 150%;}
:first-letter {color: red; font-size: xx-large;}”>
This is the set of <p></p>
The emerging specification even suggested the importation of style sheets directly inline:
<div id=”navbar” style=”@import url(navigationstyles.css);”>just an example</div>
While all these ideas are quite interesting, more than seven years after the working draft was authored, not a single browser supports this syntax at the time this edition is being completed. So, besides being too closely bound to tags, understand that unless this situation has changed by the time you read this edition, only using inline styles is going to limit your application of some of the more useful CSS selectors. (Reference McGrill CSS)
These were some methods for using CSS, there are many other methods for using CSS but includes above three parent methods.  So for more Stay tune for next blogs mean while keep doing your coding work with different examples.
Do more exercises and ping back your problems.

Let’s know about CSS Error Handling

Sorry writing this blog after very long time, Yet this is not my original I was reading about Error handling in google and find some important points, which are presented here, We know the use of syntactically correct markup is certainly not encouraged by permissive browser parsers that correct mistakes or guess intent when faced with malformed markup. The situation for CSS is a bit better, and the CSS 2.1 specification does describe what browsers should do in the case of various errors, but then again, making the assumption that browsers are not permissive and correctly implement all aspects of Web specifications is dangerous.
Unknown Properties
If an unknown property is encountered, a CSS-conforming user agent should ignore the declaration. Given
h1 {color: red; trouble: right-here;}
the property trouble would simply be ignored and the rule would simply set the color. It does not matter what the position of the bogus property declaration is, the result should be the same as long as the declaration is otherwise well formed.
h1 {trouble: right-here; color: red;}
The case is obviously different if the various separators are missing.
Malformed Rules
In the case where semicolons (;), colons (:), quotes (‘or”), or curly braces ( { } ) are misused, a browser should try to handle any unexpected characters and read the properties until a matching value can be found. As an example, consider the simple case of forgetting a semicolon:
h1 {color: red text-decoration: underline; font-style: italic;}
In this case, we should see the browser continue to parse the value of color as “red text decoration: underline” before it sees a closing semicolon. The font-style property that follows would then be used. Because the color property has an illegal value, it should be ignored.
Other cases are a bit more obvious. For example, here we see the colon missing in a style rule declaration:
h1 {color red; text-decoration: underline; font-style: italic;}
In this case, the color property is simply ignored and the text is underlined and italic.
The situation for quotes and braces is the same, with compliant browsers working to find a matching closing character for any open construct, potentially destroying anything in between. Consider this set of rules, where quite a large amount of style may be lost:
h1 {color: green; font-family: “Super Font;}
h2 {color: orange;}
h3 {color: blue; font-family: “Duper Font”;}
Be careful, though, because in this case you might assume that the rule closes off with a quote, but that may introduce more open construct errors later on in the style sheet.
Unclosed Structures and End of File :
A CSS browser should close all braces and quotes when it reaches the end of a style sheet. While quite permissive, this would suggest that
<style type=”text/css”>
h1 {color: green
</style>
should render properly, as the open rule would be closed automatically by the end of the style sheet. Open quotes would also be closed in a similar manner when the end of the style sheet is reached. Testing reveals this action is actually the case in browsers, but creating a syntactically correct style sheet is obviously far superior than understanding the expected failures of a conformant browser.
Illegal or Unknown Property Values
CSS-conforming browsers must ignore a declaration with an illegal value. For example,
h1 {font-size: microscopic; color: red;}
would simply not set the font-size value but h1 elements would be red. Usage of illegal characters can turn what would appear to be a correct value into an incorrect one. For example,
h1 {color: green;}
is incorrect not because green is an illegal color, but because it is not the same as the keyword green when it is quoted.
Do not assume that a CSS-compliant browser will fix such small oversights. For example, a browser given
h1 {color: green forest;}
should not use green but instead ignore the whole rule. Of course, what browser vendors actually do in the face of malformed Web documents varies.
Incorrect @ Keywords and Media Values:
When an @ media value or media type for a <style> tag is used, incorrect values should be ignored. For example, if you specify <style type=”text/css” media=”tri-corder”>, the browser is supposed to ignore the entire <style> block unless it understands such an odd type. Media types will be discussed in depth later, but for now understand that when faced with syntax problems, a CSS-compliant browser should simply ignore anything related to misunderstood values.
Ignoring Network Failures
When style sheets are linked rather than placed within the page, the browser must apply all
types it is able to fetch and simply ignore those it can’t. So if you had
<link rel=”stylesheet” href=”global.css” type=”text/css”>
<link rel=”stylesheet” href=”pagelevel.css” type=”text/css”>

and the first was fetched by the browser, but the second failed, it would simply apply the rules it had. Obviously, such transitory errors are hard to account for, but other considerations presented in this section should have been caught in the validation of markup and style, discussed next.

Let’s work with JavaScript Events

As we discussed in previous blog (Basics of  Events in JavaScript) about some event names, There are some many other events are in JavaScript ,
Some Events are used with Media Elements in HTML: 
  • ·         onabort
  • ·         oncanplay
  • ·         oncalplaythrough
  • ·         ondurationchange
  • ·         onended
  • ·         onerror
  • ·         onlodeddata
  • ·         onloadedmetadata
  • ·         onloadstart
  • ·         onpause
  • ·         onplay
  • ·         onplaying
  • ·         onprogress
  • ·         onratechange
  • ·         onreadystatechange
  • ·         onseeked
  • ·         onseeking
  • ·         onstalled
  • ·         onsuspended
  • ·         ontimeupdate
  • ·         onvalumechange
  • ·         onwaiting

Some Events which are very important for our Browser:
  • ·         onafterprint
  • ·         onbeforeprint
  • ·         onbeforeload
  • ·         onblur
  • ·         onerror
  • ·         onfocus
  • ·         onhaschange
  • ·         onload
  • ·         onmessage
  • ·         onoffline
  • ·         ononline
  • ·         onpagehide
  • ·         onpageshow
  • ·         onpopstate
  • ·         onredo
  • ·         onresize
  • ·         onstorage
  • ·         onundo
  • ·         onunload

So these are some important events which are used in JavaScript for making a webpage more interactive.
Now Let’s do some live work with these events, Yet we can’t discuss all events but some important event can be discussed.

onload   Event:  The online event triggers when a Website loads in a browser. This event is defined in the BODY element. Let’s write some HTML code

Here we have defined the onload event in the BODY element, which displays an alert box showing the text, Welcome to My World!, when a web page loads. The output for the above code will be:





So this was a little bit about the onload Event, do some more Exercise from yourself and put the problems.




onsubmit  Event:  The onsubmit event is used with the FORM element and triggered  when the form is submitted. Let’s create a form and understand the onsubmit event, HTML code :


The above code is for FORM, here we added some fields like Name, Phone, Address, Email id. Next we have defined the onsubmit event in the FORM element, which displays the some message.
After filling this form when we click on submit button then alert box appears and shows the Text message:





So these are the examples of JavaScript Events.

Note : Now do exercise from yourself and put the question in Comment.