Posts

UI/UX Beyond Design and Animations

Image
From last few i was reading a lot of blogs and articles on User Experience Design so i thought of writing a article on UX for Software Products. When we design any App/Software our main agenda is to fulfil the goals of that product, but we don't think too much about the end user experience. Few Days back i Visited a agency of "Hero MotoCorp", and the person siting on sales counter was facing some difficulty with the accounting software so he asked me for help, i went their and seen the software he is using  and for a moment i started thinking this is the condition of software development companies in india, The things i noticed are mentioned below: 1. The UI is super messy. 2. Nothing Self-explanatory in the UX. 3. Taking Much numbers of clicks for single tasks. 4. Improper use of UI Components. 5. No User Manual integrated in the Software for quick assistant. Although this software is fulfilling all the needs,  but it is also generating a chance of error...

Handling GET and POST HTTP Request in NodeJS and Express Application

Image
From Last few months i worked a lot on Full Stack JavaScript Development, and from my experience i found some best and simple ways to handle different HTTP Request in Node & Express API, In this article we are going to make a simple CRUD(Create Read Update and Delete ) API. If you are not aware of setting up a Node and Express Application Kindly refer my previous article here. So Lets get Started: Like a normal Express Application in line number 1 & 2 we are importing express and initialising it in "app" constant, now "app" is referencing our whole applications. 1 2 const express = require( 'express' ); //importing Express const app = express(); //initialising Express app To Keep this Example simple we are going to use an array to save our data instead of a Database. While Developing an API, Validation is an important part that needs to be considered. for validation we are going to use "joi" a node module from...

A Look at extraordinary Indian Startup - Elucidata

Image
Their is always space for innovation said by someone and it is right. Few days back i was looking at some of the startups in delhi and i came across elucidata, an indian startup trying to solve a problem which does not look like a problem in first sight but if we think deeply that's a great problem, in simple words they are trying to reduce the time taken in discovery of a drug using technology. The most exciting part about their idea is they are thinking out of box and trying to create big impact on society. Now moving to history of problem, if u remember the Ebola virus their is no vaccination available till now,then the question arise why not till now? The answer is the drug discovery process takes a lot of time and it is bottleneck for most of the researches. Then how can we accelerate this process, here technology comes into action, during research lot of date is generated and to get meaningful data and insights  from these large data set is really tough and ti...

Beyond Hello World with NodeJS | 1.1 | The Simplified way

Image
In  my  Last article , we made a simple server using that responds with "Hello World". you can follow the previous article  Understanding NodeJS and Hands On | The Simplified Way   In this article we are going to create something beyond just "Hello World", we are going to talk about installing 3rd party modules using npm and using it in our node application to make things easier. Firstly we will will start with most popular server side framework " ExpressJS ", It is a JS framework which makes the things easier for us, let watch it in action. Till now our project directory contains only 2 files that is "index.js" and "package.json" and we have not used any 3rd party module in our application. Now we will install "Express JS" as third party dependency module from NPM, and will make a server which return different kind of response on different requests. Step 1: Open your terminal in your project directory...

Understanding NodeJS and Hands On | The Simplified Way

Image
Technology is evolving everyday and if you are not updated with it you can not survive in this highly competitive IT industry. I still remember my first year of engineering when PHP is considered as god for web developers,But in just four years i have witnessed how rapid technologies evolves and now PHP has lot of competitors like Python(Django etc.), Ruby on Rails, NodeJS and many more. Among all of them NodeJS is most popular and trending, NodeJS is not going to replace PHP, Rails or Python, but it has some awesome features that make it stands out of queue: 1. Uses complete Javascript for everything. 2. Very Fast as it is Based on Chrome V8 Engine . 3. Single Threaded and Non-Blocking Model. 4. At lower level it is written in C language so it its execution is very fast. Actually what is NodeJS and why you should use it?? First of All NodeJS is not a programming language, It is just a Server Side Runtime Wrapper on Chrome V8 engine and uses Javascript as programming ...

The Relation of UI(User Interface) and UX(User Experience)!

Image
The Relation of UI(User Interface) and UX(User Experience)! When we talk about UI/UX, the first thing comes in our mind is layout design of app consisting of Navbar,Menu,Images etc. But the thing What is more Important, UI or UX and what they actually mean. Their Definition can slightly vary depends Upon Situation. Few Weeks Back i got a chance to meet a Google Design Advocate and we have an hour long discussion on the relation between UI and UX and how to find the proper combination of UI and UX , according to our discussion Visual appearance of any application is Defined by UI but UX consists of many things which includes Meaningful animation and transitions, Ease of executing an operation(No. of clicks required to execute a task), Performance on Different Hardware and Different Network Conditions etc. If Your App has very good Colourful UI but it shows loading loading and Loading in slow network then indirectly you are loosing your potential customer and all these just due ...

Definition of a Good UX by a Googler

Image
Hi Folks, Few days back I was invited to world's first ever Developer Student Clubs - DSC Summit at Goa, Ofcourse the summit was fabulous as it is organized by Google. Apart from Radisson Blu and Goa. The venue was surrounded by awesome googlers and some intelligent minds from India and world. I came across one of the google who is  Developer Advocate, Web Developer Relations at Google Indonesia his name it Yohan Totting. We have a long discussion over dinner about Idea Analysis , Prototyping ,Product Development and various other stuffs. one of them is "Define Good UX in one line". and his opinion really surprised me . according to Yohan "if user is able to use your application seamlessly without thinking for even single second then it is a good UX means your complete application should be self explanatory ". He was so clear with the concept of Frontend design, Product Design and he really inspired me. In an hour long conversation he has given vario...

Customize Website's Social Sharing Experience with Open Graph Protocol

Image
Hi, Have you ever shared your website/webpage link on social media like Facebook,twitter or even Whatsapp for any purpose it may be marketing or advertising we are not concerned about that.You may have noticed that as you insert any link these social media platforms automatically fetches some image and text snippet from your webpage like this for "www.lpu.in". And if the snippet contains useless info then ofcourse you want to change it. Basically most social media fetches the title and some text and image but if you want to show customized image/text/description for your website then you can easily do it. Introducing Open Graph Protocol   by facebook that let you to customize your social sharing experience with just few lines of meta tags. <html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type...

Optimizing Rich Content for Web.

Image
Hi Everyone, Suraj Here back again with an article on optimizing Rich contents for Web Applications. Data is Currency !Well Said by someone . Lets Talk about some features of a good web App in terms of Data Consumption and Performance. A web app consists of various contents like Images, Videos,Text, Animations and many more and what if these contents are super heavy and not well optimized for balanced Performance on various Devices.In this article we are going to talk about media optimization techniques that you can use for Super performing Web Apps. 1.Pick The Right media Format. For Artwork,Clipart, Emoji, Logo use SVG or PNG format. For Photos use JPEG format. For Animation use GIF format. Their are other format exists but they are not supported by all devices like WebP, APNG, JP2, JPX. 2. Remove EXIF data from your media content. EXIF stands for "Exchangeable Image file format" which contains all information about image like location,Camera Model an...

Developing a Progressive Web App from a Static Web App.

Image
Hi Everyone Suraj Here ! Back again with an awesome article on Progressive Web Apps. From Last Few years PWA's are in Buzz. Tech Giant  GOOGLE always talks about PWA in all its major events like I/O, Chrome Developer Summits, Solve for India , Google Developers Days and many more. Lets Talk little bit about Progressive web Apps according to google. Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience. To Know more about PWA Concept have a look at my older post HERE . Today I am Going to Show How You can Convert your Existing Static Website to a Progressive Website in minutes....