- 12
- 295 666
Alex Eagleson
Canada
เข้าร่วมเมื่อ 7 ก.ค. 2009
The goal of this channel is to teach web development, including all the tools and techniques related to building and maintaining modern web applications.
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
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
Congrats Alex! You should update some of the videos but great content still.
God bless
Thank you! This was super helpful!
Thanks much
Awesome tutorial, thanks for making this :)
+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.
Fantastic explanation! Your smooth iterative approach to each terminology makes the concept easier to grasp! Thanks!
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.
bruh, its so cool
Thank ya
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 !
Man, that tiny tree on the back is quite relaxing!
great summary, thank you!
Still an amazing content! thanks
thank you for this amazing video!
This is a masterpiece, Alex. 👍 VERY GOOD JOB
Very helpful video man. Thank you 😊.
Thanks alot, very good demonstration!
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.
What a tutorial man, well explained , neat and clean with lot of details. Thanks for it from INDIA. Much love ❤
The best
Amazing!
Unable to view. you should zoom a little bit brother.
a year later and this is an amazing find! Well done, Alex!
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.
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?
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.
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.
Jesus, stop Talking go to practice what is wrong with you
Where is the new video 😭😭
this is awesome. Knew nothing about docker going in and came about feeling like a wizard
You really saved me a week worth of time. Thank you so much! <3
I know this is an older video but you really need to record/upload at a higher resolution. Can barely read what ur typing
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?
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.
God I love this channel
Very helpful. Thank you .
Hello, can I do this using javascript(js, jsx)?
back again this is like application start bible
You explained important issues quickly and easily. Very good. Do more.
@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.
Muito obrigado!
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.
I watched 10 minutes and you just tell me a ton of things that i must config or change in my project. Thank you
what if i have to test the library locally first if its work correctly then wen can publish it
what if I'm using javascript ?
I love the db seeding part. Thank you!
best tutorial.. ! with your help , i did succesfully to create my lib.. thank bro.
Great Video for a short overview about this topic. Thank you.
did u run on virtual machine, on top of virtual machine quote on quote?
я не англичан и не француз, но ролик оказался полезным для меня, спасибо, узнал действительно для себя много нового