DEV Community: tranbathanhtung

Free, Opensource Tailwind CSS Devtools

tranbathanhtung — Thu, 16 Jun 2022 10:22:21 +0000

👋 Hey here, I just created Tails Devtools ... A Browser extension for Tailwind CSS Developer.

https://github.com/vechai/tails-devtools

Features 🔥
🗂 Easily debugging with Tailwind utility class
✨ Support autocompletion for JIT mode.
✔️ Custom config support.

Hope it will make it easier for developers to use Tailwind CSS 😄

[VechaiUI]: A set of high-quality React components with the built-in dark theme using TailwindCSS.

tranbathanhtung — Mon, 05 Jul 2021 17:57:04 +0000

Hello guys, Today I am very excited to share my open-source project Vechai-UI: A set of high-quality React components with the built-in dark mode.

Github: https://github.com/vechai/vechaiui
Document: https://www.vechaiui.com/

Feature overview:

30+ React components & Pre-designed headlessui + radix-ui components.
Written in TypeScript.
Built-in dark mode.
Powerful theme customization.

Please take a look and let me know what you think.

Gineko - Code search extension for GitHub

tranbathanhtung — Mon, 01 Mar 2021 10:37:11 +0000

Gineko is a code search extension for GitHub, available for Chrome.

Features 🔥
🔎 Search Code: Press Cmd+Shift+F to quickly search over all files in the current branch.
🗂 Jump Files: Press Cmd+/ to open the file list and let you navigate to any file
🎨 Support Dark Theme and Rich icons
↔️ Resizable layout

Github repo: https://github.com/codolab/gineko
Chrome store: https://chrome.google.com/webstore/detail/gineko-github-code-search/kcehbgaiaeifnpdhleceeckldighdlgk

Candy: Styling modern apps with Atomic CSS-in-JS focus on constraint-based design principles

tranbathanhtung — Mon, 16 Nov 2020 15:21:36 +0000

I'm a big fan of TailwindCSS. But, during working with TailwindCSS, I got some problems with PurgeCSS and class precedence rules.

So, I created a CSS-in-JS framework that:

👀Supports all existing Tailwind shorthand syntax.
🛠️Fully configurable theme & variants.
🔥Generates only the styles required.
✋No conflict precedence rules.
✨Works with any framework.
📱Supports React Native.

If you aren't familiar with the Tailwind's syntax. Give a try to object syntax. It's also based on your configuration and provides helpful shorthand ways to style components.

Check it out here: https://github.com/codolab/candy

How I learn code on internet and get my first job?

tranbathanhtung — Sun, 19 Aug 2018 14:15:58 +0000

One year ago I started my first semester at university and started learning HTML, CSS, and javascript online … And four months ago, I got my first job as front-end web developer for a startup …I want to share my self-study experience … everything that I know.

What should we do?

When we start learning something, it's really hard and makes us feel discouraged. I think this is the hardest time but it is quite normal. I have read somewhere a quote:

When you want to give up think about why you started!

It sounds good but not help at least for me. Trust me, If your motivation isn't too big then it can't help you.

Instead, the way to develop oneself is the habit. Build habits, discipline, and habits that will guide you.

We don't need to spend too much time in a day to learn … It may take 2–3 hours a day when all becomes a habit, you can do "hard" things in a fun and enjoyable way.

A common problem among newbies is learning too many things at the same time. For example, when you are learning python, but after a while javascript becomes hotter … You want to switch to javascript and so you can know a lot of languages but in fact, you will not be able to do a Something perfect … So just focus on one language …

Besides, learn the basic knowledge, structure, syntax of that language … I see now there are a lot of trend followers like React, Vue or Nodejs … They even just surf the javascript in a day and start learning those frameworks. You should remember the frameworks is based on that language … Maybe it only lasts a few years but that language will still be there. If you are the person who I'm talking about, stop it and learn basic knowledge.

In addition to following the tutorials of the course or read-only document, make yourself something you like. For example, if you learn about the web and you love animals or read books … You can use the knowledge learned to build websites related to them. This will help you less boring and help develop your skills quickly
One more thing in this section is that searching with google … I'm pretty sure every question in your head is already on Google or StackOverflow … It's really a useful tool though. Everything has two faces … When you get into trouble and 5 minutes after, you go to google search and of course everything works … This will make the habit but this is a bad habit … It will reduce our thinking … So do not overuse Google or StackOverflow

And The last thing I want to say about the use of libraries comes with frameworks … Do we really need them? … Of course, we need … but When?

When I started learning the react … All the courses on react I learned were about redux … This was terrible because it was really hard and I just got to know some basic concepts about state and props … The consequences of that make me think redux is always part of the react … I always use redux even though the project is so small I do not know how to create a website with pure react. I think this has happened to a lot of people who start learning to react … In my country, there is a small battle between pure react and redux users. I realized why I had to use redux all day even though I did not need it either … React 16.03 has improved Context API to make managing the state easier and I learned it by creating a library to state management.

https://github.com/tranbathanhtung/re-bat

Redux isn't bad, The problem is that we have taught the wrong way to use them

I also built a small library UI because other libraries are too big and sometimes I do not need too many components. Even creating a component of your idea is faster than learning and changing the components of that library and I decided to build some components for myself.

https://github.com/tranbathanhtung/re-jok

It's good to learn or create your own library …

If you have time, learn how it works instead of using it.

So, when we need use a library or frameworks?

Remember, Use a library only if you really in trouble .

In conclusion …

That is all my experiences after a year of self-learning online… It may be true, maybe wrong … Everyone's life is different … It will take a lot of time… Of course everything is just a part of life.

Hope the article is useful for everyone and sorry for my english :))

Re-jok - A small react UI component library built with styled-components

tranbathanhtung — Sat, 04 Aug 2018 17:00:23 +0000

Hi everyone!!! I just built a small library ui for react... I just started learning react a few months ago on the internet and had a three-month internship ... The idea came when I got to the spectrum .. I learned a lot of new stuff from the spectrum and I decided to practice by building re-jok ... so maybe my code looks very stupid or has lots of bugs but I hope everyone to like it..... I will try to improve it

This's my repo:

tranbathanhtung / re-jok

A React UI Component library built with styled-components

Re-jok

Re-jok is a React UI component library built with styled-components. It's a collection of components that help you design websites fast and beautiful easily. Now, it's very young, few components or somewhere looks like stupid but we always try to improve and add more components in the shortest time.

Why Re-Jok

Very lightweight... About 38KB min+gzip
Easy to customize component
Easy to customize theme

Installed

npm i --save re-jok

Getting Started

import React from 'react'
import { globalConfig, JokTheme, Button } from 're-jok'

globalConfig();

const App = props => (
  <JokTheme>
      <Button>Hello World</Button>
  </JokTheme>
)

Documentation

Docs

View on GitHub

Thanks all!!!