- How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:

- Electron: https://www.electronjs.org/ - A framework for building cross-platform desktop apps...

Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:

- Electron: https://www.electronjs.org/ - A framework for building cross-platform desktop apps using HTML, JS, and CSS
- Vite: https://vitejs.dev/ - A fast build tool
- React: A library for building UI
- TypeScript: A typed JavaScript
- CodeMirror 6: https://codemirror.net/6/ - An extensible code editor for the web
- Remark: https://remark.js.org/ - An extensible Markdown processor

I hope you enjoy it!

▶ Download my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=gxBis8EgoAg

▶ The GitHub repository of the Markdown editor tutorial
https://github.com/craftzdog/electron-markdown-editor-tutorial
▶ 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 equipments
* Computer: Mac Pro
* Display: Pro Display XDR
* Keyboard: Keychron K2V2
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Slider: SliderONE v2

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

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

0:00 Digest
0:28 Intro
1:03 Create a repository from a project boilerplate
https://github.com/cawa-93/vite-electron-builder
3:02 Set up the project to use React intead of Vue
10:50 Make window transparent and vibrant
11:53 Set up CodeMirror 6
17:47 Make an editor component
22:58 Make the editor support Markdown and apply the dark theme
26:31 Set up Remark
32:45 Implement syntax highlighting for Markdown preview
38:56 Compile the app and run
39:43 Demo

#electron #reactjs #typescript

#Productivity #Solo dev #Programming #Indie dev #Markdown #Electron #ReactJS #JavaScript #TypeScript #Coding Tutorial

Digest - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Digest

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:00:00 - 00:00:28

what is real-time typing software ? - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

what is real-time typing software ?

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:00:09 - 00:40:45

Intro - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Intro

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:00:28 - 00:01:03

Create a repository from a project boilerplatehttps://github.com/cawa-93/vite-electron-builder - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Create a repository from a project boilerplatehttps://github.com/cawa-93/vite-electron-builder

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:01:03 - 00:03:02

Set up the project to use React intead of Vue - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Set up the project to use React intead of Vue

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:03:02 - 00:10:50

Dumb question: how do you make the IDE returns the error on the line you're coding, like at ? That seems to save so much time - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Dumb question: how do you make the IDE returns the error on the line you're coding, like at ? That seems to save so much time

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:06:43 - 00:40:45

at has a (button)jaim. What does that button mean?. I can't find sign on keyboard. please, Is it used to move between lines ?. Thanks you <3 - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

at has a (button)jaim. What does that button mean?. I can't find sign on keyboard. please, Is it used to move between lines ?. Thanks you <3

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:06:54 - 00:40:45

: How to change the fonts mentioned in around for Linux, as you are using Mac OS " --apple-*** and also BlinkSystem*** " fonts. And also in quotes we have to write only till sans not the full name like "Firs Sans Mono" ? - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

: How to change the fonts mentioned in around for Linux, as you are using Mac OS " --apple-* and also BlinkSystem* " fonts. And also in quotes we have to write only till sans not the full name like "Firs Sans Mono" ?

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:09:30 - 00:40:45

Make window transparent and vibrant - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Make window transparent and vibrant

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:10:50 - 00:11:53

Set up CodeMirror 6 - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Set up CodeMirror 6

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:11:53 - 00:17:47

How can he remember all the import he needs? - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

How can he remember all the import he needs?

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:14:18 - 00:40:45

Make an editor component - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Make an editor component

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:17:47 - 00:22:58

At i have an error. I have followed you exactly and this is the error i get: Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. Can anyone help ne please!!! - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

At i have an error. I have followed you exactly and this is the error i get: Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. Can anyone help ne please!!!

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:20:14 - 00:40:45

Make the editor support Markdown and apply the dark theme - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Make the editor support Markdown and apply the dark theme

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:22:58 - 00:26:31

Set up Remark - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Set up Remark

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:26:31 - 00:32:45

Implement syntax highlighting for Markdown preview - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Implement syntax highlighting for Markdown preview

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:32:45 - 00:38:56

Compile the app and run - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Compile the app and run

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:38:56 - 00:39:43

what is 'open' in ? It's some package ?love your videos ❤️ - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

what is 'open' in ? It's some package ?love your videos ❤️

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:39:32 - 00:40:45

this is scene when you are a real programmer - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

this is scene when you are a real programmer

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:39:40 - 00:40:45

Demo - How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Demo

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

2021年08月17日　

00:39:43 - 00:40:45

チャンネル登録

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

自動再生読上