+
Skip to content
View dckimGUY's full-sized avatar
🇨🇦
Working on the Visualizations System
🇨🇦
Working on the Visualizations System

Block or report dckimGUY

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don't include any personal information such as legal names or email addresses. Markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
dckimGUY/README.md

dckimMysteryAuthor Profile Picture

dckimGUY

dckimGUY Profile Picture

https://dckim.com

Six stars in a horizontal break line pattern

Is Now The Time to Learn 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, and it proves how hardcore Markdown can really be.

j_hbl.png

Here we go! Spicing it up with Markdown!

Is it okay if I use custom break-lines? 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 work in Markdown. There isn't much that Markdown doesn't cover. Then, I could come along for the second pass through the 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.

How has my 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/JavaScript/CSS...

First, about a year ago, I was working hard at learning to write using 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 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. 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, I was writing all of the styling inside of the 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 still renders pretty quickly as long as you put all of the styles inside of the HTML. Blazing-fast, even if you have tonnes of 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

At the same time that I was learning HTML, I was also learning to use both BASH and VI. Yes those 'ancient-computer-technologies'. Strange how they are both completely relevant even after such a long time. Nothing has really exceeded BASH, and no text editor has exceeded VI. Those are simply the best available development software.

BASH and VI fit together like a pair of gloves. Even so as it's tough to start working with VI 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, and having all of those advantages available, I soon learned to wrangle HTML with brute force, and press out HTML with the help of 'regular expressions'.

At first, I learned only enough JavaScript to copy one HTML element's innerHTML to another one.

This might seem like a silly thing to do in the first place. "Why don't you just use variables 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 more thoughtful consideration might be that, no matter how much 'program languaging' anyone does, all of it is reducible to a 'Turing-Machine' anyhow. So, having fewer parts was, at that time, easier for my early learning. It kept the 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, and very littleJavaScript. And all of the CSS was inside of the 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. What is very interesting is what marvelous things were possible with only the littlest bit of 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.

I used that quirky little program, which was some-how, some-way, in the order of five megabytes. It could translate things directly using the browser, and then save the translated text. I could translate my entire website into 125 different languages! So, I set up the program around that premise! That way I could have the search engines indexing 125 times the content! I just had to submit each page as a request...

That was the start of my programming journey... but it continued right on from there.

I didn't give up on 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. I knew that HTML was the right stuff for me... after all it's universal isn't it?

You might even call HTML/JavaScript/CSS the Lingua-Franca of the programming world.

Every programmer learns it at some point but, more importantly, every computer has a browser that knows it completely. Every browser needs it and basically the 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, JavaScript, and CSS. Those are what is really driving the internet. This is because of the simple nature of communication: To communicate effectively, we need to be speaking in the same language. Interpretation sets up only misunderstanding and inefficiency.

Two Stars connected by a thin line

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 professor. The first job of programming in HTML, JavaScript and CSS should be to tackle the big problem of facilitating the building of the graphical interface. The graphical 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, you then can program easily.

Before completing such a program, HTML is difficult and takes a long time to work through. After completing the program, 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, and the program concepts. There is no more 'wrestling with the HTML'.

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, and a lot less HTML.

Needless to say, I started trying to put my CSS into the right place, at the top of the file. The job of this new program was to make up 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, a rather brilliant feat.

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 environment. All of the code the program produced was giving the 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 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 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 project, and finish off my HTML career for good.

I was intending to never struggle with HTML again. I needed a 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

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

If you can quickly draw up batches of 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 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, 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 that I couldn't place a single additional piece of 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

Object mode was just beginning to show through. The path forward was beginning to become clearer. '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 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.

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, 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

This is the advantage of writing a program which seeks to unlock the world of 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 Carpenter and that I live in East Gwillimbury, Ontario.

o_hbl.png

Building a computer program is a lot like 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

Six Stars Across Breakline

Pinned Loading

  1. HW-HTML-Drafting-Project HW-HTML-Drafting-Project Public

    Keyboard like VI. Drag Images In. Work in the browser, completely offline. Open-source forever. HTML is suddenly easy, and coding is fun again. Maybe you should start your own website!

    JavaScript 5

  2. dckimGUY dckimGUY Public

    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. Wh…

    1

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载