Forem: Hamza Siddiq

SaaS architecture: Monolithic and Microservices

Hamza Siddiq — Tue, 10 Aug 2021 00:05:36 +0000

What is a web application architecture?

Application Architecture:
An application architecture is the behavior of how different applications interact with each other.

Software as a Service Architecture:
So with software as a service, it is the behavior of how different web applications interact with each other.

The architecture here also encompasses, the interaction between applications, middleware systems, and database.

What are the types of SaaS Architectures?

We want to increase efficiency, and so we want to choose an architecture that ensures all our web applications work well with each other. There are thus two architecture types that we can choose, which we'll go over below.

Modules:
But before we do that you need to understand that an application has different components or modules that define it. E.g an an Ecommerce application might have a modules that takes an order, another one to check inventory, another to authorize payment and finally a module to ship the order.

1. Monolithic Architecture:
In a monolithic architecture, the application modules are build together, and deployed as a single unit.

So in the Ecommerce application example, the developer would build the modules together, and they are linked to each other in such a way, that if we make changes in one part of the application, another part could also change, because of a shared database. So while working on an Ecommerce application, making changes in the module to check inventory would affect the module to authorize payment since they are a single unit.

2. Micoservice Architecture:
In a micro-service architecture, the applications modules are built separately, and then connected to each other.

So with the modules that we had discussed before; each of these modules get built separately, and has their own database. Each of these modules then connect to the other modules. In the Ecommerce application, the module to take an order would get built separately, and the module to check inventory would get built separately. They would then be connected to each other. This way we could work on them independently, and not worry about changes in one module of an application affecting changes in another.

Which architecture to choose?

Why you should choose Monolithic Architecture

1. Faster to debug and test:
Since a monolithic application is a single application, building and testing it is easier, and faster.

2.Simple to develop:
Monolithic architecture is the older way of developing web applications, and so many developers might feel more comfortable using it.
3.Simple to deploy:
With a monolithic application you don't have to worry about a lot of files, there is usually just one file or directory.

Why you should choose Microservice Architecture
1. Work better in groups:
The best thing about Microservice architecture are independent modules. You can take a part of the application, and make it a module with an independent database. This way you can work on that module and changes made there would not affect changes in another part of the application. This is great if multiple people are working on different modules, since they would not have to worry about their code affecting that of a different developer.

2. Flexibility to choose technology:
Another great thing about Microservice architecture is that for each module, a different technology can be used, depending upon the comfort of a developer working on a module, and the needs of the project.

3. Time effective:
Since each developer is only worried about their own module, without breaking other parts of an application, development teams can work way faster.

4.Cost effective:
Each module can be scaled independently, which could save a lot of money.

And here is a video where I explain the concepts above:
Youtube video

Web components Fundamentals

Hamza Siddiq — Fri, 06 Aug 2021 00:41:40 +0000

What are Web Components?

Web component is a term used for four web standards that help us make custom, reusable and encapsulated html tags that can be used in web pages and applications.
1. <template> elements: With the <template> elements, we encapsulate html, and then render it using javascript.

So what happens is that template elements break apart html. Whatever is contained inside the template tag doesn't get rendered at load-time. Instead javascript renders when the function is called. So a page would load very quickly, since we have part of html that doesn't load at load-time. We can also reuse these elements, so we save a lot of time.

2. Custom elements: With custom elements, we create a javascript class, and then link it to a custom html element.

An html document already ships default html elements. E.g <body>,<header> etc. An HTMLElement class contains all these elements. Inside a javascript file we define a class and extend the HTMLElement, with this custom class. Next, we define a custom element, and then link it to our class. We can now use this custom element inside html as many times as we like.

Notice the - in the custom element; that is important when making custom elements, to differentiate it from default elements.

3. Shadow DOM:
With a Shadow DOM we encapsulate styles, so that we can limit them to a specific area.

A DOM, Document Object Model, is a tree like structure of a documents elements, in our case html's elements. Code and styles contained here affect one another.

A Shadow DOM on the other hand, is a separate DOM, and the code contained inside the Shadow DOM is separate from the main DOM, so it does not affect the code of the main DOM. We can attach a Shadow DOM to an element, using javascript, and it would only affect that element.

4. Javascript Modules:
We can convert a javascript file to a module by exporting it. This would allow other files to import it, by using it as a dependency.

So a module is a file that exports its own code. Modules usually have their own scope. So we could have a modules with different functionality, that people can then share with others. So we could share a module called mediaplayer, that could play media; or another one called whattimeisit, that could display time in different time zones. Npmjs is a popular package manager that people use to share modules.

Why use Web Components?

Future proof:
There have been many frameworks that have had a dramatic rise in popularity, but have been replaced by other newer frameworks. The great thing about web components is that its usage has increased over the years.

Can be run by any browser:
Another great thing about Web components is, is that they were added by the World Wide Web Consortium, W3C, as a standard. The W3C defines the standards for browsers to implement. All five major browser have added support for web components.

Can be used with any framework:
Since it is a part of code, that can be run by the browser, usage by any framework is not an issue.

Write cleaner code:
One of the best things about web components is, is that web components helps us write cleaner, and better code. This would improve performance, increase accessibility, and make it easier to maintain.

Improve reusability:
You could save a lot of time, by reusing web components. This would also mean that less developer hours are spent, and the productivity would increase a lot.

Improve Consistency:
When starting a new project, there might be old components that could be reused. So amongst different projects, a consistent look and feel can be created.
Improve Accessibility:
By reusing old components, we make it easier for users to use a specific feature again, in a different part of the project.

Any accessibility features that have already been implemented can also be reused by us, or made available to use by others. E.g a simple search of accessibility on npmjs gives us more than 1350 packages to work with.

Who uses Web Components?

Github:
Github makes use of web components. As discussed before, an element with a - in between means that it is a custom element. The include-frameworks in Github's homepage after login, is an example.

Salesforce:
Salesforce also makes use of web components. An example of a custom element is dx-instrumentation in Salesforce's developer page.

EA:
EA uses web components. Here is an example of the sims website using web components. It makes use of the iron-a11y-announcer custom element, that adds a11y to features that require on-demand announcement from screen readers.

Links to learn more:

Here are some links that you can use to learn more about Web components:

Video:

And here is a video where I explain web components:
Youtube

Git and Github

Hamza Siddiq — Sun, 25 Jul 2021 18:25:52 +0000

Github launched in 2008, and became very popular because of its saas (software as a service ), providing a cloud based hosting service. But it is in fact git, that powers it. Below I'll explain Git and Github.

Git:

Git is a version control system. What that means is that it tracks and manages changes to the software code.

Git is newer:

There are a few version control systems out there, and an advantage that git has over them is that it is a newer, more modern implementation of version control. It is fast, because it is lightweight, so it runs quick.

Git provides team development, and a history of content changes:

Another advantage that git has is that it provides a history of content changes that happen, and it allows for team based collaborative development to take place. So all the people collaborating have access to not only the code that is being shared, but a history of changes that have been made, or will be made.

How collaborative development takes place:

The way in which git helps collaborative development is by taking a trunk based approach to development. So what happens is that a developer gets a copy of code, makes changes, and then merges it back into the main file. I'll explain this while defining terms below:

Repository: Your project folder. This would contain all your project files.
Branch: A version of the repository that diverges from the main project repository.
Clone: Make a copy of the repository.
Fork: Make a copy of the repository on Github.
Commit: We open code from our copy of the repository, and if we like changes to our code, we commit the changes to our copy of the repository.
Push: Transfer code from our copy of the repository to the original project folder.
Pull and merge: Since multiple users are working on the repository, another user might have pushed code into the main repository, and the code might have updated in the main repository. So once a developer completes their changes, they get the code or pull it from the main project repository, and merges it with their own code.
Merge conflict: The developer has modified the same code as another developer who has already pushed their code into the main repository. So the developer works with the code, and makes changes accordingly.
Pull request: Once conflicts are resolved. The developer puts a pull request that notifies every member that changes need to be reviewed.
Approve pull request: The main repository owner approves the pull request.
Merge: The main repository owner now merges the code into the main branch.

So a developer clones the main repository. A branch gets created where the developer works on their copy of the repository. Edits are made by the developer and they commit the changes to their copy of the repository. They pull, and merge the code from the main repository to their own repository. If there is a merge conflict, these are resolved. A pull request is sent to notify members that changes need to be reviewed. Once everything looks good. These changes are approved and merged with the original project folder.

Github:

While using git, the main repository files of a project are stored on a local or a cloud network, and files are accessed and modified using command line on a computer.

Github took this implementation of git, and provided a cloud service, where the files were stored, and the files could be accessed and modified. This would mean that people could see, access and make changes to files using GitHub. Since command line is not required, this also made it very easy for people not that familiar with coding to have access to the progress of a project. GitHub provides open source projects, which also made people have access to a huge directory of projects to clone or as GitHub calls it fork them.

The following actions can be done in GitHub to create, clone, commit, pull, merge, and push a repository:

Below we used the account boywithabeard(the one in dark theme) to create the main repository, and bigdig to clone the repository (the one in light theme).

Create a repository:

Go to the home page, and then click on the green new button on the top left side:

Enter a repository name, in this tutorial we have named it: Tutorial, and then click on create repository:

Clone(Fork) a repository:

Go to a repository. On the top left side you would find the word fork. Click on it, and you would get your own copy:!

Commit:

Open any file, in this example we opened the file named .gitignore, in our copy of the repository:

Once the file is open, click on the edit pen icon:

Make some changes, in this example we added the line, just for a tutorial:

Add details about the changes you made, and press on commit changes:

Pull request:

Go to your repository, and click on the tab pull request, then click on new pull request:

Now click on create pull request:

Add details about the changes you made, and press on create pull request:

You can click on your pull request in your repository. Now you and the main repository owner, can add comments and discuss the issue:

Pull and merge::

The parent, boywithabeard, creates a merge pull request, to notify everyone about the changes:

Merge:

If there are no disagreements, he or she then merges the code:

Check out the video where I go over the concepts mentioned above:
Youtube Video

Web accessibility auditing

Hamza Siddiq — Fri, 23 Jul 2021 20:07:43 +0000

Accessibility is very important for web developers. It helps websites reach a broader audience, by making sure that people with disabilities can have access to a website. The cdc states that 26% of adults in the United States have some form of disability, so by designing for disability, which is a huge portion of the population that websites could be accessible to if they kept these users in mind. However, there is more to access accessibility. By designing to keep in mind people who need accessibility, websites also improve the experience for existing users. For examples, a text magnifier on a website would not only help the visually impaired, but also help existing users, who might have difficulty reading a particular portion of the website.

There are three tools discussed below that help with accessibility. Of the three, lighthouse and web.dev are similar tools, so they have been explained together. The third tool is wave, which also helps with accessibility.

Lighthouse and web.dev:

Lighthouse and web.dev are two tools that are interlinked. To help audit a website, you would go to web.dev and click the test my site button.

After clicking on the button you would be taken to the page below where you need to paste in the name of the website, and run the audit.

Upon running the audit we get the following results:

So we get a lot of metrics and ways on how to improve the accessibility issues with our website. Similarly, if we click on view report, we get taken to the Lighthouse report, which gives us a more detailed guide on improving our website:

We can use the guides, and then apply them to our website to improve the accessibility.

Below are some accessibility issues that I have analyzed.

For this analysis, I used both lighthouse, and web.dev.

Eliminate render-blocking resources:

First paint is the point at which the first pixel renders on a screen, when a user navigates to a webpage. There are going to be several url’s that blocks the first paint of the page. In our report in lighthouse, the opportunities tab lists all the suggestions that would render block our website. In our analysis of lighthouse, the opportunities presented are listed below, which if implemented would allow us to save a lot of time:

It is however important that we only defer or eliminate the resources that we need less and prioritize the ones that we need the most. So we identify the critical resources by going to chrome DevTools. The styles in css files and code in javascript would be marked in two colors:
Green: Critical
Red: non-critical

Script not being used should be removed. Non-critical code should be deferred using the deferred attribute, or asynched using the async attribute. The script should now be moved to an inline script tag in the html page.

Similarly, for a render blocking stylesheet, inline the critical styles to the style block in the head of the html tag, and load the rest asynchronously using the preload tag.

Defer offscreen images:

There were several off-screen images that were found in the website, and the web.dev recommends to differ off screen images. The best approach here is to lazy load images that are off screen. The following script is added: . And class lazy load is added to images that need to be lazy loaded.

Remove unused JavaScript:

This was explained in eliminating render blocking resources.

Serve images in next-gen formats:

Lighthouse lists the images in old formats, and the savings that would happen if they are in new formats. It is thus best to use AVIF and WebP which have better compression and quality characteristics compared to their older JPEG and PNG counterparts, and would make the website load faster.

Preload Largest Contentful Paint image:

If a particular resource is very important, should be used to load it sooner. In our website, we had a large important image, which is best to be preloaded.

Wave:

Wave, which stands for web accessibility evaluation tool, is another tool that we can use to improve accessibility. It is a browser extension that is currently available on Firefox and Chrome. For this example we would be using the Chrome extension.

To get started, go to chrome and open the website https://wave.webaim.org/extension/

Click on add to chrome extension, and then add it to chrome.

Once added navigate to the website, and then click on the browser extension on the top right hand side of the browser, and you would see a report like the one below:

Click on the details tab and you would get detailed icons with all the errors:

You can now click on each error, and the web page would jump to that portion of the website. You can also click on the "i" next to the error on the extension details page, and you would get directed to the reference page, that explains how to fix the error:

Below is a video that explains Lighthouse, web.dev and the Wave plugin:
https://youtu.be/5-LCaK3dAUc

Metamask on Desktop

Hamza Siddiq — Mon, 19 Jul 2021 21:06:12 +0000

About Me

Hi people! This is boy with a beard. My name is Hamza Siddiq, and the aim of my blog posts is to explain some amazing technologies that exist today. I am a senior studying Information Science and Technology at the Pennsylvania State University.

How to set up Metamask on Desktop:

I would highly recommend installing metamask using the chrome extension. The phone app doesn't work half the time and is just a pain. I'll explain the iPhone app in the future, and how to get around those bugs, but for now let's just stick to the chrome plugin since it's your first time using metamask.

Step 1:

Go to metamask's website at https://metamask.io/index.html
and click on download now.

Step 2:

Click on install metamask for chrome.

Step 3:

Click on add to chrome

Step 4:

A new browser tab is going to open up upon installation of the browser extension, welcoming you to metamask. Click on get started.

Step 5:

Click on Create a Wallet

Step 6:

Agree if you would like to share your usage data with metamask, or disagree if you would not

Step 7:

Create a password. This is the password you would use every time you open metamask using your browser

Step 8:

The recovery phrase is a phrase you use if you lose access to your metamask, or login using a different device. Make sure to keep if somewhere safe, which is not digital, to be safe from a data breach. I recommend storing your seed phrase on a piece of paper, and making multiple copies of it, storing them in different places.

Step 9:

Here is your secret recovery phrase. Copy your recovery phrase on a piece of paper.

Step 10:

Confirm your recovery phrase that you copied. This is the same process you would do when you lose access to your account or are accessing it from a different device.

Step 11:

Congrats. You're all set.

Step 12:

Welcome to your metamask wallet! You can now transfer crypto from different wallets, or purchase crypto using your new metamask wallet.

Video: https://youtu.be/exqpd1tFEcs