chalarangelo / 30-seconds-web Goto Github PK
View Code? Open in Web Editor NEWWebsite infrastructure for 30-seconds projects.
Home Page: https://30secondsofcode.org/
License: Creative Commons Attribution 4.0 International
Website infrastructure for 30-seconds projects.
Home Page: https://30secondsofcode.org/
License: Creative Commons Attribution 4.0 International
The listing anchors component feels clunky and has some minor responsiveness issues. We should redesign it, so that the horizontal scroll is gone and the last button can expand to a multi-row list of buttons for categories/subcategories based on context.
The plan for 2020 Q1 can be tracked here.
At a glance, we aim to:
Currently, archive is synonymous with unlisted top-level categories (e.g. language tags). We should separate the two pieces of functionality to allow unlisted listings (i.e. the blog listing which will reside elsewhere).
Language tags are usable, but not distinct enough to allow users to quickly parse them visually. We should design small, clean icons for languages to be added next to the language name in the tags, similar to what is now done for the expertise level dots.
Currently, we provide some feedback for user actions such as copying a snippet or opening it on Codepen. Similarly, we highlight the selected main navigation item to help guide users.
It will most likely improve the UI/UX of the website if we provide better visual feedback for user actions (e.g. animations and microinteraction-type feedback) as well as better visual indicators of where the user is located and what they are doing.
The first step in this process is investigation of possible opportunities, possible solutions and ideation on how to proceed.
When 30-seconds-web was started, Storybook served as a tool to help document components. As time went by, it has fallen out of sync with the codebase and is more of a problem (mainly when navigating the codebase) rather than a solution.
Storybook will be removed in the next sprint and its data will be replaced with more concise comments and documentation inside code files, as well as better tests for frontend components.
Nowadays there are tons of information out there, that it is really hard to visit websites/blogs one by one to get read all the news around coding. Instead, providing an RSS feed every user can use its very own feed reader to keep up-to-date :)
Redesign preview cards and tags. The idea is to incorporate language icons (#32) to the cards and declutter them as much as possible. Tags should be revamped either in the form of chips or more plain-text alternatives without as many borders. Expertise indicators might be placed in two distinct places as to provide more dense icon-based information, while allowing tags to be decluttered.
Some of these changes will also be applied to the snippet page cards and simple cards for increased design consistency.
When given some context, the recommendation engine's current behavior seems to recommend the same top snippets in the related category over and over again. An alternative approach is needed in order to achieve the following:
This should also take #43 into consideration to allow for greater flexibility in recommending snippets.
The plan for 2020 Q3 can be tracked here.
At a glance, we aim to:
Content/data transformation method migration to src/functions/transformers
.
transformSnippetIndex
parseSnippetContext
-> transformSnippetContext
Blocked by #66
Breadcrumb for improved navigation
Currently we are serving far too many font resources for the website (8 font variants for main font, 3 for code font). We should investigate and update styles to minimize these to 3-5 main font variants and make sure all the code font variants are necessary.
Create the Twitter bot step-by-step:
Be extra careful with the bot's credentials along the way.
On desktop, we have far more screen real estate than on mobile. It might be worth investigating opportunities to customize further based on viewport (e.g. CTA text can be longer on desktop, as there is unused space).
There's a lot of code left untested. We should add tests as soon as we can and keep maintaining them.
Provide an easy, customizable way to generate the necessary files for a new content source repository with a single CLI command.
Provide a mechanism to decide the order of non-featured content repositories in the main listing (/list/p/1
) page.
Currently, we only have one CTA for GitHub:
We should expand our CTA range to at least Twitter with a secondary design.
After having two CTA options, we should assign a certain percentage of CTAs on pages daily for Twitter and the rest to GitHub.
We will also probably add an Instagram CTA as a next step in order to integrate with all social platforms that we currently support.
ETA: January, 31st at the latest for the Twitter CTA. February, 28th at the latest for the Instagram CTA.
Improve the search page by adding the following:
Currently, all the code (front + back) lives under src
without specific directories for things. We should move atoms
, molecules
, organisms
and templates
under a components
directory, while also updating the backend code to closer match an MVC backend architecture.
As this is a reasonably large task, it will probably be undertaken piece-by-piece alongside other things.
All external links in snippet pages should be marked as such and receive a target _blank
.
Microdata could be very useful when optimizing our SERPs. We should investigate opportunities for integration with our existing components.
Our Gatsby is a few versions behind. We should try and upgrade it at our earliest convenience.
Lately, our styles and iconfont are getting a bit messy. We should perform some cleaning to make things easier for upcoming tasks.
The plan for 2020 Q2 can be tracked here.
At a glance, we aim to:
Add a custom parsing strategy that can read the snippet description and generate a <meta>
description tag that contains real content from the snippet instead of the generic one we show now. Handle edge-cases (long descriptions or cases where the format is odd) by using the generic fallback.
Our type definitions are a little bit looser than I'd like. We should investigate if we can make them a bit tighter at places and also check if we can further flatten certain data sent to the frontend (e.g. snippet preview card data) to minify the footprint of these types.
Our dark mode is currently a lot less polished than our light mode, based on the feedback I have gathered. Let's revert the default back to light mode for all users initially and, when we nail dark mode, we can re-enable it.
After deciding against #70 due to UX and technical concerns, we should revamp the pagination of the website, while fixing technical issues:
These rules apply to all repositories and are in effect immediately since Jan, 20, 2020. Please take the time to read them and be sure to follow them when interacting with the projects to minimize problems and speed up the whole process.
Previously, in GitHub README.md or in the site, the snippets were sorted alphabetically. That was handy for casual consecutive reading. Currently, we have only the site with cards in a hardly understandable order. Can the alphabetical order be restored?
Currently, snippet cards are clickable in their entirety. This creates a few major issues:
The easiest solution would be to move the link to the title and any other elements necessary to make linking to individual snippets easier, probably as part of the redesign in #65.
There should be the ability to sort the snippets by different metrics.
I recently noticed that our OpenGraph tags do not work as intended. We should fix this as soon as possible.
Currently, due to the ranking system implementation, blogs have a tendency to float to the top. This is alright in the main listing, but gets kind of tiresome in category (language) and tag pages. We should penalize the ranking of blog snippets in those cases.
Currently, the capitalization of tags is handled by the Tag
atom itself. However, this burdens the client-side unnecessarily and could be easily handled on the server-side while generating the pages.
Meanwhile, we can use memoization to only capitalize every tag once and also add a dictionary that can handle special tags (e.g. tags with spaces, CSS
becoming Css
etc).
In preparation for #27:
- Reach 8% CR for snippet interaction buttons.
We should add GA goal tracking for snippet interaction buttons (copy, codepen) before the end of the quarter prior to working on this OKR.
Preliminary results show that the recommendation engine helps guide users in their journey. We should expand upon the system by allowing cross-category recommendations (e.g. JS and React, JS and CSS). This will allow for greater flexibility in terms of promoting content and guiding users in their journey.
Sometimes, pretty URLs (without trailing /
) might not respond correctly.
Should respond with the correct page
The plan for 2020 Q4 can be tracked here.
At a glance, we aim to:
Depends on #57.
After the blog introduces changes to the navigation bar, we should take the time to redesign it in order to provide a cleaner UI/UX for users. Namely, we might opt for the following:
The search engine is quite adequate, but it might be possible to improve it by discarding even more stopwords (especially programming-specific ones) and/or injecting additional terms into each snippet's keywords (e.g. list
is a synonym of array
). We should investigate both of these options and see if we can improve the matching strategy.
The current search bar design is usable, but could be improved to match the rest of the website better. We should change the design around this, especially in combination with #40 to provide a better UI for users.
It might also be worthwhile to provide a way for users to clear the search field via an icon.
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.