Programming with Mist
Programming with Mist
  • 6
  • 70 960
Protect your web apps from Cross-Site Scripting (XSS) attacks
This video covers some prevention measures for the most common cross-site scripting (XSS) attacks. These measures are easy to implement and provide a security baseline for your projects.
DISCLAIMER: Implementing the measure in the video will NOT give total protection from XSS attacks. Proper security testing is required on a project-by-project basis before publishing your app.
Learn more about common web app security threats with OWASP: owasp.org/www-project-top-ten/
Resources mentioned in this video:
Loi Liang Yang video: ua-cam.com/video/1Hr4_r2xQXY/v-deo.htmlsi=p5RLTRLnP-5zpBcT
onError event: www.w3schools.com/jsref/event_onerror.asp
DOMPurify package: github.com/cure53/DOMPurify
Validator package: github.com/validatorjs/validator.js
Переглядів: 681

Відео

Deploy your react+vite app in 3 EASY STEPS
Переглядів 66 тис.2 роки тому
In this video we deploy our react and vite apps to Netlify in 3 simple steps using the vite build command
Troubleshooting your CSS
Переглядів 1852 роки тому
In this video I go through some of the tools we can use in the web browser to fix our wonky CSS. Default CSS reference (W3Schools) : www.w3schools.com/cssref/css_default_values.php
Downloading your Scrimba projects
Переглядів 1,7 тис.2 роки тому
RE-UPLOAD with better editing In this video I take you through downloading and running your scrimba projects on your local machine. Don't have VSCode, Live Server or NodeJS installed? Watch this video first: ua-cam.com/video/UD-3DDhH1TU/v-deo.html Tutorials Playlist: ua-cam.com/users/playlist?list... Chapters: 00:00 Intro 2:02 Downloading the project 3:42 Running your project 13:40 Outro
VSCode, Node and NPM
Переглядів 3362 роки тому
RE-UPLOADED with better editing In this video I take you through setting up VSCode, Node and NPM so you can start programming on your local machine. download VSCode: code.visualstudio.com/download download NodeJS: nodejs.org/en/download/ Chapters: 00:00 Intro 0:42 VSCode setup 3:45 VSCode extensions and Live Server 9:58 NodeJS setup 15:18 Using NPM
Vite + React setup
Переглядів 1,9 тис.2 роки тому
In this video I take you through setting up Vite and React so you can start your own React projects from scratch on your local machine. Don't have VSCode, Live Server or NodeJS installed? Watch this video first: ua-cam.com/video/UD-3DDhH1TU/v-deo.html Vite official site: vitejs.dev/guide/ Tutorials Playlist: ua-cam.com/users/playlist?list... Chapters: 00:00 Intro 0:30 What is Vite? 2:28 Vite pr...

КОМЕНТАРІ

  • @tmohamedyaser3566
    @tmohamedyaser3566 5 днів тому

    Keep making Videos 😊

  • @ruchirakaluarachchi6707
    @ruchirakaluarachchi6707 27 днів тому

    working 100%

  • @robinarmstrong8886
    @robinarmstrong8886 Місяць тому

    I wish it was that easy. I've spent days trying to deploy a react+vite project on my own server. White screen of death every time...

  • @mawhadmd
    @mawhadmd 2 місяці тому

    Thank you so much dude now i know what was the black magic JS file when i opened the dev tools 5 years ago

  • @pranali_valve
    @pranali_valve 3 місяці тому

    Thank u so much ☺

  • @NaveedUlHaq75
    @NaveedUlHaq75 3 місяці тому

    Welldone ! good Job ❤

  • @TusharHambir
    @TusharHambir 3 місяці тому

    Thank You So Much , Its Helps Alot

  • @muruga3603
    @muruga3603 4 місяці тому

    Time Saving Bro😍

  • @royfrias4379
    @royfrias4379 4 місяці тому

    how about if the project has a back end how would can you do that ?

  • @Khalid-sr4zo
    @Khalid-sr4zo 5 місяців тому

    i tried this, when i use npm run preview its working but when i deploy it or try to open it via live server or just double click on the html file i get a blank page. what could be the problem i am running in circles rn :s

  • @lorddinoff3714
    @lorddinoff3714 6 місяців тому

    i have done the same thing but it gives me a blank website

  • @gabrielmarcosmendes3412
    @gabrielmarcosmendes3412 6 місяців тому

    Is this works for hostinger deploy too?

  • @wajidtechs.
    @wajidtechs. 6 місяців тому

    you are awsome dude

  • @yathishshettigar9344
    @yathishshettigar9344 7 місяців тому

    Index.html file what I got after npm run build (.dist) folder, If I click on it, its just showing blank white screen whats the reason?

  • @Yuki-vt
    @Yuki-vt 7 місяців тому

    thank you very much, i done with my project to graduated

  • @yusufbachtiar2694
    @yusufbachtiar2694 7 місяців тому

    THANKS

  • @ankursinger102
    @ankursinger102 8 місяців тому

    You are a Life Saviour Sir .....got frustated by this for many hours

  • @lorenzoaleixo5571
    @lorenzoaleixo5571 8 місяців тому

    Hi from brazil, thanks dude

  • @Zarakkahnn
    @Zarakkahnn 8 місяців тому

    Thank you so much i got it now

  • @dnjosh10
    @dnjosh10 9 місяців тому

    After following all the instructions given on this page, I got a blank screen upon visiting the live page? Yet building and deployment were done successfully as confirmed in the "Action" tab of the github repository

    • @uhhmike115
      @uhhmike115 4 місяці тому

      same

    • @marcarce592
      @marcarce592 3 місяці тому

      I’m getting a blank screen at the end after a successful deployment just dragging and dropping the “dist” folder in Netlify. Gonna try some different things Saturday when I get home to try and get this to work.

  • @fengz-x7z
    @fengz-x7z 9 місяців тому

    It seems like the vite package is not installed in your project or globally on your system. You can install it locally in your project or globally. To install it locally in your project, navigate to your project directory in the terminal and run: npm install vite To install it globally, you can use: npm install -g create-vite After installing, try running npm run build again.

  • @matyghost1831
    @matyghost1831 9 місяців тому

    nice

  • @WorkExcel-tn8ub
    @WorkExcel-tn8ub 9 місяців тому

    oh my God you saved my career. thank you so much.

  • @jhin7_s337
    @jhin7_s337 9 місяців тому

    thanks

  • @maheshsuresh693
    @maheshsuresh693 9 місяців тому

    awesome video man......this one really helps

  • @lauraluo7242
    @lauraluo7242 9 місяців тому

    this is so easy!!!!!!! perfect bro

  • @Max88-xl2si
    @Max88-xl2si 10 місяців тому

    Warren (Mist) has always been the best one

  • @MrBrady95
    @MrBrady95 10 місяців тому

    Nice! Liked and subscribed.

  • @yashbhardwaj8419
    @yashbhardwaj8419 10 місяців тому

    Thanku so much

  • @Sem-Dev1
    @Sem-Dev1 10 місяців тому

    Legend!

  • @rozvitastiglinc1104
    @rozvitastiglinc1104 10 місяців тому

    Really great video it helped me a lot Thank you!

  • @vijayverma-dd7oe
    @vijayverma-dd7oe 11 місяців тому

    it helped me a lot..exact content what i wanted to know

  • @UECSoumyaRay
    @UECSoumyaRay 11 місяців тому

    Thanks man!!! I am a beginner. Didn't know that you have to do the npm run build command to make the dist folder. I was banging my head for so long!!! Much appreciated.

  • @ajanta28
    @ajanta28 11 місяців тому

    netlify its not take a vite proxy what we do?

  • @Zhu8690
    @Zhu8690 11 місяців тому

    Actually a good video!

  • @theoappiah6373
    @theoappiah6373 11 місяців тому

    I'm glad I found you.

  • @roshanbhagat3994
    @roshanbhagat3994 11 місяців тому

    Thank you so much bro

  • @wazzighait5539
    @wazzighait5539 11 місяців тому

    This is nice. But how can I do the same for a ssr vite project where the dist folder has both client and server side? Please I need help with this

  • @juanramirez4157
    @juanramirez4157 11 місяців тому

    Thank you boss ! after long hours trying to deploy mi vite app to GitHub pages, I realized that Netlify is way more better and easier to handle when deploying websites.

  • @Fantasy3DMorals
    @Fantasy3DMorals Рік тому

    Thank you 😊

  • @abdulazizaljaadi5579
    @abdulazizaljaadi5579 Рік тому

    Thanks! keep up the amazing content!

  • @mboe94
    @mboe94 Рік тому

    Awesome vid, thanks bro. However when I try to do it, Netlify can't find my pictures. They are located in the same way as your "images" folder.

  • @luiskingsleytolentino8291

    in my index.html, the assets can't be located because it needs dot before the file path, something like this "./assets/filename", note that I need to manually add that dot in the first

  • @LENNOX40w
    @LENNOX40w Рік тому

    Thank you!

  • @kefas_s
    @kefas_s Рік тому

    Obrigado, amigo! Você explica muito bem!

  • @digitalfarms999
    @digitalfarms999 Рік тому

    Very helpful. Thank you so much.

  • @AbdiwadudMohamed-y4q
    @AbdiwadudMohamed-y4q Рік тому

    thank you very much, was struggling with this for a while

  • @subaruLover475
    @subaruLover475 Рік тому

    Thank you!

  • @andreainvernizzi8510
    @andreainvernizzi8510 Рік тому

    Thank you for this video, it's helpful!

  • @laurenmj90
    @laurenmj90 Рік тому

    Awesome! Just what I needed! When we update the site, do updates automatically go through? Or do we need to run npm build again?

    • @programmingwithmist3897
      @programmingwithmist3897 Рік тому

      With this method, you will need to run the build command and drag'n'drop the new dist folder into Netlify each time you make changes to the code.