Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Project Q&A #416

Open
jywarren opened this issue Jun 2, 2022 · 18 comments
Open

Project Q&A #416

jywarren opened this issue Jun 2, 2022 · 18 comments
Labels
discussion ideas to discuss and refine before deciding whether to do them or not

Comments

@jywarren
Copy link
Member

jywarren commented Jun 2, 2022

Here are @stephaniequintana's questions from #415; I'll try answering them inline here!

General

There are currently 104 issues opened on the repo...Is it recommended that I comb through those before moving forward so that I can include/address what is broken/buggy or add any recommended features to my existing plan?

You're free to, however many may be old/outdated, irrelevant, etc. -- many were opened during the application phase and we could try to look through them so that ideas don't get totally lost, but generally I think we should Outreachy and GSoC application-related issues.

To further this, there were so many excellent proposals submitted for this project...were there any specific or significant additions/changes to the sandbox that you would like for me to include? (As I, nor Forcha, submitted a design for the homepage, I do intend to reference these for that portion of the project).

If you spend some time looking through recent issues, would you mind making a list of ideas which you think have potential for integrating into your and Forcha's plan? Maybe it's best we discuss these on a per-case basis. @Forchapeatl you are free to do the same, we can discuss within one new shared issue perhaps?

TESTING

I have zero experience with testing. One of my goals for this internship is to learn more about designing/implementing/running tests, but at this juncture I have little to no understanding of how testing is approached. This has already affected my planning, although I might just be over-thinking or not have a complete understanding of the purpose. What extend is required/desired? In these first stages of the internship, how big of a barrier is this going to be for me? What things can I do to better prepare for what is to come in this realm and do you have any specific resources that you can direct me to so that I can begin to prepare?

Testing is a lot of fun, really! A good way to think about it for starters is that the tests on this repository are a form of reassurance that when you make changes, you'll know whether you've accidentally broken something. As you add code of your own, you may be able to add additional tests to "protect" your code. Some types of code are easier to test than others -- UI is a little harder; you can write a tests which presses buttons and then you can check if measurable things change on the page, like... does a modal pop up? Does an element disappear? But back-end functions can be a bit easier to test, because their outputs are less likely to be visual.

BUT! This is an image-processing library. That comes with its own challenges! Much of the code affects things visually, and the only change in output is a different image. Writing tests to confirm images is possible -- we do so in the tests for https://github.com/publiclab/image-sequencer (for example, converting an image, unconverting it, then checking if it's the same as it was in the beginning -- or, converting an image, then comparing it to one we already converted and visually checked). I don't believe we yet do that kind of thing here. So for extra security, you might keep a sample image as a before/after pair of samples, so you can manually check that putting in the 'before' image still gets you the same 'after' image. But eventually that might be a good thing to design a test for. @Forchapeatl have you written tests before and are you interested in it?

Next Steps

I'm excited (&&&& a bit nervous!!) to begin :)
I've been in contact with Forcha and we plan to meet this weekend to further discuss our planning and milestones.

EXCELLENT! 🎉

On that note, I am currently unable to add Milestone's to the Planning issue I just created. Do I need specific permissions to do this?

I think i just fixed this.

The first action, moving forward, is to implement the Bootstrap grid foundation to the Sandbox UI...

What needs to happen before I can begin? For reference, my proposed mock-up is at https://github.com/stephaniequintana/Infragram-Bootstrap-Mockup

The final layout (differing/same for mobile/desktop) was left as a point of discussion on my initial proposal, https://publiclab.org/notes/stefq1111/04-08-2022/outreachy-proposal

Do I need to create a more detailed wireframe?

I think, from your proposal, that you may gain a lot from working with Bootstrap code now, and creating a fully HTML version (or a refinement of the one you made already). I think you're ready to be working in code, rather than a mockup drawing program, but it's just a gut feeling, and if you want to spend more time drawing that's fine too! One big advantage of using HTML is that you can start testing it on different screen sizes, seeing how it changes shape, things like that. I think you can go quite a long way refining HTML before you even start to integrate real functionality with the image processing back-end. You could also get feedback on the design and iterate before starting to hook things up, if you're interested.

Is this, in fact, the design we are moving forward with? There were many excellent designs submitted. Shall we disuss best features and incorporate them into a new design? I have many uncertainties; Please advise.

As i mentioned above, i do think it's worth reading through other ideas and seeing if you're interested in incorporating some of them. If you find ones you are very persuaded by, let's discuss in a separate issue?

I'm certain I have many, many more questions - but I'll leave you all with these for now.

Thanks, this is great! You're absorbing a ton of info, and doing a great job at it!

If you get stuck, please reach out over chat to myself and other mentors. I'm traveling a bit this week so may be slightly harder to get hold of but I'll check in every few days for sure. Thanks!!
@jywarren jywarren added the discussion ideas to discuss and refine before deciding whether to do them or not label Jun 2, 2022
@stephaniequintana
Copy link
Collaborator

Thank you, @jywarren (@TildaDares & @cesswairimu), I especially appreciate how positive and thorough your responses are, it makes a huge difference in our confidence and overall approach 🌟 💞 💥

Moving forward, I am going to postpone adding milestones to my planning issue until @Forchapeatl and I touch base and develop a more thorough plan, leading with and incorporating UI and Function separation and the dependency concerns you mentioned.

My hope is that we can develop a working plan where different systems are well separated ... so that making changes to two different parts of the code doesn't cause trouble. That is, each component should have clear expectations as to how it interacts with other systems, and those integrations themselves should be stable, while the inner workings of each area of code can change internally.

It is my hope to have the UI grid coded and in place asap so that there is little delay with @Forchapeatl jumping in.

I DO need guidance to this end...

Should we

  1. plan on implementing the layout with dummy content (i.e. a button that does nothing but is needed for cross-browser responsive testing) and then add each tool back in separately and as time progresses and include additional changes then, on a per tool basis?

OR...

  1. plan on immediately connecting all existing tools/functions to their place in the new layout and only then begin to implement all proposed changes, AFTER all tests have passed and the site is stable and working correctly?

The best answer seems obvious, but this is where my inexperience with testing comes most into play. I assume, with a new layout, each component will need to be tested as it is added back in and before implementing the next (and the next...) components. However, we are working with an already functioning site and only changing the layout (initially) so we will only be concerned with UI testing (is this even true?) - not to mention the functionality of many components depends on the presence of other components.

Please advise. Once I have a more solid direction, I'll be better prepared and will begin moving forward with coding the layout.

Thank you all and happy restoration! 🛌 🌘

@jywarren
Copy link
Member Author

jywarren commented Jun 3, 2022 via email

@stephaniequintana
Copy link
Collaborator

Sounds great! Thanks, Jeff, have safe and happy travels.

@Forchapeatl
Copy link
Collaborator

Forchapeatl commented Jun 3, 2022 •
edited
Loading

Write UI tests for new Infragram UI, using Jest (https://jestjs.io/)

Please are we talking about writing tests for each functionality of the files in Infragram/src/ui directory ?

image

Or testing for the expected output of each HTML element /Browsers and Screen sizes ?

@stephaniequintana
Copy link
Collaborator

stephaniequintana commented Jun 3, 2022 •
edited
Loading

@Forchapeatl, both. I was concerned that my lack of experience w/testing would slow down the progression of the project. As a side goal, I'm very much aiming to to improve in this area.

I believe Jeff was just asking what your level of experience is (w/testing as a whole) and if this might be a side learning/improvement goal of your own.

&&& thanks for citing the resources, they'll be a great starting place for me.

Thank you for looking over my draft. I know you have one of your own and I think they'll come together nicely. Will be in contact soon 👋

@Forchapeatl
Copy link
Collaborator

Forchapeatl commented Jun 3, 2022 •
edited
Loading

Okay @stephaniequintana , I am familiar with the logic of writing unit tests. I did it a while back with Golang for Amass , using Javascript Jest would be quite similar. I won't mind handling the test and helping out.

@jywarren
Copy link
Member Author

jywarren commented Jun 4, 2022 via email

@Forchapeatl
Copy link
Collaborator

Forchapeatl commented Jun 5, 2022 •
edited
Loading

@jywarren Thank you. https://github.com/publiclab/PublicLab.Editor

@stephaniequintana
Copy link
Collaborator

@jywarren, @TildaDares, @cesswairimu, @Forchapeatl - Hi, all 👋

I need to know the best way to submit what I've done so far - my branch is sandbox-grid. I connected Bootstrap through a CDN and wrote internal CSS...just not clear if I should open a PR or get feedback and make changes first. I'm not able to open it in a browser from GitPod. Please let me know how you would like me to proceed. In the meantime, here's a few of my recent thoughts 😄

I've come to a point where I can use some feedback on the sandbox UI. Please, be thorough -- this is actually the first time any of my code has [ever] been reviewed by anyone - I'm certain I will gain greatly from this experience. More than anything, I'd like to know that I'm adhering, as best I can, to PL's standards. I would very much appreciate any and all feedback you may have for me. Please and thank you 🙏 💕

Just a few notes and questions...

  • As discussed, this is just the html mark-up - nothing is yet functional and it is not yet complete - I haven't touched the screen/canvas/modals/logo...The tooltips, though, are functional, although the specific content needs to be addressed.
  • I tried to model the sidebar on the Spectral Workbench tool panel, I think that one is nicely polished and sharp. Who coded that? Those button groups are great! I don't love this "draft", but I do like it much more that my original design and I feel like it's a good start. I changed direction half-way through coding and rather than search for the perfect icons and mull over the best order of things, I wanted to get the group's opinions and thoughts 🤓
  • Is there an icon bank of PL favorites? - free font-awesome can be so trying 👽
  • I interchanged the background color on mobile/desktop so you all could get a better visual of the difference. Please let me know of specific shades you know to work well or if you have a favorite or preference or sugggestion...
  • I did leave comments in the code to help decipher it - I will clean these up once I begin to merge. I"ll also move the internal CSS to a style sheet once we get a better feel for what needs to be changed/added/deleted...
  • Is there an Infragram logo w/a transparent background available? I couldn't find one, but I feel like I've seen one before...
  • Do we need a login link on the site? I realized there's not one on the homepage either. I know that Infragram is stand-alone, but when I tried to "save" I wasn't well directed...I'm really impressed with the Spectral Workbench login flows. Is this something we need to be thinking about as well?
  • I'm curious about full-screen functionality - mostly, do we need/want it? Ooh, should that be a question for the community? I'm thinking that the canvas is 100% width on mobile devices and 83% on Desktop...I also figure there's no great reason to leave it out, though...

It was tough for me to think of this first hurdle in terms of modularity. My brain just very much needed to follow through with settling all the moving parts first. I hope that I didn't unnecessarily complicate the code. It has already nearly doubled and there are still many modals that need to be added in. Please let me know if you think we should return to a single layout. I have a saved copy that we can easily return to...

Now that we are closer to having a foundation, I can much more easily grasp each task and break it down into smaller and smaller chunks.
Moving forward, I'll use your feedback as the jumping off point for planning and creating milestones. In the meantime, i am going to spend some time learning a bit more about some of the specific infragram processes. Lemme know what you think 😄

Thanks and have a great night/day!

@Forchapeatl
Copy link
Collaborator

Forchapeatl commented Jun 9, 2022 •
edited
Loading

Nicely done @stephaniequintana . Here are some kind remarks.

  • Please include screenshots/video of the UI whenever possible. So that we can better understand your queries with visual representations.

  • Here is a transparent bg of the Infragram logo
    infragram-logo-removebg-preview (1)

  • Here is the link to the Spectral workbench css file.

Congratulations on your first milestone !!!.

@cesswairimu
Copy link

cesswairimu commented Jun 9, 2022 •
edited
Loading

Hi @stephaniequintana,
on how to get feedback - you could create an issue for the sandbox ui and post screenshots there or you could open a PR and mark it "[draft]" or "[wip]" and you can build on that, i think either would be okay.
on PL favorites icons - I don't think we have those, maybe we could start collecting? on perfect icons, I wouldn't worry too much about those now, you could use an icon that comes close to the icon you are looking for and you can improved it later if need be.
On login link - we do not have have one currently, I think its because we only redirect on "save" and the data is stored on plots2 db : I believe this is the only place where we need their information(I may be missing smth) because of this and the complexity that may come with it, I would be pro leaving it as a redirection on save. Thoughts? I experienced the same issue with redirection on my end. I will check if there is an issue logged for this

You are doing great and definitely moving in the right direction.
Thanks

@stephaniequintana
Copy link
Collaborator

stephaniequintana commented Jun 9, 2022 •
edited
Loading

Thank you, @cesswairimu. I'll open a PR and we'll continue from there 😉

--openend on PR #417

@jywarren
Copy link
Member Author

Hi, @stephaniequintana - lots of great questions and forgive me if I don't get to them all at once, but we can circle back and pick them up as we resolve them, i hope?

Regarding login flow, SWB is really nice. The issue is that IG is a static app, with no database, so it's hard to have stateful resources that make the SWB flow smoother (also, what's happening behind the scenes in SWB to make that smooth is... nightmarish 😱 OmniAuth + OpenID misused in weird ways... i'm just glad it works 😅 and so grateful to @SidharthBansal for ironing out a ton of that flow!) I agree though that suddenly needing login isn't so friendly (and does it retain the image you saved? in a previous tab i guess?). Could we imagine a UI where it kind of warns you with a popup or expanding area and says We'll help you save this on PublicLab.org, but first you'll need to _log in_ or _create an account_?

Regarding icons, we use FontAwesome, but i hear you esp. with more complex tools... what do alternatives look like? Is it possible for an open source codebase to use a paid-for icon set? I'm just not familiar with it, what the pricing or licensing is like.

I think full screen is nice for the live video version - there are some use cases where we connect to a modified webcam, and to be able to full-screen that is nice.

Also, would it be helpful for both you and @Forchapeatl to have an infragram camera? I'm not 100% sure how easy it will be to get them to you in the mail but we can try... let me know!

@NARUDESIGNS
Copy link

Regarding icons, we use FontAwesome, but i hear you esp. with more complex tools... what do alternatives look like? Is it possible for an open source codebase to use a paid-for icon set? I'm just not familiar with it, what the pricing or licensing is like.

@jywarren I think you can consider Github Icons or Feather Icons.
They are both open source.

@stephaniequintana stephaniequintana mentioned this issue Jun 10, 2022
Closed
5 tasks
@Forchapeatl
Copy link
Collaborator

Hello @jywarren , I need to delete all branches of my closed PRs so as to keep the code structure organized. Is that okay with you ?

@jywarren
Copy link
Member Author

jywarren commented Sep 8, 2022 via email

@Forchapeatl
Copy link
Collaborator

These ones
image

...
Sure that sounds okay! Your local ones or your remote ones? If you're not going to use any of the code anymore, or if it's already merged, then that's fine!
…
On Thu, Sep 8, 2022, 6:26 PM FORCHA @.> wrote: Hello @jywarren https://github.com/jywarren , I need to delete all branches of my closed PRs so as to keep the code structure organized. Is that okay with you ? — Reply to this email directly, view it on GitHub <#416 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6J5B5CWSTS6XLJL243TV5JRZ5ANCNFSM5XWJEICA . You are receiving this because you were mentioned.Message ID: @.>

@jywarren
Copy link
Member Author

jywarren commented Sep 8, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion ideas to discuss and refine before deciding whether to do them or not
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@jywarren @cesswairimu @Forchapeatl @NARUDESIGNS @stephaniequintana