numenta / numenta-web Goto Github PK

This only happens on Windows 10/ Chrome (correct behavior happens on MacOSX/Chrome).
To reproduce:

• go to the "content to be incorporated" page in BAMI (https://brev.github.io/numenta-web/assets/pdf/biological-and-machine-intelligence/0.4/BaMI-Other-Content.pdf)
• click on the link to either of the papers in the "HTM Neuron" or "HTM Cellular Region" sections.
• You are taken to the correct site to see the paper, but then clicking on the back button does nothing, and you can't get back to the BAMI document.

Back button doesn't work after clicking on the SP or TM algorithm links (internal links) in this doc either, or after clicking on links in any of the BAMI docs.

Back button works OK in the cases described in this issue when you use the Edge browser on Windows 10.

Original: https://jira.numenta.com/browse/WEB-267

cc @jsfowles

Top of each source file (.js, .jsx, .css, off the top of my head) needs copyright notice.

Top of this file is an example:
https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/index.jsx

Please check http://npmjs.com, I believe there should be tools to automate this. If not, you could make your own. Or, if that feels daunting, the old fashioned slow brute force method works too. :)

@jsfowles feel free to take this one!

Image Links usually dim on mouseover hover, but this doesn't seem to work on Markdown (.md) image links.
We don't have too many of these,

See bottom image/link here:
http://numenta.com/blog/2016/03/30/numenta-at-computational-and-systems-neuroscience-conference/

Markdown component:
https://github.com/numenta/numenta-web/blob/master/numenta.com/components/Markdown/index.jsx

Markdown in-content styles (via our Markdown component):
https://github.com/numenta/numenta-web/blob/master/numenta.com/components/Markdown/index.css

cc @jsfowles

Add new http://numenta.com to this list:
https://github.com/gatsbyjs/gatsby#sites-built-with-gatsby

I'd also suggest asking them if it'd be OK to move that list to their wiki:
https://github.com/gatsbyjs/gatsby/wiki
And then, link to the new wiki page from the README.

@jsfowles this is a nice easy one

Win7/IE10 - SVG images float around sometimes?

cc @jsfowles

Android (and maybe iOS too?): Playing Videos don't fit fully in screen window

Original: https://jira.numenta.com/browse/WEB-285
cc @jsfowles

Main Sub-headings on each page/section (h2 tags) have anchor/jumplinks for each.

For example: http://numenta.com/careers-and-team/#team

It'd be great to show a little hint on hover that these exist. Is there an easy way to copy these links to clipboard as well? This is the inspiration (like on Wikipedia, also):

• https://www.npmjs.com/package/anchor-js

No idea how this is going to work with our setup (Gatsby, React, Markdown, etc).

A final issue: We should make sure all of our jumplink id's match the slugs of their respective titles. I think a few of them are off. Good Example:

• "Mission and History" => mission-and-history

orig: https://jira.numenta.com/browse/WEB-203
cc @jsfowles

Replace old/ugly images with new shots from new Adobe Stock Photos account.

Original JIRA: https://jira.numenta.com/browse/WEB-186

This only happens on Windows 10/ Edge. To duplicate, go to the "content to be incorporated" document (https://brev.github.io/numenta-web/assets/pdf/biological-and-machine-intelligence/0.4/BaMI-Other-Content.pdf) and click on the link to the paper in the "HTM Sequence memory". In other browsers, this correctly gets you to the link http://arxiv.org/abs/1512.05463. With Win 10/ Edge, however, you get the attached error - it looks like an extra period is being attached to the end of the link.

original: https://jira.numenta.com/browse/WEB-272
cc @jsfowles

• Many: Play button looks weird, is out of place, etc. Especially on Mobile.
• iPad: Video play buttons on thumbnails not rendering correctly
  • On my iPad, the play buttons for all of the videos are rendering oddly. They're off center on all the videos, and the play button in the middle of the circle is off center as well.
• (FORGOT WHICH): The position of the play button overlaid on the video thumbnails seems to be relative: if the page width is small, then the buttons are completely off-center.

Originally:

• https://jira.numenta.com/browse/WEB-270
• https://jira.numenta.com/browse/WEB-279

cc @jsfowles

Search box is visible by default. But it only really works after the client has loaded the index, after page load. Not a very truthful experience.

Instead, let's hide the search box by default. Then, after the client has loaded the index, it can make the search feature visible.

This will also be a more truthful experience for older/unique browers that can't actually use the client-side search in the first place.

Search component:
https://github.com/numenta/numenta-web/blob/master/numenta.com/components/Search/index.jsx

Search index is loaded here:
https://github.com/numenta/numenta-web/blob/master/numenta.com/components/Search/index.jsx#L38-L50

cc @jsfowles

Get back to mainline extract-text-webpack-plugin.

At one point I had to switch to a custom version of this package.

All the details here:
css-modules/css-modules#12

This was for a bug with CSS Modules Ordering + Webpack Text Extract Plugin.

https://github.com/numenta/numenta-web/blob/master/numenta.com/package.json#L51

• spice up theme/colors a bit?
• theming?
• bg pattern (Subtle), or slight movement/animation?
• imagery over icons?
• etc

original: https://jira.numenta.com/browse/WEB-160

Optimize assets (js, css, html, img, etc.) to decrease bundle and payload sizes for a better and more performant user experience. Track this before and after to watch changes.

Google webmaster tools suggests:

• Make styles.css load non-blocking - I'm not sure I want to inline this yet.
• Specify cache expiration for: .woff, .svg, .json #41 (comment)
• Enable gzip/defaulte compression for: .svg #41 (comment)

Other ideas:

• More minification
• Audit what webpack is bundling
• More image compression and optimization
• Gatsby 1.0 should have some code- and bundle-splitting (maybe Blog gets it's own bundle?)

@todo Much more to come.

original: https://jira.numenta.com/browse/WEB-234

cc @jsfowles

Disqus comments leaking onto non-Post markdown pages

I've got a fix coming for this shortly.

just FYI @jsfowles

FAQ's should themselves be collapsing sections w/anchor links.

There are a few FAQ sections on the site. These are currently just full text. These should be moved to collapsing sections, where clicking on a section opens it, and closes the rest. Each FAQ question needs a shortcut anchor link.

• http://numenta.com/business-strategy-and-ip/#faq
• http://numenta.com/htm-studio/#faq

NEED TO BE CAREFUL, since this will be collapsing sections inside of collapsing sections on the advanced Wikipedia-like homepage.

See also:
#14

Originally from internal JIRA queue: https://jira.numenta.com/browse/WEB-149

cc @jsfowles

In sitemap.xml all pages get the same default priority right now (0.5).
This should be a more dynamic value.

• I think shorter URLs should get higher values, closer to 1, as they are more important, and we want them to be indexed more often.
• Longer URLs should get lower values, closer to 0.

The changefreq setting should be similarly dynamic (although it has a string value instead of numeric).

Sitemap.xml is generated here:
https://github.com/numenta/numenta-web/blob/master/numenta.com/gatsby-node.js#L206-L218

Sitemap docs: http://www.sitemaps.org/protocol.html

original: https://jira.numenta.com/browse/WEB-280

cc @jsfowles

When I close a section on my iPad, it remains grayed as if it's open and stays gray until I click somewhere else. This may be standard and acceptable, but it's not doing that on my laptop, so I am noting it here.

Original: https://jira.numenta.com/browse/WEB-275

cc @jsfowles

After new site has had a few months to run, let's re-order the Main Sections according to Google Analtyics stats of which pages are most popular.

Check Google Webmaster tools to see what bad URLs people are trying to use post-launch. Redirect these to the correct places.

I'll need to handle this one.

cc @jsfowles

Search on iPhone is very slow, missing fast typing. Check Android also.

Need to identify the slowdown and figure out solution.

original: https://jira.numenta.com/browse/WEB-292
cc @jsfowles

I put this together for the last http://numenta.org redesign:
http://numenta.org/styleguide/

It's built from the CSS documentation in a specific format, like this:
https://github.com/numenta/numenta.org/blob/gh-pages/_sass/base/style/_alerts.scss#L1-L16

Used this tool: https://github.com/kss-node/kss-node

This is equivalent to "documenting the CSS" both in code, and visually.

It's a "living styleguide". This means that CSS style code documentation, and visual design specs, come together as a single "living" thing, instead of two separate unsynced entities. As you update your CSS, your design spec also gets updated - that means coders and designers, both in-house and external, can stay on the same page visually and technically when updating the site.

There may be newer, better tools for this - please search around, read up, and see. If not, kss-node worked great for me, you should be able to copy most of it's usage out of the http://numenta.org codebase (https://github.com/numenta/numenta.org/)

Related Issue to document the JS code is here: #10

This might be more tricky with React components, instead of the older views from Rails/MVC style frameworks. Not quite sure, may be more Hard than Medium. Just FYI.

cc @jsfowles feel free to take this one too

Could add little icons to all text links automatically and simple in CSS. Perhaps a note for external link or PDF link etc.

Originally: https://jira.numenta.com/browse/WEB-112

cc @jsfowles

Migrate assets from /assets/ to individual parent pages (BAMI PDFs, etc)

also: redirects.

orig: https://jira.numenta.com/browse/WEB-188

Video thumbnails could be bigger (up to 2x for wide mobile?)

Video thumbnail sizes are leftovers of previous site design, and current CSS Video Play/Hover button implementation.

They could be bigger to fit the new design better.

orig: https://jira.numenta.com/browse/WEB-190

Mobile and Cross-browser: Form fields lose nice alignment sometimes

cc @jsfowles

Right now we support 3 responsive widths: S, M, L.

This is via our custom fork of Tachyons:

• https://github.com/numenta/tachyons/blob/master/src/numenta-custom.css

We are also using Tachyons features that limit line and paragraph widths to optimum readable lengths (~66-80 letters wide):

• http://tachyons.io/docs/typography/measure/

Also, we switch font sizes based on device (mobile, tablet, desktop):

• http://tachyons.io/docs/typography/scale/

Breakdown:

Because of these combinations, on a large HD Desktop monitor set to fullscreen, our site could make much better use of the horizontal space:

These will take some exploration, but I'm thinking the following additional customizations to our customized Tachyon fork will make a good solution:

Additions:

• Add an XL width: 96em, 1440px - this is to be associated with a new wider measure measure-wide-xl setting of 100 letters wide.
• Maybe also Add an XXL width: 114em, 1710px - Now also bump Tachyons type scale up to f4 class.

orig: https://jira.numenta.com/browse/WEB-159

cc @jsfowles

Research and implement Google Accelerated Mobile Pages (AMP) for.. posts? everything?

Seems like these are separate pages with separate AMP markup, referenced via meta tag in parent non-AMP document.

I don't like these, but they are getting SRP icons it looks like.

https://www.ampproject.org/docs/get_started/about-amp.html

cc @jsfowles just FYI

Each page can have it's own html head/meta keywords, much like title. This is done via
https://github.com/nfl/react-helmet.

Example of custom title:
https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/htm-studio/index.jsx#L180

Current default keywords set here:
https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/_template.jsx#L76

ALSO a few pages have missing/repeated titles, a report of which can be found in Google Webmaster tools. Just clean these up too.

original: https://jira.numenta.com/browse/WEB-197

cc @jsfowles

Add RSS feeds to list pages.

This looks nice:
https://github.com/jpmonette/feed

Old website RSS source:
https://github.com/NumentaCorp/numenta.com/blob/master/src/documents/blog/index.rss.hbs

Originally from https://jira.numenta.com/browse/WEB-196

cc @jsfowles

Refactor any large or unwieldy React components down.

cc @jsfowles

Document our JS classes, methods, and functions in JSdoc format.

I've left a lot of empty skeleton jsdoc comments around that look like this:

/**
 *
 */

Need to follow jsdoc spec to fully document everything. Some good examples:

• https://github.com/numenta/numenta-web/blob/master/numenta.com/gatsby-node.js#L24-L30
• https://github.com/numenta/numenta-web/blob/master/numenta.com/utils/shared.js#L95-L99

Mostly concerned with a description, @param, @returns, and special notes.

cc @jsfowles

Related Issue to document CSS is here: #9

Lock down client forward/back/anchor/scroll link states. They are still a bit fuzzy.

This will take a while, for post-launch. I'll need the automated testing setup first so I don't go insane.

Link Types

• Runtime: Static on server, Dynamic on client
• Internal: Path, Path+Anchor, Samepage+Anchor, Asset
• External: Path, Anchor, Protocol
• Source: .JSX, .MD
• Handlers: React-router, Location.href, Location.hash
• Specials: Scroll to section. LocalStorage section open/close. Custom #hash scroll.
  React-router-scrolling?? Store scroll position in localStorage, or on click?? React-router is already loading a ScrollBehaviorContainer component, is it useable?
  • Re-Lock route to URL w/React-router?
• Platforms: Mac, Win, Linux, iOS, Android
• Browsers: Chrome, Firefox, Safari, IE, Edge, Android

Main section asset back button not exact

Originally from WEB-281: If you scroll down and open a section, click external, and then back - it will correctly take you back to that section. However, because of that, if you clicked a PDF link and Back, you'll be taken back to the top of the section instead of right to where you left off. This is another special case to work in amongst all the rest.

Back/Forward can be spotty and random sometimes, as in WEB-289 WEB-290

WEB-295 open Applications section, go to external site under there, click Back. Sometimes back to top top, sometimes back to top of Applications, and not right to where you clicked before. Back from an external asset is, of course, acting differently than back from other things. Also fickle, hard to reproduce exactly currently. Seems worse on linux/chrome?

WEB-297 Back interaction, along with open/closed state stored in localStorage, and maybe the browser url History, can miss a beat.

Section bottom small close button special click case

(Originally this ticket, Donna reported. and WEB-291). If a section is open, along with sections above and below, and section is scrolled so that only the bottom/button is visible, and button is clicked, lots of content gets pulled up to the section header (far off page now), and puts us in a weird place.

If section bottom close button is clicked, and it's pixel height is near top of screen, need to re-position sections correctly/smartly.

Wikipedia article strangeness

If we're fixing all these other edge cases, there is a strange UI case of open/closing sections, which even Wikipedia suffers from (Jeff mentioned this in our original meetings). We might auto-adjust the screen to a more ideal position in these cases, and we'd have a better experience than Wikipedia does now. I need to detail this pattern, I don't remember off the top of my head.

Auto-change URL on scroll?

I can see some cases where this would make sense (kinda), just need to run them by [~cmaver] sometime.

h2. Possibly-related PDF issues?

• Issue #33
• Issue #36

Original: https://jira.numenta.com/browse/WEB-223
cc @jsfowles

MainSections should only load on the advanced clients listed on our Supported Clients list in the README.md file.

The magic is currently happening on each MainSection-containing page in places like this:

• https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/index.jsx#L49-L53

The platform lib is already installed, it should be ready to import and use to do client detection:

• https://www.npmjs.com/package/platform
• Example usage:
  • https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/htm-studio/index.jsx#L122-L124

Guessing this will need a little helper util in here:

• https://github.com/numenta/numenta-web/blob/master/numenta.com/utils/client.js

ALSO maybe a nice little spinner/loader icon on start of MainSection load? The shift between static-site and single-page-app-site is currently rather blunt and shocking if you're looking.

from: https://jira.numenta.com/browse/WEB-233

cc @jsfowles

Switch Licnese from AGPL to less-restrictive MIT.
Oops my bad!

cc @jsfowles

Better method(s) to leave search and video-playing state. Especially on mobile.

Need a visible and accessible X icon (or something similar) to make it easier to get rid of these modals.

original: https://jira.numenta.com/browse/WEB-241
cc @jsfowles

Video Player close icon added here:
https://jira.numenta.com/browse/WEB-414
#120

Automated webpack favicons missing a few values.

https://github.com/jantimon/favicons-webpack-plugin

In this code I use the keys (diching the values) to popular the html meta header:
https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/_template.jsx#L73-L86

Here is a full list of keys and values:
https://github.com/haydenbleasel/favicons/blob/master/config/html.json

Notice that in that file, some of the keys have less data than the values:

 "android": {
    "link[rel='manifest'][href$='manifest.json']": "<link rel='manifest' href='manifest.json'>",
    "meta[name='mobile-web-app-capable']": "<meta name='mobile-web-app-capable' content='yes'>",
    "meta[name='theme-color']": "<meta name='theme-color' content='#FFFFFF'>",
    "meta[name='application-name']": "<meta name='application-name' content='Application'>"
  },

By using just the keys, I seem to be missing the #FFFFFF value of the theme-color key. Same goes for missing the Application value for the application-name key. These missing values can been seen in an example of our output html:

<meta data-react-helmet="true" name="theme-color"/>
<meta data-react-helmet="true" name="application-name"/>

Need to either manually stuff these (if just a few), or switch to parsing the values instead of the keys (so data is not lost). Or, find a new better overall approach.

cc @jsfowles

Migrate html text to own markdown files, in a single location. Make it easier for Marketing peeps to edit website text.

cc @jsfowles

original: https://jira.numenta.com/browse/WEB-172

http://numenta.com/business-strategy-and-ip/#licenses

On Mobile, the table extends out to the right off-screen, with a horizontal scrollbar.

It would be nice to have tables collapse nicely on mobile somehow. There isn't a good CSS method to do this, so it's probably a custom React component, or maybe there is a prebuilt component on npm already.

It'd be great to take a table like this (desktop):

and turn it into something like this on mobile:

If you search around for solution ideas on the web, it seems like the above is being accomplished by hiding details in the HTML using data- attributes, and then displaying those via JS on mobile widths.

• http://codepen.io/geoffyuen/pen/FCBEg (no JS actually!)
• http://exisweb.net/responsive-table-plugins-and-patterns (top examples are mostly jQuery-based, so scroll down, or search the web for related topics on other sites.

original: https://jira.numenta.com/browse/WEB-238
cc @jsfowles

Code and README have has @todo tags in them.

These should be moved out of the code, and turned into Github Issues here for proper tracking.

cc @jsfowles

Update custom Tachyons package from upstream.

We had to fork our own Tachyons package, to modify responsive settings:
https://github.com/numenta/tachyons

Need to pull in any changes from mainline / upstream since then:
https://github.com/tachyons-css/tachyons/

Should probably see if there is a better way of customizing our there, too.

https://github.com/numenta/numenta-web/blob/master/numenta.com/package.json#L76

cc @jsfowles

There are couple different FAQ sections on the site:

1. Built: http://numenta.com/business-strategy-and-ip/#faq
   • Source: https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/business-strategy-and-ip/_Section.jsx#L258-L314
     • This one uses HTML definition lists (<dl>, <dt>, <dd>)
2. Built: http://numenta.com/htm-studio/#faq
   • Source: https://github.com/numenta/numenta-web/blob/master/numenta.com/pages/htm-studio/index.jsx#L128-L141
     • This one is just <div>s. Visually, on desktop widths, there is unwanted padding on the left of each FAQ answer/definition.

These should match in style, markup, etc. Maybe some refactoring.

See related issue: #15

cc @jsfowles

Cross-browser: Icons wrapping incorrectly in Papers/Videos/More section.
Esp. mobile.

cc @jsfowles

Setup Localization (l10n) and Internationalization (i18n) strings and templating.
Esp. for the new React Age.
No rush.

? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

orig: https://jira.numenta.com/browse/WEB-189

What to do about out-of-date history package?

We're at [email protected], while current is [email protected].

I understand the newer versions have breaking API updates, and this conflicts with upstream projects like react-router and gatsby.

• So, this might be an OK state, but we should document it if so.
• If not, and it's a messy state to be in, we should get updated.

cc @jsfowles

We already have HD/Retina image files ready to go in the repo (named like [email protected]). These should replace the non-HD images on Retina displays after page load.

https://imulus.github.io/retinajs/ has worked great in the past, and seems like an ideal solution in general still -- but I'm not sure how to tie it in with React. There are probably a ton of React-specific tools for this on npm, perhaps a good tie-in?

Also, this needs to work with Gatsby's image loader support. See more:

• https://github.com/numenta/numenta-web/blob/master/numenta.com/gatsby-node.js#L77-L92
• https://github.com/gatsbyjs/gatsby/releases/tag/v0.12.0

Related to:

• #24

cc @jsfowles

Originally from internal ticketing system: https://jira.numenta.com/browse/WEB-147

Missing GAnaltyics event tracking for 1 situation.

Markdown .md source files, with external or mailto: links, aren't getting Google Analtyics event tracking pings.

Using this to grab the local links from those files:
https://www.npmjs.com/package/catch-links

Solution I was thinking of:
Need to patch catch-links to add an option where it'll also work for external/mailto/etc links, not just internal. Submit this now/later as PR back to their project.

cc @jsfowles

Environment: Safari on iOS 9.3.4 (13G35)

I fixed this on other environments before launch:
2c7f068

original: https://jira.numenta.com/browse/WEB-269
cc @jsfowles

Update to latest Gatsby.

The following info is for update to 0.12.7.
We're currently at 0.11.7.

• There will probably may be API changes for 0.12 https://github.com/gatsbyjs/gatsby/releases
• There may be prepatory changes towards 1.0 gatsbyjs/gatsby#419
• The newer version has built-in support for:
  • CSS Modules - supposedly you name your file "whatever.module.css" to trigger it.
    • Details: https://github.com/gatsbyjs/gatsby/releases/tag/v0.11.7
    • We'll need to disable our custom CSS Module code for this to work:
      • https://github.com/numenta/numenta-web/blob/master/numenta.com/gatsby-node.js#L45-L63
  • Image Loading
    • Details: https://github.com/gatsbyjs/gatsby/releases/tag/v0.12.0
    • Remove our custom config from here: https://github.com/numenta/numenta-web/blob/master/numenta.com/gatsby-node.js#L65-L80
      • This may be related to supporting Retina/HD images: #28

cc @jsfowles

mailto: Links not working on /terms/ and /privacy/ pages on production.
Just takes you to top of page, doesn't trigger mail client to open.

Weird, because they work fine on staging: http://staging.numenta.com/legal/terms/.
That's the exact same code, just different server.

No errors or anything else to guide. Tested on Chrome Latest Stable (as of today), Mac OS/X.

Steps to Reproduce

• Visit these URLs:
  • http://numenta.com/legal/terms/
  • http://numenta.com/legal/privacy/
• Scroll to bottom of page
• Click on links to email addresses
• See browser scrolls to top instead

cc @jsfowles