DEV Community: oreychandan

A PWA Todo-List Web App

oreychandan — Wed, 05 Feb 2025 04:32:05 +0000

A PWA Todo-List Web App: Refining Vanilla JS Abstractions

The app is deployed here.

I embarked on this project to refine my vanilla JavaScript abstractions by applying them in real projects. I have not uploaded the source code for this project, as the focus is on honing my skills rather than the code itself. Instead, you can explore the core JavaScript utilities that I use and update in different projects on this repository.

About the App:

My Todo app, made without any frameworks, offers the following features:

Create a task
Edit a task
Remove a task
Persist data using local storage

Initially, I planned to implement touch actions like dragging items left or right to delete them. While it worked in isolation, integrating it with other events became too complex. To simplify interactions, I opted for a delete button in the bottom bar.

During development, I encountered issues with viewportHeight when the onscreen keyboard pops up on mobile devices. I discovered that the visualViewport global object resolves this problem.

Another challenge was resizing the textarea height based on the scrollHeight. A default textarea has two lines of height, but I needed just one line at the start. I adjusted the height of the element using the scrollHeight property after each input.

Yet another edge-case emerged with text wrapping, which also affects the number of lines. Since there is no specific event for text wrapping, I considered listening to window resize events or using a ResizeObserver.

Overall, this project was a valuable learning experience. I enhanced my programming and project planning skills. I brainstormed and sketched different UI and interaction ideas, ultimately settling on a design that I felt confident implementing.

Future of the Project:

I aim to improve the app in two aspects: core features and UI/UX enhancements.

Core Features to Add:

Google login
Cloud sync for tasks to enable multi-device access
Additional Todo app features like due dates, finished tasks, and tags, re-order elements, order by due-date or date-created.

UI/UX Enhancements to Add:

Slide tasks horizontally to mark them as complete
Show finished tasks only if at least one exists, with scroll snapping to the top of finished tasks

*This blog post was created with the help of an AI assistant. (My English is ok, but my articulation is messy.) *

recursion in typescript

oreychandan — Thu, 16 Dec 2021 14:10:25 +0000

One word, 'trampoline'.

Sometimes you just come across something brilliant and wonder
"why did I not think of that?". Such discoveries humble you but also if you are like me, makes you realize you need to think out of the box next time. "Out of the box" here just means think fresh. Because when you are stuck with a problem, the last thing you need to do is trying to solve it the same way again.

So I am getting deep into functional programming. I am having blast. Been a while since I had so much fun coding. But I had a problem. I cannot do recursive functions. I know how to do them, but typescript complains that the function refers to itself.

So at first I was like ha, must be a limitation of typescript because you can do this in javascript without any problems right? Ah javascript you got my again, with your smooth talking lies.
Nope, I suddenly realized what the word 'stackoverflow' meant. In brief, when you call a function, that function creates a 'stack'. It is memory where the parameters and some other stuff live until the function finishes execution. But when you call the function recursively the stack just blows up after a number of recursions, causing a runtime error.

I tried a few ways to create a workaround, but none worked in a way I wanted or at all.

But recently when I was not even looking for this I came across a technique called 'trampoline'.

Here's the implementation I found: source

I made some modifications, because why not XD.

I made the modifications because, (nothing against the source, its a great example to explain the concept)

what if the function we are creating returns a function by design? that will break this code.
the usage of it "trampoline(someFunction)", implies you can do this with just about any function, but that is not how it works.

So with my modifications this is how a recursive function is defined, (there might be a better way, but its best I could create right now)

I already have a couple of changes I might want to do to this, but I am so glad that I came across this concept that I just wanted write down my thoughts in the post. Maybe someone else who never knew this found it through me. That would be my pleasure !

partial functions you say?

oreychandan — Thu, 09 Dec 2021 19:14:18 +0000

So lets talk about functions in js/ts. Specifically the way we use them. Consider this function:

function createVertex( x: number, y: number, z: number) {
  return new Map(Object.entries({x,y,z})); 
}
console.log(createVertex(1,2,3));
//Map { "x" => 1, "y" => 2, "z" => 3 }

So here we have a function that creates 3d vertex. We need 3 parameters to create it.

Now lets talk about partial functions a bit before I can come to the main point.
Here's how a partial function is supposed to work.
(some psuedo code below...)

f(x,y,z) -> v // our current function
f(x) -> (y) -> (z) -> v // a partial function

This works because of function scoped data. Meaning, withing that lamba(nameless) function '(z) -> v', we have access to 'x' and 'y' which lets us create 'v' (edit: forgot to mention, this is called a closure).

This is great. We now don't need every parameter when we need to use the function. This empowers us to composition our logic in interesting ways we could not before.

Do read further, but If you have not tried partial functions yet, I suggest go experiment a bit and come back. Doing is the best way to learn (Tip: Deno is actually quite handy to do typescript scripting as you can simply run a file without having to compile all by default.)

So here's where I do my experimentations:
Disclaimer: Idk if someone else has thought of this but I have not come across anything similar yet. I don't look up stuff much. I'm just a basement mad scientist XD.

The Meal
So this "partial function" is a bit incomplete if you think about it, isn't it?
So in our above pseudo code example f(x,y,z) -> v,
what if I want to feed the function 'y' or 'z' first?
So our "partial function" is coupled with parameter order. How about we give our function some more super powers? What do you say?
And that's how I started scrubbing my beard, scratching by ever growing forehead to churn out a magical abstraction to create the function of my dreams.

Spoiler: I won't be going into the implementation details in this post. I am still working on it. The progress has been good. I just want to talk about how the final usage of this "magical abstraction" might look like.

The magic

// lets say we have a magical function
import { createMagicFunc } from "./functionGenerator2";

// our normal function
function createVertex(x: number, y: number, z: number) {
  return new Map(Object.entries({ x, y, z }));
}

// now lets sprinkle some pixie dust on it
const magicalVertexCreator = createMagicFunc(
  createVertex,
  /* Some config if any*/
);
// now 'magicalVertexCreator' is our new and
// improved partial function.
// lets see if we can use it as a normal function
console.log(magicalVertexCreator(1, 2, 3));
// Map { "x" => 1, "y" => 2, "z" => 3}
// ok lets see if we can use it as traditional partial function
console.log(magicalVertexCreator(1)(2)(3));
// similar output.
// Similar because Map and record are not ordered data,
// so they show in different order each time XD
// now for the magic. Can we feed the function which
// ever parameter we want and get back a partial function?
console.log(magicalVertexCreator({ y: 2 })({ z: 3 })({ x: 1 }));
// volla! we get the same output.
// Ok you gotto use some imagination here. ;)
// wait did you think that is all? ok wait for more treats.
console.log(magicalVertexCreator({ x: 1, z: 3 })({ y: 2 }));
// lets mix all these ways of using the function now.
// its going to get crazy now
console.log(magicalVertexCreator({ y: 2 })(1, 3));
// did you get what I just did there?
console.log(magicalVertexCreator({ z: 3, x: 1 })(2));
// at this point I am just flexing am I not?

Conclusion:
Flexing and theory crafting aside, I have a good bit of this functionality done. I just need to see how feature rich I can do it and see how it goes really. And I really want the types to work really nice.
I dont mind if it is a bit of a heavy wrapper on a function because this is something meant to be used in application logic where the control flow benefits we get counters any performance hits we get from this.

If this seems interesting to you, do the things you do on dev.to. Is it like and follow? idk I'm new here.
Anyways, after I have a fully working code for this I will make another post. b

Discourse: Pls be kind with each other in the comments. If you think there is an error in this post let me know. If you have suggestion on things I might have missed that fits well in this post feel free to suggest. Share your tinkerings, I want to see what you have done :)