- Видео 35
- Просмотров 15 534
The Coding Loft
Германия
Добавлен 6 окт 2021
Ready to become a real web development hero?
Whether it's JavaScript, React, TypeScript - you will discover how exciting coding can be and get the skills to become a high-paid web developer!
So, grab a cup of coffee, get comfortable, and let's learn some cool coding stuff!
Whether it's JavaScript, React, TypeScript - you will discover how exciting coding can be and get the skills to become a high-paid web developer!
So, grab a cup of coffee, get comfortable, and let's learn some cool coding stuff!
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!
ruclips.net/video/RP8UlRyIH04/видео.html&ab_channel=TheCodingLoft
Video 2: Set up a Webpack Dev Server with Hot Reloading
ruclips.net/video/6jQEyXk1CZc/видео.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
Check out the other videos in this series:
Video 1: How To Set Up TypeScript & Webpack!
ruclips.net/video/RP8UlRyIH04/видео.html&ab_channel=TheCodingLoft
Video 2: Set up a Webpack Dev Server with Hot Reloading
ruclips.net/video/6jQEyXk1CZc/видео.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 ruclips.net/video/6jQEyXk1CZc/видео.html&ab_channel=TheCodingLo...
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
Просмотров 8179 месяцев назад
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)
Просмотров 832Год назад
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!
Shrink a Navbar on Scroll! - Easy JavaScript Effect
Просмотров 630Год назад
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
Просмотров 188Год назад
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
this is cool but i still have empty icons in my dash. Should I update that too in one way or an other?
works fine on RHEL 9.4 love it
Great to hear!
This worked great on my debian 12 machine. But wheni do it on my Ubuntu machine it says that the folder isnt in $PATH.
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.
Thanks for the tutorial 🙏 That was very helpful
Thank you! :)
hi ma use AM it more easy
Hey thanks, great point!
Seriously, thank you so much for this
You're welcome!
Awesome, and how you do it if the file is uploaded by the user?
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
could i have the github code? like how did you create ur filter menu
Is complete code available in GitHub?
BUD! You deserve more Views! This helped me out with SteamOS yuzu emulator 😂
Great video! Thanks
Thanks, glad it helped :)
seems like an unnecessary reinventing of the wheel. There is no situation that you cannot resolve with Intersection Observer over this workaround approach.
Intersection Observer is way more performant than this
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
@@thecodingloft if you have to use the scroll listener I would at least use a throttle mechanism
And this is why normal people don’t use Linux , Jesus . What a crock of …
Haha true! Could be more straightforward
Great video 👌
Thank you! 🙏
Great video 👏
thank you Lukas!
Muito obrigado.
trash
i love you
Bro you explained very well
Thanks dude appreciate it
very underrated. i would love if you continue this series 'learn linux' cause this video is so nicely taught
Thank you, it's definitely on the to-do list once there's some more spare time! :)
Great video and content!
Thank you, glad you liked it!
Is there a way to set launch options for it as well?
Good question, I'm sure there is, I would have to look it up myself. I'll check it out soon
😉 Promo`SM
Really useful tutorial. Thank you 👌
Thanks Lukas!
One more subscriber! 💚
💚 thanks :)
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 :)
Thank you! Yes totally agree, CSS is really powerful and lots of interactive stuff can be done without JS
Great tutorial :)
Thank you !
#gmaill
Learned a lot of things. Thanks a lot.
Thanks for letting me know, glad you found it helpful :)
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.
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?
@@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.
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.
Great video :)
Thank you Lukas
This is just what I was looking for! Well explained and very helpful. Thanks a lot🎉
Great to hear! Thank you :)
That's awesome :)
Thank you!
Thanks bro it worked for me on manjaro
Awesome, good to hear! :)
Great video :)
Thanks Lukas
I want to make multiple modals , but when I am applying its not working. How should i handle multiple model conponents
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 :)
@@thecodingloft Thanks a lot🖤 for your quick response. It worked.
@@ayra_2001 thank you, that's great to hear :)
Great video
Thank you!
Thanks for the tutorial 🙏
Thank you! ;)
Thanks for explaining it so simple and straight to the point 👌
Thank you!
can you zoom in on your code so it's readable?
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
Awesome work 👌
Thank you!
That's really useful. Thank you 👌
Great to hear, thanks!
I tried it with Krita but didn't succeed. Could you please do it for Kirata too?
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!
Super helpful video! Thanks a lot!👍
Thank you!
Wonderful tutorial pro. Good job 👏👏
Thank you, great to hear :)
why not just full screen in your video ?