Category: front-end-development

Custom Property of CSS – Variable in native CSS

Custom properties are the wonderful new features of CSS with extensive support in contemporary browsers. A custom property name that is pre-fixed with ‘–’ like, –heading-color: #00ff00; and are accessed using the var() function. For example color: var(–heading-color);

Previously we have been using variables with CSS preprocessor like Sass and Less, now variables have … Continue reading “Custom Property of CSS – Variable in native CSS”

Is jQuery still a relevant library in front end development?

Yes or No will not be the correct answer for this question, but jQuery should be considered as other library and only be added when needed. It should not be added by default in all the projects. It costs you 30 kb of compressed script that in turns give you simple code for easy handling … Continue reading “Is jQuery still a relevant library in front end development?”

Javascript Callback Function explained in a story of “King and his spy”

Callback function are almost everywhere and play very important role in javaScript. Before jumping directly into the story, let’s clear the dust and understand “What is callback function?” and “Why callback function is important?” If not interested in basic, jump directly to the story. What is callback function? JavaScript code is executed line by line, … Continue reading “Javascript Callback Function explained in a story of “King and his spy””

Should Designer code? Or at what level, a designer should code?

User Experience, Design thinking, Innovation, Customer Experience; these are a few terms floating in the IT field for the success of a product. Designers are considered to be crucial in the success of a product. A big responsibility is already on the shoulder of a designer. Should designer know or do coding along with designing? … Continue reading “Should Designer code? Or at what level, a designer should code?”

Mobile and Web strategy to launch a product

We are living in a technology changing world. Every year new technologies, new frameworks and new devices are launching. Users are accessing the web product with different devices. Now, web is not limited to desktop on our workstation. It is in our pocket with mobile, it is in our living area with smart TV, It … Continue reading “Mobile and Web strategy to launch a product”

Package Manager – why use npm? How to use npm?

Package manager manages assets (install, upgrade, remove, manages dependencies) used in a project. NPM is used to install node packages (such as underscore, grunt, gulp, jsHint etc.) from npm registry. NPM makes it easy for JavaScript developers to share and reuse their code. You just need to publish package to the registry. These reusable codes … Continue reading “Package Manager – why use npm? How to use npm?”

Custom responsive grid with sass susy – grids on demand

While starting the responsive web development, first question pops up. Which grid framework to use? There are many grid framework to choose like bootstrap, foundation, 960 Grid System, Golden Grid System and many more. Are these grid framework flexible enough for modern designs? Class based grid frameworks are not flexible enough Bootstrap is one of … Continue reading “Custom responsive grid with sass susy – grids on demand”

SASS – Efficient use of Mixin and Placeholder

SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name. Beauty of the SASS a CSS preprocessor Writing a vanilla CSS is … Continue reading “SASS – Efficient use of Mixin and Placeholder”

AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch

Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements. Conditional display using ng-show/ng-hide The ng-show / ng-hide directives require a boolean value to evaluate the visual … Continue reading “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”

Single page application using AngularJS

Single page application is superior in terms of performance. It decreases load time of pages by storing the functionality, once it is loaded the first time. If you need to update small parts of page, it’s faster to focus only on these views and their data rather than reloading entire page. Some of the key … Continue reading “Single page application using AngularJS”

Some basic techniques to increase the website performance

In this competitive world, every company (brand) is trying to prove themselves different from others, where UX people are playing a good role by evaluating the market, competitors, and users. An application with great user experience have lots of study and research behind it. But is it sufficient, that an application have great user experience? … Continue reading “Some basic techniques to increase the website performance”