The end of the semester is drawing near, which also means the conclusion of the open source course. For the final assignment, I will be tackling an issue that will be outside of my comfort zone as a little push for myself to grow as a developer.
I have the remaining weeks of the semester to work on an issue that is not too difficult that I wouldn't be able to succeed, but also not too easy that I won't really be learning anything.
For this week, I will be choosing an issue and layout the plans on how I will be taking on this issue. For starters, I have decided to look for issues again from Onlook.
onlook-dev
/
onlook
The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
Onlook
The first browser-powered visual editor
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
The open-source, local-first visual editor for your React Apps
Seamlessly integrate with any website or webapp running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push changes your changes without compromise.
Onlook.Studio.Component.Demo.for.GitHub.mp4
Built With
Stay up-to-date
Onlook officially launched our first version of Onlook on July 08, 2024 and we've shipped a ton since then. Watch releases of this repository to be notified of future updates, and you can follow along with us on LinkedIn or Substack where we write a weekly newsletter.
Getting Started
Installation
Option 1: Download from website
Visit onlook.dev to download the pre-built app.
Optione 2: Run locally
Important
We require the Bun.sh runtime. You can…
As a quick recap, I contributed to this project previously during the Hacktoberfest. This is important as this is one of the main reasons why I decided to contribute to this project again. I really liked the concept of the project. It is something that would prove to be helpful to both developers AND aspiring developers.
So with that being said, I dont think I would want to end the course any other way than getting an opportunity to improve and contributing to a project that interests me.
Issues
Here are a couple of issues that I've been looking at and planning to take on:
Issue #1: https://github.com/onlook-dev/onlook/issues/479
Issue #2: https://github.com/onlook-dev/onlook/issues/799
After looking at the issues and doing some quick research, I am leaning more towards Issue #2 as it seems more doable at my current level within the remaining time.
I have been looking at Issue #1 since Hacktoberfest, and technically even tried to solve it without asking for the task just because I was curious, and it seemed more complicated than I thought. Then weeks later, Issue #2 appeared, and the issues have some similarity which is handling dynamic variables. The part that differentiates the difficulty between the two issues is that Issue #1 deals with how dynamic variables should be handled in the DOM, while Issue #2 is about detecting and providing meaningful feedback when dynamic variables are used in Tailwind class names, improving the developer experience.
Plans
So far these are the first few steps I will be taking:
1. Find the relevant code and files.
For a big project with an already existing huge code base, it is important that I figure out which files and code I will most likely be working on. I think that dealing with this first hand will save me time once I actually start putting in some work.
2. Understanding the code and the flow.
This one should be a no brainer. But it is still worth mentioning because I may have contributed to the project twice during Hacktoberfest, the issues from then and now are two different things and are completely different areas of the app. So this would require some time again to understand this specific segment of the code.
3. Define the approach for detecting dynamic variables.
Once I have identified and understood the relevant code, the next step will be to figure out how to detect dynamic className values effectively. This will involve analyzing patterns in the className property, such as template literals, concatenated strings, or computed functions. I will then implement logic to handle these cases by displaying warnings or feedback in the UI and ensuring the changes integrate smoothly with the existing functionality.
Top comments (0)