Overview

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">

Work Sans

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Space Mono

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Rethink Sans

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">

Manrope

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">

Bricolage Grotesque

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

Jost

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

DM Sans

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

Inter Tight

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Golang

Articles

Shaving 40% Off Google’s B-Tree Implementation with Go Generics

Command Line Application

fzf - 🌸 A command-line fuzzy finder
gron - Make JSON greppable!

Gorm

The fantastic ORM library for Golang

Add module to project :

go get -u gorm.io/gorm

Connect to mysql db :

Add mysql driver for gorm.

go get -u gorm.io/driver/mysql

Connect db.

import (
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
)

type Product struct {
  gorm.Model
  Code  string
  Price uint
}

func New() (*gorm.DB, error) {
    dsn := "root@tcp(127.0.0.1:3306)/db_name?charset=utf8mb4&parseTime=True&loc=Local"
    db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
    return db, err
}

Insert data:

db.Create(&Product{Code: "D42", Price: 100})

Retrieve data:

// Read one data
var product Product
db.First(&product, 1) // find product with integer primary key
db.First(&product, "code = ?", "D42") // find product with code D42

var result []entity.Product
err := f.db.Table("product").
    Order("id desc").
    Find(&result).Error

Update data:

// Update - update product's price to 200
db.Model(&product).Update("Price", 200)
// Update - update multiple fields
db.Model(&product).Updates(Product{Price: 200, Code: "F42"}) // non-zero fields
db.Model(&product).Updates(map[string]interface{}{"Price": 200, "Code": "F42"})

Delete data:

// Delete - delete product
db.Delete(&product, 1)

Git

Git cheatsheets.

Semantic Commit Messages

Format: <type>(<scope>): <subject>

<scope> is optional

Example

feat: add hat wobble
^--^  ^------------^
|     |
|     +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.

More <type> :

feat: (new feature for the user, not a new feature for build script)
fix: (bug fix for the user, not a fix to a build script)
docs: (changes to the documentation)
style: (formatting, missing semi colons, etc; no production code change)
refactor: (refactoring production code, eg. renaming a variable)
test: (adding missing tests, refactoring tests; no production code change)
chore: (updating grunt tasks etc; no production code change)

References:

https://www.conventionalcommits.org/
https://seesparkbox.com/foundry/semantic_commit_messages
http://karma-runner.github.io/1.0/dev/git-commit-msg.html

Git Conf

Turn this warning off The file will have its original line endings in your working directory

git config core.autocrlf true

git sync local repository with remote

git fetch --prune

update commit author

git commit --amend --author="Author Name <some@mail.com>" --no-edit

# or in short
git commit --amend --reset-author

Update with upstream

# Add the remote, call it "upstream":

git remote add upstream https://github.c*.git

# Fetch all the branches of that remote into remote-tracking branches

git fetch upstream

# Make sure that you're on your master branch:

git checkout master

# Rewrite your master branch so that any commits of yours that
# aren't already in upstream/master are replayed on top of that
# other branch:

git rebase upstream/master

Icons

Interviews

Interview Questions

Docker Interview Question

Javascript

Javascript is my secondary programming language, I use javascript when working on frontend related things.

Opensource Project

Interesting open source project.

Full Stack

Outline - The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatible.

Library/Framework

Lexical - Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

Javascript Playgound

RunJS - The JavaScript playground for your desktop
JSConsole - Javascript console on the web

Microservices

What is Message Broker? Message broker is application with the goal to distribute a data to other services. When we use Message Broker we need to change the paradigm of developing the application from synchronous to asyncronous, it mean we send the data to some service and we forget about it. One of the use case of for this is, when you need to sending email and notification.

Kafka

The reason to use kafka?

You need scalability.
Kafka can handle 3 Million writes per second in 3 machine. By default kafka need to be deployed at minimum 3 machines.
Kafka can be easily to scaled horizontally, we can just join the new node kafka to the cluster we already have.
Kafka maximum data is 1MB. Don't send too big message to kafka.
Add new partition when you want to scale the consumer, but when you need to carefull adding new partition is not easy and it take times. The partion in kafka only can be consumed at maximum the max partition. So if the partition is 3 it can not consumed by 4 consumer.
Squential guarated, but when it stuck at some point of the data the other data can not be consumed until the current issue is resolved. It also just work for on the same partition.
Persistent, Kafka store all the data in a log file. So we don't have a lose data when it already consumed. So we can re read the log at the custom offset.
Retention, expiration of the data can be configured by 2 ways, first by the time and the second by file size.
Rebalance, when we scale the consumer, kafka can rebalance the traffic from each partition to the new consumer.
Offset, offest will be attached to the consumer, so how we can know the which offest that have been consumed? When consumer already consumed the message they will send commit message event to the partition. There are several way to commit the message, we can commit by range time for example after 10 second, or by each message consumed we send the commit for it.
Consumer group, we can consume the message by group of consumer and then the commit message will be set by the consumer group.

Kafka vs RabbitMQ

Kafka and RabbitMQ is the same platform, it was for doing message broker. Most of the time Kafka is the most prefered platform for doing Message broker but you need to consider.

Kafka

When you install kafka you need at minimum 3 server to deploy one cluster of Kafka.
Kafka can handle high throughput, 2 million write in a second.
Available client library for Kafka

RabbitMQ

Can be deployed just with one server, but better at minimum 2 server.
The throughput is a half of the Kafka(605MB/s) and RabbitMQ(38MB/s).
Available RabbitMQ client library.

Service Discovery

What is service discovery?

Service discovery is a process that enables dynamic configuration of applications and services. It allows applications and services to be automatically discovered and configured without manual intervention. Service discovery enables services to be located, identified, and authenticated in distributed systems, allowing for automated configuration of applications and services. Service discovery also simplifies the process of managing the availability and scalability of services in a distributed environment.

What is service registry?

Service registry is a type of registry that stores information about services running on a network. It is used to discover and connect to these services, as well as provide information about the services such as their availability and capabilities. Service registries are typically used in distributed systems and microservices architectures.

My Music Playlist

YouTube

MySQL

MySQL is an open-source relational database management system. Its name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language.

Data Definition Language (DDL)

Data Definition Language (DDL) SQL is a language used to define the structure of a relational database, including creating, modifying, and deleting tables, views, indexes, and other database objects. It can also be used to define the relationships between these objects. DDL SQL is part of the Structured Query Language (SQL) that is used to manage data in a relational database management system (RDBMS).

The MySQL command-line tool.

More information: https://www.mysql.com/.

# Connect to a database:
mysql database_name

# Connect to a database, user will be prompted for a password:
mysql -u user --password database_name

# Connect to a database on another host
mysql -h database_host database_name

# Connect to a database through a Unix socket
mysql --socket pasocket.sock

# Execute SQL statements in a script file (batch file)
mysql -e "source filename.sql" database_name

# Restore a database from a backup created with mysqldump (user will be prompted for a password)
mysql --user user --password database_name < pabackup.sql

# Restore all databases from a backup (user will be prompted for a password)
mysql --user user --password < pabackup.sql

Cheatsheets

Quick cheatsheat for doing mysql query for CRUD operation.

Create Database

CREATE DATABASE db_name;

List all databases

SHOW DATABASES;

Select Database

You need to select data base before you working on the data manipulation.

use db_name;

List all tables

SHOW TABLES;

Create Table

CREATE TABLE users (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    first_name VARCHAR(30) NOT NULL,
    last_name VARCHAR(30) NOT NULL,
    email VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Foreign key

Create table with foreign key

CREATE TABLE IF NOT EXISTS forum(
	id BIGINT NOT NULL PRIMARY KEY AUTO_INCREMENT,
	created_by BIGINT NOT NULL,
	updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
	FOREIGN KEY (created_by) REFERENCES users(id)
);

Update table add foreign key

ALTER TABLE forum ADD FOREIGN KEY(created_by) REFERENCES users(id);

Delete foreign key

ALTER TABLE forum DROP FOREIGN KEY forum_ibfk_1;

To get foreign key.

SHOW CREATE TABLE forum;

Show create table query

SHOW CREATE TABLE users;

Edit table

Add column.

ALTER TABLE users ADD COLUMN verified boolean;

Delete column.

ALTER TABLE users DROP COLUMN verified;

Add primary key.

ALTER TABLE users ADD PRIMARY KEY (email);

Insert

INSERT INTO users(first_name, last_name, email) 
VALUES ("Ahmad","Rosid","sample@mail.com"), ("Duman","Doe","test@mail.com");

Update

UPDATE users SET email="test@mail.com" WHERE id = 1;

Delete

Delete row in table.

DELETE FROM users WHERE id = 1;

Delete table.

DROP TABLE users;

Delete database.

DROP DATABASE db_name;

Query Select Data

Get all data.

SELECT * FROM users;

Get data by id.

SELECT * FROM users WHERE id=1;

Get data by multiple id.

SELECT * FROM users WHERE id in(1,2);

Select unique row.

SELECT DISTINCT email from users;

Count unique field.

SELECT COUNT(DISTINCT email) as unique_email from users;

PHP

Blog

Design Pattern PHP

Security

Tools:

Laravel Secutiry Checklist

Cross-Site Scripting (XSS)
SQL Injection (SQLi)
Cross-Site Request Forgery (CSRF)
Insecure Direct Object References (IDOR)
Type Juggling
Credential Stuffing
PHP Object Injection
Remote Code Execution (RCE)
Server-Side Request Forgery (SSRF)
Privilege Escalation

Resources

Laravelnews - The Laravel Security Checklist

Shell Script

asdf - Extendable version manager with support for Ruby, Node.js, Elixir, Erlang & more

Open sublime text from terminal in MacOS

Create binary symlink using this comamnd.

sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Rust

My Project

List of project I Created using rust. Most of this project I Created is because I don't know and I can not find the tool that I need.

hl - Github-like html Syntax highlighting.
tpd - Typo Detector for English words.
json-list - Take json list turn to striing list.
npr - Find and execute npm script.
faker-cli - Generate fake data from your terminal.
rep-cli - Replace text file in Bulk.

CLI - Command Line Application

Collection of comman line app written in Rust that I use.

bore - bore is a simple CLI tool for making tunnels to localhost
ripgrep - ripgrep recursively searches directories for a regex pattern while respecting your gitignore
bat - A cat(1) clone with wings.
nushell - A new type of shell.
Helix - A post-modern modal text editor.

GUI - Desktop application

Collection of dekstop app written in Rust.

Warp - The terminal for the 21st century.

People on Stackoverflow

shepmaster

Tailwindcss

I love using tailwindcss to styling the web.

Plugins

https://github.com/reslear/tailwind-scrollbar-hide
https://github.com/tailwindlabs/tailwindcss-typography
https://github.com/jorenvanhee/tailwindcss-debug-screens
https://github.com/aniftyco/awesome-tailwindcss

Color / Theme

A list of tailwind css tools for colors:

http://uicolors.app/create
http://tints.dev
http://javisperez.github.io/tailwindcolorshades/
https://adevade.github.io/color-scheme-generator/
http://colors.meidev.co
https://stefanbuck.com/tailwind-color-theme-explorer
https://tailwind.ink
https://gradient-designer.csspost.com
https://grayscale.design
https://hypercolor.dev
https://palettolithic.com

VIM

Vim is my second text editor.

Editing with VIM

Change word: c+w
Delete to endline: shift+c
Change content inside: c+i+(char prefix)
Insert up: shift+o
Insert bottomw: o
Navigate word right: w
Navigate work left: b
Navigate on block code: { or }
Select current line: shift + v
Move key to relative line number
- Up 4: 4 + k
- Down 4: 4 + j
Delete to relative line number
- Delete Up 4: d + 4 + k
- Delete Down 4: d + 4 + j

Wiki - Ahmad Rosid