ASMR Programming - Spotify Desktop App - No Talking
Vložit
- čas přidán 25. 06. 2024
- Hello my dear coders,
In this video, I demonstrate how to create a Spotify app clone using HTML, CSS, and JavaScript. Although the app looks similar to Spotify, it doesn't have any actual functionality. This is just a demonstration of how to create a basic layout and design for a music streaming app. Feel free to use this as a starting point for your own projects and add functionality as you wish. If you have any suggestions or ideas for how to improve this app, please leave a comment below or fork the code on Github. Thanks for watching!
I will be waiting for your pull requests on Github.
Hope you like it!
Twitter: / gulnaroglus
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
Source code: github.com/servetgulnaroglu/s...
Live a star on github, if you enjoy!
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
⌨️ Keyboard: YUNZII KEYNOVO IF98 Gateron Red Switches
bit.ly/3hPGk3A
📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
00:00 Initializing npm
00:26 Electron.js quick start
01:17 Electron.js test
01:39 Creating css file
02:08 Showing the images and svg's
02:28 Coding left bar with HTML
09:10 End of left menu
09:52 Coding left playlists
11:00 End of left playlists
11:19 Coding left song cover
12:50 End of left song cover
13:30 Coding playlist header
22:20 Box shadow generator
27:15 End of playlist header
28:00 Coding playlist songs
30:58 Gradient background generator
43:20 End of playlist songs
44:03 Coding bottom player
54:30 End of bottom player
56:10 Running as a desktop application
56:43 Hidden top bar and maximizing the window
57:10 Final results and comparison - Zábava
![# 15.06.2024 [502. IPO]](http://i.ytimg.com/vi/w1YDfTyy7vU/mqdefault.jpg)
![# 15.06.2024 [502. IPO]](/img/tr.png)
Keyboard link (I use red switches): bit.ly/3hPGk3A
can you do roblox homepage?
@@vietcute4925 hảo hán=)))
@@vietcute4925 trang đó cũng bình thường mà
Which mouse is this ?
@@jacksparrow507its a logitech mx 3 i guess
I coded for 10 hours and opened youtube to relax. This is what I watched while resting from programming
Same! I'm currently doing a coding bootcamp so I was on there for exactly 10hrs and I ended up watching this whole video after telling my gf that I was tired of coding for the day lmao.
@@mar0981 Learning to code can be exhausting, but at least you can now have an excuse to watch videos instead of coding! Lmao.
wow nice comment copying
😂
Copy comment lol
DAMN, it's always so admirable to see people know so much about these technologies.
the sound made me fly away and get inner peace, thanks bro love it😇
Can't believe you banged this out in an hour, man you really make me self conscious about my lack of front end dev skills. Well done
Consistency my friend, try code everyday and you’ll be surprised on the progress you will make!
@@couupakb9669 true!!
@@CaptTragedyHow is your progress?
@@cataclysmicclasher3490 could be better 😞
How about now?
I’m learning to code (Python) and discovered this channel today. Incredibly motivating for me to keep learning programming.
Hello! How is your journey of learning programming languages going?
Crazy good video as always Servet! 🎇
I just witnessed something I have no idea about but I will learn in the next 2 yrs
Always love your videos my friend!
Love the way you type the codes. Hope I'll be as fast as you one day. Nice 🦄😉👍
I'm a newbie programmer, I'd love to learn your fast typing and the keyboard shortcuts you use, I hope you have a tutorial in the future
Agree!
Vim for vscode. Learn vim commands by playing an online vim game.
Learn Vim my man. That's like the biggest flex for programmers. That's also what he's using with a VS code extension.
Learn some basics keyboard shortcuts. Then proceed to learn the shortcuts for vscode. You'll be efficient and reduce the amount of mouse clicks by 80%
He's using VIM extension. Good luck ;)
All i can say is that i am improving upon my css knowledge seeing someone else a professional use css
i just love the typing speed. sheeesh
🙌🙌
Just found your channel bro and its freaking awesome!!
Welcome back, Servet! You are my favourite ASMR programmer and a reason why I started creating programming content! For my next content, I am interviewing the content creators of the ASMR programming community, could I please do an interview with you? 🙌
very good video I liked, I really like the satisfaction of the keys, very good keyboard
bu arkadaşımızın türk olması beni aşırı sevindiriyor başarılarının devamını diliyorum
Please consider making an Instagram clone, as always love this series ❤️
this keyboard man, masterpiece, jesus
brazil - Conteúdo legal de mais parabéns!
amazing video
tip: since you use ESC to exit insert mode you need a keyboard that has closer ESC key to your fingers or switch to using CTR+c
I had the same problem, now I'm starting to get used to hit ctrl+c instead of esc to exit modes
@@diegotsuyoshi9586dont use Ctrl+c , it might escape u to the normal mode but sometimes causes unexpected things. Better use Ctrl+[ , this is one of the official escape key binding
Awesome video 👏
is so relaxing 😌
Great video! What's the extension that you use for the window management? Thanks!
Yeah! New video :) Cool
Awesome video bro 👌 👍
Haircut and look good so happy to see you Mister.
Hey It would be nice to also make some videos in soft voice where you explain step by step how you made the program so that does that dont know alot can learn.
great video, thank you!
Fantastic video! I've been learning web-development, but need some pro tips from you guys: Apart from installing the Live Server extention - Sometimes Servet makes changes to the code and it appears live. Does he quickly save (Ctrl-S) to deploy the changes or does he have something else going on? Cause they appear pretty quickly!
Live server + auto-save
random question but does the weight of the mx master affect your work flow at all? would it not feel better for wrist usage to use something light?
Assuming you're using via for key mapping- can you drop your file, or share your layout? Your navigation is insane!! 😎
Awesome job, at the end you can barely tell them apart!
Thank you!
.b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.
excelent!!!
Bildirimler açıktı ama yeni izleyebildim 😊🫶🏻🫶🏻🫶🏻
well done :)
Hi bro. I really love watching your videos, really2 motivate me. Btw, is that mx master 3s mouse you're using?
Yes, correct
How do you take these print screens? I need to learn how to use this in my routine. I keep switching between windows but the way you do seems to be so much more productive. This is great content also, congrats!
cmd + shift + 4
@@javierdaza9155 thanks!
i understand nothing but its relaxing to watch
asmrで勉強もできますね
nice video 🎉
Hello, I recently started looking for a keyboard and I wanted to know what switches you would recommend for programming. I know you are using red ones but I fear that for programming and typing linear switched might not be perfectly suited. I'm thinking about buying brown switches, what do you think about that?
I've used red, brown, blue, ACE switches. All of them are nice, specially red and ACE. Once you get used to the keyboard, it doesn't matter which swtiches you use.
@@ServetGulnaroglu Thank you for your usefull answer!!
@@ServetGulnaroglu by the way I bought the same keyboard with brown switches, I'm really satisfied!
Can you capture the keyboard input and put it to the next video? I think it’s good to learn some new keyboard shortcut.
How do you switch between windows? I know there is alt tab but the way you do it seems so fun
nice video
welcme back pro
Ou program so fast I think you might be programing since it even exists😂❤
The video is super
I am learning web dev good to know about asmr programi
great video. try using f/F to jump to the character on your line rather than pressing w a whole bunch
Nice video! How do you swap between application?
This is more informative than tutorial somehow.
I love that. 😀 plz plz plz make a interface if any apple product
Thank you! macosx calculator is on the way
57:10 How do you make you windows bigger (enlarge them) with the mouse on mac ? The same way you con enlarge windows on a windows computer ?
ASMR your lessons are very good
If you have a Telegram channel, please post it
hahaha i love that the first thing u did was turn the blank page to dark mode
What a window manager you are using for mac os?
Gerçekten çok faydalı videolar. Tebrik ederim. 🙋♂️
Teşekkür ederim, sizin de videolarınız çok bilgilendirici duruyor, mutlalaka göz atacağım 👑👌
@@ServetGulnaroglu teşekkür ederim. 🙋♂️
Hey Servet!! I have one question,what is the best way to start to programing? Sorry for my english😬😁
Awesome video, bro please please please create steam desktop app
Do an operating system next!
How do you use your keybindings.. ?
Make a video on it
Hi, what theme are you using in VS?
Hi I'm wondering what font are you using, just wanted to know,
thank you in advance
Can you share your shortcut key in vscode, I see that you use alot of shortcut that make your work more productive, thank youu
gracias
What app color picker do you use? 29:21
Great, how is this quick to use up and down left and right
Terminal on the right is crazy
What do you prefer, Vim ir visual studio cose???
Motivation
what notebook do you use to program?
çok iyi olmuş knk
is there any way to learn this html coding or do you teach by chance?
extensions you use for vscode please😊
Can i get the code's and copy it and past in visual studio code?
Servet kanka merhaba ben makine teknikerliği okuyorum fakat yazılım alanına merak sardım ve yazılım öğrenmeye çalışıyorum yazılımla alakalı olmayan bölümden mezun olmam önümü ne derece keser yazılımı bırakmalı mıyım ? cevaplarsan çok sevinirim :)
Naptin usta böyle
which editor you are using?
which color picker you use for desktop
how did you switch tab fast with your keyboard?
how do you move the mouse pointer with keys like you
👍👍
Hocam nasıl bu kadar iyi oldun nereden başladın. Bende kursa gidiyorum backend de gösteriyorlar ama her şey çok fazla.
What program do you use to capture screenshot?
I'm new to coding. I just wanted to know if an actual desktop app can be created using JavaScript, or can it only be created using C or C++?
Yeah you can use electron like he does at the beginning of the video
@@Malcstaa is electron a framework?
friendly reminder that webdev isn't coding!
@@MalcstaaElection apps is a memory hog just like chrome. So it is recommended to use C or C++ to build a desktop app.
do any with music overlayed instead of type sounds?
i wanna be like you man
How did you put screenshot on screen and when you clicked app it didn't minimalised?
Can I modify this for playing music from Disk ?😊
can you make a video on keyboard shortcuts?
👍
why the vscode over vstudio or xcode ?
whitch mouse do you use?
what plugins do you use?
relax
I'm new to web development and I am asking out of ignorance. What is the purpose of the electron js in this project? Is there any usage of this library in the project?
Electron is used to convert web app into desktop app
You should stream when you're making these videos
کاش فقط یکم قوی تر بود مثل توانی که هوشش داشت اون وقت این زندگیو نداشت و همچین انسان با ارزشی حیف نمیشد حالا تقصیر هر کی که بوده... مرسی از آنتن ❤
Hi, 2:58 what is the application to capture the image and ping it to screen
Wow. It's really like Spotify. I'll do same on my channel