- Видео 28
- Просмотров 25 765
How Dev You
Индия
Добавлен 2 янв 2022
How to Build a React TypeScript Component Library and Publish on npm
Source code: github.com/howdevyou/react-component-library
In this video, I'll guide you through building and publishing your own React TypeScript Component Library from scratch. We’ll start with an introduction to npm (Node Package Manager) and NVM (Node Version Manager), exploring how npm is used to manage, publish, and download packages, and how NVM helps you switch between different Node.js versions. You’ll also learn about semantic versioning and how to understand version numbers to track changes in your packages.
We’ll then set up the development environment using npm, where I'll show you how to create a simple npm package, install TypeScript and React, and understand the different typ...
In this video, I'll guide you through building and publishing your own React TypeScript Component Library from scratch. We’ll start with an introduction to npm (Node Package Manager) and NVM (Node Version Manager), exploring how npm is used to manage, publish, and download packages, and how NVM helps you switch between different Node.js versions. You’ll also learn about semantic versioning and how to understand version numbers to track changes in your packages.
We’ll then set up the development environment using npm, where I'll show you how to create a simple npm package, install TypeScript and React, and understand the different typ...
Просмотров: 103
Видео
Conventional Commits with Husky & Commitlint
Просмотров 10121 день назад
1. In this video, we explore the importance of conventional commit messages for open source projects. Learn about the three main headers: type, scope, and summary. We’ll break down the different types of commits, like features and bug fixes, and show you how to use tools like Commitlint and Husky to enforce these rules. Plus, discover how to automate the process with GitHub Actions. Join us to ...
TYPES OF JAVASCRIPT MODULE SYSTEMS
Просмотров 2828 дней назад
This RUclips video discusses JavaScript module systems, their importance, and the different types of module systems. The module systems mentioned include CommonJS, ES6, ES2020, ES2022, Node 16, Node Next, and ES Next. The video explains that module systems help organize code, enable code sharing between files, and ensure compatibility with different browsers and TypeScript. It also highlights t...
OpenAI API - Embeddings
Просмотров 682 месяца назад
Embeddings and their various applications (search, recommendation, clustering, etc.) github repo : github.com/howdevyou/openai-apis Learn how these multi-dimensional vector representations of words drive crucial applications like recommendation systems, search functions, clustering, anomaly detection, and classification. Timestamp - 00:00 Introduction to embeddings and their applications 03:12 ...
React SSR From Scratch
Просмотров 793 месяца назад
blog post : medium.com/@sosumit001/part-01-react-ssr-from-scratch-a-cartoon-intro-3e0733876933 github : github.com/sosumit001/react-ssr-from-scratch Building a server-side React application from scratch provides greater control and customization over using frameworks like Next.js or Remix. The initial step in setting up the project involves installing key packages such as Express, React, and Re...
Smart State Management with React19 !!!
Просмотров 1334 месяца назад
React 19: State Management with useTransition, useAction, and useFormStatus source code : github.com/sosumit001/react-19-beginners-guide read blog : medium.com/p/063817a5f8fb What you'll learn : State Management in Earlier React Versions: Understand the complexities of managing state during API calls in previous React versions, involving manual tracking of loading, errors, and state updates. Ne...
Webpack, Rollup, Parcel & Vite : Javascript Build Tools
Просмотров 1926 месяцев назад
Javascript Build Tools : Webpack, Rollup, Parcel & Vite Javascript build tools, which are programs that automate the process of executing web applications. These tools help create dynamic websites that can respond in real-time to user interactions, as opposed to static websites. The video categorizes build tools into legacy tools like Webpack and Rollup, and next-gen tools like Parcel and Vite....
5 Steps for OpenAI API Usage
Просмотров 817 месяцев назад
🌟 What You'll Learn: How to Access the OpenAI API: Get started by creating your account at platform.openai.com. We'll guide you through the setup process and show you how to manage your account efficiently. Understanding Pricing: Dive into the OpenAI API's unique token-based pricing system. Learn how to budget your AI projects effectively by understanding the costs associated with inputs and ou...
*NO NEXTJS* File Based Routing
Просмотров 937 месяцев назад
blog website : github.com/sosumit001/how-dev-you-official 0:00 - 1:06: Intro File-Based Routing in React with Vite, Vite's Role and Use of TypeScript and MDX, Example of Website Using MDX and React Components 1:11 - 1:47: Goal of File-Based Routing and Vite's Functionality 2:22 - 3:58: Explanation of Globe Function Parameters 4:11 - 5:17: Implementation of Dynamic Routing for New Entries 5:27 -...
Blob Interface and Binary Data | Web APIs
Просмотров 998 месяцев назад
Source Code : www.sumitso.in/blogs/2024/blob-webapis In this video, we dive deep into the Blob Web API, a crucial tool for managing binary data in web development. We start by exploring the Blob Interface, covering its constructors, attributes, and methods like slice(), stream(), text(), and arrayBuffer(). Then, we move on to the File Interface, discussing its construction and attributes, and t...
Code, Deploy, Connect | Your HTTP Server with a Custom Domain
Просмотров 908 месяцев назад
Source code github.com/sosumit001/nodejs-hot-topics/tree/main Building an HTTP server: The presenter explains how to create a basic HTTP server using the HTTP module and how to configure it to serve different types of files. Hosting on Versal: The presenter demonstrates how to host the HTTP server on the Versal platform, allowing the website to be accessed online. Connecting a subdomain: By add...
Assistants API : ASSISTANCE, THREADS & RUNs
Просмотров 2619 месяцев назад
Assistances API : ASSISTANCE, THREADS & RUNs source code : github.com/sosumit001/openai-apis/tree/main/ai assistance - eg. python Tutor Key Insights : 1. Building magical applications with open AI APIs: Open AI APIs allow us to build applications that can interact with human language and provide human-like responses. These APIs, such as the GPT model, can be utilized to respond to user prompts....
01 • HTTP METHODS | Fetching Wikipedia : GET
Просмотров 729 месяцев назад
HTTP METHODS | Fetching Wikipedia GET At the top, HTTP stands tall, closely followed by API and Method, shaping the global discourse on web communication. REST and HTTP request each claim a significant presence, contributing to the interconnected World Wide Web. The JavaScript language, synonymous with dynamic web development, secures its spot, contributing to the interconnected World Wide Web....
Function Calling with OpenAI API!
Просмотров 1999 месяцев назад
Open AI function Calling, GPT4 function calling, gpt api function calling, OpenAI api function calling, function calling openai langchain Source Code : github.com/sosumit001/openai-apis/tree/main/function calling TIMESTAMPS : 00:00 - Introduction to Function calling 00:46 - How Function Calling Works in OPENAI 04:21 - Setting up Rest Client Extension 04:55 - Setting up OpenAi api key 05:56 - St...
Evolution of JavaScript Asynchronous Programming: Async/Await, Promises, and Callbacks ES6, ES7 ES8
Просмотров 1,1 тыс.9 месяцев назад
Evolution of JavaScript Asynchronous Programming: Async/Await, Promises, and Callbacks ES6, ES7 ES8 Checkout Full 15 min video : ruclips.net/video/lfWQ5idZTSE/видео.html 1. In 1999, callbacks were introduced in Ecmascript to handle asynchronous operations. Callbacks are functions passed as parameters to a function, but they can lead to deeply nested and hard-to-understand code structures, commo...
Understanding Value vs. Reference in JavaScript: Exploring Primitive and Reference Data Types
Просмотров 34310 месяцев назад
Understanding Value vs. Reference in JavaScript: Exploring Primitive and Reference Data Types
Asynchronous JavaScript Easily in 15 Minutes || Callbacks, Promises & Async/Await
Просмотров 45810 месяцев назад
Asynchronous JavaScript Easily in 15 Minutes || Callbacks, Promises & Async/Await
WebAssembly with C || Emscripten Tutorial : From "Hello World" to Module Instantiation
Просмотров 501Год назад
WebAssembly with C || Emscripten Tutorial : From "Hello World" to Module Instantiation
GitHub's OAuth implementation || Log in With Github || OAuth 2.0
Просмотров 385Год назад
GitHub's OAuth implementation || Log in With Github || OAuth 2.0
Deploy Vite + React App to Vercel || Add Custom Domain to React App
Просмотров 10 тыс.Год назад
Deploy Vite React App to Vercel || Add Custom Domain to React App
Environment Variables in VITE + REACT | add .env file to Vite App @howdevyou
Просмотров 11 тыс.Год назад
Environment Variables in VITE REACT | add .env file to Vite App @howdevyou
Webpack Module Bundler | Webpack Tutorial in 2 Minutes
Просмотров 403Год назад
Webpack Module Bundler | Webpack Tutorial in 2 Minutes
Binary Search Trees: C++ Implementation Guide
Просмотров 1442 года назад
Binary Search Trees: C Implementation Guide
what is Binary Search?? - Data Structure and Algorithm
Просмотров 492 года назад
what is Binary Search?? - Data Structure and Algorithm
Linked List - Data Structure & Algorithms || C++
Просмотров 462 года назад
Linked List - Data Structure & Algorithms || C
My problem didn't resolve can you help me
Sure! what problems you are facing
I am surprised with such a good quality video why you have only 230 subs...... Much Support from Learn Apply Build. Good Work
Thanks so much! I know I need to change a few things to be more authentic-really appreciate the support.
Brother can you please help me, i created a react app using vite, then when i had to deploy the website on GoDaddy hosting service, i wrote homepage:"folder_name"; in my package.json file and created a build by nom run build and uploaded the folder in the subdomain folder. But i was getting path error. So to resolve that i had to create the clone of project in create-react-app and followed the above steps, it was working perfectly with create react app, how can i do this with vite?
Once you upload the dist folder, make sure to add the base field in your vite.config.js file. For detailed steps, check out this blog : www.linkedin.com/pulse/easiest-way-deploy-your-react-vite-application-cpanel-saqlain-pkrif/
great thanx for sharing.
Awesome Conecpt .
Where is Hello Word?
At the 7:34 mark, I demonstrated how to compile C code into WebAssembly and run the resulting JavaScript with Node.js to display "Hello, World", but I didn't specifically instantiate the WebAssembly module for the "Hello, World" example. However, I did show the process of module instantiation in the "add numbers" example later in the video
Quality content .
Very helpfull
Man you really saved me
Hi Brothers I have deployed the site and it works well in android,windows and mac devices but when opening in iphone ios then its showing blank page
Hey! there might be a compatibility issue with Safari on iOS. Try checking for JavaScript errors using Safari's developer tools and make sure your CSS is compatible. I checked this vite build guide : vitejs.dev/guide/build.html Currently, Vite only works for Safari >= 14 You know sometime we miss few things in vite config file and get these kinda errors These are few links that discuss same problems : laracasts.com/discuss/channels/laravel/vite-dev-does-not-work-in-safari-mac stackoverflow.com/questions/76554644/site-on-react-vite-doenst-work-in-safari-browser-shows-empty-page laracasts.com/discuss/channels/vite/vite-hmr-broken-in-safari
I can't seem to get my deployment working, if I deploy from Vercel CLI I get that version up but any further pushes won't work. I get the error "sh: line 1: vite: command not found"
If you're getting the "sh: line 1: vite: command not found" error, that means Vite is not installed properly. If it is installed, there might be a mismatch between the Vite and Node versions. Vite requires a minimum Node.js version of 18. Here is a link I found related to this error: laracasts.com/discuss/channels/vite/sh-vite-command-not-found also check "node -v" if version is less then 18, then use nvm to upgrade to latest version
I'd seen that thread but couldn't find a solution. My node version is 21.5, everything works fine locally it's purely when I attempt to deploy on Vercel.@@howdevyou
Are you getting any problem while building the project as well? can I take a look at your code? Is it available on GitHub?
😊
I hv tried multiple sources to fix this problem but It really worked. Thanks bro
Check your voice recording
Its an old video I made it without any mic... 😶
best ever channel i ever got on youtube .
Awesome. Thanks for sharing this.
perfekt and Short Explanation 🎉
Thanks mate , Now i will add AI in my react apps .
Soon When you show I make Software Dev Content on YT . Anyone would be happy to have you in their company .
Keep it up Bhai .
Thank you. It was helpful!
Thanks
Bhai you are doing amazing . I highly recommend you this underrated channel .
I am getting this error Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
I was looking for something like this. Thanks.
thank you bro
Good video, I tried importing dotenv from ''dotenv' but isn't working. After that I tried importing { loadEnv } from 'vite' and following the steps of this video and is working now.
source code : github.com/sosumit001/openai-apis/tree/main/ai%20assistance%20-%20eg.%20python%20Tutor
Thank you. Very helpful video.
This is intro part of a 15 minute video : ruclips.net/video/lfWQ5idZTSE/видео.html
Best explanation of JS . All Developers must follow this channel .
This works for testing .env in development mode. Thank you !
This is amazing and very informative video . JS is ❤ and this video is 🔥🔥
It is successful Thank you
Very informative .
cool stuff man!
great explaination for github oauth .
Which tool did you use to create animation ?
I've used Blenders; everything you see in this video is SVG, so I can easily manipulate shape, size, and color
🍿🍿🍿
Amazing Content with nice explanation ..
it's not working
Are there any error messages or warnings displayed in the console when you run the app?
make sure you have installed dotenv (npm i dotenv) as I have not covered that part in the video
@@howdevyou nah i didn't see any error message i changed vite to cra
so we have to define there each env variables
Yes, the way I'm resolving environment variables, I need to mention them in the define object as well
Very Helpful
Thanks for sharing this
yo sir u cleared all my doubts about why I should use react.
Cool 🔥🔥.
brilliantly explained , girl in starting part was unnecessary .
😌
Awesome🔥🔥
👍keep going bro
👌👌