Category: HTML 5

React is FAST in what sense?

Today I was debating with my colleague on how React is fast and in what sense? It was interesting discussion and we thought of exploring on this context, hence blogging it for my reference!

I assume, you’ve knowledge on React JS framework before reading this article!

React is FAST in the sense of DOM updates!!!

How React is fast in updating the DOM (Document Object Model) ?

  1. React creates Virtual DOM (React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”) for every component.
  2. Tracks for the changes happening in the react component and updates the Virtual DOM.
  3. Reconciliation happens with the actual DOM for the changes in the Virtual DOM.

It’s all the React magic of transforming the model changes to views!

I’ve come across few blogs posts where they explained the inner details of the React JS and Virtual DOM. Here are few of them –

Real Benefits of React JS Virtual DOM

React: The Virtual DOM

VideoTech Talk : How React.js works

Happy Programming!

Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushing an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, this will have significant impact on the apps we’ve already built!

If you’re a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates and test your apps often.

It’s highly recommended to subscribe Chrome Canary beta channel – Android System WebView beta to get the updates early and act accordingly.

You can join Google+ WebView beta community to get latest updates. Android System WebView is supported on Android Lollipop 5.0 & above versions.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

NOTE: It’s a temporary solution till you work out a fix for it. If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Hope it helps!

Get started with Web

Web is very powerful. It’s almost replaced the desktop environment. Here are the few resources to get started –

  1. Codecademy
  2. CodeSchool
  3. Google Web
  4. Mozilla Developer Network
  5. Microsoft Virtual Academy  – Lot of cool video courses available for FREE!
    1. Getting Started with Web Technologies
    2. The Modern Web Platform Jump Start

  6. Udacity Courses ( FREE )

 

Happy learning!!!

Quick look of Keyboard events on Mobile browsers

As part of the project, we were working on the forcing the user to enter correct information while keying in. We tried leveraging the keyCode, charCode & which properties on event object.

We did a quick trial by creating a demo Hybrid App and tested the same on the Android and iOS devices. The results were surprising!

Google Chrome to be the future rich browser which is FAILING and Apple’s Mobile Safari is WINNING. Google Chrome browser is failing to return the correct key codes from Android OS KitKat 4.4 and above.

So, it’s better to have the validation check while submitting the form instead of keying in!

I have created a demo page to test the same – KeyEvents

Below are the quick analysis on different Android and iOS devices –

Device & OS Status
Samsung Galaxy NOTE 8000 (4.1.2)      √
Samsung Galaxy S3 (4.3)      √
Samsung Galaxy S4 (4.4.2)      ×
Nexus 7 (4.4.4)      ×
Nexus 7 (5.1)      ×
Nexus 9 (5.1)      ×
Nexus 4 (5.1)      ×
Nexus 5 (5.1)      ×
Nexus 6 (5.0)      ×
Apple iPhone 6 Plus (8.0.2)      √
Apple iPhone 6 (8.1)      √
Apple iPhone 5S (8.0.2)      √
Apple iPhone 5 (7.1.2)      √
Apple iPhone 4S (8.0.2)      √
Apple iPad mini (8.0.2)      √
Apple iPad (6.1.3)      √
Apple iPad Air (7.1.1)      √

Happy Mobile programming!

Web Tools from Microsoft – modern.IE

I was amazed with the amazing tools provided by Microsoft for Web developers and they hosted a website specially for these tools – modern.IE

So, I’m planning to brief about the Tools in modern.IE site in this post. Let’s see what’s in?

Website Tile – I love this feature! It allows to create Windows Tile in few seconds. Allows the user the user to pin the website to their Windows 8 start screen.

Virtual Machines – It provides virtual machines for different platforms – PC, Mac and Linux. Allows to test your website on different versions of Internet Explorer from your Mac or Linux.

Site Scan – This is a service which allows you to scan your website for coding problems. It helps developers to improve the performance of the site by fixing the pitfalls. It’s Open Source!

Compatibility Scan – It allows to scan your website for your code which is no longer supported and you can update it! This is very useful for outdated browser support especially for < IE 9+ versions.

Browser ScreenShots – It takes the screenshots of your web site in different browser on various platforms includes Mobile Safari and Android.

Developer Channel – Like Firefox and Chrome, IE started pushing nightly build with upcoming features enabled on it! It allows the developers to test the upcoming features in IE to take advantage of latest features!

It has much more in it including Community Support, MSDN resources etc., It’s all yours to explore the hidden information!

Happy Website – IE programming!!!

Build Hybrid Apps Online with Adobe PhoneGap Build

The Pain area while creating Hybrid Mobile Apps is building to multiple Platforms. I’m NOT saying it’s too difficult, also, it’s not simple process. How it will be if you have a tool which does this BUILD process automated for different platforms? Super Cool… Isn’t it!

It’s Adobe PhoneGap Build tool! Adobe offers this as a CLOUD service, where you don’t need to install any Software on your PC/MAC. Great, Thanks to Adobe for making this. Personally, i love this 🙂

How to use this Adobe PhoneGap Build?

Before going to know about this tool, be ready with your source code for HYBRID Mobile App which includes – HTML, CSS and JavaScript.

Now, visit the PhoneGap Build URL – https://build.phonegap.com/. Register yourself. You have FREE and also PAID plans and it totally depends on your needs. If you are OSS developer, then FREE plan should be fine.

Once you logged in, you may have to click on + new app

newapp

It allows you to pull the code from GIT repo. It can be a Public or Private repo. To build Private repo’s you may have to pay for it and maximum number of Apps you can create is 25(with single login)!

newapp

I have pushed a demo app to Git to test this PhoneGap Build and if you wish to try out, you can use it. It’s https://github.com/roopeshreddy/PhoneGapAppDemo/

Once you have entered your .git URL, you can click on pull from .git repository. This will fetch the source files from Git and make it ready for BUILD.

NOTE: You can also upload zipped folder instead of .git repo!

Now, it will be ready to create BUILD. You can edit the name of the application, enable debugging etc.,

newapp

Once all the options are set, click on Ready to Build which will create respective installer files for different platforms!

Untitled

Aaah, we are ready with installer files for different Platforms. Just click on the platform icons to download the respective installer file.

As of now, Adobe PhoneGap Build supports following platforms –

  • iOS
  • Android
  • Windows Phone
  • BlackBerry
  • HP WebOS
  • Symbian

NOTE: As per the Official blog of Adobe PhoneGap, they are depreciating BlackBerry, HP Web OS and Symbian Platforms. you can ready more about it here – Phone Gap Platform depreciations

Happy Mobile App Development!

Tools and Tips for HTML 5 Videos

With introduction of HTML 5, embedding an video on a web page has become peace of cake! It has overcome the barrier of installing plug-ins(Adobe Flash, Silverlight etc.,).

When i start playing around with HTML 5 Videos, i encountered some problems and i wish to discuss the same, so that it will be helpful for people, who has similar issues.

Before diving in to the content, let me remind the browser compatibility of HTML 5. HTML 5 is supported in following browsers –

  • Microsoft IE 9 +
  • Mozilla Firefox 5 +
  • Google Chrome 10 +
  • Apple Safari 5 +
  • Opera 10 +

So, that means, HTML 5 video is supported only in the above mentioned browser list. For incompatible browser, you may have to use or <object> tags by using Fall back method. You can use Modernizer, to check whether the browser supports HTML 5 Video and provide an fall back method if doesn’t support!

Now, let looks in to the tools. Basically HTML 5 Video supports the following formats –

  • MP4 with H264 video codec and AAC audio codec
  • WebM with VP8 video codec and Vorbis audio codec
  • Ogg with Theora video codec and Vorbis audio codec

All web browsers doesn’t support all the video formats. It totally depends on the web browser.

Browser MP4 WebM Ogg
IE 9 + YES NO NO
Firefox 5 + NO YES YES
Chrome 10 + YES YES YES
Safari 5 + YES NO NO
Opera 10 + NO YES YES

Looks like Apple and Microsoft are great friends Smile because they support similar video format!!!

Now, the challenge is how to encode these videos to the required formats. If you wish to supports for all the browser, you may have to encode your video in all the three formats. After search on the web using Google and Bing, i found these below two software’s, which are pretty good in converting the videos to HTML 5 video support format!

  1. Any Video Converter
  2. Miro Video Converter

Both of the software do a good job in converting the videos in to the required format and it’s simple too!  

We are done converting the videos and we programmed it, and opened the web page…. BOOM… Oops, Video is not playing. It’s says, Video playback aborted due to a network error.

It’s because, MIME type is not set in the Web Server. I will consider, IIS 7 as my web server, and we will see, how to add the required MIME types!

  1. Launch IIS.
  2. Select the website. In the middle pane, under IIS section, select MIME Types icon.

image

3.   Now click on Add… option in the right pane. It will invoke Add MIME Type dialog box.

image

4.    Now add the following file types one by one in the respective edit boxes!

File name extension MIME type
.mp4 video/mp4
.webm video/webm
.ogg video/ogg

5.   Once, you are done adding the file types, close the IIS.

Now try again with the web page, which has video, surprise it’s working now. Yeah! it will work, because, we set the file type information.

NOTE: You can do the same for older IIS versions. For other web servers like Apache, we may have to do similar settings but in different way!

I think it’s time to kick the plug – ins and start using HTML 5 Video!

Happy Web Programming!!!

Thanks!