DEV Community: Rubin

🌿 The Tools That Make My Developer Life Easier

Rubin — Sat, 22 Nov 2025 14:53:06 +0000

Every developer has their little rituals — the way they arrange their windows, the shortcuts they swear by, the terminal theme that somehow makes debugging less painful. For me, those habits live inside my dotfiles.

Over time, they’ve become more than just configs. They’re like a memory of how I prefer to work. And whenever I set up a new machine, applying my dotfiles feels like unpacking my own desk: suddenly everything is familiar again.

So here’s a human-friendly walkthrough of the things I actually use from my dotfiles repo:
https://github.com/rubiin/dotfiles

🛠️ Chezmoi: My quiet helper

Before I used chezmoi, setting up my environment after a fresh install felt like trying to remember a dream — “What alias did I use again? Where did that plugin live?”

Now I just run:


chezmoi init rubiin --apply

And in a few minutes, my system feels like mine again.

Chezmoi quietly handles:

putting files where they belong
keeping secrets private
letting me customize things per machine

It’s one of those tools you barely notice once it’s in place — which is exactly the point.

🐚 Zsh: My shell, but friendlier

I spend a lot of time in the terminal, so I want it to feel welcoming — like a workspace, not a punishment.

In my dotfiles, zsh is tuned with just the right amount of comfort:

Autosuggestions that complete my half-remembered commands
Syntax highlighting that catches typos before I hit enter
Powerlevel10k prompt that shows useful info without feeling noisy
Sheldon to manage shell plugins smoothly

The goal isn’t to make the terminal flashy — just pleasant enough that I don’t dread spending hours in it.

💻 WezTerm: A terminal I actually enjoy looking at

Wezterm is the best mix I’ve found of speed, simplicity, and polish. It renders fonts beautifully and makes everything feel… smooth.

I use:

MonoLisa because it’s crisp and calm
Nerd Fonts for icons (because I like pretty directories, okay)

The result: every time I open a new window, I get this tiny hit of “ah, nice.”

📘 Browsing & Research

Zen Browser — Focused, Clean, Minimal

A Firefox-based browser that removes noise, adds smart features, and feels incredibly polished. It’s now my default for coding, documentation, and deep work.

📝 Neovim: The room where I spend my day

I’ve probably spent more time tweaking Neovim than any other tool I use — and I regret none of it.

My config is built around a few ideas:

don’t fight the editor
be able to find anything in seconds
keep plugins that genuinely help, not just for vibes

So I have Treesitter for highlighting, Telescope for jumping around, LSP for coding, and themes like Catppuccin that make writing code feel cozy.

Neovim is where ideas turn into code, so I try to make it a place I enjoy being in.

🧱 Tmux: For when one window is never enough

I use tmux like someone who always has too many thoughts open at once:

Left pane: server
Right pane: logs
Bottom pane: quick commands
Detached sessions: abandoned experiments I might return to (or not)

My tmux config doesn’t do anything magical — it just makes switching, splitting, and resuming sessions painless. And honestly, painless is all I need.

🪟 Hyprland: My desktop, flowing instead of fighting

I like a lightweight, keyboard-first environment. Hyperland gives me that, plus beautiful animations that don’t get in the way.

With:

Rofi to launch things

Tsumiki for a clean status bar

The whole setup feels peaceful — minimal but intentional.

This part of my dotfiles is less about productivity and more about creating a space that feels uncluttered.

🔧 Little CLI tools that make a big difference

Some of my favorite tools are also the simplest:

bat: syntax-highlighted cat

eza: a nicer ls

fzf: fuzzy-find basically anything

ripgrep: the search tool I can’t live without

btop: my go-to system monitor

atuin: my command history without the amnesia

mise: manages dev tools like node, python, cmake, terraform, and hundreds more.

topgrade: upgrade all the things

These aren’t flashy, but they add up to smoother, calmer days.

⚙️ Automation Scripts

My dotfiles include scripts that automate setup and daily workflows:

Useful Scripts

base-install.sh
Installs essentials on a new system.
run_onchange_chores.sh
Helper script for running tasks when files change.
system maintenance scripts
Updates, cleanup, backups, symlink checks, etc.

These small automations save me hours every year.

🧠 Philosophy Behind My Dotfiles

After years of iteration, here are the core principles guiding my setup:

🎯 Modularity

Every tool has its own folder and config.

🔄 Reproducibility

Any machine can become “my machine” in minutes.

🛡️ Security

Secrets are encrypted or excluded.

📦 Minimal yet Powerful

If it doesn’t directly boost productivity, it’s out.

🧹 Maintainability

I prefer fewer plugins, fewer scripts, fewer hacks — just enough to stay efficient.

Final Thoughts: Why This Matters

My dotfiles aren’t just configuration files —
they’re years of habits, preferences, and workflow optimizations encoded into reproducible form.

When everything works the moment I start a fresh system, it feels like magic.

If you’re interested in building your own dotfiles, or borrowing parts of mine, feel free to explore:
👉 https://github.com/rubiin/dotfiles

REPL in Nestjs

Rubin — Sun, 14 Jul 2024 15:39:27 +0000

One of the features of Nestjs is Tte REPL (Read-Eval-Print Loop) mode, a powerful tool that allows you to interactively test and execute code within the context of your NestJS application. This is particularly useful for quick experimentation, testing services, or debugging from the terminal. Here’s a step-by-step guide on how to use the REPL mode in NestJS:

create a new file repl.ts

import { existsSync, mkdirSync } from "node:fs";
import { join } from "node:path";

import { Logger } from "@nestjs/common";
import { repl } from "@nestjs/core";

import { AppModule } from "./app.module";

const logger = new Logger("Repl");

async function bootstrap() {
  const replServer = await repl(AppModule);

  // OPTIONAL: sets up persistant history file for repl, 
  const cacheDirectory = join("node_modules", ".cache");

  if (!existsSync(cacheDirectory))
    mkdirSync(cacheDirectory);

  replServer.setupHistory(
    join(cacheDirectory, ".nestjs_repl_history"),
    (error) => {
      if (error)
        logger.error(error);
    },
  );
}
bootstrap();

Then you can run the app in repl mode with :

npm run start -- --entryFile repl

Even better, add a script on your package.json

"start:repl":"npm run start -- --entryFile repl"

It will initiate an interactive server, from which you can easily access your nest app methods by getting them either as

get(AppService).getAllPosts()

$(AppService).getAllPosts()

You can also navigate with the command history with ↕️ arrow keys

Linux Commands You Should Master

Rubin — Sat, 13 Jul 2024 17:15:20 +0000

Linux commands form the backbone of navigating and managing a Linux system efficiently through the terminal. Whether you're a beginner or an experienced user, mastering these commands will greatly enhance your productivity and control over your system. In this article, here are the top Linux commands that every user should master for effective terminal usage

Navigation and File Management

cd: Change directory

  cd directory_name

ls: List directory contents

ls options directory_path

pwd: Print working directory

pwd

cp: Copy files and directories

cp source_file destination_file

mv: Move (rename) files and directories

mv source destination

rm: Remove files and directories

rm file_name

mkdir: Make directories

mkdir directory_name

rmdir: Remove empty directories

rmdir directory_name

cat: Concatenate and display files

cat file_name

less/more: View file contents interactively (one screen at a time)

less file_name
more file_name

head/tail: View the beginning or end of a file

head file_name
tail file_name

grep: Search for patterns in files

grep pattern file_name

find: Search for files in a directory hierarchy

find directory_path options

ln: Create links between files

ln -s target_file link_name

chmod: Change file permissions

chmod permissions file_name

chown: Change file owner and group

chown owner:group file_name

Process Management

ps: Display information about active processes

ps

kill: Terminate processes

kill process_id

top/htop: Display system processes in real-time

top
htop

System Information

df: Display disk space usage

df options

du: Estimate file space usage

du options file_name

free: Display amount of free and used memory in the system

free

uname: Print system information

uname -a

uptime: Show how long the system has been running

uptime

Network Management

ping: Check the connectivity to a server or network device

ping hostname_or_ip

ifconfig/ip: Display and configure network interfaces

ip addr show

netstat: Print network connections, routing tables, interface statistics, etc.

netstat options

wget/curl: Download files from the internet

wget URL
curl -O URL

System Administration

sudo: Execute a command as the superuser (root)

sudo command

shutdown/reboot: Shutdown or reboot the system

shutdown options
reboot

service/systemctl: Control system services (systemd-based systems)

systemctl start|stop|restart service_name

journalctl: Query and display system logs

journalctl options

passwd: Change user password

passwd

Text Processing

awk: A versatile programming language for pattern scanning and processing

awk 'pattern { action }' file

sed: Stream editor for filtering and transforming text

sed 's/search/replace/g' file

cut: Remove sections from each line of files

cut options file

sort: Sort lines of text files

sort options file

uniq: Report or omit repeated lines

uniq options file

wc: Print newline, word, and byte counts for each file

wc options file

Compression and Archiving

tar: Archive files and directories

tar options archive_name files

gzip/gunzip: Compress or decompress files

gzip file
gunzip file.gz

bzip2/bunzip2: Another compression utility

bzip2 file
bunzip2 file.bz2

Miscellaneous

echo: Display a line of text or variables

echo "Hello, world!"

date: Display or set the system date and time

date

watch: Execute a program periodically, showing output fullscreen

watch command

alias: Create an alias for a command

alias short_name='command sequence'

history: Display command history

history

whoami: Display the current username

whoami

touch: Change file timestamps or create empty files

touch file_name

scp/rsync: Securely copy files between hosts

scp file user@host:destination
rsync options source destination

Mastering these Linux commands will empower you to efficiently manage files, processes, networks, and more directly from the terminal. Whether you're a system administrator, developer, or Linux enthusiast, these commands are indispensable tools for your daily workflow.

Happy Linux command-line hacking!

Top Obsidian Plugins to Supercharge Your Note-Taking Experience

Rubin — Fri, 05 Jul 2024 08:45:13 +0000

Obsidian is a powerful and flexible note-taking application that has gained a loyal following among productivity enthusiasts, researchers, and writers. One of the key features that makes Obsidian so versatile is its plugin ecosystem. With a wide array of plugins available, users can customize and enhance their Obsidian experience to suit their specific needs. In this article, we'll explore some of the most popular and useful Obsidian plugins that has made using obsidian an absolute fun for me

1. Calendar

The "Calendar" plugin is an essential tool for anyone looking to keep track of their daily notes and activities. It integrates seamlessly with Obsidian, providing a visual representation of your notes by date. This makes it easy to navigate through your past notes and plan future entries. Whether you're journaling, tracking habits, or organizing your research, the Calendar plugin is a must-have.

2. Obsidian Excalidraw Plugin

For those who need to create diagrams, flowcharts, or any form of visual content, the "Obsidian Excalidraw Plugin" is a game-changer. Excalidraw is a virtual whiteboard tool that allows you to create hand-drawn-like sketches directly within Obsidian. This plugin is perfect for brainstorming, mind mapping, or adding visual explanations to your notes.

3. Obsidian Git

Version control is crucial for anyone working on extensive projects or collaborative writing. The "Obsidian Git" plugin brings the power of Git to your Obsidian vault. It allows you to commit changes, push and pull from remote repositories, and keep track of your note revisions. This ensures that you never lose important information and can easily collaborate with others.

6. Obsidian Mind Map

The "Obsidian Mind Map" plugin allows you to visualize your notes as mind maps. This is incredibly useful for organizing thoughts, planning projects, or studying complex topics. With this plugin, you can convert your Markdown notes into interactive mind maps, helping you see the connections between different pieces of information more clearly.

7. Commander

"Commander" is a command palette plugin that enhances your workflow by providing quick access to Obsidian commands. By pressing a customizable hotkey, you can bring up the command palette and execute any command without taking your hands off the keyboard. This plugin is perfect for power users who want to streamline their note-taking process.

8. Share Note

Sharing notes with others is made easy with the "Share Note" plugin. This plugin allows you to quickly generate shareable links to your notes, which can be viewed in a web browser. It's perfect for collaborating with colleagues, sharing research findings, or simply making your notes accessible to others without needing them to have Obsidian installed.

9. Obsidian Plugin Update Tracker

Keeping your plugins up to date is essential for maintaining a smooth and secure Obsidian experience. The "Obsidian Plugin Update Tracker" helps you manage and update your installed plugins. It notifies you when updates are available and allows you to update all plugins with a single click, ensuring you always have the latest features and bug fixes.

10. Better Word Count

Writers and researchers who need to keep track of their word count will find the "Better Word Count" plugin invaluable. This plugin provides a detailed word count for your notes, including counts for individual headings and sections. It's perfect for anyone working on word-sensitive projects, such as essays, articles, or books.

11. Recent Files Obsidian

Navigating through your vault is made easier with the "Recent Files Obsidian" plugin. It keeps track of your recently opened files and provides quick access to them. This is especially useful for large vaults with many notes, allowing you to quickly resume your work without searching through folders.

12. Iconize

The "Obsidian Iconize" plugin adds a visual touch to your Obsidian vault by allowing you to assign custom icons to your folders. This makes it easier to visually differentiate between different types of notes or projects. It's a simple yet effective way to enhance the organization and aesthetics of your vault.

13. Obsidian Tasks Plugin

Managing tasks and to-do lists within Obsidian is a breeze with the "Obsidian Tasks Plugin." This plugin allows you to create and manage tasks directly within your notes. You can set due dates, priorities, and even track the completion status of your tasks. It's a powerful tool for integrating task management into your note-taking workflow.

Conclusion

Obsidian's plugin ecosystem offers a wealth of tools to enhance your note-taking and organization capabilities. Whether you need to keep track of your notes with a calendar, create visual content, manage version control, highlight code, visualize your thoughts, streamline your workflow, share notes, keep plugins updated, count words, access recent files, add custom icons, or manage tasks, there's a plugin for you. By leveraging these plugins, you can tailor Obsidian to fit your specific needs and maximize your productivity.

Useful aliases for docker

Rubin — Sun, 30 Jun 2024 17:20:11 +0000

Docker has been there for a long time and its my top most used tool whether for spinning up a web server or trying out a new tool.
If you are like me and use docker on your day to day dev workflow, these aliases would help you save few keystrokes for common use cases and save your time.
You can set up in your shell configuration file (like .bashrc, .zshrc, etc.):

Get latest container ID

alias dl="docker ps -l -q"

Get container process

alias dps="docker ps"

Get process included stop container

alias dpa="docker ps -a"

Get images

alias di="docker images"

Get container IP

alias dip="docker inspect --format '{{ .NetworkSettings.IPAddress }}'"

Run daemonized container, e.g., $dkd base /bin/echo hello

alias dkd="docker run -d -P"

Run interactive container, e.g., $dki base /bin/bash

alias dki="docker run -i -t -P"

Execute interactive container, e.g., $dex base /bin/bash

alias dex="docker exec -i -t"

Stop all containers

alias dstop='docker stop $(docker ps -a -q)'

Remove all containers

alias drm='docker rm $(docker ps -a -q)'

Stop and Remove all containers

alias drmf='docker stop $(docker ps -a -q) && docker rm $(docker ps -a -q)'

Remove all images

alias dri='docker rmi $(docker images -q)'

Dockerfile build, e.g., $dbu tcnksm/test

alias dbu='docker build -t=$1 .'

Show all alias related docker

dalias() { alias | grep 'docker' | sed "s/^\([^=]*\)=\(.*\)/\1 => \2/" | sed "s/['|\']//g" | sort; }

Bash into running container

alias dbash='docker exec -it $(docker ps -aqf "name=$1") bash'

Terminal 101 - Xargs

Rubin — Wed, 15 May 2024 07:31:23 +0000

xargs is a command in Unix and Unix-like operating systems used to build and execute commands from standard input. It's particularly handy when you want to pass the output of one command as arguments to another command. Here are a few common use cases with examples:

Deleting multiple files:

find . -name "*.txt" | xargs rm

This command finds all files with a .txt extension in the current directory and its subdirectories, then passes them to xargs, which in turn executes rm (remove) command on each file.

Creating backups:

find /path/to/files -type f -print | xargs -I {} cp {} /path/to/backup

This command finds all files in /path/to/files, then uses xargs to copy each file to /path/to/backup.

Running commands in parallel:

cat list_of_urls.txt | xargs -P 5 -n 1 wget -q

This command reads a list of URLs from list_of_urls.txt, then uses xargs with -P option to run wget with up to 5 parallel processes, downloading each URL.

Searching for files containing specific text:

grep -rl "search_term" /path/to/search | xargs sed -i 's/search_term/replace_term/g'

This command finds all files in /path/to/search containing "search_term", then uses xargs to pass each file to sed, replacing "search_term" with "replace_term".

A Comprehensive Guide to Creative Resources for UI development

Rubin — Fri, 22 Dec 2023 10:15:29 +0000

In the fast-paced and dynamic world of design, staying inspired and equipped with the right tools is crucial for producing captivating and innovative work. Whether you're a seasoned designer or just starting, having access to a diverse range of resources can make a significant difference in your creative process. In this blog post, we'll explore a plethora of websites that cover everything from color palettes and photos to icons and fonts, providing you with a one-stop destination for all your design needs.

Color Inspiration Sites:

Photo Sites:

Photo Sites Without Background:

Video Sites:

Inspiration Sites:

Logo Inspiration Sites:

User Experience Inspiration Sites and Apps:

Sites for Downloading MOOCs:

NFDL - a simple cli to download nerd fonts

Rubin — Sat, 09 Dec 2023 13:26:28 +0000

Simplify Your Terminal Experience with the Nerd Fonts Downloader

As developers and terminal enthusiasts, having a personalized and visually appealing command line environment is crucial. One way to enhance the aesthetics and functionality of your terminal is by using Nerd Fonts. These fonts come with a collection of patched symbols and icons that can make your terminal experience not only more stylish but also more informative.

In this blog post, we introduce the Nerd Fonts Downloader, a convenient cli designed to streamline the process of downloading and installing popular Nerd Fonts. Let's dive into how this script can simplify the customization of your terminal.

What are Nerd Fonts?

Nerd Fonts are patched fonts that include additional icons and glyphs, making them ideal for developers who want to improve the visual representation of their terminal applications. With a wide selection of fonts to choose from, each catering to different preferences and coding styles, Nerd Fonts have become a popular choice for those seeking a more personalized terminal experience.

Introducing the Nerd Fonts Downloader

The Nerd Fonts Downloader is a simple yet powerful cli that automates the process of downloading and installing Nerd Fonts. Here are some key features of the script:

Font Selection

The cli presents a curated list of popular Nerd Fonts during the installation process. This makes it easy for users to choose the fonts that best suit their preferences and requirements.

Automatic Download

Utilizing the cli automatically fetches the selected fonts from the official Nerd Fonts releases. This means no manual downloading or navigating through GitHub repositories—just a seamless installation experience.

Bulk Download

A standout feature of the Nerd Fonts Downloader is the ability to perform bulk downloads. This is especially useful for users who want to install multiple Nerd Fonts at once, saving time and effort.

Easy Installation

The user-friendly interface of the cli ensures a straightforward installation process. With a few simple steps, users can have their chosen Nerd Fonts integrated into their terminal environment.

Getting Started

Getting started with the Nerd Fonts Downloader is a breeze. Here's a quick guide:

Prerequisites

Before running the script, ensure that you have the following prerequisites installed on your system:

Nodejs

Installation

Install the cli to your local machine:
```
npm i -g nfdl
```
Run the cli:
```
nfdl
```
Select your desired Nerd Fonts from the menu and let the cli handle the rest!

Contributing

Contributions to the project are welcome! Whether you have ideas for improvements or want to report issues, your input is valuable. Feel free to open issues or submit pull requests on the GitHub repository.

Conclusion

Customizing your terminal with Nerd Fonts doesn't have to be a tedious process. The Nerd Fonts Downloader simplifies the installation, allowing you to focus on what matters—coding and a personalized terminal experience.

GitHub Repository: Nerd Fonts Downloader

Happy coding!

Python for nodejs developers

Rubin — Tue, 22 Aug 2023 08:52:55 +0000

A cheatsheet on python and nodejs equivalents for developers who use both or are planning a switch from one to another.
This covers the basics

Topic	Node.js (JavaScript)	Python
Boolean	true, false	True, False
Number	Numbers (integers, floats)	Numbers (int, float, complex)
String	'Single' and "Double" quotes	'Single' and "Double" quotes
Array	Array literals, array methods	List type, list methods
Object	{} Object literals	Dictionary type
Function	function keyword, arrow functions	def keyword, lambda functions
Type Check	typeof operator	isinstance() function
Interpolation	`${variable}` syntax	f-strings (f"{variable}")
If/Else	if (condition) {} else {}	if condition: ... else: ...
Ternary	condition ? true : false	true_value if condition else false_value
For Loop	for (init; condition; iteration) {}	for variable in iterable: ...
While Loop	while (condition) {}	while condition: ...
Switch	switch (expression) { case x: ... }	switch case x: ...
Array Slicing	array.slice(start, end)	list[start:end]
Copying Array	[...array], array.slice()	list.copy()
Appending	array.push(element)	list.append(element)
Prepending	array.unshift(element)	list.insert(0, element)
Uint8 Arrays	Binary data handling, streams	Used for similar purposes
Array Iteration	forEach, for...of loop	for item in list: ...
Looping	for...in loop	for key in dictionary: ...
Mapping	array.map(callback)	map() function
Filtering	array.filter(callback)	filter() function
Reducing	array.reduce(callback)	reduce() function
Sorting	array.sort(callback)	sorted() function
Buffers	Binary data handling, streams	Used for similar purposes
Allocate Buffer	Buffer.alloc(size)	bytearray(size)
Endianness	Native support	Struct module for explicit endianness
Hex	.toString(16) conversion	hex() function
Compare	.equals() method	== or cmp() functions
Equals	Buffer.equals()	Direct equality check with ==
Maps	Key-value pairs handling	Used for similar purposes
Map Iteration	map.forEach, for...of loop	for key, value in map.items(): ...
Objects	JavaScript objects, key-value pairs	Python dictionaries
Default Values	Default function parameters	Default function arguments
Destructuring	Destructuring assignment syntax	Destructuring assignment syntax
Spread Operator	Spread array elements	Spread iterable elements
Rest Operator	Collect function arguments	Collect function arguments
Swapping	[a, b] = [b, a]	a, b = b, a
Classes	ES6 class syntax	class keyword
Constructors	constructor() method	init() method
Instantiation	new ClassName()	ClassName()
"this"	Refers to current object	Refers to instance within class
Files	fs module for file operations	Built-in file functions
Creating Files	fs.writeFileSync(path, data)	open(path, mode)
Opening Files	fs.openSync(path, mode)	open(path, mode)
Writing to Files	fs.writeFileSync(path, data)	write() method
Reading from Files	fs.readFileSync(path, encoding)	read() method
Closing Files	Automatically closed after operations	close() method
Deleting Files	fs.unlinkSync(path)	remove() method
File Descriptors	Not commonly used	Utilized for low-level I/O operations
JSON	Built-in JSON object	Built-in json module
Parsing JSON	JSON.parse(jsonString)	json.loads(jsonString)
Stringifying JSON	JSON.stringify(jsonObject)	json.dumps(jsonObject)
Asynchronous Programming	Utilizes `async/await` syntax	Utilizes `async/await` syntax
Errors	Utilizes built-in Error object	Utilizes built-in Exception classes
Try/Catch	try { ... } catch (error) { ... }	try: ... except Exception as error: ...
Exceptions	throw new Error('Message')	raise Exception('Message')
Regular Expressions	Utilizes built-in RegExp object	Utilizes built-in re module
Matching	regexObj.test(string) or string.match(regex)	re.match(regex, string)
Searching	string.search(regex)	re.search(regex, string)
Replacing	string.replace(regex, replacement)	re.sub(regex, replacement, string)
Splitting	string.split(regex)	re.split(regex, string)
Extracting Groups	Capturing groups using parentheses	Capturing groups using parentheses

sass mixins that are way too good

Rubin — Wed, 07 Jun 2023 17:21:22 +0000

All sass font weights:

$font-weights: ("thin":100,"extrlight":200,"light": 300,"regular": 400, "medium": 500,"semibold":600, "bold": 700,"extrabold":800,"black":900);

Usage:

.selector{
font-weight: map-get($font-weights, thin);
}

Add CSS vendor prefix:

@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

Usage:

.selector {
  @include prefix((
    column-count: 3,
    column-gap: 1.5em,
    column-rule: 2px solid hotpink
  ), webkit moz);
}

Breakpoints

$bp: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1440px
);

@mixin query($display) {
  @each $key, $value in $bp {
    //  defining min-width
    @if ($display == $key) {
      @media (min-width: $value) {
        @content;
      }
    }
  }
}

Usage:

.selector{
  display: flex;
  @include query(mobile) {
    flex-direction: column;

    // you can pick any value you wish.
    height: 500px;
  }
}

Typescript notes

Rubin — Sat, 07 May 2022 14:26:23 +0000

unknown type functions like any but does not allow the data method to be called Typescript would throw a compile time error as we are using string function without type assertion. To fix it, the correct code would look like

 function readAny(val: unknown){

    if( typeof val === 'string')
     return val.trim();
}

to check null/undefined use, == eg.

if(value == null) // check for both null and undefined

intersection types (&) behaves like inheritance in classes meaning the attributes of one type is inherited by another type without causing duplication
example:

type Point2d = {
  x: number;
  y:number;
}

type Point3d = Point2d & {
  z:number;
}

const p1: Point2d = {x: 1, y:2}
const p2: Point3d = {x: 1, y:2, z: 9}

point 3D has all the members of point 2D plus member z. All members in intersection types are required. Not passing "z" on Point3D type will cause error

Union type is defined by pipe operator "|". It means the type can either be the single types or their combination. All property of combination are optional

interface A {
  a1: string,
  a2: string,
}

interface B {
  b1: string,
  b2: string;
}

type UnionAB = A | B;


const unionAB1: UnionAB = {
  a1: 'xxx',
  a2: 'xxx',
  b1: 'xxx',
  b2: 'xxx',
};

const unionAB2: UnionAB = {
  a1: 'xxx',
  a2: 'xxx',
};

const unionAB3: UnionAB = {
  b1: 'xxx',
  b2: 'xxx',
};

// Error
// Property 'a1' does not exist on type 'B'.
console.log(unionAB3.a1);

const unionAB4: UnionAB = {
  a1: 'xxx',
  a2: 'xxx',
  b2: 'xxx',
};

// Error
// Property 'b1' does not exist on type 'UnionAB'.
// Property 'b1' does not exist on type 'A'.
console.log(unionAB4.b1);


// Error
// Type '{ a1: string; b2: string; }' is not assignable to type 'UnionAB'.
// Property 'b1' is missing in type '{ a1: string; b2: string; }' but required in type 'B'.
const unionAB5: UnionAB = {
  a1: 'xxx',
  b2: 'xxx',
};

optional variables in a type are annotated with "?" . This means the values may or may not be passed. works on class variables as well example:

type PointXd = {
  x: number;
  y:number;
  z?:number;
}

const p1: PointXd = {x: 1, y:2}
const p2: PointXd = {x: 1, y:2, z: 5}

console.log(p1)
console.log(p2)

Literal Types - This feature permits you to create a set of relationship values.

type Direction = "North" | "South" | "East" | "West";

Literal types in this case create also a Type Guard of your field, so the compiler can detect your errors or your typos

let directionError: Direction = "east" // Type '"east"' is not assignable to type 'Direction'
let direction: Direction = "East" // OK

keyof operator helps us to extract the object's properties such as Literal-types

type Person = {
  age: number;
  phone: string;
}

type PersonKeys = keyof Person; // "age" | "phone" 

usage with in operator to set all fields to number

type Student = {
  [key in keyof Person]: number ;
}


const student: Student = {
age: 18,
phone: "1252672"    // Type 'string' is not assignable to type 'number'
}

disciminated types
example
Not null assertion can be made using "!" operator.
example: https://dev.to/this-is-learning/typescript-tips-tricks-non-null-assertion-operator-21eb
Interface and type are somewhat same but types offer much feature . & can be replaced with extends for interface
Interface supports declaration merging which is same as union in types . if two interfaces with same name exist then their body is merged
example:

interface Person {
  name: string;
}

interface Person{
  age: number
}

const person: Person =  {name: 'Max', age: 27}; // merged into a single Person interface

console.log(person);

see never type
when class implements type/interface , it should have all the attributes mentioned in the interface/types . It acts a blueprint example:

type Person = {
  age: number;
  phone: string;
}

  // Error below: Type 'Student' is missing the following properties from type 'Person': age, phone

class Student implements Person{   
  id: string
}

definitive assignment(!) is used to tell typescript that the value will be defined and it is upto you to make sure its defined.


let person: string


 function test(){
  person = "rubin"
 }

 test()

 console.log(person)  // error TS2454: Variable 'person' is used before being assigned.

Even though person is initialized inside the test function, typescript doesnot know this. 
To tell typescript that this value will always be non null,  add "!" and the error goes away

let person!: string

Type guards are used with "is" keyword and used to assert if a value is of certain type.

type Rectangle ={
    length: number,
    breadth: number
}


type Square ={
  size: number
}

type Shape = Rectangle | Square;

function isRectangle(shape: Shape): shape is Rectangle {
  return "length" in shape && "breadth" in shape;
}

function isSquare(shape: Shape): shape is Square{
  return "size" in shape;
}


function printArea(shape: Shape) {
    if (isRectangle(shape)) {
        console.log(shape.length * shape.breadth);
    }
    if(isSquare(shape)){
      console.log(shape.size * shape.size);
    }


}

Here we are telling typescript if the function returns true, 
the value is of type "Person"


Notice: the guard can also be defined as 
function isSquare(shape: Shape): boolean{
  return "size" in shape;
}

However typescript wont know the shape is "Square" even if it returns true
so its best to use the above for type checking

An abstract class is typically used to define common behaviors for derived classes to extend. Unlike a regular class, an abstract class cannot be instantiated directly. The unimplemented methods are to be implemented and defined by the classes that extends it

abstract class Logger{
 abstract prefix(): string

log(message: string){
    console.log(this.prefix() +":"+ message)
}
}

class ConsoleLogger extends Logger{
  prefix(): string {
      return "Console"
  }

}

const logger = new ConsoleLogger()
logger.log("Hello")

Object in js can be accessed with index-signature i.e Obj[key] similar to array . In typescript we can define the type of the index while accessing the object values

type Person= {
  userName: string;
  address: string;
}

const p1: Person = {
  userName: 'alex123',
  address: '123 Main St.',
}
const p2: Person = {
  userName: 'ryan123',
  address: '123 Main St.',
}


type PersonDictionary= {
  [key: string]: Person
}

const persons: PersonDictionary = {
  alex: p1,
  ryan: p2
}

persons['alex'].userName = 'alex567' 

console.log(persons['alex'])

Tuples are arrays with fixed length
Generic constraints are used to require generic parameters to have a particular structure. If you don't specify them and try to access the data's property , typescript will throw error as it does not know the dats structure

const addFullName = <T>(obj: T) => {
  return {...obj, fullName: `${obj.firstName} ${obj.lastName}`};
}

Here we have defined a parameter of type generic T. If we try to access, the properties of the parameter,
even if it exists, we get error like Property 'lastName' does not exist on type 'T'. We can fix this by adding generic constraints which tells typescript that the generic has those properties. Additionally, its also requiring the passed value to have properties firstName and lastName

type NamedVales = {firstName: string, lastName: string};

const addFullName = <T extends NamedVales>(obj: T) => {
  return {...obj, fullName: `${obj.firstName} ${obj.lastName}`};
}

The typeof key can be used to extract type from an existing data

const user = {
  name: "Rubin",
  age: 15,
  address: "Kathmandu"
}

type UserType = typeof user  //  {name: string,age:number,address: string}

-Look up types are used to extract a portion from a complex type and create a new type

type requestType = {

  payload: {
    name: string,
    user: number,
    roles: {
      edit: boolean,
      create: boolean,
      read: boolean
    }
  },
   params: {
     id: number,
     type: string
   }
}

// if we want to use type of  params as a type then

type Params = requestType["params"]  //  {id: number,type: string }
type Roles = requestType["payload"]["roles"] //   roles: {edit: boolean,create: boolean,read: boolean}

typeof and lookup type in typescript

Rubin — Mon, 02 May 2022 14:48:42 +0000

The typeof key can be used to extract type from an existing data

const user = {
  name: "Rubin",
  age: 15,
  address: "Kathmandu"
}

type UserType = typeof user  //  {name: string,age:number,address: string}

Look up types on the other hand are used to extract a portion from a complex type and create a new type

type requestType = {

  payload: {
    name: string,
    user: number,
    roles: {
      edit: boolean,
      create: boolean,
      read: boolean
    }
  },
   params: {
     id: number,
     type: string
   }
}

// if we want to use type of  params as a type then

type Params = requestType["params"]  //  {id: number,type: string }
type Roles = requestType["payload"]["roles"] //   roles: {edit: boolean,create: boolean,read: boolean}