Learn to write the functions in TypeScript and print it in TypeScript
In this tutorial, we will learn how to write our first function using TypeScript. In the earlier tutorials, we have discussed how to get started with TypeScript, variables, arrays in TypeScript. You can access our previous tutorials from the menu. Now let’s get started with the first function in TypeScript.
Functions in TypeScript has similar usage as that of functions in other programming languages like Java, Python, R and so on. In this tutorial, we will demonstrate how to create a simple function that helps in printing a “Hello” followed by the “Name” message.
Functions in TypeScript
Following coding is the basic function syntax. The function starts with the keyword function followed by the function name and after which we have curly braces. Inside the curly braces, we will write the statements.
function name(){}
Now let us create the function which acts as discussed above.
function greetings(person){
return "Hello, " + person;
}
Now the function is created. The next step is to input the person name dynamically and print it. The following code will do the task at hand.
let user = "John Doe";
console.log(greetings(user));
Learn about Interfaces in Typescript and how to implement TypeScript in 2021
In this tutorial, we will discuss how to implement the interface in TypeScript. Earlier, we discussed the variable, array, functions in TypeScript. If you would like to revisit, you can access it from the menu table on the left or the menu icon if you’re using it from mobile.
The interface is a structure that characterizes the agreement in your application. It describes the language structure for classes to follow. Classes from an interface must follow the structure given by their interface.
In TypeScript, the syntax to create an interface is as follows.
Interfaces in TypeScript
Now we will discuss how to implement an Interface inside a function. For this, we first need to create an interface, followed by a function and then we need to print the interface using the function.
Step to create the interface.
interface Students {
firstName: string;
lastName: string;
}
Know what is TypeScript, its Benefits and how to install TypeScript in Windows, Mac and Linux Machines. Getting started with TypeScript
Getting started with TypeScript
TypeScript is a superset of JavaScript and has some vital advantages which make it profoundly used in Angular, React. Following are the key points that make TypeScript unique which includes but are not limited to
Discretionary static typing(the key here is discretionary)
Intuitive Type Interface which allows programmers to get more code without typing
Early access to ES6 and ES7 features even before support from various browsers
TypeScript automatically compiles to comfortable JS versions which render in all major browsers
Support from IntelliSense which makes TypeScript robust and user-friendly for programmers
Now that we have discussed TypeScript and its benefits, let’s deep dive into TypeScript installation.
Step 1: Make sure you have installed Node
Step 2: Open Command Prompt in your system. Rest assured; TypeScript is compatible in all Windows, Mac and Linux systems
Step 3: Type tsc in command prompt. The tsc command shows TypeScript version if already installed or if not installed already it will throw an error
Step 4: If tsc command throws the error you can install the TypeScript with the following command
npm install -g typescript
or
npm i typescript
-g describes the global installation, and i describes the local folder installation of TypeScript Step 5: The above command will install the TypeScript Step 6: Once installed you can check the correctness of installation by typing tsc in Command Prompt
Going further we will discuss our first program in TypeScript.
Learn about Distribution in Statistics and various types of Distribution in Statistics with examples and charts
Definition of Distribution:
Distribution is a function that shows the possible value for variables and how often they occur.
Distribution in Statistics means listing all possible data in the sample space and how frequently they occur. In statistics, usually, if we mean Distribution, it generally implies Probability Distribution. Few examples of Distribution include
Normal
Binomial
Uniform
Skewed – Left and Right
Bimodal Distribution
Each probability distribution is associated with the graph describing the likelihood of occurrence of a particular event.
We can take a simple example of explaining the Distribution considering the example of Rolling a Dice.
Rolling dice can produce a 1, 2, 3, 4, 5, 6. The chance of getting a 1 is 1/6, likewise for each turn-up, the probability is 1/6th. Whereas the likelihood of getting a 7 is 0. You’ll find that the Distribution of getting the side 1 to 6 is uniform. Now let’s discuss the various type of Distribution, using examples.
Normal Distribution:
Normal Distribution looks like a Bell Curve with the maximum probability of occurrence at the centre and minimum at the proximities. If you have to choose any particular event, there is a good chance that you’ll select from the centre. We can take a classic example of players height in the Indian Cricket Team, and when we plot, we can see that Rarely Crickets will be less than 1.5m in height and not more than 1.9m. Most of the players will fall between 1.7 to 1.8. This curve will have symmetry, as mentioned below.
Normal Distribution in Statistics
Uniform Distribution:
Uniform Distribution is where the probability of occurrence of all the possible outcomes is equal. In the example of rolling a dice, the possibility of getting 1 to 6 is 1/6. The Uniform Distribution looks like the graph given below.
Uniform Distribution in Statistics
Bimodal Distribution:
Bimodal Distribution has two sets of peaks or modes around which other possibilities distribute. The following chart is the classic example of Bimodal Distribution:
Bimodal Distribution in Statistics
Skewed Distribution:
Skewed Distribution is where one side of the Distribution is larger than the other. If the larger side is right, it is called Left Skewed Distribution; if the larger side is left, it is called Right Skewed Distribution.
Skewed Distribution in Statistics
Now that you’ve read Distribution in Statistics, you can also read about the Data types in Statistics. If you’re looking to enrol for Data Analytics, check our training institute Ampersand Academy.
In general, data types in statistics are a group of individual data points. Statistics consists of two main types of Data.
Categorical Data Types
Numerical Data Types
In this section, we will be discussing each of the Data Types with the example from Cricket since I watch cricket the most and its kinds of intriguing for me. We will explain in detail below about each of the data types
Categorical Data:
Categorical data is a data type stored as groups or categories with the help of names or labels. There are two types of Categorical Data Type
Nominal: Datatypes with no proper order
Ordinal: Datatypes with proper order
Numerical Data:
Numerical data is a data type that represents values that are measured and put into a logical order. There are two types of Numerical Data Type
Discrete: Discrete Data types are the ones that take only certain values. Discrete Data Types cannot be measured but it can be counted
Continuous: Continuous Data types are the ones that are measured and hence it cannot be counted.
Data Types in Statistics
Examples of each Data Type:
Categorical – Nominal Data Type:
Which team does “Virat Kohli” play?
{India, Pakistan, Bangladesh, Sri Lanka}
Data inside the parenthesis is called Sample Space
Categorical – Ordinal Data Type:
Which position does “Virat Kohli” bat?
{1 down, 2 down, 3 down, 4 down}
Numerical – Discrete Data Type:
How many runs did “Virat Kohli” score in World Cup?
{150, 250, 350, 450}
Numerical – Continuous Data Type:
What is the height of “Virat Kohli”?
{5.5, 5.6, 5.7, 5.8}
Now that you have learnt the data types of basics in statistics we will discuss Distribution, Sampling & Estimation, Hypothesis Testing and P values in statistics. If you’re looking to enrol for Data Analytics Course, check the R Programming course from our institute. Also, read about the Installation of SAS University Edition.
Learn how the web works, client-server interaction and more
You all know if you type the domain URL in any web browser, you can view the website related to the URL. This quick tutorial will discuss what happens when one types a URL and how the browser renders the website associated with the particular domain.
URL
URL is a fancy acronym for Uniform Resource Locator. For example, https://ampersandtutorials.com is a URL.
HTTP is Schema and expands to Hypertext Transfer Protocol is a language through which the browser communicates to the webserver to get the necessary information. HTTPS is the same as HTTP but with encryption.
ampersandtutorials is the primary domain name
.com is the top-level domain
Resources in the website can be HTML files, Audio, Video, PDFs and fonts.
URL Explained
How the web works
Generally, when a user types a URL in the browser, the browser sends the “Request” to the server to give the necessary information associated with the domain. The browser here is the “Client”.
In turn, the webserver “Response” to the “Request” by the client, i.e., “Browser”, with the necessary information.
How the Web Works
HTTP Message from Browser to Server
Get /index.html HTTP/1.1
HOST: ampersandtutorials.com
Accept-Language: en-us
Here GET is a keyword to acquire the index file or the home page of the website. Usually, the index.html is the home page of the website. HTTP/1.1 is the version.
The host is the domain name that points to the server. Accept-Language is the language of the web page in which the response should be.
HTTP Message from Server to Browser
HTTP/1.1 200 OK
Date: 05th November 2021, 11:11
Content-Type: text/html
Again the HTTP/1.1 is the HTTP version. 200 OK is the status code meaning the connection and response to the request has succeeded. The date is the response date and time. Content-Type denotes the type of response which server renders.
Upon receiving the response from the server, the browser renders or displays the answer in the DOM model, which is Document Object Model.
<!DOCTYPE html>
<html>
...
</html>
Inside the HTML document, if there are any images, videos, fonts browser again sends parallel requests to the server and the server responds with the requested information to the browser thereby the users get to see the entire web page on hitting a URL. You can learn more about HTTP from MDN Web Docs
n this tutorial, you will learn how to incorporate simple responsive CSS Grid Layout using a framework called Materialize CSS in Angular Material.
We write this tutorial, with the understanding that you have created an Angular Project and Angular Material version 6.2.1. If you are new to Angular and Angular Material, you must first learn about creating an Angular project and installing Angular Material in the same project. Currently, there is no proper grid layout in Angular Material. FlexLayout is one way to achieve Grid Layout. Here, we will discuss how to create a Grid Layout using Materialize CSS.
We have forked the CSS components such as Grid, Helpers, Typography from the Materialize CSS website. You can download the forked file at the link given below. In order to learn how the Materialize CSS Grid functions, follow this link: Materialize CSS Framework.
Once you have downloaded the forked Materialize CSS file, you will have to paste it into your src folder of Angular Project. The next step is to import the downloaded Materialize CSS forked file in the global stylesheet – style.css.
Responsive CSS Grid in Angular Material
The code for doing it is:
@import "m-modified.css";
Style CSS
Once you have included the above code in your style.css, you are all set to utilize the grid structure of Materialize CSS framework.
Walkthrough of how grid in Materialize CSS grid works:
The grid system in Materialize CSS framework works via rows and columns. For creating a row in Materialize CSS, you must create a division with a row as a class.
<div class=”row”></div>
The above code will create a row. Ideally, a single row will have 12 columns. Now, to create 2 columns in large and medium-size devices, use the following code:
To create three columns of equal width and occupying the entire row and all these columns to occupying entire row in small screens, use the following code:
You can also understand how the grid system works from Materialize CSS website. Once you have created columns according to your requirement, you can include all the necessary components such as forms, buttons, cards, lists inside each division.
Once you have completely understood the grid structure, you can play around and create responsive grid layouts in Angular Material. Now that you have learnt how to implement Responsive CSS Grid in Angular Material, You can also learn about Scrollable Table in Angular Material.
Learn how to make Scrollable table in Angular Material
In this tutorial, you will learn how to make a table with a large number of columns less cramped and make the table scrollable based on the number of columns we add to the table.
We write this tutorial with a presumption that you already know to create a basic table in Angular Material. If not, please follow the link given below.
Make sure you import all the necessary components in the app.module.ts and have created the fundamental table.
One may likely have more than 15 columns in a single table on a project. When that happens, Angular Material by default compresses the column width and make it congested to accommodate the viewport width.
It is nearly impossible to increase the column width or to make the table horizontally scroll to accommodate all the columns with relaxed spacing. There is no native fix in Angular Material for this. We have fixed it with a simple CSS trick.
All that you have to add the following CSS in style.css and call that class in a division. The class which we have added is table-responsive. However, you can rename it according to your preference.
You can copy and paste the above CSS in your style.css / style.scss file. Now create a fundamental table in any of your components. Now create the division with class, ‘table-responsive’. Now cut the table and paste it inside the division. This will enable you to create a table with more spaced and horizontally scrollable. The following is the code on how it appears in your HTML file. We have successfully made Scrollable table in Angular Material.
<div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div><div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div>
Learn the Proven Roadmap to web development in 2021
In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are.
2 Parts in web development
Any website has two parts:
Frontend
Backend
Roadmap to web development
Frontend:
The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website.
Frontend Technologies:
HTML – HyperText Markup Language
HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer.
CSS – Cascading Style Sheets
CSS is for styling web pages and making them beautiful. CSS is also not an actual language.
JS – JavaScript
Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript.
Frameworks
Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue.
Which Framework to use
Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.
Backend:
The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in
2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.
Web Development Jobs:
Front end Development – HTML + CSS + JS
Back end Development – Language + Database
Full Stack Development – Front end + Backend
Timeline to learn:
HTML + CSS – 6 Weeks
JS – 6 Weeks
React – 6 Weeks
NodeJS / Python – 9 Weeks
SQL – 6 Weeks
Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.
In this tutorial, we will discuss how to create a modal that opens on the page load in Materialize CSS framework. In a presumption that you already have an idea to implement modal in your Materialize CSS project, we have written this tutorial. It is merely a baby step to create a modal in Materialize CSS, and we look forward to writing a tutorial on this shortly. Now lets complete the task at hand. We are writing this tutorial with the JQuery version of Materialize CSS. As a first step, create a boilerplate template with Materialize CSS. Following is the boilerplate template with JQuery. Here’s the link to the official Boilerplate Template and Modal Creation Documentation
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>
</body>
</html>
The second step is to add the modal HTML code. Kindly copy-paste the following code inside the body tag.
The third step is to add the following JQuery script just above the closing body tag. The following script not only helps in showing the modal on page load but also helps in creating the modal in the first place.
