Category: Technology

Introduction to Angular and how it starts up

Posted Murari NayakLeave a commentPosted in Angular, Learning, Technology

This article on introduction to angular is part of the Learning Angular series. Angular replaces AngularJS which had taken the internet by storm, when it was released almost a decade back in 2009. While AngularJS was quite a robust library, there were also quite some nuances which was making it difficult to manage. So the developers went for a whole rewrite of the library and built a framework instead which came to be known as Angular 2, or better Angular. Over the years, the team has been releasing newer versions every 6 months, v8 being the most recent. We won’t  … [Read More]

free ssl, let's encrypt, shared hosting

Install free SSL from Lets Encrypt on Namecheap shared hosting

Posted Murari NayakLeave a commentPosted in Technology

Google has made SSL a requirement for all websites, which makes it a great time to have SSL on all the websites. Here we will see how we can install free SSL from Let’s Encrypt on Namecheap shared hosting. Generating the free SSL certificate Go to SSL for free website. It first prompts to enter the website url. Once we fill your domain name, it should add both the url’s with the www and non-www domain. First it is required to verify the ownership of the domain which can be done in 3 ways:1. Automatic FTP verification2. Manual verification which  … [Read More]

page title angular

Managing Page Title in Angular

Posted Murari NayakLeave a commentPosted in Angular, Technology

Managing page title in Angular is quite straightforward by using the Title service provided by Angular. It’s as simple as calling the setTitle function with the new title. Following is an code excerpt from Angular docs public constructor(private titleService: Title ) { } public setTitle( newTitle: string) { this.titleService.setTitle( newTitle ); } This is fine for setting the page title from a single page, but it can be redundant to add this to every component from where you want to change the title. To make it easier, we can use the router events and have a centralized place to make  … [Read More]

href angular

href = “#” or href = “javascript:” in Angular

Posted Murari NayakLeave a commentPosted in Technology

A lot of times it’s quite difficult to decide between what to use for href attribute while developing Angular 2+ applications. Following are 3 ways to do that: 1. href = “#” This is considered the safest way to create a link without allowing the user to redirect anywhere on the link click. But this method only works for HTML pages. In case of Angular, the page redirects to the base page. 2. href = “javascript:” Using href=”javascript:” or javascript:void(0) violates the Content Security Policy as it can expose the page for certain types of attacks including Cross Site Scripting  … [Read More]

angular typescript pipe

Using Pipes in TypeScript (Angular)

Posted Murari NayakLeave a commentPosted in Angular, Technology

While it’s quite easy to use a pipe in Angular HTML code. In the following case, we are using a translate pipe. <h2>{{ ‘Hello’ | translate }}</h2> But using the same in TypeScript comes with some additional code setup.The setup can be divided into two distinct ways.1. Pipe without any DependencyThis method is the simplest one. We can just create an instance of the Pipe, and call it’s transform property with the text to transform as parameter. @Pipe({ name: ‘custompipe’, pure: false }) export class MyCustomPipe implements PipeTransform { constructor() {} transform(key: string) { return keyTransformed; } } ————————————- @Component({  … [Read More]

es6 features

New Features in ES6 / ECMAScript 2015

Posted Murari NayakLeave a commentPosted in JavaScript, Technology

We are going to take a look at the new ES6 Features, mainly the important ones. 1. Default Parameters Earlier way var calculate = function(x, y) { x = x || 10; } ES6 way var calculate = function(x = 10, y) { … } 2. Template Literals Earlier version of string interpolations var name = ‘Name is ‘ + firstName + ‘ ‘ + lastName; ES6 Way (usage of back-ticks) var name = `Name is ${firstName} ${lastName}` 3. Multi-line strings Earlier way var text = ‘This is the first line \n’ + ‘This is the second line.’; ES6 way  … [Read More]

css

CSS Tips

Posted Murari NayakLeave a commentPosted in Technology

Limitations of CSS => Limitation of vertical control=> No expressions=> No column declaration The head element can contain the css declaration. CSS3 Modules => Selectors=> Box Model=> 2d/3d transitions=> Animations, etc Using custom fonts @font-face {    font-family: ‘YourFontName’; /*a name to be used later*/    src: url(‘http://domain.com/fonts/font.ttf’); /*URL to font*/} Then, trivially, to use the font on a specific element: .class-name {    font-family: ‘YourFontName’;} Flexbox It allows to design a flexible structure without using float or positioning property. .flex-container { display: flex;} pseudo-class is used to define a particular state of an HTML element (selector:pseudo-class)pseudo-element is used to define a particular  … [Read More]

javascript

JavaScript: Working with Array

Posted Murari NayakLeave a commentPosted in JavaScript, Technology

Defining an array var arr = [1, 2];var arr1 = new Array(1,2); var arr2 = new Array(length); // This will create an array of the given length, but won’t initialize the values. The values would be empty and not undefined. Looping through Array arr.forEach((item, index, array) => {     // item => the current item     // index => index of the current item     // array => the actual array passed }); Retrieving an item from array arr[2]; // This will return 3rd element in the arrayarr[2] = arr[02] = arr[‘2′] != arr[’02’]arr.indexOf(2); // Returns the index of the item, or -1  … [Read More]

html javascript

HTML Tips

Posted Murari NayakLeave a commentPosted in Technology

Linking script and stylesheet in HTML <script src=”main.js”></script><link href=”style.css” rel=”stylesheet”></link> ———— New in HTML5canvas | audio | svg | header | footer | aside | article | nav | section etc… ————– CSS Reset – Removes browser default stylesNormalize.css – Sets a stndard across all browsers ———– parseInt(“20″) + 20 = 40; —– Semantic HTML – Semantic tags like header, nav, section, footer, etc are used that convey infomation about the content. ————- HTML4 vs HTML5=> HTML4 DOCTYPE declaration was too length, while in HTML5, it’s just <!DOCTYPE html>=> HTML5 has more semantic tags and also has multimedia supporting attributes=>  … [Read More]

javascript

Algorithms in JavaScript

Posted Murari NayakLeave a commentPosted in JavaScript, Technology

SECTION 1 – Introduction Introduction to AlgorithmsAlgorithms make programs run better and faster. SECTION 2 -FizzBuzz IntroductionA function that will take a number and log all the numbers from 1 till that given number.Additionally, if the number to be logged is divisible by 3, then log ‘Fizz’, if divisible by 5, then log ‘Buzz’ and if by both 3 & 5, then log ‘FizzBuzz’ Modulus Operator – It returns the remainder of a division. Code function fizzBuzz(num) {    for (var i = 1; i<= num; i++) {        if (i % 3 === 0 && i % 5 === 0) {  … [Read More]