Ben Haig
Ben Haig
  • Видео 36
  • Просмотров 97 203
8 SEO Tips for Absolute Beginners (no technical knowledge needed)
Ranking higher on Google can be tough, however, many small business owners do not do the most basic things possible. If you can do these 8 simple things, you are ahead of most small businesses.
Thank you so much for watching :)
Google My Business (US): www.google.com/intl/en_us/business/
Ahrefs Keyword Generator: ahrefs.com/keyword-generator
Sitemap Generator (If your CMS/Plugin doesn't do it for you): www.xml-sitemaps.com/
Google Search Console: search.google.com/search-console/about
Chapters:
00:00 - Intro
00:10 - Google My Business
00:52 - Local Citations
02:02 - Update Old Content
03:27 - Create New Content
05:10 - Title Tag
06:33 - Meta Description
08:24 - Plugins/Sitemap
10:06 - Google Search Cons...
Просмотров: 79

Видео

Using Python to Understand the Economy
Просмотров 534 месяца назад
Github Repo: github.com/benjaminhaig/world-economies/tree/main World Bank API: documents.worldbank.org/en/publication/documents-reports/api World Bank API (pip): pypi.org/project/wbgapi/ International Monetary Fund API: www.imf.org/external/datamapper/api/help Let me know what you think of this project and if you want me to go into more detail. Please also note this is in no way shape or form t...
React Typewriter Effect (In one line of code)
Просмотров 1,1 тыс.4 месяца назад
Setting up typewriting effects with css and Javascript can be a bit of a pain in the . Using the typewriter-effect npm package, we can quickly set up a typewriter effect in minutes. I use this effect on the homepage of my web development business. If you want to see an example in production, look at the top of the page on the following url: fabled-web.ca npm package: www.npmjs.com/package/typew...
Please Master These 7 React Hooks
Просмотров 2034 месяца назад
I would guess in 99% of the projects I work on, I can get away with only using the following hooks. If you master these hooks, you are one step closer to becoming a React master! Read more about each: useState() - react.dev/reference/react/useState useEffect() - react.dev/reference/react/useEffect useRef() - react.dev/reference/react/useRef useMemo() - react.dev/reference/react/useMemo useCallb...
Framer Motion in 15 Minutes (Intuitive React Animation Library for 2024)
Просмотров 3395 месяцев назад
Github Repo: github.com/benjaminhaig/framer-motion-tutorial Clone the "init" branch to get the template to follow along with the video. If you want to see the basic animations I used in the video, clone the "finished" branch. This will teach you the basics of how to install and use Framer Motion in your React project. However, 15 minutes isn't that long so I recommend using the documentation to...
Learn Astro FAST - For the Proficient Developer
Просмотров 1,2 тыс.5 месяцев назад
Warning: This content is NOT for absolute beginners to web development. This is for experienced developers that want to learn how to use Astro fast. If you are a complete beginner, start small without a framework and learn your basics such as html, Javascript/Typescript, DOM elements/manipulation, etc. Resources: Getting start guide: docs.astro.build/en/getting-started/ Build a blog: docs.astro...
How I got perfect web vitals on my website (Next.js)
Просмотров 2,5 тыс.9 месяцев назад
Resources: Bundle Analyzer: www.npmjs.com/package/@next/bundle-analyzer TinyPNG: tinypng.com/ My site: fabled-web.ca Next.js Performance Playlist: ruclips.net/p/PLq3vQvro30PY-l7UIgc8BH87tKP8wtWOa Chapters: 00:00 - Intro 00:34 - Site Walkthrough 01:14 - Performance 05:56 - Don't forget the Image component! 07:00 - Performance Optimization Tools 07:48 - Accessibility 09:02 - Best Practices 09:58 ...
Astro vs Nextjs - What should I use for my project?
Просмотров 1,7 тыс.10 месяцев назад
"Should I use Astro or Nextjs?" is a question I hear a lot... At the end of the day, your project most likely won't be ruined by either framework, however, the correct decision for you can save you lots of time. TLDR; I use Nextjs for anything requiring the support of a backend, and Astro for just about everything else. My blog post about it: fabled-web.ca/blog/astro-vs-nextjs Chapters: 00:00 -...
Firebase Cloud Functions V2 Part 2 - onRequest Functions (Episode 2)
Просмотров 35010 месяцев назад
Learn how onRequest functions work through a callable http endpoint! Github: github.com/benjaminhaig/cloud-firestore-tutorial/tree/episode-2
Firebase Cloud Functions V2 - Setup & First Call (Episode 1)
Просмотров 1,6 тыс.11 месяцев назад
Firebase Cloud Functions are powerful...we all already know that. Let's set up a V2 project with Typescript and create our first call! Github Repo: github.com/benjaminhaig/cloud-firestore-tutorial/tree/main Whats new in V2: firebase.google.com/docs/functions/version-comparison
Nextjs 14 ReCAPTCHA Setup (FULL GUIDE With V3)
Просмотров 12 тыс.Год назад
ReCaptcha can be a pain to set up, especially V3. In this tutorial, we will set it up with a new Nextjs 14 project and go through every step, line by line. This is a little longer than the content I usually post, as some comments have said I have been going too fast. Let me know if you like or dislike the longer content. Github Repo: github.com/benjaminhaig/nextjs14-recaptcha Packages used: www...
SEO in Next.js 13 - Everything You Need to Know!
Просмотров 3 тыс.Год назад
Ranking higher on Google isn't easy. Luckily for us, we have a lot of control in Next.js and we can make this process a lot easier than with many other frameworks. Tell me what you thought of the content in the comments below! I respond to every comment and I really want to hear what you think. Code: github.com/benjaminhaig/nextjs-seo generateStaticParams & generateMetaData video: ruclips.net/v...
Why Headless E-commerce? (Implementation with Next.js 13 & Shopify)
Просмотров 6 тыс.Год назад
A headless architecture for your e-commerce store will allow you to convert more traffic to sales and has a variety of other benefits. Vercel Commerce Repo: github.com/vercel/commerce Sources: www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/ www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm Want help moving to headless? We can hel...
Nextjs 13 ReCAPTCHA
Просмотров 11 тыс.Год назад
Nextjs 13 ReCAPTCHA
Partytown Setup - Astro
Просмотров 544Год назад
Partytown Setup - Astro
Partytown Setup - HTML
Просмотров 1,6 тыс.Год назад
Partytown Setup - HTML
Vim Directory Basics | Vim Basics Part II
Просмотров 154Год назад
Vim Directory Basics | Vim Basics Part II
Use the === instead of == in Javascript
Просмотров 31Год назад
Use the instead of in Javascript
Vim Basics in 7 Minutes
Просмотров 61Год назад
Vim Basics in 7 Minutes
Next.js Sitemap | Two Powerful Methods For Creating Static & Dynamic Sitemaps
Просмотров 2 тыс.Год назад
Next.js Sitemap | Two Powerful Methods For Creating Static & Dynamic Sitemaps
Next.js Performance & Speed Optimization | Episode #3 | Bundle Size & Budget
Просмотров 8 тыс.Год назад
Next.js Performance & Speed Optimization | Episode #3 | Bundle Size & Budget
Next.js Performance & Speed Optimization | Episode #2 | Bundle Analyzer & Dynamic Imports
Просмотров 26 тыс.Год назад
Next.js Performance & Speed Optimization | Episode #2 | Bundle Analyzer & Dynamic Imports
Next.js Performance & Speed Optimization | Episode #1 | Why use Image & Script Components?
Просмотров 4,6 тыс.Год назад
Next.js Performance & Speed Optimization | Episode #1 | Why use Image & Script Components?
Next.js Performance & Speed Optimization | Episode #0 | Introduction
Просмотров 3 тыс.Год назад
Next.js Performance & Speed Optimization | Episode #0 | Introduction
Next.js 13 Update | Episode #5 | Server Actions, Fonts, & Conclusion
Просмотров 187Год назад
Next.js 13 Update | Episode #5 | Server Actions, Fonts, & Conclusion
Next.js 13 Update | Episode #4 | Server & Client Components
Просмотров 398Год назад
Next.js 13 Update | Episode #4 | Server & Client Components
Next.js 13 Update | Episode #3 | generateStaticParams & generateMetaData
Просмотров 7 тыс.Год назад
Next.js 13 Update | Episode #3 | generateStaticParams & generateMetaData
Next.js 13 Update | Episode #2 | Data Fetching
Просмотров 230Год назад
Next.js 13 Update | Episode #2 | Data Fetching
Next.js 13 Update | Episode #1 | App Directory Basics
Просмотров 181Год назад
Next.js 13 Update | Episode #1 | App Directory Basics
Next.js 13 Update | Episode #0 | Getting Started
Просмотров 277Год назад
Next.js 13 Update | Episode #0 | Getting Started

Комментарии

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

    Your amazing thx for this

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

    Hot 🥵 thx!

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

    Thank you very much for this tutorial. It had helped me a lot in quickly setting up captcha for my forms. However, I unfortunately have to critisize the coding part of this tutorial, as it employs many bad practices and there are various sections where the code could easily fail. Implementing this 1:1 would make it difficult to maintain, can cause unexpected errors and could even hurt the site and its performance. If one follows this tutorial, I would highly recommend being cautious. Having a firm understanding of coding in general and the technology we are working with here are necessary.

  • @ragilburhanudinpamungkas9571
    @ragilburhanudinpamungkas9571 2 месяца назад

    what theme did you use?

    • @benhaig
      @benhaig 2 месяца назад

      Im assuming you mean vscode theme? If so its this! Name: Monokai Charcoal high contrast Id: 74th.monokai-charcoal-high-contrast Description: monokai Charcoal with High Contrast frame Version: 3.4.0 Publisher: 74th VS Marketplace Link: marketplace.visualstudio.com/items?itemName=74th.monokai-charcoal-high-contrast

  • @jesed2011
    @jesed2011 2 месяца назад

    I don't understand why I keep getting the CORS error after doing all of that :(

    • @benhaig
      @benhaig 2 месяца назад

      Sorry to just get back to you. Did u add the parameter for CORS to the function?

    • @jesed2011
      @jesed2011 2 месяца назад

      @benhaig Yes! I could solve It but thanks for answering. It's stupid, but after give permission to all user for invoking functions, it kept giving me the same error, so I had to delete the functions and deploy them again, thats how it was solved lol

    • @benhaig
      @benhaig 2 месяца назад

      I wish I had a better answer as to why…however I can say that your Google console tends to be more annoying with this kind of thing with an organizational account. Hope you figured it out let me know if there is any other way I can help👌

  • @SuperLapinas
    @SuperLapinas 2 месяца назад

    Great series. Thanks

  • @GaussJordan-q3j
    @GaussJordan-q3j 2 месяца назад

    Hey Ben! I'm trying to contact you!!

  • @GabrielSouza-sl8vp
    @GabrielSouza-sl8vp 2 месяца назад

    Nice video bro, thanks!

  • @SebastianPiñango-x2b
    @SebastianPiñango-x2b 3 месяца назад

    Very good tutorial!!

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

    For whatever reason the script never loads and the recaptcha client doesn't exist @_@

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

      If you want, feel free to send me the repo link and I can take a look for you👌

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

      @@benhaig Huhm I might take you up on the offer but this is a private repo unfortunately. I could probably get a minimum version up and running over the weekend though! I wonder if it is something to do with rehydration step, since the script does load but is unable to execute any commands due no client existing.

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

    I mainly use flask and due to the evolution of ai tools I would like to use some ai generated components which are usually in react I don't want to use react mainly so I was looking into using Astro but my issue is deployment. How do I deploy it to still work with my flask backend

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

    Great video very educative but the lighting on your face is a bit darker than your background and also I know you said it is for people that have already worked with some js frameworks before but I think even someone can pick it up even if that is their first framework

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

    Thanks bro! It was really lifesaving to me!

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

      Glad it helped out👍

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

    Awesome tutorial! Thank you. Quick question - is there a way to have the title remain on the screen (not delete itself) and have the cursor remain? So after the title has typed itself out, have the title and the blinking cursor remain on the screen.

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

      Great question! If you just pass the strings parameter a string instead of an array of strings, and leave loop as undefined or set to false, it will do just that! See below for an example: <Typewriter options={{ strings: "Thanks for watching!", autoStart: true, cursor: '_' }} />

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

      @@benhaig This works. Thank you!

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

    tge collections doesn't show on the carousel and threeitem grid

  • @mahdifazeli1119
    @mahdifazeli1119 4 месяца назад

    ridi

  • @ameeet_7
    @ameeet_7 4 месяца назад

    Great Video 😃👍

    • @benhaig
      @benhaig 4 месяца назад

      Thank you :)

  • @MR_GREEN1337
    @MR_GREEN1337 4 месяца назад

    But you didn't sign in though, you only validated captcha?

  • @SohaibZaman
    @SohaibZaman 4 месяца назад

    Thanks a lot

    • @benhaig
      @benhaig 4 месяца назад

      Happy to help!

  • @yashahuja312
    @yashahuja312 4 месяца назад

    "well now the title of the video is not fake" -ben haig

  • @lahrasouza1791
    @lahrasouza1791 4 месяца назад

    thanks <3

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 4 месяца назад

    thank you

  • @OmniOpal
    @OmniOpal 4 месяца назад

    Thanks for this tutorial! Just followed along and worked perfectly.

  • @old5728
    @old5728 4 месяца назад

    nice tutorial, thx :)

  • @rayyanep
    @rayyanep 4 месяца назад

    Thank you! I love how you always keep things bite-sized and practical. As someone who jumped into React after the class-component update, it can be really confusing to understand terms like 'on mount' and 'unmount.' I'm more familiar with terms like 'on render' and 'while render' within functional components.

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

    Better help than Chatgpt!!

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

    0:38 classic way to start a 40 minute video 😂😂

  • @StefanoVidmar-em3fl
    @StefanoVidmar-em3fl 5 месяцев назад

    amazing tutorial Ben keep posting vids! do you happen to have x(twitter) would love to connect!

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

    Great video! Do i need a markdown file for each blog post? Can i have a single file with all the posts and their info for the list and detail?

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

      I’m sure you could find a way to do it with one markdown file, however it would be challenging and you couldn’t use the content collections to easily organize them. Is there a reason why you only want to use one file?

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

      @@benhaig I dont know, i guess it made sense to me, iterating over an array of posts that are all in the same file. But what you did seems cleaner and more mantainable.

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

    Thanks a lot, that was really helpful❤

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

    1:29 Managing that didn't really pan out, huh?

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

    very helpful

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

    Thanks Ben! This was a really good and clear video about it :)

  • @siva-gy9ks
    @siva-gy9ks 6 месяцев назад

    In my case when i comlile the application it taking 8sec for 243 modules,and cpu percentage is hitting 100% when i koad the application Any way to resolve please suggest🙏🏻🙏🏻🙏🏻 I have done image optimization,dynamic loading

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

    Hey this video was really helpful, PLEASE make more NextJS + Shopify ones. The vercel/commerce repo is awesome starter

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

    I was able to implement this with server actions and worked perfectly in localhost. As soon as i put i on a domain the widget dosnt load at all. Ive added the domain to the google admin console too. Am I missing something? Also, thanks so much for the video because no one else is demonstrating this.

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

      An update to this is that it only occurs when i build and deploy as docker. So im assuming im missing something when building either in dockerfile or other.

    • @tomcatbuzz
      @tomcatbuzz 4 месяца назад

      No it will be broken if any user or yourself has ghostery or malware bytes browser guards, they completely block the recaptcha script now, no matter what solution you use. Been fighting this issue for weeks. I have many apps using recaptcha, they get blocked on my machine by browser guards, so I assume if users have the same they can't submit any forms.

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

    Can this package be used for v3 as well?

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

    So useful my man!!!

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

      Very happy you enjoyed 😁

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

    Doas anyone have a brower-error ?

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

    Thank you! Helped me out a lot! Cheers from Brazil!

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

      Very glad you found the content helpful 😁

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

    i have never seen this content before, thank you and congratulations!

  • @HoangPhan-le9yh
    @HoangPhan-le9yh 7 месяцев назад

    Can u do with Cloudflare ?

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

    Thank you so much for making this video

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

    Thanks for this tutorial, its very nice to follow along and double-check things. Make sure I'm doing it somewhat correctly :]

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

    Where is the guide for Shopify and next js? I need Shopify auth context for my next web app a full tutorial would be amazing

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

    this is so useful. I'm still new to nextjs, i'm just wondering since generateStaticParams creates the params at build time, how do we generate new static pages when we add new posts via a headless cms, for example?

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

    You should continue breaking this ecommerce integration down, and how we can make it our own by walking us through your own ecommerce example.

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

    How can i make it so when i add or modify a post, the dynamic sitemap updates so it reflects this change? Does it work with on demand revalidation? So when i hit the revalidation route to add a post to my website, for example, would the server-sitemap automatically updates? I am currently struggling to do this here.

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

      Can you share me on your repo? If you want I can take a look. It should revalidate without issue.

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

    Where do you host your website?

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

      Depends on the type of project. For Nextjs, typically Vercel as it’s super easy and quick to setup. However it does tend to cost 4-5x just using AWS (Vercel uses AWS on the backend), so use whatever is in your budget.

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

    Thank you very much for this video sir.

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

      No worries glad it helped 😁