Benjamin Carlson
Benjamin Carlson
  • Видео 135
  • Просмотров 1 229 360
Algolia Search Records Script in Next.js // Automate Everything
Learn how to create a JS script to send your search results to Algolia. In this video, we'll create the script using environment variables, fs, path, and gray-matter. Then we'll query the data and transform them into the type of data Algolia requires. Finally, we'll add it to package.json so it runs every time you build your Next.js app!
coffeeclass.io
☕ Want to learn to code for free? Check out www.coffeeclass.io? for programming tutorials and snippets. Sharpen your skills with coffeeclass.io Learn! Read the article version of my RUclips videos!
My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - amzn.to/3wddJHL
🖥️ Monitor - Sams...
Просмотров: 3 422

Видео

Progressive Web App in Next.js
Просмотров 4,2 тыс.3 года назад
Learn how to turn a Next.js website into a Progressive Web App (PWA) within minutes using the next-pwa package. Helpful Links: manifest.json generator: www.simicart.com/manifest-generator.html code: github.com/bjcarlson42/next-pwa Download the simple PWA made in this video! next-pwa-rosy.vercel.app coffeeclass.io ☕ Want to learn to code for free? Check out www.coffeeclass.io? for programming tu...
Intersection Observer API - A Quickstart
Просмотров 1,9 тыс.3 года назад
Learn how to use the Intersection Observer API with an example. We create a sidebar which adds an active class to the active section header. The active section is determined by using the Intersection Observer API! I explain every aspect of the api so you can modify it for your needs. In this video, we use Next.js but any framework (or no framework) will work. You will just have to modify the co...
Chakra UI + TailwindCSS In Same Next.js Website? A Quickstart
Просмотров 7 тыс.3 года назад
In this video, we will add Chakra UI and TailwindCSS to the same Next.js website! Chakra UI is inspired by Tailwind, so using these 2 together actually works really well. 0:00 Introduction 0:28 Create Next.js app 0:34 Add TailwindCSS 1:46 Add Chakra-UI 2:30 Conclusion coffeeclass.io ☕ Want to learn to code for free? Check out www.coffeeclass.io? for programming tutorials and snippets. Sharpen y...
Splitbee Analytics Quickstart With Next.js - Best Google Analytics Alternative?
Просмотров 2,2 тыс.3 года назад
In this video we will add Splitbee analytics to a Next.js website, create a custom event, and create an automation using Notion to track that event. I'll finish by talking about my experience with. Splitbee and why I like it more than Google Analytics! 0:00 Splitbee Highlights Overview 3:00 In this video 4:21 Creating a project 5:02 Adding tracking tag 7:40 Adding an event 12:15 Creating an aut...
Build A Todo App Using Next.js, Firebase, Chakra UI + React Hooks | Crash Course
Просмотров 7 тыс.3 года назад
In this video we create a todo app using Next.js, Firebase, Chakra UI, and React hooks (useState and useEffect). This is a full stack app. We code the following functions: - write to cloud firestore - read data using snapshot useEffect - delete a todo - sign in with different accounts and protect data In addition to the above, using Chakra UI we are able to easily create a beautiful UI. We use ...
Shared Preferences - How To Persist State - Flutter Crash Course
Просмотров 4,8 тыс.3 года назад
Learn how to persist state in a Flutter app using the shared preferences flutter pub get package. We install shared preferences and then add shared preferences to the default Flutter counter app. This is a crash course on shared preferences as well as a crash course in persisting state. You can also use shared preferences to add light/dark mode or save basic user settings. It is not recommended...
Advanced Chakra UI - Custom Theme, config, useBreakpointValue
Просмотров 9 тыс.3 года назад
Learn 5 advanced Chakra UI features including how to use multiple theme files, useBreakpointValue, useMediaQuery, config, and how to create a custom color palette. Read this on coffeeclass.io: www.coffeeclass.io/snippets/advanced-chakra-ui-do-you-know-all-5 0:00 Introduction 0:18 1. Custom Theme Multiple Files 1:08 2. useBreakpointValue 1:29 3. useMediaQuery 1:53 4. config 3:04 5. Custom Color ...
Learn Next.js By Building A Developer Blog/Portfolio - Next.js Crash Course
Просмотров 4,2 тыс.3 года назад
Learn Next.js by creating a developer blog in this ⚡ fast paced ⚡ crash course. We cover everything from seo, deploying, api routes, swr, next-mdx-remote and even add a css framework - Chakra UI. If you are looking for the basics, don't worry. We start by covering the basics and you learn Next.js by building a fully fledged developer portfolio and blog! Read this on coffeeclass.io: coffeeclass....
GitHub Copilot Solves Leetcode Questions With Ease - My Thoughts On Copilot
Просмотров 1,3 тыс.3 года назад
GitHub Copilot was released a little while ago. It is an AI code bot that suggests lines of code as you work! In this video I talk about GitHub Copilot, show you some practical examples, and give you my opinion on it. GitHub Copilot even solves a Leetcode question with ease! Sign up for the beta: copilot.github.com/ 0:00 Introduction 0:27 GitHub Copilot Website 0:45 Testing it out with react bu...
Deploy Wordpress Website With Hostinger! Cheap Fast Wordpress Hosting
Просмотров 2763 года назад
Navigate to hostinger.com/BENJAMIN and use code "BENJAMIN" for an additional 10% off! In this video we deploy a Wordpress website using Hostinger. Hostinger is a cheap, reliable, and fast web hosting service that has hosting dedicated for Wordpress websites. If you are a developer, designer, student, or someone who just wants to quickly and easily set up a website, this is the easiest and cheap...
Chakra UI Responsive Sidebar
Просмотров 37 тыс.3 года назад
Code a beautiful sidebar navigation using Chakra UI. Helpful Links: Code: github.com/bjcarlson42/chakra-left-responsive-navbar Demo: chakra-left-responsive-navbar.vercel.app/ Chakra Docs: chakra-ui.com/ Feather React Icons: react-icons.github.io/react-icons/icons?name=fi Dribbble Design: dribbble.com/shots/15307679-Sidebar-Navigation-Tooltip-Exploration This video is part of the "From Design To...
Chakra UI Dashboard - With Next.js
Просмотров 31 тыс.3 года назад
Code along as I take a Dribbble dashboard design and code it using Chakra UI and Next.js! Along with Chakra UI, we use the react hook useState to make the content a bit more dynamic. This dashboard is fully responsive and follows best practices! This design uses the default Chakra UI theme but if you have a custom theme, you can modify it accordingly. Helpful Links: Code: github.com/bjcarlson42...
Flutter Provider Tutorial (State Management)
Просмотров 81 тыс.3 года назад
Flutter Provider Tutorial (State Management)
Next.js + MDX Crash Course
Просмотров 11 тыс.3 года назад
Next.js MDX Crash Course
Utterances - Add Comments To React/Next.js Blog!
Просмотров 3,7 тыс.3 года назад
Utterances - Add Comments To React/Next.js Blog!
Chakra-UI Hamburger Navigation Menu (with Next.js)
Просмотров 23 тыс.3 года назад
Chakra-UI Hamburger Navigation Menu (with Next.js)
NextJS Firebase QuickStart - Authentication, Cloud FireStore, Realtime Database, Storage (2/2)
Просмотров 9 тыс.3 года назад
NextJS Firebase QuickStart - Authentication, Cloud FireStore, Realtime Database, Storage (2/2)
Flutter Image Widget Tutorial Crash Course (assets, network)
Просмотров 9 тыс.3 года назад
Flutter Image Widget Tutorial Crash Course (assets, network)
Vercel Crash Course - Deploy Next.js To Vercel
Просмотров 6 тыс.3 года назад
Vercel Crash Course - Deploy Next.js To Vercel
NextJS Firebase QuickStart - Authentication, Cloud FireStore, Realtime Database, Storage (1/2)
Просмотров 37 тыс.3 года назад
NextJS Firebase QuickStart - Authentication, Cloud FireStore, Realtime Database, Storage (1/2)
Flutter Music Player - Apple Music Clone - Flutter UI Speed Code
Просмотров 3,4 тыс.3 года назад
Flutter Music Player - Apple Music Clone - Flutter UI Speed Code
Coding A Bitcoin Trading Bot Using Python (robin_stocks)
Просмотров 3,9 тыс.3 года назад
Coding A Bitcoin Trading Bot Using Python (robin_stocks)
useEffect and useState in NextJS - React Hooks
Просмотров 27 тыс.3 года назад
useEffect and useState in NextJS - React Hooks
Add Prism Code Syntax Styling To NextJS Blog (mdx-prism)
Просмотров 5 тыс.3 года назад
Add Prism Code Syntax Styling To NextJS Blog (mdx-prism)
NextJS + ChakraUI Blog With next-mdx-remote (2 of 2)
Просмотров 4,3 тыс.3 года назад
NextJS ChakraUI Blog With next-mdx-remote (2 of 2)
NextJS Blog With next-mdx-remote (1 of 2)
Просмотров 9 тыс.3 года назад
NextJS Blog With next-mdx-remote (1 of 2)
Chakra UI + Next JS Quickstart - Build A Personal Website And Blog (2 of 2)
Просмотров 10 тыс.3 года назад
Chakra UI Next JS Quickstart - Build A Personal Website And Blog (2 of 2)
Chakra UI + Next JS Quickstart - Build A Personal Website And Blog (1 of 2)
Просмотров 26 тыс.3 года назад
Chakra UI Next JS Quickstart - Build A Personal Website And Blog (1 of 2)
Building Your Apps!
Просмотров 5153 года назад
Building Your Apps!

Комментарии

  • @_Curiosity_
    @_Curiosity_ Месяц назад

    FUCK FUCK FUCK FUCK FUCK FUCK!!!!!!!!!!!!!!!!!!!!!!!!!

  • @Gayuuu-y1c
    @Gayuuu-y1c Месяц назад

    will it work for react website?

  • @marynam1559
    @marynam1559 3 месяца назад

    Thank you! It was very helpful !

  • @prajwal.gadakh
    @prajwal.gadakh 4 месяца назад

    Thanks man, it worked

  • @alaminmuhammed4137
    @alaminmuhammed4137 5 месяцев назад

    For any using this and gets '502 bad gateway' error, just leave the WSGIPath as was given in the ebs django documentation (i.e. WSGIPath : ebdjango.wsgi:application)

  • @georgesroberto21
    @georgesroberto21 5 месяцев назад

    And I come to the end of the tutorial thanks to the great flow of content. It's like completing a movie series leaving you satisfied but hoping it would continue. Mad Respect Sir Benjamin!

  • @georgesroberto21
    @georgesroberto21 5 месяцев назад

    Mad Respect Sir Benjamin👍!

  • @georgesroberto21
    @georgesroberto21 5 месяцев назад

    Thank Big Time Benjamin. Just the fact that you have taken your time to explain each line of code down from its origin to the most simplified bit of it is amazing! Mad Respect Sir 🥳. You make Django feel like the home it is! The video is helpful in 2024! I like your content! 👍

  • @LeonardoJavierRodriguezGutierr
    @LeonardoJavierRodriguezGutierr 5 месяцев назад

    This is 3 years-old, just found it and this is the only Chakra UI tutorial that did actually help AND taught

  • @MathComputerScienceTradi-ge7tw
    @MathComputerScienceTradi-ge7tw 5 месяцев назад

    What’s the difference between .read and .watch

  • @ahmednoor1075
    @ahmednoor1075 6 месяцев назад

    for those whose first pop-up at 6:44 dosnt work, use this code (By.XPATH, "//div[text()='Not now']") as its NOT A BUTTON, ITS A DIV ELEMENT

  • @derciopale
    @derciopale 6 месяцев назад

    Thank you for sharing

  • @shero4119
    @shero4119 7 месяцев назад

    Thank you so much for your videos man. They're super helpful and fun.

  • @RTG-1999
    @RTG-1999 8 месяцев назад

    Thank you soo much. i needed it

  • @maxharano940
    @maxharano940 8 месяцев назад

    how do you do it in TS? threw a bunch of errors...

  • @wackyguyoverthirty
    @wackyguyoverthirty 9 месяцев назад

    This working as of today Benjamin? ❤

  • @kinolar_olam
    @kinolar_olam 9 месяцев назад

    thank bro 👍👍🙌🙌

  • @очиньзлойпон
    @очиньзлойпон 9 месяцев назад

    No, better use overflow-x: scroll and overflow-y: hidden or auto

  • @hendrakusuma2026
    @hendrakusuma2026 9 месяцев назад

    in new version of next js, i was confuse how to add font awesome because different structure folder, there is no pages folder

  • @fellowwanderer8767
    @fellowwanderer8767 10 месяцев назад

    why is there a class name 'RxpZH'?

  • @ShivamSharma-wl3bd
    @ShivamSharma-wl3bd 10 месяцев назад

    it’s showing 502 bad gateway eeror after deploying

  • @verycommonguy9489
    @verycommonguy9489 10 месяцев назад

    thanks mate! i might be too late but can we somehow create an automation system which notifies us when we receive a call on instagram?

  • @vishalmt6503
    @vishalmt6503 10 месяцев назад

    I don't know .. if you are active anymore ... but this is exactly what I needed !

    • @BenjaminCarlson
      @BenjaminCarlson 10 месяцев назад

      Thanks! The thing I love about RUclips is I don’t have to post and the videos still help people!

  • @Idonoteatdogs6
    @Idonoteatdogs6 10 месяцев назад

    Lol dont call your lists list just call it lst or a placeholder _

  • @KonstantinM-nuu
    @KonstantinM-nuu 10 месяцев назад

    Great video. Thanks!

  • @Nikita-d4o
    @Nikita-d4o 10 месяцев назад

    FYI you cannot use Big O for average and best case scenarios because Big O represents the worst case. Average case would be Big Theta and best case would be Big Omega.

  • @squiddymute
    @squiddymute 10 месяцев назад

    automation from a headless browser will probably get you suspended

  • @user-br9sh3xn5v
    @user-br9sh3xn5v 11 месяцев назад

    What name apps?

  • @lebaf8661
    @lebaf8661 Год назад

    If I'm looking to consume those icons via API, how can I do it, with the issue of imports, it really makes it difficult for me to think about it.Greetings.

  • @syedshahzanhussain2092
    @syedshahzanhussain2092 Год назад

    Code?

  • @shotoiyo
    @shotoiyo Год назад

    I dont think that makes sense. What if we want separate appbars, and other widgets that come within Scaffold for every page? I don't think title and Scaffold widgets should be same for each screen except bottom navbar:(

  • @christianloizou4463
    @christianloizou4463 Год назад

    Brilliant tutorial, thank you

  • @GyanChandPokhriyal-u2y
    @GyanChandPokhriyal-u2y Год назад

  • @kacperkepinski4990
    @kacperkepinski4990 Год назад

    calc in action

  • @lucasyoung9594
    @lucasyoung9594 Год назад

    Question: How do you make the hamburger button disappear? I have what I believe is the same code as you (I don't use theme breakpoints though, I use the standard given breakpoints). When I click on the hamburger icon, it still remains, and everything else opens (including the close icon). And when I click the close icon, everything just opened closes. The display for the hamburger icon is set as "Flex" and not "display" which I believe would change it. If you or anyone knows the answer to this, that would be great to know!

    • @lucasyoung9594
      @lucasyoung9594 Год назад

      I made a solution which was just to give the Hamburger Menu Button its own useState, and switch on it's own click and on the close icon click, so it's like this: const [display, changeDisplay] = useState("none"); const [hamDisplay, changeHamDisplay] = useState("flex"); <Flex display={{ base: hamDisplay, sm: hamDisplay, md: "none", lg: "none" }} flexDirection={"column"} justify="flex-end" > <IconButton aria-label="Open Menu" size="lg" m={2} icon={<IoMenu />} // display={["flex", "flex", 'none', 'none']} display={{ base: "flex", sm: "flex", md: "none", lg: "none" }} onClick={() => { changeDisplay("flex"); changeHamDisplay("none"); }} /> </Flex> {/* Mobile Content */} <Flex w="100vw" display={display} zIndex={20} flexDirection="column"> <Flex justify="flex-end"> <IconButton mt={2} mr={2} aria-label="Close Menu" size="lg" icon={<IoCloseSharp />} onClick={() => { changeDisplay("none"); changeHamDisplay("flex"); }} /> </Flex> ... {remainder of code} But I am still curious about a solution that doesn't require two different useStates.

  • @multifunctionalchannel2045
    @multifunctionalchannel2045 Год назад

    Спасибо за видео, но у меня почему-то при переходе на страницу сталь появляться отступ сверху, что это может быть?

  • @odio_stationofficial3420
    @odio_stationofficial3420 Год назад

    You can, but must never use list as name of your list, str as name of your string and so on... because first when I looked at your most frequent finding statement, I wondered for long how tf could that work because statement had 'list' written without '( )', then I saw that list was not a function, but name...

  • @tempo-v3v
    @tempo-v3v Год назад

    Thanks for the interesting video bro, I just have a small query: I guess this code is no longer working, and it doesn't extract any link (links=0), I guess maybe Instagram changed its structure or something, hope can get update from you.

  • @RtlDev-n9g
    @RtlDev-n9g Год назад

    usual example, nothing new

  • @rodrigo100kk
    @rodrigo100kk Год назад

    Great video! When I get stucked in titles = soup.findAll('a', id='video-title') cuz the 'title' variable is an empty list.

  • @kqanoffical
    @kqanoffical Год назад

    Such a good video.

  • @IgorChernega
    @IgorChernega Год назад

    What a useless video. Installing 2 libs and using them separately. It doesn't add any value. Teaching us how to npm install things and create headings? That's ridiculous. Sorry for being toxic) But that is such a non-sense

  • @mlungisimdhlalose8698
    @mlungisimdhlalose8698 Год назад

    How can you do less frequent items?

  • @henrywaldersee4670
    @henrywaldersee4670 Год назад

    Hey just wanted to add that now it is also possible to run a headless browser with selenium, which should probably be easier to run on the server side without a display

  • @securitynvrnvr7776
    @securitynvrnvr7776 Год назад

    Nice vid thanks you so much, trying to get my app to remember states using ( AutomaticKeepAliveClientMixin { super.build(context); @override bool get wantKeepAlive => true;) but its not working my question is do you need the "MultiProvider and ChangeNotifierProvider" package to use the code in you vid thanks Benjamin. Some vids are to fast and leave out details this is perfect.

  • @sb_raash
    @sb_raash Год назад

    even the new chrome version of web-driver not getting response from websites (not working for 90% websites)

  • @nihalanil4444
    @nihalanil4444 Год назад

    Can you tell me on how to add a page unit?

  • @maryamfarzi-t3u
    @maryamfarzi-t3u Год назад

    pls share source code

  • @janing06
    @janing06 Год назад

    How to use external database

  • @classichuang5567
    @classichuang5567 Год назад

    helpful and thanks