CodeDunks
CodeDunks
  • Видео 56
  • Просмотров 680 302
Technologies I'm Learning in 2023
In this video, I discuss the technologies and frameworks that I plan to learn in 2023. These include react, web development fundamentals such as HTML, CSS, and JavaScript, typescript, python, svelte, solid.js, Astro, next.js, remix, and a variety of libraries including trpc and prisma. I also mention my plans to get more familiar with cloud platforms and infrastructure, and to continue learning about machine learning and artificial intelligence. I'm excited to dive into these topics and share my progress and insights with you along the way.
Просмотров: 916

Видео

MobX Tutorial with React and Typescript
Просмотров 19 тыс.2 года назад
In this video we will be looking into MobX, a state management library and setting up a quick project with React and Typescript. MobX: mobx.js.org/README.html
GraphQL Fragments Tutorial
Просмотров 3,8 тыс.2 года назад
In this video, we will be going over GraphQL Fragments in a quick tutorial. One of my co-workers recently helped shine a light on how to really get the most out of GraphQL and that involves fragments. Fragments are especially useful with React due to how it allows you to follow the same tree structure in which React renders its components. We are going to start a simple full-stack project using...
Turborepo Tutorial | Part 2 - Testing, Deployment, and remote cacheing.
Просмотров 17 тыс.2 года назад
We will be looking at the newly acquired library by Vercel known as Turborepo. In this tutorial we will be focusing on the initial project sharing configuration for 2 Next.js Frontend apps, along with a Node.js server all using Typescript. We will look how to setup Jest for our 2 projects, as well as setup github actions. We will also look how to deploy a project to vercel, and finally how to u...
Turborepo Tutorial | Part 1 - Typescript, Eslint, Tailwind, Husky shared config setup in a Monorepo
Просмотров 60 тыс.2 года назад
We will be looking at the newly acquired library by Vercel known as Turborepo. In this tutorial we will be focusing on the initial project sharing configuration for 2 Next.js Frontend apps, along with a Node.js server all using Typescript. We will focus on creating a shared base typescript config, as well as a shared one for the Next.js projects and another config for the server app. We will al...
Setting up Tailwind with Styled Components using Twin.macro in Next.js
Просмотров 15 тыс.2 года назад
In this video, we will be looking at how to set up tailwind css with styled-components using a helper library known as twin.macro tailwind: tailwindcss.com/ styled-components: styled-components.com/ twin.macro: github.com/ben-rogerson/twin.macro I really enjoyed setting this library up because you get the best of both worlds. The flexibility in using tailwind classes as well as the extraction o...
Terraform Tutorial | Setup with Docker, AWS, and Terraform Cloud
Просмотров 4,3 тыс.2 года назад
In this tutorial we are going to be covering Terraform, an infrastructure as code solution that allows you to define resources and infrastructure for many different types of providers. This allows extensive decoupling and source of truth in case you ever need to change hosting providers. In this video we will be looking at how to install and use the terraform CLI, as well as integrate it with t...
Tailwind CSS Tutorial with Next.js and Typescript | Part 2 - Usage and JIT Mode
Просмотров 3,7 тыс.2 года назад
Tailwind CSS has recently hit 1,000,000 weekly downloads on npm and I decided it was time to check out the interesting CSS framework. In this video, we will look at how to use the tailwind CSS framework different main concepts. These being the utility first built-in classes, the responsive design work, and accessing states while using the framework. We will also look at how to set up Just in Ti...
Tailwind CSS Tutorial with Next.js and Typescript | Part 1 - Setup and Install
Просмотров 10 тыс.2 года назад
Tailwind CSS has recently hit 1,000,000 weekly downloads on npm and I decided it was time to check out the interesting CSS framework. In this video we will look at some pros and cons of the Tailwind CSS library, as well as look at different ways to configure a Next.js application using Tailwind and Typescript. We will manually set this up so that we can in-depth go over what is really happening...
Next.js 11 setup with Material UI Version 5 | Part 2 - Styled-Components
Просмотров 9 тыс.3 года назад
Some of our favorite libraries have gone through some major upgrade versions. In this video, I look at how to set up the new Next.js version 11 with Material UI version 5. There are 2 new ways to set up Material UI version 5 and in this video, we will look at how to set it up using styled-components and the styled-components engine. Since emotion is pretty similar to styled-components we will n...
Next.js 11 setup with Material UI Version 5 | Part 1 - Emotion
Просмотров 31 тыс.3 года назад
Some of our favorite libraries have gone through some major upgrade versions. In this video, I look at how to set up the new Next.js version 11 with Material UI version 5. There are 2 new ways to set up Material UI version 5 and in this video, we will look at how to set it up using the library called emotion. We will also do a quick tutorial on emotion so that If you are unfamiliar with it, we ...
NextAuth Tutorial | Part 4 - React Query
Просмотров 7 тыс.3 года назад
We will be looking at how to setup authentication in your next.js application using the open-source library known as NextAuth.js This library is a pleasure to use and really makes setting up authentication in your next.js application a breeze. In this video we are going to look at how to integrate and utilize react-query with next-auth. Starter project github: github.com/leoroese/nextauth-tutor...
NextAuth Tutorial | Part 3 - Custom pages, callbacks, and events
Просмотров 19 тыс.3 года назад
We will be looking at how to setup authentication in your next.js application using the open-source library known as NextAuth.js This library is a pleasure to use and really makes setting up authentication in your next.js application a breeze. In this video we are going to look at how to setup a custom login page instead of using the default next-auth page given to us. We will also look at some...
NextAuth Tutorial | Part 2 - Social and Credentials Providers
Просмотров 10 тыс.3 года назад
We will be looking at how to setup authentication in your next.js application using the open-source library known as NextAuth.js This library is a pleasure to use and really makes setting up authentication in your next.js application a breeze. In this video we are going to look at how to setup a social login connection using Github as well as the old school username and password setup. Starter ...
NextAuth Tutorial | Part 1 - Setup and Email Provider
Просмотров 34 тыс.3 года назад
We will be looking at how to setup authentication in your next.js application using the open-source library known as NextAuth.js This library is a pleasure to use and really makes setting up authentication in your next.js application a breeze. In this video we are going to look at how to install and setup the library, as well setting up the Email passwordless provider which I believe is the nex...
Authentication and Authorization Setup with Okta
Просмотров 46 тыс.3 года назад
Authentication and Authorization Setup with Okta
MaterialUI Flexbox & Grid Tutorial
Просмотров 15 тыс.3 года назад
MaterialUI Flexbox & Grid Tutorial
React Hook Form V7 with Material UI and Typescript Tutorial | Part 5 -- Testing
Просмотров 5 тыс.3 года назад
React Hook Form V7 with Material UI and Typescript Tutorial | Part 5 Testing
React Hook Form V7 with Material UI and Typescript Tutorial | Part 4 -- Complex Forms with State
Просмотров 7 тыс.3 года назад
React Hook Form V7 with Material UI and Typescript Tutorial | Part 4 Complex Forms with State
React Hook Form V7 with Material UI and Typescript Tutorial | Part 3 -- useFieldArray
Просмотров 13 тыс.3 года назад
React Hook Form V7 with Material UI and Typescript Tutorial | Part 3 useFieldArray
React Hook Form V7 with Material UI and Typescript Tutorial | Part 2 -- FormProvider
Просмотров 16 тыс.3 года назад
React Hook Form V7 with Material UI and Typescript Tutorial | Part 2 FormProvider
React Query Setup with Typescript, GraphQL, and GraphQL Codegen
Просмотров 9 тыс.3 года назад
React Query Setup with Typescript, GraphQL, and GraphQL Codegen
React Query Tutorial with Typescript | Part 5 -- Next.js Server Side Rendering
Просмотров 12 тыс.3 года назад
React Query Tutorial with Typescript | Part 5 Next.js Server Side Rendering
React Query Tutorial with Typescript | Part 4 -- Paginated, Infinite Queries
Просмотров 5 тыс.3 года назад
React Query Tutorial with Typescript | Part 4 Paginated, Infinite Queries
React Query Tutorial with Typescript | Part 3 -- QueryClient
Просмотров 3,8 тыс.3 года назад
React Query Tutorial with Typescript | Part 3 QueryClient
React Query Tutorial with Typescript | Part 2 -- Mutations
Просмотров 13 тыс.3 года назад
React Query Tutorial with Typescript | Part 2 Mutations
React Query Tutorial with Typescript | Part 1 -- Queries
Просмотров 24 тыс.3 года назад
React Query Tutorial with Typescript | Part 1 Queries
Apollo Federation Setup | Part 2 -- Managed Federation
Просмотров 2,4 тыс.3 года назад
Apollo Federation Setup | Part 2 Managed Federation
Apollo Federation Setup | Part 1 -- Federation setup
Просмотров 6 тыс.3 года назад
Apollo Federation Setup | Part 1 Federation setup
Docker, Docker-Compose Quick Setup Tutorial
Просмотров 6243 года назад
Docker, Docker-Compose Quick Setup Tutorial

Комментарии

  • @prikshitgoyal714
    @prikshitgoyal714 17 дней назад

    Thank you so much 👍🏻

  • @bilkisuismail6096
    @bilkisuismail6096 26 дней назад

    Thank you

  • @ChrisDebevec
    @ChrisDebevec 29 дней назад

    This was helpful especially to start doing some basic terraform and understand how to run this in ci/cd environment. But the 1 additional piece i wish this included was how to get the docker container on the ec2 that's deployed.

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

    Thank you for the video. Could you please create a video which shows how to create for with mui radio buttons and how to register them? And also how to render a textbox on selecting one of radios?

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

    This video makes me level up my software engineering knowledge, nice video

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

    thanks man, i enjoyed

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

    Hi how to add a new app using a command e.g. npx create-payload-app@latest as an app to a turborepo? I can 't find this anywhere clearly? So...is it just delete the node_modules and copy/move all the new app files to /apps and add name and version to the workspaces?

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

    Exactly what i was looking for! You've just earned a subscriber my dude!

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

    Great one, thanks a lot.

  • @VINODMAKKENA-e7q
    @VINODMAKKENA-e7q 2 месяца назад

    This is helpful. Thank you

  • @VINODMAKKENA-e7q
    @VINODMAKKENA-e7q 2 месяца назад

    Very helpful. Thank you

  • @JonathanCoe-my1gl
    @JonathanCoe-my1gl 3 месяца назад

    What wizard trick did you do ~13:15? No change appears in the video that is obvious.

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

    Can we get a link to the code/repo? for further in depth look?

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

    Good work, but you missed explaining all the permissions in an aws iam policy file that is needed to be able to run a successful "serverless deploy" command, it took me a while to have that set up

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

    Thank you. Clear and concise. Subscribed!

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

    Men, where is the code?!

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

    Hi I know you uploaded it a long ago, the think I liked is the usig types in useFieldArray. The problem is that in my form I have useFieldArray inside useFieldArray and in this case its doesnt recognize the type

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

    hey great video. Here I am confuse about invcocation API, why does it generates and can we avoid it from generating ?

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

    In Next 13, I have a list of products with categories. I want to put these categories into constants so I can check if a product belongs to one category or another. For example: if (product.id === CONSTANTS.DRINKS) { //do something with the product if it is from the drinks category } These constants would be populated upon a request to an external API. They must be filled in throughout the code and will be used in both common javascript files and React components. Is there a way to do this in the next 13? Considering that there are files that are rendered on the server and other files that use RTK that will be rendered on the client. Is there another approach to distributing these constants throughout the code? I tried to make a request to the API to fill in the constants, but as there are files that are rendered on the server and others on the client, it didn't work as I expected. They must only be filled once and all code will be able to see this value filled.

  • @MG-wx8yx
    @MG-wx8yx 5 месяцев назад

    Very difficult to follow along.

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

    amazing thank you so much

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

    s3 triggers, schedulers

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

    It was the best node environment that I have seen so far, it was really great, thank you

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

    This is solid. Thanks

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

    Thank you very much man, you teaching so clearly, that's cool for sure

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

    You did a great job explaining, thank you

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

    CRA didn't bother with devDependencies because webpack knows to only include the required items in the final build. devDependencies only matter if you are building npm packages, I think.

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

    How to import styled components in SSR components in next js it is possible?

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

    Can you help me i try to integrate okta openid auth with private public key how can i do that , when using in react getting error 401 in both react and node js can you guide me usign public key and private key with react and node js i am stuck and no correct documents found

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

    Why is the pages : { newUser : '/onboarding' } not working in the new app router?

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

      if you have nextauth url in your .env it can cause issues

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

      @@exerge9202 so what can I do instead?

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

    Hey man , thank you for your help 🎉❤

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

    there is a strange behaviour in the code. If you put console.log in for example resolver function or service, the api endpoint is not returning response. So if you put console.log in getAllBooks resolver function and run books query from playground, it won't return any response (it's spinning and response isn't returned). If you remove the console.log, than there won't be any issue.

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

    I think it would be great to add request validation, error handling and JWT authorisation in this example repo for more completeness

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

    The best content. I love it 🤩

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

    Exactly what I needed, excellent

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

    6:12 - what was that?! - how did you do that?? Not worth an explanation? What else are you doing without explaining? Nevermind. Thanks anyway..

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

    only one thing to complain please zoom the screen bigger :'(

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

    Guys… please for the love of everything don’t use a linter for formatting 🤣🤣😓😓

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

    Thank you! Much help so far

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

    Thanks for this! It's just what I was looking for 🤩

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

    Great vid exactly what I need 👍🏾

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

    Hey Leo thanks for the video! I have 2 questions: 1) how does someone changes that "?" to "✅" and I have prepared a template (GitHub repo) with JS/TS, Playwright, GSAP. I want to create a CLI, which actually will "create" a template based on user input: 1. JS or TS? 2. Install GSAP? 3. Install Playwright? The thing is, that I don't know how to create it: from within the CLI or fetch the files based on user input, example jsconfig.json or tsconfig.json with options? Also common files like .prettierrc.json, .eslintrc.json etc.. If I create it from within (for example having a folder "template" with "common", "javascript", "typescript" subfolders and pick the files needed, i'm afraid that It will be very difficult to debug only @ 1 place (I suppose I will have to debug my end-template and then go and "copy" "paste" parts of code inside my CLI's code & templates folder). But if I "fetch" files then the CLI is not actually versioning correctly since it will only fetch the latest files. I'm superconfused...

  • @Hamsterhomka
    @Hamsterhomka 11 месяцев назад

    Great presentation of the material and very useful content. Thank you!

  • @tarunhasija4751
    @tarunhasija4751 11 месяцев назад

    After investing over 48 hours into learning about serverless from various sources and blogs, I was surprised to find that this video managed to encapsulate the entire topic in just under 30 minutes. Outstanding job, Leo!

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

    Your skill in creating excellent videos is commendable.

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

    Hard to follow this. The explanation of why you set teamHistory to true, and what that does, is unclear. Later in video you remove something to show that observables no longer work, but you don’t show or explain what you did. Frustrating. I was hoping this would teach me what I need to know, but there are too many confusing things about it

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

      I think this is the change he made to show the importance of the observer <<< export default observer(Roster) ===> export defaul Roster >>>

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

    Really good video. I have learned a lot!!!

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

    sorry but can you explaint, why we use "./../packages/ui/**/*.{ts,tsx}" not "./packages/ui/**/*.{ts,tsx}"

  • @ВиталийПугач-к8ю

    awesome!

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

    How do we add Font to the UI package and the Apps?