The Coding Loft
The Coding Loft
  • 35
  • 15 477
How to Load CSS Files in Webpack - Webpack #3
In this video, we'll show you how to load CSS files in Webpack. Learn the steps to include CSS in your Webpack configuration and optimize your website's design and performance!
Check out the other videos in this series:
Video 1: How To Set Up TypeScript & Webpack!
ua-cam.com/video/RP8UlRyIH04/v-deo.html&ab_channel=TheCodingLoft
Video 2: Set up a Webpack Dev Server with Hot Reloading
ua-cam.com/video/6jQEyXk1CZc/v-deo.html&ab_channel=TheCodingLoft
**TIMESTAMPS**
00:00 | Intro
00:38 | Install NPM Packages
01:02 | Adding a style.css file
01:17 | Webpack config
02:27 | Testing with dev server
02:56 | A look at the build file
03:29 | Outro
Переглядів: 26

Відео

Set up a Webpack Dev Server with Hot Reloading - Webpack #2
Переглядів 742 місяці тому
Learn how to spin up a development server with hot reloading in your Webpack and TypeScript project. Webpack lets you compile your TypeScript project easily into a single bundled JS file. With this development server running, you can see your changes in real time without having to recompile the entire project! Not sure how to set up webpack and typescript? Then check out part 1 in this series: ...
How To Set Up TypeScript & Webpack! - Webpack #1
Переглядів 992 місяці тому
Learn how to set up TypeScript and Webpack in this easy tutorial. This step-by-step guide will help you get your project up and running in no time! Webpack lets you compile your TypeScript project easily into a single bundled JS file. Check out the other videos in this series: Video 2: Set up a Webpack Dev Server with Hot Reloading ua-cam.com/video/6jQEyXk1CZc/v-deo.html&ab_channel=TheCodingLof...
Build A Password Generator - React & TypeScript
Переглядів 1764 місяці тому
Ready to build your own password generator? Then check out this React & TypeScript tutorial! Don’t forget to like and subscribe if you enjoy this video Check out the code: stackblitz.com/edit/coding-loft-react-ts-pw-generator-pxhcsp?file=src/App.tsx TIMESTAMPS 00:00 | Intro 00:20 | Setup & Layout 04:19 | Styles 07:06 | Functions
Do THIS to see if an element is visible! - JavaScript Tricks
Переглядів 895 місяців тому
Want to know if the user has seen a banner or article on your site? How can you be sure that a website element has been actually seen? Let's find out how to do this with JavaScript! Did you enjoy this video? Then it would be awesome if you could like & subscribe! Github Gist: gist.github.com/thecodingloft/0a0bda2e96fa930677bdb50189ad7ff5
How To Get The Size of an Object in JavaScript
Переглядів 1165 місяців тому
How do you get the size of an object in JavaScript? How do you know if it’s empty or not? How can you count the properties and methods inside it? That’s what you’ll learn in this quick and informative video. Github Gist: gist.github.com/thecodingloft/770a5d160528b73646eccfe091046ee1 00:00 Intro 00:25 Check if Object is empty 01:05 Count properties and methods 01:45 Count properties or methods
Create an Accordion with CSS: Step-by-Step Tutorial
Переглядів 1989 місяців тому
In today’s video, you will learn how to build an interactive dropdown accordion using only CSS. Yes, you don’t need any JavaScript to add animation or to show and hide the text by clicking on the header. Wonder how it’s done? Then stay tuned. Don’t forget to like and subscribe for more tutorials in the future! Codepen: codepen.io/thecodingloft/pen/bGzYWOR Clippy: bennettfeely.com/clippy/ Timest...
Make Toggle Buttons - Only CSS
Переглядів 8169 місяців тому
In today’s video, you will learn how to make modern-looking toggle buttons using only CSS. Check out the Codepen below for the full code. If you find this video helpful, please leave a like and subscribe to the channel. Happy Coding! Codepen: codepen.io/thecodingloft/pen/bGzYWOR Timestamps 00:00 | Intro 00:09 | HTML - Container 00:19 | HTML - Toggle Button 00:55 | CSS - Container 01:29 | CSS - ...
How to Sort & Filter Data in React using TypeScript
Переглядів 1,1 тис.10 місяців тому
In today’s video, you will learn how to sort and filter data in your React and TypeScript project. After first fetching the data, you will call a sortAndFilterData function that applies your specified filters and returns a filtered data object. Check out the gist below for a step-by-step explanation. Github Gist: gist.github.com/thecodingloft/4e621092495de405f342dad209f8b0bb Timestamps: 00:00 -...
How To Parse CSV Files - React & TypeScript
Переглядів 2,4 тис.10 місяців тому
Hey there! In today’s video, you will learn how to parse CSV files in your React & TypeScript project. Why? Well, so you can easily work with them as you would with a regular JS object or array. You can find the full code below! Enjoy GitHub Gist: gist.github.com/thecodingloft/caec4950ce9e313ae33d77f000b20e76 Timestamps: 00:00 - Intro 00:33 - Installing papaparse 02:07 - Creating fetchCSVData 0...
How To Get Query Parameter in JavaScript
Переглядів 4811 місяців тому
In today’s video, you will learn how to get query parameters in JavaScript. Query Parameter are often used to pass data to the next page, such as: - campaign tracking parameter - product parameter - session or user parameter You will write two reusable functions that let you get (1) a single query parameter value or (2) an object containing all query parameters. Find the function code here: gis...
Build a Scroll Indicator with JavaScript
Переглядів 113Рік тому
Build a Scroll Indicator with JavaScript
Infinite Logo Slider - Full Tutorial (JavaScript)
Переглядів 830Рік тому
Infinite Logo Slider - Full Tutorial (JavaScript)
How to Merge Objects in JavaScript - 3 Ways!
Переглядів 141Рік тому
How to Merge Objects in JavaScript - 3 Ways!
All You Need To Know About Local Storage
Переглядів 366Рік тому
All You Need To Know About Local Storage
Create A Countdown ONLY with JavaScript!
Переглядів 115Рік тому
Create A Countdown ONLY with JavaScript!
How To Make A Counter in JavaScript
Переглядів 80Рік тому
How To Make A Counter in JavaScript
Shrink a Navbar on Scroll! - Easy JavaScript Effect
Переглядів 628Рік тому
Shrink a Navbar on Scroll! - Easy JavaScript Effect
How To Reverse Strings in JavaScript Like A Pro
Переглядів 35Рік тому
How To Reverse Strings in JavaScript Like A Pro
Build A Cool Loading Spinner - HTML, CSS, JavaScript
Переглядів 187Рік тому
Build A Cool Loading Spinner - HTML, CSS, JavaScript
Start Using "Try.. Catch.. Finally" Today!
Переглядів 40Рік тому
Start Using "Try.. Catch.. Finally" Today!
How To Build A Simple Slider - React & Tailwind CSS
Переглядів 955Рік тому
How To Build A Simple Slider - React & Tailwind CSS
Mastering JavaScript: Unleash Your Array Looping Skills
Переглядів 23Рік тому
Mastering JavaScript: Unleash Your Array Looping Skills
How to use setInterval() and clearInterval() like a pro
Переглядів 56Рік тому
How to use setInterval() and clearInterval() like a pro
How To Make a Moving Gradient Background!
Переглядів 517Рік тому
How To Make a Moving Gradient Background!
How To Add AppImages To Your Linux Applications!
Переглядів 2,3 тис.Рік тому
How To Add AppImages To Your Linux Applications!
10 Awesome CSS Text Animations for Your Website
Переглядів 38Рік тому
10 Awesome CSS Text Animations for Your Website
Create A Reusable Modal with React & Tailwind CSS
Переглядів 1,2 тис.Рік тому
Create A Reusable Modal with React & Tailwind CSS
Make a Loading Spinner! - with HTML, CSS, & JavaScript
Переглядів 281Рік тому
Make a Loading Spinner! - with HTML, CSS, & JavaScript
Save Time When Making Your Next Web Project
Переглядів 46Рік тому
Save Time When Making Your Next Web Project

КОМЕНТАРІ

  • @axMf3qTI
    @axMf3qTI 23 дні тому

    this is cool but i still have empty icons in my dash. Should I update that too in one way or an other?

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

    works fine on RHEL 9.4 love it

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

    This worked great on my debian 12 machine. But wheni do it on my Ubuntu machine it says that the folder isnt in $PATH.

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

      Thanks for sharing! It should work just as well on Ubunutu. Since you say that the folder isn't in $PATH, it seems like the path to the executable file isn't correct or that the permission are not set to executable for that file. So it tries to look for the file in the default directories specified in $PATH.

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

    Thanks for the tutorial 🙏 That was very helpful

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

    hi ma use AM it more easy

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

    Seriously, thank you so much for this

  • @Nico-su1ku
    @Nico-su1ku 3 місяці тому

    Awesome, and how you do it if the file is uploaded by the user?

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

      Great question. It would probably be very similar. Let's say you have a function that handles the user file upload. Inside the function, you check if it's indeed a valid csv file, then you parse it to a js object. From there, use the data as needed, e.g. show an array of possible information contained within each csv row. If you can share some code, I'd be happy to help more

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

    could i have the github code? like how did you create ur filter menu

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

    Is complete code available in GitHub?

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

    BUD! You deserve more Views! This helped me out with SteamOS yuzu emulator 😂

  • @1le0x_
    @1le0x_ 5 місяців тому

    Great video! Thanks

  • @georgecrisan9499
    @georgecrisan9499 5 місяців тому

    seems like an unnecessary reinventing of the wheel. There is no situation that you cannot resolve with Intersection Observer over this workaround approach.

  • @supportic
    @supportic 5 місяців тому

    Intersection Observer is way more performant than this

    • @thecodingloft
      @thecodingloft 5 місяців тому

      True, the intersection observer is generally preferred. But in some cases, you might want to have an additional check in the observer to see if the element is still visible, let's say after 1 second

    • @supportic
      @supportic 5 місяців тому

      @@thecodingloft if you have to use the scroll listener I would at least use a throttle mechanism

  • @G5STU
    @G5STU 5 місяців тому

    And this is why normal people don’t use Linux , Jesus . What a crock of …

    • @thecodingloft
      @thecodingloft 5 місяців тому

      Haha true! Could be more straightforward

  • @Lukas_Schanderl
    @Lukas_Schanderl 5 місяців тому

    Great video 👌

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

    Great video 👏

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

    Muito obrigado.

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

    trash

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

    i love you

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

    Bro you explained very well

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

    very underrated. i would love if you continue this series 'learn linux' cause this video is so nicely taught

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

      Thank you, it's definitely on the to-do list once there's some more spare time! :)

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

    Great video and content!

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

      Thank you, glad you liked it!

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

    Is there a way to set launch options for it as well?

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

      Good question, I'm sure there is, I would have to look it up myself. I'll check it out soon

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

    😉 Promo`SM

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

    Really useful tutorial. Thank you 👌

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

    One more subscriber! 💚

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

    This is some great stuff! I've recently been dipping my toe back into CSS, so it's been fun to learn about little tricks like this that help meet practical use cases. JavaScript is fun and all, but it's nice to let CSS and HTML do the heavy lifting for layout and look :)

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

      Thank you! Yes totally agree, CSS is really powerful and lots of interactive stuff can be done without JS

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

    Great tutorial :)

  • @user-sv3bt7eh9d
    @user-sv3bt7eh9d 10 місяців тому

    #gmaill

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

    Learned a lot of things. Thanks a lot.

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

      Thanks for letting me know, glad you found it helpful :)

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

    as someone who uses windows / mac / linux. This method removes the magic from the appimage. it would be nice if the .appimage included the icon by itself inside.

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

      Thanks for the comment. You're right, there are more steps compared to having the logo inside the .appimage. Curious to hear, what would be your way to go about it?

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

      ​@@thecodingloft I am not saying your method is bad or anything, I am just saying the way linux works or appimages work don't give you that magic apple gives you where an application is just a fancy icon that you can drag and drop on a dock. it probably has something to do with how linux is structured.

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

      Yes, I agree, it would be nice if it was just a standard with every appimage to have the logo included and installed in the applications window.

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

    Great video :)

  • @Rebecca-rc4ds
    @Rebecca-rc4ds Рік тому

    This is just what I was looking for! Well explained and very helpful. Thanks a lot🎉

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

    That's awesome :)

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

    Thanks bro it worked for me on manjaro

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

    Great video :)

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

    I want to make multiple modals , but when I am applying its not working. How should i handle multiple model conponents

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

      Thanks for the question! To be honest, it depends quite a bit on your setup. Do you one to have one modal that has several different steps inside? Then you could update the component to have a step state which changes on each button click and sends a different html for each step. Do you want to have different modals on different parts of your website, depending on the user interaction? Then you could have different modal states for each modal (showModalOne, showModalTwo, etc) that all correspond to a specific modal. You would also then have to update the show and close modal functions to only work for the target modal. If you have a JFiddle or similar, feel free to share so you can get some input! Hope that helps :)

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

      @@thecodingloft Thanks a lot🖤 for your quick response. It worked.

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

      @@ayra_2001 thank you, that's great to hear :)

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

    Great video

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

    Thanks for the tutorial 🙏

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

    Thanks for explaining it so simple and straight to the point 👌

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

    can you zoom in on your code so it's readable?

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

      thanks for the comment! Unfortunately I can't after the video is uploaded, but I'll make sure to do so in the next videos. You can also find the code in the Github Repo

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

    Awesome work 👌

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

    That's really useful. Thank you 👌

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

    I tried it with Krita but didn't succeed. Could you please do it for Kirata too?

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

      Thanks for the comment! I've just tried it with Krita and it works the same way. Double-check the spelling of the filenames and inside the .desktop files, often it's as simple as having a lowercase or uppercase letter different. Let me know if that helped!

  • @Rebecca-rc4ds
    @Rebecca-rc4ds Рік тому

    Super helpful video! Thanks a lot!👍

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

    Wonderful tutorial pro. Good job 👏👏

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

    why not just full screen in your video ?