Polymer News (Progress Web App Template)
Home Page: https://news.polymer-project.org
$ git clone https://github.com/polymer/news.git
$ cd news
$ npm i
$ npm start$ npm run buildTo test prpl-server build:
$ npm run serve:prpl-serverTo test static build:
$ npm run serve:staticOur production deployment of NEWS is hosted on App Engine with Node.js. It can be deployed with the same steps as PWA Starter Kit.
If you go directly to the article page (e.g. https://polymer-news.appspot.com/article/mobile-homepage?id=https%3A%2F%2Fwww.washingtonpost.com%2Fpolitics%2Ftrump-chooses-sen-jeff-sessions-for-attorney-general-rep-mike-pompeo-for-cia-director-transition-sources-say%2F2016%2F11%2F18%2Fa0c170ae-ad8e-11e6-a31b-4b6397e625d0_story.html), the title is not showing up. But once you swipe to the next/prev article then the title starts showing up.
Currently it will try to use the image from item.thumbnail.url which is the full size image and could be huge (>5MB). We should not use it especially for mobile. Instead we should use the image from item.thumbnail.featured.url. We already fixed the issue in the list page: https://github.com/PolymerLabs/news/pull/36/files#diff-37310b98f259b50d4e0b15bee8717cf6R284. We should do the same fix in news-article.html
Howdy Folks,
Thanks for the great demo app.
I am just trying to get it up and running and ran into a problem right away.
First of all you should know that I installed polymer-cli with
npm install -g polymer-cli
When I ran
polymer build
I got a warning for each html file in the articles folder
The error is very similar to the one reported here: polymer-cli/issues/546.
On that issue the recommended fix is to
install polymer-cli@next
If you do this, note that you should uninstall the existing polymer-cli
After installing polymer-cli@next the build process runs with two new deprecation warnings and then fails with a notice about the app entry point.
warn: [polymer-project-config] "sourceGlobs" config option has been renamed to "sources" and will no longer be supported
in future versions
warn: [polymer-project-config] "includeDependencies" config option has been renamed to "extraDependencies" and will no l
onger be supported in future versions
error: cli runtime exception: AssertionError: Polymer Config Error: entrypoint (/) does not resolve within root (/Users/s
merth/Sites/Javascript/Polymer/Polymer v2/news-app/news)
error: AssertionError: Polymer Config Error: entrypoint (/) does not resolve within root (/Users/smerth/Sites/Javascript/
Polymer/Polymer v2/news-app/news)
You need to fix the polymer.json config file as follows:
{
"entrypoint": "index.html",
"shell": "src/news-app.html",
"fragments": [
"src/news-list.html",
"src/news-article.html",
"src/news-path-warning.html",
"src/lazy-resources.html"
],
"sources": [
"src/**/*",
"images/**/*",
"data/**/*",
"app.yaml",
"bower.json",
"index.html",
"main.py"
],
"extraDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
It seems that polymer-cli@next doesn't accept "entrypoint": "/", but does accept "entrypoint": "index.html",
Now the build works.
I would be nice if the News demo app built using a stable release of polymer-cli. I think polymer-cli@next is the bleeding edge release???
Maybe the polymer.json file should be updated???
Tested on my own version https://ahaan.co.uk and https://news.polymer-project.org/
It is:
<footer>
<a href="https://www.polymer-project.org/1.0/toolbox/">Made by Polymer</a>
</footer>
It should be:
<footer>
<a href="https://www.polymer-project.org/2.0/toolbox/">Made by Polymer</a>
</footer>
I would like to see an example of how to implement a link to a static page in the menu, like an "about" page.
Include the first few lines of the main headline article like in the spec. In order for it to fit, let's decrease the title size to 35px and line height to 48px.
There is no default alt attribute when the property is not informed.
If you scroll down and back up again, then the images change to the correct ones.
On the article pages on iOS and Chrome Android, as well as the home page on iOS, the hero image appears to resize when the URL bar scrolls out of view. This causes the text to jump down, which can be jarring.
Would it be possible to make sure the hero image doesn't resize when the URL bar scrolls away or scrolls back into view?
Need better icons that match the design.
If you go to the main article list, scroll way down, and then quickly scroll up, the header drops down and there is a small gap that jitters opened and closed above the header. You see about 1 px of white line about the header. Worse the faster you scroll up.
Would it be easy to make it easy for someone to use firebase as a backend to store the article content?
There is no aria-label attribute in the close button for the drawer.
Where is support for AMP? Articles don't contain AMP elements. AMP Validator is silent.
AMP Validator is here
https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
Check out the React App with AMP using Service Worker for serve app-shell...
Carousel of articles that users can swipe through.
Currently if the route path is empty we set route.path to some default value.
_routePageChanged: function(page) {
if (!page) {
// set default route if route path is empty
this.set('route.path', 'list/mobile-homepage');
return;
}
This could be undesirable as it will change the URL.
There is a property fallback-selection in iron-pages that we could use to set the default page. We should see if that makes sense to use in the News app. e.g.
<iron-pages role="main" selected="{{page}}" attr-for-selected="name" fallback-selection='list'>
Let's add "Options" section at the bottom and "More Top Stories" on the right.
It's because we are using object-fit to fit the <img> inside the img-container. But IE/Edge doesn't support object-fit.
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
<figure> and make the text be Georgia italic and 54% Black.<a> links bold underline (not the default blue). Change the logo letter-spacing: 10px and add margin-left: 11px
The kicker should be top aligned with the "Most Read" lines
"Most Read" lines should be 12% Black like the nav lines
Make time-ago white-space: nowrap so this doesn't happen
In "Scroll down nav bar", change logo font-size to: 23px; and background color from black to #212121
Change nav links in "Scroll down nav bar" to line-height: 32px; font-size: 15px;
The bottom nav links should be 40px spacing
Politics box is always at least 100px below the header.
goto https://polymer-news.appspot.com and you will see the only "NEWS" is shown on Chrome tab. But instead it should show "Top Stories - NEWS". This is because article.headline is undefined and so the observer _updateDocumentTitle is not triggered.
With Firefox is not possible to use the keyboard to navigate through the elements. The focus jumps to all the document but not inside the elements.
I feel like, particularly for a news app, we should try to go to the network first for the content. E.g. you go pack to the site, and it tries to fetch the latest content rather than show you old articles.
We have styles to style the article content in news-articles.html. But the article content is added dynamically by setting innerHTML and under Shady DOM we need to apply proper CSS scoping to those new nodes. We can use scopeSubtree to apply style scoping to the content.
Since it doesn't do anything, I think we should remove it from the top right so that people don't tap on it and think it's broken.
Currently the title always says "Top Stories" even if you are in other category like "Sports".
Template literals (backtick) is not supported on IE. We need to remove using them and use normal strings.
https://github.com/PolymerLabs/news/blob/5983654398d0ed606f7d44d24708c3df6002396d/src/news-app.html#L393
https://github.com/PolymerLabs/news/blob/5983654398d0ed606f7d44d24708c3df6002396d/src/news-article.html#L277
https://github.com/PolymerLabs/news/blob/5983654398d0ed606f7d44d24708c3df6002396d/src/news-list-item.html#L258
https://github.com/PolymerLabs/news/blob/5983654398d0ed606f7d44d24708c3df6002396d/src/news-side-list.html#L84
Need something similar to shop-network-warning and network status snackbar.
It would be really interesting to know how you guys have setup your server (nginx I assume) to play nicely with Server Push
Here is the list of what I'd like to know:
Share with us please 😃
If I change the article namer or the category name in the web browser URL field, the news-app should show news-path-warning.html, ie 404 page, but does not.
It seem to show a list view with no items.
On the article page, we should replace the search icon with email and share icons like in the mocks.
h1h2 instead of h3h3 for the news articles on the list pagecc @robdodson feel free to add more issues if you find anything that could have be done a little better.
We show the main image for the article, and then the same image right below it, and the second image is really distorted. We should do neither.
It should display the article title on the toolbar instead of just blank.
Similar to what we did in Shop: https://github.com/Polymer/shop/blob/master/index.html#L36
Would it be possible to distribute this in such a way so that someone could set an RSS feed for each topic category in their app, and the server and/or client could fetch all the documents in the RSS feed and use them/cache them for the content?
This would allow essentially one-edit setup for anyone with a RSS feeds.
This could also extend to the AMP version, where if you had RSS feeds of AMP docs you could get a PWA essentially for free.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.