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

[@ServetGulnaroglu]

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]

Which mouse is this ?

[@Okamine]

@@jacksparrow507its a logitech mx 3 i guess

[@CodeWithAsmr]

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

[@gabrielcurran3932]

DAMN, it's always so admirable to see people know so much about these technologies.

[@zachedo3538]

the sound made me fly away and get inner peace, thanks bro love it😇

[@CaptTragedy]

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]

How about now?

[@technomantrix]

I’m learning to code (Python) and discovered this channel today. Incredibly motivating for me to keep learning programming.

[@soulsborneenjoyer]

Hello! How is your journey of learning programming languages going?

[@studyingasyouwere]

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? 🙌

[@aincradtech]

Crazy good video as always Servet! 🎇

[@user-zp8ow2xg4h]

I just witnessed something I have no idea about but I will learn in the next 2 yrs

[@codingasmr69]

Always love your videos my friend!

[@hirokjotirb]

Love the way you type the codes. Hope I'll be as fast as you one day. Nice 🦄😉👍

[@cudialmg2232]

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]

Agree!

[@MCroppered]

Vim for vscode. Learn vim commands by playing an online vim game.

[@muhammadashir6105]

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]

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]

He's using VIM extension. Good luck ;)

[@paramdholakiya8857]

All i can say is that i am improving upon my css knowledge seeing someone else a professional use css

[@VedantYawalkar]

i just love the typing speed. sheeesh 🙌🙌

[@nexohub]

very good video I liked, I really like the satisfaction of the keys, very good keyboard

[@sekytwo]

Just found your channel bro and its freaking awesome!!

[@trajetoriadeumprogramadori6669]

brazil - Conteúdo legal de mais parabéns!

[@mohidenadam]

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]

I had the same problem, now I'm starting to get used to hit ctrl+c instead of esc to exit modes

[@_lessthanzero_]

​@@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

[@suryabbrj8458]

Please consider making an Instagram clone, as always love this series ❤️

[@marcosqbraga4869]

this keyboard man, masterpiece, jesus

[@carlosmartin1496]

Great video! What's the extension that you use for the window management? Thanks!

[@yusufdumurcuk6320]

bu arkadaşımızın türk olması beni aşırı sevindiriyor başarılarının devamını diliyorum

[@kk-zt9ri]

Haircut and look good so happy to see you Mister.

[@WebDevASMR]

Awesome job, at the end you can barely tell them apart!

[@ServetGulnaroglu]

Thank you!

[@ELEZVIDEO]

great video, thank you!

[@codingasmr]

Awesome video bro 👌 👍

[@kurtisvaldez3262]

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.

[@dwerk3]

Assuming you're using via for key mapping- can you drop your file, or share your layout? Your navigation is insane!! 😎

[@justinnguyen523]

great video. try using f/F to jump to the character on your line rather than pressing w a whole bunch

[@timohavol8032]

Yeah! New video :) Cool

[@AsmrProg]

Awesome video 👏

[@JuanDRSoft]

is so relaxing 😌

[@ghpr1231]

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

[@pervincalskan1246]

Bildirimler açıktı ama yeni izleyebildim 😊🫶🏻🫶🏻🫶🏻

[@Nicommd]

asmrで勉強もできますね

[@ErWin1.0]

excelent!!!

[@07x13]

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?

[@Abdusalomov3d]

ASMR your lessons are very good

[@Abdusalomov3d]

If you have a Telegram channel, please post it

[@Boris_kryuchkov]

The video is super

[@ThePopiang]

Hi bro. I really love watching your videos, really2 motivate me. Btw, is that mx master 3s mouse you're using?

[@ServetGulnaroglu]

Yes, correct

[@abdikadirQulle]

welcme back pro

[@quotespower9911]

I am learning web dev good to know about asmr programi

[@Patlov_]

well done :)

[@manuel3537]

nice video

[@viszix]

i understand nothing but its relaxing to watch

[@jsonr1]

Awesome video, bro please please please create steam desktop app

[@isadfrn]

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!

[@bagunza2002]

Nice video! How do you swap between application?

[@glsbro]

I love that. 😀 plz plz plz make a interface if any apple product

[@ServetGulnaroglu]

Thank you! macosx calculator is on the way

[@dailymohammad]

nice video 🎉

[@Spoopwoopy]

How do you switch between windows? I know there is alt tab but the way you do it seems so fun

[@whitecrow20XX]

This is more informative than tutorial somehow.

[@Minigokudbs]

gracias

[@dooezgo5619]

Can you capture the keyboard input and put it to the next video? I think it’s good to learn some new keyboard shortcut.

[@jandy1551]

Ou program so fast I think you might be programing since it even exists😂❤

[@peetruu22]

Hey Servet!! I have one question,what is the best way to start to programing? Sorry for my english😬😁

[@julespuget3356]

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 ?

[@valovanonym]

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!

[@Ududu6d6d6d]

Hocam nasıl bu kadar iyi oldun nereden başladın. Bende kursa gidiyorum backend de gösteriyorlar ama her şey çok fazla.

[@jameshicks7254]

Do an operating system next!

[@Hollandadaki_yazilimci]

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. 🙋‍♂️

[@karthikeyakvl9138]

How do you use your keybindings.. ? Make a video on it

[@jec1248]

Hi I'm wondering what font are you using, just wanted to know, thank you in advance

[@koop8711]

hahaha i love that the first thing u did was turn the blank page to dark mode

[@nickdalts]

Terminal on the right is crazy

[@user-oh3bd3qk7q]

What a window manager you are using for mac os?

[@phelioon]

i wanna be like you man

[@federicotoscano7650]

What program do you use to capture screenshot?

[@lvisbl__]

Can you share your shortcut key in vscode, I see that you use alot of shortcut that make your work more productive, thank youu

[@HarryMurfh]

What app color picker do you use? 29:21

[@sebastiangarcias8203]

What do you prefer, Vim ir visual studio cose???

[@Mugesh-rx1pb]

bro it's nice how many years to train bro

[@cemsit16]

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 :)

[@hakankurt9863]

Naptin usta böyle

[@asmrrelaxprogrammingvideos]

very cool) I had to work with electron js

[@gamecat7397]

Electron so easy

[@jack89]

Hi, what theme are you using in VS?

[@hoangvietphan1100]

Hi, 2:58 what is the application to capture the image and ping it to screen

[@apenasumperfil6052]

what notebook do you use to program?

[@furkaneric9915]

çok iyi olmuş knk

[@muhammedasad3174]

is there any way to learn this html coding or do you teach by chance?

[@crystallineforeverness4988]

which editor you are using?

[@danielpecanha7707]

extensions you use for vscode please😊

[@cybercatkn]

Wow. It's really like Spotify. I'll do same on my channel

[@tlopes]

whitch mouse do you use?

[@CHOKS-io6dz]

relax

[@user-xo2bx2qd8p]

Great, how is this quick to use up and down left and right

[@Sultanqi]

Can i get the code's and copy it and past in visual studio code?

[@nickc5845]

Motivation

[@khonglammaoianthianbanc9672]

how did you switch tab fast with your keyboard?

[@hamadmadhmode]

good

[@user-gd4vj4dr2h]

How did you put screenshot on screen and when you clicked app it didn't minimalised?

[@ayudhdasroy7090]

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++?

[@Malcstaa]

Yeah you can use electron like he does at the beginning of the video

[@ayudhdasroy7090]

@@Malcstaa is electron a framework?

[@eaccer]

friendly reminder that webdev isn't coding!

[@reisaki18]

​@@MalcstaaElection apps is a memory hog just like chrome. So it is recommended to use C or C++ to build a desktop app.

[@ujs202]

can you make a video on keyboard shortcuts?

[@mangeshpatil9604]

which color picker you use for desktop

[@bhuwanyadav_000]

👍

[@MangCell1212]

welcome indonesia nyimak

[@thehackgabriel]

ok, você tem o molho!

[@DopiAja]

👍👍

[@mohakjl7949]

what plugins do you use?

[@tweep5918]

You should stream when you're making these videos

[@Alexdroide64]

Could you make another blender video? :D