dumindaxsb

Hi Azaan,

This is brilliantly done. You have a bright future ahead.

A few suggestions:

1. You could add anonymous(but verified) tutor ratings. This will enable children to find better tutors while tutors are encouraged to perform better to increase their ratings.

2. I think it's more user-friendly if you open internal pages within the same tab (e.g. the open section opened a new tab).

3. Also, I could think of many revenue models. Example: Commission on tuition fees (better to do once you're established), Premium accounts for tutors to host learning materials, On-Demand tuition classes, private sessions, etc.

Again, really well done. I wish you all the best!

Cheers!

This is a cool project somebee. Interested to explore more.

On benchmarking: I went through the same concerns and ended up building a little benchmarking tool for a simple reactive UI library I'm working on. It's not super user-friendly yet but doing a good job of profiling tasks.

You can write custom benchmarks by clearly separating pre-setup work than relying on ready-made benchmarks (a bit of a pain initially, but helps a lot to fine-tune at unit-level going forward).

It uses Chrome DevTools Protocol(CDP) through Puppeteer and allows to analyze execution durations separately (Scripting, Layout, Paint, etc). Plus, it saves raw JSON profiling data, so you could import & examine it visually on DevTools Performance Tab's Timeline.

Think it will be helpful: https://github.com/dumijay/pfreak This is how the results look like: https://caldom.org/benchmark/

Cool! I just made the PR :)

Good luck with the project.

This is very useful. Thank you for making this.

I was going to suggest a dark theme, then I thought why not making one for you (not perfect, but a good place to start): https://pastebin.com/vzA11EG3

Cheers!

Yes, the indicators are very strong.

However, we thought similarly about Nokia, Intel, SpaceX competitors, etc.

This is cool!

Update:

Your reply encouraged me to experiment a little bit.

Turns out, CalDOM already seamlessly merge with native Web Components. I just didn't see it previously. :(

It can be used to create reactive, stateful & native Web Components. Check out this example: https://caldom.org/#web-components

If you happen to play with it, please let me know your suggestions to improve it.

Thanks!

Thank you! :)

It's 100% interoperable with Native DOM API.

Basically, CalDOM's reactivity system does not care how the Element is created as long as it's a Native DOM Element/Node.

It could be _("+div") or document.createElement("DIV") or even jQuery("<div></div>")

See example: https://caldom.org/#reactive-native-node

Also, a CalDOM instance is just a wrapper around Native DOM Element(s).

_("div").elem === document.querySelectorAll("div")[0]

This interoperability allows for powerful integrations & to update the DOM directly by avoiding expensive virtual-DOM diffing.

In React's world, everything is micro-managed(there're pros & cons), accessing DOM directly can be chaotic & usually not recommended.

Thank you very much!

Actually, I was very nervous about "meh, whatever another JS lib" response.

I'm relatively new to HN. This community is awesome!

I understand.

I picked it mainly for 3 reasons. In my opinion,

1. _ kind of hide itself & give more prominence to the rest of the code (logic) 2. If we pick a long name like CalDOM, it becomes a PITA when it repeats so many times. 3. Not to be conflicted with jQuery by using $

To avoid conflicts, CalDOM provides an official workaround to define the alias before loading: https://caldom.org/docs/#_cal_dom_alias

I understand. Thank you for the feedback.

If you don't like the underscore, there's an official way to alias it: https://caldom.org/docs/#_cal_dom_alias

I actually forgot to mention this in the documentation, your feedback prompted me to do so.

Rest is just the nature of JavaScript my friend. I hear you on Python.

Thank you. Worked really hard on the benchmark :)

No, it's not synced. When you use CalDOM without its reactive features, it's just a wrapper around the native DOM Element (similar to jQuery).

_("button").elem === document.querySelectorAll("button")[0]

Regarding capturing events of future elements: You can achieve this by setting an event listener to the parent.

Eg:

_("body").on("click", e => { if( e.target.matches("button") ) //Do something });

Yeah. Thank you for the valuable feedback. Working on it.

Thank you :)

Yeah, Lit is cool & futuristic. However, it's built for ES2019. It requires some effort to make it compatible with previous browsers: https://lit.dev/docs/tools/requirements/

In my opinion, this is the future. Especially, Native Web Components will take over in this decade. CalDOM's long-term plan is to seamlessly merge with native web components when it's widely supported.

Same technique is used for .$ reference holder. Proxies are awesome! :)

Exactly, and state changes are batched behind requestAnimationFrame :)

Also, there's .react(new_state), which is synchronous.

If one prefer not to use Proxies (old browsers, etc), it can be disabled via .react( state, { ..., watched: false } ) and then can call just .react() manually after state changes. Which is also batched(async).

I honestly don’t know where this will lead. Probably all of this is just for nothing. The world has enough UI libraries already. Duh!.

I decided to make my own mini jQuery years ago because I wanted a lightweight library. Also, I wanted to stay close to the native DOM API & vanilla JavaScript. Looking back, it paid really well. Then React & Vue JS happened.

In my opinion, the reactive UI approach bought a huge productivity improvement from the perspective of the developer. Also, it enabled a lot of beginner developers to navigate the programming landscape more easily.

However, this shift also moved people away from the core stuff that’s happening under the hood. As a result, sometimes we have to struggle a lot to find solutions within the library’s limits, which are sometimes hilariously dead simple & performant to implement with native APIs.

CalDOM tries to solve this by being 100% interoperable with the native DOM. I hope this will be helpful for developers with similar requirements.

Introducing CalDOM, an agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM.

Instead of pulling you into a library-specific magical world, CalDOM let you fully access the DOM directly while keeping the reactivity. A 2-in-1 virtual-DOM & no-virtual-DOM approach if you will.

So you could take full advantage of native APIs & mix it with other libraries to gain superior performance & flexibility in the development process.

CalDOM does not require any dependency or tooling. It does not introduce any new syntax. Just pure JS.

This is the first time I’m publishing something like this. This was a simple jQuery alternative I made myself years ago & kept on improving it slowly. Worked really hard during the last few months to add reactivity and get it to this level.

Please check it out & let me know what you think, the good, bad & your suggestions to improve it.

Also, it's great if you could contribute to the project: https://github.com/dumijay/CalDom

Nice finishing touch. I think this is the shortest it could get in this approach with semantic tags.

I just learnt about insertAdjacentHTML & last variable return of arrow functions. (not using widely due to compatibility)

Also, you're absolutely right about XSS & Button. I thought innerText only removing text, keeping the <li></li> :)

So, learnt some new stuff. Thank you!

In your code, the <ol> initially outputs "undefined". So we need to change it to o=b(x,"ol","") there.

Final code: a=document;b=(d,t,v)=>(d.append(d=a.createElement(t)),d.innerText=v,d);i=b(x=a.body,"input");b(x,"button","+").onclick=_=>b(o,"li",i.value).onclick=(e)=>e.target.style.textDecoration="line-through";o=b(x,"ol","");b(x,"button","X").onclick=_=>o.innerText=""

Hello!,

I'm the original owner of this tweet & new to HN. I never expected this to go crazy at this scale. A big thank you to @rukshn for sharing it here.

My apologies for the narrow requirement definition (had to limit it to 280 chars :)

What I intended was to build the UI from scratch & the logic all within JS.

Learnt a lot from all these contributions & keep 'em coming.

Since everybody is into plain JS, here's my version:

279 chars, No HTML injection/document.write(), can add, strike-through & clear the whole list

a=document;x=a.body;b=(d,t)=>{return d.appendChild(a.createElement(t))};c=(e,v)=>{e.innerHTML=v;return e};i=b(x,"input");c(b(x,"a"),"+").onclick=_=>{c(b(o,"li"),i.value).onclick=(e)=>{e.target.style.textDecoration="line-through"}};o=b(x,"ol");c(b(x,"a"),"X").onclick=_=>{c(o,'')}

https://jsbin.com/weyijorila/edit?html,output