Let’s make a form that’s similar to the add location form, but for organizations…
https://foodoasis.la/organizations/

@malakdlo and @ravencofer may have started designing this already?

and

Here is the svg icon
gps.svg.zip

As a FOLA user, I would like to be able to find a resource that is open at a certain time, so that I can plan ahead

• default to “anytime” “anyday” and then you could adjust
• under anytime would be times by 30 min increments
• we could make them multiselect dropdowns if we think people really need that much control (i think this is out of scope/not needed)

Let’s show how far away the user is from the address listed on the location details page…
https://foodoasis.la/community-garden/spring-street/

The template for the page is located here…
https://github.com/foodoasisla/site/blob/master/_layouts/location-details.html

The latitude and longitude of the location is available in the “page” object and can be added to the page template like this…

{{ page.latitude }}
{{ page.latitude }}

You may want to add these as data attributes on an HTML element, or inside a script tag, so you can access them with JavaScript more easily.

The page template is written using Liquid.

To test the website locally, you can run Jekyll.

Once the data is on the page, you can use the browser’s Geolocation feature to discover where the user is and then calculate the distance. You can see an example in the script for the location list page…
https://github.com/foodoasisla/site/blob/master/assets/js/location-list.js

If you look for geolocation and getDistanceInKilometers_Haversine, you’ll find some code that you can copy as a starting point.

Once you have the distance, you show it in an element on the page–and then you’re all done!

Here are some guidelines from Google…
https://support.google.com/webmasters/answer/156184?hl=en

One of these may help as well, since we’re using Jekyll…
https://github.com/jekyll/jekyll-sitemap
https://github.com/kinnetica/jekyll-plugins

The list page is a little vague right now, in regards to where the location of the user is assumed to be.

Here’s an example:
https://foodoasis.la/list/?address=DTLA

We could solve this by showing the address of the location we’re assuming the user is in; or a small, non-interactive map with a dot (or maybe something else I haven’t thought of).

An easy way to start might be to add the posts manually, using the embed code they provide. Here’s an example…
https://www.instagram.com/p/BT13CuOgZW3/?taken-by=foodoasisla

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BT13CuOgZW3/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Special shoutout to our awesome team members Nina and Raven for speaking on behalf of Food Oasis and @hackforla at this year&#39;s Feeding the 5000 event! #zerowaste #f5kUSA</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by Food Oasis LA (@foodoasisla) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-05-08T18:33:27+00:00">May 8, 2017 at 11:33am PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Or if we want to get really fancy, we could use the Instagram API to include posts automatically.

Let’s make the header on the locations page look nice on different size screens…
https://foodoasis.la/locations/?address=San+Gabriel

Here’s the design we’re aiming for…

The styles for this page are here…
https://github.com/foodoasisla/site/blob/master/assets/css/beta.css

This tutorial may help. : )
http://flexboxfroggy.com

Halina has started translating the home page into Spanish (issue #14)…
https://foodoasis.la/es/

Let’s add a way for visitors to reach the page. This could be as simple as a link on the English version of the home page, that says something like “View this page in Spanish” (written in Spanish, of course).

We’re currently using latitude and longitude to make the URL for each detail page unique, since some chain stores have the same name. This works well, but looks a little funny, especially in search engine results.

We could improve this by using a unique generated identifier instead, and moving the name to the end of the URL. For example…

/community-garden/[unique-id]/proyecto-jardin
/grocery-store/[unique-id]/whole-foods-market

Malak took some beautiful photos of the Erika J. Glazer Community Garden that we could add to the website.

Step 1: Ask @malakdlo if it’s okay to add his photos to the website.

Step 2: Download the photos

Step 3: Upload the photos to GitHub. /assets/images/photos might be a good place for them.

Step 4: Add them to the markdown file

Here’s an example of a location with images…
https://github.com/foodoasisla/site/blob/master/_farmers-market/santa-monica-downtown.md

And here’s some information about using markdown…
https://guides.github.com/features/mastering-markdown/

Could instead get the URL of an individual item in a collection using collectionname.url in Jekyll, instead of using hard-coded "uri" property on each location.

Right now, it is unclear that the site has resources for people who aren't currently searching for food (academics, policy makers, etc)

@ravencofer had an idea for a split homepage

Jekyll has a jsonify filter to easily convert form one data type into JSON! See this blog post for a nice example: https://learn.cloudcannon.com/jekyll/output-json/

Create a single clear page with CTAs based on interests

Can we add a quick check / uncheck all for the filters? Something along the lines of this...

In this.... if even one thing is checked it says uncheck all.

The content for the about page is located here…
https://github.com/foodoasisla/site/blob/master/es/about.md

And you can view the page here…
https://foodoasis.la/es/about/

Halina can help with the translation.

The README file here has more details…
https://github.com/foodoasisla/search

Let’s update the contributors on the team page with the latest names from our Google Spreadsheet (@ravencofer or @joshuazrobins can provide access).

Here’s a page where you can make the changes…
https://github.com/foodoasisla/site/edit/master/team.md

Don’t forget to add yourself! : )

Make the team page look more professional

We’re doing a few things on the website that may require legal notices…

• We ask users for their location when they perform a search.
• We use Google Analytics to collect information about them.
• Google Analytics uses cookies, which may require an additional notice.
• We’re providing food source locations and hours, which may not be accurate.

Shopify has some tools that may help…
https://www.shopify.com/tools/policy-generator
https://www.shopify.com/tools/policy-generator/terms-and-conditions

We could link to these at the bottom of the page, and it might also be a good idea to ask users to agree to them before showing search results.

When viewing the map page on a small screen, you may have to zoom out before you’ll see any food sources. Here’s an example…
https://foodoasis.la/map/?address=Silver+Lake

(Hint: Give it a try on your phone.)

A quick fix might be to find the closest location (or top twenty locations?) and zoom the map out until that point and the user’s location are visible.

This solution may help…
http://stackoverflow.com/questions/16845614/zoom-to-fit-all-markers-in-mapbox-or-leaflet

The “findClosestMarkers” function in this file is a good place to start…
https://github.com/foodoasisla/site/blob/master/assets/js/map.js

Let’s create a redirect from https://foodoasis.la/survey to https://foodoasisla.typeform.com/to/ojwSQ9 to make it easier to reach the survey.

Example file

Here’s an example redirect file:
https://github.com/foodoasisla/site/blob/master/prototype.md

You can try it out by visiting this URL:
https://foodoasis.la/prototype/

Steps

Here are some steps you can follow to make a new redirect…

1. Create a new file with a name that matches the URL you want to redirect from. For example, a file named food.md could act as a redirect for foodoasis.la/food. You can place this file at the root of the website.

2. Copy and paste this example code into your new file:

---
layout: default

title: Redirecting to Example Location

redirect: https://example.com
---

# Redirecting to Example Location…

[https://example.com](https://example.com)

3. Change the “redirect” URL to the place where you want to redirect to.

4. Update the page title and content with information about the redirect.

Background

Since the website is hosted on GitHub, redirects are done on the client side. When the site is generated, the “redirect” URL is translated into a refresh element…

<meta http-equiv="refresh" content="0; url=https://example.com" />

The title and content of the page are helpful to search engines and also provide a fallback for users–just in case the meta element doesn’t work.

On desktop, can we change the design of the filter button

filter.svg.zip

Motivation

We’d like to limit the locations on the map to just those closest to the user. This will save bandwidth and processing time, since we won’t be loading so many points. It will also allow us to use large marker graphics which are easier to press than the tiny dots we have currently–without making the map look too busy. Overall, it may make the map a lot more useful as an everyday tool.

The current map gets all of its data from MapBox…
https://foodoasis.la/map/?address=San+Gabriel

There doesn’t appear to be a way to customize this data, based on the user’s location. So we may need to use data from the site or backend repository instead.

Examples

The list page uses data from the site repository…
https://foodoasis.la/list/?address=San+Gabriel

The distance calculations are done with JavaScript…
https://github.com/foodoasisla/site/blob/master/assets/js/list.js

Here’s an example of a map using local data, from the Mapbox team…
https://github.com/foodoasisla/site/blob/map-from-local-data/map/listings-example.html

Jessica and Jim copied this and made a prototype in the map-from-local-data branch…
https://github.com/foodoasisla/site/blob/map-from-local-data/map/listings.html

Resources

The data can be found here…
https://github.com/foodoasisla/site/blob/master/_data/

And here are the marker images…
https://github.com/foodoasisla/site/tree/master/assets/images/map

Throwing these all into one issue for now:

• DONE: Unicode characters break the base64 encoding (window.btoa) used when creating the new file on GitHub. To fix this: See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa (Note: the Mavo project uses the quick fix using encodeURIComponent)

• Bug: After user logs in with GitHub, if they refresh the page, the app tries to log them in again using the temporary code that's still in the URL params, which throws a 401 error "Request failed: Unauthorized". To fix this: either remove the temporary code from the URL after the user is successfully authenticated, and/or implement user sessions (maybe just use localstorage?)

• Bug: If user has already submitted something, the link to their pull request won't work (GitHub sends a 422 error because the pull request already exists). To fix this: check if user already has a pull request open and if so, grab the link (instead of trying to create a new pull request)!

• Code improvement: No more global variables! Or just wrap it in an IIFE.

• Code improvement: Add a polyfill for Promises and also for element.classList and any other newer JS features for wider browser support.

• Functionality improvement: Use nice HTML form with all metadata in separate fields and put all those fields into properly formatted YAML/front matter when creating the new file!

• Functionality improvement: Create file name and Pull Request title / body based on the user input (like maybe make the filename a URL-encoded version of the suggested location name)

There are two vendors who sell produce, inside of Grand Central Market…

District Market
http://www.grandcentralmarket.com/vendors/542/district-market

Torres Produce
http://www.grandcentralmarket.com/vendors/37/torres-produce

Here’s a form you can use to add locations…
https://foodoasis.la/add/

And here are some photos…

Here’s a form you can use to add a new location to the map…
https://foodoasis.la/add/

And here’s an example orchard…
https://github.com/foodoasisla/site/blob/master/_locations/orange-trees-at-los-angeles-state-historic-park.md

Here’s some information about the park…

• https://www.yelp.com/biz/del-aire-public-fruit-park-hawthorne
• http://parks.lacounty.gov/wps/portal/dpr/parks/del_aire_park
• http://fallenfruit.org/projects/public-fruit-park-los-angeles/

Let’s add a website address to the “Grace Resources” location page. We might also want to change the name from “Grace Resource Center, Inc” to something more friendly, like “Grace Resource Center”.

You can see the page here…
https://foodoasis.la/food-pantry/grace-resource-center-inc-/

And you can edit here…
https://github.com/foodoasisla/site/edit/master/_food-pantry/grace-resource-center-inc-.md

Google Maps may have more information…
https://goo.gl/maps/oL4o1gaKucn

And also Yelp…
https://www.yelp.com/biz/grace-resource-center-lancaster

Bonus Points: Change the name of the file to something simple like “grace-resource-center”. This will make the URL a little friendlier. To make this work, we also need to update the “uri” attribute inside the file.

Hey people @here! Our very own Raven Hardison is going to give a short presentation about Food Oasis LA at LACMA this Thursday, July 13. Come see her and enjoy the pecha kuchas!

https://www.eventbrite.com/e/grants-reactionresponsereality-the-arts-in-los-angeles-in-2017-registration-35543543696

This logo file may help…
https://github.com/foodoasisla/site/blob/master/assets/images/fola.svg

This is a handy app for making favicons…
https://itunes.apple.com/us/app/icon-slate/id439697913?mt=12

(There are lots of online tools as well.)

Here’s a page template where links to the icons can be placed…
https://github.com/foodoasisla/site/blob/master/_layouts/default.html

For example:
<link rel="icon" type="image/png" href="/assets/images/favicon.png" />

If we provide a range of sizes, browsers can use the small one in the URL bar and the large one for bookmarks…

Here’s some more information about formats…
https://css-tricks.com/favicon-quiz/

We’re currently loading most of our icons from separate SVG files. Let’s move them into the HTML instead, for faster load times–and to help the pages work well offline.

Here’s an example of an inline SVG…

<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <switch>
    <path d="M17.631 5.93c-0.394-0.913-1.185-1.682-2.281-2.158-0.968-0.422-2.012-0.471-2.96-0.214s-1.801 0.956-2.388 1.767c-0.588-0.811-1.44-1.511-2.389-1.767-0.949-0.258-1.991-0.207-2.96 0.214-1.096 0.476-1.885 1.243-2.281 2.158-0.394 0.912-0.397 1.974 0.103 3.027 1.062 2.257 7.494 7.55 7.529 7.64 0.033-0.090 6.466-5.383 7.53-7.64 0.498-1.053 0.496-2.115 0.101-3.027z"></path>
    <foreignObject>Heart</foreignObject>
  </switch>
</svg>

And here’s a resource that may help…
https://css-tricks.com/can-make-icon-system-accessible/

We have new menu on the staging website that slides out from the left side. We’re using some advanced CSS properties like transform that aren’t supported in all browsers. In those browsers the menu appears to be stuck in the “active” state.

One way to work around this might be to show a link to the footer menu by default, and then replace this with the slide out menu, in browsers that support the CSS features we need.

Feature Detection

The @supports property or modernizr library may help with feature detection…

@supports on MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Modernizr
https://modernizr.com

Replacement

To switch between the two menus, we could use CSS…

<nav class="slideout-menu" style="display: none">…</nav>

/* Replace the default menu with a slide-out menu. */
.nav-link {
  display: none;
}
.slide-out-menu {
  display: block !important; /* !important will override any inline style applied to this element. */
}

Or we could use JavaScript…

<script type="text/template" id="slideout-menu-template">
  <nav class="slideout-menu">…</nav>
</script>

// Replace the default menu with a slide-out menu.
var template = document.getElementById('slideout-menu-template');
header.insertAdjacentHTML('afterbegin', template.innerHTML); // https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
header.removeChild(navLink);

Device testing

Browser Stack provides a way to do testing and has a free trial…
https://www.browserstack.com

Here’s a screenshot of the Galaxy S3 on Android 4.1…

The content for the Spanish home page is in this file…
https://github.com/foodoasisla/site/blob/master/es/index.md

And you can view the page here…
https://foodoasis.la/es/

Halina can help with the translation.

The hours for these two Ralphs locations don’t seem quite right.

1. https://foodoasis.la/supermarket/ralphs-645-w-9th-st/
2. https://foodoasis.la/supermarket/ralphs-11727-w-olympic-blvd/

Let’s look them up on the web, and fix the hours. You can make changes by editing these markdown files…

1. https://github.com/foodoasisla/site/edit/master/_supermarket/ralphs-645-w-9th-st.md
2. https://github.com/foodoasisla/site/edit/master/_supermarket/ralphs-11727-w-olympic-blvd.md

After a few minutes, your changes will appear on the staging website…

1. https://staging.foodoasis.la/supermarket/ralphs-645-w-9th-st/
2. https://staging.foodoasis.la/supermarket/ralphs-11727-w-olympic-blvd/

Bonus points: Look for other locations with broken hours. One way to do this would be to download the project with GitHub Desktop and then search through the markdown files using a text editor like Atom.

Flickr has a handy search feature that lets you search for “creative commons“ images on their site:
https://www.flickr.com/creativecommons

https://www.flickr.com/search/?text=farmers%20market&license=2%2C3%2C4%2C5%2C6%2C9

We’ve also had some luck taking photos at events like LA Food Day, where we found this awesome pop-up market…
https://dailyorganicsla.com

The photos we currently have are in this folder…
https://github.com/foodoasisla/site/tree/master/assets/images/photos

And the code for the home page is here…
https://github.com/foodoasisla/site/blob/master/_layouts/home.html

We’re using ES2015 features in our JavaScript that are only supported in the latest version of some web browsers. Let’s support more browsers by using Babel to translate our JavaScript files into old-school JavaScript.

Bonus Points: Get Source Maps working too.

@kimhjona got this process started while making a Webpack/React test page

Let’s test the website on some different devices to be sure it’s working for a broad audience.

Browser Stack is an easy way to do this, and offers a free trial…
https://www.browserstack.com

They also have a plan for open source projects…
https://www.browserstack.com/pricing

Repo steps:

1. go to filters and uncheck food deserts
2. view map - food deserts are gone
3. go back to filters and it is checked again! ¯_(ツ)_/¯ who knows why?

The “claim business” button on the location page currently opens the user’s email program and auto-fills a message to us. This might be improved by showing a web form instead.

We could start with something simple, like a Google Form or Formspree form.

TBD: What fields should this web form have? (Raven, Amanda, or Josh may have recommendations)

You can see an example button here…
https://foodoasis.la/community-garden/spring-street/

The template for the location page is here…
https://github.com/foodoasisla/site/blob/master/_layouts/location-details.html

Bonus Points: Use the same form style for the “Report Issue” button (@joshuazrobins may have recommendations for this.)

Here’s some information from Google’s webmaster guidelines…
https://support.google.com/webmasters/answer/2620865?hl=en

The site map file is located here…
https://github.com/foodoasisla/site/blob/master/sitemap.xml

And the Spanish pages are located here…
https://foodoasis.la/es/
https://foodoasis.la/es/about/

The content for the navigation is in this file…
https://github.com/foodoasisla/site/blob/master/_data/locales.yml

And you can see an example Spanish page here…
https://foodoasis.la/es/

Halina can help with the translation.

Let’s look for a way to detect if the map is supported in a user’s browser– and if it isn’t–show a message to the use to let them know, and recommend other options.

The address on this location includes a tip for finding the market…
https://foodoasis.la/farmers-market/long-beach-downtown-cfm/

Let‘s move that information to the description area, after the data. Here‘s an example…
https://github.com/foodoasisla/site/blob/master/_locations/everytable-downtown-la.md

You can edit the Long Beach Farmers Market page here…
https://github.com/foodoasisla/site/blob/master/_farmers-market/long-beach-downtown-cfm.md

This is a quick mock up, so the alignment is wrong, but you get the idea.

Let’s add some fields to the add location page so users can enter the days and hours that a location is open.

Here’s an awesome sketch that @ravencofer made, that illustrates how this might look…

Here’s the HTML and JavaScript…

• https://github.com/foodoasisla/site/blob/master/add.md
• https://github.com/foodoasisla/site/blob/master/assets/js/github-backend.js

And here’s an example markdown file with hours…
https://github.com/foodoasisla/site/edit/master/_summer-lunch/1st-place-sports-complex.md

The data looks like this…

daycode1: MON
day1_open: '1230'
day1_close: '1330'

daycode2: TUE
day2_open: '1230'
day2_close: '1330'

formatted_daycode1: Monday
formatted_day1_open: '12:30pm'
formatted_day1_close: '1:30pm'

formatted_daycode2: Tuesday
formatted_day2_open: '12:30pm'
formatted_day2_close: '1:30pm'

Here’s an example page…
https://foodoasis.la/community-garden/spring-street/

Bonus Points: Add an “Open Now” indicator based on the user’s clock.

The Farmer’s Market locations have some example data to work with…
https://github.com/foodoasisla/site/blob/master/_data/farmers-market.csv