- Видео 8
- Просмотров 23 660
Andrew Chang
Добавлен 19 май 2015
Hi, my name's Andrew Chang - I'm a NY-based software engineer at a tech startup.
I make videos about web development/software engineering based on my personal and professional experience. Hopefully, my experiences can be in some way helpful to you :)
Thanks!
I make videos about web development/software engineering based on my personal and professional experience. Hopefully, my experiences can be in some way helpful to you :)
Thanks!
FREE One-click Deployment for Vue Project
If you have a Vue project you want to deploy and share with the world, you can easily do so using GitHub Pages and this deployment process! Follow along to learn how to quickly, easily deploy your app for free.
GitHub: github.com/chang-andrew/vue-video-tutorials/tree/vue-deploy-1
-- More Resources --
Adding Custom Domain: docs.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site
Vue Docs for Deployment: cli.vuejs.org/guide/deployment.html#github-pages
00:00 Intro
00:30 Overview of Tools
01:55 Vue Config
03:32 Deploy Script
06:45 Gitignore
07:00 Running the Deploy Script
08:53 Configuring GitHub Repository
GitHub: github.com/chang-andrew/vue-video-tutorials/tree/vue-deploy-1
-- More Resources --
Adding Custom Domain: docs.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site
Vue Docs for Deployment: cli.vuejs.org/guide/deployment.html#github-pages
00:00 Intro
00:30 Overview of Tools
01:55 Vue Config
03:32 Deploy Script
06:45 Gitignore
07:00 Running the Deploy Script
08:53 Configuring GitHub Repository
Просмотров: 1 721
Видео
File Drop Component - Vue & Tailwind CSS
Просмотров 2,8 тыс.3 года назад
Want to learn how to use drag & drop in Vue? In this video, we'll learn how to do just that by creating a file drop component that enables users to drag and drop files from their computers into a web app. GitHub: github.com/chang-andrew/vue-video-tutorials/tree/file-drop-1 00:00 Intro 00:40 Intro to Drag/Drop 02:16 Basic Drag/Drop Demo 04:20 Accessing Files 07:30 Example Component
Intro to Events in Vue
Просмотров 1573 года назад
Events are a crucial component for any type of web development. This video explores the basics of HTML Events and how to handle them in Vue. GitHub: github.com/chang-andrew/vue-video-tutorials/tree/events-1 00:00 What are HTML Events? 04:25 Event Bubbling/Propagation 07:30 Event Modifiers 11:20 Recap
Vue Slots - Reusable Modal
Просмотров 7 тыс.3 года назад
In this video, we turn our static Vue modal into a powerful, reusable modal using Vue Slots. GitHub: github.com/chang-andrew/vue-video-tutorials/tree/modal-2 00:00 Intro 00:32 Vue Slots Overview 02:06 Add Slots to Modal 10:10 Usage Example 15:24 End Product
Vue Transition + Tailwind CSS (examples included)
Просмотров 4,2 тыс.3 года назад
We'll learn more about the Vue transition element and how we can use them in conjunction with Tailwind CSS. I'll explore two examples to show some common patterns and design principles. GitHub: github.com/chang-andrew/vue-video-tutorials/tree/transitions-1 Sorry about the loud keyboard and background noise, I didn't have access to my usual setup :( 00:00 Intro 00:36 What is Vue Transition? 04:4...
Build a Modal using Vue & Tailwind CSS
Просмотров 6 тыс.3 года назад
In this video, we'll create a modal using Vue and Tailwind CSS. In the next part, we will use Vue Slots to make this a completely modular and reusable modal. GitHub Repo: github.com/chang-andrew/vue-video-tutorials/tree/modal-1 00:00 Intro/Demo 00:44 Modal Background 01:39 Modal Body 04:54 Adding Interactivity 08:35 End Product/Next Steps
Slack Clone: Basic Chat Interactivity
Просмотров 3893 года назад
In this part, we will add basic interactivity to our Slack clone app, finishing a very basic frontend app that we can then connect to a backend in the future. In the next episodes, we will start to do some work on the backend. I know that these long video formats are probably very hard to digest, so I'm going to try very hard to break these up into smaller videos going forward, so please bear w...
Slack Clone: Simple Interface using Vue.js & Tailwind CSS
Просмотров 1,5 тыс.3 года назад
In this video, we will be making the basic interface for a Slack clone. This is the first part of a series where we will be building a full-stack Slack clone using Django REST Framework and Vue.js! Stay tuned for more :) github.com/chang-andrew/slack-clone-tutorial 00:00 Intro/Demo 00:45 Project Setup 01:55 Outline Workflow 04:10 Chat Sidebar 12:55 Chat Messages 16:35 Conversation Header & Mess...
I was halfway, stuck in something stupid, your video really help me, thanks!
When your keyboard is louder than your voice.... =\
Can you make video select documents name and then drag and drop upload?
first time ever seeing pug language, idk how to feel about it
but how to do it using the proper dialog html element?
Great tutorial. Thanks !!!
It is a great video and please cover about vite-plugin-vue-layout
Well, I was able to get what I came for, as I ignored the whole not using < >
thanks, just started to learn Vue +1 subscriber
hio! i'm curious about how to handle exiting a modal when you click away from the modal, besides using the x button and the 'cancel' and 'confirm' buttons. how do you achieve that when clicking away from the modal itself?
Hi! Good question, I would probably try adding a click handler on to the “background” of the modal (the <div> that greys out the entire page when the modal is showing), since it should cover the whole area outside of the modal. Just make sure clicking inside the modal doesn’t propagate click events to the background div (you can watch my video on Vue Events for more info on how to do that)!
Thanks Andrew, The modal helped me.
Thanks, man for this awesome explanation ♥♥♥
you should use raw html not pug
Very helpful, thank you for the vid!
Good video Andrew. I have saved this as am going to be doing some drag and drop functionality soon in my project. Many thanks for sharing this knowledge.
Hey Andrew. I've enjoyed the 2 modal videos, but agree with some others that seeing PUG if you do not know it is rather distracting. How about you make a short video describing your environment set up for how you use PUG in your projects. I've subscribed as I liked your style and you put out some more content.
Hi, i'm currently learning Tailwind for Vue and Just find your Chanel and i was surprise o how you write your HMTL tag without closing tag. Is there a documentation about it beacause it made reading the HMTL very easy. Thank you.
Hi! Yes it's a package called "Pug", here is their site: pugjs.org/api/getting-started.html
Solid work, subbed.
Hi how you sort your tailwind class name on save?
I believe it's through an extension, possibly Vetur. You can go into the preferences and set it to "Lint on save"
Thanks.
Are you going to finish it bro?
why do your components not have the < or > characters?
Hey Alfredo, great question. I'm using a tool called "Pug" that allows me to use this different HTML syntax. I just think it's cleaner and easier to use. You can search up Pug documentation for me details on how to use it! Thanks for watching.
@@AndrewChang1 is that reaaaaly wise in a tutorial video ? No. No its not.
Why not? I didn't know about this tool before :)
Thanks for this amazing video its helpful for me. Subscribed
Glad to hear that, thanks for watching!
A question then would be, if we have this type of components/utils, and we would have several of them in a page, the modalVisible would not be enough to keep track of the states of several utils, how would you solve that?
Great question -- so I used a generic variable name called "modalVisible" to pass in as a prop for the example, but in a real application you would want to make the variable name relevant to the modal it's being passed into (ex: deleteModalVisible, orderConfirmModalVisible, etc). This way, you can have multiple modals side-by-side, using the uniquely named variables to control each modal individually. You would also likely define different handler functions (appropriately named) for each modal. Does that answer your question?
Andrew you are now my favourite RUclipsr. I've been searchin so much for Vue + TS and Especially with Tailwind. I'm completely new to all these techniques but this was really exactly what I needed! Please continue to do these and might even add a bit more explanation for the noobs out here.
Appreciate the support Jonathan, I'll try my best going forward :)
Thanks for sharing!
Nice