clhenrick / am-i-rent-stabilized Goto Github PK

to fix: use nyc gov's geo client to match to bbls for multiple addresses

When moving between slides, update focus for users of assistive technology.

See this write up for why this is important.

Hello! First of all, thank you for creating and maintaining this awesome tool. I just used it myself.

For what it's worth, I think we can improve the geocoding experience by using the new GeoSearch API that my team at DCP released. It is an autocomplete API like Google Maps (each keystroke is a new request to find possible matches). All suggested matches return a BBL, which can be used as a lookup in PLUTO. Currently, GeoSupport's API requires an additional step of selecting borough, and I think autocomplete is an overall better user experience.

Our team uses our new API in several in-production applications.

Thanks for your time, and if I can help, let me know! Happy to pull request.

That's the one I noticed in your presentation, but best to check whole Web site :)

If a user tabs in the homepage, the UI can end up in a screwed up state:

Possible solutions:

• maybe set tabIndex=-1 on all focusable elements that aren't in the current slide?
• look into using the inert html property (video demo) (requires a polyfill for some browsers)

I didn't get around to this in #58 and it should be added back.

Requirements:

Data

• tenants rights groups spatial search query made to the CARTO SQL API
• redux boilerplate for fetching data, storing state
• firing the redux action for the query after an address search has been made

Sample Query:

SELECT 
  name, 
  full_address, 
  email, 
  phone, 
  description, 
  service_area, 
  website_url 
FROM nyc_tenants_rights_service_areas
WHERE ST_Contains(
  the_geom,
  ST_GeomFromText(
    'POINT(' || -73.957585 || ' ' || 40.65803 ||  ')',
    4326
  )
)

UI

• a modal component (could possibly combine with rent-history modal?)
• logic to update the text in the slide that links to the modal
• move the Handlebars template currently in the <script> tag in the index.html page to its own .hbs partial

Make the current <div> like buttons (begin, next, start over) actual HTML buttons so that users that rely on keyboard navigation can navigate to them and interact with them.

If an address searched is not found, then the user searches a second address that is found the message displayed to the user is that it is not found!

link to:

• the data,
• code on github, and
• github issue cue

cc @jueyang

topics to include:

• Rent Stabilization vs. Rent Control
• Determining Rent Stabilization
• Determining Rent Control
• Governmental orgs: HPD, RGB, DHCR, HDC, TPU, etc.
• Housing Rights Groups and Legal Services
• How it's easy for landlords to lie / not register
• Why file a complaint
• Buyouts: why they're bad
• Landlord Harassment& how to deal with it
• Next steps / Get Involved

Upgrade or remove normalize.css as it mostly isn't needed these days

as per a request from them

Safari iOS:

• fix position of search button for address form
• allow scrolling on tenants rights modal
• fix vertical centering on last slide and checking sprite
• fix column height for when local tenants-rights groups == true

when the address doesn't geocode prompt the user to re-enter their address.

Rentlogic:

Rentlogic helps people find out everything about an apartment before they sign a lease, including mold, bedbugs, vermin or if the landlord has a history of tenant harassment

Rentlogic ayuda a la gente a encontrar todo lo necesario sobre un apartamento antes de firmar un contrato de arrendamiento incluyendo información sobre moho, chinches, bichos o si el propietario tiene una historia de acoso al inquilino.

在您签订租约之前，您可以借助Rentlogic了解您公寓的一切：房里是否有霉菌？臭虫？老鼠？抑或是房东是否对曾经的租户进行过*扰？

HRI:

HRI is a legal mobilization effort that systematically and proactively investigates rent fraud in rent stabilized buildings and connects tenants to legal support

HRI es un esfuerzo de movilización legal que investiga de manera sistemática y proactiva cualquier caso de renta fraudulenta en edificios de renta estabilizada y que conecta a los inquilinos con apoyo legal.

HRI是您随时随地的法律后援团，竭诚为您提供房租欺诈调查与法律支持的服务

• not so specific
• use responsive mixins

• url: http://stabilizingnyc.org/
• description: Stabilizing NYC is a coalition comprised of fourteen grassroots neighborhood-based organizations, a citywide legal service provider and a citywide housing advocacy organization who have come together to combat tenant harassment and preserve affordable housing for the New Yorkers who need it most. This project combines legal, advocacy and organizing resources into a citywide network to help tenants take their predatory equity landlords to task for patchwork repairs, bogus eviction cases, and affirmative harassment.
• operates in: BK, MN, QN, & BX

For some reason after multiple searches the map doesn't always center on the marker.

On larger laptops / desktop layouts the text overflows into the second column:

Adjusting the font-size for the p element to 2.3em fixes it:

Needs to be checked more though.

If you put in your address but leave "Select Your Borough" blank, the information never loads, and no error is shown -- the app instead shows the loading spinner forever.

• make email a mailto: link
  • prefill the subject and body with sensible defaults
• make the telephone number a tel: link
• explain what DHCR means

Don't show all parts of the UI initially — you can scroll down to see things you shouldn't.

The benefits of ditching the HandlebarsJS based translation implementation and instead using vanilla HTML with a localization JS library such as i18next would be:

1. The page would at least still load if JavaScript was disabled by the user
2. A localization library could also help with supporting other important features relating to localization such as date/time formatting
3. Would possibly make the HTML markup a bit easier to maintain?

Could probably keep/utilize the current implementation of the locales JSON files in app/public/locales

Using the address input from the user inform them of their nearest tenants rights group along with its contact info, etc.

until fixed don't alter app/css/main.css for production

Here are some break points that need to be designed around, probably will also benefit to dry-ify some CSS.

Tablet

Main Page:

Portrait View breakpoints:

• map slide give more margin to top
• fix address search slide
• fix font size for options
• more even spacing on last slide

Landscape View breakpoints:

• fix elements on slide 2 for address search
• fix spacing / size of elements on calendar slide

Mobile:

Main Page

Portrait View breakpoints:

• Q: What is the best way to detect mobile? max-width or min-width?
• 420px:
  • solution: using max-width 420px
• Q: height varies a lot in mobile (eg: iPhone 4 vs. iPhone 6plus),
  should solution be to design multiple layouts based on mobile height?

Desktop

Main Page

Height based break points:

• 565px:
  (small screens as well as landscape view on mobile)
  • bottom arrow crashes into text
  • last slide share icons disappear
• < 640px: on slide 2 the 'select borough' dropdown goes below window.

Width based break points:

• 980px nav bar lists crash into Title
  • solution: toggle hamburger icon
• 980px address input crashes into progress circles
  • solution: stack input & drop down
• 1100px: <h1> tags crash into language toggle
  • Q: how to balance this without stacking the text too much?
    make the font size smaller?

Why, How Resources Pages

Width breakpoints:

• 980px: content crashes into side nav
  • fix by making flexible columns?

will require translations (locales JSON files) and a Handlebars template

ideas:

• translatewiki.net
• https://github.com/fnando/i18n-js
• ember js

• fix issues with CSS over-riding CartoDB JS CSS (references #15 )

When the GeoClient API doesn't recognize an address, it may still return a BBL which could result in an incorrectly geocoded address. It does however, return an error message such as:

"message": "NON-ADDRESSABLE PLACE NAME, BRIDGE, TUNNEL OR MISC STRUCTURE NOT FOUND"

The callback of the GET request to the GeoClient API should check for such a message, and if one is returned it should ask the user to try searching the address again:
https://github.com/clhenrick/am-i-rent-stabilized/blob/master/app/js/app/app.map.js#L68

Here's an example API call that returns such a response when searching for "One Metro Tech Center, Brooklyn":
https://api.cityofnewyork.us/geoclient/v1/address.json?houseNumber=One&street=Metro+Tech+Center&borough=Brooklyn&app_id=REDACTED&app_key=REDACTED

For example with short screens on mobile devices the bottom nav arrow crashes into elements above it:

From http://www.neighborhoods.nyc/index.html > Tenant Protections:

It is illegal for building owners to force tenants to leave their apartments or surrender their rights. If you are a tenant in an apartment in the City who is being harassed by your landlord, you can get information and help. You may be eligible for free or low-cost legal assistance.
Harassment of tenants by landlords or owners can include:
Not offering leases or lease renewals, or repeatedly trying to pay you to move out.
Unjustified eviction notices or illegal lockouts.
Threats and intimidation, such as late-night phone calls.
Overcharging for a rent-regulated apartment.
Failure to provide necessary repairs or utilities.
Deliberately causing construction-related problems for tenants, such as working after hours, blocking entrances, or failing to remove excessive dust or debris.

The pages "why it matters", "how it works", and "resources" should appear in the url hash like amirentstabilized.com/how/, amirentstabilized.com/why/, amirentstabilized.com/resources/.

seems like simplest way to implement: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

also lighter weight libraries as well:

• https://github.com/soyjavi/QuoJS
• http://hammerjs.github.io/
• few others on this stackoverflow post

with new MapPLUTO data and to include properties with 421a tax exemptions.

Sample mocks for providing link at the end of search:

Linking to the building page would have to be done by BIN, (see BIN to URL CSV), so would need to grab the BIN from the GeoClient API.

Really impressed with your app! Thanks so much.

When using it I noticed a bit of a bug with the scroll behavior that makes it a bit difficult to use. The left side scroll indicators don't click and there is no ability to go back to change the address. Additionally if I use the scroll on my mouse it always bring me to the bottom of the page. No way back up.

I made a short video here: https://drive.google.com/file/d/1k0PSXm9RWbCdspoMPUoYvl58p7nnRS2X/view

These are small issues. I bring them up because the app is the best I've seen this for this information and I want more people to use and enjoy it!

Thanks again for this great project!

Because no one is paying me to work on this :)

users seem to want to click the progress circles to navigate the main page

On some android mobile devices when the user selects the address search, the keyboard display shortens the height of the browser's window causing the css media query to display the landscape message and thus not allowing the user to actually enter an address.

solution: Use media query to detect device rotation instead of height.

from $2500 to $2700 in resources

Update Spanish to be more informal & friendly rather than formal.

"We are a program of Flatbush Development, but we run as our own unit within the organization. I'm wondering if you could add us to the resource section (same office as FDC) -- please feel free to use my email address and telephone number: ftcoalition [at] gmail [dot] com 718.635.2623"

• somehow the URL's got out of order in the list of organizations starting at Make the Road NY.
• there is a repeat of Eviction Intervention Services that links to the resources page, this should be removed completely.