-
-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DMP 2024]: Show Slur Metadata in the webpage #544
Comments
Hi @dennyabrain I'm Dipesh Sharma, a final year udergraduate. I enthusiast to contributing to such project that impacts the society positively such as Uli. My background in Computer Science and Engineering, coupled with experience in JavaScript, ReactJS, SpringBoot, makes me an excellent fit for the Uli project. ExperienceBelow are my internship experience that will give you more confidence on my candidature for this project I would like to take up this project under your guidance as a part of DMP24/C4GT'24. |
Hey @dennyabrain ! |
Hi @dennyabrain My project - OpenWeather Extension This gives me confidence for working on Uli project and ensuring successful completion of the project. My previous , internships experience , SIH experience and open source experience at Keploy , reflects that I can work on complex projects. Under your guidance I would like to work on the Uli project . |
@hardik-pratap-singh good catch. The instructions were written to assist someone in setting up uli locally and trying things out. But if you are going to make a PR, best to fork the repo and clone that. |
Hey @dennyabrain is there any small tasks or issues that the contributor can solve so that you can evaluate contributors for the DMP project |
@utnim2 Sure, take a look at this issue - #409. |
Hey @dennyabrain ! PS: Can you please elaborate point number two mentioned in Goal, what icons are we expecting to inject in DOM along with their features ? |
That's awesome :) As a starter, see if you can find location of multiple slurs on a page and inject an icon next to it or above it. Then see if you can implement a hover action so that when a user hovers on it, it shows a popup like the one in the image with any text content. We don't have to worry about what content goes in that popup yet. That should be relatively easy to implement. Lets start with the slur detection and DOM injection. You can take up the hover functionality next |
I have added a reference library in case its useful - https://github.com/patrick-steele-idem/morphdom |
Thanks @dennyabrain ! I think I should start writing the proposal for the same. |
Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project. |
Hey @dennyabrain |
We have some scripts in place to packages with vulnerabilities isn't checked in. Try |
@dennyabrain, I'm facing issues while setting up Uli locally. I've completed everything up to running the This is how my directory structure looks with the -p: |
And yeah these are the scripts in my package.json: However when I updated script for |
Hello @dennyabrain ! PS : Please tell some other good first issues for Uli |
@dennyabrain
While exploring the codebase, I found |
@hardik-pratap-singh your understanding is correct. The right place to start would be content-script.js. The first version of Uli only worked with twitter and all code related to parsing twitter's DOM structure and injecting UI elements is colocated in the |
Hi @aayushk9 to fix this error, try deleting the existing |
@dennyabrain I am very eager to contribute in this project And learn new thing from this open-source project. |
As you have said, I started with For the next step, I was trying to add an icon and for that, I am updating the Cause :LIne Number 40 : works fine Errors : |
@hardik-pratap-singh I would leave you to figure this out as this IS one of the challenging aspect of this project :) I have a tip for you to simplify this. Do try to create a simpler environment to test your code. So instead of making this change in the browser extension and getting swamped by its errors. Try to do the following :
This way you can debug your injection code in isolation. Once you have a way to inject whatever you are trying to inject on a webpage using plain javascript and share your results here, we can find a way to bring that into the extension's content script. |
Hey @dennyabrain I have mailed you my proposal for this issue for review. |
Hi @dennyabrain , I'm Vivek Mishra, a third-year NIT Karnataka student with a strong passion for building impactful web applications. I'm excited to express my interest in the Uli project! My background includes: Full-Stack Development Experience: I honed my skills as a full-stack developer intern at aiRender for 6 months, working with JavaScript, ReactJS, Redux, and WebRTC. This experience solidified my understanding of both front-end and back-end development. MERN Stack Expertise: In addition to my internship, I'm also a proficient MERN stack developer, comfortable working with MongoDB, Express, React, and Node.js. This versatility allows me to tackle projects with both front-end and back-end components. My problem-solving skills are further bolstered by my achievement of a gold medal at Worldquants Brain, demonstrating my ability to think critically and find efficient solutions. I believe my technical skills, combined with my enthusiasm for building meaningful projects, make me a strong candidate to contribute to the Uli project. I'm eager to learn more about the specific requirements and how my expertise can be utilized. |
Hii @hardik-pratap-singh & @dennyabrain , I am trying to set up uli on my system but while using npm install in my api-server and plugin directory , I am getting error regarding node version, I have node version 20.13.1 and |
@reenakp2601 That's odd, maybe try using a version manager like nvm? |
Hello @reenakp2601, try this ! It might help |
This issue is stale because it has been open for 30 days with no activity. |
Weekly GoalsWeek 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
|
Weekly Learnings & UpdatesWeek 1
Week 2
Week 3
Week 4
Hiding the span tag vs removing the span tagApproach 1 : Inject image on page load and toggle displayPros -
Cons -
Approach 2: Add/remove elements from DOM on togglePros -
Cons -
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
|
Ticket Contents
Description
Uli is a browser extension that lets you reclaim your internet browsing experience. It can be used to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence.
Uli can be used to hide slurs on websites. It uses a crowdsourced list of slurs in Indian languages to do so. Uli can also be used by users to submit slurs as they come across it on the internet.
As part of this project, you will add a feature to Uli that lets users view additional context about a slur by hovering on it. This is intended to be used as a tool to aid learning about language and the context behind why a word is problematic.
Goals & Mid-Point Milestone
Goals
Goals Achieved By Mid-point Milestone
Setup/Installation
There are detailed guides on how to setup Uli locally in our wiki
There are guides for many platforms (firefox, chrome, brave) and different OSes (windows, linux). Here is one such for setting up Uli on linux for Chrome. Check the wiki for guides specific to your platform.
Expected Outcome
When implemented, the feature will let users see the Uli icon next to any slur on any webpage they visit in their browser. Upon hovering the cursor on the icon, they should see additional context about the slur. What is its meaning, why it is problematic, what is its level of severity, who has contributed the slur and its meaning etc.
Acceptance Criteria
Implementation Details
Uli uses content script to run javascript against the content on a user's current tab. As part of this feature you will have to implement an optimized DOM parser that can go through the DOM data and find slurs matching our slur list. Since the extension is supposed to work on all websites, you will have to ensure your algorithm can handle various kinds of webpages - static content, infinite scrolling websites, canvas led apps like Google doc etc.
You will need to devise an efficient strategy to store the matches and their location in DOM so that you can implement certain interactions for each match. For every match you will inject the Uli icon into the webpage. When a user hovers on that icon, you will make an API request to our server to get additional metadata about the slur and show it to the user in a hovering box.
You won't be starting from scratch. We already have content script that parses the DOM and finds slurs. We also have code to inject React components into a user's webpage.
There are also reference libraries like Morphdom that we can use or adapt for our usecase.
Mockups/Wireframes
Product Name
Uli
Organisation Name
Tattle Civic Technologies
Domain
Education
Tech Skills Needed
Express.js, Jest, JavaScript, React, RESTful APIs
Mentor(s)
@dennyabrain
Category
Frontend
The text was updated successfully, but these errors were encountered: