Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/dckimguy/dckimguy

Striving to code the best HTML Drafting Program anyone ever saw. It needs to be made for the user, with no ads, and no sign-ups. Total independence, totally offline. Open-source, in the browser. Why am I working on this project? Keep reading, and I will explain why I am so passionate about writing this program...
https://github.com/dckimguy/dckimguy

black-and-white blender css fontforge gif-animation gitbash html in-browser inkscape javascript motif mspaint offline

Last synced: 3 months ago
JSON representation

Striving to code the best HTML Drafting Program anyone ever saw. It needs to be made for the user, with no ads, and no sign-ups. Total independence, totally offline. Open-source, in the browser. Why am I working on this project? Keep reading, and I will explain why I am so passionate about writing this program...

Awesome Lists containing this project

README 

          
[![dckimMysteryAuthor Profile Picture](./a_images/q_profileLogo.png)](https://dckim.com/HW_project_online.html)



# dckimGUY



[![dckimGUY Profile Picture](./a_images/r_matchingBreakline.png)](https://dckim.com/HW_project_online.html)



[https://dckim.com](https://dckim.com)



![Six stars in a horizontal break line pattern](./a_images/a_hbl.png)



## Is Now The Time to Learn [Markdown](https://en.m.wikipedia.org/wiki/Markdown)?



It's so minimal, I guess it's impossible not to learn and use it. What's really good about it is that it is fast, and it visually represents what the page will look like when it is rendered, so there's no real purpose in having a preview. Then again, I recently downloaded a marvelous program called [ZETTLR](https://www.zettlr.com), and it proves how hardcore [Markdown](https://www.markdownguide.org) can really be.



![j_hbl.png](./a_images/j_hbl.png)



## Here we go! Spicing it up with [Markdown](https://github.com/adam-p/markdown-here/wiki/markdown)!



Is it okay if I use custom break-lines? [Black and white](https://en.m/wikipedia.org/wiki/Black_and_white) is always fast right? OKAY!



I am starting to think that it might be good to do almost all of my inline [HTML](https://en.m.wikipedia.org/wiki/HTML) work in [Markdown](https://en.m.wikipedia.org/wiki/Markdown). There isn't much that [Markdown](https://en.m.wikipedia.org/wiki/Markdown) doesn't cover. Then, I could come along for the second pass through the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) after it's converted. Is that the strategy generally?



I should try to keep on topic, this README.md is supposed to be used as my 'User-Profile' page. I am supposed to tell about myself, right?



![A breakline with a line through a star in the centre.](./a_images/e_hbl.png)



## How has my [computer programming](https://en.m.wikipedia.org/wiki/Computer_programming) journey been going so far?



That's a really good question: "Where did I start and what have I worked through?"



I have been busy working away at [HTML](https://en.m.wikipedia.org/wiki/HTML)/[JavaScript](https://en.m.wikipedia.org/wiki/JavaScript)/[CSS](https://en.m.wikipedia.org/wiki/CSS)...



First, about a year ago, I was working hard at learning to write using [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML). I had no idea what I was doing but, the syntax seemed simple enough. You just plunk down some angly-bracket looking things like this '<' or this '>' and then the [HTML](https://en.m.wikipedia.org/wiki/HTML) kinda magically appears in the browser if you end the file name '.html', right? Seems easy... Turns out it's not easy at all. It's a mess of non-sense looking code that you can barely tell where the things your are writing will end up. The only part that really makes sense to me from it is the 'in-line' semantic type of [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML). That's the stuff that decides what is a separate paragraph, where bold text is, the normal writing type of stuff.



When I first started out with [HTML](https://en.m.wikipedia.org/wiki/HTML), I was writing all of the styling inside of the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element using the 'style="' type of stuff. I didn't really understand how 'classes' worked, or why I should use them. As it turns out, if you are doing everything wrong, the [HTML](https://en.m.wikipedia.org/wiki/HTML) still renders pretty quickly as long as you put all of the styles inside of the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML). Blazing-fast, even if you have tonnes of [HTML](https://en.m.wikipedia.org/wiki/HTML) in there. For various reasons it makes absolutely no sense to write it that way... but my secret weapon was helping me to do it the bad way.



![m_hbl.png](./a_images/m_hbl.png)



At the same time that I was learning [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), I was also learning to use both [BASH](https://en.m.wikipedia.org/wiki/Bash_(Unix_shell)) and [VI](https://en.m.wikipedia.org/wiki/Vi_(text_editor)). Yes those '[ancient-computer-technologies](https://en.m.wikipedia.org/wiki/Antikythera_mechanism)'. Strange how they are both completely relevant even after such a long time. Nothing has really exceeded [BASH](https://en.m.wikipedia.org/wiki/Bash_(Unix_shell)), and no [text editor](https://en.m.wikipedia.org/wiki/Text_editor) has exceeded [VI](https://en.m.wikipedia.org/wiki/Vi_(text_editor)). Those are simply the best available [development software](https://en.m.wikipedia.org/wiki/Software_development).



[BASH](https://en.m.wikipedia.org/wiki/Bash_(Unix_shell)) and [VI](https://en.m.wikipedia.org/wiki/Vi_(text_editor)) fit together like a pair of gloves. Even so as it's tough to start working with [VI](https://en.m.wikipedia.org/wiki/Vi_(text_editor)) in the beginning. For me, it wasn't so bad, because I was learning typing also at the same time, and I was horribly out of practice.



After using [VI](https://en.m.wikipedia.org/wiki/Vi_(text_editor)), and having all of those advantages available, I soon learned to wrangle [HTML](https://en.m.wikipedia.org/wiki/HTML) with [brute force](https://en.m.wikipedia.org/wiki/Proof_by_exhaustion), and press out [HTML](https://en.m.wikipedia.org/wiki/HTML) with the help of '[regular expressions](https://en.m.wikipedia.org/wiki/Regular_expression)'.



## At first, I learned only enough [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) to copy one [HTML](https://en.m.wikipedia.org/wiki/HTML) element's [innerHTML](https://en.m.wikipedia.org/wiki/Document_Object_Model) to another one.



This might seem like a silly thing to do in the first place. "Why don't you just use [variables](https://en.m.wikipedia.org/wiki/Variable_(computer_science)) and things like that?"



I simply did not know about those things yet, and I am a very stubborn person, who only wanted to work through it with what I already knew about. My strategy was to 'avoid learning'. I can only work through so many things at once in my mind so, I thought it was better to work through each problem gradually, and only incorporate new concepts if absolutely necessary. This might seem dumb and ignorant and unnecessary. That is a reasoned assessment: True.



![g_hbl.png](./a_images/g_hbl.png)



A more thoughtful consideration might be that, no matter how much 'program languaging' anyone does, all of it is reducible to a '[Turing-Machine](https://en.m.wikipedia.org/wiki/Turing_machine)' anyhow. So, having fewer parts was, at that time, easier for my early learning. It kept the [learning curve](https://en.m.wikipedia.org/wiki/Learning_curve) from becoming prohibitively steep. My strategy, which continues today, is to bring in additional concepts gradually. That way I can try to make sure that I have a solid grasp of the most foundational ones before mixing in more concepts that might confuse what I have learned earlier.



## It gives me a very solid approach to learning.



I proceeded very slowly at first, while striving to complete what seemed like a difficult project. It all started with a program that was written mostly with [HTML](https://en.m.wikipedia.org/wiki/HTML), and very little[JavaScript](https://en.m.wikipedia.org/wiki/JavaScript). And all of the [CSS](https://en.m.wikipedia.org/wiki/CSS) was inside of the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements. Weird... I know. My perspective today has me wondering: "What was I thinking back then?"



I know, looking back, that I could not have possibly learned all of what I know now without following a carefully laid path.



A program that does everything that I could imagine! Yes, it was ambitious for me at that point, seeing as I knew very little of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript). What is very interesting is what marvelous things were possible with only the littlest bit of [JavaScript](https://en.m.wikipedia.org/wiki/JavaScript). An organizational multi-tool program. Twenty-five tabs total, five tabs per row. It worked right on my phone...



![A star on the left and then some lines coming across to the right.](./a_images/b_hbl.png)



I used that quirky little program, which was some-how, some-way, in the order of five [megabytes](https://en.m.wikipedia.org/wiki/Megabyte). It could translate things directly using the [browser](https://en.m.wikipedia.org/wiki/Web_browser), and then save the translated text. I could translate my entire [website](https://en.m.wikipedia.org/wiki/Website) into 125 different languages! So, I set up the program around that premise! That way I could have the [search engines indexing](https://en.m.wikipedia.org/wiki/Search_engine_indexing) 125 times the content! I just had to submit each page as a request...



## That was the start of my [programming](https://en.m.wikipedia.org/wiki/Computer_programming) journey... but it continued right on from there.



I didn't give up on [programming](https://en.m.wikipedia.org/wiki/Computer_programming), I just kept right on working at it, and by the fall I started into some other small projects. You know, just some little stuff that you could use  on your phone. Whatever tiny programs could work in the [browser](https://en.m.wikipedia.org/wiki/Web_browser). I knew that [HTML](https://en.m.wikipedia.org/wiki/HTML) was the right stuff for me... after all it's universal isn't it?



## You might even call [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)/[JavaScript](https://en.m.wikipedia.org/wiki/JavaScript)/[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) the [Lingua-Franca](https://en.m.wikipedia.org/wiki/Lingua_franca) of the [programming](https://en.m.wikipedia.org/wiki/Programming_language) world.



Every [programmer](https://en.m.wikipedia.org/wiki/Programmer) learns it at some point but, more importantly, every [computer](https://en.m.wikipedia.org/wiki/Computer) has a [browser](https://en.m.wikipedia.org/wiki/Web_browser) that knows it completely. Every [browser](https://en.m.wikipedia.org/wiki/Web_browser) needs it and basically the [world-wide-web](https://en.m.wikipedia.org/wiki/World_Wide_Web) can't function without it.



The wires in the ground, and the 'rays' streaming through the air, are somehow not nearly as important as [HTML](https://en.m.wikipedia.org/wiki/HTML), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and [CSS](https://en.m.wikipedia.org/wiki/CSS). Those are what is really driving the [internet](https://en.m.wikipedia.org/wiki/Internet). This is because of the simple nature of [communication](https://en.m.wikipedia.org/wiki/Communication): To [communicate](https://en.m.wikipedia.org/wiki/Communication) effectively, we need to be speaking in the same language. [Interpretation](https://en.m.wikipedia.org/wiki/Interpretation) sets up only misunderstanding and inefficiency.



![Two Stars connected by a thin line](./a_images/d_hbl.png)



Then suddenly, I felt the need to start working on a completely different type of project, and I remembered the wise words I had heard in a lecture hall from a [computer science](https://en.m.wikipedia.org/wiki/Computer_science) professor. The first job of programming in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [JavaScript](https://en.m.wikipedia.org/wiki/JavaScript) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) should be to tackle the big problem of facilitating the building of the [graphical interface](https://en.m.wikipedia.org/wiki/Graphical_user_interface). The [graphical interface](https://en.m.wikipedia.org/wiki/Graphical_user_interface), as he pointed out, was clearly one of the greatest components of any program. Once you have programmed a means of completing the [graphical interface](https://en.m.wikipedia.org/wiki/Graphical_user_interface), you then can program easily.



Before completing such a program, [HTML](https://en.m.wikipedia.org/wiki/HTML) is difficult and takes a long time to work through. After completing the program, [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) is easy to draw and seems simple and you wonder why it was so difficult before. Then, there is more time to work on the [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and the program concepts. There is no more 'wrestling with the [HTML](https://en.m.wikipedia.org/wiki/HTML)'.



![n_hbl.png](./a_images/n_hbl.png)



I have followed those wise words all the way along on a very good learning path.



## So, I started writing a program that used a little more [JavaScript](https://en.m.wikipedia.org/wiki/JavaScript), and a lot less [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML).



Needless to say, I started trying to put my [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) into the right place, at the top of the file. The job of this new program was to make up [HTML](https://en.m.wikipedia.org/wiki/HTML) like a 'cookie-cutter', and to shorten the *spiel* on this one: It also cut up an image and matched the parts to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), a rather brilliant feat.



![i_hbl.png](./a_images/i_hbl.png)



At that time, it felt like a real accomplishment for me. Just think that you can finally be able to bring graphical elements easily and seamlessly into the [HTML](https://en.m.wikipedia.org/wiki/HTML) environment. All of the code the program produced was giving the [CSS](https://en.m.wikipedia.org/wiki/CSS) in absolute positions. The images all fit exactly together. You could take the initial reference image and then use it as a template/model for your [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) image-grand-layout. I drew up a whole production around this program and it's major idea. If you just think about what that little program can do, and then you apply yourself creatively and also use [BASH](https://en.m.wikipedia.org/wiki/Bash_(Unix_shell)) to make up some 'two-frame-animations', you suddenly have a website that looks very interesting and active. Then I figured out how to add some buttons and audio. Voila! You have a real production happening!



## Then I started writing up the next logical program based on everything I could understand.



Everything I knew about computer programming, and everything that I had learned and built towards was finally starting to look a lot brighter! So, the next thing that I needed to do was? You guessed it: Another project. Only this time it was going to be different. It needed to tackle the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) project, and finish off my [HTML](https://en.m.wikipedia.org/wiki/HTML) career for good.



I was intending to never struggle with [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) again. I needed a [programming](https://en.m.wikipedia.org/wiki/Programming) solution. I needed to draw from all of the experiences I had gone through with writing computer code.



![Three stars across connected with a line](./a_images/c_hbl.png)



## So, that's when I finally started working on the HW Project!



The first go at this project actually didn't look anything like the 'object-mode' style program that became this final product. It was very different: It was a concept all it's own...



The concept was simple, you would have two letters, 'h' and 'w', and then numbers in between. The first job of the program would be to take a very simple 'hw' syntax, and then break it up, throwing away anything that was garbage, and then rendering the rest out as [HTML](https://en.m.wikipedia.org/wiki/HTML) rectangles. Was it even possible?...



## As it turns out, it was entirely possible, and 'HW' was here to stay.



Even today, after completing this latest program, I still look back at that older model and I see potential.



![l_hbl.png](./a_images/l_hbl.png)



If you can quickly draw up batches of [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) parts in nice rows, in a simple syntax, which is lightweight, and very minimal... that changes the game completely. Why would I ever write it 'manually' after seeing that? 'HW' was special, it used what is known as an 'engine' but, that's not really as complicated as it sounds. All the engine does is convert the 'h2w4w6w8' into the finished [HTML](https://en.m.wikipedia.org/wiki/HTML) which essentially describes rectangles. Really, I am still sure that the program I produced was brilliant. That is when I finally started using 'local storage', which I had never used before. I used it so much, I'm pretty sure I was using it to a completely unnecessary degree.



I worked on that original 'HW' program for a couple of months straight, in double shifts, sleeping every second day. I needed to learn [JavaScript](https://en.m.wikipedia.org/wiki/JavaScript), even if I had to force myself to sit in front of the computer screen until I was suffering from both 'eye-strain' and 'carple-tunnel' simultaneously.



## It wasn't long until the program was so loaded with [HTML](https://en.m.wikipedia.org/wiki/HTML) that I couldn't place a single additional piece of [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) into the code without producing an unexplainable 'fatal' error.



That's when I knew I had to scrap it and start fresh.



![j_hbl.png](./a_images/j_hbl.png)



[Object mode](https://en.m/wikibooks.org/wiki/Belnder_3D:_HotKeys/3D_View/Object_Mode) was just beginning to show through. The path forward was beginning to become clearer. '[Object-mode](https://en.m/wikibooks.org/wiki/Belnder_3D:_HotKeys/3D_View/Object_Mode)': That was the only way.



Don't get me wrong, textual entry was great. The original 'HW' program can be operated almost entirely from the number-pad. Dot and dash take the place of 'h' and 'w' in the syntax, and in that program, I was handling all of the key input through textareas. That needed to advance into a better system. *I needed to use event delegation, too many handlers actually made the program run slowly.* Even so, the program turned out great, and demonstrates how you could do absolutely everything wrong, and still somehow succeed.



## [Object-Mode](https://en.m/wikibooks.org/wiki/Belnder_3D:_HotKeys/3D_View/Object_Mode) became the new goal.



That's where this final project became the new cause. I needed to bring together all of the things that I had tried on all of those previous projects and put the best of it forward into the concepts that shaped this latest work.



I needed a program that was completely in an 'Object-Oriented-Visual-Mode'. Yep, basically like every other drafting program you have ever seen, only this time, *It Would Be For [HTML](https://en.m.wikipedia.org/wiki/HTML).*



![n_hbl.png](./a_images/n_hbl.png)



This little project has become the centre of my world. From the earliest stages of the development of this project I have always found myself willing to experiment with possibilities and outcomes. This project is exceptional and unique because it has been almost exclusively comprised of computer code that interacts directly with the user.



There are so many different types of [computer programming](https://en.m/wikipedia.org/wiki/Computer_programming), and most of the programming work that happens is never actually seen by the end user. The programs, which are the most vital, they are actually 'running-code' behind the scenes and the user never 'sees' any of it.



![p_hbl.png](./a_images/p_hbl.png)



This is the advantage of writing a program which seeks to unlock the world of [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) Drafting: The code-work is almost always visual. So, the debugging process is also almost completely visual too. *(at the start)*



It's like the cake has already been baked up nice and fluffy by the bakers, and I'm the guy who gets to come in and do all of the sugary icing work for the delicious cake. If you have seen the program, you will know that I have been using three colours for this fabulous icing-sugar.



To tell a little more about myself, without revealing my 'true-identity': I can tell you that I am a [Red-Seal](https://en.m.wikipedia.org/wiki/Red_seal_Program) [Carpenter](https://en.m.wikipedia.org/wiki/Carpentry) and that I live in [East Gwillimbury](https://en.m.wikipedia.org/wiki/East_Gwillimbury), [Ontario](https://en.m.wikipedia.org/wiki/Ontario).



![o_hbl.png](./a_images/o_hbl.png)



Building a computer program is a lot like [carpentry](https://en.m.wikipedia.org/wiki/Carpentry) work. Everything relies completely on the foundation. Selecting the foundational structure has the effect of completely determining what can be built upon those footings. If we think carefully, we start taking the view that everything is 'like-a-foundation' in the sense that it has the potential to restrict or allow certain outcomes 'down-the-line'.



Finally, there is a consideration of combination of foundational elements: Through this we see the 'big-picture', and uncover what we were designing all along.



Now I will 'cut-it-short' and get back to 'hammering-down' some more code!



- dckimGUY



[DCKIM.com](https://dckim.com/)



![Six Stars Across Breakline](./a_images/a_hbl.png)