DEV Community: Sri-Ni, Thirumalaa Srinivas

Delete git tags local and remote.

Sri-Ni, Thirumalaa Srinivas — Thu, 16 Sep 2021 02:30:20 +0000

These may come in real handy when setting up code commit infrastructure.

I was setting up code commit conventions, change log and release infrastructure in React & Angular codebases. It used the following things.

Code commit conventions for message formatting.
Version bumping and change log with standard-release.
Setting up and/or updating README.md and CONTRIBUTING.md.

While doing this, many tags were created for testing in the branch. I wanted to avoid having all those future tags in the repo.

Hence, I needed to do the following.

List all the tags meant for future releases.
Delete them in the local branch.
Delete them in the remote branch.

LIST

List all the tags

List all the tags, plus with matching pattern.

git tag --list

# Matching a pattern
git tag --list 'v*'
# The above matches tags starting with the letter "v"

DELETE

Delete the tags in the local and remote branch.

Local

git tag -d TAG1 TAG2 TAG3

# or

git tag --delete TAG1 TAG2 TAG3

Remote

git push origin -d TAG1 TAG2 TAG3

# or

git push origin --delete TAG1 TAG2 TAG3

The above commands will come in handy in a lot of different situations.

Best!

Srini @ RoverHead

[screencast] What is nvm (node version manager)? How to use it?

Sri-Ni, Thirumalaa Srinivas — Tue, 09 Jun 2020 02:43:35 +0000

nvm is Node Version Manager.

Angular SSG using Scully (tutorial).

Sri-Ni, Thirumalaa Srinivas — Sun, 31 May 2020 21:41:43 +0000

Build a blog or markdown docs SSG within your Angular application using Scully.

Scully is a fairly recent SSG to join the JAMStack landscape.
It's biggest differentiator is that it is built for Angular projects.

`Demo with Netlify`

Original Blog Post

sri-ni / ng-app-scully-blog-docs

Angular app using Scully to make docs and blog.

ng add @scullyio/init

Usage

This is based on the type of Angular project.

Feature-driven app

Scully can be useful to add docs or even a blog to it.
Maybe even pre-rendered pieces of the app can provide the speed, improving the User Experience.

Website

We'll, your Angular built website gets the blazing speed of SSG pre-rendered HTML and CSS.

System Tooling

This is not specific to Angular or Scully.
It is tooling that you would need for modern web development.

Install NPX

We need to install npm package runner for binaries.

npm install -g npx

Install NVM

nvm is a version manager for node. It enables switching between various versions per terminal shell.

Github installation instructions

Ensure Node version

At the time of this writing, I recommend node version 12.16.3 and it's latest npm.

nvm install 12.16.3

node -v #12.16.3

nvm install --latest-npm

Install the Angular CLI

Install it in the global scope.

npm install -g @angular/cli

Create a new Angular app

ng new my-scully-app

Add routing during the interactive CLI prompts.

Add routing for existing apps if there isn't one in place, using the command below.

ng generate module app-routing --flat --module=app

Alternative method

Single line command to use the cli and create the app.

npx -p @angular/cli@next ng new blogpostdemo

Add Scully

Add the scully package to your app.

ng add @scullyio/init

Initialize a blog module

Add a blog module to the app.
It will provide some defaults along with creating a blog folder.

ng g @scullyio/init:blog

Initialize any custom markdown module

Alternatively, in order to control the folder, module name, route etc.
you can use the following command and respond to the interactive prompts.

ng g @scullyio/init:markdown

In this case, I added a docs module. It will create a docs folder as a sibling to the blog folder.

Add Angular Material

Let's add the Angular material library for a more compelling visual experience.

ng add @angular/material

Add a new blog post

Add a new blog post and provide the name of the file as a command line option.

ng g @scullyio/init:post --name="<post-title>"

You can also use the following command to create new posts.
There will be couple prompts for title and target folder for the post.

ng g @scullyio/init:post

In this case, two posts were created for the blog and docs each.

Add the content to your blog or docs posts.

Setup the rendering layout for the app

Using the material library added, generate a main-nav component for the app.

ng generate @angular/material:navigation main-nav

Setup the markup and typescript as below for the main-nav component.

import { Component } from "@angular/core";
import { BreakpointObserver, Breakpoints } from "@angular/cdk/layout";
import { Observable } from "rxjs";
import { map, shareReplay } from "rxjs/operators";
import { ScullyRoutesService } from "@scullyio/ng-lib";
@Component({
  selector: "app-main-nav",
  templateUrl: "./main-nav.component.html",
  styleUrls: ["./main-nav.component.scss"],
})
export class MainNavComponent {
  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(
      map((result) => result.matches),
      shareReplay()
    );
  constructor(private breakpointObserver: BreakpointObserver) {}
}

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
  >
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="'blog'">Blog</a>
      <a mat-list-item [routerLink]="'docs'">Docs</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async"
      >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>App Blog Docs</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Setup the Blog component

Let's setup the component to enable rendering of the blog posts.

We need the ScullyRoutesService to be injected into the component.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ScullyRoutesService } from '@scullyio/ng-lib';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
  preserveWhitespaces: true,
  encapsulation: ViewEncapsulation.Emulated
})
export class BlogComponent implements OnInit {
  ngOnInit() {}

  constructor(
    public routerService: ScullyRoutesService,
  ) {}
}

To render the listing of the available posts use the injected ScullyRoutesService. Check the .available$ and iterate them. The route has multiple properties that can be used.

The <scully-content> is needed to render the markdown content when the route of the blog is activated.

<h1>Blog</h1>

<h2 *ngFor="let route of routerService.available$ | async ">
  <a *ngIf="route.route.indexOf('blog') !== -1" [routerLink]="route.route"
    >{{route.title}}</a
  >
</h2>

<scully-content></scully-content>

Ensure the routing module blog-routing.module.ts looks similar to the below.

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { BlogComponent } from "./blog.component";

const routes: Routes = [
  {
    path: "**",
    component: BlogComponent,
  },
  {
    path: ":slug",
    component: BlogComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BlogRoutingModule {}

Setup the Docs component

Let's setup the component to enable rendering of the docs posts.

This would be similar to the setup of the blog module above.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { ScullyRoutesService } from '@scullyio/ng-lib';

@Component({
  selector: 'app-docs',
  templateUrl: './docs.component.html',
  styleUrls: ['./docs.component.css'],
  preserveWhitespaces: true,
  encapsulation: ViewEncapsulation.Emulated
})
export class DocsComponent implements OnInit {
  ngOnInit() {}

  constructor(
    public routerService: ScullyRoutesService,
  ) {
  }
}

<h1>Docs</h1>

<h2 *ngFor="let route of routerService.available$ | async ">
  <a *ngIf="route.route.indexOf('docs') !== -1" [routerLink]="route.route"
    >{{route.title}}</a
  >
</h2>

<scully-content></scully-content>

Ensure the routing module docs-routing.module.ts looks similar to the below.

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { DocsComponent } from "./docs.component";

const routes: Routes = [
  {
    path: ":doc",
    component: DocsComponent,
  },
  {
    path: "**",
    component: DocsComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DocsRoutingModule {}

Build and Serve

Build the app for development or production.

ng build
# or
ng build --prod

Build the static file assets using the scully script.

npm run scully

Serve using a web server like http-server.

cd dist/static

http-server

Alternatively, use the scully serve script.

npm run scully serve

We can simplify the above with a consolidated npm script in package.json.

"scully:all": "ng build && npm run scully && npm run scully serve",
"scully:all:prod": "ng build --prod && npm run scully && npm run scully serve",
"scully:build:prod": "ng build --prod && npm run scully",

Additional Notes

As an alternative to interactive prompts, you can use command line options to add a new markdown module.

ng g @scullyio/init:markdown --name=articles --slug=article  --source-dir="article" --route="article"

Shortcomings...

The biggest one is I haven't been able to find a way to render the post listing on one route / component, with a drill down method to view the post in separate route / component.
On the listing, until the post route is triggered, the following content is rendered. This experience could be improved.

Sorry, could not parse static page content
This might happen if you are not using the static generated pages.

References

Web Bytes - Shadow DOM

Sri-Ni, Thirumalaa Srinivas — Wed, 30 Oct 2019 02:56:54 +0000

What is Shadow DOM and why is it important?

Web components have a key concept of encapsulation.
Keep the html markup, css styling and js behavior separate from the rest of the page code.
This enables to keep the DOM and code clean.

The Shadow DOM enables attachment of a hidden DOM structure to a visible page DOM element.

Photo by Daniel Cheung on Unsplash

Key Concepts

Shadow DOM tree structure is just like a regular DOM tree, but hidden.

Shadow host: The visible DOM tree node that connects to the shadow DOM tree.
Shadow tree: The shadow DOM tree.
Shadow boundary: The perimeter that separates the visible DOM from the shadown DOM.
Shadow root: The root node inside the hidden shadow DOM tree.

Illustration

Analogy

The regular DOM is like the minifigure of stormtrooper being tossed up in the air. It's individual pieces like nodes are visible and the tree structure is conspicuous.

The shadow DOM is like the classic action figure style stormtrooper. It's nodes are fused and abstracted and the tree structure is not conspicuous.

Photo by Daniel Cheung on Unsplash

Famous Example

The video element has default browser controls, with various controls abstracted from view using the shadow DOM.

Practical Applications

Encapsulating styles and behavior helps in developing components and component libraries that can be dropped into and used in various applications.

Usage

Shadow DOM can be created in open or closed modes.

// can be manipulated by outer context js
Element.attachShadow({ mode: 'open'});

// or 

// cannot be manipulated by outer context js
Element.attachShadow({ mode: 'closed'});

Shadow DOM nodes can be manipulated using regular DOM APIs.

document.createElement();

Element.setAttribute('class','some-class');

Element.appendChild();

Closure

This fast article is intended to clarify and bolster web technology fundamentals.

References

MDN: Using shadow DOM

HELP your Code Review

Sri-Ni, Thirumalaa Srinivas — Thu, 29 Aug 2019 22:11:06 +0000

Code Reviews are a wonderful opportunity to connect with your team, technology and product.

HELP is acronym for Humor, Energy, Learning, Patience

The Version Control Systems that I have been using in recent years are Github (Microsoft) and Bitbucket (Atlassian).
Creating Pull Requests (PRs) to do Code Review has never been easier using the tools from either of these VCS offerings.

The code review is one those things that are most susceptible to procrastination and de-prioritization.
This can be such a missed opportunity, if one is not aware and awake.
Reviewing code on your next availability helps unblock the feature and the dev team. It should be considered of highest priority.
Setup Agile Dev Process Workflows to help enable this.

This is the place to learn, spend energy, practice patience, express humor and connect with your team.

My PR review process

1. Pull branch.
2. Setup locally and run.
3. Happy path features.
4. Test it out thoroughly.
5. Look at the diff in the PR.
6. Read the code.
7. Walk through the code with a debugger.
8. Keep documenting comments in the PR during steps `3-7`.

Humor

There is enough seriousness to go around in this world.
Using humor tastefully has several advantages.

Humor is Human.

Using self-deprecating humor unites and calms.
Reduces anxiety and lets out steam.
It makes you approachable, kind and human.
People like humor and respond better to you.
Excellent icebreaker to help connect with the person.
Solid way to warm up in the code review.

Practical Tips

Share some honest stream-of-conscious self-deprecating humor.
Use emojis, for sure!
Some witty comments within reason. Nudge don't poke or provoke.

Energy

Thank the developer for they have shared the work, onus, load etc.

Be thankful for the work done.

This is your chance to show your sincerity, inner energy and raw passion for the work that you do.

Show your thoughtfulness, sincerity and energy.

Practical Tips

Put in honest time (timebox/pomodoro).
Use phrases like To the best of my knowledge, given my timebox on this.
Read every single line.
Be genuine in your thoughts and feedback.
Provide background, reasons and ask for thoughts.
Look for solidity and structure.
Learn to let go wherever you can.
Share the work load with some code commits (nudges).

Learning

There is always something new to learn, re-learn and learn with fresh perspectives.

Learning is Forever.

Sharing a relevant quote from one of my favorites.

"There's a little bit of asshole in every nice guy, and there's a little bit of genius in every moron." #RDJ

Practical Tips

Channel humility and admit to ignorance.
Use phrases like What am I missing?.
Keep an eye out for learning something new.
Identify opportunities to set up standards and automate them (lint rules, pre-commit hooks etc).
Find opportunities to apply a new methodology, pattern, service or function.
If you think hard and broad, there is always something to learn.

Patience

No one likes to work with an insensitive person lacking empathy.

No such thing as too much patience.

Unless you are wired chill and bohemian, being patient is a muscle to develop.

Lead with Love.

Practical Tips

Start by placing some good faith.
Use phrases like Can we give it another go-around, What are your thoughts on this?.
Think and care about the person.
Visualize talking to them face-to-face and share thoughts.
Learn, practice and set yourself to genuinely care for this person.
Admitting mistakes during review can never be understated.

Hope ya'll find this mindshare useful.

It helps me flush my thoughts and serves as self-reference.

References

"There's a little bit of asshole in every nice guy, and there's a little bit of genius in every moron." #RDJ

What a Self-Deprecating Sense of Humor Says About Your EQ