WEBELO

WEBELO

71 devlogs
158h 57m
•  Ship certified
Created by YogyaChugh

HTML VISUALIZER AND DOM Library !!



Visualize your HTML easily and get information along with a fully fledged Document Object Model Library. (It is the one that implements .addEventListener of Javascript,etc.. at the core of browsers :)
Wait, What is it ??? It's a library with tons & tons of classes, alogrithms, enums, etc.. which are responsible for storing, accessing and manipulating the components of the web (like Head, Html, etc...).
You can use urself to create a web scraper, browser or just for parsing. It has got a lot of functions & classes ( It lays down the bench for u :) ). Documentation at docs (Click me)
Doesn't sound exciting right ?? But it's the most crucial part of a browser. I have worked tirelessly to create this library that stores the HTML when it's parsed and also handles events and what not !!
Ever used .addEventListener(). or .getElementById(). in Javascript ?? This is the library that implements it under the hood :)



So I present to you the core behind the giant ! I could have even build the browser with the parsers on top, but SOM is ending so :( (i'll add it after SOM, u can follow the project at Github (Click me)

Timeline

Ship 1

1 payout of shell 2319.0 shells

YogyaChugh

about 1 month ago

YogyaChugh Covers 71 devlogs and 158h 57m

Finally ! Last devlog ! Shipping it after vote. Updated the description !!
Done with the github release with both Windows & Linux.
I hope ur votes get me a mac pro :)

Update attachment
YogyaChugh YogyaChugh about 1 month ago

😢

itzmetanjim itzmetanjim about 1 month ago

i feel so bad for you not getting it

UltimateHobbyCoder UltimateHobbyCoder about 1 month ago

vote this project guys!

Toitsu Toitsu about 1 month ago

nice

YogyaChugh YogyaChugh about 1 month ago

haha ! really thx for supporting dude :)

Just voting rn, will ship in about an hour

itzmetanjim itzmetanjim about 1 month ago

how will I even scroll to the bottom to vote

itzmetanjim itzmetanjim about 1 month ago

oh god

Just completed with it !! It's crazy, I compiled for Windows & Linux and now going to release on Github.
Btw, I also added a browser run feature hehe :) I'll add more lib examples noww
Now let's hope for thee besttttt

Update attachment
UltimateHobbyCoder UltimateHobbyCoder about 1 month ago

vote this project!

It's crazy ! Just done with everything now. Compiled for windows, linux and now going to release on github !!
Btw, completed with 1 example for lib, will add more

Update attachment
UltimateHobbyCoder UltimateHobbyCoder about 1 month ago

vote this project!

There's a slight error in the pybind11 module i guess because it can't handle virtual overrides and therefore, i get errors when creating objects. But the visualizer works without it as well as the library is working independently !!
So hurray !!

Update attachment

I got scared crazy ! My bindings started getting errors but after a full moment of 30 minutes, they are all gone and bindings are compiled and running.
So, lemme just connect the dots and I guess it's complete !!
After this only 1 work left, writing the docs for the library & adding Note to check docs

Update attachment

Finally after more than 11,000 lines of code, the DOM library is complete as well as the HTML interface for C++ covers all attributes, contents, etc.. and also works easily with the Python binding.

Update attachment

Pajiiiii ! The UI is complete and I am connecting the backend. Creating elements, storing their attributes and connecting their babiess. Haha ! I mean a div inside a p or vice versa stored in treeeeeee.
So now I am writing the binding !!

Update attachment

It's so good looking ! Am i simping :)
Btw worked on this UI and got these 3 sections ! 1 code editor from the python site, the DOM tree and a section to display information when you click an element/tag.
Btw finally some UI :)
Next work, going to connect the backend to fetch more data !!

Update attachment

Finally some UI !!
Shoutout to https://thepythoncode.com/article/python-code-editor-using-tkinter-python which helped me get the code editor.
I also used a bit AI (It's less than 2% of the project, so i ain't marking the flag) for just some displaying tree queries.

Update attachment

Ok ! A new major update !!!
First, I wrote the rest of HTML element classes. Currently, I am not assigning them extra functionality because the root functionality for Node, Element, etc.. is what the main project is.
Secondly, I have tested with pybind11 to write bindings for python in C++ because I am not only providing the library for use as API (I'll add the docs on readthedocs ig) but also an HTML Visualizer.
At last, I am using BeautifulSoup and some tree displayers to visualize the HTML & CSS along with making use of the C++ classes for storing the elements.

Update attachment
Earned sticker

I wrote a lot of HTML element classes. Now I am gonna go sleep.
Btw I wrote input, head, html, anchor and what not !! Also, since it's one more day, I might add an extra GUI part for visualizing the DOM :)

Update attachment

The HTML elements come now !!
I hope I get something on the screeeeeen :)
Btw worked on HTMLElement, some other backend classes, etc....

Update attachment

Every single one of those errors killeeeed ! Wohoooooo.
I am literally dancing rn. It's working guyzzzzzzzz

Update attachment

Bugs for Document solved. Other errors in other files are all because of HTML and other dependencies, so I won't be able to solve them before the HTML Parser.

Update attachment
Earned sticker

AAAAAA ! Bugs messing with me. I couldn't add HTML so the dependencies are troubling me.
I hope they are done before final time.

Update attachment
YogyaChugh YogyaChugh about 2 months ago

Trying to get a better laptop ! 😊

itzmetanjim itzmetanjim about 2 months ago

you are working 24/7 bro

itzmetanjim itzmetanjim about 2 months ago

you are working 24/7 bro

I amma cry ! So many bugs solved.
The main issues include cross-dependencies & also a lot of base + derived class problems :)
So yeah, I am gonna mess up my life more and solve each and every error before shipping

Update attachment
YogyaChugh YogyaChugh about 2 months ago

Yes ! I am just solving these bugs :( ! There are so many dependency issues because I couldn’t add HTML so I am solving them.

Maybe 2 more hours !!

itzmetanjim itzmetanjim about 2 months ago

bro SOM is ending like today submit fast

Earned sticker

Solved bugs boi !
Tons of bugs, going to kill the rest and launch this as a DOM library since only 1 day is left.
Don't worry ! It's not a scam as this DOM is core part of browser and in 135 hours I built it only ! I am not building more because of time constraints so launching what I built !! (Changing the description)

Update attachment

Grinding going on !!

I have done work on insertnode, preinsert_node, etc.. algos which are crutial for the working of a browser.
Now, I guess i'll be done with the base where all websites are stored in about 2-3 hours :)

Update attachment
Earned sticker

So I did some mutation algo stuff but now I am pausing it. I am moving onto using some external html and css parsers.
There's some major changes in liu of the end of SOM. So my project is no longer pointing to a browser, but a visualizer to see how html and css perform inside a browser :)

Update attachment

Doing the last bits of my DOM work...
Working on the mutation algos :)

Update attachment
Earned sticker

Checking and solving more bugs ! Last three days and I am gonna try my best.
I know i can't complete this but atleast i can get the HTML parser 100% working...
This is an ambitious project and i'll complete this in 2025 for sure :)

Update attachment
Earned sticker

I did testing and solved bugs but forgot to devlog before...
Solving more on the go

Update attachment
Earned sticker

I am scared !! Written more than 5000 lines of code & still project is far from complete !!
Just 7 more days in SOM & i don't know what to do so that this fastens up. Why will people vote a backed ?? I need to do this asap so that frontend comes into play and people actually see what I did

Update attachment
YogyaChugh YogyaChugh about 2 months ago

I do but not the amount shown in the image. The VSCode intellisense is messed up & giving unnecessary errors

Debottam Debottam about 2 months ago

keep going
you do have a number of code problems

TreeWalker also done along with it's algos and methods,stuff , just a few more hours and i can focus my mind on HTML :)
BTW, my eyes can't bear more screening, going for a sleep !!

Update attachment

NodeIterator class is complete mostly, now I amma go for the TreeWalker :)

Update attachment

Completed with the Range class fully & now stepping my foot into the Traversal classes. Writing algos for Range was quite a head-ache, got my github commits pushed and now let's conquer the rest !!

Update attachment

Worked on the Range class and defined lots of algo functions for it !
It's quite lengthy so devlogging it in 2 portions.

Btw the fun has begun and I am feeling that DOM is about to be over !!!!!!!!

Update attachment

Just completed StaticRange & AbstractRange with their algos (check my github commits if u want more details) ! Let's conquer Range next !
Killing with the coding vibes rn !!

Update attachment
Earned sticker

Speed race, just completed with Comment, CDataSection, Text, ProcessingInstruction, etc... along with covering the algo's in their respective scopes :)
Less go complete this DOM today boi ! Just 9 days left

Update attachment

I am done for now, going to sleep so logging !! I did Attr class and wrote some algo !
Good night :)

Update attachment

Yo ! Element class complete except some small bits dependent on future. I put them in TODO ! So less go grind this DOM :)
I am actually scared whether I'll be able to complete this before SOM ends, let's try my best

Update attachment

Wrote a good amount of algos for the Element class !
Less go and grind this moreeeeeeeee

Update attachment

Finally a good grind after so many days !
Completed working on Document, ShadowRoot, DocumentType, DocumentFragment, etc.. and also chopped off some algos from the TODO list ! Gonna get this DOM done asap !
CRAVING FOR HTML PART :)

Update attachment
Earned sticker

Bugzzzzzzz ! Lots and lots of bugs, solved some and going to grind for more :)

Update attachment
Earned sticker

Didn't do much, just working on Document ! Logging to get stickerrrrrrrrr !!

Update attachment
Earned sticker

Worked on Document and even working now... I am just logging to get stickerssssssss

Update attachment
Earned sticker

Except for some bits which will be done after HTML, everything is done in Node class and now i will be focusing on Document at the fastest pace !!
Btw, a normalize method is troubling me, but i'll sort it out soonn ! Currently I will stash it in my TODO :)

Update attachment
YogyaChugh YogyaChugh about 2 months ago

Thanks, I am trying my best to complete it before SOM ends

itzmetanjim itzmetanjim about 2 months ago

thats so cool you are making your own browser from scratch

Earned sticker

Almost done with the Node class, just some bits left ! Will do it in some time !!
Btw, after declaring a lot of more stuff, this looks far more easy !!

Update attachment

Major portion of Node class is complete cause I had to do some changes and complete some stuff !!
Now, I will reach college and complete the checking of every method cause it's very big and errors are possible, alongside optimizing using const, and using reference wherever possible !!! :)

Update attachment

Locating namespace done boi !!
Conquering each algo one at a time !! Btw wohoooo 100 hours compelete :)

Update attachment

Wrote extra functions for ease such as checkancestor, checkdescendant, etc..
Also, got 90% done with the compareDocument one !
This per function is taking long.... i need to get this DOM done asap else I won't be able to complete browser before SOM

Update attachment

After so long, I checked off something off the TODO list rather than adding to it !!
So nodequals algo is complete (previous devlog didn't cover it's full version).
So let's go conquer the next stuff

Update attachment
Earned sticker

How does this nodequals sound to u ?? Logging to get my sticker locked in !!

Update attachment

The normalize and cloneNode functions sucked all the energy from me & they still ain't complete !
Let's conquer them boi !!

Update attachment
Earned sticker

Wohoo ! It synced idk how but my hours are somehow back ! So logging it, I worked on Node class, also making it abstract and improvising it's methods !!

Update attachment

I re-targeted the mixin classes because they lacked optimization and also parentNode was a bit incomplete.
Now moving onto writing the algos that I skipped for Node, Document, etc...

Update attachment

Completed working on Mixin classes ! ChildNode, ParentNode, Slottables, etc..
Now going to sleep, will complete this DOM tmrw ! I am done with this, i expected this to take max 30 hours but this has gone 93 and counting..
I'll try to wrap this up fast ( longer cause it's the foundation ), and move to HTML parser and release 1st ship ! But if we get time, we can go for CSS tooooooo

Update attachment
Earned sticker

Couldn't find a non-recursive good implementation of pre-order DFS that actually suited my project ! So wrote one myself :)

Update attachment
Earned sticker

Now going furious code mode ! 12 hour straight grind :)
What i did in this 24 mins ? I worked on the standard and got some mixin work to do. Mixin means 2-3 classes sharing some methods, attrs, etc..
Did some of it, now next one is a bigggggg task as almost 80% of DOM will be complete in the next 12 hours

Update attachment

This project ain't easy ! I spent time with mutation algos but then I felt it's incomplete so I went to code the next part and now that feels incomplete !!

I don't know ! My code efficiency is so low rn. I once did more than 10-12 hours in a day but now It's so less. Hope I get to track again :)

Update attachment

Wrote some mutation algo's for pre-insert validation, insertion, etc..
Will go forward with more algos after a short break.

Update attachment

Got this delayed due to #code-quest ysws !
Btw completed AbortSignal, Controller & stuff. Now moving on to the conceptual part in the DOM standard along with getting DOM done before i hit the 24 hour clock.
Btw, 2 bad stuff:
1) I am inconsistent, which I won't be now
2) There is nothing to show except code lines, so I am gonna fasten this up so I reach UI part asap

Update attachment

YO ! I did not think it would take that long but I have completed, verified & am done with EventTargets and so many algos of it. Firing events, dispatching them, invoking them, and what not !!
AbortSignal & AbortController are left which I'll do tmrw in bus. Only 2.5 hours left for me to sleep. Byeee

Update attachment

I changed some functions, set all small functions to be inline. Also, specifically worked on docs for Event, CustomEvent classes defining each attribute & method.
Now let's do the same for EventTarget, AbortSignal, AbortController, etc..
Next devlog will come after they all are done, checked & well-documented.

Update attachment

I have done quite a bit here ! Like removing unnecessary overhead from the unique_ptr usage.
Also, worked on optimization like removing EventInit struct & using values directly, using references rather than copying stuff on function calls, decreased usage of std::optional keywords.
Did some organization too btw !!

Update attachment

I have setup license and spent time checking the events class along with testing some stuff ! I was quite confused whether i should use smart pointers or go with raw pointers and that led me to some research and yup here i am ! Next i'll just go through every part of the DOM specification, complete what isn't done and check alongside with comments !
Crazy grind starts now ! I am done with this taking so long and will now work furiously.
Reason for delayed devlog : I had guests at home so 5 days I barely did any coding so spent time on research !! Btw drone on the shop is crazyyyyy

Update attachment

Reading the Events section now ! Bugs have been resolved & all unicode characters are now perfectly handled thanks to iterators & utfcpp library !
Also added comments to the algos to make my life easier !

Update attachment

Just fixed it all & also a bug I accidently stepped on !
Normally, whitespace is just the space character but when we talk officially, it includes the TAB space, LineFeed , FF, CrossFeed and the normal space ! So I needed to detect the others as well while coding the ParseOrderedSet func.

Update attachment

I am frustated !
Yes I am !! I spent this time trying to change some functions according to the u32string in c++ so that my internal browser is compatible with all languages ! But realized that it can't be effectively printed or even doing operations is one hell of a job.
After draining almost all my energy, I came across this library named utf8.h which saved me & because it got a lot of functions and stuff to handle unicode characters as well !
What was the problem ?? A unicode character like 𖹾 takes 4 bytes and when we store it in a string, c++ will consider it 4 different characters and in for loops or printing, the original character get's lost ! Also the length of this string is 4 not 1.
That's when utf8 library comes & saves with it's functions & stuff for length, iteration, next, back and what not !!
And now I am moving to implement it in my algos.cpp

Update attachment

Wrote some algos for validating names for attributes, element, namespace prefix, doctype names, etc.. Now I can peacefully move on to the next Events section.
I wrote some code for events in the past, let's optimize it a bit & continue grinding algos :)

Update attachment

Completed text, CharacterData and what not ! I NEED SOME UI BUT CAN'T :)
So moving onto the algorithms part ! Basically, I wrote lots of classes and I skipped some of the common functionalities listed separate in the documentation so that I can write all functions together in alogs.cpp !
Btw, I am confused whether I should write my own set implementation cause the <set> library provides ascending/descending order and not the order in which items came ! Let's see

Update attachment

Completed working on DocumentFragments, Types, DOMImplementation and even Elements !
Moving onto the rest, Text, CharacterData, Comments (yes these are what we write in html) !!
Let's write their cpp code now :)

Update attachment

Amazing fact I found !!
While writing the DOM implementation i found the piece of code responsible for displaying an html page even when we don't add <html>, <head>,<title>, <body> tags.
It automatically adds them internally and that happens cause of this function :)

Update attachment

Just Completed the Document class & now moving to the rest.
Seriously, my brain is not braining ! This project being pure backend for a loooong time is tiring me out but let's do it :)
And, sorry ! I have just lines of code to show

Update attachment

After a long time on other projects, I am back.
Just completed major portion of the Node class & now focusing on Document class.
Btw, I have changed my approach and set all algos in a separate file in-order to reduce TODO tasks.
Also, I reorganized the files for better structure :)

Update attachment

TOOO MUCH BACKEND !
I hope getting on frontend soon ! Going again through the roots and diving into NodeList, HTMLCollection and Nodes in particular again.

Update attachment

Just updating my 10 hours (approx.) !<br>

Alterations in AbortSignal and AbortController along with some more stuff implemented !<br>
Completing my goals ! #ENDING-BACKLOGS

Update attachment

Yes ! Yes ! Yes!
After a whole eternity, I have fixed the bugs. Finally, updated the structure of the DOM part of the project and completed the bug fixes.
Couldn't complete the set goal but set to achieve it now.

Update attachment

Declared Important Classes & Structs

Just Finished declaring important stuff like events, document, ranges, nodes, elements, etc... Had to read lengthy amounts of DOM specification !

Now, I will be targeting each one by one and define each properly.
>Next Target: Completing DOM Implementation by day after tomorrow, max !

Update attachment

Read & Implemented some parts of the Events in DOM !

Just for example, we do .addEventListener() in JS, it's basically a function of the Document Object Model and that's what I researched about and worked a bit today.

So, what happens is that there is a text, image, etc.. and everything is an EventTarget which has a list of event listeners which we add using .addEventListener() in JS. Also, there is an Event which it waits to happen.

Logging off for today but tomorrow full heavy grind to get this Event as well as some Node( Everything like image, text, video, etc.. is a Node) parts complete !

Update attachment

Initiated the project starting from the basics of the web ! #DOM

DOM (Document Object Model) is a tree data structure which stores the HTML when it is processed (parsed) by your browser (Chrome, Brave, etc..) ! It follows some guidelines as mentioned at https://dom.spec.whatwg.org/ !

Following the DOM STANDARD, I have created Event class with its functionalities and worked on Nodes too !
As in the image shown, the HTML is parsed/processed to look like the tree !
You can check it out for your code at https://bioub.github.io/dom-visualizer/ ! It's not mine, just for representing how it will look after DOM part is complete.

Update attachment