- 11
- 189 187
DanCanCode
United States
Приєднався 30 лип 2016
Hi, I'm Dan! Welcome to my UA-cam channel.
I share educational programming content, tutorials, and guides related to my coding journey.
You can also find me on:
Twitch: www.twitch.tv/DanCanCode
Twitter: DanCanCode
I share educational programming content, tutorials, and guides related to my coding journey.
You can also find me on:
Twitch: www.twitch.tv/DanCanCode
Twitter: DanCanCode
TypeScript Objects and Interfaces | TypeScript Tutorial
In this TypeScript tutorial video I cover defining types for objects. Structured data of key-value pairs is incredibly common, and TS helps us with preventing errors, typos, and exploring with code completion. I cover the type and interface keywords as well as the typeof operator to help with narrowing data types when required. Let me know what you think in the comments below.
Learn TypeScript Playlist: ua-cam.com/play/PLZ0S1zTntqakeRerVbKHCIXxegmA-3fpj.html
Matt Pocock's video
TypeScript: Should you use Types or Interfaces?
ua-cam.com/video/zM9UPcIyyhQ/v-deo.html
You can also find me on:
Twitch: www.twitch.tv/DanCanCode
Twitter: DanCanCode
Rugged Software
Business contact: www.ruggedsoftware.dev/
00:00 Intro
00:08 Typing Objects
01:00 Code Completion
01:30 Explore an API
02:22 Nested Objects in Types
02:48 Interface and Type Keywords
04:44 Optional Properties
05:41 Narrowing Types
08:13 typeof Operator
09:21 Next video
09:51 Outro
Learn TypeScript Playlist: ua-cam.com/play/PLZ0S1zTntqakeRerVbKHCIXxegmA-3fpj.html
Matt Pocock's video
TypeScript: Should you use Types or Interfaces?
ua-cam.com/video/zM9UPcIyyhQ/v-deo.html
You can also find me on:
Twitch: www.twitch.tv/DanCanCode
Twitter: DanCanCode
Rugged Software
Business contact: www.ruggedsoftware.dev/
00:00 Intro
00:08 Typing Objects
01:00 Code Completion
01:30 Explore an API
02:22 Nested Objects in Types
02:48 Interface and Type Keywords
04:44 Optional Properties
05:41 Narrowing Types
08:13 typeof Operator
09:21 Next video
09:51 Outro
Переглядів: 244
Відео
Basic Types and Annotations | Learn TypeScript Tutorial
Переглядів 312Рік тому
I explain what type annotations are and introduce several basic data types such as strings, numbers, and booleans. Building on this, I cover parameter types, return types, and function types. Plus, a few other bits of information here and there. Hope you find it useful! You can also find me on: Twitch: www.twitch.tv/DanCanCode Twitter: DanCanCode 00:00 Intro 00:14 Basic Types 02:57 ...
Beginner TypeScript: Setup | with no-install web playground or node.js
Переглядів 439Рік тому
If you haven't touched TypeScript yet you may be overwhelmed by all the information you hear. Join me for a series of small videos introducing the various features of TypeScript and when you may want to use them! "Show the lock before the key." In this video, I demonstrate two ways to get started typing TypeScript code. 1) No installation: in the browser at www.typescriptlang.org/play 2) With N...
My Favorite Way To Handle Dev Environments | VS Code Devcontainers
Переглядів 131 тис.Рік тому
A step-by-step walkthrough of using my favorite method to manage development environments: VS Code Devcontainers. No docker commands required! This is great for onboarding new people to your complex project or reproducing your work environment on a new machine. You can even use your devcontainers on the web through GitHub Codespaces. Let me know what you think in the comments. I spend several m...
Add Tailwind CSS to ANY Project
Переглядів 1,5 тис.Рік тому
I love the simplicity and speed of using Tailwind CSS for most styling in my projects. When I need a custom solution, I can always craft custom CSS classes. Some projects have more complicated configurations and build steps than others, and in this video, I share how I use Tailwind's CLI to use it in any project. You can also find me on: Twitch: www.twitch.tv/DanCanCode Twitter: Dan...
Check out Zod 3.20 - Data Validation for TypeScript
Переглядів 844Рік тому
Zod is a fantastic data validation library for JavaScript and TypeScript I have used for a while. It released some new capabilities in 3.20, so I am checking them out. Zod on GitHub: github.com/colinhacks/zod You can also find me on: Twitch: www.twitch.tv/DanCanCode Twitter: DanCanCode
Create and Deploy a Website with REACT and VITE in under 10 minutes
Переглядів 55 тис.Рік тому
If you have a website or app you'd like to make you can very quickly create a prototype with React and Vite. These single-page apps (SPAs) are easy to deploy (think drag and drop) on hosts like Netlify, often for FREE! With HTTPS encryption! This is about as simple as it gets if you want something interactive. I also included a short section on adding unit testing to your app with Vitest, becau...
Add Users To Your Cloud Development Server
Переглядів 338Рік тому
When working with other developers on a project it is often challenging to make sure you're working with the same tools. The infamous "but it works on my machine". In this video, I show one way to address this problem by creating a cloud development server where you can share resources and work with the same tools while keeping separate workspaces. You can also find me on: Twitch: www.twitch.tv...
Python Basics - Working with Strings and Text #LearnToCode
Переглядів 284 роки тому
Learn how to manipulate text in Python. Use the power of words! Write data in multiple languages! Wield the authority granted by emoji! ⚔🛡 Check out the written version: moderncoder.io/tutorials/python-basics-strings/ You can also find me here @DanCanDoTV: Twitter: bit.ly/2bFrvtA Twitch: bit.ly/DanCanDoTV
Python Basics Tutorial - Numbers and Functions
Переглядів 374 роки тому
Discover the first steps in writing Python code. I introduce using numbers and functions, interacting with the interpreter through the Jupyter Notebook, and how to get help. Written Tutorial: moderncoder.io/tutorials/python-basics-numbers-and-functions/ Notebook version on GitHub: bit.ly/2Vwvn9U You can also find me here @DanCanDoTV: Twitter: bit.ly/2bFrvtA Twitch: bit.ly/DanCanDoTV
Getting Started with Python - Download and Install
Переглядів 1084 роки тому
The first step to learning programming with Python is getting it on your machine! Let's download and install the easy way with Anaconda. Then we'll pick a code editor so you can see that sweet syntax coloring candy. I talk about Spyder, Jupyter Notebooks, VS Code, and PyCharm Community Edition. See the written tutorial at moderncoder.io/tutorials/getting-started-with-python/ You can also find m...
Great video❤...
Awesome!!! Thanks much!!!
Wrong video title 😅,u didn't actually create any website
When did you setup node lol, i just read « node -version »
whatever I am trying to do in acordance to this video, which leave an imression that there shouldnt be any obstacles I ALWAYS gettgin same result trying to open the repo in dev container Error: unable to get issuer certificate at TLSSocket.onConnectSecure (node:_tls_wrap:1674:34) at TLSSocket.emit (node:events:519:28) at TLSSocket._finishInit (node:_tls_wrap:1085:8) at ssl.onhandshakedone (node:_tls_wrap:871:12) all my attemts with various ways, with variuous recomendations I found in internet end up with the same annoyng result!!. Is there anybody who may clearly explain what is happening and why.. otherwise I here only some guesses - try thi.. try that.. which looks like some shaman manilulations with no celar reasoning.
So the dist folder contains all our project files?
Cool stuff, thanks! But ChatGPT says the following about "Dev Containers: Open Folder in Container": When you use "Dev Containers: Open Folder in Container", VS Code is actually working directly inside the container's environment. This means: No Cross-Environment File Sync: You’re not syncing files between Windows and Linux; instead, you’re directly editing files in the Linux environment of the container. Performance: Since everything happens within the container, performance should not be significantly impacted. There's no constant file transfer between Windows and Linux because the file system you're working with is entirely inside the container.
Nice tutorial but we did not create a website. we only deployed the vite sample page. But it does contain some other useful information.
Subscribed! The simplicity in presentation, easy going nature, I loved most!
30 minutes should've been 5 without all the water... don't waste my time please
These instructions no longer work. When I do the Clone it just asks me for the branch and then does nothing
You explained it in an awesome way! Thanks
Hey Dan and Dan's community, I've been testing VSCode and Devcontainers in WSL/Docker for the last four days but I'm having a problem with "Build repository in devcontainer" using a Bitbucket Repository which hangs in the terminal when requesting permission to add the Bitbucket server to known_hosts. It just hangs and doesn't take the 'yes' keystrokes for input. Does anyone else have a solution?
Nice :) +1 sub
Hola, como hariamos esto dentro de un contenedor? como crear la imagen para desarrollar dentro del contenedor WSL?
great video. How would you do this for a nx monorepo that has 2 apps in side it with libs?
Thanks man, great video! It saved me so much time
Very helpful, thanks!
Hey dan, if i configured already WSL2 and Ubunto on my widnows OS, wouldnt be better to install directly docker desktop for linux instead of windows version?
Finally I understand why and how to use this stuff 😅
Great video Dan but can you stop jump cutting whiles editing video that displays code because if someone is coding along they might miss just one step buried in the code somewhere and will wonder why they're code is breaking. I encourage you to only cut the video after you've typed the code in full don't cut to a fully typed line of code. Thanks and keep up the great work!
404 error 😢
Wow, I didn't know about this. Really cool!
i search all over the youtube there is no one tell the solution how we will manage "nodemon" with devcontainer, not just nodemon but same next.js, vue.js, laravel vite.
Thank you for introducing Vitest to me and at this stage. My teachers keep telling me testing is so important but most tutorials don't introduce this at the beginner level.
Perfect amount of edge-case covered, goated tutorial
I am trying to build an image using docker and the dockerfile is in the directory. docker extension is already installed. But when I build, the command line says "bash: docker: command not found". I don't know whether it is an image problem, sometimes I don't have the issue and sometimes I do. Any suggestions?
Ah, I just discovered that Docker is not installed by default in the image and I need to install myself. And the docker extension is a different thing altogether. Thank you.
Cool! I am totally looking deeper into Dev Containers to avoid installations pain for our team
Great tutorial, you explained all the steps, mostly tutors or experienced people assume the viewer knows some steps which is not always true, I appreciate your extra efforts explaining each step thoroughly. Thanks.
Way excellent video, thanks. I'm going to give it a try.
@DanCanCode, let's say you are in a devcontainer, you do some work, run git add, commit, and push. Now you realize your ssh keys are missing inside the container as they only exist in your local machine and thus you can't push code. How would you go around this issue?
I was stuck for hours at the build process,😢 and your tutorial made me realize the bug for my app is to cd into the right directory file. Thanks man!
This is stupid to copy files into a devcontainer? with docker you can just mount the volume into the container of the local host system. So basically devcontainer is for people too lazy to learn a few basic docker commands? ewwwe so I have to now put a dockerfile into a vscode type json file? 😂 ...oh ya much easier. Now some clown developer needs to read both dockerfile and devcontainer json file manuals and other configurations info when you get past some simple hello world setup.
I prefer to create my own Docker Compose with bind mounts to my repo code, and then use the VSCode's "attach to running container" functionality. Way easier, and without boiler plate. In this video they explain how easy it is to attach: ua-cam.com/video/8gUtN5j4QnY/v-deo.html&ab_channel=Code2020
Dan, your video was a lifesaver! I spent the entire day wrestling with the slow system problem you've mentioned , only to discover through your tutorial that the root of my troubles was cloning the repo into my local Windows file system. Your guidance was invaluable - thank you once more.
Perfect tutorial! Learned even more than what i was looking for hehe
this is very good video but my brain cant handle this so im goona watch it again
Nice video!! I've some questions: 1. How to share the dev container to a co-worker? 2. If I add PostgreSQL as a database in my dev container, how will I access it using softwares like PgAdmin/Dbeaver? 3. If I have my backend running on my local windows machine serving some APIs and my angular frontend application running in dev container, how will frontend communicate to the backend?
Fantastic
How did you opened your terminal in windows with shortcut?
is the manual deploy the only way to deploy a Reactjs app created with vite ? please help
This is magic! Exactly what I needed, thank you!
getting 404 error
Sometimes later... How do you specify the volume location e.g. /home/dev/projects/proj1
Which theme are you using?
Thanks for this great video. May I know which extension you used to draw flow-chart at around 7:00 minute?
If you look right at the top of his screen, looks like he is using excalidraw
wtf, they ask my id number only for sign up are they f kidding me
@DanCanCode, what happen if we need most updated version of java for example but the available base workspace is still using an old version, is there a way to tell devcontainer to use latest or different version of java? Thanks
Very nice walkthrough! It would be very useful to know how to setup container access to localhost, in cases where dev-servers (SQL/Redis etc.) are running there.
Learned alot from setting up the json file! I added tailwind to my project before I thought by just basically installing it with npm and adding to the global css.. im going to try it this way! Didnt even know all that was going on lol. Thanks for making!