Category Archives: Web
ReactJS – Step-by-Step Tutorial on Quiz Development
I just finished up writing a simplistic/trivial framework using ReactJS using which one could quickly create online quizzes. The code for this could be found on github on following page named as ReactJS-Quiz. I would like to take this opportunity to share AngularJS-Quiz that I wrote sometime back. I must say that I found writing quiz framework using ReactJS more fulfilling as it got aligned to my OOP oriented thinking and I was not required to envisage templates etc as in case of AngularJS. That said, both frameworks are cool and have their own pluses and minuses. Please feel free to suggest if I missed on mentioning one or more …
ReactJS – What is this.props.items.map Property?
This article represents concepts around usage of “map” method to traverse and display list of similar objects representing a component in ReactJS. The title represents “this.props.items.map”, although it could be anything such as “this.props.profiles.map” like in examples below where profiles or items represent an array. It could be used to create a list, table etc. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Map is NOT a feature of ReactJS Code Sample – Usage of “map” as in this.props.profiles.map Map is NOT a feature of ReactJS After looking …
ReactJS – How to Configure Sublime TextIDE for Faster Development
This article represents instructions on how to configure your existing Sublime Text Editor for faster development. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the instructions: Install the Package Control within your Sublime TextIDE. Follow instructions on package control page. Pay attention to tabs comprising of different information for Sublime Text 2 and Sublime Text 3 edition. Once done, Type ctrl+shift+p on Windows and it opens up a command palette. Type React, select ReactJS That is it! You could open up a file, save it as *.js, and type rcc. It would print class creation template …
NodeJS – How to Develop Javascript using Console (Node)
This article represents tips on how to do Javascript programming using Console with the help of NodeJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Setting up NodeJS Environment Program Hello World & Execute on Console Setting up NodeJS Environment I recommend using Docker environment for setting up the NodeJS environment. Using that you could work on CentOS and NodeJS and make bets use of NodeJS. Follow the instructions on following page, Dummies Notes – Get Started with Docker Hello World to setup the Docker environment. Recently, Docker …
Docker – How to Install NodeJS on Docker
This article represents quick instructions on how to install NodeJS on CentOS Docker Image. The detailed instructions of installing NodeJS on linux could be found on this page. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is the set of instructions: Install the docker on your machine. Pull the Centos docker image Create a container using the Centos docker image. Following command could be used: docker run -ti -dP –name centos -v /c/Users:/mnt/Users centos:latest /bin/bash Start the docker container and attach. Following command can be used: # Starts the docker container docker start centos # Attach docker …
ReactJS – Controlled Component Code Example
This article represents code sample for ReactJS UI controlled components along with related details. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. The code sample represents an input field consisting of “Calvin”. Once you change the text, the “calvin” written with “Hello” would also change. Following are the key points described later in this article: What are controlled components? Code Example – Controlled Component What are Controlled Component? As per the ReactJS Form page, An <input> with “value” set is a controlled component. In a controlled <input>, the value of the rendered element will always reflect the value …
ReactJS – How to Think & Program Hello World – Part 1
This article represents Hello World example in ReactJS with explanation on how one could think in component-oriented manner when working with ReactJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Hello World Code Sample Thinking & Programming Hello World Hello World Code Sample Paste the code below in an HTML file and open up in a browser. The text, “Hello, Calvin” will get printed. <!DOCTYPE html> <html> <head> <title>Hello ReactJS!</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js”></script> </head> <body> <div id=”content”></div> <script type=”text/jsx”> var HelloMessage = React.createClass({ render: function() { return …
AngularJS – Two Different Ways to Bind Model Data to HTML Element
This article represents two different techniques using which application data (model) could be bound to HTML element in AngularJS. Either of the technique is used to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Bind data using {{ expression }} syntax Bind data using ng-bind directive Recommended way of binding data Bind Data using {{ expression }} Syntax Following …
Casperjs Hello World in 10 Minutes
This article represents instructions on how to get started with programming casperjs scripts within 10 minutes. In this article, the sample program is written for scraping Amazon.com homepage and printing title of the page. One of the biggest issues or hurdle, I would say, in getting started with any framework is related with downloading the tool/library, installing and configuring the environment in order to execute the program. Thanks to Docker creators, this is taken care in a very neat manner so much so that one could do following to set up the development environment in literally no time. Download the image of the development environment. Create a Docker container using …
Top 4 Javascript Frameworks to Watch out in 2015
This article presents analytics on popular Javascript frameworks and call out top 4 javascript frameworks (event-handling) one should watch out in 2015. From the analysis below, AngularJS Rocks!!! Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the top 7 Javascript frameworks that are considered in this analysis: AngularJS JQuery BackboneJS KnockoutJS ReactJS MeteorJS EmberJS The analytics presents data based on trends captured from Google Trends and Indeed.com job trends. Please feel free to suggest any javascript frameworks that I may have missed. From the analysis below, following are top 4 javascript frameworks that you may want to watch out …
ReactJS – Component-oriented UI Design Explained with Calculator Example
This article represents high level concepts with code examples used to create a trivial calculator using ReactJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Design & Analysis – ReactJS Calculator Code Sample – ReactJS Calculator Design & Analysis – ReactJS Calculator Calculator consists of three components, one (Operation) of which is reusable component. Following are these components: InputField: This represents textfield which allows uses to enter the number Operation: This component represents operation such as addtion (+), subtraction (-), multiplication (*), division (/) in the example …
Sublime ReactJS Bootstrap HelloWorld Template for Quickstart
This article represents Sublime Snippet for quickstarting your ReactJS learning sessions with help of ReactJS-Bootstrap code for HelloWorld. It comes very handy for me and thought to share with you. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Code Sample – Sublime Snippet for ReactJS Bootstrap Hello World Template In your sublime editor, go to Tools > New Snippet, paste the code below and save. Open a new file, save it as html file, write “rjshello” and press CTRL+Space bar. That is it. You would get the ReactJS Hello World code for quickstarting your project. The code …
Java – How to Get Users Tweets using Twitter HBC Http Client
This article represents code samples which could be used to retrieve users tweets for one or more Twitter users, using Twitter HBC Java client. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Key Steps in Retrieving the Users Tweets Code Sample – Get User Tweets Key Steps in Retrieving the Users Tweets Following are key steps required to be taken to retrieve users tweets: Get consumer key and access tokens details Determine userId for users for whom you want to get the tweets as they appear. For test …
Java – How to Get Started with Twitter HBC Streaming API
This article represents instructions on how to get started with HBC, A Java HTTP client, for consuming Twitter’s Streaming API. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: How to get Twitter Consumer/Access Token Keys Instructions to Get Started with HBC How to get Twitter Consumer/Access Token Keys Before getting started with HBC API for integrating with Twitter API, make sure that you have acquired following four details from Twitter: Consumer Key Consumer Secret Access Token Access Secret Token All of the above keys could be started from …
Maven – How to Build Jar Files and Obtain Dependencies
This article represents facts on what would it take to build one or more jar files for a given framework/library using Maven, provided the framework’s downloadable files consisted of pom.xml. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. So far, whenever I came across pom.xml file in the framework that I downloaded in order to get the jar file, I hated it. I used to, then, go to internet and get the compiled jar file(s) for the framework/library. And, good thing is that I have been able to get my work done. This was purely out of my …
Java – How to Get Company Updates using LinkedIn API
This article represents code samples and changes that need to be done in original Linkedin-J framework (open-source) to get company updates of different types such as following: Job Posting Status Updates New Product Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Code Samples & Steps to Get Company Updates Following files need to be changed along with mentioned changes: LinkedinApiUrls.properties: Following code needs to be added under APIs mentioned under companies: com.google.code.linkedinapi.client.getCompanyStatusUpdates=http://api.linkedin.com/v1/companies/{id}/updates{queryParameters} LinkedInApiUrls.java: Following code needs to be added: public static final String GET_COMPANY_STATUS_UPDATES = linkedInApiUrls.getProperty(“com.google.code.linkedinapi.client.getCompanyStatusUpdates”); CompaniesApiClient.java: Following APIs need to be added: /** * Gets the …
I found it very helpful. However the differences are not too understandable for me