- How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
Today, I built a curated list of the tech that I use with Astro and Tailwind CSS.

▶ Website - What I use
https://uses.craftz.dog/
▶ Source code
https://github.com/craftzdog/craftzdog-uses
▶...

Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
Today, I built a curated list of the tech that I use with Astro and Tailwind CSS.

▶ Website - What I use
https://uses.craftz.dog/
▶ Source code
https://github.com/craftzdog/craftzdog-uses
▶ Download my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=3_JE76PKBWE
▶ Indkrop live export tool
https://github.com/inkdropapp/inkdrop-live-export
▶ Stack
* Astro - Static Website Framework
* @TailwindLabs - CSS Framework
* React - Component-based UI framework for JS
* Headless UI - Unstyled interactive components
* React Icons - Icon set
* Inkdrop live export tool
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ My hacked version of Hyper
https://github.com/craftzdog/hyper
▶ Hotel it. Osaka Shinmachi
https://hotelit.jp/en/

Follow me online here:
▶ Twitter(English) https://twitter.com/inkdrop_app
▶ Twitter(日本語) https://twitter.com/craftzdog
▶ Instagram https://instagram.com/craftzdog
▶ Medium Blog https://blog.inkdrop.app/
▶ DEV blog https://dev.to/craftzdog
▶ GitHub https://github.com/craftzdog/
▶ Subscribe to my newsletter https://www.devas.life/

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/

00:00 Intro
01:15 Heading to a hotel
04:34 Create new Astro project
07:13 Configure Prettier
07:22 Add ESLint
08:57 Add ReactS and configure TypeScript
11:45 Add TailwindCSS and a custom Google font
15:06 Remove the existing styles
16:26 Update the website information
17:36 Body component
19:00 Header component
22:24 Add a GitHub icon
24:05 Add a paw logo
25:41 Support toggling light/dark themes
33:26 Content component
36:48 Add a page introduction
39:52 Add a page introduction
45:01 The list of posts
48:48 Display post thumbnails
51:19 Fix a bug which causes the screen to flash when dark theme is applied
53:13 Style blog posts
57:33 Customize the Markdown processor to at proper stvles
01:00:31 Remove the example Markdown files
01:01:04 Change the cover photo
01:01:35 Custom 404 page
01:04:08 Integrate with Inkdrop in order to use it as a CMS
01:14:51 Create posts with Inkdrop
01:29:20 Change the post order
01:29:46 Add cateories
01:21:18 Navigation drondown menu
01:42:01 Add category pages
01:51:00 Fix a bug where themes still not being toggled on loading
01:51:53 'Created with' section
01:57:04 Thanks for watching

#codewithme #astrojs #tailwindcss

#Productivity #Solo dev #Programming #Indie dev #JavaScript #CodeWithMe #Tailwind CSS #Astro #AstroJS

Intro - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Intro

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:00:00 - 00:01:15

@ Inkdrop misspelled.. Eagle eyes 😝 - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

@ Inkdrop misspelled.. Eagle eyes 😝

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:00:48 - 01:57:24

I don't know if you can change that but you have a typo in inkdrop. - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

I don't know if you can change that but you have a typo in inkdrop.

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:00:52 - 01:57:24

Heading to a hotel - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Heading to a hotel

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:01:15 - 00:04:34

Is it the bridge as in King Of Fighters? The one near the old SNK's headquarters? :) It is also indeed in Osaka! :) - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Is it the bridge as in King Of Fighters? The one near the old SNK's headquarters? :) It is also indeed in Osaka! :)

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:01:55 - 01:57:24

to be continued (the guy going out of the corner) - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

to be continued (the guy going out of the corner)

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:02:19 - 01:57:24

What is the feet of the macbook in ? - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

What is the feet of the macbook in ?

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:04:20 - 01:57:24

Create new Astro project - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Create new Astro project

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:04:34 - 00:07:13

How can i open browser in terminal like on windows? If anyone knows please respond - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

How can i open browser in terminal like on windows? If anyone knows please respond

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:05:56 - 01:57:24

Configure Prettier - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Configure Prettier

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:07:13 - 00:07:22

Add ESLint - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add ESLint

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:07:22 - 00:08:57

Add ReactS and configure TypeScript - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add ReactS and configure TypeScript

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:08:57 - 00:11:45

Add TailwindCSS and a custom Google font - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add TailwindCSS and a custom Google font

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:11:45 - 00:15:06

Remove the existing styles - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Remove the existing styles

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:15:06 - 00:16:26

Update the website information - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Update the website information

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:16:26 - 00:17:36

Body component - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Body component

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:17:36 - 00:19:00

Header component - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Header component

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:19:00 - 00:22:24

Add a GitHub icon - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add a GitHub icon

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:22:24 - 00:24:05

Add a paw logo

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:24:05 - 00:25:41

Support toggling light/dark themes - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Support toggling light/dark themes

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:25:41 - 00:33:26

Content component - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Content component

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:33:26 - 00:36:48

Add a page introduction - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add a page introduction

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:39:52 - 00:45:01

The list of posts - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

The list of posts

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:45:01 - 00:48:48

Display post thumbnails - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Display post thumbnails

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:48:48 - 00:51:19

Fix a bug which causes the screen to flash when dark theme is applied - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Fix a bug which causes the screen to flash when dark theme is applied

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:51:19 - 00:53:13

Style blog posts - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Style blog posts

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:53:13 - 00:57:33

Customize the Markdown processor to at proper stvles - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Customize the Markdown processor to at proper stvles

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

00:57:33 - 01:00:31

Remove the example Markdown files - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Remove the example Markdown files

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:00:31 - 01:01:04

Change the cover photo - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Change the cover photo

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:01:04 - 01:01:35

Custom 404 page - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Custom 404 page

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:01:35 - 01:04:08

Integrate with Inkdrop in order to use it as a CMS - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Integrate with Inkdrop in order to use it as a CMS

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:04:08 - 01:14:51

Create posts with Inkdrop - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Create posts with Inkdrop

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:14:51 - 01:29:20

Navigation drondown menu - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Navigation drondown menu

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:21:18 - 01:42:01

Change the post order - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Change the post order

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:29:20 - 01:29:46

Add cateories - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add cateories

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:29:46 - 01:21:18

I can hear your desk vibrating and making uncomfortable noises as you type, especially from .I'm so lucky to be subscribing to your channel. Keep it up🔥 - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

I can hear your desk vibrating and making uncomfortable noises as you type, especially from .I'm so lucky to be subscribing to your channel. Keep it up🔥

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:42:00 - 01:57:24

Add category pages - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Add category pages

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:42:01 - 01:51:00

Fix a bug where themes still not being toggled on loading - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Fix a bug where themes still not being toggled on loading

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:51:00 - 01:51:53

'Created with' section - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

'Created with' section

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:51:53 - 01:57:04

Thanks for watching - How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Thanks for watching

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

2022年09月20日　

01:57:04 - 01:57:24

チャンネル登録

devaslife

🎉 170,000 人達成！　 📈 予測：20万人まであと840日（2025年9月25日）　

※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。

概要動画一覧タイムテーブルチャンネル分析

Timetable

動画タイムテーブル

よく話題になっている単語を表示する

動画数：62件

字幕を含める

Intro - How I take tech notes as a note app author

Intro

How I take tech notes as a note app author

2023年05月30日　

00:00:00 - 00:01:23

The right tool for the right task - How I take tech notes as a note app author

The right tool for the right task

How I take tech notes as a note app author

2023年05月30日　

00:01:23 - 00:03:18

Embrace your imperfection - How I take tech notes as a note app author

Embrace your imperfection

How I take tech notes as a note app author

2023年05月30日　

00:03:18 - 00:04:25

4 steps for taking tech notes - How I take tech notes as a note app author

4 steps for taking tech notes

How I take tech notes as a note app author

2023年05月30日　

00:04:25 - 00:05:38

1. Identify the problem - How I take tech notes as a note app author

1. Identify the problem

How I take tech notes as a note app author

2023年05月30日　

00:05:38 - 00:08:31

2. Research the possible solutions - How I take tech notes as a note app author

2. Research the possible solutions

How I take tech notes as a note app author

2023年05月30日　

00:08:31 - 00:10:59

3. Validate the solutions - How I take tech notes as a note app author

3. Validate the solutions

How I take tech notes as a note app author

2023年05月30日　

00:10:59 - 00:11:37

What worked well - How I take tech notes as a note app author

What worked well

How I take tech notes as a note app author

2023年05月30日　

00:11:37 - 00:13:03

What didn't work - How I take tech notes as a note app author

What didn't work

How I take tech notes as a note app author

2023年05月30日　

00:13:03 - 00:14:48

4. Reuse the knowledge - How I take tech notes as a note app author

4. Reuse the knowledge

How I take tech notes as a note app author

2023年05月30日　

00:14:48 - 00:15:02

Refer to code snippets - How I take tech notes as a note app author

Refer to code snippets

How I take tech notes as a note app author

2023年05月30日　

00:15:02 - 00:15:35

Learn from previous solutions to common errors - How I take tech notes as a note app author

Learn from previous solutions to common errors

How I take tech notes as a note app author

2023年05月30日　

00:15:35 - 00:16:07

Share what you learned - How I take tech notes as a note app author

Share what you learned

How I take tech notes as a note app author

2023年05月30日　

00:16:07 - 00:16:49

Wrap up - How I take tech notes as a note app author

Wrap up

How I take tech notes as a note app author

2023年05月30日　

00:16:49 - 00:17:28

Intro - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Intro

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:00:00 - 00:01:02

Project description - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Project description

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:01:02 - 00:04:18

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Yuki Okabe 様　

00:01:03 - 01:12:31

Create a new Next.js project with Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a new Next.js project with Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:04:18 - 00:07:23

Prepare using OpenAl - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare using OpenAl

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:07:23 - 00:08:38

Learn how to write Python with ChatGPT - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Learn how to write Python with ChatGPT

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:08:38 - 00:11:49

Transcribe the audio with the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Transcribe the audio with the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:11:49 - 00:14:46

you mean prompt right? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

you mean prompt right?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Aung Zan Baw 様　

00:13:24 - 01:12:31

Try invoking the completion API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Try invoking the completion API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:14:46 - 00:17:35

Get input data from stdin - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Get input data from stdin

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:17:35 - 00:19:26

Load and parse SRT data - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Load and parse SRT data

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:19:26 - 00:21:36

Translate each subtitle - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Translate each subtitle

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:21:36 - 00:24:00

Check out Radix UI and Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Check out Radix UI and Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:24:00 - 00:25:26

Prepare building the UI - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare building the UI

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:25:26 - 00:26:29

Create a form to specify a video URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a form to specify a video URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:26:29 - 00:31:22

Implement event handling - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement event handling

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:31:22 - 00:33:13

Create a component to render the command outputs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a component to render the command outputs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:33:13 - 00:36:40

Add tabs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add tabs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:36:40 - 00:42:02

Add an API routing - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add an API routing

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:42:02 - 00:42:47

Implement an audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement an audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:42:47 - 00:48:09

Implement a transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:48:09 - 00:50:17

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;) - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;)

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Ice Livin 様　

00:50:06 - 01:12:31

Implement a translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:50:17 - 00:53:22

Connect the components with states - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Connect the components with states

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:53:22 - 00:55:42

Extract a video ID from the YouTube URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Extract a video ID from the YouTube URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:55:42 - 00:57:39

Progressively update the output by a callback function - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Progressively update the output by a callback function

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:57:39 - 01:00:12

Fix scroll overflow issue - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix scroll overflow issue

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:00:12 - 01:00:55

Invoke the audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:00:55 - 01:04:50

Invoke the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:04:50 - 01:07:28

Fix the transcription prompt not working - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix the transcription prompt not working

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:07:28 - 01:07:51

Invoke the translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:07:51 - 01:10:42

Finish it up - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Finish it up

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:10:42 - 01:10:56

Demo - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Demo

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:10:56 - 01:12:31

Furna - Lotus - [playlist] Melodies for coding | Focus & Chill

Furna - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:00:00 - 00:04:02

Drawing - LUCHS - [playlist] Melodies for coding | Focus & Chill

Drawing - LUCHS

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:04:02 - 00:06:22

And Lucie Dreams - Lotus - [playlist] Melodies for coding | Focus & Chill

And Lucie Dreams - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:06:22 - 00:09:57

Mint Conditions - Dusty Decks - [playlist] Melodies for coding | Focus & Chill

Mint Conditions - Dusty Decks

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:09:57 - 00:12:08

Cousin Stratus - Lotus - [playlist] Melodies for coding | Focus & Chill

Cousin Stratus - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:12:08 - 00:15:13

Tiny Room Bop - [ocean jams] - [playlist] Melodies for coding | Focus & Chill

Tiny Room Bop - [ocean jams]

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:15:13 - 00:17:33

Parallax - Luwaks - [playlist] Melodies for coding | Focus & Chill

Parallax - Luwaks

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:17:33 - 00:20:39

Lisbon - Shiruky - [playlist] Melodies for coding | Focus & Chill

Lisbon - Shiruky

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:20:39 - 00:23:39

I'll Follow - Mochas - [playlist] Melodies for coding | Focus & Chill

I'll Follow - Mochas

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:23:39 - 00:26:12

Lupi - Sayuri Hayashi Egnell - [playlist] Melodies for coding | Focus & Chill

Lupi - Sayuri Hayashi Egnell

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:26:12 - 00:28:17

Tau - Osoku - [playlist] Melodies for coding | Focus & Chill

Tau - Osoku

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:28:17 - 00:31:12

Have a productive day - [playlist] Melodies for coding | Focus & Chill

Have a productive day

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:31:12 - 00:31:23

Hello - How to create Ghibli-style trees with three.js

Hello

How to create Ghibli-style trees with three.js

2023年02月16日　

00:00:00 - 00:00:44

Unboxing a new MacBook Pro - How to create Ghibli-style trees with three.js

Unboxing a new MacBook Pro

How to create Ghibli-style trees with three.js

2023年02月16日　

00:00:44 - 00:01:54

where I can get this laptop stand? it looks cool - How to create Ghibli-style trees with three.js

where I can get this laptop stand? it looks cool

How to create Ghibli-style trees with three.js

2023年02月16日　 Gabriel 様　

00:01:40 - 00:47:52

Heading to Osaka Castle Park - How to create Ghibli-style trees with three.js

Heading to Osaka Castle Park

How to create Ghibli-style trees with three.js

2023年02月16日　

00:01:54 - 00:04:00

Create a new React project - How to create Ghibli-style trees with three.js

Create a new React project

How to create Ghibli-style trees with three.js

2023年02月16日　

00:04:00 - 00:05:12

@ no one likes the default macbook keyboard man - How to create Ghibli-style trees with three.js

@ no one likes the default macbook keyboard man

How to create Ghibli-style trees with three.js

2023年02月16日　 Jagic Yooo 様　

00:04:10 - 00:47:52

Install libraries - How to create Ghibli-style trees with three.js

Install libraries

How to create Ghibli-style trees with three.js

2023年02月16日　

00:05:12 - 00:05:31

Make the page background transparent - How to create Ghibli-style trees with three.js

Make the page background transparent

How to create Ghibli-style trees with three.js

2023年02月16日　

00:05:31 - 00:06:32

Remove the template content - How to create Ghibli-style trees with three.js

Remove the template content

How to create Ghibli-style trees with three.js

2023年02月16日　

00:06:32 - 00:06:53

Integrate React Three Fiber into the project - How to create Ghibli-style trees with three.js

Integrate React Three Fiber into the project

How to create Ghibli-style trees with three.js

2023年02月16日　

00:06:53 - 00:08:49

Add a simple scene - How to create Ghibli-style trees with three.js

Add a simple scene

How to create Ghibli-style trees with three.js

2023年02月16日　

00:08:49 - 00:14:33

Add a ground plane for shadows - How to create Ghibli-style trees with three.js

Add a ground plane for shadows

How to create Ghibli-style trees with three.js

2023年02月16日　

00:14:33 - 00:17:19

Import a tree model - How to create Ghibli-style trees with three.js

Import a tree model

How to create Ghibli-style trees with three.js

2023年02月16日　

00:17:19 - 00:18:28

Add the tree model to the scene - How to create Ghibli-style trees with three.js

Add the tree model to the scene

How to create Ghibli-style trees with three.js

2023年02月16日　

00:18:28 - 00:19:37

Use Standard Material - How to create Ghibli-style trees with three.js

Use Standard Material

How to create Ghibli-style trees with three.js

2023年02月16日　

00:19:37 - 00:20:50

Use Toon Material - How to create Ghibli-style trees with three.js

Use Toon Material

How to create Ghibli-style trees with three.js

2023年02月16日　

00:20:50 - 00:23:25

Rotate the tree object - How to create Ghibli-style trees with three.js

Rotate the tree object

How to create Ghibli-style trees with three.js

2023年02月16日　

00:23:25 - 00:24:55

Create a simple shader - How to create Ghibli-style trees with three.js

Create a simple shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:24:55 - 00:28:05

Use a custom toon shader - How to create Ghibli-style trees with three.js

Use a custom toon shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:28:05 - 00:32:10

Tweak the toon shader - How to create Ghibli-style trees with three.js

Tweak the toon shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:32:10 - 00:35:11

Start creating a Ghibli shader - How to create Ghibli-style trees with three.js

Start creating a Ghibli shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:35:11 - 00:40:01

Define variables - How to create Ghibli-style trees with three.js

Define variables

How to create Ghibli-style trees with three.js

2023年02月16日　

00:40:01 - 00:42:12

Calculate brightness - How to create Ghibli-style trees with three.js

Calculate brightness

How to create Ghibli-style trees with three.js

2023年02月16日　

00:42:12 - 00:44:25

Add gradient colors - How to create Ghibli-style trees with three.js

Add gradient colors

How to create Ghibli-style trees with three.js

2023年02月16日　

00:44:25 - 00:44:53

Create another color variation - How to create Ghibli-style trees with three.js

Create another color variation

How to create Ghibli-style trees with three.js

2023年02月16日　

00:44:53 - 00:47:29

Thank you for watching - How to create Ghibli-style trees with three.js

Thank you for watching

How to create Ghibli-style trees with three.js

2023年02月16日　

00:47:29 - 00:47:52

Intro - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Intro

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:00:00 - 00:02:34

Add note list header component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add note list header component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:02:34 - 00:07:39

Create TextInput restyle component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create TextInput restyle component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:07:39 - 00:14:24

Add a TextInput to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a TextInput to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:14:24 - 00:20:27

Move the theme picker to the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Move the theme picker to the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:20:27 - 00:25:39

Add a left header bar button that can transform i - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a left header bar button that can transform i

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:25:39 - 00:37:07

Add a clear button to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a clear button to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:37:07 - 00:38:55

Implement the header bar animations - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement the header bar animations

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:38:55 - 00:43:19

Enable tablet layouts - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Enable tablet layouts

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:43:19 - 00:44:29

Add a navbar to the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a navbar to the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:44:29 - 00:53:37

Add editor state atom - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add editor state atom

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:53:37 - 00:56:48

Create a note list screen for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:56:48 - 01:03:07

Use 'useSetAtom' for better performance - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Use 'useSetAtom' for better performance

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:03:07 - 01:03:21

Make the screen responsive - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Make the screen responsive

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:03:21 - 01:11:08

Create a note list screen for tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:11:08 - 01:13:47

Create a three-column lavout component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a three-column lavout component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:13:47 - 01:28:12

Memoize props of some components to improve - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Memoize props of some components to improve

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:28:12 - 01:29:33

Hide left view in portrait mode - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Hide left view in portrait mode

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:29:33 - 01:30:11

Toggle the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Toggle the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:30:11 - 01:31:05

Add the sidebar to the left view - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add the sidebar to the left view

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:31:05 - 01:32:09

Implement detail screens for phones and tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement detail screens for phones and tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:32:09 - 01:40:02

Update the stack navigator for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Update the stack navigator for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:40:02 - 01:40:19

Display note body on the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Display note body on the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:40:19 - 01:44:45

Ending - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Ending

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:44:45 - 01:45:15

Loading...

コラボ他の人とコラボする

5

5

自動再生読上