hackforla / food-oasis Goto Github PK
View Code? Open in Web Editor NEWRepository for the current redevelopment of the Food Oasis Los Angeles website
Home Page: https://foodoasis.la
License: GNU General Public License v2.0
Repository for the current redevelopment of the Food Oasis Los Angeles website
Home Page: https://foodoasis.la
License: GNU General Public License v2.0
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Overview
Connecting with orgs to build our database of stakeholders.
Action Items
Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions
Outlet Database
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Will help us keep track of improvements and announce releases.
Let’s add a print style sheet for the map page…
https://foodoasis.la/locations/
Here’s an example name and place for the file…
/assets/css/print.css
We can include it on the page, by adding a <link>
element to the default template…
https://github.com/foodoasisla/site/blob/master/_layouts/default.html
For example…
<link rel="stylesheet" media="print" href="/assets/css/print.css" />
This should come after the other style sheets on the page, so it can override the rules inside them.
A simple improvement we can start with might be to disable the rules that limit the height of the list…
.has-active-map.location-list main {
height: auto;
overflow: visible;
}
That way, all of the list items will appear when printed.
Another improvement we can would be to replace the <canvas>
element with an image, since most browsers will print an image, but will perhaps skip a canvas element when printing.
Here are a few resources that may help…
Once we have printable map, we may want to advertise the feature by adding a print button to the page. We could place this next the filter button. For example…
<li class="filter">…</li>
<li class="print"><button type="button" onclick="window.print();">Print</button></li>
From a design point, here's what that button can look like:
print.svg.zip
Show users what we map and let them know the type of data that we are looking for!
As a FOLA user I want to be able to search for a location by name, so that I can find a specific place
Not sure this is the most elegant solution, but if a user wants to search for a specific place, it is difficult/impossible right not unless they know the exact name. Adding a free text search to the "find" dropdown could solve this
This would be either/or - either they search by name or they search by the content types.
Another solution would be to make the "find" box always be a text input (no dropdown), but then we get back into issues of users not understanding what types of data we offer
Now that we have a lot of categories to choose from on the filters page, it takes some effort to uncheck them, and choose just one…
https://foodoasis.la/filters/
One way to solve this might be to replace the “reset” button with a new button that toggles between “uncheck all” and “check all”. (Thanks for the idea, Raven!)
The image at the top of the home page is gigantic, and may be using a lot of bandwidth on small devices. We could improve this by using the new srcset and sizes attributes of the image element to serve smaller files.
Here’s the template for the home page…
https://github.com/foodoasisla/site/blob/master/_layouts/home.html
The first step will be to create different size images from the original files…https://github.com/foodoasisla/site/tree/master/assets/images/photos
And the second step will be to serve the appropriate image for the user’s device.
It might be nice to store the different size images in folders, named by their pixel width. For example…
/assets/images/photos/1000-wide/1.jpg
/assets/images/photos/1000-wide/2.jpg
/assets/images/photos/1000-wide/3.jpg
/assets/images/photos/2000-wide/1.jpg
/assets/images/photos/2000-wide/2.jpg
/assets/images/photos/2000-wide/3.jpg
We could do this manually with a tool like Photoshop, or generate the images automatically with ImageMagick or GraphicsMagick.
Here’s a Node package that supports both libraries…
https://www.npmjs.com/package/gm
And here’s a working example, using Gulp…
https://gist.github.com/jimthoburn/9799536fc0294c027e8b03063ae56061
Browsers have built-in responsive image features…
https://cloudfour.com/thinks/responsive-images-101-definitions/
These work best with <img />
elements, but we’re presently using a CSS background-image
.
Here are a few ways we can solve this…
A. Switch to an <img />
element. (I can help with this.)
B. Use the experimental CSS image-set feature.
C. Use CSS media queries.
D. Manually check for screen size and resolution, and choose an image using JavaScript.
Option A is generally the ideal choice, since it puts the user and their device in control of what image should be downloaded. Options B and C might be easier to implement. I think Option D could also be good choice in this case–since we’re already using JavaScript to choose an image and add it to the page.
These properties may help…
Device Width
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
Device Pixel Ratio
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Let’s add a button on the locations page that will find your position and refresh the map.
If you visit the locations page without entering your address, the map will try to guess your location…
https://foodoasis.la/locations/
If you do enter an address, the map will show that location instead…
https://foodoasis.la/locations/?address=San+Gabriel
In both cases, the map will stay fixed at that location.
Let’s add a button that will look for your location and update the map and the list.
This could be as simple as refreshing the page (leaving out the address), to start with.
Bonus points: If no address is present, automatically update the location as you move around the city!
Extra bonus points: Add another button that lets you update the locations on the map after zooming and panning–similar to the “Redo search in map” feature on Yelp…
https://www.yelp.com/search?find_desc=tacos&find_loc=Los+Angeles%2C+CA&ns=1
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
These two locations have a latitude and longitude that doesn’t match their address…
Let’s fix these and look for others with the same issue.
One approach might be to automatically generate a list that shows the latitude and longitude for each location in our data alongside a latitude and longitude from the Google Maps or Mapbox geolocation API (i.e. pass them the location address and see what comes back).
FOLA Latitude | FOLA Longitude | Google Maps Latitude | Google Maps Longitude |
---|---|---|---|
42.1077661 | -87.9903638 | 34.0498231 | -117.9359278 |
If the coordinates are very different, we could flag that location for a human to double-check.
Here’s a Node.js script that may help…
https://github.com/foodoasisla/site/blob/master/_node/update-markdown.js#L84-L121
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Overview
Connecting with orgs to build our database of stakeholders.
Action Items
Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions
Outlet Database
Many of the locations on the website have a phone number with a missing space character. For example, the San Gabriel Mission…
(626)457-3035
This should probably look like this instead…
(626) 457-3035
Or maybe this…
626-457-3035
A few ways we could solve this might be…
Make phone numbers look nicer on summer lunch locations, that include a persons name…
https://foodoasis.la/summer-lunch/la-villa-mariposa/?type=summer-lunch
Make closed dates and field trip dates look more standard and nicer on summer lunch locations…
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Allow users to select what options/features they want to report/change.
See mapbox example:
https://www.mapbox.com/feedback/?referrer=https://foodoasis.la/locations/#/-118.28853301000001/34.28272567834216/9
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Let’s create a map for policy makers that shows all of the food locations and food deserts.
Here’s a previous version the map that may be a good starting point…
https://foodoasis.la/map-all-locations/?address=Valley+Boulevard+and+Medford+Street
From jlipshin:
Hi FOLA friends. 🙂 Just something that I am noticing as I'm visiting food pantries and calling them: a lot of the data about opening hours is incorrect.
I've visited three food pantries in the downtown area and called probably 4-5 others. And the hours have consistently been off...
Any ideas for how we can validate correct opening hours in a way that isn't super time consuming?
Instead of using the GitHub API to make commits on the user's behalf, which requires users have a GitHub account, a couple other options to look into are:
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
We’re doing a few things on the website that may require legal notices…
Here’s an example from the gov.uk website…
https://www.gov.uk/help/cookies
Shopify has a tool that may help…
https://www.shopify.com/tools/policy-generator
(@joshuazrobins got this task started.)
Bonus Points: Give users an option to opt-in to tracking. We have a do not track script that sort-of does this, based on the user’s browser settings.
Super Bonus points: Consider how this might relate to the Terms of Use
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
On desktop, add a permanent search box to the top bar (related to https://github.com/foodoasisla/site/issues/90)
Here is our searchable database of organizations in Los Angeles active in helping to create Food Security for all Angelenos.
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Overview
Connecting with orgs to build our database of stakeholders.
Action Items
Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions
Outlet Database
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
The detail pages have a map with the food source’s location, and a link a full-screen map page with directions (Google Maps).
We could make the map into a giant button that goes to the same place.
Or we could change the map on the page to include directions. Mapbox has an API that may help:
https://www.mapbox.com/api-documentation/#retrieve-directions
Bonus points: Consider using “Mapbox classic” instead of “Mapbox GL” on the detail page, to make it consistent with the locations page: https://foodoasis.la/locations/?address=San+Gabriel
This location is only open 4 days a month, how should we handle?
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
We currently have an option to filter the search result by what’s “open now”.
https://foodoasis.la/filters/?open=1
Let’s allow users to choose a day and time in the future, so they can plan a trip to a healthy food location.
A simple way to start might be to add two <select>
elements–one with the days of the week (Monday–Sunday), and another with the hours of the day (midnight–11am and noon–11pm).
Here’s a script for the “open now“ feature that we have now…
https://github.com/foodoasisla/site/blob/master/assets/js/helpers.js#L99-L135
Bonus Points: Highlight today’s date in the list of hours for each location, and show a special notice if a location is opening soon, closing soon, or has already closed.
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
When the user is on the home page on desktop or mobile, let's split the search box into two so the user can skip the step. (Related to https://github.com/foodoasisla/site/issues/91)
Overview
Connecting with orgs to build our database of stakeholders.
Action Items
Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions
Outlet Database
Let’s inform users that the website is sort of in beta, and that they should confirm location, hours and other information before visiting a healthy food source. For example, they should call a food pantry to confirm they’re open before traveling to it.
We could place a small notice in the header, with more information on a page by itself. Here’s an example from gov.uk…
https://www.gov.uk/help/terms-conditions
Shopify has a tool that may help…
https://www.shopify.com/tools/policy-generator
(@joshuazrobins got this task started.)
Bonus points: Consider how this might relate to the Privacy Notice and Opt In
Show people a list of our features and let them vote or suggest new ones
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
Primary research guide: https://docs.google.com/document/d/1l6KIEb1x7e_3lZdeFKEKsAvcNaD-RlxEHyRruLGdFI4/edit?usp=sharing
Research folder: https://drive.google.com/drive/folders/12r33G1Ui2hpINLVfngR911B20ZclKKo3?usp=sharing
Stakeholder database: https://drive.google.com/drive/folders/1jfMFrMYPeAJHJu2OZ2rUpftJoRW2dEgh?usp=sharing
The previous version of the map had food desert regions marked in red…
https://foodoasis.la/map-all-locations/
This might help Los Angeles residents understand that their home is in a food desert.
We could do something similar on the current locations page, by showing a message like “This location is in a food desert”–perhaps with a link to the FAQs page.
This message could appear if the latitude and longitude fall within a food desert region–assuming that’s not too hard to code.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.