Alex Eagleson
Alex Eagleson
  • 12
  • 295 666
How to write HTML, CSS and Javascript in your Browser
This video is aimed at those who wish to learn web development (HTML, CSS and Javascript) but might not know where exactly to write their code, or may not have the ability to install code editors on their machine.
This video will go over four different ways you can practice web development right in your browser (Google Chrome), starting with the simplest method and increasing a little in complexity as we move from one to the next.
00:00:00 Introduction
00:01:18 codepen.io
00:04:45 codesandbox.io
00:18:55 vscode.dev
00:38:20 github.dev
มุมมอง: 2 439

วีดีโอ

How to Build a Fullstack Next.js App (with Storybook & TailwindCSS)
มุมมอง 26K2 ปีที่แล้ว
This video is a follow up to my "How to Build Scalable Architecture for your Next.js Project" video: th-cam.com/video/Iu5aZDqZt8E/w-d-xo.html. We will be building a fullstack application on top of that base we set up. If you did not follow the previous video you can either sync with the public repo and follow along, or set up your own Next.js, Typescript and Storybook project base to work from....
How to Build Scalable Architecture for your Next.js Project
มุมมอง 90K2 ปีที่แล้ว
0:00 Introduction 1:52 Project Initialization 5:04 Engine Locking 8:03 Git Setup 10:28 ESLint 16:21 Prettier 19:12 Git Hooks (Husky) 29:52 VS Code Config 37:37 Directory Structure 39:52 Storybook 53:35 Creating a component template 1:03:27 Using the component template 1:13:25 Layouts 1:23:45 Deployment (Thanks to Henry Jaffers for the chapters!) In this video tutorial I'll cover how to set up a...
How to Connect a React App to a Notion Database
มุมมอง 7K3 ปีที่แล้ว
In this tutorial video I'll show you how to connect a React app to the Notion API using Node.js and read data from your Notion workspace into your app. All code shown in the video is available in the repository below: github.com/alexeagleson/react-node-notion Written tutorial: dev.to/alexeagleson/how-to-connect-a-react-app-to-a-notion-database-51mc
How to use Node.js to backup your personal files (and learn some webdev skills along the way)
มุมมอง 2.3K3 ปีที่แล้ว
dev.to/alexeagleson/how-to-use-nodejs-to-backup-your-personal-files-and-learn-some-webdev-skills-along-the-way-541a WHAT YOU WILL LEARN: Common Linux tools like rsync (copying files locally and over SSH), cron (scheduling tasks on a specific interval) and nohup (run something as a background process that doesn't stop when the terminal session is ended) Running Node (Javascript) apps as backgrou...
Introduction to Docker for Javascript Developers (feat Node.js and PostgreSQL)
มุมมอง 6K3 ปีที่แล้ว
In this tutorial you will learn what Docker is and what purpose it serves by building a fullstack Node.js app complete with frontend and PostgreSQL database. We will use Docker Compose to connect and network each container together so that they are easy to share among project contributors, and deploy to whatever hosting service you've chosen. Written version of this tutorial: dev.to/alexeagleso...
How to Create a React Typescript Monorepo with Git Submodules
มุมมอง 14K3 ปีที่แล้ว
Do you work with large or semi-large codebases that are starting to get out of control? Do you have to deal with multiple different projects that interact with each other and have difficulty keeping versions aligned? If you said yes to either of those things (or even if you're just anticipating encountering them in the future) then this tutorial is for you. This tutorial is based on my blog pos...
How to Create a Dark Mode Component in React
มุมมอง 4.4K3 ปีที่แล้ว
This tutorial will teach you how add a dark mode to your web page or application using a custom React component. This video is based on my blog post, which includes a section on how to add tests to the component described in this video: dev.to/alexeagleson/how-to-create-a-dark-mode-component-in-react-3ibg To clone your own copy of this example, the code is available at this repository: github.c...
How to Analyze and Improve your Create React App Production Build
มุมมอง 7K3 ปีที่แล้ว
In this tutorial we're gonna take a step-by-step look at how to analyze and optimize your Create React App project using a custom webpack configuration that is extremely easy to set up. We will be using examples that make small adjustments and try different ways of importing modules and splitting your code to see the direct impacts it has on your bundle sizes and performance. The goal here is t...
How to use IndexedDB to store data for your web application in the browser
มุมมอง 53K3 ปีที่แล้ว
This video will give you an introduction to what IndexedDB is, why you might choose it for your project, and how to use it. We'll cover some basic database concepts & terminology as well in case you haven't used other databases before. This video is based on the content from my blog post here: dev.to/alexeagleson/how-to-use-indexeddb-to-store-data-for-your-web-application-in-the-browser-1o90
How to Create and Publish a React Component Library
มุมมอง 82K3 ปีที่แล้ว
This tutorial will take you through the process of creating and publishing your own custom React component library, hosting it on Github and publishing it with NPM. For the full text tutorial and repo please follow along with this post: dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
Big Trouble in Outpost 31 Game Trailer
มุมมอง 8917 ปีที่แล้ว
Trailer for homemade Roguelike(lite)-game "Big Trouble in Outpost 31", content inspired by John Carpenter's "The Thing" Game built using libtcod libraries in Python 2.7 Footage will look blurry if streaming below 1080p

ความคิดเห็น

  • @ptlogger
    @ptlogger วันที่ผ่านมา

    Congrats Alex! You should update some of the videos but great content still.

  • @daniellchukwu
    @daniellchukwu 3 วันที่ผ่านมา

    God bless

  • @J-bassist
    @J-bassist หลายเดือนก่อน

    Thank you! This was super helpful!

  • @hmm7172
    @hmm7172 2 หลายเดือนก่อน

    Thanks much

  • @aakash-codes
    @aakash-codes 2 หลายเดือนก่อน

    Awesome tutorial, thanks for making this :)

  • @MrMakemusicmike
    @MrMakemusicmike 2 หลายเดือนก่อน

    +Alex Eagleson Question, what do we call the "browser" methods and fields( I think that is what you would call them) such as onSuccess, request.result, onError? Is this called the event model? I'd like to get a handle on those so things make more sense to me because these methods and fields sometimes seem magical and out of nowhere for me, most of my recent experience is on the backend.

  • @homeboy6668
    @homeboy6668 2 หลายเดือนก่อน

    Fantastic explanation! Your smooth iterative approach to each terminology makes the concept easier to grasp! Thanks!

  • @nicolaszim3948
    @nicolaszim3948 3 หลายเดือนก่อน

    Awesome video, with some tweaks I managed to make it work with Rsbuild + Storybook + Biome + Jest. Really great, took some time to find your video though.

  • @iJustMakeThings
    @iJustMakeThings 3 หลายเดือนก่อน

    bruh, its so cool

    • @AlexEagleson
      @AlexEagleson 3 หลายเดือนก่อน

      Thank ya

  • @spiral_memory
    @spiral_memory 6 หลายเดือนก่อน

    Hey, awesome video! I had a lot to learn. I need some help. Initially, the project I'm working on had a 'components' folder containing all the Box, Button, Input, etc. My project simply used those components. We decided to move to a monorepo approach. I successfully used Rollup to create that bundle. The bundle size in its unzipped form is around 132 KB. However, when I include it in our project and import Buttons or Inputs in many files, and try to build this project (since it's also a React library), the bundle size increases exponentially. After replacing all occurrences with component imports and building it, my bundle size increased by 16 MBs. I've tried what I could, but I really need help to resolve this. For now, I've simply marked it as external, but I want to understand the root cause of this problem and how we can fix it. I would really appreciate your help if possible !

  • @wulirocks
    @wulirocks 6 หลายเดือนก่อน

    Man, that tiny tree on the back is quite relaxing!

  • @ewamariawrobel4637
    @ewamariawrobel4637 7 หลายเดือนก่อน

    great summary, thank you!

  • @vonghesjonovan
    @vonghesjonovan 7 หลายเดือนก่อน

    Still an amazing content! thanks

  • @vonghesjonovan
    @vonghesjonovan 7 หลายเดือนก่อน

    thank you for this amazing video!

  • @nilshr2
    @nilshr2 7 หลายเดือนก่อน

    This is a masterpiece, Alex. 👍 VERY GOOD JOB

  • @shabaniddrisu
    @shabaniddrisu 8 หลายเดือนก่อน

    Very helpful video man. Thank you 😊.

  • @belalmahmoud1890
    @belalmahmoud1890 8 หลายเดือนก่อน

    Thanks alot, very good demonstration!

  • @MrBumbo90
    @MrBumbo90 8 หลายเดือนก่อน

    Amazing videos. We are waiting for more. One small note: tailwindcss doesn't have "border-1". The smallest is "border-2". So "border-1" doesn't really do anything. Anyway, I am really hoping you find the time to make more videos.

  • @nitinshekhar7064
    @nitinshekhar7064 9 หลายเดือนก่อน

    What a tutorial man, well explained , neat and clean with lot of details. Thanks for it from INDIA. Much love ❤

  • @davonalbandyan8279
    @davonalbandyan8279 9 หลายเดือนก่อน

    The best

  • @vojka2973
    @vojka2973 9 หลายเดือนก่อน

    Amazing!

  • @SafdarAliShah_TimeTraveler
    @SafdarAliShah_TimeTraveler 9 หลายเดือนก่อน

    Unable to view. you should zoom a little bit brother.

  • @ricksegalCanada
    @ricksegalCanada 9 หลายเดือนก่อน

    a year later and this is an amazing find! Well done, Alex!

  • @ricksegalCanada
    @ricksegalCanada 9 หลายเดือนก่อน

    Two years on and this is still an amazing video to jumpstart my indexeddb journey. Thanks for doing this. As others have said, your teaching style is outstanding.

  • @dkazmer2
    @dkazmer2 10 หลายเดือนก่อน

    Isn't it true that libraries like React or Frameworks like Angular need to have/run/use their own specific version of Typescript? Or can we just upgrade their versions as we see fit?

  • @jeff-creations
    @jeff-creations 10 หลายเดือนก่อน

    Your teaching style is amazing Alex. I love the way that you explain terminology and don't assume we know things straight out of the gate. IndexedDB is much clearer to me now - and for that I thank you! I really wish you had a beginners video on React, would have taught me a ton I'm sure.

  • @kisstamas6675
    @kisstamas6675 10 หลายเดือนก่อน

    if you are developing in docker environment maybe its not necessary the create a .nvmrc file, because you can define your versions inside the docker image.

  • @mbepe
    @mbepe 10 หลายเดือนก่อน

    Jesus, stop Talking go to practice what is wrong with you

  • @nahrulk
    @nahrulk 10 หลายเดือนก่อน

    Where is the new video 😭😭

  • @oshawastaken
    @oshawastaken 10 หลายเดือนก่อน

    this is awesome. Knew nothing about docker going in and came about feeling like a wizard

  • @sanchayan.bhunia
    @sanchayan.bhunia 11 หลายเดือนก่อน

    You really saved me a week worth of time. Thank you so much! <3

  • @AlexHerlan
    @AlexHerlan 11 หลายเดือนก่อน

    I know this is an older video but you really need to record/upload at a higher resolution. Can barely read what ur typing

  • @hasaniqbal233
    @hasaniqbal233 ปีที่แล้ว

    Now how do we deploy this? Say instead of React we had a Next.js front-end. How would we configure this so that we can host the Next app on Vercel and the backend Express app on, say, Railway or Heroku?

  • @suhail_developer
    @suhail_developer ปีที่แล้ว

    A patient, detailed and perfectly explained walkthrough. You deserve much more views mate. Thank you for teaching us once again. I hope you continue to do so.

  • @codingtranquility
    @codingtranquility ปีที่แล้ว

    God I love this channel

  • @SumanPokhrel0
    @SumanPokhrel0 ปีที่แล้ว

    Very helpful. Thank you .

  • @AldrinVillalobos-l3r
    @AldrinVillalobos-l3r ปีที่แล้ว

    Hello, can I do this using javascript(js, jsx)?

  • @27sosite73
    @27sosite73 ปีที่แล้ว

    back again this is like application start bible

  • @hosseinbehdarvandi1504
    @hosseinbehdarvandi1504 ปีที่แล้ว

    You explained important issues quickly and easily. Very good. Do more.

  • @JesperFyllgraf
    @JesperFyllgraf ปีที่แล้ว

    @AlexEagleson or anyone else have an example on how to use scss files and/or module.scss files in a rollup project, instead of pure css? I tried installing rollup-plugin.scss but I can't get it to work. Thanks for an awesome video.

  • @jardelbrandon
    @jardelbrandon ปีที่แล้ว

    Muito obrigado!

  • @nawti2371
    @nawti2371 ปีที่แล้ว

    We really need more of this type of tutorials instead of all the other tutorials where they only go over the most basic stuff and then you get into a company and you realize you know nothing and all those videos were useless for a company environment.

  • @joaopedrosouzarolemberg418
    @joaopedrosouzarolemberg418 ปีที่แล้ว

    I watched 10 minutes and you just tell me a ton of things that i must config or change in my project. Thank you

  • @nachiketgomkale5400
    @nachiketgomkale5400 ปีที่แล้ว

    what if i have to test the library locally first if its work correctly then wen can publish it

  • @nachiketgomkale5400
    @nachiketgomkale5400 ปีที่แล้ว

    what if I'm using javascript ?

  • @LekkyDev
    @LekkyDev ปีที่แล้ว

    I love the db seeding part. Thank you!

  • @flash2933
    @flash2933 ปีที่แล้ว

    best tutorial.. ! with your help , i did succesfully to create my lib.. thank bro.

  • @NoName-1337
    @NoName-1337 ปีที่แล้ว

    Great Video for a short overview about this topic. Thank you.

  • @stifenjans4342
    @stifenjans4342 ปีที่แล้ว

    did u run on virtual machine, on top of virtual machine quote on quote?

  • @bbnowhat
    @bbnowhat ปีที่แล้ว

    я не англичан и не француз, но ролик оказался полезным для меня, спасибо, узнал действительно для себя много нового