Please sign in to access this page

WEBELO

WEBELO

50 devlogs
124h 41m
Created by YogyaChugh

Browser ! Yup a fully fledged browser like Chrome, FireFox, etc..
I am building it from scratch building the DOM, HTML Parser, CSS Parser, rendering engine & what not !!
It follows a lot of standards & is meant to completely abide by browser rules.

What are you waiting for ? Try it out (when complete :) )
Btw, there is a special feature I will be adding after the above goals are complete:
Customizing ability: What ? It means you can merge websites freely for ur local computer like taking a video component out of a website and merging it with a note-taking website to create ur own local website. And what's more amazing, the components still work as usual !
It's an idea & i'll implement it !!

Repository

Timeline

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 4 days ago

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

Debottam Debottam 4 days 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 9 days ago

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

itzmetanjim itzmetanjim 9 days 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