ASMR Programming - Spotify Desktop App - No Talking
Ойын-сауық
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
Пікірлер: 349
Keyboard link (I use red switches): bit.ly/3hPGk3A
@vietcute4925
Жыл бұрын
can you do roblox homepage?
@thithunguyen4759
Жыл бұрын
@@vietcute4925 hảo hán=)))
@tinhyeumaugi8886
Жыл бұрын
@@vietcute4925 trang đó cũng bình thường mà
@jacksparrow507
11 ай бұрын
Which mouse is this ?
@Okamine
10 ай бұрын
@@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
@mar0981
Жыл бұрын
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.
@CodeWithAsmr
Жыл бұрын
@@mar0981 Learning to code can be exhausting, but at least you can now have an excuse to watch videos instead of coding! Lmao.
@filozof_1
Жыл бұрын
wow nice comment copying
@benjaminlind
Жыл бұрын
😂
@CM_YT1
Жыл бұрын
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
@couupakb9669
Жыл бұрын
Consistency my friend, try code everyday and you’ll be surprised on the progress you will make!
@CaptTragedy
Жыл бұрын
@@couupakb9669 true!!
@cataclysmicclasher3490
Жыл бұрын
@@CaptTragedyHow is your progress?
@CaptTragedy
Жыл бұрын
@@cataclysmicclasher3490 could be better 😞
@user-pm1gx6je2n
8 ай бұрын
How about now?
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😇
I’m learning to code (Python) and discovered this channel today. Incredibly motivating for me to keep learning programming.
@soulsborneenjoyer
4 ай бұрын
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
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
@gavintaylor6453
11 ай бұрын
Agree!
@MCroppered
11 ай бұрын
Vim for vscode. Learn vim commands by playing an online vim game.
@muhammadashir6105
11 ай бұрын
Learn Vim my man. That's like the biggest flex for programmers. That's also what he's using with a VS code extension.
@aliframedhis
10 ай бұрын
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%
@nxfrvt7763
8 ай бұрын
He's using VIM extension. Good luck ;)
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 🙌🙌
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? 🙌
Just found your channel bro and its freaking awesome!!
very good video I liked, I really like the satisfaction of the keys, very good keyboard
All i can say is that i am improving upon my css knowledge seeing someone else a professional use css
Awesome video 👏
@JuanDRSoft
Жыл бұрын
is so relaxing 😌
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
@diegotsuyoshi9586
10 ай бұрын
I had the same problem, now I'm starting to get used to hit ctrl+c instead of esc to exit modes
@_lessthanzero_
10 ай бұрын
@@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
Please consider making an Instagram clone, as always love this series ❤️
brazil - Conteúdo legal de mais parabéns!
this keyboard man, masterpiece, jesus
Yeah! New video :) Cool
great video, thank you!
bu arkadaşımızın türk olması beni aşırı sevindiriyor başarılarının devamını diliyorum
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.
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!
@ServetGulnaroglu
Жыл бұрын
Thank you!
@adhitamaputra-73
29 күн бұрын
.b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.
Great video! What's the extension that you use for the window management? Thanks!
excelent!!!
Bildirimler açıktı ama yeni izleyebildim 😊🫶🏻🫶🏻🫶🏻
well done :)
The video is super
welcme back pro
ASMR your lessons are very good
@Abdusalomov3d
Жыл бұрын
If you have a Telegram channel, please post it
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!
@boujeekendoll
Жыл бұрын
Live server + auto-save
asmrで勉強もできますね
great video. try using f/F to jump to the character on your line rather than pressing w a whole bunch
i understand nothing but its relaxing to watch
I am learning web dev good to know about asmr programi
nice video 🎉
nice video
Hi bro. I really love watching your videos, really2 motivate me. Btw, is that mx master 3s mouse you're using?
@ServetGulnaroglu
Жыл бұрын
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!
@javierdaza9155
Жыл бұрын
cmd + shift + 4
@isadfrn
Жыл бұрын
@@javierdaza9155 thanks!
@VJL0
21 күн бұрын
@@javierdaza9155 how do u keep it pinned to the screen
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.
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
@ServetGulnaroglu
Жыл бұрын
Thank you! macosx calculator is on the way
hahaha i love that the first thing u did was turn the blank page to dark mode
Awesome video, bro please please please create steam desktop app
gracias
çok iyi olmuş knk
Gerçekten çok faydalı videolar. Tebrik ederim. 🙋♂️
@ServetGulnaroglu
Жыл бұрын
Teşekkür ederim, sizin de videolarınız çok bilgilendirici duruyor, mutlalaka göz atacağım 👑👌
@Hollandadaki_yazilimci
Жыл бұрын
@@ServetGulnaroglu teşekkür ederim. 🙋♂️
Do an operating system next!
How do you switch between windows? I know there is alt tab but the way you do it seems so fun
Terminal on the right is crazy
Naptin usta böyle
i wanna be like you man
How do you use your keybindings.. ? Make a video on it
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😬😁
Motivation
What do you prefer, Vim ir visual studio cose???
Can i get the code's and copy it and past in visual studio code?
Can you share your shortcut key in vscode, I see that you use alot of shortcut that make your work more productive, thank youu
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 ?
Great, how is this quick to use up and down left and right
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?
how do you get your screenshots to stay floating/pinned?
Hi I'm wondering what font are you using, just wanted to know, thank you in advance
Hocam nasıl bu kadar iyi oldun nereden başladın. Bende kursa gidiyorum backend de gösteriyorlar ama her şey çok fazla.
good
the 'npm start' tho😫
extensions you use for vscode please😊
Wow. It's really like Spotify. I'll do same on my channel
How did you put screenshot on screen and when you clicked app it didn't minimalised?
relax
bro it's nice how many years to train bro
how do you move the mouse pointer with keys like you
bro he progammed spotify, at this point he can do anything
very cool) I had to work with electron js
@gamecat7397
Жыл бұрын
Electron so easy
👍👍
can you make a video on keyboard shortcuts?
ETS'de dorse hasarı alırken dinlediğim şarkılar
You should stream when you're making these videos
What app color picker do you use? 29:21
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 :)
Can I modify this for playing music from Disk ?😊
welcome indonesia nyimak
do any with music overlayed instead of type sounds?
what are the shortcuts he uses? never uses the arrow keys does he have macros for them how does it can someone explain
What a window manager you are using for mac os?
how do you go up and down without using the arrow keys
Hii , can you make css videos so we can learn properly.
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?
@ServetGulnaroglu
Жыл бұрын
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.
@valovanonym
Жыл бұрын
@@ServetGulnaroglu Thank you for your usefull answer!!
@valovanonym
Жыл бұрын
@@ServetGulnaroglu by the way I bought the same keyboard with brown switches, I'm really satisfied!
How are u using ijkl as arrows
개발자가 매번 침을 삼키는 소리를 듣는 사람이 있습니까? 😂
Hi, what theme are you using in VS?
which color picker you use for desktop