DEV Community: Ashishkumar Vishwakarma

Essential Applications for daily PC users

Ashishkumar Vishwakarma — Fri, 26 Jun 2020 15:36:55 +0000

Hello guys,

today we will see what all applications are required or used on daily basis for the normal PC users.

♨️ So, here we go... ♨️

[NOTE] : here we consider our user as Windows user.

👉 WinRar 32 bit / WinRar 64 bit: for compressing and extracting the files
👉 VLC Media Player: Top rated openSource media player
👉 MicroSoft Office: any version which you may like will work with it. As it is a paid application, I suggest a good openSource alternative here - LibreOffice
👉 Google Chrome / Mozilla FireFox
👉 doPDF: to convert your files into PDF. Actually this can be done from browser itself, by selecting option save as -> then select .pdf
👉 IObit UnInstaller: to uninstall your stubborn applications which are not completely uninstalled or after removal keeps some setting/tracking file in your system
👉 BitTorrent: to download legal .torrent files
👉 AnyDesk / TeamViewer: these applications help you share your remote desktop with the other user when needed

For you with ❤️ by CodeCasm

Getting started with Angular

Ashishkumar Vishwakarma — Thu, 11 Jun 2020 17:10:20 +0000

Pre-requisites 😇

👉 node & npm i.e. node package manager
👉 angular/cli i.e. command line interface for Angular
👉 Code editor/IDE i.e. VS Code, Sublime or any you prefer

🤔 If you don't have these installed in your machine, let's quickly get it installed.

- installing `node` & `npm` 👍

for Windows:
download link to node binaries
for Ubuntu/Linux or MacOS:
select your OS to get command
command for installation using package manager through terminal

Node.js v14.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify with the below commands that node and npm fire below commands

# Using Ubuntu
node -v
npm -v

- Let's get your hand dirty 🖐️

Now, we have our npm (node package manager) installed, we can use it to install Angular in our system.
Use below command to install Angular CLI

npm install -g @angular/cli

verify if Angular CLI is installed successfully, fire below command

ng v

it must look something like below:

- Now, we will create our first Angular project

We need to fire below command in our terminal/command prompt to create our project

ng new angular-app

Here, ng new is used to create new project and angular-app is your Angular project name.

It will create Angular project with default template provided by Angular itself. To have a quick look on it, we can goto our browser and visit default url served by Angular i.e. http://localhost:4200

Now, we need to point our terminal to Angular project, to achieve this use this command

cd angular-app

As of now, we are in our Angular project folder. We can use below command to serve our application to the browser

# to just serve and visit http://localhost:4200
ng serve

# to serve it on it's default browser
ng serve -o

Wow 🤩, we just created an Angular application. It was super easy, isn't it.

- Find the helping visuals 🎬 below here:

We are open for contribution 🤝 CodeCasm
❤️ Happy coding ❤️

How to get Angular in your pocket?

Ashishkumar Vishwakarma — Mon, 06 Apr 2020 20:16:37 +0000

What we know?

Angular is component based framework which is comprised of TypeScript and JavaScript
TypeScript is superset of JavaScript
As JavaScript is subset of TypeScript, so every JavaScript code is a valid TypeScript code
TypeScript has some addon features as extended to JavaScript

- Why TypeScript in Angular?

TypeScript is choosen because of its most rich feature of type checking and autocompletion. Some other features mentioned below:

Consistency
Productivity
Maintainability
Modularity
Catch Errors Early

more you can read here on it's official documentation. This made Angular super-awesome 👍. If you know languages like C# or Java, then it is pretty simple to get into it with the help of documentation. To start with Angular, you don't need to deep dive into it, just an overview of it and basic OOP concept will work. Get the complete understanding for TypeScript on their site by firstly learning the basic types and then by quick overview.

- What is a Component?

As we see above that Angular is a component based framework. Each single component again contains 3 elements:

HTML (.html) - this creates view, i.e. markup code
TS (.ts) - where all your business logic goes
CSS (.css) - here you can do styling for the markup. It can be CSS/SCSS, etc.

Now, focusing towards our TS element of component i.e. .ts file, lets break down this component to get a clear idea about it.

we can divide structure of component in following 4 parts:

1. import statements:

import statements imports all the required classes from the module packages which is required for the component and methods[in your logic]. Example can be seen below:

2. @Component():

Component is a method, not a normal method, '@' symbol makes it a decorator, a component decorator. This decorator provides configuration metadata of the component. It takes an object as an parameter. Example can be seen below:

Here, selector, templateUrl and styleUrls are the properties of the component. There are many more properties we can use as per convenience.

3. export class:

As a framework, Angular provides modular structure. So all the components used in the application are a exported class. So whenever we need to export or reuse it we can easily import it in any module and implement in that another component. Example given below:

Each component class can have constructor as shown in the above image. Below constructor we have ngOnInit() function which is first stage of lifecycle hook of the angular component. Then you go with your user define functions as you want your component should act or to be functioned.

HOPE it was helpful to you for understanding internals of Angular component. Hence, also enjoyed reading it 😍. Thanks ❤️.

What is Angular?

Ashishkumar Vishwakarma — Thu, 02 Apr 2020 10:25:08 +0000

If I say Angular is a JavaScript framework, what hits to your mind?

Why do we need a framework when we can work with JavaScript alone?

So, I am happy to tell you that now-a-days, framework play important role to keep the code maintainable and make the development fast.

How framework makes development fast?

Framework have a pre-defined architecture, which we also know as design pattern. Due to this architecture or design pattern the codes are in organised way, which helps in fast development.

Angular as front-end framework by Google.

First of all, by Angular I mean Angular 2+ and not AngularJS or Angular 1.x. Current version of Angular is 9.1.0

Angular was initially introduced by Google. Angular is known as end-to-end front-end framework. That means, it is a complete package for a front-end developer which includes:

CLI tool: a powerful tool takes care of each process/binding internally
Protractor: a end-to-end built-in testing tool
Performance: better performance
Templates: create quick UI views with simple and powerful template syntax
TypeScript: a strict syntactical superset of JavaScript
Crossplatform: used to develop mobile or web applications
OpenSource: being opensource anyone can contribute to it etc.

There are many such good features. Angular has a good list of features, I have just listed some important highlighted features. Being supported by Google, it has good and huge community to maintain it.

In-short, Angular is complete end-to-end client-side or front-end framework to develop simple to complex front-end applications. It has made front-end developers life easy to develop the application super-fast and with better performance.

some useful links I would like to mention here

Great applications made with angular
Fortunately India has a great community and conducts a national level conference every year in month of FEB in name of ng-india
You can start learning Angular with official documentation

if you like it, we can connect on twitter here: @dev_ashishkumar