Snowflake Landing Page Revamp Proposal

1. Why am I interested in participating in GSoC?

written by Ashmit Gupta on 2023-04-06

Open Source Culture has been the driving force I was able to start my career in technology. All the open source study resources like MDN Web Docs, FreeCodeCamp and Open Source Events like Hacktoberfest have made me learn all the skills I have today. I am a firm believer in the potential of open-source software to make technology more accessible to people worldwide. Google Summer of Code is one of the best open-source programs where I can gain experience of working on a real project with real users under the guidance of experienced mentors and develop skills which will help me to get future job opportunities. Working on meaningful open source projects under the guidance of mentors will help me to understand how to write clear, concise code, document it in a professional manner and know what it takes to create high-quality software. I want to network with other developers from all over the world and become a part of a global community of developers which will allow me to learn from others, share my own experiences and give back to the open source community. Participating in GSoC will be a valuable addition to my resume and help me stand out to potential employers and clients. In addition, the stipend I will receive will help me cover the cost of my education in 2023, which will be a tremendous relief for my family and a source of pride for me.

2. Why am I interested in contributing to The Tor Project?

written by Ashmit Gupta on 2023-04-06

The Tor Browser has been a valuable platform for me to excel in my academia without negotiating with my privacy. I have been using The Tor Browser to get access to educational websites and resources which are banned in my country. It has also protected my personal information from being accessed by third parties and helped me avoid annoying advertisements and spams. I am a firm believer of the idea that internet users should have private access to an uncensored web. I have been exploring the Tor Community and learning about the Tor Culture. The idea of putting users in the center of the development process and using this to make privacy-enhancing technology accessible to all is what matches with my ideology of developing projects keeping the target audience in mind and has driven me to contribute to The Tor Project.

3. Why am I interested in participating in this GSoC project?

written by Ashmit Gupta on 2023-04-06

I am greatly influenced by the methodology of the website team of Snowflake by not rushing to building a webpage through the discussion period of GSoC and first making contributors study the ongoing usability research and understand where the page falls short on delivering the message to users and proxy operators. This way of working in the GSoC contribution period is totally different from other projects and has helped me to better understand the project and thought process of existing developers working on it. Working on this project will help me to learn how to develop secure websites by following privacy-by-design principles, translating user research findings into user interfaces, and enhancing my ability to think in the context of user-centered development. My interest and skills match the required skill set for this project making it to be a project on which I can work successfully this summer. It’s been my dream to contribute to the platform I am using for so long, and you can be assured of my motivation to complete this project.

4. My relevant skills required for this project

written by Ashmit Gupta on 2023-04-06

I started my web development journey with Hacktoberfest 2022 and learned HTML5, CSS3, Javascript, NodeJs, React, Bootstrap, Tailwind, TipTap, GSAP, Gatsby, Web Design, UI/UX, and Figma. I tried to learn web development before Hacktoberfest but was demotivated due to lack of guidance. Though I don’t have previous experience of Lektor Static Content Management System, I am currently learning it by following this tutorial and Lektor Documentation and attempting to construct a blog website. Currently, I am learning Three.js so that I can build my portfolio website using Three.js in future. Here is the list of all of the projects that I have built till now while learning these skills which will demonstrate my skills relevant to this project:

The Little Taco Shop: This is a simple website I made by following a FreeCodeCamp tutorial on HTML by Dave Gray to learn HTML and CSS. The site is live at here. The source code for the project is available at github.

Abraxas Homepage: This is a simple homepage that I have developed for a college physics club - Abraxas. The site is under construction and a preview is available here. The source code is available on github.

AskItOut Design: This is a figma design that I have created for my ongoing personal project which aims to create a Doubt Sharing Website for Educational Institutes. I am working on the design, UI/UX, and frontend development part of the project while one of my school friends is working on the backend of the project using Express, MongoDB and Nodejs. The preview of the figma design is available here.

AskItOut Frontend: This is the ongoing frontend development of translating the above UI design into a mobile-responsive website using React and Tailwind. The source code of the project is available on github. The project is under development and the whole project is not built till now due to our Mid-Sem Examinations. The preview of the project is available here.

Space Warp Effect: This is a three.js project to show a spacewarp effect similar to that in star wars. This project is inspired from a youtube video by Red Staple. The preview of the project is available here and the source code of the project is available on github.

Siya’s Quantum Odyssey: This is a side-scroller 2D web game built using HTML5 Canvas and Javascript to develop interest of school students and university freshmen in the field of Quantum Computing. I built this project during an Annual hackathon - Electrothon 4.0 - in 48 hours where it won the Best Beginner Hack Title. Besides the game, two of my teammates built a website for this. This project is listed at devfolio and is available on github.

Dummy Website for Cern Training Center: This is a static and serverless website that I built using Gatsby. This website lists the details of training modules by CERN from a YAML File. Users can filter the list according to the status of modules. The preview of the project is available here and the source code of the project is available on github.

Open Source Contributions: I have previously contributed to Clueless Community, Qiskit Textbook, PennyLane AI, Society for Promotion of Electronics Culture, Imgman, URL Reducer, and Abraxas. My contribution history can be seen on my GitHub Profile.

Besides these, programming languages and libraries which I have previously worked with include Java, C, Python, Matlab, Pygame, Numpy, Opencv, Qiskit, and Pennylane. I am also a quantum computing enthusiast currently working on a Quantum Image Enhancing Tool for High-Fidelity Image Processing under the Quantum Computing Mentorship Program by QOSF. I have knowledge of basic data structures and algorithms, the fundamentals of digital marketing, and the basics of cloud computing. I also have experience of community management and content writing. I believe these skills and experiences will help me to work on this project effectively.

5. Ideas that I have for the project

written by Ashmit Gupta on 2023-04-06

Responsive Web Design: Images in the current Snowflake Landing Page are not responsive. These are too small for mobile devices to understand. This is the issue I brought up and the merge request I submitted in regards to it.

Add steps on How/Where to turn on Snowflake on The Tor Project: I found it a little bit difficult to understand where to access the Snowflake. In the ‘Use Snowflake to bypass censorship’ section of the Snowflake Landing Page, we can add instructions on how and where to enable Snowflake on the Tor Browser, Onion Browser, and Orbot VPN. We can add this feature in the ‘Use Snowflake to bypass censorship’ section.

Add a different section for how snowflake works: When I first visited the Snowflake Website, I couldn't figure out why the schematic diagram explaining the mechanism of snowflakes was there and what it's trying to explain. We can add a separate section for this explaining the schematic diagram.

Change the hero section: We can make the hero section of the Snowflake Landing Page similar to the main website of The Tor Project. This will help in maintaining a similar design to all websites of The Tor Project.

Change the UI of existing code textbox: The code textbox present in the ‘Help people circumvent censorship: operate a Snowflake proxy’ section is without any styling. We can change the UI of the code textbox to look modern using CSS.

Add a page for Technical Overview of Snowflake in the website itself: Currently the technical overview of the Snowflake is given on this separate wiki on GitLab. We should add a page to the website explaining all technical overviews on the same website. This will help visitors to find everything related to Snowflake at one place.

Add a page for a guide to ‘Standalone Snowflake Proxy’ on the website itself: Currently it is in a separate location making it less accessible. I am not sure if this will be a correct path to move on and need suggestions from mentors and see if it matches the demands of the results from the usability research.

Add a FAQ section/page on the website: This will be helpful for people who quickly want to get answers to any frequent question without going through the whole website.

A contact us section in footer for non-technical visitors who want to give feedback: Currently there is only a ‘Reporting Bug’ or ‘Seeking support with using Snowflake section’ on the website whose process may be overwhelming for non-technical users. Creating a Contact Us/Feedback section of the footer where users can just mail their feedback will be helpful for them. I am not sure if this will decrease the quality and increase the quantity of feedback. This idea needs to be discussed with mentors.

Interpreting the Usability Research Result: If I have the opportunity to speak with the UI team of this project who will be interpreting the usability research, I will be better capable of understanding the requirements of website visitors to Snowflake Landing Page. This will aid my understanding of the project. Due to the fact that I come from a different background, my participation in the discussion will contribute new perspectives and ideas to the research findings. Diversity of thought can aid in the generation of unique solutions and the identification of blind spots.

Balancing Additional Website Features, Localisation needs and Web Privacy Concerns: Incorporating privacy-by-design principle while designing the website will help us to reduce the amount of data collected and stored. We should consider translation and localisation needs early in the design process to minimize future workload. We will be able to simplify translations if we use plain language and avoid jargon. Using internationalization standards will help us to ensure that our website is compatible with different languages, date formats, and character sets. Though I am not sure if this will impact our working duration, conducting privacy impact assessments to identify privacy risks associated with new features or design changes will help us to create a safe website for users.

These are some points I want to keep in mind while building a new landing page for Snowflake but I want to follow the results of the ongoing Usability Research which will help me to understand UI and content which our user needs. I want to develop a landing page which will not compromise the privacy of the user visiting the page and optimize it for users with mobile devices and limited battery life. I will follow the Web Privacy Standards and try to avoid adding scripts which can compromise the visitor's privacy.

6. Project Technology Stack

written by Ashmit Gupta on 2023-04-06

HTML/CSS, Bootstrap, Lektor

Snowflake Landing Page being a static website prioritizes privacy and security. Since static websites do not have any server-side scripts or databases, they do not require user tracking or cookies to function and there are fewer attack vectors for hackers to exploit. As static websites are simple and lightweight, they will load faster leading to a better user experience and reduced frustration for users. We will be using a Static Website Generator with a dynamic admin site like Lektor which will help us to maintain our landing page easily and securely.

7. Project Timeline

written by Ashmit Gupta on 2023-04-06

Pre-GSoC: Read about Web Standards, Website Security Considerations, Lektor Documentation, Privacy-by-Design Principle and Usability Research Implementation. I am presently studying Lektor CMS by attempting to construct a blog website. I have experience creating blog websites with Gatsby Js, so it will be simple for me to do so with Lektor. This will aid in the development of the Snowflake Landing Page.

Community Bonding: Getting acquainted with Tor's brand guidelines, Tor's Web products and ecosystem, codebase of the old Snowflake Landing Page, and procedures that need to be followed to submit code get it reviewed. Take part in the process of translating usability research results into interfaces and experiences. Discuss about the content needed on the Snowflake Landing Page.

Week 1: Discuss Website Features, Localisation needs, and Web Privacy Concerns with Tor Website team. I plan to help Tor Designers in designing new UI as working on the website design which I will be building will help me to understand the user requirement and user-centered design process.

Week 2-3: Begin translating the wireframe into code. Initialise Lektor Project and build folder structure for the project. I will focus on writing the HTML code of the website and integrating it with the content using Lektor’s Template API and contents for different sections/pages of the website.

Week 4-5: Work on styling of the website and refactor HTML code accordingly. Optimize the website for mobile devices. Ensure that the styling follows Tor’s Brand Guideline.

Week 6: Prepare for mid-term evaluation and discuss with mentors on the work completed till now. This week I will focus on taking feedback from mentors about features we should add and changes need to be done in the code. Submit the mid-term evaluation.

Week 7-8: Refactor the code according to feedback from mentors. Add features for choosing the language of the website. Add additional features required in the website. Ensure that all localisation needs are covered.

Week 9: Optimize the code for users with limited battery life. Review the website security and check if it follows Web standards. Get reviews from mentors and community and ensure if the website is integrated with Tor's Web products and ecosystem.

Week 10-11: I plan to spend this period testing the website and check if it is secure for users. Test all the features and functionalities of the website, such as links, interactive elements, etc. Make sure that they all work correctly and as expected. Test the website's responsiveness to different screen sizes, devices, and browsers. Ensure that the website is easily accessible on all devices and screen sizes. Test the website's load time to ensure that it loads quickly, even with slow internet speeds. Test the website's SEO elements. Conduct tests for security like performing a vulnerability assessment, testing for Cross-Site Scripting (XSS) attacks, etc. Conduct cross-browser testing. Conduct user acceptance testing (UAT) with the help of Tor Community.

Week 12: Spare a week in case of some work delayed, in case of any emergency or otherwise. Preparing for submission of the final work product.

8. Other Commitments

written by Ashmit Gupta on 2023-04-06

My End-Semester Examinations for 4th Semester (2nd Year) will be over by 12th May, 2023. After which we will have summer vacations till 1st August, 2023. I am also a part of the Quantum Computing Mentorship Program which is running from April 2023 to June 2023. I give approx. one hour of my day to this program. So I will have enough time to contribute to my project. If I am selected, I shall be able to work around 40 hrs a week on the project, though am open to putting in more effort if the work requires. I am only applying to The Tor Project in GSoC 2023.

9. How will be I an active contributor to The Tor Project post-GSoC?

written by Ashmit Gupta on 2023-04-06

I have been inspired by Parinishtha who continued her journey with The Tor Project after her Outreachy Internship from Tor. After GSoC 2023, I am interested in further maintaining the repository of Snowflake Landing Page and helping new contributors. I plan to work with the UX, Web and Community Teams of The Tor Project. I am planning to develop landing pages for other pluggable transports currently supported by the Tor (obsf2, obsf3, obfs4, meek, scramblesuit, FTE, and StegoTorus) and work on every website of The Tor Project after GSoC 2023 to update them by applying a user-centered design approach which I will learn while working on this project. If it allows, I also want to be a mentor in future Open-Source Events like GSoC and Outreachy where The Tor Project takes part in. This will help me to develop mentoring skills, learn from participants, and contribute further to The Tor Project.