
devlog: Fixing a bug of my Electron-based React app!
devaslife
🎉 170,000 人達成!
📈 予測:20万人まであと840日(2025年9月25日)
※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。
Timetable
動画タイムテーブル
動画数:62件

Intro

The right tool for the right task

Embrace your imperfection

4 steps for taking tech notes

1. Identify the problem

2. Research the possible solutions

3. Validate the solutions

What worked well

What didn't work

4. Reuse the knowledge

Refer to code snippets

Learn from previous solutions to common errors

Share what you learned

Wrap up

Intro

Project description

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

Create a new Next.js project with Stitches

Prepare using OpenAl

Learn how to write Python with ChatGPT

Transcribe the audio with the transcription API

you mean prompt right?

Try invoking the completion API

Get input data from stdin

Load and parse SRT data

Translate each subtitle

Check out Radix UI and Stitches

Prepare building the UI

Create a form to specify a video URL

Implement event handling

Create a component to render the command outputs

Add tabs

Add an API routing

Implement an audio download API

Implement a transcription API

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. ;)

Implement a translation API

Connect the components with states

Extract a video ID from the YouTube URL

Progressively update the output by a callback function

Fix scroll overflow issue

Invoke the audio download API

Invoke the transcription API

Fix the transcription prompt not working

Invoke the translation API

Finish it up

Demo
![Furna - Lotus - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Furna - Lotus
![Drawing - LUCHS - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Drawing - LUCHS
![And Lucie Dreams - Lotus - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
And Lucie Dreams - Lotus
![Mint Conditions - Dusty Decks - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Mint Conditions - Dusty Decks
![Cousin Stratus - Lotus - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Cousin Stratus - Lotus
![Tiny Room Bop - [ocean jams] - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Tiny Room Bop - [ocean jams]
![Parallax - Luwaks - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Parallax - Luwaks
![Lisbon - Shiruky - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Lisbon - Shiruky
![I'll Follow - Mochas - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
I'll Follow - Mochas
![Lupi - Sayuri Hayashi Egnell - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Lupi - Sayuri Hayashi Egnell
![Tau - Osoku - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Tau - Osoku
![Have a productive day - [playlist] Melodies for coding | Focus & Chill](https://img.youtube.com/vi/VUVPkoByTn4/mqdefault.jpg)
Have a productive day

Hello

Unboxing a new MacBook Pro

where I can get this laptop stand? it looks cool

Heading to Osaka Castle Park

Create a new React project

@ no one likes the default macbook keyboard man

Install libraries

Make the page background transparent

Remove the template content

Integrate React Three Fiber into the project

Add a simple scene

Add a ground plane for shadows

Import a tree model

Add the tree model to the scene

Use Standard Material

Use Toon Material

Rotate the tree object

Create a simple shader

Use a custom toon shader

Tweak the toon shader

Start creating a Ghibli shader

Define variables

Calculate brightness

Add gradient colors

Create another color variation

Thank you for watching

Intro

Add note list header component

Create TextInput restyle component

Add a TextInput to the header bar

Move the theme picker to the sidebar

Add a left header bar button that can transform i

Add a clear button to the header bar

Implement the header bar animations

Enable tablet layouts

Add a navbar to the detail screen

Add editor state atom

Create a note list screen for phones

Use 'useSetAtom' for better performance

Make the screen responsive

Create a note list screen for tablets

Create a three-column lavout component

Memoize props of some components to improve

Hide left view in portrait mode

Toggle the sidebar

Add the sidebar to the left view

Implement detail screens for phones and tablets

Update the stack navigator for phones

Display note body on the detail screen
