https://github.com/localForage/localForage

Inspiration: http://bikemaps.org

Strava API: https://strava.github.io/api/

https://trello.com/c/KzwcsPss/96-sugest%C3%B5es-autom%C3%A1ticas-de-t%C3%ADtulo-baseados-nos-estabelecimentos-pr%C3%B3ximos

Atualmente no nosso Guia não tem como navegar entre as fotos de uma sequencia de fotos. O usuário é obrigado a clicar na primeira foto, fechar, clicar na segunda, fechar, ...
A biblioteca que usamos pra ver a foto em fullscreen, a Featherlight, tem uma extensão pronta que aparentemente já resolve isso pra nós.
Link: https://github.com/noelboss/featherlight/#featherlight-gallery

Quando um usuário chega no bike de boa por um deeplink, ou seja, um link de bicicletario (ex.: https://www.bikedeboa.com.br/b/1669-bicicletario-shopping-morumbi) o mapa por baixo deveria inicializar centralizado na posição daquele bicicletário. Em algum momento esse comportamento foi implementado, mas não está funcionando mais.

Exemplo de vídeo de usuário se deparando com esse problema (repare que o mapa por baixo está em Porto Alegre, apesar do bicicletário ser de São Paulo):
https://insights.hotjar.com/p?site=476334&recording=1123625919&token=1b9a30347e226fc9b93a7811b2bf0902

Recebemos um feedback por email muito legal sobre não ser recomendado usar links "mailto" na Internet:

"
Quando pensei em fazer essa sugestão, procurei no site se indicava o melhor canal pra isso, achei no FAQ. Mas please não usem mailto e ainda mais sem o endereço de e-mail, quantas serão as pessoas que usam clientes desktop de e-mail ou sabem configurar links mailto para abrir com cliente web?
https://blog.seibert-media.com/2014/10/06/why-mailto-links-should-be-avoided-on-websites/
http://www.problogger.net/10-reasons-to-avoid-mailto-links/
Esses foram os primeiros resultados do Google por "why don't use mailto", devem ter referências melhores.
"

e adicionar GIF pro Opera

https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions

Hoje em dia a maioria dos celulares podem gravar no arquivo da foto a posição de GPS de onde ela foi tirada. Se for fácil de ler esse dado, podemos abrir aqui uma nova maneira de entrar com bicicletários. Imagine uma nova forma de adicionar bicicletários "em massa", onde tu mandaria várias fotos pro bike de boa de uma vez e a gente criaria automaticamente os pins e daria uma forma simples pro usuário de entrar com os detalhes de cada um. Essa issue é pra começar a investigar se isso é possível.

https://stackoverflow.com/a/7585267/1088186
https://github.com/exif-js/exif-js

https://developers.google.com/identity/one-tap/web/get-started

Há muito discutimos a relevância de mostrar ciclovias no bike de boa. Há uma série de pontos positivos e negativos sobre isso, mas esse ticket não é pra discutir isso (ainda).

Um dos maiores pontos negativos de mostrar ciclovias no bike de boa é que não tínhamos dados confiáveis e atualizados das ciclovias ao redor do Brasil. Em Porto Alegre, por exemplo, os dados do Google Maps estão uns 3 anos no passado, e foi um parto conseguir dados oficiais com a prefeitura. Essa abordagem obviamente não é escalável pro Brasil inteiro.
Uma solução que surgiu então foi o OpenStreetMaps, onde os ciclistas de todo Brasil juntam seus esforços e conseguem de fato manter um mapeamento atualizado da estrutura cicloviária das cidades. MAS essa solução não é de toda-maravilhosa, porque simplesmente não há um cliente web decente pra visualizar esses dados. Diferentes apps e sites consomem esses dados de maneiras diferentes, e o usuário comum acaba não sabendo onde procurar isso.
Este ticket então é pra desenvolver algum tipo de integração com esse mapeamento e responder, dentre outras, essas perguntas:

• Como ler os dados do OSM?
  • provavelmente seria de maneira semelhante à iniciativa que está rolando na branch osm_integration
• Como persistir esses dados?
  • salvar no nosso banco de dados?
  • puxar dinamicamente sempre de lá? (só se a resposta não for muito pesada)
  • puxar de lá E salvar no LocalStorage? (é um dado que se atualiza com pouca frequencia? poderia salvar um metadado dizendo qual foi a ultima vez que esse dado foi puxado, e só puxar denovo se fizer mais do que tipo 1 semana)
• Como mostrar no mapa de maneira que seja:
  • intuitivo (não precisar de legendas no mapa)
  • útil
  • bonito (como tudo no bike de boa ❤️ )
• De que outras maneiras podemos aproveitar esses dados? Talvez ele seja útil pra algo além de só traçar os caminhos no mapa e trazer essa informação pros usuários. Por exemplo: dar mais proeminência pra bicicletários próximos de ciclovias?

https://trello.com/c/woAcFFQl/234-mostrar-ranking-da-pessoa-comparando-nro-de-contribui%C3%A7%C3%B5es-dela-com-o-resto

https://stackoverflow.com/questions/38670309/rotating-marker-in-google-maps-javascript-api-v3

https://trello.com/c/oVw36Gap/30-multiplas-fotos-por-biciclet%C3%A1rio

Ver: https://trello.com/c/8bQphtCd/195-melhorar-busca

Este artigo explica diferentes maneiras de melhorar a performance quando tem muitos markers: http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/
E esta é uma lib excelente que agrupa conjuntos de markers quando eles estão muito próximos: https://github.com/googlemaps/js-marker-clusterer

O crawler do Google está devidamente reconhecendo as diferentes páginas do site, mas não está carregando corretamente as metatags, como título e descrição.
Esse problema pode ser constatado fazendo uma busca filtrada por domínio: https://www.google.com.br/?q=site:www.bikedeboa.com.br
Além disso podemos fazer outras coisas pra melhorar o SEO dos bicicletários

• mandar sitemap inicial pro Google Search Console
• microformatos

Tirar JQuery. Ou usar alguma dessas opções:

http://zeptojs.com/
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

http://projects.jga.me/jquery-builder/
jQuery Builder lets you easily build a custom version of jQuery that just includes the modules you need.

https://trello.com/c/mw60cACw/232-desabilitar-avalia%C3%A7%C3%B5es-pra-quem-n%C3%A3o-t%C3%A1-logado

Estamos usando apenas uma pequena parcela das features do Bootstrap, não tem porque carregar a lib inteira e gastar banda e CPU processando ela.

Um custom build pode ser baixado aqui: https://getbootstrap.com/customize/

Nas redes sociais nós costumamos usar bastantes emojis. Achei que talvez fosse legal começar a usar isso no site também nas modais, mensagens, etc.

Achei algumas libs bem populares e faceis de usar:

• https://github.com/twitter/twemoji
• https://afeld.github.io/emoji-css/

https://trello.com/c/0KHlvIHu/74-barra-de-progresso-para-upload-de-fotos

Inspiration: http://tympanus.net/Development/IconHoverEffects/#set-4
Hover.css lib - https://ianlunn.github.io/Hover/
super cool hover effect - http://parcourscanada.com/
http://tympanus.net/Development/HoverEffectIdeas/index.html

https://trello.com/c/J4ZCtGA1/89-mostrar-detalhamento-dos-votos-ver-referencias

Seria interessante a gente começar a taggear as releases em master e integrar isso com o front de alguma forma.
Alguns dos benefícios interessantes:

• Mostrar na interface a versão do aplicativo que a pessoa tá usando, e de quando ela é (pras pessoas verem que estamos sempre melhorando ele)
• Quando tiver uma versão nova com uma feature muito bacana, poderia ter algo no aplicativo que falasse sobre isso (release notes)
• Tracker pelo Analytics quais versões as pessoas estão usando (provavelmente usando uma Custom Dimension, assim podemos cruzar dados de uso com qual versão a pessoa tava usando). Isso é importante porque usamos Service Workers com precache, o que acarreta que a pessoa na primeira vez que acessa ela está com a versão anteriormente baixada do app, e só na próxima visita estará atualizado com a última versão.

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?utm_source=frontendfocus&utm_medium=email

https://dev.opera.com/articles/pwa-resources/?utm_source=frontendfocus&utm_medium=email

https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34

https://jakearchibald.com/2014/offline-cookbook/#cache-persistence

Este projeto tem umas ideias bem interessantes de badges e outros melhoramentos pro Readme https://github.com/storybooks/storybook/blob/master/README.md

Pelo jeito usei Cookies errado minha vida inteira.
https://stackoverflow.com/questions/3220660/local-storage-vs-cookies

Ver: https://trello.com/c/gzjnOPU5/142-melhoramentos-filtros

Ideia

Acho que gera uma UX estranha quando o app abre centrado no usuário porém sem nenhum pin na tela. Talvez fosse interessante que a gente garantisse que no mapa sempre aparecesse o usuário + o pin mais próximo dele.
TALVEZ seja uma boa ideia que essa feature respeite um raio de distância máximo. Digamos que um usuário no meio da Amazônia abre o app, mas o bicicletário mais próximo é em Fortaleza. Isso faria o app abrir mostrando quase o mapa do Brasil inteiro, mas talvez isso não faria tanto sentido.

Implementação

Usando a estrutura de bounds e a função map.fitBounds() do Google Maps é fácil. Ele calcula automaticamente o bounding box entre os elementos que são inseridos no bound, e calcula qual é o ponto do mapa onde ele deve estar centrado e o zoom necessário pra fazer todos pontos ficarem visíveis.

Exemplos

Ruim

Melhor

Testar e integrar essa ferramenta que tá bombando https://prettier.io/

Hoje abri o bike de boa aqui e aparecia como se minha ultima posição salva fosse lá em Porto Alegre! Provavelmente a ultima vez que entrei no site eu explorei aquela região, e algum bug no código misturou o centro do mapa com a posição do usuário e acabou salvando no localstorage aquela posição.

https://trello.com/c/7bNzc7Rk/169-bot%C3%A3o-para-visualizar-ciclovias

Neste vídeo pela primeira vez vi a nossa "detecção de mobile" falhando. Por alguma razão essa pessoa tem um celular com uma resolução altíssima (432px de largura), o que foge do media query que fazemos: https://insights.hotjar.com/p?site=476334&recording=1049583173&token=80227610b0570d18daf2f5382b134c19

Como poderíamos aproveitar o Street View pra dar mais contexto pra um bicicletário?
Fazer a foto inicial do bicicletário ser a imagem da rua naquele ponto?
Ter um botão que abra uma janela pra explorar a rua naquela região?

Ver: https://trello.com/c/mqYWspgu/177-investigar-integra%C3%A7%C3%A3o-dos-estabelecimentos-dos-biciclet%C3%A1rios-com-informa%C3%A7%C3%B5es-do-google-places-facebook

Internacionalizar o site significa criar um sistema de mapeamento de textos que permitirá ter traduções pra várias línguas.

Achei essa lib esses dias, talvez até haja outras até. Essa parte de routing tá super artesanal no código do bike de boa, talvez fosse legal usar alguma solução mais inteligente e robusta.

• https://github.com/krasimir/navigo

Tava usando o Google Maps esses dias e reparei num comportamento interessante: o marcadorzinho de posição atual do usuário fica cinza enquanto ele não tem informações atualizadas sobre a posição.
Ou seja, provavelmente eles aplicam uma estratégia parecida com a nossa de lembrar onde o usuário estava da última vez, mas eles sinalizam de uma maneira sutil que essa informação pode não estar correta.
Acho que seria legal ter isso no bike de boa.

Há outras libs que hoje são bem populares e tem bastante suporte de comunidade.
Talvez nenhuma tenha uma API tão boa quanto a do Google Maps, mas há outras vantagens como o fato de usarem recursos Open Source e de possibilitarem caching offline, o que seria mágico pro bike de boa.

• http://leafletjs.com/
• https://www.mapbox.com/

let's face it: that's what we've always wanted.

Importantíssimo pra quando tivermos o bike de boa funcionando offline. Há ferramentas prontas que fazem isso bem fácil.

Atualmente sempre autenticamos o login batendo com as APIs das redes sociais. Acho que não precisamos fazer isso. Poderíamos salvar todos dados do perfil do usuário no nosso banco de dados, e salvar um Cookie pra logar a pessoa automaticamente depois de ela já ter autenticado uma vez.
Pra tornar esse processo seguro acho que poderíamos salvar no cookie o JWT token que usamos no Backend.

https://trello.com/c/J4Pc6mAu/225-bot%C3%A3o-de-marcar-como-estragado

No modo offline (mas talvez em outros modos também) seria legal ter busca não só de endereços no mapa mas também nos próprios bicicletários já cadastrados. A ideia seria o texto ser buscado tanto no campo de Título quanto no endereço propriamente dito. Mas não dá pra usar uma busca simples de strings, tem que ser algo mais inteligente.
Felizmente tem algumas libs JS bem maneiras que fazem tudo pra nós:

• http://fusejs.io/
• http://elasticlunr.com/
• https://lunrjs.com/

Atualmente mostramos as ciclovias apenas das principais cidades onde há bicicletários pois os arquivos GeoJSONs que importamos do OpenStreetMaps são relativamente pesados.
Seria legal estudar uma maneira melhor de importar esses dados, ou de otimizá-los, pra que conseguissemos mostrar TODAS ciclovias do país.
Eu teorizo que talvez não conseguiremos otimizar muito fazer muito sobre a compactação dos dados, pois eu já estou minificando os GeoJSON. Talvez conseguiríamos aliviar um pouco o peso se simplificássemos as curvas , mas não dá pra exagerar nisso senão a curva fica estranha e não condiz mais com a realidade.
Talvez também conseguiríamos melhorar um pouco retirando todos metadados do arquivo (como nome de cada trecho, quando foi criado, etc.), mas ACHO que isso não serve muito, porque a grande maior parte do arquivo é composto pelas coordenadas mesmo.
O pessoal do UseBike (http://usebikeapp.com/) mostra esses dados pra todo país, mas acho que é porque eles usam Mapbox e ele provê automaticamente esta camada a mais. O Google Maps também provê com muita facilidade essa camada, mas como já vimos os dados deles são MUITO ruins, extremamente incompletos e/ou desatualizados.

• testar geojson-minifier (https://github.com/igorti/geojson-minifier)

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

Provavelmente é alguma coisa que mudei no posicionamento da modal na janela que tirou o scroll do body.