- Видео 113
- Просмотров 202 177
Hosna Qasmei
США
Добавлен 2 янв 2023
Hi, I'm Hosna, a software developer who makes videos about topics I struggled with an eventually figured out and want to share.
Subscribe :)
Subscribe :)
Never Forget About Your Side Projects Again
Never Forget About Your Side Projects Again
Просмотров: 573
Видео
Next.js 14 Blog w/ View Counter and Minute Read
Просмотров 9883 месяца назад
Next.js 14 Blog w/ View Counter and Minute Read
My Coding Journey (the last 10 years)
Просмотров 5824 месяца назад
My Coding Journey (the last 10 years)
My Updated Way of Adding Pagination w/ Next.js 14, Tailwind CSS and shadcn/ui
Просмотров 6 тыс.4 месяца назад
My Updated Way of Adding Pagination w/ Next.js 14, Tailwind CSS and shadcn/ui
Shadcn UI Library just got even better!
Просмотров 3,1 тыс.4 месяца назад
Shadcn UI Library just got even better!
What I learned from my 15 failed side projects of 2023
Просмотров 4985 месяцев назад
What I learned from my 15 failed side projects of 2023
Build Projects 10x Faster with Next.js
Просмотров 8916 месяцев назад
Build Projects 10x Faster with Next.js
How to Add Gradient, Grid and Dots Background using Tailwind CSS
Просмотров 4,6 тыс.6 месяцев назад
How to Add Gradient, Grid and Dots Background using Tailwind CSS
How to Add an App Icon to Your Next.js 13 Project
Просмотров 3,2 тыс.7 месяцев назад
How to Add an App Icon to Your Next.js 13 Project
Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS
Просмотров 41 тыс.7 месяцев назад
Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS
Build X's Responsive Side Nav with Next.js 13 and Tailwind CSS
Просмотров 2,5 тыс.7 месяцев назад
Build X's Responsive Side Nav with Next.js 13 and Tailwind CSS
Build X's Bottom Nav with Next.js 13 and Tailwind CSS
Просмотров 1,7 тыс.7 месяцев назад
Build X's Bottom Nav with Next.js 13 and Tailwind CSS
Build Vercel's Animated Tabs with Tailwind CSS and Framer Motion
Просмотров 2,8 тыс.7 месяцев назад
Build Vercel's Animated Tabs with Tailwind CSS and Framer Motion
These Tips Made Me a Better Developer
Просмотров 76311 месяцев назад
These Tips Made Me a Better Developer
How to Add a Contact Section to Your Landing Page | Next.js 13.4
Просмотров 1,8 тыс.11 месяцев назад
How to Add a Contact Section to Your Landing Page | Next.js 13.4
Creating a Dynamic Navbar Shadow Effect
Просмотров 1 тыс.11 месяцев назад
Creating a Dynamic Navbar Shadow Effect
Create a Landing Page with Next.js 13.4, Tailwind CSS and Tailblocks
Просмотров 8 тыс.11 месяцев назад
Create a Landing Page with Next.js 13.4, Tailwind CSS and Tailblocks
My First T3 Stack Project and the Latest Updates
Просмотров 1,4 тыс.Год назад
My First T3 Stack Project and the Latest Updates
Build an AI Image to Text Generator using Next.js 13, Upstash Redis and Replicate
Просмотров 1,8 тыс.Год назад
Build an AI Image to Text Generator using Next.js 13, Upstash Redis and Replicate
Should you do a Machine Learning Bootcamp?
Просмотров 520Год назад
Should you do a Machine Learning Bootcamp?
I Built 7 Different Developer Portfolios in Just 3 Months
Просмотров 1,1 тыс.Год назад
I Built 7 Different Developer Portfolios in Just 3 Months
Build and Deploy a Quote Generator with Next.js 13.2, Upstash Redis, Tailwind CSS and Vercel
Просмотров 1,4 тыс.Год назад
Build and Deploy a Quote Generator with Next.js 13.2, Upstash Redis, Tailwind CSS and Vercel
Learn Pagination in less than 5 minutes
Просмотров 1,2 тыс.Год назад
Learn Pagination in less than 5 minutes
Generate Realistic Fake Data with faker.js using Next.js 13 and Tailwind CSS
Просмотров 3 тыс.Год назад
Generate Realistic Fake Data with faker.js using Next.js 13 and Tailwind CSS
Create a Splash Screen with Next.js 13, Tailwind CSS and Anime.js
Просмотров 10 тыс.Год назад
Create a Splash Screen with Next.js 13, Tailwind CSS and Anime.js
Build and Deploy a Responsive Personal Portfolio Website Using Next.js 13, Tailwind CSS and Vercel
Просмотров 44 тыс.Год назад
Build and Deploy a Responsive Personal Portfolio Website Using Next.js 13, Tailwind CSS and Vercel
Build a Full Stack Application with OpenAI, Next.js 13, Vercel and Chakra UI
Просмотров 6 тыс.Год назад
Build a Full Stack Application with OpenAI, Next.js 13, Vercel and Chakra UI
Track Your Website Analytics with Umami and Railway
Просмотров 1,2 тыс.Год назад
Track Your Website Analytics with Umami and Railway
Build a Professional Landing Page with Next.js 13, Chakra UI and Vercel
Просмотров 32 тыс.Год назад
Build a Professional Landing Page with Next.js 13, Chakra UI and Vercel
Hello sister I want to learn nextjs . Your video is good .
Hey Hosna, you are doing great, and I really appreciate your effort. I have one suggestion to you to create playlist for specific project videos or else to keep things organized
This channel reserves much more subs and views!!
Wonderful Sidebar and Animations, wow!
sorry bro, u dont use features of nextjs 14
This is something I've been looking for . Thank you 👍
Hello, could you please help me understand what I might have done wrong at @2.52 in the video? I've tried following the steps to create the header section, but I'm not achieving the same result as you. Any suggestions on what I might have done differently?
You are doing good. ut it will be great if you clear a roadmap of your videos and main feature of your videos means topic. i have watch many videos of your but i am still confuse how do i start.
Awesome. Well done :)
im a beginner & i love your video so much, i really wanted to learn astro and your content is the best. You showed the struggle and i always felt that when im trying to learn. I feel like im going through the pain along side you. Keep up the good work . i hope i can be a good web developer through you. Thank you teacher
i have added the tail wind in my project but the snippet seem not work
9:40 I'm actually building something similar to that. Not a mobile app, though, but a web app. Because I find Goodreads a bit clunky, so I thought I'd try to build my own alternative. If there are any features you'd like to recommend I'm all ears! ;)
i miss the stream lol
Merc Hosna!
💯💯💯💯
Please also make video on read write docx in js and convert to pdf....
amazing new sub you just earned it
I recommend making your own blog and trying to setup SEO for it. It will give you much more practical knowledge about SEO compared to just reading docs 😊
I definitely will, thanks for the suggestion!
Hii Hosna, thank you for this. I was really helpful. In fact, I made use of it across the project I'm currently working on. Tho, I have an issue when using it for the tabs, as the {selectedRect && navRect} positioning is not consistent as the screen sizes change. How can you help me solve this please?
@hqasmei
Thanks alot 😮😮😮😮 This is what I have been looking for
Is this build with shipfast?
hey
hello
احبج ، خلنتزوج
Very useful, thank you. Just one thing that I would change in your code since you are using TS and this is hurting my eyes totalPosts: number; postsPerPage: number; currentPage: number; setCurrentPage: (page:number) => void;
Will do thanks for the feedback!
thx for the videos! can you create an appointment/booking/daily planner type app? with the red bar that's on the current time and scrolls from like 9am to 9pm like other apps?
Too complecated. Ha ha ! That's what React.js making any simple things complecated ? Hello ! Is there any one who teach things simple and easy on RUclips ?
This is an awesome project ❤
This is stellar content. WebDevCody sent me and I'm very glad that he did.
This project is really nice and looks like it has a lot of best practices. I wonder, will you ever make it open-source so I can learn more about how it was built?
Your voice is lower & not loud
Is there a reason why ReportView is a client component? couldn't api/increment/ be also called on the server?
Yup can can also do that I believe
thanks a lot. Instant sub and like. I was struggling to implement it. Also Can You Make A tutorial For Infinite Carousel
💗💗
You can make short series, if you built based on some roadmap. Kudos to your efforts....
Oh no, can't believe I missed this stream Hosna!
Won't be my last😉 Probably will do another one after I get a little better at doing NeetCode problems🤣
@@hqasmei your killing it 🔥🔥🔥 i'll try to catch it live next time :)
I was not able to use "SPRING" type animation it keeps crashing saying '' Error: Only two keyframes currently supported with spring and inertia animations. '' so I switch it for tween type it does not look as good as yours haha... here is the code if anyone has the same problem const sidebar = { open: { width: '100%', transition: { type: 'tween', duration: 0.3, // Adjust duration as needed }, }, closed: { width: 0, transition: { type: 'tween', duration: 0.3, // Adjust duration as needed }, }, };
Looks like someone else got a similar issue, looking it to it will get back to you.
This was going so well. But when you open and close the mobile menu a few times you get error errors.mjs:19 Uncaught Error: Only two keyframes currently supported with spring and inertia animations. It doesn't seem to like const sidebar having two 'spring' transiton types. So I set the first type to 'tween' which is the default and all work fine now.
Looks like someone else got a similar issue, let me look into it. Not sure if any of the packages changed.
@@hqasmei Hi, I did use the most up to date versions of all packages. I also noticed that NPM run dev, the first time the page loads, I see no chevrons in the sidebar and the mobile menu toggle wont work. I have to refresh to get everything going. Running Build does get everything working on first load though.
I think the reason the chevrons dont appear on the first page load is there must be a delay in getting the info from the usePathname() hook. I manage to get round this by setting useState to when we have a path. so under the MenuItem compoenent, we can say const pathname = usePathname(); const isCurrentPath = item.path === pathname; const [subMenuOpen, setSubMenuOpen] = useState(isCurrentPath);
can you please do this with next js 14
Is Remix better than Next? unless Remix has server component 😅
Remix were the pioneer of server component. Every component is a server component in remix and it’s infrastructure is more intuitive than next js .
@@dolapoadefisayomioluwole1341 Thank you for informing me this 🥰
Good video
Sadness that i keep on missing the streams cuz of work 😭
It is advisable to wrap Pagination in PaginationSection? how could access to PaginationItem properties from PaginationSection?
Hey Hosna, great video. Thanks for trying out touchgrass 😅. Appreciate the inputs you've given, we noticed the UI changes to be done too! We're a relatively new to Convex and myself and team members don't have much focus on frontend. We'll definitely make changes with your inputs. You should try out the Grass Toucher panel as well - it allows you to chat with your habits (it's a work in progress and might not be fully accurate yet, but it's a start)
You answer my question mom 😁 thanks
Happy to help!
3 side projects 😥
How are you hosting convex ?
Our backend and database are in convex. Hosting it on Railway.
22k lines of typescript and counting! I have to say this is the farthest I've gotten on a side project. I made a goal to make my first SaaS (subscription based) this year, so it feels nice to have 4 paying users.
how to add startup image when app is opening
Thank you, Hosna! Can you teach me how to build a blog with tags and pagination like this with Next.js + Prismic?
thanks for the tutorial