About Me
I am Stephanie Quintana, a self-taught, career-changing web developer living where I grew up, in rural West Texas. I studied Mathematics at the University of Texas at Austin, investigated Identity Theft for the US government and finally moved on to Event Management before becoming fascinated and enveloped in coding. I am still planning on where I would like to end up, but am thoroughly enjoying exactly where I am right now.
Project Description
The Infragram project brings together a range of different efforts to make Do-It-Yourself plant health comparisons possible with infrared photography. Infragram.org enables people with Infragram-modified cameras to upload photos for analysis and conversion using techniques like NDVI (used in satellite imaging analysis). It also allows for live streaming from a modified webcam.
Abstract/Summary
This project will overhaul the UI of Infragram processing tool to be full-screen and create space for new features including pop-up panels with Q&A, tips, tutorials, and more, so that they can feature more helpful guidance text.
Wireframes of proposed changes:
Please note that the following two images do not include/reflect a footer row (which will be placed below the screen UI and house the aforementioned informational panels/modals). The current state of the editor will not allow for new image upload. Please find the most current and updated wireframes and mock-ups of the proposed layout here.
it is also worth noting that all buttons have been explicitly marked with function names and it is recommended many of these be changed to descriptive icons/SVGs for space concerns
Please also see the Bootstrap mock-up of this layout.
Problem
Additionally, I fear that there is somewhat of a disconnect between our goals and the current site presentation. I would like to focus on areas where the verbiage is technically sophisticated and where the current documentation for new community members is not accessible enough, buried in a web of links often found deep on pages that themselves were linked to. I would like to to improve the organization of these links/information on the home page as well as in the sandbox, perhaps utilizing the "footer" row mentioned above.
Though it was not discussed in the project description, I am also proposing to include more inviting, less technical, language throughout. For example, the "What is Infragram?" message on the current homepage reads:
"An "infrablue" image is one in which the "red" channel of the image shows "near-infrared" light
instead of the usual red...by removing the infrared block filter and then adding a filter that
selectively blocks red light (this is something the Public Lab Infragram kits nicely accomplish)."
as opposed to that of Infragram: the Infrared Photography Project page:
"Infragram is a simple, affordable near-infrared camera...its simplicity of use and
easy-to-modify open-source hardware & software makes it a useful tool for home gardeners,
hikers, farmers, amateur scientists, teachers, artists, and anyone curious about the secret
lives of plants."
I believe the latter to be more informative and inviting.
Timeline/Milestones and Further Goals
In addition to the project breakdown, I have included tasks specific to the Outreachy timeline and have utilized PL's First-timer-only release workflow as a guide.
As the Outreachy intern, I will be working closely with the GSOC intern whose work is more JavaScript heavy and directed towards the tools on the the sandbox page of the site.
Thus, I focus the beginning stages of the timeline to reflect the implementation of the sandbox UI first, then move on to the update of the Infragram homepage, adherring to the PL style guide and focusing on a minimal redesign concurrent with the MapKnitter and Spectral Workbench homepages.
With adjustments, I hope to concentrate the final stages (if not second half) of the period to the creation of helpful modals (Welcome, Tips, Result Interpretations, Q&As...) which can be added with the ease of Bootstrap to the (previously created) footer row of the screen UI on the sandbox page. I expect that the research and collaboration necessary to create these modals will require the most time of all the initiatives and will thus dedicate time weekly, from the beginning of the internship, towards this end.
| * | Week 1 | Week 2 |
|---|---|---|
| 5/30 - 6/10 |
|
|
| 6/13 -6/24 |
|
|
| 6/27 - 7/8 |
|
|
| 7/11 - 7/22 |
|
|
| 7/25 - 8/5 |
|
|
| 8/8 - 8/19 |
|
|
| Final week 8/22 - 8/26 |
|
First Time Contribution
My initial contribution was a good introduction into Public Lab's code base and adequately prepared me with the expected workflow and possible issues we may encounter. Unfortunately, there was a failing system test, unrelated to the PR, and the original issue was canceled/closed. The next PR I completed unfortunately encountered the same type of system error as the first. It was reopened so that that error could be addressed and Tilda was able to locate the culprit. I am both impressed and grateful that Tilda was able to walk me through the needed changes for the PR to be successfully closed. I was also able to complete the process of creating a First Time Only issue for new contributors and am excited about being able to offer more help to this end as the influx of interns continues with the changing seasons.
Community Involvement
Please feel free to reference the issues I've commented on - in particular, those helping to welcome newcomers, assisting in plots2 installation and providing efficient and clear detail with troubleshooting installation issues. My comment history on gitter can be found by searching my under username, @stephaniequintana.
Working with and getting to know my fellow interns has been a wonderful experience. I've already connected with many new people that I am excited to work with. Specific to the Public Lab community, I also took advantage of the opportunity to participate in a few of the weekly community calls and am inspired by the motivation and dedication to our communities, all of our communities. I aspire to remain a part of this community as well.
Experience
I began dabbling with code after the Covid shut downs in late 2020. I was a bit in awe of how basic HTML seemed and CSS was fun, demanding creativity and precision. It was JavaScript that absolutely hooked me, though. I am a problem solver, mechanically and mathematically inclined and learning JS brought out a child like excitement in me. I've been determined since to create a career for myself in this field.
I am self-taught, currently working toward completing The Odin Project's Full Stack JavaScript path sidelong the final project of Colt Steele's Web Development Bootcamp. I have also learned and have some experience with Node, Express, MongoDB, basic React, SASS and Bootstrap. I spend my free time reading programming and problem solving books and study/code 8 - 10 hrs/day. I next plan on completing the Ruby on Rails Odin path, learning Typescript and a JS framework. I am greatly motivated to finding an organization I can learn and grow with that aligns with my values and interests.
Please see a list of my starred repositories, at https://github.com/stephaniequintana?tab=repositories, for more specific, relevant projects. Notably, the Disabled American Veteran's site is a creation made in donation to a community thrift store that benefits our local veterans and showcases my knowledge and implementation of CSS. The Let's Travel site is an example of my work with Bootstrap and multiple others demonstrate my use of JavaScript code.
Teamwork
I have worn many hats before deciding to change career paths into coding. With each and as far back as I can recall, I have always worked well with others. I have held many positions of leadership and have been an effective and strong team player. Some of my role include:
- Coordinator - leading teams upwards of 50, planning and executing flawless set-up, service and break-down of major events in the matter of hours
- Head Trainer - creating and implementing a front-of-the-house training program for a multi-billion dollar corporation
- Team Lead - planning, organizing and promoting weekly/monthly staff activities
- Quality Review Coordinator - worked within team to identify root causes error trends and developed strategic plans for corrective action
Passion
I have alway been interested in helping others. I get true joy out of teaching and motivating and I feel that service and commitment to community is the ultimate human experience. I am drawn to Public Lab because it apparent and evident that these same types of values prosper here.
I cannot even come close to saying that I am a scientist, but I do understand the magnitude of and the ideas behind many of the visions Public Lab has been able to bring to light and I emphatically applaud the motivation and collaboration that helps make it all possible. I, myself, am passionate about problem solving. Whether it be helping a friend or a stranger, figuring equation amounts or understanding the behavior of code, I get giddy doing it. Being able to couple this with community engagement and fighting injustices is of great interest to me.
Audience
Of course, this work is going to greatly improve the experience for all current users of the site and I am more than hopeful that our outreach efforts are successful in locating and educating as many communities and individuals facing agricultural issues as possible. As I work to help improve the tool, though, I cannot help but to envision the local farmers and ranchers in my own community that are facing hardships. I anticipate them visiting the site, quickly and effortlessly becoming aware of how the tools can help them and sharing with each other their successes and outcomes.
Commitment
I understand that this internship is a commitment not only in time, but also in dedication and effort. I am available full time, from 8am to 8pm CST, and am able to structure my schedule to fit the goals and needs of the project.
2 Comments
Hello @stefq1111 thank you for your proposal! It's looking great. I like the detailed thought you've put into things like where "help" links go, and the layout and sequencing of the page, and use of icons in limited space. A small note is that it looks like your page layout has vertical scrolling and I wonder if there's a benefit to having vertical full-screen as well, so an edge-to-edge vertical interface which is always 100% height? I know the current design doesn't have this but consider a page like https://photopea.com/ where it's more like using a desktop app.
It'll be interesting to see if you can get the horizontal toolbar to reflow vertically, or if you'll have to have 2 different toolbars, with CSS or JS causing only one to be shown. Do you think there could be a steeper learning curve to have 2 different layouts depending on screen size, or do you think the benefits of the vertical layout (which i agree make more sense for step-by-step layout of tools) outweigh the risks?
Ah, i see you get into some of these questions and issues in https://github.com/stephaniequintana/Infragram-Bootstrap-Mockup -- excellent. In that mockup, i'm also wondering if the horizontally centered buttons on the left sidebar should be full-width, rather than varying in widths. It could make it a little easier to visually scan, or maybe it's just a sign of my design obsessiveness we can ignore 😅
I also really like your emphasis on "more inviting, less technical, language throughout" and agree completely.
Finally i like how you've labeled optional steps. I do think of Colorize as coming after Analyze, though, so i wonder if those should be swapped?
Thanks for a great proposal!
Is this a question? Click here to post it to the Questions page.
@warren, Jeff, thank you for the feedback...
I completely agree that an edge to edge interface, 100vw/100vh, would be best for the image processing tool. To this end, I've reconsidered the purpose of the content that currently creates the necessity of a vertical scroll. Ultimately, it is only the Q&A section and the footer. I don't believe either add crucial value to the page. That is, the only purpose of the sandbox page should be to process images, house the tools that make that possible and provide information to this end. It is adequately sufficient to include the Q&A section on the Infragram home page and to provide a link to it.
I also feel like the Help menu (to be added in modal form) should offer more structured and specific "help," perhaps organized by topic (which might include links to specific Q&As and/or wiki pages). The most significant issue here being that of the current Q&A section is not readily searchable and therefore not efficiently helpful.
It's my opinion that the learning curve (of using the tool) correlates only to the availability and placement of the direction/information and will not be affected by differing layouts. Moreover, I feel like the User Interface should be optimally designed for both, desktop and mobile. Each utilizes significantly different space. With desktops being wider, it makes sense to have the toolbars in left/right columns. That type of design, though, significantly decreases the pixel real estate that should be dedicated to the image itself on smaller, portrait-style screens and lends toward a seemingly crowded UI. Please see the differences below from differing processing tool sites (noting that the photopea image width is adjusted for their ad space):
Of course, we have to consider and weigh what this means for the code. With differing layouts dependent on Bootstrap, we will have repeated code with multiple display properties. I do think that this should be discussed further with the entire team and that either choice, differing or the same layout for mobile and desktop, will work nicely.
Pertaining to my Bootstrap mockup,
I 100% agree. I was more focused/concerned with ensuring that the grid would correctly reflect the differing toolbars on screen resize that I ignored many aspects of the visual design in the bootstrap mockup. I assure you I understand and agree with the importance of such "design obsessiveness" and am currently working towards finalizing a more complete and thorough proposal.
Thank you, again, for all of your help and feedback during this contribution period. I look forward to your thoughts on my final proposal. I have every intention of remaining a part of this community. I understand that the internship itself does not begin until late May, but also that this is an OpenSource community and would like to offer my assistance and availability wherever you think it may best be utilized. There are excellent resources I will utilize to this end, but please feel free to reach out directly if you are in any specific need of help.
Thanks to all involved!
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Login to comment.