The devcon-archive from efdevcon

Pass data to video pages

Previously there were devcon details that were passed to the video page via props. Now that these pages are generated via the Node CreatePages API we need to use the pageContext object to fetch this data since there isn't a clean way to use React props to interface with these pages.

Until this issue is resolved there will be some broken URLs.

Replace stock README with something more useful

We want to keep the basic Gatsby instructions, but supplement it with actual useful information about the project.

Update logo

Currently using an older iteration. There is an SVG file we can use.

Add media queries for easy fixes for mobile

Currently there are a number of elements that could benefit from some additional margins and padding on smaller display widths.

Improve header legibility

Currently there is insufficient contrast in cases where it scrolls over a white background.

Add links to copy

Will need to dangerouslySetInnerHTML i.e. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Add Video Filter Options

Filter categories:

Day
Room
Speakers (as text box since a drop down would be epically insane)?

Align sub items of Archive components on Home page

Currently the items (logo, header/subheader text, and paragraph text) are only center and aligned relative to each other, but it would look cleaner if they were all aligned along the same grid axis.

Solution: change display from flex to grid and figure out some reasonable grid column rules (probably 1fr 1fr 1fr with breakpoints for mobile).

Fix embed errors

Example that can be seen on the Devcon-0 details and videos pages:

Most likely this is due to a bad embed link. We should do a review pass to identify all the faulty videos, and fix with the correct URL.

Link to blog post

Link should appear underneath Devcon announcement

Apply hover effects for mobile users

The hover states on desktop view look nice, so they should be activate in mobile view where users will generally be unable to perform mouse actions.

Create divider

Divider will distinguish between Devcon announcement and Devcon Archive content.

Fix ArchiveHero component usage for individual Devcon pages

To trigger bug: Go to one of these routes: localhost:8000/devcon-{n}/{supporters/details/videos}/ and the browser will return an error page data.file is null.

Home: Add images to each devcon section

Pagination: better link styling

Minimize main thread work

I just ran a Chrome Lighthouse audit on archive.devcon.org

Overall good scores, but got dinged slightly on performance, and the main culprit was main thread work. This reduces the time before a user can interact with the site, so it is worth improving. An article on how to improve this can be found here.

Reverse Order of Devcons on Landing Page

From 5 to 0.

copy update

via Joseph Schweitzer:

Updated text below:

The annual conference for all Ethereum developers, researchers, thinkers, and makers.

Welcome to Osaka! Devcon was a unique and large gathering in Japan in October of 2019 that featured more content than ever before as the Ethereum ecosystem closed in on the launch of Eth2. In addition to the content below, Devcon featured the event's first outdoor stage and experiential Devcon Park area, a powerful open from the city of Osaka, a celebrity appearance by the world’s most well-known dog, Kabosu (the original “Doge”) and so much more.

Devcon iv brought Ethereum's ecosystem and family back to Europe with a 2018 event at the Prague Convention Center in the Czech Republic (Czechia). With 3,000 strong in attendance, Devcon iv was filled with talks, experiences, teams from a matured application ecosystem, and more enterprise support than ever before. The week's expansive content, which was featured across on 5+ stages, and other media and information can be found here.

In many ways, Devcon3 was a celebration held around "Dio de Los Muertos" and Halloween in Cancun, Mexico in October of 2016. It was the largest ever Ethereum gathering at the time, with just under 2000 attending in a year of unprecedented growth in terms of network use, adoption and progress.

The start of Devcon2 came alongside one of the most (in)famous moments in Ethereum's early history as a set of Denial of Service attacks were launched against the network just hours before the event was set to begin. With many of the more formidable builders in the ecosystem gathered together in Shanghai, China in September of 2016, they planned emergency upgrades backstage to restore full functionality to the network, before stepping forward only minutes and hours later to speak to the future of the network on stage. See talks, photos from that morning and more below.

Only a few months after Ethereum came to life, DΞVCON1 was held in London in November of 2015. Presenters remained hard at work on each piece of the original Ethereum roadmap, early dApp teams took the stage, and supporters teased industry adoption that was to arrive soon. See more below!

It all began in Berlin. Long prior to the launch of Ethereum, the earliest builders and co-founders gathered in Kreuzberg in late November of 2014 to outline their work and designs for the future of Ethereum at a meetup called "ÐΞVcon-0".

Improve pagination

Currently only have previous page, and next page. This is fine as a start, but we should provide numbered links as well.

Footer contrast

IMHO this could be nicer with more contrast

redirect devcon.org archive.devcon.org

Add images to Devcon details pages

We can include a generic image for now, but at some point we should have selected shots from Devcon 0 - 5 to be featured.

Remove supporters page from devcon-0

No supporters to be listed, so it shouldn't even be available as a page, it should just 404

Fix HTML errors

https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-42--devcon-archive.netlify.com%2F

Improve build time

Build times are currently taking several minutes. This harms rapid dev iteration, and is costly since build time is how Netlify charges us to host the site.

Provide filter options in a sorted collection

Currently the filter options will appear in whatever order they appear in an essentially unsorted list of videos. So you might see the options for filtering by days appear like this:

All | Day 1 | Day 3 | Day 2

Solution:

Alphabetically sort filter options before rendering them in the UI.

Devcon splash page

Add ethereum-blog link to footer

Fix broken CSS

While changing some of the layout of the page while implementing the paginated videos I introduced some layout bugs that I need to fix.

Update header

Change Devcon Archive text to Ethereum logo w/ Devcon text

contrast issue

IMHO black text would be much better here:

Add legal links

we need to link to:

https://ethereum.org/cookie-policy/

https://ethereum.org/privacy-policy/

https://ethereum.org/terms-of-use/

Create search option

At a bare minimum, should be able to search by video titles.

Other nice-to-haves:

Search by speaker
Fuzzy string searches

Create customized 404 page

We have one, but we could create a better one. Ideally something that is tied to both the Devcon-Archive site, and the Devcon6 and beyond website.

Start adding additional data about talks

talk descriptions, speaker bios, etc.

We have a lot of this data collected already, but we will want to validate it somehow, and complete it where it is missing.

One possible idea is to have a speakers page, although we need additional discussions to figure out what that might look like.

A smaller lift would involve creating popup windows/new pages from the videos page that includes this information.

Create pagination for videos

I'm thinking it should be 20 or 25 videos per page. I can start running some tests on load times to figure out what the sweet spot is.

Improve PrettierRC file

Using Prettier is nice because it provides consistent formatting, and will also quickly spot errors like unclosed braces, etc. We currently have a fairly generic file which is mostly fine, but whenever we spot some formatting that we think can be improved we should look into providing a better configuration. For example, Prettier formats the following CSS:

.dc0Gradient {
  background: linear-gradient(to bottom, #fa739c, #fd3673);
}

when it could be one line.

First we need to start collecting images
Probably better to use an image hosting site rather than manage it on the site itself (would kill us with Gatsby build times...)
Will there be one repo we point to, or multiple repos? Whatever ends up being the answer, there will be different design choices involved in how we create a photos or photo collections page.

Replace stock Ethereum logo with actual logo we decide to use
Make sure it is a transparency
Make some corrections to max and min widths (may require passing some size props that determine CSS to use via classnames). For the Archive components the logo should not have a height greater than the sum of the header text column.

Install WorkSans font

This is the font used in Tomo's designs https://fonts.google.com/specimen/Work+Sans?query=work+sans

efdevcon / devcon-archive Goto Github PK

devcon-archive's People

Contributors

Stargazers

Watchers

Forkers

devcon-archive's Issues

Recommend Projects

Recommend Topics

Recommend Org