<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M4vEkoAgUtGTxHxSSfPaIw.png"></figure>Hi, I am <a href="https://twitter.com/taishik_">Taishi</a>, a full-stack dev and an indie hacker!
Right now I am working on a project called Audio2Doc | Your audio player with transcriptions and the semantic search.
<a href="https://audio2doc.com/">Audio2Doc | Your audio player with transcriptions and the semantic search.</a>
In this product, I am storing vector data in a database to perform a semantic search.
<h4>Why don’t you use Pinecone?</h4>
For those who are not familiar with <a href="https://www.pinecone.io/">Pinecone</a>, it is a database designed for vector data. Many projects may be using it as well.
I used Pinecone at the beginning, but I wasn’t fond of using many microservices. After seeing an article on Twitter, I decided to try using `pgvector` on Supabase instead. Since I was already using Supabase, it was very easy to get started.
<a href="https://supabase.com/blog/openai-embeddings-postgres-vector">Storing OpenAI embeddings in Postgres with pgvector</a>
<h4>How is the performance?</h4>
First, I checked the number of records. Currently, there are 61,990 records.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/832/1*z7BqyrzAkAbWJTKAsvfGyg.png"></figure>Let’s try performing semantic search on my product!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XqgOLfwTiHqp2JY8DNm5gQ.png"></figure>The result came back in 982ms via the API! This is a very good performance and there are no issues at all.
Just to be clear: I haven’t added an index to speed up queries 😳
<figure><img alt="" src="https://cdn-images-1.medium.com/max/824/1*SFf2weSaVvKCZg0mXzwQow.png"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/531/1*XYRSaMONrFumwahy8lIAlg.png"><figcaption>This is a simplified system diagram of my product.</figcaption></figure><h4>So…should you use Pinecone or other Database products for Vector data?</h4>
My answer is…probably no.
I often feel that using a database service specialized for vector data is overkill in many cases.
If you are already using Supabase for your product, you can set up in just 5 minutes by following the steps in the article below.
<a href="https://supabase.com/blog/openai-embeddings-postgres-vector">Storing OpenAI embeddings in Postgres with pgvector</a>
Please give it a try! Have a good vector data hacking!
<h4>Contact</h4>
Feel free to contact me! <a href="https://twitter.com/taishik_">@taishik_</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=32bfc39988d4" width="1" height="1" alt="">

I took advantage of pgvector on Supabase with lots of data

<h4>Why I quit a job at Yahoo! and moved out of Japan</h4>
In 2019, I left my job at Yahoo! Japan after 4 years. Despite the modest salary there, and the fact that I was surrounded by very talented colleagues, I felt bored and cramped, and finally could no longer stay there.
At Yahoo! Japan, I created APIs for their services and sometimes endpoints to collaborate with outside companies as a backend engineer. I also maintained the system, and I have fond memories of getting calls at 2 AM lol.
My colleagues were all so great as both human beings and developers. They were so passionate about writing code, studying new stuff, and creating valuable products.
On a personal note, life in Tokyo was very fulfilling. It was very safe and everything was available in a big city. I have friends and family, and I can drink at my favourite izakaya with them. Everything is clean and the quality of service is high. Unlike in Canada, restaurants are open late at night.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wmf03tStAUOOL_gtYiwL7A.jpeg"></figure>It seemed everything was perfect. I had a steady job and life in a world-class big city was very exciting.
Gradually, however, I began to see dissatisfaction and anxiety in my life.
<h3>Experiencing various culture</h3>
I have done backpack travel several times in Southeast Asia, and it was enough for me to realize there are many different things in this world and I simply wanted to experience them.
<h3>More career options</h3>
I think being able to work only in one country is not a good situation.
Japan is a very comfortable place to stay and hard to leave, but I reckon it’s better to get out of your favourite place for a better/exciting future while you are still young and healthy.
<h3>Creating an unpredictable future</h3>
When I was working in Japan, I could imagine myself after a couple of years…like, “I will probably be a manager in 2 years and then become a senior manager if I am lucky.”
I can imagine myself in the future at that company, which is not fun and kinda boring to me. I am seeking an unpredictable future.
<h3>Even more unpredictable future!</h3>
Maybe I won’t be a software developer in 10 years. Who knows? By experiencing and taking random stuff into life and digesting it with my brain, my life could be much more unique and random.
I am very excited to see where my life goes.
<h3>What is the solution?</h3>
I chose to move to another country, Canada in 2019. The reasons are
<ul>
<li>Relatively easy to get a visa</li>
<li>English is the first language there (I wanted to be able to speak English!)</li>
<li>The Tech industry seems thriving in Canada</li>
</ul>
Now I have been working for a local company as a full-stack developer for about 1.6 years. As a result
<ul>
<li>My Canadian PR is in the process</li>
<li>Salary is much better than in Japan</li>
<li>Life-work balance’s been improved because of remote working/WFH.</li>
</ul>
Of course, I can speak English now and I can make friends with anyone! Also, I can say I am probably able to work in other countries since my resume now says this guy is working in Canada, which proves I can work in English speaking-environment, and western companies would see me as a candidate to hire. I have gotten more options for my career and my future is getting more unpredictable!
<h3>What’s next?</h3>
Keep stepping out of my new comfort zone! I’d like to carry the Remote Work style to the extreme. In this way, I can keep stepping out of my new comfort zone and expand my comfort zone, and experience lots of new things!
For example, I am writing this article in Tulum, Mexico while I work remotely there (I bet most Japanese haven't done this).
<h3>taishi (taishik.eth) on Twitter: "Debugging an API at a restaurant in Tulum.Recently I really feel I can work anywhere if I have* Wifi* Laptop* Noise cancelling earbuds pic.twitter.com/pA0FEOxcR3 / Twitter"</h3>
Debugging an API at a restaurant in Tulum.Recently I really feel I can work anywhere if I have* Wifi* Laptop* Noise cancelling earbuds pic.twitter.com/pA0FEOxcR3
You can <a href="https://twitter.com/taishik_">follow me there</a> as I continue to document my journey.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=136677e73e97" width="1" height="1" alt="">

Step out of your comfort zone, even if it’s your home country

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z28zKkgVO13edRQy-2LPOw.png"></figure><h3>Summary</h3>
I uploaded the photos of my face of 52 days when I was travelling in Southeast Asia for two months as an experiment.
<a href="https://opensea.io/collection/taishi-face-transition-in-southeast-asia">The transition of my face when I travelled in Southeast Asia — Collection | OpenSea</a>
<h3>Story</h3>
Since 2021 (I guess), it seems everyone on Twitter is talking about Web 3.0.
<ul>
<li>DeFi</li>
<li>DAO</li>
<li>NFT</li>
<li>Blockchain</li>
<li>Cryptocurrency</li>
</ul>
I don’t understand most of them, especially NFT, DAO and DeFi.
I have read articles about them and it turned out just reading articles wasn’t enough to understand how things work.
If you’d like to understand something, then you need to join the game and output something, not only input.
And I found this article about a guy, <a href="https://twitter.com/Ghozali_Ghozalu">Sultan Gustaf Al Ghozali</a>, who put the photos of himself and became a millionaire.
<a href="https://news.yahoo.com/indonesian-college-student-becomes-millionaire-185120727.html">Indonesian college student becomes millionaire after putting his selfies up for sale as NFTs as a joke</a>
OK, Just a photo of the face can be an NFT. I can’t say I have enough skill to make art, but I definitely am able to take photos of myself, so I can join the NFT game (hype 🤷‍♂️?) and learn something.
Fortunately, I took photos of myself almost everyday when I was travelling in Southeast Asia in 2019 (just before Covid 😱).
<a href="https://medium.com/@TaishiKato/i-am-doing-digital-nomad-life-for-2-months-in-southeast-asia-ca7d187e92f7">I am doing DIGITAL NOMAD life for 2 months in Southeast Asia🇹🇭🇱🇦🇻🇳👨‍💻👩‍💻</a>
I decided to upload them as NFTs on Opensea.
This is my very first NFT collection 🥳
<a href="https://opensea.io/collection/taishi-face-transition-in-southeast-asia">The transition of my face when I travelled in Southeast Asia — Collection | OpenSea</a>
Hope I can learn something from them ✍️
<h4>P.S</h4>
As an indie hacker (who is working on a personal project to make a profit from it), I logged about this NFT project on <a href="https://wip.co/products/southeastfacenft">WIP</a>, <a href="https://getmakerlog.com/products/southeast-asia-face-transition-nft">Makerlog</a> and <a href="https://www.indiehackers.com/product/transition-face-in-southeast-asia-nft">Indie Hackers</a> too!
<h3>Follow my account 👍</h3>
<a href="https://twitter.com/taishik_">JavaScript is not available.</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ec979cfb5aff" width="1" height="1" alt="">

My first NFT collection on Opensea

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H76r_ft1KQT6wqMtzkkObA.png"></figure><blockquote>This article is also on <a href="https://dev.to/taishi/how-to-manage-global-data-with-context-api-not-redux-on-react-20m7">dev.to</a> and <a href="https://en.taishikato.com/posts/how-to-manage-global-data-with-context-api-without-redux-on-react">en.taishikato.com</a>.</blockquote>
Hi, <a href="https://taishikato.com/">Taishi</a> here 👋
How do you manage global data on React? I used to use Redux for that, however, I currently use Context API for that purpose and I don’t even install redux and redux-related packages!
<h3>2 ways to implement it with Context API</h3>
I think there are 2 ways to make it happen. A simple and complicated one.
I am gonna explain the simple one first ☝️
Imagine we want to manage the logged-in user data.
<h3>1. Use state variable</h3>
<h4>Add userContext.js</h4>
Let’s make ./src/context/userContext.js.
<pre>// File: ./src/context/userContext.js import React, { useState, useEffect, createContext, useContext } from 'react'; import firebase from '../firebase/clientApp'; export const UserContext = createContext(); export default function UserContextComp({ children }) { const [user, setUser] = useState(null); const [loadingUser, setLoadingUser] = useState(true); // Helpful, to update the UI accordingly. useEffect(() =&gt; { // Listen authenticated user const unsubscriber = firebase.auth().onAuthStateChanged(async (user) =&gt; { try { if (user) { // User is signed in. const { uid, displayName, email, photoURL } = user; // You could also look for the user doc in your Firestore (if you have one): // const userDoc = await firebase.firestore().doc(`users/${uid}`).get() setUser({ uid, displayName, email, photoURL }); } else setUser(null); } catch (error) { // Most probably a connection error. Handle appropriately. } finally { setLoadingUser(false); } }); // Unsubscribe auth listener on unmount return () =&gt; unsubscriber(); }, []); return ( &lt;UserContext.Provider value={{ user, setUser, loadingUser }}&gt; {children} &lt;/UserContext.Provider&gt; ); } // Custom hook that shorhands the context! export const useUser = () =&gt; useContext(UserContext);</pre>
As you can see, UserContextComp component has user state variable.
<pre>const [user, setUser] = useState(null);</pre>
We store the user data in this user variable and update it with setUser() function.
<h4>Edit index.js</h4>
Now we have to use the UserContextComp component to consume it! Edit ./src/index.js like below.
<pre>// File: ./src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import UserProvider from './context/userContext';</pre>
<pre>ReactDOM.render( &lt;React.StrictMode&gt; &lt;UserProvider&gt; &lt;App /&gt; &lt;/UserProvider&gt; &lt;/React.StrictMode&gt;, document.getElementById('root'), );</pre>
<pre>// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();</pre>
Now we can use user variable and update it with setuser() function everywhere ✌️
<h4>How to consume it</h4>
Import the useUser function from the ./src/context/userContext.js and get the variable you need. In this case, we take loadingUser, user, and setUser.
<pre>import React from 'react'; import { useUser } from '../context/userContext';</pre>
<pre>const MyComponent = () =&gt; { const { loadingUser, user, setUser } = useUser();</pre>
<pre> return ( &lt;&gt; {loadingUser ? ( &lt;div&gt;loading…&lt;/div&gt; ) : ( &lt;div&gt;Welcome, {user.displayName}&lt;/div&gt; )} &lt;/&gt; ); };</pre>
<pre>export default MyComponent;</pre>
Please just use setUser if you need to update the user data just like when you update the usual state variable.
<h3>2. Use dispatch and reducer (more Redux way)</h3>
In this way, we use useContext with <a href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</a> hook.
I feel like this way is Redux without Redux 🤤 Sure, Redux uses Context API inside itself.
By the way. I made an example app here. Please take a look at this if you wanna make it happen on your local environment.
<a href="https://github.com/taishikato/context-api-with-useReducer">taishikato/context-api-with-useReducer</a>
Anyway, let’s dive into it!
<h4>Add ./src/context/reducer.js</h4>
If you are familiar with Redux, you can understand this with ease.
Now we are gonna define the reducer function and initialState. The default value of user is null.
<pre>// File: ./src/context/reducer.js export const initialState = { user: null, };</pre>
<pre>export const actionTypes = { SET_USER: 'SET_USER', };</pre>
<pre>const reducer = (state, action) =&gt; { switch (action.type) { case actionTypes.SET_USER: return { ...state, user: action.user, }; default: return state; } };</pre>
<pre>export default reducer;</pre>
<h4>Make ./src/context/StateProvider.js</h4>
<pre>// File: ./src/context/StateProvider.js` import React, { createContext, useContext, useReducer } from 'react'; export const StateContext = createContext([]); export const StateProvider = ({ reducer, initialState, children }) =&gt; ( &lt;StateContext.Provider value={useReducer(reducer, initialState)}&gt; {children} &lt;/StateContext.Provider&gt; ); export const useStateValue = () =&gt; useContext(StateContext);</pre>
<h4>Set the Provider in ./src/index.js</h4>
Because of this, we can consume the StateContext component everywhere!
<pre>// File: ./src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; + import { StateProvider } from './context/StateProvider'; + import reducer, { initialState } from './context/reducer'; ReactDOM.render( &lt;React.StrictMode&gt; + &lt;StateProvider initialState={initialState} reducer={reducer}&gt; &lt;App /&gt; + &lt;/StateProvider&gt; &lt;/React.StrictMode&gt;, document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();</pre>
<h4>Now display the logged in user's name!</h4>
Make a <a href="https://github.com/taishikato/context-api-with-useReducer/blob/master/src/Auth.js">Auth component</a> and use it in App.js like below.
We need login/logout methods (handleLogin, handleLogout) to handle onclick events, so make them as well.
<pre>// File: ./src/App.js import React from 'react';</pre>
<pre>import Auth from './Auth'; import { auth, provider } from './firebase'; import { useStateValue } from './context/StateProvider'; import { actionTypes } from './context/reducer'; import './App.css';</pre>
<pre>function App() { const [state, dispatch] = useStateValue();</pre>
<pre> const handleLogin = async () =&gt; { try { const result = await auth.signInWithPopup(provider); dispatch({ type: actionTypes.SET_USER, user: result.user, }); } catch (err) { alert(err.message); } };</pre>
<pre> const handleLogout = async () =&gt; { await auth.signOut(); dispatch({ type: actionTypes.SET_USER, user: null, }); };</pre>
<pre> return ( &lt;Auth&gt; &lt;div className="App"&gt; &lt;header className="App-header"&gt; &lt;div&gt;{state.user?.displayName}&lt;/div&gt; {state.user ? ( &lt;button onClick={handleLogout}&gt;Logout&lt;/button&gt; ) : ( &lt;button onClick={handleLogin}&gt;Login&lt;/button&gt; )} &lt;/header&gt; &lt;/div&gt; &lt;/Auth&gt; ); }</pre>
<pre>export default App;</pre>
As <a href="https://reactjs.org/docs/hooks-reference.html#usereducer">the reference</a> says, useReducer returns state and dispatch.
<blockquote>An alternative to useState. Accepts a reducer of type (state, action) =&gt; newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)</blockquote>
That’s why we can get variables like this.
useStateValue() returns useContext(StateContext), and this returns useReducer(reducer, initialState).
<pre>const [state, dispatch] = useStateValue();</pre>
Now you see like this and you can login/logout.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/554/1*WB7B7QmZnajEc9YFzmxa9w.png"></figure>If you logged in successfully, you can see your name as below.
When the value of state.user is set, your name will be shown.
<pre>&lt;div&gt;{state.user?.displayName}&lt;/div&gt;</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/401/1*q0UXlm7xHxQ9JhG9NOfK-Q.png"></figure><h3>Note</h3>
I think 2. Use dispatch and reducer (more Redux way) may look complicated to you, but we can easily understand what kind of data this app manages globally in <a href="https://github.com/taishikato/context-api-with-useReducer/blob/master/src/context/reducer.js#L1-L3">initialState</a>. In this example, we manage only user variable globally, but imagine if we manage like 10 variables 😅
Hope this helps.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=69414288b416" width="1" height="1" alt="">

How to manage global data with Context API, without Redux on React

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XHh0FqJ0Um6XFac7HWUnXQ.jpeg"></figure><a href="https://twitter.com/ProductHance">Taishi</a> here👋
Today I am going to write about how to implement Dark Mode with Tailwind CSS.\ Dark Mode is now one of the important features for usability and you should implement this on your website if you have not done yet.
Don’t worry. It’s quite easy!
<blockquote>
BTW, the complete example on GitHub is <a href="https://github.com/taishikato/Dark-Mode-with-Tailwind-CSS">here</a> ✌️
</blockquote>
<h3>Create your React app with CRA CLI</h3>
<pre>$ npx create-react-app dark</pre>
Let's host it on <a href="http://local:3000/">http://local:3000</a>
<pre>$ cd dark $ npm run start</pre>
Now I believe you see this page on your http://localhost:3000 🎉
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IuBy8pkLn31C4vwb2ipJbw.png"></figure>This time we don’t need ./src/App.css, so delete the file and make ./src/App.js simpler like below😸
<pre>import React from 'react'; function App() { return ( &lt;div className="App"&gt; &lt;header className="App-header"&gt; &lt;p&gt; Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload. &lt;/p&gt; &lt;a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" &gt; Learn React &lt;/a&gt; &lt;/header&gt; &lt;/div&gt; ); } export default App;</pre>
Now the website looks much simpler.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/740/1*2TqYamTr94N_n4bpV7vs_w.png"><figcaption>Just texts with white background-color</figcaption></figure><h3>Add Tailwind CSS</h3>
<h4>Let’s add packages for Tailwind CSS</h4>
<pre>$ npm i tailwindcss autoprefixer postcss-cli --save-dev</pre>
<h4>Generate a config file of Tailwind CSS.</h4>
The command below creates ./tailwind.config.js.
<pre>$ npx tailwindcss init</pre>
<h4>Add postcss.config.js</h4>
The content looks like this.
<pre>module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ], };</pre>
<h4>Make a Stylesheet file.</h4>
Let’s add a ./src/tailwind.src.css like below.
<pre>@tailwind base;</pre>
<pre>@tailwind components;</pre>
<pre>@tailwind utilities;</pre>
<h4>Add a script to generate a CSS file</h4>
tailwind:css on package.json builds a CSS file as ./src/tailwind.css you actually use in your React app.
<pre>"scripts": { + "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css", "start": "react-scripts start", "build": "react-scripts build", . . .</pre>
Let start and build use tailwind:css.
<pre>"scripts": { - "start": "react-scripts start", - "build": "react-scripts build", + "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css", + "start": "npm run tailwind:css &amp;&amp; react-scripts start", + "build": "npm run tailwind:css &amp;&amp; react-scripts build",</pre>
Every time you use the start or build script, it generates a CSS file for you👍
<h4>Let’s import tailwind.css in App.js</h4>
<pre>import React from 'react'; + import ./'tailwind.css'; function App() { return (</pre>
All set! Now your app uses Tailwind CSS 🌬️
<h4>Use Tailwind CSS to align your text</h4>
Just try to use a class text-center from Tailwind CSS. Now our App.js looks like below.
<pre>import React from 'react'; import './tailwind.css';</pre>
<pre>function App() { return ( &lt;div className="App"&gt; &lt;header className="App-header text-center"&gt; &lt;p&gt; Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload. &lt;/p&gt; &lt;a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" &gt; Learn React &lt;/a&gt; &lt;/header&gt; &lt;/div&gt; ); }</pre>
<pre>export default App;</pre>
Your web page looks like below.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vFR6mfm_PQmIfWXtyFnwXA.png"><figcaption>text centered</figcaption></figure><h3>Customize Tailwind CSS for Dark mode</h3>
We want to use dark: like this. In this example, when the value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a> is dark, bg-black becomes valid.
<pre>&lt;div className="dark:bg-black"&gt;</pre>
First, we need to customize tailwind.config.js to make it happen😎
<h4>Customize screens property</h4>
Your current tailwind.config.js should look like this.
<pre>module.exports = { future: { // removeDeprecatedGapUtilities: true, // purgeLayersByDefault: true, }, purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }</pre>
Add screens property under extend.
<pre>module.exports = { future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true, }, purge: ['./src/App.js'], theme: { extend: { screens: { dark: { raw: '(prefers-color-scheme: dark)' }, }, }, }, variants: {}, plugins: [], }</pre>
What’s gonna happen!?
According to the Tailwind CSS document — <a href="https://tailwindcss.com/docs/breakpoints#custom-media-queries">Custom media queries</a>, we can make our own screen, which means tailwindcss command generates CSS like this:
<pre>@media (prefers-color-scheme: dark) { .dark\:container { width: 100%; } @media (min-width: 640px) { .dark\:container { max-width: 640px; } } . .</pre>
Let's execute npm run start again to generate a new tailwind.css and check the file 👀
<figure><img alt="" src="https://cdn-images-1.medium.com/max/477/1*J6VJPdZ-8lpCGkM-zG4e2w.png"></figure>It’s working!
<h3>Dark Mode</h3>
Let’s make your app dark mode available 😈
Just add dark:bg-black dark:text-white on App.js.
<pre>import React from 'react'; import './tailwind.css'; function App() { return ( &lt;div className="App dark:bg-black dark:text-white"&gt; &lt;header className="App-header text-center"&gt; &lt;p&gt; Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload. &lt;/p&gt; &lt;a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" &gt; Learn React &lt;/a&gt; &lt;/header&gt; &lt;/div&gt; ); } export default App;</pre>
Now it has Dark Mode 👽
<figure><img alt="" src="https://cdn-images-1.medium.com/max/580/1*7h3qjHdKTnjT4iCMgzGuKg.gif"></figure>Thank you for reading!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8d7e1667b3db" width="1" height="1" alt="">

【Step by Step】How to implement Dark Mode with Tailwind CSS on React

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s2MXTKr_KUHTfwUkX-DLpA.png"></figure>What do you do when you are not sure that the object variable has the specific property?
My recent answer is Optional chaining.
<h3>What is Optional chaining?</h3>
<blockquote>The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.</blockquote>
<blockquote><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining (?.) — JavaScript | MDN</a></blockquote>
I just quoted from MDN haha.
It basically makes it easier to access a property within an object.
<h3>How does it make React App development easier?</h3>
Imagine you fetch the user data from Firebase Authentication.
<a href="https://medium.com/media/8d6beaee1f1457161c89cb77e20d8759/href">https://medium.com/media/8d6beaee1f1457161c89cb77e20d8759/href</a>What’s gonna happen?
<pre>TypeError: Cannot read property 'dispayName' of null</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BR8afqV7CkKqDVCJ5gOi_g.png"></figure>Yes, this is what happens.
<h3>Conventional way</h3>
<h4>Trinomial calculus</h4>
I always used Trinomial calculus before Optional Chaining in this case.
In this pattern, your React app renders &lt;div&gt;Loading…&lt;/div&gt; initially and then show &lt;h1&gt;Welcome, Your Name&lt;/h1&gt; after fetching data from Firebase.
I kinda like this because &lt;h1&gt; doesn’t get rendered until it’s needed to be rendered.
<a href="https://medium.com/media/4905d5b3012ea31c76fcf20988ee9aee/href">https://medium.com/media/4905d5b3012ea31c76fcf20988ee9aee/href</a><h4>Nullish coalescing Operator</h4>
<a href="https://medium.com/media/5a6369bc09a5e4e12589ac8304dbb804/href">https://medium.com/media/5a6369bc09a5e4e12589ac8304dbb804/href</a><h3>Use Optional chaining</h3>
Just adding one ?! Deadly simple, isn’t it!?
<a href="https://medium.com/media/e397e5778fa61be2b1dcf0b9cb7473b3/href">https://medium.com/media/e397e5778fa61be2b1dcf0b9cb7473b3/href</a><h3>Conclusion</h3>
I think most of the time Optional chaining is very handy and speeds up your development.
Count on Trinomial calculus when you need to show other elements while the object or property is not valid.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2423004197b6" width="1" height="1" alt="">

How does Optional Chaining make React App development easier?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*o4wr4gbJ0l2m-a51Te7XRw.png"></figure>Hi, Taishi here. How have you been?
For the past few months, I’ve been trying to launch a startup in Vancouver.
And the idea I am thinking of is the “virtual co-working space” concept.
I am validating this idea with a platform called Pragli as an MVP.
Because of COVID-19, I feel there are so many chat platforms are coming to the market.
This is some example.
<ul>
<li><a href="https://pragli.com/">Pragli</a></li>
<li><a href="https://teemyco.com/">Teemyco</a></li>
<li><a href="https://remotehour.com/">Remotehour</a></li>
<li><a href="https://spatial.chat/">SpatialChat</a></li>
<li><a href="https://www.airmeet.com/">Airmeet</a></li>
<li><a href="https://remo.co/">Remo</a></li>
</ul>
All of these look so fun and interesting!
<h3>I wanna build an online community tool</h3>
I love making a place you can belong to online such as a social network service.
I think Pragli is very good, it’s a great tool for work just like Slack, but with game-like avatars to show off the users and create a more community feel.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*o4wr4gbJ0l2m-a51Te7XRw.png"></figure><h3>Pragli is progressive</h3>
On the other hand, as you can see when you use it, it’s quite quirky. For example, when you enter a room, the microphone automatically turns to sound. Why, in my case, I had to go to the trouble of manually setting it to Mute every time. I think most people are still resistant to having their sound leaking out to the other person all the time or something like that. Even in a real coworking space, just because you walk into a certain room doesn’t mean you’re always going to talk to the people in there.
Pragli is pretty unique.
<h3>It’s a challenge to get users to keep the app open at all times as you can imagine…</h3>
I keep the Pragli desktop app open all the time.
That’s how I’ve noticed that the app is pretty heavy. That makes my PC run slow. I wish it was as light as Discord or Telegram.
<h3>I had a fun experience with the virtual co-working space</h3>
On the other hand, it was a lot of fun to video chat with people I barely know.
Coworking space is a space where you see people every day but you’ve never talked to them before, so I think it was fun to realize that at Pragli this time as well.
I had a late-night video chat with them. It was fun.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aGPPE0Ol4MnxKFzlZqf_sw.png"></figure>Some people said that just displaying the avatars of people online gave them a sense of security, like a sense of security that people were there, and they liked that kind of loose atmosphere.
I agree with that.
I came up with the idea of a virtual co-working space in the first place because I was always working from home and I was lonely, lol.
Even if you don’t talk to each other, just knowing that someone else is there can be comforting and inspire you to do your best.
That’s what I felt strongly in this Pragli experiment.
<h3>One more week for the experiment</h3>
Here is the invitation link for our Pragli!
<a href="https://pragli.com/team/virtual-coworking-space/-MHPW5oMkut4w2p8qLN4">https://pragli.com/team/virtual-coworking-space/-MHPW5oMkut4w2p8qLN4</a>
Please feel free to talk to me when you join it👨‍🎤
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1364f99c059" width="1" height="1" alt="">

Experimenting a virtual co-working concept on Pragli

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vE63P9KOAzL1aY7CrjE51w.png"></figure>Oh…I am so sleepy…because I launched AskMakers 2.0 on Product Hunt and I have been monitoring it almost without sleeping😪
The first version of it was launched about 10 months ago. I worked so hard on it and it got over 100 upvotes within 24 hours for the first time🤩
To make an app useful, I sent emails to ask successful makers to join AskMakers. I am nobody, just a software developer from Tokyo (currently in Vancouver), however, some of them signed up on and support it!! Unbelievable🤯
Thank you <a href="https://twitter.com/mijustin">Justin</a>, <a href="https://twitter.com/1HaKr">Hari</a>, <a href="https://twitter.com/hyper_yolo">Amie</a>, <a href="https://twitter.com/jonathanbull">Jonathan</a>, and <a href="https://twitter.com/jtatsubana">Jaime</a>😆
After that, it took 10 months until the launch of 2.0… I always thought like I need to add more features to launch, and I felt like I can never launch it…I should not try to be perfect.
This post pushed my back very hard.
<a href="https://medium.com/@kitze/the-saddest-just-ship-it-story-ever-b82707e37735">The saddest “Just Ship It” story ever</a>
Eventually, I decide to launch AskMakers 2.0!
<h3></h3>
The new version of AskMakers is now LIVE on @ProductHunt 📢This is a Q&amp;A web app for makers (You can say Quora for makers)💡Thank you for the support @mijustin @1HaKr @hyper_yolo @jonathanbull @jtatsubana and many makers👩‍💻🧑‍💻🙏https://t.co/ufuB8O6JPb
BTW, it’s live on Product Hunt. Please check it <a href="https://www.producthunt.com/posts/askmakers-2-0">AskMakers 2.0 — Ask experienced makers questions💡</a>
<h3>🛠 New stack</h3>
I know most users don’t care what kind of technology the product use but…yeah, I just did. ・Next.js for SSR ・Totally new design with Tailwind CSS I used to use Nuxt.js and Bulma for AskMakers, but I wanted to make SSR and use React, so I chose Next.js.
<h3>🎨 Renewed UI</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Hw8Etp7u6EpOhTj6iCcg5g.png"></figure>I have worked so hard to make it better for users to browse AskMakers. I am not a designer so I did research, learned, and applied my new knowledge to AskMakers.
<h3>👨‍🎤 New featured makers</h3>
<a href="https://twitter.com/jonathanbull">Jonathan</a> and <a href="https://twitter.com/jtatsubana">Jaime</a> joined AskMakers 2.0. Thank you!
<h3>🔍 Search questions</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/714/1*k6971X3OcPrpDRR6GC4GSA.gif"></figure><h3>🚀 Categories</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/772/1*gL1BV4gN2H1qWZivGoophg.png"></figure>When I sent an email to <a href="https://medium.com/u/8617dea13724">Danielle Johnson</a> about AskMakers, she told me the categories and search functionality are absolutely necessary for AskMakers. I agree! What kind of web applications like this doesn’t have these functionalities? I wrote a code and implemented it ASAP. Thank you for the kind feedback Danielle😊
<h3>💬 Comment on the answer</h3>
The discussion is very important, therefore I added the commenting feature!
<h3>📧 Email notifications</h3>
You receive an email notification when you receive an answer, an upvote on your answer, your answer gets bookmarked, or someone comments on your answer. You can turn off the notifications on your setting page👌
<h3>🔮 More to come</h3>
I am very excited about the future!! I talked with my friend <a href="https://dev.to/shyamady">@shyamady</a> and I think I got a very promising idea for the v3.0. Can’t wait to show you!
Stay tuned👨🏻‍🎤
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=377c3da5a7e1" width="1" height="1" alt="">

【Finally…】Announcing the Official Launch of AskMakers v2.0

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9UzbgJ4lJ4jNBoo0SkGFVA.png"></figure><h3>Make your npm package conformable to TypeScript</h3>
So last time we made an NPM package with JavaScript.
<a href="https://medium.com/@TaishiKato/how-i-published-my-first-npm-package-5388564bf643">How I published my first npm package</a>
Yes. It’s great! We made it!
BUT, there is one problem. We can not use it with TypeScript projects out of the box because there is no type definition file and TS project can’t know any types of this NPM package.
This time we will make a TypeScript file and generate a type definition file.
<h3>Change your index.js file to index.ts</h3>
Just change the extension of the file and update the source code.
JavaScript
<a href="https://medium.com/media/3d3d91a125efcc61c1336b766d4024d6/href">https://medium.com/media/3d3d91a125efcc61c1336b766d4024d6/href</a>TypeScript
<a href="https://medium.com/media/c2810fc9250edc76b13781e824304a51/href">https://medium.com/media/c2810fc9250edc76b13781e824304a51/href</a>They are almost the same this time.
<h3>Initialize with tsc command</h3>
Let’s initialize your project with tsc command, which generates tsconfig.json file.
<pre>$ tsc --init message TS6071: Successfully created a tsconfig.json file.</pre>
<h3>Add "declaration": true to your tsconfig.json</h3>
We should do this to generate a tsconfig.json file when we execute yarn build.
Your tsconfig.json looks like below.
<pre>{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "strict": true, "esModuleInterop": true }, "exclude": [ "node_modules", "dist" ] }</pre>
<h3>Add "types": "index.d.ts" to your package.json</h3>
By adding this, a type definition file will be generated as index.d.ts.
So your package.json looks like below.
<pre>{ "name": "<a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>", "version": "2.2.0", "description": "generate slug string", "main": "index.js", "types": "index.d.ts", "repository": "<a href="https://github.com/taishikato/slug-generator">https://github.com/taishikato/slug-generator</a>", "author": "taishikato", "license": "MIT", "private": false, "scripts": { "build": "tsc" }, "dependencies": { "uuid": "^7.0.2" }, "keywords": [ "slug", "npm", "package", "taishikato", "slug generator" ], "devDependencies": { "<a href="http://twitter.com/types/uuid">@types/uuid</a>": "^7.0.2", "typescript": "^3.8.3" } }</pre>
<h3>Add .npmignore</h3>
This file is the key.
npm command usually checks .gitignore file to see which file should be excluded in the package.
You need to add .npmignore when the files which should be excluded are different from .gitignore. In this case, npm command does not check .gitignore, checks only .npmignore.
Your .npmignore looks like below
<pre>.gitignore yarn.lock node_modules index.ts</pre>
That’s it! Easy peasy!
Thank you!!
<h3>taishikato/slug-generator: Slug generator for blog posts or any other user-generated-contents</h3>
<a href="https://github.com/taishikato/slug-generator">taishikato/slug-generator</a>
<h3>Portfolio</h3>
<a href="https://taishikato.com/">Taishi Kato</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=242e79282423" width="1" height="1" alt="">

Make your npm package for typescript

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BUQCqF2C1cQIUopenNMbIA.png"></figure>I thought making and publishing an NPM package isn’t easy.
No. It’s so easy! Your package doesn’t have to be very tricky, unique and awesome.
You can publish your favorite utility code and install it on your project with npm or yarn.
All I want to say is…it’s not complicated. We can do it!
<h3>TL;DR</h3>
This time I publish an npm package called <a href="https://www.npmjs.com/package/@taishikato/slug-generator">@taishikato/slug-generator</a> which generates slug string from text such as blog post title.
e.i. The string below is the slug for this article.
<pre>how-i-published-my-first-npm-package-5388564bf643</pre>
<h3>How to publish</h3>
<h4>Create an account</h4>
Let’s make an npm account <a href="https://www.npmjs.com/signup">here</a>.
<h4>Login via CLI</h4>
npm command takes care of you.
<pre>$ npm adduser Username: your-username Password: Email: (this IS public) <a href="mailto:taishi.k0903@gmail.com">y</a>our-email Logged in as your-username on <a href="https://registry.npmjs.org/">https://registry.npmjs.org/</a>.</pre>
Great. Now you are logged in.
Then make a directory for the package.
<pre>$ mkdir slug-generator &amp;&amp; cd $_</pre>
Now you are under the slug-generator directory.
We want to make our package <a href="https://docs.npmjs.com/misc/scope">scoped package</a> to use the name (slug-generator in this case) that already is taken. Execute yarn init to generate a package.json. You will be asked some questions so please answer them.
<pre>$ yarn init yarn init v1.16.0 warning ../../package.json: No license field question name (slug-generator): <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a> question version (1.0.0): question description: generate slug string question entry point (index.js): question repository url: <a href="https://github.com/taishikato/slug-generator">https://github.com/taishikato/slug-generator</a> question author: taishikato question license (MIT): question private: false success Saved package.json ✨ Done in 68.06s.</pre>
Then you need to use npm publish — access=public to publish public package.
<pre>$ npm publish --access=public npm notice npm notice 📦 <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>@1.0.0 npm notice === Tarball Contents === npm notice 258B package.json npm notice === Tarball Details === npm notice name: <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a> npm notice version: 1.0.0 npm notice package size: 257 B npm notice unpacked size: 258 B npm notice shasum: bf71ac427082c283c6d2cf600f7d1691ab0b5964 npm notice integrity: sha512-clwDAYf181ObB[...]5pwvhOJbTUAiA== npm notice total files: 1 npm notice + <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>@1.0.0</pre>
All done. Too quick? But yes version 1.0.0 of your package is on <a href="https://www.npmjs.com/">npm</a>.
But we still don’t have a README, LICENSE file, and actual code!!!
<h3>Add README!</h3>
Yes, we need a blazing README.
Go to <a href="https://shields.io/">shields.io</a> to generate budgets and show how cool we are.
At first, we generate a budge to display the version of your package on npm.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/904/1*S6n6HWNzeM3Nv0pPd90HLA.png"></figure>Next, we got an error because we don’t have any code yet… but generate it anyway.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SKn0T1c9_KS9E_KD3KIGDw.png"></figure>Make a README.md file and paste the budgets you made.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0Ui75GVUwtxrINxUMai7Hg.png"></figure><h3>Let’s add some code.</h3>
Just simple code here.
<a href="https://medium.com/media/4d265b2791708431e74deeeb8647c1f8/href">https://medium.com/media/4d265b2791708431e74deeeb8647c1f8/href</a><h3>License</h3>
Hit this page (Insights→Community) on Github.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*khlPrVoNsvNuBBhojRMqRA.png"></figure>Choose MIT anyway.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FuEiyljyusbuWPZG4U3_tQ.png"></figure><h3>Version</h3>
By the way, npm uses <a href="https://semver.org/">Semantic Versioning</a>. You don’t need to know the detail of it now but the main rules and concepts are
Given a version number MAJOR.MINOR.PATCH, increment the:
<ol>
<li>MAJOR version when you make incompatible API changes,</li>
<li>MINOR version when you add functionality in a backwards compatible manner, and</li>
<li>PATCH version when you make backwards compatible bug fixes.</li>
</ol>
We need to change the major version so use the command below.
<pre>$ npm version major v2.0.0</pre>
<h3>Publish!</h3>
<pre>$ npm publish npm notice npm notice 📦 <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>@2.0.0 npm notice === Tarball Contents === npm notice 1.1kB LICENSE npm notice 496B index.js npm notice 304B package.json npm notice 901B README.md npm notice === Tarball Details === npm notice name: <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a> npm notice version: 2.0.0 npm notice package size: 1.7 kB npm notice unpacked size: 2.8 kB npm notice shasum: a43b58c8d1434faaeaf207778619981d5b372bd5 npm notice integrity: sha512-u4jsqO8B7j3PY[...]kfdDVtGHT4+Zw== npm notice total files: 4 npm notice + <a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>@2.0.0</pre>
<h3>Add some keywords on package.json</h3>
<pre>{ "name": "<a href="http://twitter.com/taishikato/slug-generator">@taishikato/slug-generator</a>", "version": "2.0.0", "description": "generate slug string", "main": "index.js", "repository": "<a href="https://github.com/taishikato/slug-generator">https://github.com/taishikato/slug-generator</a>", "author": "taishikato", "license": "MIT", "private": false, "dependencies": { "uuid": "^7.0.2" }, "keywords": [ "slug", "npm", "package", "taishikato", "slug generator" ] }</pre>
<h3>Thank you!</h3>
Now you can ship your code on npm! You can do it for your future projects. You can do it for the developers’ community.
It’s great for any reason. What are you waiting for?
Let’s make a package.json and output something in this world!
<h3>Reference</h3>
Thank you <a href="https://medium.com/u/408ab844d456">Jonathan Wood</a> for the great article!
<a href="https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/">How to make a beautiful, tiny npm package and publish it</a>
<h3>🖊️taishikato/slug-generator🖋️</h3>
<a href="https://github.com/taishikato/slug-generator">taishikato/slug-generator</a>
<h3>On Linkedin</h3>
<a href="https://www.linkedin.com/pulse/how-i-published-my-first-npm-package-taishi-kato/">https://www.linkedin.com/pulse/how-i-published-my-first-npm-package-taishi-kato/</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5388564bf643" width="1" height="1" alt="">

MY PROJECTS

OSS Contributions

Skills & Experiences

BLOG