Locales: Made in LA

CCC_statement.JPG

Update: Color<Coded> launched Locales on November 16 with a campaign—”Keep It Locales” (Buy Local)—to support the sustainability of small businesses in our communities by increasing their visibility and promoting ethical spending. We were generously hosted by one of our profiles (and the hottest spot for micheladas), La Chuperia.

LOCALES is a web platform that connects residents of Los Angeles with small businesses that are owned and operated by people of color (currently in English and Español). The tech collective I joined in May, Color<Coded>, is working on a “soft” launch of the service next month. For now, I’m pleased to share that some suggestions I made via Slack are leading us to consider accessibility, styleguides, and careful form design in our process. Also, I’m building something with React, Babel, and Webpack (vs. Ruby on Rails)!

thinking about accessibility is indispensable when building technologies!

* accessibility includes language

Resources include: “Accessible UI Components for the Web” by Addy Osmani, The A11y Projectally.jsWebAIM Color Constrast Checker, randoma11y.com, Sim Daltonism/Color Oracle, Marvel’s Styleguide, Nicole Saidy’s Intro to Style Guides, Frontify, multilingual.js

Processed with VSCO with hb2 preset

Processed with VSCO with hb2 preset

Processed with VSCO with hb2 preset

locales-homepage-updates-recommendform_1024
“Recommendation Form” mockup by Aldo Puicon
let React = require('react')

module.exports = React.createClass({
 displayName: 'Form',

getInitialState() {
 return {
 name: '',
 phone: '',
 ownerNames: '',
 address: '',
 recommendation: ''
 }
},

render() {
 return (
 <form>
 <label>
 Name of Business
 </label>
 <input type="text" value={this.state.name} onChange={(event) => this.onInputChange(event, 'name')}/>

<label>
 Business Telephone Number
 </label>
 <input type="text" value={this.state.phone} onChange={(event) => this.onInputChange(event, 'phone')}/>

<label>
 Name of Owner(s)
 </label>
 <input type="text" value={this.state.ownerNames} onChange={(event) => this.onInputChange(event, 'ownerNames')}/>

<label>
 Business Address
 </label>
 <input type="text" value={this.state.address} onChange={(event) => this.onInputChange(event, 'address')}/>

<label>
 Why are you recommending this business?
 </label>
 <input type="textarea" value={this.state.recommendation} onChange={(event) => this.onInputChange(event, 'recommendation')}/>

<button onClick={this.onSubmit}>
 Submit
 </button>
 </form>
 )
 },

onSubmit() {
 alert('You submitted ' + this.state.name)
 },

onInputChange(event, key){
 let newInputState = {}
 newInputState[key] = event.target.value
 this.setState(newInputState)
 }
})

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s