Fri, 27 Aug 2021 03:05:07 GMT

If anyone faces the same problems and want me to write the actual implementation DM me on [twitter]() my DM's are open

While working on my dev.to clone in Angular I came across the comments section which can be very tricky to render. As it has a tree like structure which can go infinitely.

├── comment
│   ├── comment ─── comment
│   │   └── comment
│   ├── comment
│   ├── comment ─── comment ─── comment
│   │   └── comment ─── comment ─── comment
│   └── comment
├── comments
│   ├── comment ─── comment
│   │   └── comment 
│   └── comment 
├──── comment
│   ├── comment
│   └── comment
└──── comments

Rendering comments

We never know the actual structure of the comments. I looked closely at the structure and I saw its just like recursion the same component is calling the same component. So I tried that and it worked.

I passed the comments array to a component and it renders it with a ngFor after I call the same component pass to it its children and go about that again and again. You can

Spacing comments

Next problem was CSS I wanted to add space before each comment when it goes to the next level but after 4 levels we need to stop adding spaces in comments other wise there will be no space for comments. Here we have one advantage aver the above problem we know the level after which we want to remove the CSS if we don't try to make it generic we can just do

.app-comments .app-comments .app-comments .app-comments {
    padding-left: 0;
 }

using specificity we can take advantage of us knowing the level at which to remove padding.

Toggling functionality

If we use any library managing state of such a structure can be a night mare. I used the native details html tag which comes with the toggling functionality in built and we need not manage any state this is the point where I realize how powerful these structures can be.

State problems

Working with the details tag was great but I needed the state of it closing and opening in the template. To show and hide some data whenever the state changes. To do that and not manage any state I thought of using template variables and @ViewChild but failed miserably managing state at each level of an Array of dynamic length array was really hard which is changing its state I have to manage a tree like state for components to to mitigate this I thought lets completely keep the state in the template and I used the same template variable and use the native open property on details element to show and hide elements but nothing was happening. I really tried everything but the open property never changed in the template.

Ngzone problem

So I got to know that on open close of detail HTML element a toggle event is generated and zone.js has not monkey patched the toggle event. What a pain when you expect something to work in the frame work and it does not work and you need to have deep understanding of the frame to solve it and if if you have a good amount of knowledge you can't solve it. To resolve this I imported ChangeDetectorRef and detectChanges on when the toggle event happens.

]]>

Fri, 27 Aug 2021 01:56:26 GMT

Help me improve these updates by giving suggestions.

Github Repo -

Deployed on Firebase -

Last week we finished details page, article section and basic comments section.

This week I added the complete comments section. It was one the most complex tasks while building the dev.to ui. The comments structure is a bit complex to render. Comments contain a key called children which can again contain comments so it was like a tree like structure.

├── comment
│   ├── comment ─── comment
│   │   └── comment
│   ├── comment
│   ├── comment ─── comment ─── comment
│   │   └── comment ─── comment ─── comment
│   └── comment
├── comments
│   ├── comment ─── comment
│   │   └── comment 
│   └── comment 
├──── comment
│   ├── comment
│   └── comment
└──── comments

How to render an infinite tree. Then I called the comment component from the comment component. To create a recursion like scenario which will render the entire component tree. I've written details about it in this .

has also added
commit lint to the repo so that reading the commit messages is easy. I'm thankful for that.

First Live stream

I also did my first live stream with on moving over our app from angular-cli to NxDevTools we did the basics in the stream and I went over a lot of questions that I have to why Nx if you want to see how to move your project over Nx please follow us on
we will be migrating the whole dev.to clone to Nx over the live stream. This was my first talk I was a bit nervous but Santosh made me at ease. Thanks Santosh.

So this is where we are right now.

Next week I'll start working on the podcast page.

Issue

Commits

]]>

Sun, 22 Aug 2021 03:09:53 GMT

I've started a service on providing a software for community building . This is my website for providing the services . I need feedback on how I can improve this. It is raw right now but I have learnt my lesson to never go after perfection and start first and iterate upon it. Iterations are the key you are never good at anything when you start but you keep getting good at it and and when you keep going.

I now need to know how I'll market this. I'm very bad at marketing. So, I'll need all the help I can get. I am thinking of releasing it on product hunt and posting about it on communities. If you know any communities that help in building communities please let me knew in the comments down below.

My first service I never thought if I start I'll get this far but here I'm am so to anyone who is going t start something I'll say start today. You will reach far after you start. Don't go after perfection

]]>

Fri, 20 Aug 2021 03:33:26 GMT

Help me improve these updates by giving suggestions.

Github Repo -

Deployed on Firebase -

Last week we added details page but did not style the middle articles portion.

This week I added the article section CSS and added basic comments the comments section. Is on a different branch so will not deployed right now.

We have new contributors too who is building the videos detail page did a great job she has already completed it added infinite scroll and made everything responsive too she has already completed her work but there are some small changes after that her work would be merged. To have a look you can have a look at her and let me give you a sneak peek.

This week I had a lot of problems with the CSS because the article body was injected and I still could not do the code highlighting properly. It was really really tiring.

I also resolved other small bugs added GitHub action for deployment on main branch. Lets talk about the small bugs earlier the reactions section was static I added the reactions store so that they are dynamic but there is no reaction api provided by the dev.to/api it so lets see if this is going to be a problem as its structure can change anytime because of no support.

I also ran into the grid overflow problem mostly grid automatically takes the free space using fr units but some elements in it does not play well. I came to know about this . It was a tricky problem because I put an hour into fixing my inner code blocks but the problem was with the grid.

Adding the GitHub action was fun I have with CI/CD but only on Gitlab I didn't think it would be this different adding actions for other repos seems a weird concept to me but maybe it grows on me. Lets have a look at the GitHub action.

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch: 

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  firebase-deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # Setup node version which this action will run
      - uses: actions/setup-node@master
        with:
          node-version: '14.x'

      # Install node_modules as we don't push them
      - run: npm install
      # Build our angular app
      - run: npm run build
      # Firebase action to deploy. Still don't fully understand this concept
      - uses: w9jds/firebase-action@master
      # With what arguements will this action run
        with:
          args: deploy --only hosting --project dev-toclone
      # Environment variables with which you want to run your job. To keep them a secret you can set in your repository secrets 
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Let me give you the sneak peek of the newly created comments section too this is going to be hard as the way comments are but we are going to use recursion here to render out all the comments. That is going to interesting you will see a new pattern of rendering these types of structures.

Current Status three branches :-

- This branch contains the Homepage, Article-detail with comments, Listing page

- This branch contains the comments section of the article detail page

- This branch contains the videos section

Discussions

I've started a new discussion weather we should move the project to Nx on main branch or keep it on angular-cli. Would love to hear everyone's opinion.

Issue

Commits

This time I won't add all the commits there are many I "ll highlight the most useful

Next time I'll finish the comments section. if anyone wants to contribute they can connect on twitter with me my handle is my DM's are open or on github.

]]>

Tue, 17 Aug 2021 00:30:00 GMT

To create a new dynamo DB table follow the instructions below:-

Go to the DynamoDB service. Click on create table.

Add table name and primary key. For example I used TutTable as name and id as the primary key. Click on create.

Now you will see a screen with details of Dynamo DB table

Now we will add some items to see how DynamoDB works. To do that go into items tab and click create item

Add some fields like name, gender. To add click the plus symbol do append and add the type of data you want to add and click on save. So you added an item to your database

Create another item and this time just add the id. you need not all all fields his is how NoSql database work.

You will see two items with different data

After that delete the table. So, that there are no additional charges.

Next we will study about some more databases available in AWS for various other use cases.

]]>

Mon, 16 Aug 2021 00:40:00 GMT

DynamoDB is NoSql, key-value, document database that delivers to massive workloads. It is a distributed, fully managed, server less database that can scale to millions of requests per second and trillions of entries and 100's of TB in storage. Many of the world's fastest growing businesses such as Lyft, Airbnb, and Redfin as well as enterprises such as Samsung, Toyota, and Capital One depend on the scale and performance of DynamoDB to support their mission-critical workloads.

What is a key-value Database?

A key-value database is a type of nonrelational database that uses a simple key-value method to store data. A key-value database stores data as a collection of key-value pairs in which a key serves as a unique identifier. Both keys and values can be anything, ranging from simple objects to complex compound objects. Key-value databases are highly partitionable and allow horizontal scaling at scales that other types of databases cannot achieve. For example, Amazon DynamoDB allocates additional partitions to a table if an existing partition fills to capacity and more storage space is required.

Advantages of using Dynamo DB

Scalability- It can scale to trillions of requests and 100's of TB of data without any intervention as it is a serverless database.
High availability - data is highly available as everything is replicated across 3 AZ.
Low latency - It gives a single digit low latency in microseconds
Pay as use- You only for the storage and network requests you fulfill
IAM - Its fully integrated with IAM which provides you full control of each user for security authorization and administration.
Automatic Backups - You can go to any point in the preceding 35 days with no downtime.

DynamoDB Accelerator (DAX)

Millisecond latency is too slow for some mission critical apps. If you want performance improvement you can use Dax which use caching to improve performance many times. It is a fully managed in memory cache service for Dynamo DB.

]]>

Sun, 15 Aug 2021 02:52:22 GMT

Help me improve these updates by giving suggestions.

Github Repo -

Deployed on Firebase -

Last week we added basic details page.

This week I added user details and a reaction section in article details. There is no API for adding reactions to actual dev.to site so the reactions component is read-only for now.

This week I have good news did the listings page for us. I am really happy this is a first opensource contribution in my project. Thanks Chellapan

He implemented the masonry layout in this and next I'll write how he implemented the masonry layout.

Now back to my work this time added a global component store for user details in the article-details component. I also had a lot of problems with the layout of the page the layout was not working correctly whatever I set in the grid-template-columns but after putting a lot of time in it I realized its just that article details content is not working correctly either the image was bigger then the body or the code-snippets were. I was really tired of this, to solved this problem my mind told so what is not styled the details content. This made me realize that the problem should be there. Then I checked and then there it was so for now I made images with width 100% and its working fine for now. This is where we are now.

Next week I'll style article details and on the comments section.

Issue

The article section is really getting on my nerves. Making so many stores for articles is annoying.
Moving it to Nx. I've heard a lot about Nx this will be my first Nx project.

Commits done

As you can see a lot of content was added. Now we will soon dive into improving it more using Nx and Tailwind once we finish the basic application.

]]>

Tue, 10 Aug 2021 00:35:00 GMT

Last time we studied about databases now we create a RDS database in AWS. To create a RDS database follow the steps:

In search bar type RDS. Select a service named RDS

Then select databases. There click on create database

For this tutorial we would do a standard create in easy create there are some configured options that makes it really easy to create a DB. Select MySql in database engine. You can select the version too but right now I'll choosing the latest default version.

Select the free tier in templates or select the option if you need to deploy the DB in prod or test as needed.

In the settings setup database name, username and password as needed. I've set the db name as database-1, username as admin, password as password

Select the instance because of free tier we only have a t2.micro available

In storage select storage type as general purpose SSD with 20 GB storage as it is available in the free tier. Uncheck enable auto scaling as this is a test instance if in production enable it as the storage will automatically be increased as needed.

You can also select multi AZ deployments if you are using it for production but it is not available in the free tier.

In connectivity select the VPC you want and subnets we will study about them in detail some other time, for now select the default ones and no need to change anything in this section defaults work just fine.

In authentication we will select password auth and in the costs you will see that this is in the free tier change settings from free tier to something else and you will see the monthly costs.

Click on create database. This will create our DB.

Don't forget to delete your Db if you are dong this as an exercise as it may cost you money with all the backups

So we have created our database we can use it now, we see how easy it was to setup a new DB in AWS if we would have done it on our own with backups, monitoring etc. It would have taken us a 1-2 days. Next we will study about Dynamo DB.

]]>

Mon, 09 Aug 2021 00:38:00 GMT

There are many managed databases provided by AWS which allows us to setup databases very easily.

Why use managed databases given by AWS

You can setup your own Db on your on premises server or on your Ec2 instances but then you have to take care of backups, replication, scaling, availability, durability. Which is a lot of operational work added to your plate. If you mainly want to focus on developing your applications and don't want to worry about managing and handling your data bases then managed DB's by AWS are your best choice. These managed DB have a built in

Scaling, Availability
Backups and upgrades
Monitoring, alarms etc.

Relational DB services

RDS

Amazon Relational Database Service (Amazon RDS) makes it easy to set up, operate, and scale a relational database in the cloud. It allows you to setup many relational DB with many different engines like Amazon Aurora, PostgreSQL, MySQL, MariaDB, Oracle Database, and SQL Server.

Using RDS has the following advantages over traditional Db

Ease of setup - You can setup a production-ready relational database in minutes
Scaling - These Db has built in scaling you can also setup replicas to reduce load on each server
Availability - If you setup a multi-az db then all the data is automatically replicated and we can even recover our DB from there. There are also continuous backups and we can recover DB's from those timestamps
Secure - It allows you to encrypt your data using industry standard encrypted IPsec VPN. It also offers encryption at rest and encryption in transit.
Maintenance - We have to do less management as OS management and updates are handled by AWS

Aurora

Aurora is a special proprietary DB by AWS and you can use Mysql or Postgres it combines the performance and availability of traditional enterprise databases with the simplicity and cost-effectiveness of open source databases. Amazon Aurora is up to five times faster than standard MySQL databases and three times faster than standard PostgreSQL databases. It auto-scales up to 128TB per database instance and delivers high performance and availability with continuous backup to Amazon S3.

Next we will do a Hands on setting up RDS on AWS cloud.

]]>

Fri, 06 Aug 2021 03:17:38 GMT