- 72
- 178 399
Leabs
United States
เข้าร่วมเมื่อ 29 เม.ย. 2021
I’m a professional web developer making how-to and tutorial videos on web development and on project building because I believe people enjoy learning and creating things.
#coding, #Astro, #MagicMirror, #Jekyll, #NextJS and more.
#coding, #Astro, #MagicMirror, #Jekyll, #NextJS and more.
Switching to Ubuntu with Omakub!
Omakub is a developer setup for Ubuntu created by David Heinemeier Hansson. It is a hand selected suite of apps, tools, and languages with themes to make the transition to Linux easier for those of us who are not die hard users.
Website: omakub.org/
🌟 Add me on GitHub: github.com/leabs
🌟 Add me on Twitter/X: Shadow_Stack
💻 Gear I use:
Video: iPhone 15 Pro
Mic: Sennheiser Professional MKE 600
Audio Interface: Focusrite Scarlett Solo 4th Gen
Laptop: MacBook Pro M3 Pro
Software:
Editing and capturing software: [www.descript.com](www.descript.com/)
IDE: code.visualstudio.com/
Website: omakub.org/
🌟 Add me on GitHub: github.com/leabs
🌟 Add me on Twitter/X: Shadow_Stack
💻 Gear I use:
Video: iPhone 15 Pro
Mic: Sennheiser Professional MKE 600
Audio Interface: Focusrite Scarlett Solo 4th Gen
Laptop: MacBook Pro M3 Pro
Software:
Editing and capturing software: [www.descript.com](www.descript.com/)
IDE: code.visualstudio.com/
มุมมอง: 2 608
วีดีโอ
Using Prompt Toolkit with Python Apps as a Menu
มุมมอง 51628 วันที่ผ่านมา
🌟 Add me on GitHub: github.com/leabs 🌟 Add me on Twitter/X: Shadow_Stack Setting up Prompt Toolkit for a directory of Python applications. Code Repo: github.com/leabs/misc-python-apps Prompt Toolkit Docs: python-prompt-toolkit.readthedocs.io/en/master/ Previous video on python apps: th-cam.com/video/R2KZsakOS8c/w-d-xo.html 💻 Gear I use: Video: iPhone 15 Pro Mic: Sennheiser Professio...
Complete User Management Platform with clerk (and Astro)
มุมมอง 4792 หลายเดือนก่อน
🌟 Add me on Github: github.com/leabs 🌟 Add me on Twitter/X: Shadow_Stack Setting up a simple frontend to use a user management service backend is easy with clerk. In this video I run through the processes of adding clerk to an astro site. Live Demo: clerk-astro.vercel.app/ Code Repo: github.com/leabs/clerk-astro Astro and clerk quickstart: clerk.com/docs/quickstarts/astro#astro-quic...
Astro 4.9! Container API, React 19, and more!
มุมมอง 1.6K5 หลายเดือนก่อน
🌟 Add me on Github: github.com/leabs 🌟 Add me on Twitter/X: Shadow_Stack 💻 Gear I use: Video: iPhone 15 Pro Mic: Sennheiser Professional MKE 600 Audio Interface: Focusrite Scarlett Solo 4th Gen Laptop: MacBook Pro M3 Pro Software: Editing and capturing software: [www.descript.com](www.descript.com/) IDE: code.visualstudio.com/ Astro 4.9 Update: astro.build/blog/astro-490/ Astro's Co...
Create your own multi-step OpenAI ChatBot with a Database!
มุมมอง 1566 หลายเดือนก่อน
🌟 Add me on Github: github.com/leabs 🌟 Add me on Twitter/X: Shadow_Stack Today we're looking at Morphic, a NextJS OpenAI Chatbot with Live Search and Redis Support. The code repo: github.com/miurla/morphic 💻 Gear I use: Video: iPhone 15 Pro Mic: Sennheiser Professional MKE 600 Audio Interface: Focusrite Scarlett Solo 4th Gen Laptop: MacBook Pro M3 Pro Software: Editing and capturing...
Style Like a Pro - CSS Basics in 7 Minutes
มุมมอง 5247 หลายเดือนก่อน
Add me on Github: github.com/leabs Add me on Twitter/X: Shadow_Stack In this video I talk about the ways you can add Cascading Style Sheets to your websites. I got over the 3 main ways to add CSS, the selectors, variables, and where to look to get more help. MDN CSS docs: developer.mozilla.org/en-US/docs/Web/CSS/Reference Gear I use: Video: iPhone 15 Pro Mic: Sennheiser Professional...
Astro DB First Look and Overview!
มุมมอง 1.4K7 หลายเดือนก่อน
In this video I go over some highlights of the new Astro database product. Astro: astro.build/ Astro DB docs: docs.astro.build/en/guides/astro-db/ Code repo from this video: github.com/leabs/testing-db Add me on github: github.com/leabs
Sleek Modern Web Developer Portfolio Template!
มุมมอง 1.2K9 หลายเดือนก่อน
This portfolio, built with Astro and Tailwind, offers a sleek, modern design. It's static for enhanced speed and security, with Astro handling optimization seamlessly. Live Demo: shadowstack-portfolio.vercel.app/ GitHub repo: github.com/leabs/shadowstack-portfolio Astro Docs: docs.astro.build/en/getting-started/ Formspree: formspree.io/
visionOS Style CSS Blur Transition in Astro!
มุมมอง 1.6K9 หลายเดือนก่อน
Code Repo: github.com/leabs/visionOS-blur-transition Add me on GitHub: www.github.com/leabs In this video we create a visionOS* style animation using keyframes in the CSS. I mistakenly call this "iOS" in a few spots, but iOS renders much differently. This is from the upcoming visionOS that is a part of the Vision Pro Apple Headset. Discover how to create seamless page transitions using CSS anim...
Building an Interactive Image Scroller in Astro: Step-by-Step Tutorial
มุมมอง 2K10 หลายเดือนก่อน
Add me on GitHub: github.com/leabs Join me as I build an interactive image scroller component in Astro, inspired by Stephen Tay's design. Learn how to create a vignette effect, handle light and dark modes, and optimize images using Astro's features. This tutorial is perfect for developers looking to add dynamic and visually appealing components to their Astro projects. Don't forget to subscribe...
User Login with Astro! (Authentication Using Supabase and Vercel)
มุมมอง 7K10 หลายเดือนก่อน
Add Authentication to an astro site using this helpful repo and this helpful document! Code Repo (via kevinzunigacuellar): github.com/kevinzunigacuellar/astro-supabase Astro document for Supabase auth: docs.astro.build/en/guides/backend/supabase/ Supabase: supabase.com/ Vercel: vercel.com/ 00:00 - Intro / Demo 00:44 - Astro Studio is coming 01:40 - Code repo we'll be using 03:04 - Review code f...
13 Python Scripts I Use (Automation, Openai, and more!)
มุมมอง 1.1K10 หลายเดือนก่อน
Code Repo: github.com/leabs/misc-python-apps In this video I show off some python apps I've made and talk about the idea of working outside the web dev space to get better as a developer. These scripts include #OpenaiAPI stuff, #openweathermap, #password #generator, and more in #python!
Deploy Static Sites to Cloudflare for Free
มุมมอง 2.7K10 หลายเดือนก่อน
Deploy Static Sites to Cloudflare for Free
Chatbot Website in One Click! Lobe Chat
มุมมอง 4.7K11 หลายเดือนก่อน
Chatbot Website in One Click! Lobe Chat
Open Source Contributions, How & Why You Should
มุมมอง 15111 หลายเดือนก่อน
Open Source Contributions, How & Why You Should
Astro 4.0: Complete Guide to Upgrading & New Features Explained
มุมมอง 4.8K11 หลายเดือนก่อน
Astro 4.0: Complete Guide to Upgrading & New Features Explained
Late November Astro Tailwind Flowbite Template update!
มุมมอง 42411 หลายเดือนก่อน
Late November Astro Tailwind Flowbite Template update!
M3 Pro MacBook Pro Review: A Web Developer's Perspective After 1 Week
มุมมอง 37K11 หลายเดือนก่อน
M3 Pro MacBook Pro Review: A Web Developer's Perspective After 1 Week
Add Your Own 3D Models to a Website Using Luma AI and Spline
มุมมอง 1.7K11 หลายเดือนก่อน
Add Your Own 3D Models to a Website Using Luma AI and Spline
MacBook Pro M3 Pro Review: A Game Changer for Video Editing & Gaming
มุมมอง 3.9Kปีที่แล้ว
MacBook Pro M3 Pro Review: A Game Changer for Video Editing & Gaming
New Template Components! Modal, Tabs, and More!
มุมมอง 681ปีที่แล้ว
New Template Components! Modal, Tabs, and More!
Code with me - Astro & Dall-E 3 Fall Vibes Site Build ASMR
มุมมอง 325ปีที่แล้ว
Code with me - Astro & Dall-E 3 Fall Vibes Site Build ASMR
Umami self hosted analytics. Better than GA?
มุมมอง 806ปีที่แล้ว
Umami self hosted analytics. Better than GA?
Hi. Looking fwd to more htmx /alpinejs videos
i tried but the keyboard shortcuts are very hard to remember. I am more a mouse guy when i need to move around and never liked vim because that..
It took me a few days to get them down tbh
Thank you for great tutorial.
What happen when you run npm run build? I try to do that but the files doesnt load the code well
Hey there, can you show me what kind of output you get in the terminal or link me to a repo you’re using. I’ll be happy to take a look. If you can run npm run dev then npm run build should work fine also
Ah so Ubuntu with wallpapers. Pretty nice...
There is much more here than just themes. Lazyvim, lazydocker, lazygit, a great terminal experience and windows management, common front and back end languages, neovim. I think of it more as a desktop image for web developers
Resolution of monitor?
Hey there this was captured on my desktop computer which is 2560 x 1440
Does this work on Linux Mint?
The documentation specifies Ubuntu but you could give it a go
I am interested in battery life. Is it still couple of hours when you do development or maybe that time is improved? I was hoping it would be at least 6 hours damn.
The battery life isn't much of an issue tbh. When I mention the "couple of hours" that is with screen brightness maxed, and many high demanding apps running at the same time (Docker, FInal Cut Pro etc). This is not a normal scenario for working off power. My initial reactions here nearly a year ago might've been over blown. In normal use 6 hours is for sure obtainable
same here using it for 2 weeks truly an amazing experience i use zed as my editor though
It seems like a great way to transition people into Linux! I've tried Zed also and I like it
@@shadowstack after using zed i realized i dont need those 100 extentions i installed on vscode , zed with lazygit does all the things i ever needed. Life is simple now
Never used Ubuntu, maybe I should look into it.
Yes! It's worth a look. Maybe try it in a VM if you're not sure if you'll like it
Neat!
Hey, how does it feel after almost one year?
Hey there, I’ll likely make another video when they announce the m4 Macs which is rumored to be any day now. My MacBook has run everything flawlessly and I have no regrets. It’s a great laptop that you can use like a desktop because it’s so powerful.
@@shadowstack Thank you for the feedback! I appreciate it!
Great video brother, keep going 👍
lost as soon as you pulled a terminal out of thin air.
🤣Its not magic, just a shortcut for macos to open up a terminal window. You can do the same on windows / linux which also have good terminal apps. The windows terminal app on the microsoft store is actually very good if you're on windows!
I'm new to Astro. Are there any templates for other kind of websites like blogs, portfolios etc?
Yes! Many are on Astro’s website: astro.build/themes/
Holy shit this is DOPE
alright now try to add the hover animations (I'm pretty sure OSX had it)
I would like to see is form, where I'll send the auth token with the post/patch request
Thanks for using Tina. We love this video so much we've linked to it from the official site's Astro page - great content! 🦙
Great explanation, was wondering how I would go about setting this combo up.
of course I thought this was going to work. astro import layout can't be found after install, can't opt out of sending data either
Hey there. I just cloned this project again and installed with "npm install" and ran it with "npm run dev" and saw no issues with the layout import or the data fetching. If you have a code repo with your code on github I would be happy to look at it
Awesome!
Good stuff on Astro! Keep it up.
Epic theme! Could you guide me through the process of replacing the "siteName" in the src/components/Nav.astro file with a custom logo for the navbar? I have two logos: darkLogo.png and lightLogo.png, and I want them to have the same size and orientation as the "siteName" (positioned on the left side). These logos should switch appropriately between light and dark mode.
Yes that is possible! Use both images in the src/component/Nav.astro as either an import from an assets folder or using the public folder (no need to import if from public just src="image.jpg") and use tailwind classes to toggle the images similar to how src/components/DevicieMockUp.astro. The Dark image would the class "dark:hidden" and the light mode image would have "hidden dark:block"
@@shadowstack worked like a charm, very cool theme
I'm currently working with your Astro Tailwind Flowbite template and have a question about the "/projects" page. I'm trying to customize each project (Project1, Project2, etc.) with unique content. I've created separate components (ProjectsCards.Astro, ProjectsCards1.Astro, etc.) for each, but the cards are still replicating across all four columns. Could you point me to where in the code this replication is happening so I can eliminate it?
It sounds like you're trying to adjust the `src/pages/projects.astro` page. You'd want to delete the block where we map over the projects (data.projects.map()). Delete that code starting with the opening curly bracket and then import each project card and render them as a component. Keep in mind the parent div uses grid classes to render the projects into columns using tailwind (grid md:grid-cols-2 sm:grid-cols-1 gap-8) so that can be adjusted accordingly. Here are the docs for that, hope this is helpful! tailwindcss.com/docs/grid-template-columns
@@shadowstack thanks i'll give it a try..
Awesome template for someone new to Astro. Thanks fro sharing! My one issue is trying to do a simple text page. I have a privacy policy I am trying to add, and not sure how to do a simple page with just heading and text that fits into the theme and format.
Well you could build it out like any of the other pages and use heading tags and P tags for the text. If its something like a privacy policy and wont need to be updated often that seems like the cleanest easiest way. You could also use Markdown and import the layout in the front matter so that way you could use the same page layout with just a simple clean text file (.md) but things like page title are not set up for markdown files. Here are the astro docs on importing a layout using a markdown file: docs.astro.build/en/guides/markdown-content/#frontmatter-layout
Is the m3 pro 18/512 enough for Data Science, machine learning and AI tasks?
I would say so! Unless you're given specific requirements for specific software, so it might be worthwhile to check out software that you'd likely use before you order
Thanks Bro.
I am using astro with vue js and i need to make state persitent between my vue component
It's not working
3-4 hours?? What are you doing?
Hey Leabs! Am looking forward to buy a new MacBook as am a CS student. Do you have any recommendations?
@@nikhilthomas9282 pretty much anything in the M series of chips will work great. If you’re anticipating heavier tasks you should upgrade the ram. And to avoid storage issues I’d say 512gb is the minimum storage amount. The MacBook Airs are portable and less expensive while the MacBook pros are more money but they have better thermals and a much better screen. MacBooks on apple’s refurbished store are also in great shape if you want to save some money
@@shadowstack Hey there! I ordered the MacBook Pro with M3 pro chip, 18gigs of ram and 512gb of SSD. Took your recommendation on storage and ram! Thanks bro!
I bought it using the University Student discount
@@nikhilthomas9282 Awesome I have a similar config, enjoy!
@@shadowstack Thanks! :)
didn't populate my global.css, but did partially break my tailwind config, presumably because I've now got a config.tailwind.mjs and .js file
great video man , I selfhost it in Coolify + Hetzner VPS but is it the best tool out there ?
I get to npm run start and get the response "'DISPLAY' is not recognized as an internal or external command, operable program or batch file." not sure what to do but I would love some guidance!
Are you trying to build the local development on windows, or what OS? What I would try first is deleting the node_modules folder in the directory and running npm install again (maybe something didnt install fully). Also you could try this: forum.magicmirror.builders/topic/12543/installing-magic-mirror-on-windows-10/2
@@shadowstack I’m on windows but thank you I’ll try that
Kinda sucks that astro doesn't have persistent layouts.
im starting web dev jun, planning to buy mba m3 13inch 16/512 or mbp m3pro 14inch 18/512. what will be better for me?
Hi there. Both are more than capable for web development. What it comes down to is the screen and bulk mostly. The pro has the better screen but is a bit chunky and heavier and more money. It’s total preference, I went with the pro and have no regrets
The thing I'm most curious about is knowing the pin sit in the files stored in your Chrome Mony Work Laringing Can you share with us about these sites that you use to learn, make money, and things that help you be productive in your work?
Please do more astro updates
Hi ! I am going to start computer science engineering next year. I can't decide between two options. 1. m2pro 16/1 2. m3pro 18/512 AI development is attracting me. Maybe I can use it for this field. The M3pro with 1 tb ssd is very expensive. Will 512 ssd be enough for me for 5 years? What do you recommend ?
Hey there, to be honest either machine would be ok I think. If you went with the 512GB SSD you might need to use an external storage drive down the road if you start running out of space but they are so fast these days the only real inconvenience is having to plug it in. The M2 pro and M3 pro both handle local LLMs pretty good!
@@shadowstack Thank you for your answer ! ✨ I have one more question . Can external stroge driver cause trouble like computer lag ? Can it be as efficient as an ssd on the chip ?
@@sena005 SSDs are very fast and they don't cost too much these days. I have a samesung T7 I used to back up files and have never had an issue with it!
Title says "Web Developer's Perspective" when in fact this is more of a content creator's perspective
Good point, as someone who does both I needed a machine that could also do both. The reality is web development doesn’t need as much power so I leaned into how well this runs more demanding software like Final Cut. My day job is web development and I do touch on my work flow with build tools so I think the title is ok
Je pense que tu n’a pas bien regarder si tu dit que t’est connectiques ne sont pas rayées si tu regarde les arrondis des connectiques la peinture part je le vois juste en vidéo donc bon et sa peut importe le mac et la couleur mais sur le noir sa se vois facilement pareil la bande du coin du mac donc la bordure en angle la ou t’ouvre le mac avec 1 doigt cet bordure la pareil sa s’écaille rapidement
Can i learn coding and run virtual machines with MacBook pro 18gb and 512gb? I've never attempted coding before i don't know where to begin.
yes this machine is more than capable I'm a professional and it does everything I need it to
@@shadowstack Thank you for answering my question. Greatly appreciated!!
show local install on docker mac m1/m2
ill try and get to this
@@shadowstack thanks bro 🙌🏻
Thanks sir for the review, I was hesitating if 18GB would be enough as a developer with a lot of chrome tab opened haha
Great script that works!!!
i got the error: 'An error occurred while installing pg (1.5.6), and Bundler cannot continue. In Gemfile: pg' tried the alternative ' rails db:system:change --to=postgresql' but got exactly the same error :(
It would help so much if you would put your browser and your IDE adjacent to each other instead of sliding between desktops constantly. It's disorienting.
Thanks for the feedback, I'll try and keep this in mind. I've had other people comment that the side by side layout made the text harder to read so maybe I can find a way to resolve both issues
@@shadowstack sorry if I was curt. Deploy issues are making me grumpy this afternoon! Thanks for the video.
@@mungojerie I didn’t take it that way I really do like feedback from people to make my videos better and I’m still working towards the best set up. Thanks for watching
Very good! thanks a lot
Where do you put your images? If you check them into got itself that quickly becomes unscalable.
Great question, deploying from git to cloudflare's workers and pages will automatically deploy assets to cloudflare's excellent CDN service. Any updates to the repo will trigger a redeploy but assets will always be hosted on cloudflare's CDN by default