Category: JavaScript

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!

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!

ECMAScript 6 References

I’m in process of collecting articles, books on ECMAScript 6. I thought it will be useful for you too!

http://people.mozilla.org/~jorendorff/es6-draft.html

https://leanpub.com/understandinges6/read

https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014

http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/

http://www.slideshare.net/Solution4Future/javascript-17363650

https://babeljs.io/docs/learn-es6/

I will keep adding as soon as i come across useful links!

Happy JavaScripting!!!

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!

Limit File Upload size in ASP.NET Web applications

One of the problems in file upload is to check the file size before uploading to the server. It’s been a big problem for web developers to restrict the file upload, if it exceeds the given file size .

Now, we can restrict it before uploading to the server using simple JavaScript snippet. Thanks to latest browsers – Microsoft IE 10+, Chrome 21+, Firefox 15+ for making this happen.

Here is the code to do that –

Code Snippet
  1. <form id="form1" runat="server" enctype="multipart/form-data">
  2.     <div>
  3.         <asp:FileUpload runat="server" ID="fileUpload" />
  4.         <asp:Button runat="server" Text="Submit" OnClientClick="return Validate();" OnClick="FileUpload" />
  5.         <div id="Message"></div>
  6.     </div>
  7.     </form>
  8.     <script type="text/javascript" >
  9.         function Validate() {
  10.             var msg = "";
  11.             var bIsValid = true;
  12.             var uploadedFile = document.getElementById("<%=fileUpload.ClientID %>");
  13.  
  14.             if (uploadedFile.files[0].size > 512000) // greater than 512KB
  15.             {
  16.                 msg += "File Size is limited to 512 KB!";
  17.                 bIsValid = false;
  18.             }
  19.  
  20.             var ext = uploadedFile.value.substr(uploadedFile.value.indexOf(".") + 1, uploadedFile.value.length);
  21.             if (ext != "jpg" || ext != "png") {
  22.                 msg += "You can upload only .jpg or .png images!";
  23.                 bIsValid = false;
  24.             }
  25.             if (!bIsValid) {
  26.                 document.getElementById("Message").innerHTML = msg;
  27.                 return false;
  28.             }
  29.             //On Success
  30.             return true;
  31.         }
  32.     </script>

The above code may fail in browsers which doesn’t support HTML 5 features, so it’s better to validate at server end as well for additional security!

Code Snippet
  1. protected  void FileUpload(object sender, EventArgs e)
  2.       {
  3.           if (fileUpload.PostedFile.ContentLength > 512000)
  4.           {
  5.               return;
  6.           }
  7.       }

 

NOTE: The above JavaScript snippet can be used across the technologies including JSP, PHP etc.,

Happy Web Programming!!!