Thursday, July 21, 2016

The 5 Most Common Mistakes HTML5 Developers Make: A Beginner’s Guide

It’s been over 20 years since Tim Berners-Lee and Robert Cailliau specified HTML, which became the standard markup language used to build the Internet. Ever since then, the HTML development community has begged for improvements to this language, but this cry was mostly heard by web browser developers who tried to ease the HTML issues of their colleagues. Unfortunately, this led to even more problems causing many cross-browser compatibility issues and duplication of development work. Over these 20 years, HTML was upgraded 4 times, while most of the browsers got double-digit numbers of major updates plus numerous small patches.
HTML5 was supposed to finally solve our problems and become one standard to rule them all (browsers). This was probably one of the most anticipated technologies since creation of the World Wide Web. Has it happened? Did we finally get one markup language that will be fully cross-browser compatible and will work on all desktop and mobile platforms giving us all of those features we were asking for? I dont know! Just few days ago (Sept. 16th 2014) we received one more call for review by W3C so the HTML5 specification is still incomplete.
Despite HTML5 issues and mistakes, is it the one language ring to rule them all?
Hopefully, when the specification is one day finalized, browsers will not already have significant obsolete code, and they will easily and properly implement great features like Web WorkersMultiple synchronized audio and video elements, and other HTML5 components that we’ve needed for a long time.
Give hasty developers an incomplete spec, and you'll have a recipe for disaster.
We do however have thousands of companies that have based their businesses on HTML5 and are doing great. There are also many great HTML5-based applications and games used by millions of people, so success is obviously possible and HTML5 is, and will continue to be, used regardless on the status of its specification.
However, the recipe I mentioned can easily blow up in our faces, and thus I’ve emphasized some of the most basic HTML5 mistakes that can be avoided. Most of the mistakes listed below are consequence of incomplete or missing implementation of certain HTML5 elements in different browsers, and we should hope that in the near future they will become obsolete. Until this happens, I suggest reading the list and having it in mind when building your next HTML5 application whether you’re an HTML5 beginner or an experienced vet.

Common mistake #1: Trusting local storage

Let them eat cake! This approach has been a burden on developers for ages. Due to reasonably sensible fear of security breaches and protection of computers, in the “dark ages” when the Internet was feared by many, web applications were allowed to leave unreasonably small amounts of data on computers. True, there were things like user data that “great browser masters from Microsoft(r)” gave us, or things like Local Shared Objects in Flash, but this was far from perfect.
It is therefore reasonable that one of the first basic HTML5 features adopted by developers was Web Storage. However, be alert that Web Storage is not secure. It is better than using cookies because it will not be transmitted over the wire, but it is not encrypted. You should definitely never store security tokens there. Your security policy should never rely on data stored in Web Storage as a malicious user can easily modify her localStorage and sessionStorage values at any time.
To get more insight on Web Storage and how to use it, I suggest reading this post.

Common mistake #2: Expecting compatibility among browsers

HTML5 is much more than a simple markup language. It has matured enough to combine behavior together with layout, and you should consider HTML5 as extended HTML with advanced JavaScript on top. If you look at all the trouble we had before just to make a static combination of HTML+CSS look identical on all browsers, it is fair to assume that more complexity will just mean more effort assuring cross-browser compatibility.
HTML5 interpretation on different browsers is far from identical, just like the case was with JavaScript. All major players in the browser wars lended a hand in the HTML5 spec, so it’s fair to assume that deviations between browsers should reduce over time. But even now some browsers decided to fully ignore certain HTML5 elements making it very difficult to follow a baseline and common set of features. If we add more internet connected devices and platforms to the equation, the situation gets even more complicated, causing problems with HTML5.
For example Web Animations are great feature that is supported only by Chrome and Opera, while Web Notification feature that allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email, is fully ignored by Internet Explorer.
To learn more about HTML5 features and support by different browsers check out the HTML5 guide at www.caniuse.com.
So the fact remains that even though HTML5 is new and well specified, we should expect a great deal of cross-browser compatibility issues and plan for them in advance. There are just too many gaps that browsers need to fill in, and it is fair to expect that they cannot overcome all of the differences between platforms well.

Common mistake #3: Assuming high performance

Regardless of the fact that HTML5 is still evolving, it is a very powerful technology that has many advantages over alternate platforms used before its existence. But, with great power comes great responsibility, especially for HTML5 beginners. HTML5 has been adopted by all major browsers on desktop and mobile platforms. Having this in mind, many development teams pick HTML5 as their preferred platform, hoping that their applications will run equally on all browsers. However, assuming sensible performance on both desktop and mobile platforms just because HTML5 specification says so, is not sensible. Lots of companies (khm! Facebook khm!) placed their bets on HTML5 for their mobile platform and suffered from HTML5 not working out as they planned.
Again, however, there are some great companies that rely heavily on HTML5. Just look at the numerous online game development studios that are doing amazing stuff while pushing HTML5 and browsers to their limits. Obviously, as long as you are aware of the performance issues and are working around these, you can be in a great place making amazing applications.

Common mistake #4: Limited accessibility

Web has become a very important part of our lives. Making applications accessible to people who rely upon assistive technology is important topic that is often put aside in software development. HTML5 tries to overcome this by implementing some of the advanced accessibility features. More than a few developers accepted this to be sufficient and haven’t really spent any time implementing additional accessibility options in their applications. Unfortunately, at this stage HTML5 has issues that prevent it from making your applications available to everyone and you should expect to invest additional time if you want to include a broader range of users.
You can check this place for more information about accessibility in HTML5 and the current state of the most common accessibility features.

Common mistake #5: Not using HTML5 enhancements

HTML5 has extended the standard HTML/XHTML set of tags significantly. In addition to new tags, we got quite a few new rules and behaviors. Too many developers picked up just a few enhancements and have skipped some of the very cool new features of HTML5.
One of the coolest things in HTML5 is client-side validation. This feature was probably one of the earliest elements of HTML5 that web browsers picked up. But, unfortunately, you can find more than a few developers who add novalidate attribute to their forms by default. The reasons for doing this arereasonable, and I’m quite sure we will have a debate about this one. Due to backward compatibility, many applications implemented custom JavaScript validators and having out-of-the-box validation done by browsers on top of that is inconvenient. However, it is not too difficult to assure that two validation methods will not collide, and standardizing user validation will ensure common experience while helping to resolve accessibility issues that I mentioned earlier.
Another great feature is related to the way user input is handled in HTML5. Before HTML5 came, we had to keep all of our form fields contained inside the <form></form> tag. New form attributes make it perfectly valid to do something like this:
<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
Even if lname is not inside the form, it will be posted together with fname.
For more information about new form attributes and enhancements, you can check the Mozilla Developer Network.

Wrap up

I understand that web developers are collateral damage in the browser wars as many of the above mistakes are a direct consequence of problematic HTML5 implementation in different browsers. However, it is still crucial that we avoid common HTML5 issues and spend some time understanding the new features of HTML5. Once we have it all under control, our applications will utilize great new enhancements and take the web to the next level.
This post originally appeared in the Toptal Engineering blog

Monday, March 9, 2015

AngularJs Data Binding

AngularJS takes a different approach. Instead of merging data into a template and replacing a DOM element, AngularJS creates live templates as a view. Individual components of the views are dynamically interpolated live. This feature is arguably one of the most important in AngularJS and allows us to write the hello world app we just wrote in only 10 lines of code without a single line of JavaScript.

This feature works by simply including angular.js in our HTML and explicitly setting the ng-app attribute on an element in the DOM. The ng-app attribute declares that everything inside of it belongs to this Angular app; that’s how we can nest an Angular app inside of a web app. The only components that will be affected by Angular are the DOM elements that we declare inside of the one with the ng-app attribute.

AngularJS 'Hello world' example

<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>

Wednesday, January 14, 2015

Getting started with AngularJs

I have been working as UI developer for previous 7 years on various projects with server side languages like Java, .net, PHP. Seriously telling you before jumping into AngularJs my UI developer life was very easy, but as soon as I adopted AngularJs my work load and responsibilities increased more than double. AngularJs has reduced server side coding and made it possible to manage lots of backend efforts on frontend, but working on AngularJs is really a great experience. I bet after learning AngularJs you'll forget other scripting languages.

AngularJs has enabled us to communicate between server and client side without using JSP, XSLT, ASPX(.net) pages, AngularJs has made it as easy as developing a complete project with simple HTML, CSS and JavaScript.

AngularJS makes it incredibly easy to build web applications, it also makes it easy to build complex applications. AngularJS takes care of advanced features that users have become accustomed to in modern web applications, such as:
  • Separation of application logic, data models, and views
  • Ajax services
  • Dependency injection
  • Browser history (makes bookmarking and back/forward buttons work like normal web apps)
  • Testing
  • And more

 

How Is It different?

In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from the outside in. For instance, using jQuery, for

example suppose we have following HTML code, and we want to add the text 'Naren' to the span 'Hello' when entered the value in text box:
<div>
    <input id="name" type="text" />
    <span id="greeting">Hello</span>
</div>

Now look into jQuery way:
//look up the input element
var name = $('#name');
//look up the output element
var greeting = $('#greeting');
//listen for keyboard events
name.keyup(function() {
        //update the output element with the new input
        greeting.text('Hello ' + name.val());
});

Now with AngularJs:
<div ng-app>
    <input type="text" ng-model="name" />
    <span>Hello {{name}}</span>
</div>
That's it no more lines of extra script.

Readers! keep reading my posts there is lots of UI Developr stuff to be share with you.



2 days' AngularJs training classes are going on with me for professional UI Developers. You can enroll by a phone call at +91 987 143 3826 or eMail me at mr.nsjayas@gmail.com or visit www.oyetrade.com.

Friday, February 7, 2014

Why e-Learning?

We at 'OyeTrade eLearning development center' are the team of eLearn professionals developing eLearn and mobile learning applications for couple of years. Business owners always raise one common question 'why should I convert my classroom courses into eLearning?'. This blog post is answer to their 'Why?'.

Let’s re-examine the basic benefits of e-learning. With the high cost of transportation as well as hectic work and family schedules, many people who have been slow to take online courses are signing up for the first time. You may be wondering what advantages e-learning has over traditional face-to-face courses.

The major benefits: accessibility and convenience. Your online course can be logged into at any time and at any place. This is a huge advantage over traditional face-to-face courses that are held in a classroom or meeting place, especially if you have a busy life that required travel or many family or work commitments.

Further, the convenience of the online course really can’t be matched. Needless to say, none of that is true if you’re in a situation where you do not have high-speed internet, or your connection is limited or intermittent. But, assuming that you’ve got a great connection and that it’s always available, you’re in fantastic shape with an online course. You can log in after the kids are in bed. You can work during your lunch break. You can work from your hotel room or an airport or a restaurant offering wifi connections. There is truly nothing like it.

But, what about the other benefits? Surely there is more to life than convenience and access. How about the learning? What about the idea of connecting with other students? How about the intangible, but very valuable feelings you get when you join a college or university community? If you take an online course, will you be missing out on school spirit, study buddies, lively in-class discussions, and passionate discussions over coffee and pastries at the local purveyor of fine coffee drinks and bakery items?

E-learning has come a long way from its earliest origins. Back in its inception, online programs often offered courses that got the job done, but they weren’t very exciting. You might write responses to questions for each lesson, the e-mail them to your instructor. You might read online material, listen to audio, then take interactive quizzes, which were automatically scored and entered in a gradebook. Alternatively, you might watch videos of recorded classroom lectures, and then take a test over the contents of the lecture and readings. Again, the methods got the job done, and they pushed content to you, but they weren’t very exciting.

What has changed?

First, there’s been a big shift in the way that people envision online courses. Before, there was always the notion of “pushing” or “delivering” content. Course designers thought that if they could “push” or “deliver” content to the learner, everything would be okay. The leaner would soak up the content, and then respond to it in a way that would reflect how much he or she learned. That might have worked for some learners, but it certainly did not work for all.

The other eLearning benefits are...
Improved training costs.  Producing learning content is time consuming whether it’s online or not.  With elearning, each time the course is accessed your return on investment improves because you are dividing the fixed production costs by number of uses.  You also have savings through decreased travel, reduced material, and hopefully improved (and more efficient) performance.

Decreased material costs.  Let’s say you have to train how to arrange equipment in a sterile environment like an operating room.  If you had to use the real environment, it would be costly.  Even setting up a fake environment has material costs and labor.  By creating the environment online and letting the learner practice, you never have to worry about the costs associated with set up, use, and clean up.

Increased productivity.  Because elearning is not bound by geography or time, you can control training’s impact on production by training people during down times.  In addition, with the current economy, you’re asking people to do more with less.  So elearning is a great way to give them the tools and skills needed to enhance their performance.

Standardization.  You may have a great facilitator, but that’s no guarantee that the courses are presented the same across sessions.  Elearning allows you to create a standardized process and consistency in the delivery of content.  It also compresses delivery time.  I’ve combined elearning courses with facilitated sessions.  Elearning delivered consistent content.  Live sessions were interactive case studies that applied the information.

Freedom to fail.  Let’s face it, real learning requires some failure.  But no one likes to fail in a classroom full of other people.  Elearning lets you fail without fear.  This encourages exploration and testing of ideas.  With the right feedback you create a great learning environment.  Worst case, you can always start over.  Something you can’t always do in class.

Personalized learning.  Look out the window at your parking lot.  My guess is that you’ll see a dozen or more different cars.  They all do the same thing, yet we have personal opinions about what we want to drive.  The same for learning.  Learners want control.  Elearning allows you to offer control to the learners in a way that classroom learning doesn’t.

Saturday, January 25, 2014

List of the Top Free Web Directories

This comprehensive web directories list isn't set in stone, and will probably need to be updated on 3-month intervals, but it does cover a good majority of the top paid directories you should initially target to submit your site(s) too.

BestMillionLinks (http://bestmillionlinks.com) - The best and Most Powerful website directory for your Search Engine Optimization Strategies. Free and easiest way for website search engine optimization. This help you to create search engine friendly social profile page to promote your website on social networking websites and blogs.

DMOZ (http://www.dmoz.org/) - The site is run by a group of volunteer editors. This free directory is a "must submit". The SEO and traffic rewards are very good if you happen to get a listing. .

Rakcha (http://www.rakcha.com) - Online directory of human edited website listings covering a wide range of topics and global locations. Submit your site and increase your online visibility!

Joeant (http://www.joeant.com/ ) - JoeAnt.com is about providing a directory of quality sites for Internet users. Our goal is to list the best sites for a wide variety of topics giving our users the most relevant results for their searches.

Link Centre (linkcentre.com) - Well categorized and organized. The site is very well-established. The site has existed as a directory since December of 1997. Registration is required. They do not provide enough information to allow us to to determine if free submissions are actively being listed.

All Business Directory (http://www.allbusinessdirectory.biz/) -  A well-established, uniquely designed business directory that appears to be very well taken care of. They have been consistently adding new listings since at least mid 2012. The directory itself has been around since 2005.

The Great Directory  (http://thegreatdirectory.org/) - A long-time directory with a unique category structure. They have been actively adding new listings for the last year. They do a very good job of editing submissions. No deep links allowed with a free listing.

Most Popular Sites (http://www.mostpopularsites.net/) - MPS is designed to provide your site with more visibility. All our pages are search engine friendly and will have links back to your home pages to improve hits on your site with all search engines.

World Site Index (http://www.worldsiteindex.com/) - WorldSiteIndex is a searchable human edited web directory of English language sites organised by categories, and optimized for use on mobile devices! WorldSiteIndex also brings you news on what's trending & being discussed about search & social media on the web.

Data Spear (http://www.dataspear.com/) - DataSpear.com is a joint venture between GoGuides, Inc. and NAIS, Inc. North America Internet Services is in charge of all daily operations. This includes reviewing submissions, editing listings, creating topics, etc. Servers and upstream are provided by the GoGuides Network and GoGuides staff also provides daily support at various levels in the directory.

TWD (http://www.twd.in/) - Top Web Directory is a Search Engine friendly Business Web Directory and includes many categories covering the world of internet. The main aim of this business directory is to list quality websites and give the users hand picked quality results. The business directory is one of its kind as all the rankings are acquired naturally. All categories have their own individual article helping your site to gain further value. Top Web Directory also has a Webmaster Blog and a Theme Critic section to add a little information adding more value to the listed resources.

Tuesday, January 14, 2014

How to be a successful freelancer

Freelancing opportunities are growing rapidly across industries. Find out how to make the most of this trend.

When Sahil Manekia (see details below) returned to India after a 4-year stint in the US, he was expecting to land a good job with a leading organisation. However, the data analyst who specialises in assessing the impact of non-profit ventures, drew a blank.

"I wanted to focus on non-profit projects, but the jobs on offer did not match my skill set," says the 29-year-old Mumbai resident. Manekia now works freelance for companies to assess the impact of their corporate social responsibility initiatives.

In another part of India's financial capital, corporate trainer Maneesh Konkar is preparing a PowerPoint presentation for a workshop later during the month. A freelancer, 43-year-old Konkar conducts workshops for the sales teams of companies ..

You are your own boss and get to draw your own schedule. However, it is not a cakewalk. "While being on your own offers you the flexibility of working in your own fashion, it is certainly not a bed of roses. One has to work very hard to establish oneself and, subsequently, get a regular income to be successful," says Aditya Narayan Mishra, president (staffing), of head-hunting firm, Randstad India.

Ref : http://economictimes.indiatimes.com

Wednesday, November 20, 2013

CSS hack for Firefox

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>


It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions