DEV Community: ShoeheyOt

Tailwind Color Configuration Generator

ShoeheyOt — Thu, 29 May 2025 01:31:04 +0000

Introduction

If you’ve ever customized colors in Tailwind CSS, you probably know the struggle—finding the perfect palette is fun, but turning that into a usable Tailwind config? Not so much.

That’s why I made a simple tool to help: a Color Palette Generator that not only gives you a nice set of colors, but also spits out a ready-to-use Tailwind config. Just copy, paste, and go.

No more manually converting hex codes or worrying about naming conventions. Whether you're theming a new project or just want to speed things up, this tool’s designed to save time and keep things smooth.

How It Works

The generator isn’t just throwing together random shades — it’s built around color theory.

You start by picking a base color, and then choose a color pattern like:

Complementary
Triadic
Square
Analogous, and more

Once you pick a pattern, the generator creates a palette using that harmony rule. Then it turns those colors into a ready-to-go tailwind.config.js snippet — already formatted and named for easy copy-paste into your project.

Here is a screen shot of the project, you start from left side and get the snippet in right side like example below:

Example:

// tailwind.config.js
colors :{
  primaryLighter :"#eb2b2b",
  primary :"#c91313",
  primaryDarker :"#a10f0f",
  light :"#fce5e5",
  dark :"#280404",
  secondary :"#13c913",
  tertiary :"#1313c9",
}

Tech Stack

Frontend

React-ts / Vite / Tailwind CSS

Vite: It is fast to spin up and reloads instantly while developing. The config is minimal, which keeps things simple and smooth.
Tailwind CSS: I like how quick it is to build UI with utility classes. It keeps styles consistent and lets me prototype without leaving my HTML/JSX.

State & Data

React Query /Zod / Zustand

Zustand: It is a small and easy-to-use state manager. No boilerplate, just define your store and start using it — perfect for a project like this.
Zod: I use Zod to validate color input and keep things safe. It works great with TypeScript and helps prevent weird bugs before they happen.

Conclusion

This was a fun little project to build — not just because I like working with colors, but also because I wanted something practical. Being able to instantly generate a ready-to-paste Tailwind config saves time and helps keep design systems consistent from the start.

It’s a small tool, but I hope it’s helpful for other developers looking to speed up their workflow or get inspired by different color combinations.

Github repo : https://github.com/ShoeheyOt/colorPaletteGenerator-react-ts

Future Improvements

There’s still a lot I want to improve:

UI polish: Right now it’s functional, but not the prettiest. I’d like to refine the layout and make the overall design feel more intuitive and clean.

Dark mode preview: Seeing how a palette looks in both light and dark themes could be super useful for Tailwind users.

Copy button UX: The config is easy to copy now, but I might improve feedback (like a toast or animation) so it feels nicer to use.

Understanding LeetCode Problem #83: Removing Duplicates from Sorted Lists

ShoeheyOt — Fri, 20 Sep 2024 19:06:39 +0000

LeetCode problem #83, "Remove Duplicates from Sorted List," is a classic challenge that tests your ability to manipulate linked lists efficiently. In this article, we'll delve into a solution step-by-step.

Problem Statement

Given the head of a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. Return the modified list.

Constraints

The number of nodes in the list is in the range [0, 300].
-100 <= Node.val <= 100
The list is guaranteed to be sorted in ascending order.
Solution Approach
Let's break down the problem-solving process:

Here is the link of the official.
Link

Understand the input structure

Analyze the constraints
Implement the solution
Optimize and refine
Understanding the Input Structure
The input is a singly-linked list node defined as follows:

class ListNode {
  val: number;
  next: ListNode | null;
  constructor(val?: number, next?: ListNode | null) {
    this.val = val === undefined ? 0 : val;
    this.next = next === undefined ? null : next;
  }
}

Each node contains a value and a reference to the next node in the list.

Analyzing the constraints

Ths input node is onlh ascending order which means we don't need to care about making it sorted, focusing on finding duplicate and delete it.

Designing an Efficient Algorithm

Our approach will involve a single-pass traversal of the list, identifying and removing duplicate nodes as we go.

Implementing the Solution

Let's look at the implementation:

function deleteDuplicates(head: ListNode | null): ListNode | null {
  let current = head;

  while (current) {
    while (current.next && current.next.val === current.val) {
      current.next = current.next.next;
    }
    current = current.next;
  }

  return head;
}

Let's break down this solution:

Initializing a current pointer to the head of the list. This allows us to modify the next pointers while still having access to the original head.

The outer loop while(current) continues until we reach the end, which means current becomes null.

Inner while loop, while both a)next node is existing and b)value of next node is same as current node, conditions are met, skip the next node. When a duplicate is found, we skip over it by setting current.next = current.next.next.
When one of the conditions becomes false, we move current pointer to the next node.
Finally, we return original head with modified list.

Time and Space Complexity

Time complexity: O(n), where n is the length of the linked list. We traverse the list once.
Space complexity: O(1), as we only use a constant amount of space regardless of input size.

Why This Solution Works

Single-pass efficiency: We only need to traverse the list once.
In-place modification: We modify the existing list structure without creating new nodes, optimizing memory usage.
Handling edge cases: Our solution works correctly even for empty lists or lists with no duplicates.
Preserving order: By keeping the first occurrence of each number, we maintain the sorted nature of the list.

Conclusion

Removing duplicates from a sorted linked list is a fundamental problem in algorithm design. This solution demonstrates efficient traversal and manipulation of linked list structures.
Thank you for reading.

To-Do from CLI with Rust

ShoeheyOt — Thu, 12 Sep 2024 21:40:00 +0000

Introduction

Hey there 👋
This article is about how I challenged new thing, learned its principal features, and succeeded less than a month.
As a software developer, I am always excited to try new technologies. Recently I decided to build a command-line to-do list application using Rust, despite having no prior experience with the language.

I had been looking for a simple, light and fast to-do app while coding and decided to create one by myself. Since I have used some services made with Rust,(like a code editor, formatter,etc.) and I know how fast they are. So I decided to use Rust.

I believe this project not only pushed up my skill but also showcased my ability to quickly adapt to new technologies.

Background

I started learning Rust less than a month ago, 100% self-studying using materials which are all made by Rust Official.

Official documentation
Rust By Example
Rustling hands-on course

Project Overview

Nothing fancy in terms of features, you can display all remained tasks, add or delete a task.
The point is that all operations are done from a terminal.

Type one of the number from 1 to 4 for operation you desire e.g. Type 1 and display remained task.

Implementation

I utilize match { } inside loop{ } as flow of control for infinite loop unless user's input is 4, using module std::io to detecte user input.

 let mut input = String::new();
 io::stdin().read_line(&mut input)?;

loop{

 match input.trim(){
   "1" => {
     some_oparation();

     continue,  
   },

   "2" => {
     .
     .
     .

   "4" => {
    end_oparation();

     break;
   },
   _ => {
    fall_back();

    continue;
   }

}

For now, the todo items are stored in a text file(if it doesn't exist, new txt file will be created).

What I succeeded and learned

I successfuly implemeneted basic feature of to-do from terminal.
It was a good experience to create with Rust. The thing I struggled with most of the time is ownership/borrowing.

Owenership

Ownership is a core concept and a set of rule in Rust that governs how memory is managed. Each value has an owner that is responsible for deallocating the value when it is no longer needed. There can be only one owner to each value. When the owner of a value goes out of scope, the value will be dropped.

//example 1 Ownership
{                        //s is invalid at this line 
                         //as it is not decleared yet

  let s = "hello";       // s owns the string "hello" and s is now valid

  let new_s = s;         // the ownership of the string "hello" is transfered 
                         //to variable new_s and s is no longer valid

}                        // this is end of scope and new_s is not valid anymore

*scope is block {}

Borrowing

Borrowing is a Rust's feature which lets you use values without taking ownership. You can use this by adding symbol & before variable.

//example 2 Borrowing
  fn main () {
      let s = "hello";

      print_string(&s);   

      print!("{}", s);   // still available to use variable `s`
  }

  fn print_string (s:&str) {
      print!("{} world", s); //display hello world in terminal
  }

in example 2, &s means borrowing the value of s not taking ownership of it.
Not like example 1, variable s is not reassigned to an another one, so it seems s is still able to be used in print!()(BTW this is same as console.log() in Javascript/Typescript) without additional ampersands. It is needed. Passing a variable(not borrowing) to a function is similar to reassigning, so if you still need to use variable s in same scope, one way it to pass a variable as reference to a function print_string()

Mutability

The default behavior of variable in Rust is immutable which is good in point of safety and concurrency, so what if you want to update the value in a variable like Example 3?


//Example 3 Mutability
 fn main(){
  let s = "hello";

  print("{}", s);

  s = "goodbye";

  print("{}", s);
 }

Example 3 is invalid. If you cargo run(npm run in Javascript) with the example 3, it would dislplay below error message.


error[E0384]: cannot assign twice to immutable variable `s`
 --> src/main.rs:3:5
  |
2 |     let s = "hello";
  |         -
  |         |
  |         first assignment to `s`
  |         help: consider making this binding mutable: `mut s`
6 |     s = "goodbye";
  |     ^^^^^^^^^^^^^ cannot assign twice to immutable variable

For more information about this error, try `rustc --explain E0384`.
warning: *** generated 1 warning
error: could not compile *** due to 1 previous error; 1 warning emitted

You might notice within error message, it sometimes gives us hint which saved me time during the project.(Be careful, it is just a hint, not an answer)

To fix the issue, you need to explicity tell Rust this variable is mutable using keyword mut like below example 3-1


//Example 3-1 Mutability
 fn main(){
  let mut s = "hello";

  print("{}", s);

  s = "goodbye";

  print("{}", s);
 }

Why it is needed - Ownership and Borrowing

All programs have to manage how to use memory of computer while running. Some languages have garbage collector that regulary check memory which is no longer used while running. In Rust, memory is managed through this ownership concept. At the closing curly brackets, special function called drop is automatically called. This is the timing where the owner of value returns the memory.
So no garbage collectoer or explicitly free memory execution is needed, it automatically frees memory when variables goes out of scope. This concept of Rust make it fast, memory-efficient and memory-safety yet flexible language.

Improvements

There are two things I would like to improve

Editing feature

The current features are adding, reading, and deleting, but you might forget which tasks are in progress and which are not if there are more than you can remember. It is nice to see progress, so I am planning to add editing feature so that a user can check whether remained tasks are in progress or haven't been started yet.

Refactor

With current implementation, a newly created task is saved to text file which is located in the root of working space(if not exist, new file would be created), which is not ideal in performance, scalability or data integrity perspectives. Instead it is better to implement storing data in database, like PostgreSQL or mySQL and I will change it soon.

Conclusion

Through this my first Rust project, even it is simple one, I felt how safe and fast the language is, and not 'that' hard to learn and create something with it. I was thinking this language was not for me, too difficult to learn until I started this project. If you haven't done anything with it and are looking for something new to learn, I would recommend Rust.

Thank you for reading so far, if you have any question or suggestion, please leave a comment or contanct me via Linkedin.

Github Repo
LinkedIn

Reference

The shopping list

ShoeheyOt — Wed, 22 May 2024 19:39:21 +0000

Overview

Have you ever experienced forgetting what to buy which you had just remembered until a second ago? Well, I have, many times. So does my partner.. In order to keep them in memo, I created a app which can remember what to buy for us.

Goal

The goal is to implement create/read/delete interactive communication with database without complicated operation.
'Simple' is kind of important keyword in this app as it is used by not only me but also my partner who is not familier with programming.

You might wonder why 'update' feature(U from CRUD) is not included. That's because my app doesn't need to modify
item(s) in the list. I focused on three create/read/delete features to keep it simple.

Features

A user oparates via communication tool, LINE(I would say the app ,LINE, is one of the most popular communication tool in my coutry.), it has nice API feature which can do webhook to call a function deployed somewhere else, this time I deployed a my codes to supabase. Sending a message to LINE API account (each LINE user can create their own API account) triggers to call it. Once triggered, LINE API sends a request to supabase edge functions where I deployed and get response from it depend on what message a user sends.

The events depends on the input keyword.

Create

If a user input doesn't include either 'Display', 'Clear', 'Delete', which means add a new item to the list, all you have to do is to type a item you want to memo and tap send button.
Below is example how it works, only you need to do is to send a word to line account.

Read

It is main feature of the app, if you want to get a list from database, just type "Display", and it responds with all item in the iist. I set capital D as first letter of keyword because we both are iphone users, which has keyboard feature that first letter of a sentence is automatically in capital as default.

Delete

There are two ways to delete item from the list.

"Delete ***"

one is using keyword "Delete", this is used when you want to delete specific item.

"Clear"

The other way is using "Clear". When you input this keyword, it clears all item in the list.

Utilize Line Feature

Actually(you might imagine), keywords "Diplay" and "Clear" are the frequently used in this app.
so I added ready-for-tapped buttons called "Rich Menu", this is one feature of Line that you can assign arbitrary command easily.
with only one tap, and you can see the list or delete them all.

TechStack

Frontend --- Line message API,
Backend --- supabase edge function in Typescript
Database --- supabase

Summary

This app is useful. we have been using it for a few weeks and works well so far. It is also good practice to understand how to deploy, connect to database.

Thank you for reading.

Algorithm Assignment

ShoeheyOt — Fri, 06 Oct 2023 04:25:03 +0000

Leet Code no.1 "Two Sum"

This article is for school task, The detail of the task is below.

Write 1 blog/article about algorithms in any manner, not limited to JavaScript.You can write about objectives or how algorithms solve problems. You can provide information, offer suggestions and advice to a reader who may not know what an algorithm is.
Writing a script to give examples is also valued and recommended. You may write an article that revolves around the topic of JavaScript.

I don't have any working experience as a developer, have just started learning programming, so with meaning of review and deepen understanding of basic of algorithm, I tried to explain how to solve Leet code no.1 "Two Sum".

Below is the explanation of two sum problem.

Leet Code Two Sum explanation

 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.
 You may assume that each input would have exactly one solution, and you may not use the same element twice.
You can return the answer in any order.

 Example1
 Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1]

Example2
Input: nums = [3,2,4], target = 6
Output: [1,2]

Example3
Input: nums = [3,3], target = 6
Output: [0,1]

*If you want to read more details about Leet code, Click here.

I first thought I needed to use for loop inside for loop to get target value as below code and flowchart, which means looking through all numbers one by one to find indices of the two numbers which they add up to target.

function twoSum (nums, target) {
  for (let i = 0; i < nums.length; i++) {
    for ( let j = i + 1; j < nums.length; j++) {
      if ( target == nums[i] + nums[j] ) return [ i , j ]; 
    }
  }    
}

From Big O notation point of view, each complexity is as below.

Time complexity: O(n^2)

Space complexity: O(1)

It works but more numbers in the array, the more it takes to solve.
So, I tried to find more efficient way to solve this problem, but I couldn't. Therefore, I asked best friend(the service which start from 'G', not 'C') to find better one.

Point is how to avoid for loop in for loop which cause time complexity to n^2 and what I need to do is finding difference of target value and value in the array I am looking at.

Difference = Target - value in array

function twoSum(nums, target) {
 let numObj = {};
   for (let i = 0; i < nums.length; i++) {
     let difference = target - nums[i];
     if (numObj[difference] !== undefined) {
       return [numObj[difference], i];
     }
     numObj[nums[i]] = i;
   }
 }

From Big O notation point of view, each complexity is as below.

Time complexity: O(n)

Space complexity: O(n)

Here we have tradeoff, improved time complexity at the sacrifice of space complexity.

Well,,, you can buy space but you can't buy time.

That's all, thanks for reading.
If you find some misunderstanding in the article, please let me know. I would appreciate it.

TASK_101

ShoeheyOt — Mon, 04 Sep 2023 18:49:57 +0000

This article is for a task from my school

Details are below

GOAL : Write 1 blog/article about yourself and your goals to become a software developer (front/back end dev, software engineer...etc)
MYSELF : Yourself (a bit of your history)
EXPECTATION : Your expectations for this course
EXPERIENCE : How was your experience with the course so far (first week)
ACHIEVEMENT: What do you want to achieve after the course?

It is written down accordingly.

GOAL

As beginning, I would like to be a front end developer.

After 10 years of working as a salesperson, it is approachable for me to think how consumer/customer/client see and feel products which my company own. I found my way to sell products, which means I can make them look attractive to customers (maybe).

In spite that, I felt sort of fear at the same time because the products I made look attractive was not what I planned or made. In addition to that, if technical or quality issue occurred, I couldn't handle it by myself. Most of the time, I needed to ask production or planning side because it could affect to other customers we have all over the world, which made me feel I was incompetent, what I had been doing was adding something little bit to what those who planned or made products had told me to do.
Without them, I couldn't have done anything. Therefore, I started thinking about getting new skills which I can plan/make or solve with by myself,

And,,, here I am.

MYSELF

Born and grew up in Osaka, Japan, in which delicious food, Japanese comedy(Owarai) exist.
Graduated from Japanese high school with 1 year experience of exchange student in Canada( I was in Saskatchewan)
Have BA degree, Business administration, in a university in Japan.
Approx. 10 years working experience as salesperson in bicycle industry until Apr. 2023
Take Web Development course at Cornerstone college from Aug.2023

EXPECTATION

Getting to know

fundamental of programming
mind-set

A guide or a lighthouse how to be a developer

With this 10 years experience, I realized that there are many cases which don't have one clear answer in business world.

Thus, I would like to get a skill or a knowledge which I can use not only to plan or make, but also solve/deal with something by myself, in order to judge which is better.

EXPERIENCE

Good, besides sudden announcement of changing course schedule.

Even though we haven't learned any detail about programming yet, the teacher is good.

He prepared for the class well(didn't use the material school prepared at all!).

His way of teaching is easy to understand.
Therefore I would say I had good experience so far.

ACHIEVEMENT

| A | B | C |
|---|---|
| A | B | C |
| A | B | C |

I can't even make a table with markdown now, like above.
I would like to build up my skill that I can solve programming problem while planning or making something by myself after the course.