Awesome Talks Curated By the Community
License: MIT License
My name is Sara and I am a full stack developer based in London. I am also an avid football fan, terrible movie watcher and an average nerd.
Would be amazing if there was some sort of “cinema mode” that made the video expand across the page. I like to binge-watch talks in a separate browser window off to the side.
Of course, this could be an edge-case since you can just click through to YouTube for their cinema mode. But I'd love to stay on the same site just to watch video after video.
This project is amazing, by the way, I've looked for a way to binge-watch talks for a while!
Would love to have this.
I'm thinking of doing this using the top level theme in styled components theme provider.
Right now when a user end watching a video it get added in its watched list which is cool but why not we take it a step further like autoplaying similar videos probably by same speaker, same category or even similar to title (whichever available) , it'll be great to have this and i quess easy to implement too,
No one likes modals also this way them bundlesize can get smaller since formik is only loaded there
Also add a why to add this talk and a tags thingy to the form
Make jazzy submit animation
Sometimes you see a talk you want to watch, but can't do it right now
Save it for later?
The above talk does not seem to load in Cinema Mode because the author has disabled playing of that video on websites other than Youtube.
Not sure how to fix this. Please let me know how I can in contribute to fix this issue. Thanks. 😃
Hey! The info on Anjana Vakil is wrong, what is wrong is the video doesn't work
Hello people.
I had some spare time, so i decided to have a look for a new design. I may have gone a bit crazy on the emoji's but would love some feedback!
@pksjce @SaraVieira @farskid @tsiq-swyx @SaraVieira @varjmes @glennreyes @hosmelq
As you listing all speakers at once and its a long list so adding a live filter search can help in looking for someone up easily .. even you can also cache that api.graphcms.com response for a while may be,
hey, just saw your last commit , 60b2922 , i noticed you did removed these opts from Player component which we passed , having controls is ok ( the point is moot) but you sure you want related videos?
host: 'https://www.youtube-nocookie.com', playerVars: { rel: 0, showinfo: 0 }
We need server side because of media tags and good deeplinking so ... :(
The "Add new talk" button now announces itself as a button and is accessible by the tab key per PR #74, but additional functionality needs to be added to this element.
Since this is a role="button" and not a true <button> element, space and enter keys do not activate the button in all browsers.
Ideally this element would be turned into a true button element and then it would work as expected. The role="button" and tabIndex="0" could then be removed. The CSS would need to be revised to allow the button element to be styled like a elements.
If changing the element is not possible, then additional JS needs to be added to allow for space and enter keys to fire the onClick function correctly.
Thanks!
Superb knowledge source!!!
Was wondering, is there any reason why the talks are shuffled on the homepage?
Opened your tweet, Sandi Metz talk was on top, opened the link on the laptop, boom, no more Sandi Metz talk on top 😢
PS: Any tasks to contribute to this project? Would love to help.
As we doing SSR and storing favs and watched videos in localStorage, There's no way we can access that on server level so right now neither of them seems to be working as they are kinda limited with session more or less.
One way to do is re render few stuff at client side when the app actually get mounted
Even the dark mode fall to default as we ain't storing the state anywhere
Other way is to have cookies, though they have this limit of 4k (4096 bytes) but i quess that'll be enough for our purpose. Cookies are perfect for dark mode too
On server side we can either parse cookies with node or use express with cookies parser middleware to parse cookies from request and use that for our purpose.
And, who doesn't like cookies, anyway?
I was thinking that we publish a lot of videos and this will be ongoing, but how can we notify the users that we did that? Does it make sense? What would work best and not be spamish? I'm thinking it can attract more people to the website. I guess it's an open discussion.
Readme should have how to run the thing, how to contribute to the thing, badges and other random stuff
The twitter link for my page is messed up, it has the twitter URL in there twice and currently links to https://twitter.com/https://twitter.com/lukeb_uk
As i did notice its a PWA but it doesn't cache graphcms.com requests so all one could see in offline mode is this
Error!: Error: Network error: Failed to fetch
even an average requests to graphcms takes about 1.5 seconds and 100kb ( 33kb gzipped ) data to load so when the user refreshes the page it shows that preloader every single time, why not cache it for a while,
nvm lol
This will just redirect to a create new issue page on GH with the stuff filled out
Yellow Everyone !
SO I have been trying to move this to a server side rendered app for SEO, performance reasons and also so I can get a server to cache the requests in the future and the biggest issue I have been having is the shuffle of the talks because that has to be done when the data arrives and then all I can do is lazy load things but I can't really apply pagination :(
My question here is: Is it worth it ? Should I remove this and have normal pagination ?
@pksjce @varjmes @farskid @tsiq-swyx @gagyibenedek
Anyone I didn't tag is welcome to leave their opnion :D
I like @rahuldhawani's idea of the community voting on talks. Basically there could be two categories for the talks that are already in awesome status, and one for the ones where they are still pending.
Should they stay in pending state, or should they be removed after a while? Maybe each day/week without an upvote results in a downvote?
About the proposal feature, I'd say it's a bit overkill to ask for votes from people since the project is rather young. Would it make sense to let all the videos, be added to the list and instead offer a report as not awesome enough thingy?
A "Propose a talk" page. As the theme of the Awesome Talks is curated talks, let people propose a talk, and other people can vote on it if they find it "Awesome" enough.
But not sure people will vote or not. Your thoughts on this?
All these comments can be found on #7
Add this page as an experiment but this page is right now blocked by #35
The query is:
import { gql } from 'apollo-boost'
export default gql`
query speakerVideos {
allVideoses(
filter: { isPublished: false }
) {
id
speaker {
name
}
description
link
name
tags {
name
id
}
}
}
`
I love this project and have been wanting such a thing for years! I think it has great potential to be the one stop place to search and find tech talks.
I would love it if it were designed like Netflix.
We could start with the categories page to experiment and then if its a success, apply it to the rest of the site.
Each tag could be lined so
We would need a solid slider implementation. I'm experimenting with https://github.com/Noojuno/preact-slick. The examples look solid.
I need help with lazy loading Tags query like the ALL_VIDEOS query. I'm not that handy with gql queries. Will try to get a PR this weekend. What do you think?
We tend to sync together to watch frontend related conference talks over lunch, so being able to see how long each video is without having to click to play each video would be helpful to know which videos we can watch given only a certain about of time left at lunch.
Example: The Melting Pot of JavaScript
Hey! The info on Alan Kay is wrong, what is wrong is you are showing the "Fry the Monkeys" Alan Kay instead of the Computer Science Turing Award Alan Kay (check out the very different likenesses, etc.(
Hey! Thanks for including me, any chance you could update my bio to be "Software Engineer @github" thanks!
Need some shortcuts here bcs we're lazy af
/ (Slash) - Search field focus basically takes you to search box.ESC (Esc Key) - Focus out from the search field
Good for sharing and adding some comments maybe
Link to API: https://api.graphcms.com/simple/v1/awesometalks
Query:
{
Videos(name: "beyond react 16") {
name
}
}
Replace the id with the name of the current video :)
In react router please create a new route with the name param.
To linkify the name here is the function already used in the speakers page:
str.replace(/\s+/g, '-').toLowerCase()
and in https://github.com/SaraVieira/awesome-talks/blob/master/src/Pages/Speaker.js you can see how to turn that back to human readable string
Any questions ping me here or on twitter
Can someone please help me verify this issue with the current master branch. But ever since the weekend, I haven't been able to yarn install with the error below:
error An unexpected error occurred: "EISDIR: illegal operation on a directory, open '/Users/USER/Library/Caches/Yarn/v1/npm-wrappy-0.0.0-cb8ca390-1230-4227-ac58-c0f8bed18243-1528765851412'".
A picture is worth 1000 words:
Great job Sara!
I wanna use the website regularly but I care about having a search mechanism to find some videos.
Sounds cool? I can ship fast :) Just Guide me through the GraphQL queries used in the app please.
This will be for talks that can be just listened
Would be nice to have the speakers page look nice when shared on fb/twitter with the name / photo and maybe description. Not familiar with the Preact ecosystem, is there something like react-helmet to help with this kind of functionality?
Hey! The info on Zeynep Tufekci is wrong, what is wrong is:
She is incorrectly cited on Alex Qin's talk Shaving My Head Made Me a Better Programmer
I don't know much about GraphQL, didn't bother to learn it yet so don't know how things work here but got few suggestions
When watching a video in cinema mode the tilting animation isn't completely disabled, causing this:
Reproduce: click enable cinema mode on a video and move your pointer inside the video on the top right edge.
In order to have a page for people to vote on talks we need to have better validation on the form, right now it's only required so my idea is:
{
allTagses(orderBy: name_ASC) {
name
id
}
}
and when the person submits we just need to pass the tagID. This is not mandatory
Seems you added the whole link, in order for the video to work we only need the ID
Link to API explorer: https://api.graphcms.com/simple/v1/awesometalks
Please do not use this create talks that have isPubblished set to true in GraphiQL that
Image thumbnails look pretty bad on retina screens due to the size. And it looks like all the other resolutions youtube provide dont really work with our 3 column layout.
Thoughts on a 4 column layout instead?
Personally, I think that cinema mode doesn't make sense.
Maybe changing the "cinema mode" into a video page with a URL. That way it can be shared.
Hi Sara! just trying to learn from your code!
I notice in https://github.com/SaraVieira/awesome-talks/blob/master/src/Utils/global-styles.js you use injectGlobal from styled-components, together with remcalc.
I do use css-in-js but normally here i'd just have a global.css and import it, and just use rem's everywhere.
I'm not disagreeing with you here, just thought it was an interesting technical choice, and maybe something I can learn from. Wonder if you could talk a little about why you use injectGlobal + remcalc instead of other maybe more common approaches? thanks very much!
This one just doesn't have that feel, i'm not saying its bad as i'm no designer, it just doesn't fit with the site theme 🙂
This will be for talks that happen when people use the talk to release something
Sort by popularity would be nice.
Error: GraphQL error: A unique constraint would be violated on Videos
Expected behavior:
GraphQL error is caught and handled by toggling an error message to the user
See GIF :(
The font color is too light to read. Incredibly hard for people with visual disabilities.
Also, the speakers' names can be arranged in alphabetical order to look up quickly.
Like,
#A
Adam
Andrew
#B
Belle
Baddie
etc.,
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.