#buildinpublic Updates

I am enjoying building ItsFast so much that I lose the track of time. I continuously sit for several hours working on it and spend over 10 hours sitting at my desk every day. But this seems to be taking a toll on my knees so I guess I need to start taking regular breaks and limit the time sitting at desk.

Anyways, here is the update for this week. I implemented the Layers Panel and Undo/Redo functionality this week. Watch the recording below.

I also gave a bit of thought to how the breakpoints logic can be implemented. If you set a style in a breakpoint, that style should be applied to all breakpoints to the right of it. In the recording below I have three breakpoints. You can see when I change the style on the middle breakpoint, it is applied to the last breakpoint as well.

Now that I have a good idea of how things are supposed to work, it's time to start modularizing the code and adding automated tests before it grows too big and fragile. So, I spent the last few days playing around with pnpm workspaces, nx, vitest and jest. Not yet finalized on the choices; that is something for the next week.

Taking a break now to give my knees some rest!

If you find the project interesting and would like to chat with me, feel free to connect on LinkedIn or Twitter.

This week was spent on researching a lot of stuff and cracking the logic for implementing interactions like dragging, panning, zooming and resizing. I don't have a computer graphics background. I did study basic computer graphics during college like line and circle drawing algorithms, the math behind scaling and translation and a few other things. But we never use over 90% of the things we study at school and college after we start a job.

All of my coding career has been spent designing databases, writing APIs to manipulate data, building user interfaces to call the APIs, and handling other mundane tasks. With all the available libraries and tools, software development has become a significantly easier compared to 20 years ago. Want to do X, find a library which does X. Want to do Y, find a third-party service which does Y.

ItsFast is slightly different for me. While there are libraries available for drag-and-drop (DND), they are designed for the DND operations which are commonly used in web applications. Directly using them for a website builder project would not be optimal and might need quite a bit of hacking. Additionally if you need to customize anything it is best to have an understanding of how things work under the hood.

So I decided to implement the drag-and-drop logic from scratch by using mouse down, mouse move and mouse up events. Sometimes I prefer to create separate projects when experimenting with new concepts, rather them implementing them directly into the main project. Below is what I managed to get working for drag-and-drop. The code is ugly and does not handle all cases. But it was meant for cracking the logic. When I integrate it into the main project I will write it in a better way.

I also managed to implement the panning and zooming logic. To zoom in and zoom out you can hold down the Ctrl key and scroll the mouse wheel. Browsers use the same combination for zooming the web page. However, since we only want to zoom the workspace and not the entire page, we need to disable the browser's default zoom functionality. As usual I called preventDefault() in the event handler but it did not work. After quick Googling I learned that we need to pass an additional option, passive: false, to the addEventListener function. You can read more about this option on MDN.

I also signed up for GitHub Copilot trial and I am absolutely loving it! See below how it was helping me write the code for the resizing logic. It's like a super-intelligent autocomplete and it saves a lot of time.

That's all the fun I had in Week #2!

Now I am heading off to integrate all the rough work into the actual project code.

If you find the project interesting and would like to chat with me, feel free to connect on LinkedIn or Twitter.

It has been a week since I started working on ItsFast. The initial period is where you make the technology decisions like which languages, frameworks and services to use. You start thinking of the design and layout of your user interface and define the code structure.

I chose to develop the project using ASP.NET Core 8 and PostgreSQL for the backend and React for the frontend. It is mainly because I have good experience in .NET and some experience in React. I did evaluate other frontend frameworks but currently the React ecosystem seems to be the best with a large number of available libraries and resources.

I started developing the basic project structure and have managed to complete Sign In using Google and creating, editing and deleting "empty" projects. The fun part was developing the Website Builder layout with buttons to switch the canvas to different screen sizes and the zoom in/out functionality. I remembered my college Computer Graphics lectures when I was developing the zooming part. Well, it is built using CSS transform scaling and it did not need any of my Computer Graphics course knowledge. But when I do the more advanced stuff, maybe some graphics theory will be required.

Watch the below GIF recording to see how ItsFast looks like today. The code is live and you can actually login with your Google Account and try it out.

I am using a mono-repository and currently as part of the build process, the React + Vite project output is copied to the ASP.NET Core application wwwroot directory. Both the frontend and backend are bundled together into a single Docker Image and deployed on an Azure Linux VM. This will be moved to Kubernetes (AKS) before go-live.

I'm quite happy with what I was able to complete in the first week. Now off to implementing the website builder!

If you find the project interesting and would like to chat with me, feel free to connect on LinkedIn or Twitter.