- How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've learned how to create animated components on React Native by building a simple ToDo app.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.i...

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've learned how to create animated components on React Native by building a simple ToDo app.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=k2h7usLLBhY
▶ ToDo app source code
https://github.com/craftzdog/react-native-animated-todo
https://github.com/craftzdog/react-native-checkbox-reanimated
▶ Ingredients
* React Native - ReactJS-based framework that can use native platform capabilities
* Expo - Toolset for building and delivering RN apps
* React Navigation(v6) - Routing and navigation
* NativeBase(v3) - Themable component library
* React Native Reanimated - Animations
* React Native SVG - Drawing SVG
* Moti - Helper module for Reanimated 2
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ My terminal set up
https://www.youtube.com/watch?v=KKxhf50FIPI
▶ My NeoVim set up
https://www.youtube.com/watch?v=FW2X1CXrU1w
▶ My desk setup
* https://www.youtube.com/watch?v=1OFDMwDlnOE
▶ My equipments
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n
* Slider: SliderONE v2
* Terminal: Hacked Hyper - https://dev.to/craftzdog/getting-side-by-side-preview-in-a-terminal-app-hyper-20ii
* Keyboard: Keychron K2V2 - https://www.youtube.com/watch?v=-UW_c8VT2ZE

Follow me online here:
▶ Twitter https://twitter.com/inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Instagram https://instagram.com/craftzdog
▶ Subscribe to my Newsletter https://www.devas.life/

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

0:00 Digest
01:25 Create a new Expo project
06:05 Prepare to use NativeBase
08:42 Add dark theme support
13:33 Go to Kyoto!
14:49 Create SVG checkmark
18:21 Animate the checkbox
22:00 Fix a babel error
23:02 Make the checkbox able to toggle
25:19 Animate the checkbox
27:58 Create task item component
33:55 Animate task label
47:45 Integrate react-navigation and drawer
51:25 Implement swipe-to-remove interaction
01:07:09 Make task items editable
01:12:25 Create task list component
01:31:42 Animate background color
01:36:20 Add masthead
01:43:06 Fix scrollview
01:45:29 Implement sidebar content
01:56:16 Add about screen
02:05:20 Testing on Android

#ReactNative #ASMR #CodeWithMe

#Productivity #Solo dev #Programming #Indie dev #React Native #ASMR

Digest - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Digest

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:00:00 - 00:01:25

At ,I'm dying to know what you use to display content. It's smooth. - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

At ,I'm dying to know what you use to display content. It's smooth.

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:01:03 - 02:06:09

Create a new Expo project - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Create a new Expo project

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:01:25 - 00:06:05

I thought this project uses expo, the install command must be expo install react-native-screens right? - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

I thought this project uses expo, the install command must be expo install react-native-screens right?

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:03:45 - 02:06:09

In you can see the menu - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

In you can see the menu

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:05:25 - 02:06:09

Prepare to use NativeBase - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Prepare to use NativeBase

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:06:05 - 00:08:42

Add dark theme support - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Add dark theme support

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:08:42 - 00:13:33

Go to Kyoto! - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Go to Kyoto!

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:13:33 - 00:14:49

I love Kyoto , 47:33 - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

I love Kyoto , 47:33

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:13:34 - 02:06:09

Create SVG checkmark - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Create SVG checkmark

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:14:49 - 00:18:21

Fix a babel error - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Fix a babel error

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:22:00 - 00:23:02

Make the checkbox able to toggle - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Make the checkbox able to toggle

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:23:02 - 00:25:19

Animate the checkbox - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Animate the checkbox

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:25:19 - 00:27:58

There is a glitch at , you are importing AnimatedStroke but didn't show the implemenation. Never the less, thanks for sharing, love your videos. Greetings from Germany! - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

There is a glitch at , you are importing AnimatedStroke but didn't show the implemenation. Never the less, thanks for sharing, love your videos. Greetings from Germany!

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:25:22 - 02:06:09

Create task item component - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Create task item component

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:27:58 - 00:33:55

Animate task label - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Animate task label

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:33:55 - 00:47:45

Integrate react-navigation and drawer - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Integrate react-navigation and drawer

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:47:45 - 00:51:25

Implement swipe-to-remove interaction - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Implement swipe-to-remove interaction

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

00:51:25 - 01:07:09

Make task items editable - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Make task items editable

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:07:09 - 01:12:25

Create task list component - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Create task list component

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:12:25 - 01:31:42

Animate background color - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Animate background color

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:31:42 - 01:36:20

Add masthead - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Add masthead

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:36:20 - 01:43:06

Fix scrollview - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Fix scrollview

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:43:06 - 01:45:29

Implement sidebar content - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Implement sidebar content

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:45:29 - 01:56:16

Add about screen - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Add about screen

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

01:56:16 - 02:05:20

Testing on Android - How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

Testing on Android

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

2021年11月14日　

02:05:20 - 02:06:09

チャンネル登録

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

自動再生読上