ASMR Programming - Spotify Desktop App - No Talking
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 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 - บันเทิง
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
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?
DAMN, it's always so admirable to see people know so much about these technologies.
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?
the sound made me fly away and get inner peace, thanks bro love it😇
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 ;)
I just witnessed something I have no idea about but I will learn in the next 2 yrs
Crazy good video as always Servet! 🎇
All i can say is that i am improving upon my css knowledge seeing someone else a professional use css
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? 🙌
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 just love the typing speed. sheeesh
🙌🙌
Just found your channel bro and its freaking awesome!!
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
very good video I liked, I really like the satisfaction of the keys, very good keyboard
this keyboard man, masterpiece, jesus
brazil - Conteúdo legal de mais parabéns!
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 ❤️
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!
Awesome job, at the end you can barely tell them apart!
Thank you!
Assuming you're using via for key mapping- can you drop your file, or share your layout? Your navigation is insane!! 😎
Awesome video bro 👌 👍
Awesome video 👏
is so relaxing 😌
Great video! What's the extension that you use for the window management? Thanks!
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
Haircut and look good so happy to see you Mister.
excelent!!!
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!
Hi bro. I really love watching your videos, really2 motivate me. Btw, is that mx master 3s mouse you're using?
Yes, correct
well done :)
Yeah! New video :) Cool
Bildirimler açıktı ama yeni izleyebildim 😊🫶🏻🫶🏻🫶🏻
The video is super
asmrで勉強もできますね
ASMR your lessons are very good
If you have a Telegram channel, please post it
great video. try using f/F to jump to the character on your line rather than pressing w a whole bunch
welcme back pro
nice video
nice video 🎉
i understand nothing but its relaxing to watch
This is more informative than tutorial somehow.
Can you capture the keyboard input and put it to the next video? I think it’s good to learn some new keyboard shortcut.
I am learning web dev good to know about asmr programi
Ou program so fast I think you might be programing since it even exists😂❤
I love that. 😀 plz plz plz make a interface if any apple product
Thank you! macosx calculator is on the way
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. 🙋♂️
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?
hahaha i love that the first thing u did was turn the blank page to dark mode
How do you switch between windows? I know there is alt tab but the way you do it seems so fun
Nice video! How do you swap between application?
Hey Servet!! I have one question,what is the best way to start to programing? Sorry for my english😬😁
gracias
Awesome video, bro please please please create steam desktop app
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!
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 ?
Do an operating system next!
Can you share your shortcut key in vscode, I see that you use alot of shortcut that make your work more productive, thank youu
Hi I'm wondering what font are you using, just wanted to know,
thank you in advance
çok iyi olmuş knk
Hocam nasıl bu kadar iyi oldun nereden başladın. Bende kursa gidiyorum backend de gösteriyorlar ama her şey çok fazla.
What do you prefer, Vim ir visual studio cose???
How do you use your keybindings.. ?
Make a video on it
i wanna be like you man
Naptin usta böyle
Terminal on the right is crazy
It's a normal video of coding or a speedrun coding? lol
bro he progammed spotify, at this point he can do anything
Motivation
bro it's nice how many years to train bro
Great, how is this quick to use up and down left and right
Back-end guy: 😞
What a window manager you are using for mac os?
good
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 :)
How did you put screenshot on screen and when you clicked app it didn't minimalised?
Can i get the code's and copy it and past in visual studio code?
Wow. It's really like Spotify. I'll do same on my channel
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.
Hi, what theme are you using in VS?
What app color picker do you use? 29:21
I wish to be coding at your speed very soon. Right now, Im at the pace of a granny who just is a noob on the internet.
ETS'de dorse hasarı alırken dinlediğim şarkılar
very cool) I had to work with electron js
Electron so easy
What program do you use to capture screenshot?
is there any way to learn this html coding or do you teach by chance?
کاش فقط یکم قوی تر بود مثل توانی که هوشش داشت اون وقت این زندگیو نداشت و همچین انسان با ارزشی حیف نمیشد حالا تقصیر هر کی که بوده... مرسی از آنتن ❤
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
how did you switch tab fast with your keyboard?
You should stream when you're making these videos
what notebook do you use to program?
which color picker you use for desktop
Can I modify this for playing music from Disk ?😊
Türk oldugunu farkedince gururlandım :)
can you make a video on keyboard shortcuts?
Hii , can you make css videos so we can learn properly.
I love this but instead of 57min why don't you do a speedart transition to minimize 2 minutes for the videos?