teamnewpipe / website Goto Github PK
View Code? Open in Web Editor NEWThe Website for NewPipe
Home Page: https://newpipe.net
License: Other
The Website for NewPipe
Home Page: https://newpipe.net
License: Other
are the css files in /css
used?
and are they minified before sending to the user?
Because /css/blog.css
for example looks horrible and should be refactored.
Do you see this as an issue too?
!important
sborder-left: 2px solid #d0cdcd;
border-left: 2px solid #f3eff2;
border-left: 2px solid white;
Our entire website is written in English, just as the comments should be too. Therefore I'd suggest to remove the isso translations. This would also make it easier to modify our isso version. E.g I added an information about what Markdown features are supported - in English. And that's obviously not what I'd expect when the complete commenting system is explained in my language.
Besides that, we got Turkey and Portuguese comments too. We could try to avoid them by not providing other languages besides English.
@theScrabi @TheAssassin What's you opinion on that?
Let's build this website!
Continuing the discussion from TeamNewPipe/NewPipe#277 and TeamNewPipe/NewPipe#435.
I went through a few dozen "best app websites" when I put together the new design and according to what I saw it looks like nearly everything has been figured out that could have been. So there are definitelly tons of cool ideas out there offering solutions for anything. We just gotta look for them.
@TobiGr Cool stuff. Looks like the resizing works pretty well. The site gotta be built around that mechanism for sure. Good job. The picture below shows the original idea what should happen when a feature is selected.
@theScrabi Could you list the main features you think would be important to mention on the website? 6-8 features for example, to people who are a) unfamiliar with everything beyond the official youtube app and b) using an other alternative youtube client app.
@nate2014jatc Nope, not yet, but coming soon.
I'm going to put together the desktop version of the new design today (saturday) and post it.
We need to eventually post the 34c3 video its almost 2 months now, and nothing happened yet. It's time this goes online otherwise all the work involved would have been for nothing ;)
As mentioned in #11, we should replace the PNG graphics with vector graphics. The F-Droid project publish their artwork in a repository on GitLab. The "Get it on F-Droid" badges are in this directory.
I'd suggest using this one, it's the same one that is in use at the moment. As the files in the repository are Inkscape SVGs, someone has to export them to normal SVG using inkscape first. The fonts have to be embedded, too.
The documentation is not perfect, but better then nothing.
I would like to add a link to it onto the website. Right besides the the FAQ (beta)
link. The link for the moment should be called Documentation (Alpha)
.
Github notified us about CVE-2018-17567. Thus jekyll should be updated to version 3.7.4:
https://github.com/TeamNewPipe/website/network/alert/Gemfile.lock/jekyll/open
We need to find a license for the phone animation and include that into the repository as mentioned in #2. Otherwise, the use and distribution might result in a copyright infringement, which is not desirable for anyone involved.
Could somebody do s/work the/work, they/ on this page? On the same page under Thank you! the word free looks exactly the same as the link GitHub, which is a little bit confusing.
In some cases, it might be needed to change an already published post. This issue contains some guidelines created from empirical knowledge.
It recently happened that the URL to a blog post was changed as it was removed from a blog post. This was done in order to "unpin" it (which didn't work by the way, CC @TobiGr). The problem with this was that by unpinning it, the blog post was no longer available from its old URL which contained the category's name.
Now, there's two problems. First of all, there is no redirection to the new place. Ideally, the blog article's links should not contain any category data. Then, we can change these on demand without breaking any links.
But the IMO bigger issue is that when a URL changes, its comments "vanish". isso associates a list of comments with the public URL. If the URL changes, the page is treated as new. So, whenever a category is changed, the comments are gone.
By eliminating the category data in the URLs, problems like these can be avoided in the future.
But there's additional points to be considered when changing a published blog post.
@TobiGr once we resolve this issue, we need to change the URL associations in the isso database. We need to coordinate the deployment of the fix properly in order to not break the site.
The following list incorporates the most common rules how to deal with already published posts when there is no way other than changing them.
First of all, changes of existing posts shall be avoided by all means. If possible, less invasive method shall be used to provide additional information. If a comment (or a reply to a comment) can achieve the same goals, then a comment shall be used instead.
If editing the post is still necessary, though, then the following, simple rules should be followed.
The original contents shall be preserved, unless some parts need to be removed, e.g., for legal reasons. We store our posts in Git, a versioning system, therefore when a change is necessary, it is likely that the change needs to be applied in the Git history as well. In these cases, a so-called "force push" is explicitly allowed. Please get in touch with the maintainers (@theScrabi, @TobiGr or me) before doing so, we can inform the relevant persons then that their cloned repositories are most likely broken, and how they can fix the issue.
If a section needs to be corrected, the wrong information shall be struck out using Markdown's special syntax ~~incorrect part~~
. If new information is to be added, it shall be prefixed with the word Update: ...
, and maybe the date of the change (Update (date): ...
).
Changes of the article's categories are not permitted until the bug described in the Motivation section is resolved.
Changes of the article's title are not permitted, as the URL is generated from it. If a change is necessary, please use Jekyll's slug
parameter in the post's header and copy the value of the generated link into it. If you are not sure about the title, and plan to change it in the future, please use the slug
setting right away from the beginning, and choose a simple but unproblematic slug.
For the same reasons category changes are not allowed, please contact the maintainers if a change of the URL is required as well. We will try to set up a redirection, and fix the association in the comments database.
@theScrabi @TobiGr if you have additional rules, please write them down, I will then edit my comment accordingly.
On the main page, the menu is different than on other pages (the "Home" entry is missing, and it's aligned differently).
When browsing the page quickly, I often click on the wrong entry when switching between home page, blog and press entries.
I understand a "Home" entry isn't necessary on the home page, but think like this: Same goes for "Press" on the press page, and "Blog" on the blog page.
Now, one could consider removing the buttons for the current pages elswhere, too, but I am strongly opposed to this, as then, the menu is still inconsistent across the pages.
Instead, please try to make the menu contain all elements all the time, and be at the exactly same position on all pages.
I'd like to have the current Git commit ID somewhere on the page, ideally in the footer. This way, it's transparent to everyone what's been deployed. We could even make it a link back to the repo on GitHub.
Uncaught TypeError: Cannot read property 'split' of undefined
at updateAllWithAPIData (web-api.js:44)
Just noticed this error after deploying the current state (merge of PR #58). I run Chromium Version 64.0.3282.167 on Ubuntu 16.04.
As showcased e.g. on http://appimage.org, a few user voices showing how people use NewPipe and what they like about it would be awesome for promoting NewPipe. Potential users could see that this is a serious project, and that it has an active community and also user base.
Some of the references mentioned in TeamNewPipe/NewPipe#666 might come in handy for this purpose. @theScrabi and I discovered a bunch of posts on Reddit and Android forums as well. Some googling might bring up more of these. Otherwise, we could start a call of reviews in the main repository.
Related issue: TeamNewPipe/NewPipe#667
Was that a good idea to host our website at pages.github.io?
The hotfix I just merged in #34 interferes with the moving background picture showing those faces. The problem is that the picture is centered and not anchored to either side of the page.
When the modal pops up, and the scroll bar vanishes, the side width changes, and the centered background picture moves a little to the right.
I assume this would occur with any modal popping up on one of the pages. I assume #27 is affected as well. We should fix that behavior.
When I try to run the website with ~ $ jekyll serve
I get this error:
/var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/spec_set.rb:88:in `block in materialize': Could not find sass-3.5.3 in any of the sources (Bundler::GemNotFound)
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/spec_set.rb:82:in `map!'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/spec_set.rb:82:in `materialize'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/definition.rb:170:in `specs'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/definition.rb:237:in `specs_for'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/definition.rb:226:in `requested_specs'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/runtime.rb:108:in `block in definition_method'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler/runtime.rb:20:in `setup'
from /var/lib/gems/2.3.0/gems/bundler-1.16.1/lib/bundler.rb:107:in `setup'
from /var/lib/gems/2.3.0/gems/jekyll-3.6.2/lib/jekyll/plugin_manager.rb:50:in `require_from_bundler'
from /var/lib/gems/2.3.0/gems/jekyll-3.6.2/exe/jekyll:11:in `<top (required)>'
from /usr/local/bin/jekyll:23:in `load'
from /usr/local/bin/jekyll:23:in `<main>'
I run in on a current ubuntu installation (digitalocean), where only sass 3.4.21 is available.
@TheAssassin you said you use docker for this, how can I get your docer installation?
@TobiGr how did you setup the environment for development? On which distor are you running this?
image elements do not have alt attributes
Informative elements should aim for short, descriptive alternate text
https://dequeuniversity.com/rules/axe/2.2/image-alt?application=lighthouse
Because my phone is to small I can't make good screenshots and a new animation.
Besides this, we should discuss which features should be shown (in the screenshots and in the new animation as well).
@TobiGr
The Project of the website is now more than 3 months old. Isn't it now pissible for you to get a webstorm licinse?
https://www.jetbrains.com/buy/opensource/?product=webstorm#application-rules
[ORIGINAL] Do you like watching videos on YouTube
but looking for a simple app to do that?
[SUGGESTED] Do you like watching videos on YouTube
but are looking for a simple app to do that?
..........
[ORIGINAL] Your donation cover a majority our costs
[SUGGESTED] Your donations cover a majority of our costs
..........
[ORIGINAL] We would like to offer you some ways you can support our work by donations. So we can get some extra snacks during work!
[SUGGESTED] We would like tooffer you some ways you canto support our work by donationsSo—so we can get some extra snacks during work!
Continuation of the discussion in #18.
We have to figure out how to properly use external resources.
Questions to be answered:
This is probably the last step to be done before going live with this site.
Configure your server to send data in a compressed format to reduce transfer times. For compressible files, compression can reduce the amount of data that needs to be sent by around 70% for only a small amount of configuration effort. Text-based data formats such as HTML, CSS, JavaScript, plain text, XML, JSON and SVG should almost always be sent with compression enabled. However, we recommend only compressing responses above 1,000 bytes in size as compressing small files can actually increase the response size and compression has a server CPU overhead. To confirm your server is sending a URL response in a compressed format, you should 1) verify the Content-Encoding response header is being returned and 2) check the value of that header is set to the name of a compression scheme such as gzip, deflate or br. If you're checking from your own machine that runs antivirus software, be aware there's been cases where HTTP scanning features have been found to disable compression before responses reach your browser. Also, it isn't unusual to see misconfigured servers which compress some compressible file types like HTML but forget to do it for others like CSS so be on the look out for this.
Uncompressed resource URL | Original | GZIP Savings |
---|---|---|
…css/bootstrap.min.css(newpipe.schabi.org) | 118 KB | 99 KB |
/js/jquery.min.js(newpipe.schabi.org) | 84 KB | 54 KB |
…js/bootstrap.min.js(newpipe.schabi.org) | 36 KB | 27 KB |
…css/font-awesome.min.css(newpipe.schabi.org) | 30 KB | 23 KB |
/css/style.css(newpipe.schabi.org) | 27 KB | 22 KB |
/js/features.js(newpipe.schabi.org) | 6 KB | 4 KB |
/js/web-api.js(newpipe.schabi.org) | 2 KB | 1 KB |
We have a sort description of the displayed features on the first slide of the gallery by @ponypower.
But we need a detailed description for the features we want to explain a little further. And we have to decide which features are going to have a detailed description and screenshots.
Follow-up of #68 (comment)
On mobile (or rather, all devices, because desktop/laptops also often have touch) you should support swiping through the sliders/quotes list
Since we are not using NodeJS code (or anything that needs it, like npm, Grunt etc.), we don't need to have these npm.js
files in the repository. They should be removed.
At the moment we have five links in the footer. We should discuss wether all of them are necessary. Here is a quick overview:
Besides that, we don't have a fixed
navigation. That means, all links in the navigation bar are not visible for the user when he reaches the bottom of the page. That's why I'd like to provide at least a link to the blog in the footer.
A friendly user showed up on IRC recently to request some support, and liked what we did. He donated a few dollars, and sent us the following statement:
NewPipe is hands-down the best way to interact with YouTube from your Android phone. I've been following it from its inception and they have gradually and methodically added more and more features. But what really sets NewPipe apart is the team's dedication. On 09/07/18 YouTube made a change that broke 3rd-party YouTube apps (including NewPipe). That was the same day I was having a party at my house and depending on NewPipe to provide my "mixtape." Not only did the NewPipe community come quickly with a fix, but the team applied the fix and pushed out the new build within the space of a few hours... just in time for my party. They saved my bacon that night and I gladly donated $20. These guys deserve your support. Please give it.
- Reverend Ben
Before you ask: yes, he is really a reverend.
I think that review best fits on our donation page, not the homepage.
@TobiGr can you suggest a place where to put it, please?
P.S.: Thanks for the kind words, Reverend Ben.
Right now, if we'd change a URL (e.g., by accident), we'd end up with an nginx-generated 404 page. That's not very user friendly, as a user couldn't even navigate to a non-404 page, or look for the right URL.
@TobiGr if you have some time, I would love to see a custom 404 page that employs our main page's design, including the top menu.
@TobiGr It was a good idea to create a blogpost about what happened yesterday, so the users will know that v0.14.1 fixed the issue.
@TobiGr @TheAssassin the block looks awsome. I like it a lot!!!
However the blog posts could be made a little better. Maybe it was good to add a little design polecy on how to write these posts.
I asked a friend about a guide. He send me this, maybe it will help us.
Also I would like to have little images in the top right corner of every blog post. This image should summarize the blog post a little. This will make the post a little more interesting.
Well after literally an hour of struggling to put ruby on rails on my web server, i eventually just gave up and decided the type the draft that you guys can add for some FAQ posts, sorry for adding extra work
{begin Enable Auto Play}
To enable Auto Play, First Click the three dots in the top right and select settings, you should see a menu, now select Content, you will see Auto-queue next stream, enable this option, and now, if you select a video, it should play the next video when the video is over
And now for some of my own stuff
{begin Play in Popup Mode}
If you want to multitask, while still having a video in the corner to watch, then you can use popup mode, when picking a video, below you will see 4 options, select the popup option, you may need to allow access to display over other apps, newpipe should close and you will see your video in the corner, hold and drag it to the bottom to remove it
{end Play in Popup Mode}
{begin Playlists}
If you want to store a playlist of videos, open the video and select "Add to", the first option on the bar of 4 icons, if you do not have a playlist it will ask you, pick a name for the playlist, and add it. In the future, pressing "Add to" gives you a list of your playlists and the ability to create a new one. On the apps homescreen, on the third tab, in bookmarks, you can then see your playlists. Side note: should bookmarks be changed to Playlists in the next release?
{end Playlists}
With adding the new features view, I added a bunch of large images to the main page. When someone opens the website, he can only see a maximum of four graphics, but the browser loads 13 and the video. Furthermore the images got a little bigger...
This is quite annoying. And a fast page loading is important to Google and other search engines.
There are different methods to solve this problem:
Not that good for people with little data volume (on mobiles), but it's better for than nothing and ensures that all images are ready when they are needed.
Means that the images will be loaded later, which could causes some page jumping. The images are at the top (or left side) of the page when a slide is opened. To prevent this, we'd need placeholders.
Means that we need to keep both images (full size for the press kit), but as we could resize the images to the half of their current width, this is also effective and good for the viewer and causes less traffic.
Loads images when they are up to be in the viewport. This make no sense since the features are almost at the top of the page.
I'd prefer to implement a combination of 1. and 3. What do you think @theScrabi and @TheAssassin?
An interesting page of the new website could be a blog or news section where the developer announce new features and versions of NewPipe or other interesting things like articles about NewPipe in the media, statistics and information about upcoming events.
To be honest, it isn't useful at the moment, but at a later point in time it could be helpful.
@theScrabi @TheAssassin @ponypower Tell me what you think about it.
There is some confusion going on right now about newpipe legecy. I think the fdroid description about the legecy app should be updated, but also a blogpost about it would help.
it would be nice to add open graph tags to the page, so that sharing a link on pages and programs gives a nice preview of the page.
the basic tags look like this
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
You could use Font-Awesome icons to replace those icon placeholders. That improves mobile experience, as the font is vector based and not quite large.
Ideally you add the files to the repository just like you did with Bootstrap and the other files.
A long cache lifetime can speed up repeat visits to your page.
https://developers.google.com/web/tools/lighthouse/audits/cache-policy
URL | Cache TTL | Size (KB) |
---|---|---|
…css/bootstrap.min.css(newpipe.schabi.org) | None | 119 KB |
…screenshots/shot_05.png(newpipe.schabi.org) | None | 90 KB |
/js/jquery.min.js(newpipe.schabi.org) | None | 84 KB |
…fonts/fontawesome-webfont.woff2?v=4.7.0(newpipe.schabi.org) | None | 76 KB |
…screenshots/shot_10.png(newpipe.schabi.org) | None | 63 KB |
/img/privacy_written_in_tiles.jpg(newpipe.schabi.org) | None | 53 KB |
…screenshots/shot_06.png(newpipe.schabi.org) | None | 50 KB |
…screenshots/shot_02.png(newpipe.schabi.org) | None | 45 KB |
/img/bg_rectangles_full.png(newpipe.schabi.org) | None | 38 KB |
…js/bootstrap.min.js(newpipe.schabi.org) | None | 36 KB |
/img/f-droid.svg(newpipe.schabi.org) | None | 31 KB |
…css/font-awesome.min.css(newpipe.schabi.org) | None | 30 KB |
…screenshots/shot_09.png(newpipe.schabi.org) | None | 30 KB |
…screenshots/shot_14.png(newpipe.schabi.org) | None | 29 KB |
/css/style.css(newpipe.schabi.org) | None | 27 KB |
/img/nexus6.png(newpipe.schabi.org) | None | 26 KB |
…fonts/glyphicons-halflings-regular.woff2(newpipe.schabi.org) | None | 18 KB |
/img/bg_rectangles.png(newpipe.schabi.org) | None | 16 KB |
/img/newpipe_on_github.svg(newpipe.schabi.org) | None | 8 KB |
/js/features.js(newpipe.schabi.org) | None | 6 KB |
/img/bubu_thumbnail.jpg(newpipe.schabi.org) | None | 3 KB |
/img/GitHub-Mark-64px.png(newpipe.schabi.org) | None | 3 KB |
/js/web-api.js(newpipe.schabi.org) | None | 3 KB |
/js/swipe.js(newpipe.schabi.org) | None | 2 KB |
/js/tiles.js(newpipe.schabi.org) | None | 2 KB |
/js/parallax.js(newpipe.schabi.org) | None | 1 KB |
/img/logo.svg(newpipe.schabi.org) | None | 1 KB |
I know we aren't using a CMS, but was it still possible to offet our blog as an rss feed?
many pages do use the same description or don't have any at all
Page descriptions shouldn't be too long or too short. Long page descriptions will only be partially shown in search results and short descriptions are unlikely to to be helpful to users. We recommend page descriptions are between 100 and 320 characters.
Every page should have a description that isn't used anywhere else on the site. Similar to page titles, it's unhelpful for users to see duplicate page descriptions in search results and when many pages share the same description that description is less likely to be shown. Google says it's better to give no description for a page than to have many inaccurate and duplicate descriptions but you should make sure your important pages have well-written unique descriptions.
Follow up of #10.
@theScrabi @TheAssassin This needs some improvements, but overall, what do you think of the concept?
We could then also remove the slides Lightweight
, Open Source
and Price/Free
and add them as separate tiles below / above multiple services.
We need a page for an imprint.
If we don't have one, we can get in trouble with German and European laws.
Further, we should discuss whether we use cookies.
Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers.
Library Version | Vulnerability Count | Highest Severity |
---|---|---|
[email protected] | 1 | Medium |
[email protected] | 1 | Medium |
See https://newpipe.schabi.org/press/announcements/. Still using the old style. The new style should be used there, too, as it's much nicer.
Also, we should make sure all announcement posts really carry the right tag, I miss a few posts on that page.
We might also just drop the page and link to the Blog.
As already discussed before we need a place to explain features a little further. We collected some potential Q&As and tutorials in TeamNewPipe/NewPipe#1316:
Nevertheless we should introduce new features for each new version in a detailed blog post.
I'll come up with a nice design soon.
We have quite some user quotes which is nice, and we should stick to it.
But we should also add quotes from online journals, blog, and famous people on the net.
Like here:
medium.mybridge: "NewPipe: A lightweight Youtube frontend for Android."
https://medium.mybridge.co/38-amazing-android-open-source-apps-java-1a62b7034c40
caschys blog:
https://stadt-bremerhaven.de/newpipe-erlaubt-das-abspielen-von-youtube-videos-wenn-der-bildschirm-aus-ist/
I would also like to feature c't but they only wrote about NewPipe in an artikle you'd have to buy, we might need to ask them weather we could quot this article or not.
What I have here is not much, and it's not good, I know. But whenever you find something/someone important on the net reporting about newpipe, I would prupouse to quote it/him.
As @ponypower mentioned, we need a subpage for donations.
So we have to discuss, which services should be offered and then gather the required information for coding.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.