- 25
- 61 273
Bayan Bennett
Canada
Приєднався 8 бер 2011
My goal is to serve humanity and to bring happiness to others. I want to understand the problems around us and help find solutions. I just happen to write code.
I Fixed YouTube Captions Using AI
In this video, we explore how to use OpenAI's Whisper to improve the quality of UA-cam captions. We walk you through the process from downloading your videos, installing and setting up Whisper, to uploading improved captions back onto UA-cam. Whether you're a beginner or an advanced user looking for automation tips using the UA-cam data API, this guide has got you covered! Don't forget to like, share and subscribe for more helpful content.
## CHAPTERS ##
0:00 Intro
0:21 OpenAI Whisper's setup instructions
0:38 Download your UA-cam video
0:47 ⚠ Check your available memory
1:01 Whisper command
1:17 Forgot to install whisper
1:38 Using the `pip install -U openai-whisper` method
2:29 Selecting the output format
2:52 Whisper works
3:03 Results
3:13 Uploading the new captions to UA-cam
3:30 Path to complete automation
## CREDITS ##
- Strehlow, Nosmoh - Cakewalk chll.to/6917ee7c
---
#OpenAI #UA-cam #Python
## CHAPTERS ##
0:00 Intro
0:21 OpenAI Whisper's setup instructions
0:38 Download your UA-cam video
0:47 ⚠ Check your available memory
1:01 Whisper command
1:17 Forgot to install whisper
1:38 Using the `pip install -U openai-whisper` method
2:29 Selecting the output format
2:52 Whisper works
3:03 Results
3:13 Uploading the new captions to UA-cam
3:30 Path to complete automation
## CREDITS ##
- Strehlow, Nosmoh - Cakewalk chll.to/6917ee7c
---
#OpenAI #UA-cam #Python
Переглядів: 276
Відео
Building a React UI Library with TailwindCSS & Storybook
Переглядів 748Рік тому
Just a quick overview on how to get started with creating a React UI library, enriched by the power of Tailwind CSS and Storybook V7. Whether you're a seasoned developer or a newbie just dipping your toes in the water, this video will give you a comprehensive look at how these tools can revolutionize the way you construct web interfaces. Plus, you'll gain insights into making your library more ...
Building a To-Do List App for Everyday Life: An Over-Engineered Approach
Переглядів 4582 роки тому
Join me on a journey to create a to-do list app that's not just for work, but for everyday life. In this video, I explore the idea of creating a to-do list that's fun, over-engineered, and tailored to my needs. I delve into the shortcomings of existing task management apps, which are often too complex or work-focused for everyday use. I also share my current solution, Google Keep, and its limit...
Deploying Your React UI Library Using Storybook and AWS Amplify
Переглядів 2,2 тис.2 роки тому
In this video, we walk you through the process of deploying your UI library on a website. We explore different hosting options like GitHub pages and Storybook's Chromatic, but ultimately settle on AWS Amplify for its flexibility and affordability. Watch as we navigate through common issues encountered during deployment, such as missing dependencies and DNS record conflicts. By the end of this v...
Storybook.js: A Beginner's Guide to Building and Testing UI Components
Переглядів 9542 роки тому
Dive into the world of UI component building with Storybook.js in this detailed tutorial. Learn how to install, set up, and use this powerful library to isolate, demo, and test your project's components. From creating a button component to adjusting typography rendering and checkboxes, we cover it all. We also explore how you can use Storybook.js for testing components in isolation and showcasi...
Keeping Your Project Dependencies Up-to-Date
Переглядів 6973 роки тому
In this video, we delve into the importance of keeping your project dependencies up-to-date and how to do it effectively. We discuss the benefits of updating dependencies, including bug fixes, new features, performance improvements, and patched vulnerabilities. We also walk you through using NPM outdated and NPM update commands to identify and update out-of-date packages. Additionally, we explo...
Creating and Publishing Your First NPM Package
Переглядів 7 тис.3 роки тому
Join me on a journey of creating and publishing an npm package. In this video, I walk you through the process of making your own npm package, setting up a GitHub repository, dealing with errors along the way, and finally publishing it to the world's largest software registry. We'll also delve into using semantic release and conventional commits for version control. Whether you're new to npm or ...
Creating Your Own UI Library with React and TypeScript
Переглядів 28 тис.3 роки тому
In this tutorial, we dive into the process of creating a UI library using React and TypeScript. We'll walk you through setting up your project, initializing npm, creating a tsconfig.json file, and installing styled components. You'll also learn how to pack your project into an npm package and test it without publishing to the npm package repository. This is a great start for anyone looking to c...
React Interview Code Review
Переглядів 5983 роки тому
In this video, we dive into a code review of an intermediate level React interview conducted by Ben Awad with Clément Mihailescu, the founder of Algoexpert.io. We explore how to simplify the flattening process in coding and discuss various native browser functions and classes like URL Intl and fetch. We also touch on the importance of testing in programming. Whether you're a seasoned programmer...
Done for now… It's not perfect, and that's ok | #DevLog 012
Переглядів 1503 роки тому
In this episode of our coding vlog, we dive into fixing an issue with the updates component in our project. We also take a moment to reflect on the progress made so far and discuss potential next steps. From experimenting with function names to refactoring code live, join us as we navigate through this exciting journey of coding and learning. 🗃️ Repository: github.com/BayanBennett/reference.bay...
Adding Metadata Using Markdown Frontmatter in NextJS | #DevLog 011
Переглядів 1 тис.3 роки тому
I embedded some metadata in my markdown files using the markdown frontmatter format. After parsing this data, I included it in my NextJS pages. I also optimized the hydration time by handling some of the markdown processing during the build. 📰 Article: www.bayanbennett.com/posts/adding-metadata-using-markdown-frontmatter-in-nextjs 🗃️ Repository: github.com/BayanBennett/reference.bayanbennett.co...
Help Users Find Things - Generate a Page Tree | #DevLog 010
Переглядів 2063 роки тому
Help Users Find Things - Generate a Page Tree | #DevLog 010
Moving Code Evaluation to a WebWorker | #DevLog 009
Переглядів 2253 роки тому
Moving Code Evaluation to a WebWorker | #DevLog 009
3 Things Every React Context Should Have | #DevLog 008
Переглядів 3203 роки тому
3 Things Every React Context Should Have | #DevLog 008
Markdown with Custom Components in NextJS | #DevLog 007
Переглядів 1,9 тис.3 роки тому
Markdown with Custom Components in NextJS | #DevLog 007
Code Snippets in NextJS Generated Pages | #DevLog 006
Переглядів 7323 роки тому
Code Snippets in NextJS Generated Pages | #DevLog 006
Styling CodeMirror v6 with Material UI | #DevLog 005
Переглядів 8 тис.3 роки тому
Styling CodeMirror v6 with Material UI | #DevLog 005
Failing to Add CodeMirror 6 (and then Succeeding) | #DevLog 004
Переглядів 3,7 тис.3 роки тому
Failing to Add CodeMirror 6 (and then Succeeding) | #DevLog 004
How does MDN Intercept `console.log`? | #DevLog 003
Переглядів 3963 роки тому
How does MDN Intercept `console.log`? | #DevLog 003
How I Shared My Website's Code | #DevLog 002
Переглядів 1723 роки тому
How I Shared My Website's Code | #DevLog 002
Windows Tech Support Scam Web Page Deconstructed
Переглядів 1,7 тис.7 років тому
Windows Tech Support Scam Web Page Deconstructed
👏👏👏
I normally don't comment under videos unless I have genuinely liked it. will just say - this is how tutorials must be!
wtf
Thank you for showing your complete journey and struggles because sometimes I feel like an idiot when I take several hours making something works meanwhile no one seems to have an issue... And making a React UI component NPM package using GitHub Package is one of those situations...
Have you ever tried using useRef() or useMemo() on your own ui library? Then when you import your component, you got this error: `Uncaught TypeError: Cannot read properties of null (reading 'useRef')`
Dude this is the best video on this topic on the youtube. It's been a long time since I had to watch a tutorial on something related to React, and people just f-3king go on, and on, and on... like dude.... we don't need to know what typescript is... just show us where you found the configs and what worked for you lol. Either way, I appreciate the help.
Trying to learn as much as I can on web development from a pro
❤
❤
❤
about "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning" Firefox error I managed to SOLVE IT using this option: viewportMargin: Infinity
Wow, this was amazingly simple! One question: Can we also include storybook in this same repo? I feel like that might complicate this a bit, though?
Great video mate! Keep it up
Nice video. I have a small doubt, what if we want to add more components such as input, dropdown, etc, in a single library. How to approach this situation.
You are one of the most underrated tech UA-cam channels! Your videos are fun to watch, no BS, to the point. Please keep making videos.
cool tutorial bro, it would be nice if u show how to export types, u know the .d.ts file and styles cheers (halp me pls im struggling)
Are you making the .d.ts files manually or generated by enabling declarations in tsconfig (www.typescriptlang.org/tsconfig#declaration)?
I'm excited just by watching the title. kudo's added to my watch later
Thanks man. Its really so easy!! 😃
Woah this guy is fun and entertaining amazing vibe :D
Promo-SM
Bayan I just wanted to say I appreciate the effort you put in to make your video's enjoyable and educational. You provide great content sir
thank you for this golden content
What a great way to present challenges with hacking products. You should keep up with videos!
Extremely underrated video
This is both funny AND informative!
Thanks ❤
Thank you! This is the video I wanted to watch. I am trying to create my own UI library and started referring to other repositories. However, I have no idea what they do. You have saved me time. ❤
Great video. I'm actually interested in this concept, can you share the repo?
Great video quality, good editing, funny style of narration. And interesting story, of course
I am here to know how to add codemirror in material ui for my "Online Coding Platform" Project.
It made remember my first time working to deploy an app to heroku for first time (years ago). Thank you for the lesson.
omg, ypu just triggered some really bad memories in me...
Nice way to introduce how to create a library. You go to the simplest way without publishing or link it to a repo. Also I liked the humor,.
I'm shocked that I've never came across Service Worker... Like, shouldn't it be in every app of mine? Nice video tho!
I think it would be good to at least practice learning how to integrate it. Eventually frameworks will use service workers as part of the output of the bundling process
Was looking all over for this! Thanks for sharing! Still took me a while to unpack what was happening but I got it 👍
Love it!! 🤣
really good content, keep it up
hey pro, its 10pm in Vietnam and I have watched 2 videos of you, what an emotion I have, you're so smart and you're videos are so funny.
I have error Cannot find module '@Coradion/ui' or its corresponding type declarations. It is ok to import like this import {Button} from '@Coradion/ui' when there is src folder.
Here's a the place where I used the library: github.com/coradion/www/blob/main/src/components/icon-button.tsx It's not a great example of using a UI library component right now, but at least the project setup is different.
video sucks , stop overacting , explain the topic properly
There are plenty of other channels for that
I actually found it super easy to follow and it gave me just enough information to get me started. Sucks to suck 🤷♂🤷♂
Video's Great, no overacting, topic explained easily
New video!
🤦 ᑭяỖｍｏ𝓼𝐦
I have a nextjs app with storybook, follow your step but when tried to deployed is running the nextjs app instead of the pointed path to storybook-static
Are you running `npm run storybook`?
@@BayanBennett Facing the same issue...where should I run this command?
@@anja-janinastiefermann7700 In the terminal. Are you getting an error?
@@BayanBennett The difference in my project is that storybook is part of a nextjs application. I followed your steps (adapted the amplify build config, set build>command to "yarn build-storybook" and artifact>baseDirectory to "storybook-static". the build of the amplify app runs without errors. But when I open the URL of the amplify app, the nextjs app ist displayed. I can't figure out how I can serve the deployed storybook app.
@@anja-janinastiefermann7700 I'm not sure what the issues is, might be something with your project or the amplify config. When you've found a solution, please make a post about it.
Why I wasn't subscribed to this channel???? Just discovered this channel, i love it
Thanks for video, it possible with tailwind? can you make a video?
Definitely possible with tailwind, but I'll leave the video to someone else ;) There seem to be some UI libraries that are using tailwind, those would be a good place to start
Love this, thank you! what about using a scss file instead of styled components? I seem to have an issue importing/using external scss documents in an NPM package
Depending on how your project is set up, you will most likely need to add something to transpile SCSS down to CSS. If you're using webpack, `sass-loader`(webpack.js.org/loaders/sass-loader/), or for create react app `sass` (create-react-app.dev/docs/adding-a-sass-stylesheet/). For my project, I'm not bundling anything, so I would just package the SCSS files and let the project that is using my UI library deal with the transpilation of SCSS ➡ CSS.
@@BayanBennett I will look into it, thanks! I’m not too familiar with webpack currently
Love that it's not just me struggling, appreciate you sharing what actually happens.
Yes, the struggle is a good thing, it means something is being learned.
I can't believe I'm the first one to comment on this amazing tutorial. You just made it very good @Bayan, I was just laughing while learning. keep it up
Thank you! ❤️
when will we get a new video Bayan??
I'm aiming for some time in the next two days
The funniest tutorial I've seen this year)) Thanks mate!
pքɾօʍօʂʍ 🙋