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); :root { –heading-color: red; –heading-bg: #a1a1a1; } H1 { background-color: var(–heading-bg); color: var(–heading-color); } Previously we have…
-
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…
-
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,…
-
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?…
-
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…
-
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…
-
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…
-
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…
-
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…
-
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…