Unraveling Angular & TypeScript: Essential Values and Resources

Jimmy Taravia — Sat, 17 Jun 2023 19:03:26 +0000

This is not about the technicalities of Angular, Typescript or JavaScript. This blog is about the Basic view of working with Angular and some resources to implement tasks saving your time.

Working with Angular may seem quite complex for someone who has worked a lot on React or someone accustomed to using JavaScript.

This whole experience is nothing but just an transition which developers face while using typescript after using a lot of JavaScript.

Remember:-
-->Typescript basically is like sorted books in a bookshelf
and
-->JavaScript is a big pile of books unsorted.

But, the core concepts of JavaScript does not change anyways. One advantage of typescript over JavaScript is that your time in debugging the code or resolving errors is little bit less in typescript compared to JavaScript because of it's sorted and well structured architecture.

I have used angular for a while now, and I can say this that:

"as much as I thought in beginning about angular being a less developer friendly (that's a word I like to use, inspired from the word "not user-friendly") than React it is much better than I expected it to be".

Angular provides a lot of liberty in terms of handling the variables and it's dynamic nature (thanks to TypeScript). Now this may very well vary for people according to their requirements. The more specific and clear your vision are regarding what functionalities you want to integrate and what type of platform you might want to create, the more you will be able to have clear picture of what you want to use for your project.

Some advice I would like to give if you want to learn angular:-

A lot of times we tend to follow official documentation, but those who have done hands on and used the frameworks in projects know very well that, it is not a good advice to refer official documentation of libraries example: React and Angular both have documentation which is not suitable for beginners to read. A short length Youtube tutorial may be better for starting and you can transition to documentation after having your basic concepts clear.

Try to make small projects (covering all basic concepts) as much as you can

(Note: You need to finish all the small projects that you do, do not just start and stop in between and say this is simple I don't need it.
Finishing up things is what gives confidence to start something new)

, and I know people out there who consider small projects which are very basic as some form of time-waste. But trust me, doing more small projects of Angular, React, BootstrapCSS, JavaScript, Typescript, or any language/library/framework is not about making a great project they are about making one go through the process so that the repetition would make you know the basics learn by heart, it is not mugging up it is just making the mind used to the basic tools which are available to us in using these huge libraries.

Some Reference material for implementation purpose in angular is something I have shared down below, Remember, these materials are not for Learning Angular as I mentioned they are for implementation purpose

1) Convert CSS angular app to SCSS angular app

The above plugin npm schematics-scss-migrate will change your already created CSS-based Angular project into SCSS-based Angular project by just few commands.

2) Server Side Pagination implementation in Angular -1

3) Server Side Pagination implementation in Angular -2

You can implement server side pagination while dealing with the data rendering from API's that send huge amount of data and we want to render only few amount of that data. In this case you can modify your API's to send limited amount of data and server side pagination will handle the front-end to render limited part.

4) Export and Download the table list data in CSV format in Angular

You can export and download your "whole list of the data rendered on the website" and also "all the data from the records coming from API response" into CSV/Excel/PDF format using above reference in Angular.

5) Apex Charts implementation in Angular

When you want to use the numbers and showcase them in form of visuals, charts, dashboards and statistics, you can use the very well know JavaScript library ApexCharts for that.

6) SyncFusion Essential JS 2

Angular possesses a lot of different form of library installation options. You can use normal Bootstrap-CSS or you can use Ng-Bootstrap. In the same way, SyncFusion is collection of typescript based components which can be used in angular by there installation.
Note: Do not use multiple libraries that are used for same functionalities. example: do not try using bootstrap-CSS and Ng-bootstrap both at the same time on your components in angular, it may contradict or override each other unexpectedly.

7) Bulona Dashboard theme Angular

8) Modern-Admin Dashboard theme Angular

The collection of Pure BootstrapCSS and Angular in above mentioned dashboard theme is an excellent source to use as reference for your projects. They are basically an angular app with almost all Bootstrap-CSS functionalities used in it visible on dashboards.

9) This-is-Angular DEV

While facing issues in learning about concepts you can refer the community work of the above mentioned DEV account.

If you want me to share more insights about angular or typescript do ask it in the comments, and if you have some more things to share go ahead and help the community grow.

One bonus resource, Recently, I loved watching the conversation of Lex Friedman podcast with
1) Guido van Rossum (creator of Python):- https://youtu.be/DibH4GRRWQU
2) John Carmack (co-founder of id Software):- https://youtu.be/rczu8kc8JZA
Do watch the podcast, it's really insightful.

Website: Jimmy Taravia
Twitter: @Jimee_himself
Github: Jimmy-Taravia2001

Credits for the Cover Photo by Brett Jordan from Unsplash

Git and GitHub Basics for Beginners

Jimmy Taravia — Sat, 27 Nov 2021 20:06:20 +0000

Hello everyone!!

I am Jimmy Taravia and I am a learning web or precisely learning software developer and a writing enthusiast who notices things and points them out to people in my Blogs (Jimmy’s Blog: https://get-rid-of-bullshit.blogspot.com/ ). In this post, I will be explaining some basic Git terminologies and facts for software development learning beginners, which are useful if you entering into the development field or want to contribute to any open-source projects on Github.

The first and most basic question, that arises among all is why Git and Github even matters? What is the difference between those two? So let me explain Git first and would explain Github afterward.

Git is a distributed version control system or also can be called a decentralized version control system. It means that many developers can work on a single project. So it keeps track of your code history and changes that you and others make in it.

Basic Command to learn for starting Git and Github are:

1. git init: It initializes the git repository.
2. git add: It adds file(s) to the index.
3. git status: It helps us to know the status of our working tree in the pulling and pushing code changes in remote as well as a local repository.
3. git commit: It means to commit the changes in the index.
4. git push: It pushes the changes done from local files at the index to the remote repository.
5. git pull: It pulls the latest files from the remote repository to local.

Now, moving to the Git installation process:
You can download it in windows and mac through the below given websites:

Windows: https://git-scm.com/downloads/win
Mac: https://git-scm.com/downloads/mac

For Linux:
You can use the given commands:
Linux (Debian): $ sudo apt-get install git
Linux (Fedora): $ sudo yum install git

Once you finish installing Git on your device,
1) Go to your command line and write the command git –version and hit enter.
2) If you get the version of the git, you have installed the git successfully. But if in case you get some error, there is nothing to worry about, try to uninstall the available git that you installed and do the step again.

Now, coming to Github. It is the largest web-based git repository hosting service. You can relate git and Github as the cloud servers and web-service. For example, the servers stores the data available on the internet, and the web service connects us or act as a bridge between us and the information which we want from the servers which contains a huge amount of data.

So, these are common terminologies and facts about Git and Github, which we use in making projects.

There are so many other commands which I will try to discuss and explain in an upcoming part of the series.

DEV Community: Jimmy Taravia