POSTS TAGGED ON "JAVASCRIPT"

How to create an awesome carousel component using ReactJS

ReactJS has been around for 3 years now. When I heard it first time, I didn't pay much attention to it. I thought it's just another framework like Backbone or Angular. Honestly, I was too tired with these MV* frameworks (Sorry creators!) springing up one after another. I believe they solve the same problems in different ways. It was this thought that kept me out of learning React for quite a while until I started to hear more noise from my colleagues. Actually, ReactJS is not an exception though! It also tries to solve similar problems but in quite different ways. It is their ways that interests me and many. They open doors to some new possibilities. I was not completely sold by their Virtual DOM strategy but I was quite attracted to JSX and isomorphism.

In this tutorial, you are not only gonna learn React but also how to setup an environment with modern tools like Webpack and Babel to simplify development and distribution. As I used to say, the best way to learn a technology is to build something useful out of it. Alright, what we are gonna build using React? We are gonna build an awesome full screen image carousel component with audio. I had trouble to choose a proper name for this component and finally christened it as "Hollywood". You know the reason why when you see the demo. Note, when I say ReactJS or React I mean the samething. In this tutorial, I'll use these two words interchangeably. OK fellas, it's time to build. Come and join me!!

Hollywood - A Simple Carousel

Fig 1. Hollywood - A Simple Carousel

Continue Reading

How to create an awesome hybrid mobile app - Part IV

Here comes the fourth and final part of the hybrid mobile series in the hot summer. At the time of writing this from Bangalore (was called as Green City not any more I think) it's quite hot like 40° C. Time to take care of our nature! Anyway, we've come through a long way... let's finish this final part. Our hybrid mobile app "Safe" has grown into a pretty good shape now. So far, the work we've done allows an user to select a photo and persist in a secured way by AES 256 encryption. We also completed the work to edit an already persisted photo or wipe it out permanently.

Safe Login Pages

Fig 1. Safe Login Pages

Encrypting and persisting the photos is not enough to keep them safe! We've to protect the access to the app through a login mechanism and that's what we are gonna build in this part. We'll also see how to build the settings and info pages and last but not least I'll introduce you to Jasmine and show how she'll help us to write some good unit tests. So folks, ARE YOU READY?

Continue Reading

How to create an awesome hybrid mobile app using Cordova - Part III

Welcome to the third part of creating an awesome hybrid mobile app series. In the last two parts we've set-up the development environment, created grunt tasks to support development and deployment and also we've developed two important pages of the app: list page and the single photo view page. If you remember since we didn't complete the add functionality we've to hard-coded some data in the router to complete these two pages. In this part we are going to complete the complex page of the app - the add/edit page.

Safe - Add/Edit page

Fig 1. Safe - Add/Edit page

Once you completed this part you can successfully upload your photos from the photo library and keep them safe. In the next and the final part we are going to work on the login functionality. Please share your questions and thoughts through comments.

Continue Reading

How to create an awesome hybrid mobile app using Cordova - Part II

Hello friends, finally.. I'm back to share the second part of creating the hybrid mobile app. Apologies for taking too long! From my experience it looks like writing is harder than coding! Thanks for all the readers who shared their valuable comments. In the previous part, we worked mainly on setting up the development environment and also we tried to create a "Walking Skeleton" by wiring up the crucial components. Sadly, we haven't seen any code specific to the mobile app yet. I bet this part is gonna throw away that. We are going to do some really cool stuff here! We are going to build two important pages: "list page" and "single photo view page". We'll also see how to deploy the app in an iPhone and Android. At the end of this part, you'll have a simple and nice app (with some features) smiling right at you from your mobile.

Safe running in iPhone and Android Moto E devices

Fig 1. Safe running in iPhone and Android Moto E devices

Actually, I tried to complete most of the core functionalities of the app in this part including the add/edit feature (which is kind of little complicated) but that ballooned the size of the article to a mini-book. Well, nowadays most people don't like to spend more time on reading lengthy articles and so I moved the add/edit feature to a separate part. You would be expecting two more parts from me. In the upcoming one, we'll see how to build the add/edit page and in the last part we'll see how to implement the login/registration feature and the related functionalities of it.

Continue Reading

How to create an awesome hybrid mobile app using Cordova - Part I

It's been little over an year I've published anything in my blog. Every time I inspect my Google analytics page I sense the traffic is getting down 😣. I've been patience for all this time working now and then with sheer confidence that I could complete this taunting work. People who have been following my recent blog posts know that it's no longer a typical blog where enthusiastic developers write about creating todo app in some got-popular-lately technology or comparing two frameworks and describing their pros and cons in a table. I encourage learning by building something for real. I'm driving my website in that path. It's a place where I can share the experience about something that I built lately. It's easy said but it takes a lot of time and effort to build something useful and share with others. In all those months passed I was working in this hybrid mobile app so called "Safe" that helps to store photos safely. The app runs successfully in both iOS and Android platforms. I would like to share the experience I had in creating this app through this series of blog posts. I strongly believe that it'll help a lot of people to build their own *dream* app 🌝.

Safe - hybrid mobile app

Fig 1. Safe - hybrid mobile app

The idea (💡) of building a mobile app came to me three years back when I was facing difficulty in keeping sensitive information like passwords, credit-cards and photos. I own an iPhone 3GS device and was thinking that developing an app would help me to keep my secrets safely and easily accessible from anywhere. There are already a lot of apps out there that solves this problem but I want to build one myself so I can learn something new. I ended up finally developing an app that could store only the photos but not the textual information. The good news is the app runs fine in both iOS and Android devices.

Continue Reading