- Видео 56
- Просмотров 692 694
CodeDunks
США
Добавлен 27 янв 2021
Former D-1 basketball player 🏀 turned programmer 👨🏼💻 | Senior Full Stack Engineer @arch.dev | 🇧🇷🇺🇸
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.
Просмотров: 935
Видео
MobX Tutorial with React and Typescript
Просмотров 20 тыс.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,9 тыс.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.
Просмотров 18 тыс.3 года назад
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
Просмотров 62 тыс.3 года назад
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 тыс.3 года назад
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,4 тыс.3 года назад
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,8 тыс.3 года назад
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 тыс.3 года назад
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
Просмотров 48 тыс.3 года назад
Authentication and Authorization Setup with Okta
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
Просмотров 14 тыс.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
Просмотров 14 тыс.3 года назад
React Query Tutorial with Typescript | Part 2 Mutations
React Query Tutorial with Typescript | Part 1 -- Queries
Просмотров 25 тыс.3 года назад
React Query Tutorial with Typescript | Part 1 Queries
Apollo Federation Setup | Part 2 -- Managed Federation
Просмотров 2,5 тыс.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
Просмотров 6353 года назад
Docker, Docker-Compose Quick Setup Tutorial
Great tutorial but how about setting up for an expo react native app?
Thanks for the video 🙏
Thank you 👍🏻
Thank you
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.
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?
This video makes me level up my software engineering knowledge, nice video
thanks man, i enjoyed
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?
Exactly what i was looking for! You've just earned a subscriber my dude!
Great one, thanks a lot.
This is helpful. Thank you
Very helpful. Thank you
Can we get a link to the code/repo? for further in depth look?
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
Thank you. Clear and concise. Subscribed!
Men, where is the code?!
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
hey great video. Here I am confuse about invcocation API, why does it generates and can we avoid it from generating ?
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.
Very difficult to follow along.
amazing thank you so much
s3 triggers, schedulers
It was the best node environment that I have seen so far, it was really great, thank you
This is solid. Thanks
Thank you very much man, you teaching so clearly, that's cool for sure
You did a great job explaining, thank you
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.
How to import styled components in SSR components in next js it is possible?
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
Why is the pages : { newUser : '/onboarding' } not working in the new app router?
if you have nextauth url in your .env it can cause issues
@@noahscode so what can I do instead?
Hey man , thank you for your help 🎉❤
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.
I think it would be great to add request validation, error handling and JWT authorisation in this example repo for more completeness
The best content. I love it 🤩
Exactly what I needed, excellent
6:12 - what was that?! - how did you do that?? Not worth an explanation? What else are you doing without explaining? Nevermind. Thanks anyway..
only one thing to complain please zoom the screen bigger :'(
Guys… please for the love of everything don’t use a linter for formatting 🤣🤣😓😓
Thank you! Much help so far
Thanks for this! It's just what I was looking for 🤩
Great vid exactly what I need 👍🏾
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...
Great presentation of the material and very useful content. Thank you!
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!
Your skill in creating excellent videos is commendable.
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
I think this is the change he made to show the importance of the observer <<< export default observer(Roster) ===> export defaul Roster >>>
Really good video. I have learned a lot!!!
sorry but can you explaint, why we use "./../packages/ui/**/*.{ts,tsx}" not "./packages/ui/**/*.{ts,tsx}"
awesome!