Gather .svg files for icons of technologies used at HfLA

[kristine-eudey]

Overview

We need .svg files of the icons for as many of the technologies used in HfLA projects, so that users exploring our projects by technology can get a quick sense of the technologies we use. This will support the homepage redesign.

Action Items

UI/UX:

• Refer to the list of technologies in the Projects Page dropdown
• Locate .svg files for the icons of each of the technologies listed.
  • These can often be found by googling "logo [technology]", for example "logo jekyll" leads to these results which leads to this page
• Place all .svgs in the folder identified below in the Resources section of this issue
  • When choosing an .svg to place in the folder, choose the one that appears on the main page of its website.
• Make a spreadsheet in the same folder with each technology's name, a link to where the .svg was downloaded from, a link to the technology's homepage and a yes/no column.
  • In the yes/no column, a yes indicates that the .svg has been placed in the drive folder, and a no means that some Photoshop magic or whatnot would be required to retrieve the logo as an .svg.

Developer:

• Have a copy of all the downloaded .svgs inside a new directory named "technologies-logos" within this folder

Resources/Instructions

Hack for LA - Projects Page
Google Drive folder - Technology icon .svg files
assets/images

[ExperimentsInHonesty]

Hi @kristine-eudey I know Ava volunteered the dev team to work on this, but they have a big backlog of stuff that NEEDs to get done that only they can do, so this need to be the ui/ux team. When you get to the point where you have some that its not clear what is the official logo or if there is not a easily findable logo, then product will look at those specifically and provide guidance.

[kristine-eudey]

@ExperimentsInHonesty no problem at all, design can source the files. Since only a selection of the icons are now going to be featured on the homepage, can you let me know the 10 most commonly used technologies (or whichever needs to be featured there?)

[Aveline-art]

@kristine-eudey Here's 12 in case some of them do not have logos. They are in no specific order, but candidates to remove might be Python and Javascript.

1. Docker
2. React
3. AWS
4. Django
5. Javascript
6. Python
7. Figma
8. Express
9. MongoDB
10. PostgreSQL
11. GitHub
12. NoSQL

[kristine-eudey]

@Aveline-art thanks for compiling this list! Based on what you shared, and by looking at the most frequently used technologies on the projects page dropdown I've incorporated the icons listed below on the homepage. I think the only one here that wasn't on your list which I've added is Node.js, which is shown to be used in 7 projects on the dropdown list.

@Aveline-art and @abuna1985 please take a look and let me know if there are any important technologies you think are missing, or any here that shouldn't be featured. You can see them on the homepage here.

1. React
2. Node.js
3. Docker
4. Django
5. MongoDB
6. PostgreSQL
7. AWS
8. GitHub
9. Express
10. NoSQL

[ExperimentsInHonesty]

@kristine-eudey we still need to review this list some more. Items that came up after you left the meeting were: Figma, data science technologies (Jupyter notebook, Google Colab) and anything else people put in comments below

[abuna1985]

@kristine-eudey I think we can remove nosql with Figma. We have 2 references to specific databases. This will allow us to feature design tools.

[github-actions]

@kristine-eudey

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 7, 2021 at 12:02 AM PST.}

[kristine-eudey]

Edited to reflect above comments: nosql was replaced with Figma. See current list on Figma - Homepage Redesign

[github-actions]

@kristine-eudey

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}

[kristine-eudey]

Moving issue to ice box since we are no longer incorporating technologies icons on the homepage.

[ExperimentsInHonesty]

@kristine-eudey where did the logo images end up getting stored? In figma someonewhere, google drive? Can you add the links into this issue?

[kristine-eudey]

@ExperimentsInHonesty the logo icons are stored on our google drive. The link is in the resources section of the issue, and also here: Google Drive - Technology icon .svg files

[ExperimentsInHonesty]

Bonnie to talk with Developers to see if we want to put these in the code folders or link to it from the online design system

[ExperimentsInHonesty]

@macho-catt create new issue for having the svgs uploaded to the assets folder