Well shoot. Obviously not right. From here on I’ll walk you through my little journey in building a code editor using Node.js Electron, Html and CSS. It was shockingly fun.
Working with Electron
Getting Started from stratch
Well first step was to learn about this electron. So enter Udemy and an really clear course by Ray Viljoen. Really if all the videos including mine were so well thought out and clear learning anything new on the internet would be so much easier. That was step one.
No To Do list Apps Here
Its only at the end that I realized that I didn’t build a to do list but opted for a full fledge application. Really this is not why I’m learning electron for I have another use for it but I built a code editor. Its a good enough start the next one should be much better.
Building the code editor
See this really was the fun part now I get to add everything I believe PHP storm is missing or I’m to lazy to see if a plugin can assist. Failure was the result. PHP Storm is way too good – that intellisense is missed – but what I managed was a nice middle ground in between Notepad++ and and Full fledge IDE like PHPStorm. The start up time is quick and you can review you files like a project. Open a new folder and you have a new project.
Coding and Structure
This section should be empty. There is none. Well there is a lot of code and an attempt at structure. Really this is the second hardest part of building anything new. How do you structure the project. Well for now I have an huge file with a lot of global variables and a few helpful files to take the load off. Not bad for a start the next project should be better. I’m almost ashamed to show this on GitHub. Almost.
Cool Neat Features
Well what did I add. Snippets. I’m still undecided at how to deal with snippets in real life and there are so much options out there but snippets was added because why not.
You can then edit your snippets and even view them in a new window.
I added some other cool features like tasks and of course we had to embed wftutorials tutorials. Right at your figure tips. (Because that’s what everyone wants. lol)
More Cool Features
Some more neat features
I am personally a fan of the side view but the verdict is still out on its usefulness.
You also have some basic snippets for languages you may use. Reason is I have often wanted to know the how to do something in a different language. Once you have used it in another language you just want how to accomplish it in the one you are currently using. The embedded snippets should make that transition smoother.
Want to see in action
I recently did a tutorial to highlight some of how it works in real life. It was still going through a bit of testing then so had some bugs but you can still see or get and idea of how it works. Check out the video below.