DEV Community: Mariappan S

Proxies in Javascript simplified

Mariappan S — Sat, 05 Feb 2022 09:56:52 +0000

Let's rewind your school (or) college days, how creative one can be when proxying? Woah, don't tell me you haven't done any 😈 (I can share a bunch of my experiences, but definitely not here 😂)

Aren't they funny looking back today? What if I can drift the same thrill into Javascript. Have you tried morphing any existing properties/operations hiding behind a different object? Trust me, that would be cool. Let's find out how.

I came across this term when reading about Vue's Reactivity System. Vue3 uses javascript proxy to track state changes and react to them. Proxies were introduced in ES6 and allow Vue 3 to avoid some of the reactivity caveats that existed in earlier versions of Vue. Earlier, in Vue2 they were derived by object.defineproperty approach.

By the way, Sarah Drasner's take on Vue's reactivity System would never disappoint you - check the doc here if you're interested https://v3.vuejs.org/guide/reactivity.html#how-vue-tracks-these-changes

So what is a proxy?

A proxy is just an object, that can wrap another object and intercept operations on behalf (if intended).

Bla, bla... 😕 let's dive into some code & understand it better.

First, let's check the syntax,

Here, target - is the object to be wrapped. It can be anything, including functions

handler - an object with a trap method to intercept the operations (get, set, etc)

Let's have a look at a couple of practical examples where proxy can be really useful.

Default/Zero values:

If you've used golang anytime before, you might be aware of a concept called zero value. Which is nothing but, Variables declared without an explicit initial value are given their zero value.

In Javascript that's not the case, we people are addicted to undefined for some reason I guess 😜

Above one is a simple emoticon app, that returns emoji for the corresponding reaction. Here, when I try to input a reaction that doesn't exist in my data - it returns undefined. Instead, if I manage to return the reaction itself, it would be somewhat meaningful right?

Here, To intercept reading, the handler should have a method get(target, property).

It triggers when a property is read, with the following arguments:

target – is the target object, the one passed as the first argument to new Proxy,
property – property name

Let's see one more use case to get closer to this concept.

Basically, if you look at the above code - it behaves like a logging system that keeps a track of how many times an API is called and logs the count to the console. Similarly, we can intercept and create any sort of logging system we need. Isn't that cool?

There are plenty of other use cases to which I won't be talking here. Will leave it to you to explore more in the below link as it's already an amazing resource from Thomas Barrasso. Check out his article here - https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0

Resources:

If you have any suggestions (as I'm new to this) or wish to discuss more on this topic please write to me at mariappangameo@gmail.com. I'd also love to connect with you all on Linkedin.

Reactive Programming

Mariappan S — Fri, 04 Feb 2022 09:21:04 +0000

Well, you heard it right? I’m here talking about one of those fancy programming terms which you might have clocked many a time, yet a stranger (un)fortunately. If so, I’ll try to break my learnings and introduce the paradigm in a simple practical way as possible.

It took me some time to grasp good references talking about reactive programming in general. There were tons of RxJS articles but those didn’t relate much until I read about reactive programming in general. If you’re someone tired of frameworks and looking to recharge yourself this could excite you. Let’s dive in!

So what is reactive in general?

Have you ever been excited about an upcoming mobile phone launch on some e-commerce sites? Or let’s say you’re a bike enthusiast you might be having an eye on some upcoming superbike launch, right? In this online world, it’s so easier to stay updated with these launches. If you’ve been to those companies' online stores, probably you’d find a NOTIFY ME trigger somewhere on the product page. I was looking for a smart band and landed at the official Xiaomi site — tada, this splashed up.

When you click on this notify button, they might take your mobile number/email and notify you on launch. Let’s think of this flow.

Technically, you’re subscribing to an event and the responsible entity is notifying you of the successful event. Probably once notified you would take some decision. That’s simple, isn’t it reactive? You’re reacting to an event.

Let’s discuss one more edge case to explore a different dimension of this. I’m looking to buy a smartphone at amazon.com and it’s currently out of stock. Luckily, Amazon provides me a way to get notified of the product once the item is back in stock. I’m subscribing to it, so as others with similar interests. Of course, I may not be the single user waiting for the stock right? So let’s say, myself and 9 others subscribed to get notified when stock is back. After some days, there were 3 items back in stock. All 10 of us will get notified. Cool, let’s say 3 of us immediately reacted (well, we’re too reactive 👊) and what would be the case. The item would go again out of stock. Here, the system needs to handle 2 things,

It should unsubscribe 3 of us who actually brought the phones should not be notified from now on
Since, it’s again out of stock, the remaining 7 should be notified of it and put back in listening mode 😔

Here if you notice, the system (producer) is unaware of certain details like whether the item would go out of stock again. If so how fast. It just reacts to the events, right?

That’s the deal, how did I go? 🏄

Little, little, let’s add some javascript to it

Directly spicing with some code, blink over it for a while 👀

If you check the above code, why do you think Leena’s salary is not being updated? Did the boss cheat her (or) JS is lying 😆

This is how typically Javascript works right? Loving it 🙋

To solve this, you’ve to repeat the totalSalary calculation again. But, it’s unfair right — I’m literally repeating the same statement every time I’m updating the value. You’d say, introduce a function calculateSalary and reuse it. Even in that case, I’d repeat the function call again :)

Here is where reactive programming comes into the picture. Well, I’m not going to write any RxJS code here now. Instead, let’s talk with some pictures.

To break the above diagram,

The system has 2 components — salary and payslip

Whenever there is a change in the salary component, payslip get’s updated. Here,

Salary component — is the producer
Payslip components — is the subscriber

And, interesting thing to note here, payslip is reactive on the salary changes and does it job. But, the salary component is unaware that the payslip component is dependent of it. That’s the beauty of this paradigm.

What next?

Are you still with me? Then one thing must be clear to you now having explored the possibilities and use cases above.

Reactive programming is no more a trend, and this could be the time to adopt

Does Javascript provide us with any native APIs to write reactive code?

Well, the answer is surprisingly no. But, there is an active tc39 proposal going on around for a while, didn’t find it much active though, you could watch out here — https://github.com/tc39/proposal-observable

Now comes the next question. What are observables?

The entity which can be used for reactive code and also can produce multiple values synchronously or asynchronously is called Observables.

I know that doesn’t sound cool enough. To understand this better, we need to explore a few other terms conjointly.

Streams

Basically, reactive programming gives you the ability to create data streams of anything.

So what are streams?

Anything can be a stream, variables, user inputs, properties, caches, data structure, etc.To be specific,

A stream is a sequence of ongoing events ordered in time. It can emit 3 possible things,

Value (of some type)
Error (something wrong happened)
Completed signal (when the stream is done or completed)

Subscribe — listening to the stream is called subscribing

Thus, The functions that we are defining to deal with the ongoing events are called observers. Makes sense, now?

Observable will call the Observer’s next(value) method to trigger notifications, if things go well Observable will call an Observer’s complete() method exactly once. Else the Observer’s error(err) method exactly once.

Then what is RxJS?

As discussed above Javascript doesn’t have observables. There are external libraries that fill this gap and the most famous one is RxJs. It is a reactive extension for JavaScript which provides observables along with many other handy features.

Do you know chances are high that you’ve already used reactive programming? Know how?

If you have used any modern frameworks such as ReactJS, Angular, Vue, Svelte, etc. you have already written a lot of reactive programming. For eg: In react/Vue you would be updating a state and the view renders with the updated value, right? Imaging, how hectic & costlier it would be in older days when one would query the DOM, modify it and update it manually using innerHTML for god sake 😟

Thus to conclude your favorite frameworks in JavaScript have adopted reactive programming at their core and you might not even have realized that you have written tones of reactive code being a frontend developer 😄

Investing in Reactive paradigm

Reactive programming has enabled web developers to produce features faster by providing them with the ability to compose complex tasks with ease. Reactive programming is already enabling our lives to be better by powering products built by Netflix, Slack, Microsoft, Facebook, and many more. The more we understand it, the more productive web can be built around it. We got a reason to stay excited and why not?

References:

If you have any suggestions (as I’m new to this) or wish to discuss more on this topic please write to me at mariappangameo@gmail.com. I’d also love to connect with you all on Linkedin.

Git — correlating development

Mariappan S — Sun, 10 May 2020 15:48:09 +0000

If you want to start your career as a web developer/software developer blindly learn and practice git beforehand you get things nasty with frameworks. Trust me it’s worth experimenting and could be your companion of all times in your development phases.

Why is it so? Let me explain how I learned it the hard way. I was once interning with a fast-paced AI startup at Chennai. After getting comfortable with the team and product I was assigned my first task to make changes with the UI of a particular retail-dashboard module. It was quite a simple task in React, an experienced professional would fairly complete it in minutes. I was taking almost a day to push my changes and get approved. Why do you think so? To be honest it just took me an hour to read the existing code, understand and make changes. But it took me a day to push my changes. The reason is my lack of understanding with git basics. You don’t want to be an expert to clone a repo, fork it, commit code and push changes. I have done those before, but the point where I struggled is dealing with a distributed environment. I have worked the way I am the only one taking care of my repo. And here I was supposed to work with a team and I struggled to pick up. I was so afraid of what if I pushed some breaking code and if it breaks the production app. You know what I was not aware of branches concept since the only branch I knew is the master, hehe :)

I was so shy to ask doubts about starting up. How would I ask someone about cloning a repo, committing changes, etc? What would they think of me? I was confused. Googling doesn’t help me out at that time since I was not stable and calm. Later I managed to calm me down, watched a few youtube videos and done with the task. It took me a day, they didn’t make any remark on that. But I was so much disappointed. I felt inferior. I like to share the lessons learned from this experience.

If someone is stressing you to follow the same structure, again and again, please don’t ignore it. If something is worth following don’t hesitate to spend time on it. For eg: Even if you are working with your hobby project, push the code to a repository, work distributed with your project mates and experiment how the industry works.Because these are skills that come by practice and no use in memorizing.
Always stick yourself firm with the basics. Refresh them again and again. Apply those skills as much as possible. Stress on the basics before getting your hands dirty with frameworks.
A company may adopt any tech stack, will have its own coding principles, design system, etc. But the foundation will remain the same. At the end of the day, the goal is to stay productive. So, learn how to use Git like productive tools so that you stand out in a crowd.

Now let’s get our hands dirty with some git basics which you will encounter again and again in your projects. I don’t want this to be a regular tutorial listing git commands, which is very easy to find on the web. Instead, let’s experiment with some common issues and confusion we would encounter while getting started with git. Let’s get the git done!

Say, your company wants to develop software to manage meeting rooms in the office. You received the requirement documents, design modules, and other helpful resources. How will you get started? The first question that should come to your mind is

“Are you the only one who is going to work in this project?”.

The answer is no. Thus you would need a distributed version control system like Git to keep track of code changes and feature updates. The next step is to initialize an empty repository to start working on it. It can be done provided git is available on your machine with the following command.

git init

Terminal pops something which is not expected.

'git' is not recognized as an internal or external command,
operable program or batch file.

We would go crazy with wrinkling thoughts in our minds. But we shouldn’t react that way. Calm down and just read the statement once. Errors are not that bad, they can help you actually. They are good friends. You haven’t properly installed git in your system. It’s not recognizing it. So go back and read the documentation, refer some stack overflow solutions and come back. You will find it funny.

Now let’s say you are finding that the project is not up to the deadline and you want someone to help you with the backend tasks. So you are inviting your colleague to help you with the backend part. How can you both work distributed and stay productive? Both should contribute independently and should be aware of all the changes. The key here is working on the same repository. The guy was confused with one thing at this point whether he should fork it or clone it? What is the exact difference between those?

Let’s learn how to approach this rather than discussing the actual solution. One thing you can do is just google it and find answers from some forums like quora which would provide you relatable clear explanations. Like this one below,

https://www.quora.com/What-is-the-difference-between-Git-Clone-and-Fork

Also, know how to branch out and work on a new branch to make changes independently. Also, know how to make proper PR(pull request) after that. Let me leave you some reference. Just google it, dude!

https://thenewstack.io/dont-mess-with-the-master-working-with-branches-in-git-and-github/

Now let’s say the project is going well and teams were comfortable working with the distributed repo. As we make changes then and then we can review those using,

git status

which would list all the tracked as well as untracked file status. In order to view those changes in detail use,

git diff

But git diff will not list the changes if the files are already staged. In that case, this command could be handy to use,

git diff --staged

As the repo grows with many changes and commits he like to review all his earlier commits and its changes. This can be done with,

git log

Guess what the terminal is poured with a rain of commit details similar to the one below.

What is he want’s to see only the latest two commit? Here we go,

git log -n2

This will do the job for us. What if the other person wishes to see the changes done with the latest commit. He can use the long commit SHA value(the 40 character hexadecimal entity found in the above screenshot). Copy it and run,

git show "83a65ef387154658d14839fa97dd3a0d756f796a"

Git is much more capable than it can detect with the minimal optimal information you provide with. The result is the same even if you try this way,

git show "83a65ef38"

Before you commit code, you should add them to the staging area. But let’s say the app which you are working on goes for content review and you are receiving multiple content/typo changes one after another. It could be hefty to add files and commit again and again when you are sure that the changes are not going to affect the core logic by any means. So we can skip that step in most parts of this cycle. The trick is to use,

git commit -am "minor typo change to the title for SEO purpose"

It would be unfair if we couldn’t remember the most fundamental git commands. Yet, at times we may make some mistakes. At that point we should know how to get hints handy, one could easily get those via,

git help

which would make our life much easier without switching our window or navigating to the browser.

When the contents of the terminal are too long you will notice a : below, which you could scroll down to view more. Some would struggle without knowing how and guess what it’s hard to search on the web with the right keywords too. This can be done by hitting the space bar to race forward. You have similar controls to move up and down. The point is to get comfortable with these minor basics, possibly only via practice.

You would definitely encounter a situation struggling to quit the terminal, unknowingly locked with some command execution. Use **ctrl+q **to exit the terminal.

Now the backend guy feels that the header part could have some more width and bright font color would make much more sense. So he makes some changes and runs it. Unexpectedly the UI crashes and responsiveness gets affected. So he wishes to revert back those changes. How can he do so? He can undo things in the editor (2 steps). But what if he made many other changes and undo all. Do you think he would remember all those or is it efficient to undo them one by one when you knew all those are not needed. Here is where git could help you with, say it is the index.html file

git reset -- index.html

Now let’s discuss one classic usability issue you would encounter while working on large enterprise projects. Often your colleagues would pull your changes before they start working with their fresh part. What if they need only a part of your changes and not all. Say, only a few of your changes are compatible or ready to be integrated with the backend. That if you made a bunch of changes in a single commit it would be too hard for him to separate those changes after the pull. So let’s look at an example,

Say you are making few typo changes at the index.html file, then making some product pricing changes in the pricing page. Following it you changed the header part of the app and committed all those changes in a single commit. Now you are supposed to release a build and still, you are not done with the header changes fully. Your colleague feels that it's not that crucial and it’s ok to release the new app version with existing header itself but he needs the rest of the typo changes and pricing details changes there. Imagine how he could overcome this problem effectively. It looks messy right?

The solution here is always we should make atomic commits. That is all the typo changes should go in a commit, followed by pricing changes in a separate one, followed by the other one so that he can pull only what is needed.

Now let’s say he wanted to make more typo changes in the same index.html file(say the previous commit is the same kind of typo changes). It would make more sense to amend those changes with the previous commit. How can we act at this point? The solution is,

git commit --amend -m "typo changes as per marketing requirements"

Have you noticed these kinds of files in your project directory before?

These log files are generated on memory crash or some done internally by the OS-specific to them. Mac generates such files often. They are no way project-function-specific and thus can be ignored. If you commit changes with these junk files it could look messy. So you can ignore these by including the file name or generally including all files ending with .log extension using a regular expression,

# .gitignore

#ignoring log files generated by the system

log/*.log.[0-9]

which ignores all files inside the logs directory as well as any files with **.log **extension if any.

Last but not least I wish to share something related to vim editor which you would be prompted to use at times. If you try to make a git commit without any commit message you would land up in a terminal window similar to the one below.

Dealing with this would be hard initially since no common keys we use will work until we use exact shortcuts to proceed with that. In such a case type the commit message and use :wq end then enter to commit.

This is just to ensure you start working with git comfortable initially. These are some basic confusions you would encounter when you experiment git. There is a lot more to explore which you could do it yourself. Start today, learn to stay productive with your team. Happy coding!

Regards,
Mariappan S
Email: mariappangameo@gmail.com

Developer’s draft on AWS jargons

Mariappan S — Sun, 10 May 2020 15:45:22 +0000

Being a developer, it’s almost impossible to ignore a few technical jargon namely cloud computing solutions(say AWS, Azure, Google cloud platform, etc) and version control systems(say, Git). These are some major players in all aspects of development irrespective of the position or phases. Thus it adds more power to our travel if we managed to understand them at least to the ground level and break myths relating to them.

With more power to computing, efficient usage of computing resources, fast-paced methodologies in arriving at appropriate solutions world got simplified and became much more connected. Nothing at present is too far or too complex to approach and solve.AWS is a major conquerer of this cloud space and they promote the utmost flexibility in providing computing solutions to this world.

Disclaimer: I am not working with amazon or anyway trying to promote them with my content. All the opinions and suggestions below are personal and not subject to any sort of promotion.

Let’s initially try to grasp a few basic concepts ground up from common questions below.

What is cloud computing and why it’s everywhere a sensation now?

Let’s get back to the earlier stages of computing. Remember those days, when we used to manage high-end computing resources like costly servers under maintenance in a safe monitored server room with **24*7 **round the clock administrators. Those were a daydream for many early-stage startups those days. Why is it so? How a bootstrapped startup just grounded up will be capable of enabling such costly server setup powering them? What if they were scaling up rapidly in weeks and there arises more need for such resources later?

Let’s add more power to this with an example. Jhon, seasoned entrepreneur kick-started his first startup on customized online cake delivery store. He started selling customized cakes in and around Paris initially. To his surprise, the business hiked in a week to more deliveries that he is in need of more computing resources to cope up with those online orders. He noticed that his server is responding too slow for requests from customers. On a weekend the traffic hiked to peek and as a result, his website got down for 3 hrs. It took 2 days for Jhon to scale his server setup and lift his business back. Guess what, unfortunately, he lost a few of his potential customers because of the bad user experience for the last two days. They were compromised by his competitors. His user base decreased and now he is into another problem. Problem with resources. He now hardly find his server’s busy. He felt most of the time the extra server remained idle and exactly he is in no need of them anymore. He paid for too them despite being useless now. What could be the solution? Can Jhon sell the extra server setup? If he does it, what if he again requires them for his business when the festive season is arriving. If he managed to keep on paying for those resources will he sustain the overall revenue?

John is not the only one facing this problem, millions of business are in need of an effective tactic to solve these issues. There came the advent of cloud computing solutions.

Here you only pay for what you use and use only when you are in need

What does that mean? John now shifted his business to the cloud. He has his website running on AWS powered suites.

In what way moving to the cloud helped Jhon lift his business?

Since Jhon adapted using AWS powered solutions now he is paying only for the resources he uses up. For eg: He stores all his user data and order-related data on RDS (Relational Database Solution) provided by AWS.Thus he pays only for what it uses up. Moreover, he managed to increase his website traffic by providing an awesome user experience with CloudFront and S3. With all his assets delivered from S3 and rendered via CloudFront CDN, it hardly took time to load up. Under the ground, all these services are powered by AWS EC2 instance of his choice which is exclusively maintained and provided by amazon for free. Assured of limited downtime and zero maintenance cost as well.No headache of arranging space for huge severs and hiring administrators anymore.

You know what, initially while starting up Jhon managed to run his beta business run with 1 year AWS free-tier itself, which means with zero upfront cost to kick-start.

What else one demands to kick-start your idea?

Why it’s important to grasp AWS concepts being a developer?

With the benefits mentioned earlier, you will hardly find some business adapting the traditional server-setup anymore. Already millions have moved their businesses into the cloud and thus it’s inevitable you should also start using it.

Cloud service providers have simplified their services a lot and continuously pushing them focusing on usability. Thus it’s more obvious that a developer can independently handle them for their projects now. It’s not that each and every deployment activities are taken care of the DevOps professional on his own. With the basic knowledge of these, you could power more flexibility and security to your applications. Let me remind you something an AWS system administrator has unique responsibilities aligned with their profiles and it’s inappropriate to expect them to help you with all stuff relating to cloud. From now on, go get your hands dirty with basic concepts, at least a bit with the console initially. I bet you that things won’t be that smooth if you are not practiced to these kinds of cloud setups as a developer that too in early staged startups.

What extend should I learn about these services being a developer?

To be honest, there is no boundary for learning these services and usage in industries. You can try your hands dirty with almost all if you are really interested and comfortable learning those. But there are few kinds of stuff which you would encounter most often during your development phases and thus it’s important to ensure having good command over them. Let me list a few commonly used up solutions in AWS,

S3 — scalable storage in the cloud (hopefully it would be the place where all your static assets reside)
EC2 — virtual servers in the cloud (all your load runs here)
RDS — managed relational database service (say, you would store your user data here)
Route53 — scalable DNS and domain name registration

And few other extended services like,

VPC — helps in maintaining isolated cloud resources (will be acting as a container for your resources)
CloudFront — global content delivery network(probably enhancing the overall loading experience)
DynamoDB —managed no-SQL database
Cloudwatch — helps you monitor resources and applications (can be your lifesaver at times)

AWS services

Now let’s drill down to these basic services concepts as short crisp snippets,

What is EC2? What can you do with it?

EC2 is nothing but computing tools on the cloud. You can do almost anything that you can do with the help of a computer. It’s basically a virtual machine.

With EC2 you can easily launch EC2 instances (say Linux servers, third-party AMIs which are available in the marketplace).

What is an AMI then?

An Amazon Machine Image (AMI) provides the information required to launch an instance. You must specify an AMI when you launch an instance. An image is basically a combination of operating system and related software (like java, python, etc)

Image = OS + softwares

What is cloudwatch and why should I care about it?

Cloudwatch is a monitoring service for other AWS services. The beauty is that you probably would have been already using them without realizing it’s cloudwatch since most often they exist as integrated form with other AWS services.

Alarms + metrices — alerted via email,messages etc

It’s extremely handy and useful in many cases. For eg: Since I started experimenting with AWS in a free-tier, I have set up alarm for billing such that it alerts me via mail when the CPU utilization exceeds a certain limit. The condition I have set up was,

CPUUtilization < 10000 for 1 datapoints within 5 minutes

This ensured me a more reliable and informed service utility.

What typical services would I require for a minimal scalable web app?

EC2 — for app hosting
Images and assets stored and served via — S3
All your user's data stored in — dynamo DB or RDS
Objects (say cart items in e-commerce solutions) — RDS
Sessions — managed via elastic cache

This could make sense for a scalable web app for a decent user base.

What is IAM? Why we are so much bothered about it?

Identity and Access Management (IAM) enables you to manage access to AWS services and resources securely. Using IAM, you can create and manage AWS users and groups, and use permissions to allow and deny their access to AWS resources. Let me make it clear how I have been managed with access to my company AWS account.

The company I have been interned with has a joined AWS account which will be extensively used by each member across functions and products. Being an intern, I was working with the company’s marketing website and thus I have been provided access only for it by one of the admin. I requested access to it from one of our admin. Say, if I have been assigned some other work dealing with a different product in the future I should request access to it the same way. It’s important to note that only those who were given access to particular services would be allowed to work with them. This ensures restricted access to services. I was also advised to set up MFA(multi-factor authentication) for the AWS environment as an extra layer of security. It requires me to enter an MFA code before sign-in synced up with some device or virtual machine. These things can be effectively handled with the IAM console.

Few things that you can do with IAM are,

Manage IAM users and their access
Manage IAM roles and their permissions
Manage federated users and their permissions

How assets are stored and managed in S3?

S3 — simple storage

Simple Storage (S3) is one of the oldest AWS services like EC2. It stores as objects whatever it may be. An object is something,

object = file + metadata

Objects are stored in AWS buckets. Each bucket will have a unique bucket name. Thus you can’t have same name for two buckets.

What are some database options available under RDS?

MYSQL
PostgreSQL
SQL Server
MariaDB
Oracle DB
Amazon Aurora

PostgreSQL is my personal favourite :)

In what way RDS is efficient?

Traditional databases setup may require you to manually perform the following,

Installing and managing DB’s — need completely different software and hardware considerations
It sometimes requires hiring someone to do
software updates
Performance
Backups

usually a Database Admin on demand. These things will be taken care of by RDS solutions. Since they support,

Regular software upgrades
Nightly DB backups
Monitoring

Also supports features like,

RDS Backups:
Periodic backups — occurs daily
Backups would be stored up to 35 days
easily you can restore DB from a backup snapshot
Multi-AZ deployment (AZ stands for availability zone)
It allows DB replication to a different zone
Automatic failover in case of a catastrophic event
Db read replication
This is essentially a copy of your DB which is not used in production

What are some small minor details we miss and struggle with AWS being a developer?

Make sure you are comfortable with the usage of console search options. Try setting up pins to create quick access to services you use the most.
Be conscious of the region you are in. At times you will be in the default region value. You would be charged for the services based on your region sometimes and also region could affect the speed.
Set up MFA without fail as it ensures security for your working environment
AWS encourages you to organise users under groups and assign permissions to groups rather than individual users.
Don’t mess up with the root access always.

What is an elastic IP?

Elastic IP is nothing but a public Ip that can be associated with subnets. When the particular subnet is deleted it stays remained. So that it can be used to associate with others.

What are the auto-scaling groups and load balancers?

Autoscaling group — automatically shrink or expand a pool of instances based on pre-defined rules
Load balancer — routing appliance that maintains a consistent DNS entry and balances requests to multiple instances.

There is a lot more to cover with AWS technically and descriptively. But my aim is just to create a developer reference markup guide to refresh basics before diving deep into them as AWS developers. I hope this helped you some way refreshing your knowledge on AWS.

Regards,
Mariappan S
Email: mariappangameo@gmail.com

Web Browser internals

Mariappan S — Sun, 10 May 2020 15:41:31 +0000

Why this should be your first step towards web development?

If you’re someone hoping to kickstart a career in web development, getting introduced to web browser internals could become a great lifesaver.

Browser is the master — await react,vue,node a bit

Learn React, learn Vue, experiment Ember — you’ll feel the connection with these cool frameworks and the ability to adapt any in the future if you’re managed to grasp the browser internals.

What to grasp with browser though? Definitely there’s a lot besides the millions of lines of C++ powering it.

Commonly used browsers

What a browser is? How does it work? What are the most commonly used browsers?

There are millions of articles, references, Wikipedia insight on these. There is a high probability that you already knew those too. So let’s try to spot a few details which matter a lot but we hardly grasp them.

Have you ever encountered this type of CSS code?

-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

Yes, have you ever wondered how they relate to the web browser and how they help with compatibility.

Almost all popular browsers are based on webkit engine

WebKit is basically a web browser engine used by Safari, Mail, App Store, and many other apps on macOS, iOS, and Linux.

Let’s see what kind of engines are actually powering the master browser we love to use,

Chrome and Opera (from version 15) — Blink
Firefox — Gecko
Safari — Webkit
Edge — Blink [Internet explorer — Trident]

Well, now let’s look at how the high-level structure of the browser would be.

A normal web browser should have the following components,

UI (user interface) — this includes everything we interact with like address bar, buttons (front, back, search, etc)
Browser engine — it works as an interface between the browser and the rendering engine(which we will cover next)
Rendering engines — It is the one that parses HTML, CSS, etc. That this is what responsible for displaying requested content.
Networking — for HTTP requests
UI backend — used for drawing basic widgets like combo boxes and windows.
Javascript interpreter — parses and executing javascript code
Data storage — All data capabilities you find in a browser namely cookies, IndexedBD,localStorage, etc.

With this context, let me share with you one more thing interesting.

Chrome uses a separate instance of the rendering engine for separate processes (say tabs)

This is how the flow normally would be,

Credit — html5rocks.com

Here we might be familiar with DOM but what about the rest in the flow,

While the DOM tree is being constructed the browser constructs another tree known as render tree.
It’s nothing but visual elements in the order in which they will be displayed.
Its main purpose is to enable painting the content in their correct order.
Firefox calls them as frames, while WebKit based ones call thems as renderer or renderer object.

Oh yes, let me share one important note aligning with the above context,

Non-visual DOM elements will not be inserted in the render tree. Sounds convincing right?

Non-visual means lets say the head element.

The renderers correspond to DOM elements, but the relation is not one to one. There are DOM elements which correspond to several visual objects.

For eg: the “select” element has three renderers: one for the display area, one for the drop-down list box and one for the button.

When the renderer is created and added to the tree, it does not have a position & size. This is where the layout comes to place.

Style computation

This is one of the most interesting parts,

Building the render tree requires calculating the visual properties of each render object. This could be more complex than we actually think.
The origin of the style sheets is the browser’s default style sheets.

Follow this link if you wish to know more about this.

Stylesheet cascade orders

How many of you have experienced difficulties in debugging CSS behaviour? I guess it could be daunting. It could be never easy if we have an understanding of stylesheet cascade orders and how to use them within our project properly.

Browsers inhale styles differently — trust me

The order goes like,

Browser declarations
User normal declarations
Author normal declarations
Author important declarations
User important declarations

Wait, which user or author we are talking about?

The author specifies style sheets for a source document according to the conventions of the document language. It is basically the website creator (or) the codes it.

The user may be able to specify style information for a particular document. It's us who interact with it in a browser!

Here is the detailed doc for CSS cascading which could help you dive deeper on this.

Go, get your hands dirty with some different levels of CSS declarations to get a clear view on this.

Then how scripts would be processed? That’s important too.

Let’s break the loop now,

Order of execution of scripts

The nature of the web is synchronous in general. Say, you have an HTML document,

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction() {
            document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
            }
        </script>
    </head>
    <body>
        <h1>A Web Page</h1>
        <p id="”demo”">A Paragraph</p>
        <button type="”button”" onclick="”myFunction()”">Try it</button>
    </body>
</html>

What would happen when browser reads it?

It first starts parsing the HTML,it goes on like html tag,head tag …uff,

It then notices the script tag, it jumps in processing the script. It returns back to HTML parsing only after completing this. In this case, it’s acceptable, just an innerHTML statement. But what if it had to process some hundreds of lines, making few API calls, etc. That could be really daunting right? Thus there is debate at all times where to place the scripts in an HTML document. It’s a very different topic. Let me leave it to you.

Thanks to modern HTML specifications, now you can explicitly specify whether the browser should wait or process asynchronously.

Have a look at async and defer attributes. It makes the job easier.

Now let’s discuss on how browser optimizes the changes happen on the layout creation process. It would sound very interesting if you dive deep into this. Don’t worry I will share a beautiful resource at the end for your experimentations :)

Optimizations

When a layout is triggered by a “resize” or a change in the renderer position(and not size), the renders sizes are taken from a cache and not recalculated. Cool right?

Just imagine if browser recalculates each change how time-consuming and less interactive the experience would be.

In some cases, only a subtree is modified and the layout does not start from the root. This can happen in cases where the change is local and does not affect its surroundings–like text inserted into text fields.

The browsers try to do the minimal possible actions in response to a change.

There is a lot more you could explore and learn about browsers. I just planned to share certain concepts in a very brief minimal manner such that it doesn’t complicate too much and encourage you to dive deep.

If these fascinated you,it’s time to experiment more. Please do have a look at this in-depth article which was shared to me by one of my mentors. I bet you’ll never regret after reading it.

Credit: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

By Tali Garsiel and Paul Irish

Regards,
Mariappan S
Email: mariappangameo@gmail.com

Exploring MongoDB

Mariappan S — Sun, 10 May 2020 13:37:08 +0000

Data is the new age fuel — If I am not wrong you would have somehow witnessed the power of data and how often we encounter them in our walks of life. The demand to harness the wide range of data, usage of resources, insights gathered from them and necessity to network pushed us to adapt wide varieties of database solutions.

Today’s data we encounter tend to be unstructured preferably. This led to the revolution of No-SQL database solutions. Right now, if you experiment with the market, you would probably encounter hundreds of such solutions available to adapt to your problems. Let’s break the doors of MongoDB now, one of the most popular and widely adapted No-SQL solution briefly.

As a programmer, you think in objects. Now your database does too.

This one from MongoDB’s official document is pretty self-explanatory and note-worthy.

Diving a bit into their homepage you could find this definition,

MongoDB is a general-purpose, document-based, distributed database built for modern application developers and for the cloud era.

Enough with the theory let’s take a use case and experiment the basics of MongoDB intuitively,

Usecase that would make much sense, relatable and interesting would be the present COVID-19 pandemic we are witnessing. Let’s use MongoDB to explore few useful insights about COVID-19 and find how these kinds of solutions stand out when we are dealing with huge volumes of unstructured data.

Note: I do preassume you have MongoDB installed on your machine and we are good to go.

We are going to stick with absolute basics and thus we would deal with data via Mongo shell. We are not going to interact with any actual backend like node or python, which we would possibly cover in one of the upcoming posts.

Make sure your MongoDB server is running and start the shell with the command,

mongo

If you are noticing a terminal screen similar to this you are good to go, just make sure the (>) arrow pointing at,

MongoDB is a document database, which means it stores data in JSON-like documents. You would more likely to encounter such kind of data often and MongoDB community believes this as the most natural way to think about data, and is much more expressive and powerful than the traditional row/column model.

Let’s create a database (say, COVID19-dB) and create a new collection(say, covidReports) and store the current numbers as per the reports from WHO. We planned to continuously update the collections almost every day.

First, let’s check for the available databases using the command,

show dbs

This will list all the available databases,

If you notice you can find the database name along with the storage information for each,

Now let’s create one for us,

use COVID19-db — will do the job for us.

Now let’s create a new collection for general COVID world-wide stats and add some data,

Note: MongoDB checks if the collection is available else it creates one for us exclusively on insert.

Let’s say our overall report looks like this,

To add it to the collection covidReports,

You can notice that the data is successfully inserted and acknowledged, to verify we can use find and inspect all the collections available.

Note: The pretty() over there is just to prettify the document to make it more readable. One more thing is you can find a unique id is being created for the document automatically by MongoDB.

Now let’s say we need country-wise reports too. We can just insert them at the same collection following the previous report as follows,

If we look closer, this is an array of data being inserted, let’s check how the collection looks like,

If we look at this result carefully you will find two different types of data is present inside the same collection(one is an overall report and country-wise report with different key-value pairs). This is termed as unstructured data and MongoDB completely accepts this. But we should avoid this kind of usage. Why?

Because imagine you are interacting with this data from some backend like Node.js or PHP and if you try to iterate over this you will find it difficult. Thus even though MongoDB is a schema-less database,it’s good to have a schema model based on our use case to facilitate such kinds of retrievals.

Fine, now we have all the data needed.

For some reason, Let’s say India plans to maintain a separate collection so that they can operate independently and planned. Thus we should remove them from this collection.

World leaders also wish to know the critical cases count so that they could focus more on their welfare and work accordingly. To update,

Now let’s verify if things are going as required,

So If you notice here, we see India is been removed and new additional information regarding the critical cases is also updated. Hurray!

Now let’s say we need to mark all those countries and overall report status as critical those satisfies the condition death count greater than 2000, how can we achieve this?

In our case all four documents satisfy the condition, thus all get updated.

One unique feature of MongoDB is embedded documents. This you will not find in any other databases. Thus MongoDB is so much popular and widely used.

This means you can embed any levels of documents inside other documents.

MongoDB supports a maximum of 100 levels of nesting (but it’s a good practise to stop with 2,3 levels itself)
It facilitates us to store a maximum of 16MB, which is fair reasonable since we are going to store only key-value pairs, nothing that heavy.

Now let’s see it in action. Well, each country will have its set of testing and treatment centers at different locations. It should include information such as total patients they could accommodate, helpline numbers, address information, etc.How can we embed such data,

For simplicity let’s embed those data only for the USA since they were in most critical condition and thus it would be extremely helpful for them.

We can update something similar to this,

If you execute find and see how the data looks now,

This way you can embed any levels of data if required.

Apart from this, I just wish to touch upon a few things but definitely not in-depth as we decided to stick to the very basics, right? So let me just give a glance of them,

You can have these many types of data types when working with MongoDB,

text
boolean
number — integer, long, decimal
objectId — will contain the timestamp at which the object is created
ISODate — date format to store the date and time in MongoDB
Embedded document — can store one entire document against a key
array — multiple documents or multiple nested documents can be stored for a key

You can also establish a certain relationship between data just like any other databases,

one to one
one to many
many to many

There is a lot more to cover, let’s shift those experimentations to some other future posts hopefully. I hope you had some fun working with MongoDB and let me know if something could have been better 😄

Regards,
Mariappan S
Email: mariappangameo@gmail.com