Posts

What makes Angular so powerful?

Image
There are a lot of factors behind the growing popularity of Angular. One of those being the more and more realization of the potential of Single-Page Applications. I believe there are many reasons why someone may choose Angular for the development process. In  What to learn in Angular? we discussed the wide range of features available in Angular and all of these contribute to its usefulness. However, in this post, I am picking out 3 things. TypeScript JavaScript though very popular and useful, being a weakly typed language may bring in some natural sources of errors. Someone who is much into a properly organized form of programming may sometimes feel a little bit uncomfortable with the way weakly typed languages handle the data types. And we need to be a bit extra cautious indeed while working with them as they do can let the programmer introduce some common errors in the code (especially runtime errors can get difficult to deb...
Post a Comment
Read more

What to learn in Angular?

Image
Angular has a lot of built-in stuff. This largely broadens the scope of things it can do without having to use too many additional libraries but at the same time, it brings a lot to be learned to get working with them. This post is just a high-level overview of what all Angular offers in general and their short descriptions in very layman's terms. Angular CLI This is not something that is taught typically but hardly anyone uses Angular without using its CLI so it was worth mentioning. So, Angular CLI is just a tool to develop and manage Angular applications through commands. This is important because Angular projects have a lot of files in them and the folder structure can really be overwhelming if tried to be managed manually. Components Components are sort of the fundamental building blocks for an Angular application. As the name suggests, these are the individual pieces or sections that together form the UI. Templates Templates are the HTML part of the component. Interpolation- ...
Post a Comment
Read more

What is a Single Page Application?

Image
In the post-  How to master Front-End Development?  , I mentioned Angular is useful in building complex single-page applications. In fact, with the growing popularity of Angular, this term has become quite a buzzword (maybe the other way round). The term Single Page Application (SPA) can be a little bit confusing in the first impression because hardly any website that we come across seems to have only a single page. In fact, a real-world complex website may have hundreds of pages. Some of the biggest websites that we know- Facebook, YouTube, Gmail, Twitter, etc. all are SPAs. So, why are we calling such complex websites Single Page Applications? And, if they are Single Page , then what is Multi-Page? To understand this let's first go through some ways in which a website can be built. Static Websites In the HTML section of  How to master Front-End Development?  , I illustrated the snapshot of a...
2 comments
Read more

How to master Front-End Development?

Image
HTML + CSS + JavaScript- These three can be considered to be the Trinity when it comes to Front-End Development. However, practically, there are a few other important additions as well. In case you don't clearly understand the difference between frontend and backend or what exactly a frontend developer does, I would recommend going through this-  How do Websites work?  before proceeding further. HTML5 More or less you will need to learn the following things:- Tags & Attributes Layout Lists Tables Links Images Forms (Very Important! Don't ignore it!) Multimedia Its syntax is super easy to grasp and there are ample resources available to learn it. If you are absolutely new to HTML, my recommendation would be, to begin with, a basic free course to get familiar with the fundamentals. For Example-  Free CSS Tutorial - HTML5 and CSS3 Fundamentals . The good thing is that you can jump right into the practica...
Post a Comment
Read more

How do websites work?

Image
Whenever we hear the term "Web Development", it brings a lot of terminologies along with it- Frontend, Backend, Client, Server, Full-Stack, MEAN Stack, API, Database, HTTP, etc. Most of the people who have been working on application development (whether it's the web, Android, or iOS) for quite some time understand these terms, their interconnections, and their individual roles in making the web work. But the ones who are relatively new to this domain often are unable to see the whole picture sometimes even after having a good knowledge of the individual pieces that I mentioned above. I will attempt to draw an analogy between the working of the Web and the working of a bank. In my view, this analogy really simplifies things. Let's say Chirag has a savings account "D" with a bank (let's say S). Today, Chirag needs to withdraw some money from his account and he goes to the nearest branch of the bank for the same. One of the bank's employees Aakriti at ...
Post a Comment
Read more

What are some simple tricks to develop a good UI?

Image
When it comes to front-end development, most of us try to iterate through a bunch of random things desperately trying to make things work. But in my experience, trying to save that little time by not going to the root of the problem usually tends to waste much more time and patience in the long run. Sometimes the bug will get fixed by one of those random things you did. But you won't have any clue how and why that issue was actually resolved. And since the issue is resolved, most of us don't dig deeper to find out why it was resolved. In short, it's not a great thing if your UI works but you yourself don't know why it works. Furthermore, even if the bug is fixed, there is a good chance that the code becomes highly complicated unnecessarily. Doing this over time will very soon make the code very difficult to manage (especially if you are working on a slightly bigger project). So what's the solution? For developing a good UI, I believe it's better to follow a syst...
Post a Comment
Read more

What are Bootstrap breakpoints?

Image
  As I mentioned in the previous post  What is a Responsive Web page?  , breakpoints play a very important role in making a webpage responsive. So, let's now try to understand breakpoints and see them in action. X-Small: Portrait phones (less than 576 px) Small: Landscape phones (576 px and up) Medium: Tablets (768 px and up) Large: Desktops (992 px and up) Extra Large: Large Desktops (1200 px and up) Extra Extra Large: Larger Desktops (1400 px and up) By default, these are the categories into which all screen sizes are classified. Bootstrap provides different classes for these categories- sm , md , lg , xl , and xxl . These are called responsive classes. Let's say we use lg with some other Bootstrap class "A" what it would mean is that particular class "A" will get applied for all the screen sizes >= 992px. Also, suppose we want to apply the "A" class for the 'Large' category but a different class "B" for the 'Extra Large...
Post a Comment
Read more