TUTORIAL - Electron JS - Custom Title Bar / Frameless Window - IPC Main/IPC Renderer - MODERN GUI

Ғылым және технология

Hi guys,
After many requests on how to create a custom title bar for Electron JS here on the channel I decided to record for you.
This video focused on the logical part, the HTML and CSS interface part will not be aborted, because have a large amount of content that exists on the internet on this subject. Another problem is that for CSS and HTML it is necessary to write a lot of code, which makes the tutuorial have more than an hour.
I am using FLEX CSS to align the interface.
SOURCE CODE:
The source code for this project is available to Patreon supporters:
🔗 Patreon: N/A
TOOLS:
Electron JS with Node JS
Visual Studio Code and Inkscape for drawing icons.
-----
//// DONATE ////
🔗 Donate (Gumroad): gum.co/mHsRC
//// PATREON ////
🔗 Patreon: / wandersonismyname
//// DISCORD ////
🔗 Discord: / discord
Subscribe to not miss any news from the channel.
See you in the next videos.
-----------------------------
Feather by Waywell / waywell
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/_feather
Music promoted by Audio Library • Feather - Waywell (No ...
-----------------------------

Пікірлер: 82

  • @Sindayah
    @Sindayah Жыл бұрын

    It's worth pointing out (so others don't struggle like me) that the region where "-webkit-app-region: drag;" is applied will have its mouse events disabled. So if you have CSS for some hover effect in that region - the hover effect won't trigger

  • @akbarmansurov1545

    @akbarmansurov1545

    Ай бұрын

    So minimize, maximize and close button (child elements) should get "-webkit-app-region: no-drag;"

  • @blackd3er941
    @blackd3er9412 жыл бұрын

    Your tutorials help my life. Thank you so much!

  • @timoncarstens9081
    @timoncarstens90813 жыл бұрын

    Goood Thank you! I allready give up with IPC and do it on another way but know i need IPC again and i found your video and know it works.

  • @honeypots345
    @honeypots3453 жыл бұрын

    Best teacher in this world 🔥🔥🔥

  • @sadkcoban625
    @sadkcoban6253 жыл бұрын

    This is massive. Thanks. You are master of desktop development :)

  • @kamilzurek3301
    @kamilzurek33012 жыл бұрын

    Thank you very much for this, worked first time! Saved me a lot of hassle

  • @onurokumus
    @onurokumus3 жыл бұрын

    great work! we need more electron js content

  • @AndyDev404
    @AndyDev4042 жыл бұрын

    Please add more content of Electron JS. The best channel! thank you

  • @subhamshaw1726
    @subhamshaw17262 жыл бұрын

    Thank u for this great video. Lot of useful stuff really needed it

  • @simpleshorts389
    @simpleshorts3892 жыл бұрын

    Powerful trick bro, awesome 👌😎👏🏿🙌💪

  • @jorgegomes83
    @jorgegomes833 жыл бұрын

    This is awesome!

  • @nocnoc146
    @nocnoc1462 жыл бұрын

    you are the gui king

  • @JenuelDev
    @JenuelDev3 жыл бұрын

    this is the best tutorial,, I have learned something

  • @enriquesalomon8197
    @enriquesalomon81973 жыл бұрын

    Is there a way I can make the app Electron JS examination App. That prevents users from opening any other window while the online examination process is going on.The user is allowed to access only the examination window?

  • @cozerlive5440
    @cozerlive54402 жыл бұрын

    so I'm getting this error: Uncaught error require is not defined so appearently you can't the browser can't require modules but node.js can do that which step did i miss?

  • @nebuladevelopments
    @nebuladevelopments2 жыл бұрын

    Hi there. Any ideas on how to fix the window not resizing? Been bugging me for ages, and can't find a fix anywhere.

  • @zuzzubaid2897
    @zuzzubaid2897 Жыл бұрын

    wow, sangat jelas. video yang ditampilkan. terimakasih banyak

  • @LuisVega777
    @LuisVega777 Жыл бұрын

    este tutorial vale oro

  • @elitetatsuya
    @elitetatsuya Жыл бұрын

    so you editing code for electron by using vscode made by electron

  • @Roommate6

    @Roommate6

    8 ай бұрын

    who was first electron or vscode?

  • @ukyo.studio

    @ukyo.studio

    5 ай бұрын

    @@Roommate6 vscode was made in electron

  • @Milkyway20239
    @Milkyway202392 жыл бұрын

    thank you so much ❤️

  • @ShaneAJM
    @ShaneAJM3 жыл бұрын

    Great content! Do you think you could make a video on how to do this with an already existing website? (Using LoadURL instead of loading files locally?)

  • @duyduy1707
    @duyduy17073 жыл бұрын

    thank you bro

  • @soyciro4623
    @soyciro46233 жыл бұрын

    Hey! Could you make a video explaining preload.js functionality? Tried to read the docs but it wasn't so clear for me. There's not enough info about it! Thanks for the content!

  • @KhaledBairamBikDaghstani
    @KhaledBairamBikDaghstani11 ай бұрын

    Thank's you so much!

  • @Ibrahim-oc5ql
    @Ibrahim-oc5ql2 жыл бұрын

    I have a job interview coming up soon that needs me to create a mock-up, I'll let you know what happens!

  • @user-oy1bb7tq5g
    @user-oy1bb7tq5g Жыл бұрын

    Hi. Great video! One question: Why "-webkit-app-region: drag;" is not showing to me when I type?

  • @paraxmaxter1738
    @paraxmaxter17382 жыл бұрын

    Quando vi a notificação em portugues pensei: "Algo de errado não está certo" kkkkk

  • @UzHandy
    @UzHandy2 жыл бұрын

    Please make a video about how you record this video. What tools, setup, apps, mic, recorders you use? Pls, include all of them.

  • @Chastr89
    @Chastr892 жыл бұрын

    Thank you for this wonderful video! Question though, how would I add content (i.e links) into the sidebar? (left menu one)

  • @richardprakash4630

    @richardprakash4630

    2 жыл бұрын

    I suppose it would be in the index.html file. It would be just like a regular web app (i,e using nav, ul and li elements). If you want to load different views on click of it. Consider adding routes just like a regular web application, as a end user it would not be visible but the web container keeps track of this and loads different views

  • @MelvinG24
    @MelvinG242 жыл бұрын

    Thank you very much! I have entered afternoon looking how can I do a customized window in electron!, Thank you very much again

  • @prajneshshetty6155
    @prajneshshetty61552 жыл бұрын

    Hi, great content, however is it possible to customize title bar with an existing webpage using LoadUrl

  • @mwbgeometrydashpcaccount6372
    @mwbgeometrydashpcaccount63722 жыл бұрын

    browser preview doesn't work for me just because i have so many extensions

  • @fredoscott2346
    @fredoscott2346 Жыл бұрын

    Setting contextIsolation to false is a security risk. So is setting nodeIntegration to true. If you're only loading local content, it's no problem, but if you load any remote content, you're asking for trouble.

  • @iHariPatel
    @iHariPatel2 жыл бұрын

    Works fine

  • @WandersonItsMe

    @WandersonItsMe

    2 жыл бұрын

    Glad to hear this technique is still working in 2022

  • @pazararabas411
    @pazararabas411 Жыл бұрын

    Thanks

  • @vivivijay1920
    @vivivijay19203 жыл бұрын

    Nice

  • @nevespt
    @nevespt2 жыл бұрын

    já tentei procurar bastante até em cursos pagos e nao encontro como deixar a area clara (do lado da barra lateral) a ser a app principal, ou seja a app principal a rodar toda na area clara e mantendo a barra de titulo e barra lateral sem carregar novamente

  • @oni9619

    @oni9619

    7 ай бұрын

    Estou me matando tentando encontrar uma forma de conseguir fazer isso haha. Já se passou 1 ano, vc desistiu ou conseguiu resolver? Como?

  • @priyankasubramanyam8412
    @priyankasubramanyam841210 ай бұрын

    The issue with this is that context isolation set to false is not a recommended approach.

  • @asaadelaissami
    @asaadelaissami3 жыл бұрын

    which do you think is better for desktop GUI, python + qt or electron.js?

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    Electron ++++, haha. Python is not very stable for Qt 😢, but with C++ is a good option. Electron have, Discord, VS Code, Skype, Atom and much more another moderns apps.

  • @asaadelaissami

    @asaadelaissami

    3 жыл бұрын

    @@WandersonItsMe ohh, What exactly do you mean, it's not very stable? don't you recommend python + qt (pyside + qwidgets or pyside + qml)?

  • 3 жыл бұрын

    Thank you so match my friend this help me a lot like and subscribe for you

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    Thank you very much 😀

  • @mujtabaaltayib7417
    @mujtabaaltayib74173 жыл бұрын

    Any video just to explain link between python and qt quick, pyside, to explain it more please because I couldn't go forward using python wit qt

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    See this videos(10, 11 and 12): kzread.info/dash/bejne/dIeBz5SYYqa1hJc.html kzread.info/dash/bejne/do2qtZamYpiTp7g.html

  • @mujtabaaltayib7417

    @mujtabaaltayib7417

    3 жыл бұрын

    @@WandersonItsMe I don't know how to thank you, your efforts are appreciated ❤️🌹🌹🌹

  • @vivivijay1920
    @vivivijay19203 жыл бұрын

    Nuce

  • @LostInAutism
    @LostInAutism Жыл бұрын

    So you explicitly go against the security recommendation of nodeIntegration: false and contextIsolation: true? God I wish there were something better....

  • @welly7973
    @welly79732 жыл бұрын

    tem versão em português?

  • @mastertmplayer
    @mastertmplayer2 жыл бұрын

    Como se tornou fluente em se comunicar em inglês? foi devido a algum curso ou foi sozinho?

  • @WandersonItsMe

    @WandersonItsMe

    2 жыл бұрын

    Fala Anderson, infelizmente eu não sou fluente ainda e preciso melhorar muito. Essa voz é de uma API da Microsoft do qual fiz um APP para traduzir os textos em voz. Meu inglês infeliz ainda precisa melhorar muito.

  • @mastertmplayer

    @mastertmplayer

    2 жыл бұрын

    @@WandersonItsMe que maneiro ficou isso, poderia fazer um conteúdo sobre isso, seria muito legal, possuo um canal que foco em gerar conteúdo também em inglês geralmente sobre HTML, CSS, JS, porém os vídeos tem apenas músicas de fundo pois não sei conversar em inglês ainda, isso me ajudaria bastante hahaha

  • @glowbunny8925
    @glowbunny89253 жыл бұрын

    Do you make the music by yourself? I all ways hear the tune. Good music tho

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    It wasn't me, it has the credits in the video description 😁

  • @retrom
    @retrom3 жыл бұрын

    Any plans on a python with react app tutorial?

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    Not at the moment, I haven't studied React yet

  • @sheez-5486
    @sheez-54863 жыл бұрын

    PLEASE, make these kind of cool videos in Qt Designer, i really want them, there is no one that makes videos about PyQt5 like yours, so please, make some...

  • @itsaname3986
    @itsaname39863 ай бұрын

    Still good in 2024

  • @MineCraftSitePL
    @MineCraftSitePL3 жыл бұрын

    Npm extension didn't make a "npm scripts" tab :

  • @nobody008eermac949

    @nobody008eermac949

    3 жыл бұрын

    you need to enable it by clicking on the three dots button next to explorer

  • @mvpmc69
    @mvpmc692 жыл бұрын

    great tutorial, but would be better without the music, i have my own playlist

  • @WandersonItsMe

    @WandersonItsMe

    2 жыл бұрын

    Ok

  • @RealmOfCode
    @RealmOfCode2 жыл бұрын

    Great, but if I already had configured my own menubar, then how do I maintain accessibility to it?? :-s No custom-titlebar tutorial explains this ;-(

  • @digitaltrade436
    @digitaltrade4363 жыл бұрын

    like

  • @DevSmite
    @DevSmite Жыл бұрын

    9:17

  • @jithind-feverx2818
    @jithind-feverx28182 жыл бұрын

    Machine voice?

  • @WandersonItsMe

    @WandersonItsMe

    2 жыл бұрын

    Microsoft Azure Text To Speech API

  • @jithind-feverx2818

    @jithind-feverx2818

    2 жыл бұрын

    @@WandersonItsMe👍

  • @ewtwetrwerwteet
    @ewtwetrwerwteet Жыл бұрын

    anyone else watch this and go F it, I'm shipping my product with the fugly default bar lol 😆

  • @alexander499zero
    @alexander499zeroАй бұрын

    Thank you. But make it free (:

  • @R3fuge
    @R3fuge2 жыл бұрын

    The audio is so incredibly tacky.

  • @WandersonItsMe

    @WandersonItsMe

    2 жыл бұрын

    💩

  • @philcartwright2309
    @philcartwright23093 жыл бұрын

    Your music is very very annoying... its just not needed

  • @WandersonItsMe

    @WandersonItsMe

    3 жыл бұрын

    Ok 😅🤣

  • @nicollasfelix26

    @nicollasfelix26

    2 жыл бұрын

    @@WandersonItsMe I love the song, surely pump me up to keep going, nice tutorial please mooore!!! Thanks so much. By the way I could not manage to get the side menu to appear, for some reason the BG collor only pops up when I put some content on it. Looking around to see if I can figure it ou, so far code is the same as yours.

  • @iHariPatel
    @iHariPatel2 жыл бұрын

    Nice

Келесі