ASMR Programming - Spotify Desktop App - No Talking
HTML-код
- Опубликовано: 31 май 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
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
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? 🙌
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
Always love your videos my friend!
i just love the typing speed. sheeesh
🙌🙌
Love the way you type the codes. Hope I'll be as fast as you one day. Nice 🦄😉👍
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
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
this keyboard man, masterpiece, jesus
Awesome job, at the end you can barely tell them apart!
Thank you!
Please consider making an Instagram clone, as always love this series ❤️
brazil - Conteúdo legal de mais parabéns!
Haircut and look good so happy to see you Mister.
great video, thank you!
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.
Yeah! New video :) Cool
Awesome video bro 👌 👍
bu arkadaşımızın türk olması beni aşırı sevindiriyor başarılarının devamını diliyorum
Awesome video 👏
is so relaxing 😌
asmrで勉強もできますね
great video. try using f/F to jump to the character on your line rather than pressing w a whole bunch
Assuming you're using via for key mapping- can you drop your file, or share your layout? Your navigation is insane!! 😎
The video is super
excelent!!!
ASMR your lessons are very good
If you have a Telegram channel, please post it
Great video! What's the extension that you use for the window management? Thanks!
nice video
I am learning web dev good to know about asmr programi
well done :)
i understand nothing but its relaxing to watch
nice video 🎉
Bildirimler açıktı ama yeni izleyebildim 😊🫶🏻🫶🏻🫶🏻
This is more informative than tutorial somehow.
welcme back pro
I love that. 😀 plz plz plz make a interface if any apple product
Thank you! macosx calculator is on the way
gracias
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?
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
Awesome video, bro please please please create steam desktop app
hahaha i love that the first thing u did was turn the blank page to dark mode
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 ?
Ou program so fast I think you might be programing since it even exists😂❤
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
Terminal on the right is crazy
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. 🙋♂️
Do an operating system next!
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 wanna be like you man
Motivation
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!
çok iyi olmuş knk
How do you switch between windows? I know there is alt tab but the way you do it seems so fun
Hi I'm wondering what font are you using, just wanted to know,
thank you in advance
good
Hey Servet!! I have one question,what is the best way to start to programing? Sorry for my english😬😁
Naptin usta böyle
What do you prefer, Vim ir visual studio cose???
relax
How did you put screenshot on screen and when you clicked app it didn't minimalised?
What a window manager you are using for mac os?
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 :)
bro he progammed spotify, at this point he can do anything
Wow. It's really like Spotify. I'll do same on my channel
how did you switch tab fast with your keyboard?
What app color picker do you use? 29:21
How do you use your keybindings.. ?
Make a video on it
Nice video! How do you swap between application?
Thank u ❤
👍👍
Hi, what theme are you using in VS?
very cool) I had to work with electron js
Electron so easy
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?
Hi, 2:58 what is the application to capture the image and ping it to screen
which color picker you use for desktop
what notebook do you use to program?
Great, how is this quick to use up and down left and right
which editor you are using?
You should stream when you're making these videos
is there any way to learn this html coding or do you teach by chance?
Can you share your shortcut key in vscode, I see that you use alot of shortcut that make your work more productive, thank youu
👍
how do you move the mouse pointer with keys like you
helal olsun
ok, I think this guys is a hard keys presser
the 'npm start' tho😫
Can I modify this for playing music from Disk ?😊
do any with music overlayed instead of type sounds?
It's a normal video of coding or a speedrun coding? lol