chalarangelo / 30-seconds-web

Website infrastructure for 30-seconds projects.

Hi there 👋

I'm Angelos Chalaris, a web developer from Athens, Greece. I love programming both as a job and as a hobby and I spend a lot of time writing code and testing out new ideas. I work mainly with web technologies such as JavaScript, HTML, CSS, Node.js, React and SCSS, and I occasionally dabble in Python, Astro and Svelte.

My work 🔭

• I work as a frontend engineer for Skroutz - website
• I am the creator of 30 seconds of code - website
• I code a lot, mainly in JavaScript - view repositories

Contact 📫

You can reach me via email at [email protected]

30-seconds-web's Issues

Broken card view on mobile for long title snippets

Bug description

Language tag image breaks in certain viewports when snippet name is a long word.

Screenshots

Environment

Chrome on Android

Provide RSS feed for feed readers

Description

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 :)

Twitter bot

Create the Twitter bot step-by-step:

• Create a Twitter bot using the Twitter API.
• Release a semi-automated version of the bot, include in CI/CD pipeline. Investigate GitHub Actions to help tweet more often.
• Add the Take-a-Picture mode, making necessary changes whenever needed.
• Add the necessary data and customization for snippets to be easily snapshotted. This will include a filtering engine and the data needed to render cards, hashtags and everything else.
• Integrate with our CI/CD infrastructure to take a picture of a snippet.
• Put everything together, release the fully automated bot.

Be extra careful with the bot's credentials along the way.

Navigation bar revamp

Problems

• The navigation experience is unclear, as Ι cannot navigate back to the Home page.
• The highlighted bar icon makes little to no sense depending on where I am on the website.
• The Home page and the main Listing page are very similar yet their content is different.
• The search bar in the Home page provides little help, as the Search icon is one click away.
• The Home page shows very few category suggestions, I have to go to the Listing page to find other categories.
• The GitHub icon in the main navigation opens a different page in a new tab.
• The Dark mode switch is not an actual navigation icon.
• The navigation bar placement on desktop feels odd.

Proposed solutions

• Add a home button and combine Home page and main Listing into one page (redirect one to the other), providing a clear navigation experience.
• Highlight the icon only when it cannot be clicked to change the page (i.e. in Search, but not on the second listing or a category page).
• Move the GitHub icon under an option ("Show GitHub Edit links"), move it to the snippet card to avoid confusion.
• Move the dark mode switch to an option, remove from navigation bar.
• Combine content recommendation from Home and main Listing into one page, show all categories in Home page.
• Move desktop navigation bar to the top of the screen to better utilize screen real estate.
• Add options icon to main navigation.

Add ability to sort the snippets.

There should be the ability to sort the snippets by different metrics.

Handle external links in snippet pages

All external links in snippet pages should be marked as such and receive a target _blank.

Investigate micro interaction and feedback improvement opportunities

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.

Timeline

• Investigation should be completed as early as possible
• Implementation will be part of Sprint 4

Separate logic for listing controls and archive

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).

Add tests as necessary

There's a lot of code left untested. We should add tests as soon as we can and keep maintaining them.

Tighter type definitions and minify footprints

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.

Change card clickable area

Currently, snippet cards are clickable in their entirety. This creates a few major issues:

• The description text cannot be selected with a mouse.
• The tags or any other part of the card cannot be links themselves as they are contained in a link.
• Links do not have discernible names or their names are too long (SEO & a11y).
• Users might accidentally click on a card when dragging on mobile.

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.

Revamp navigation bar

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:

• Move desktop navigation bar to the top of the screen to better utilize screen real estate.
• Allow swipe gestures if possible to navigate between "screens" (Snippets, Blog)
• Declutter: Remove settings and move them to a dedicated location (currently just Dark Mode, but will probably add default order options (see #23) in there).
• Another idea is to move the navigation bar to the top for all users, as there will only be two options that are swipable. This will also allow us to remove icons entirely.
• Figure out search placement after the revamp (although all of the above suggestions can survive having the search as part of the menu - thus allowing for a 3-button navigation bar instead of a 2-button one).

Investigate responsive customization opportunities

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).

Order for cards

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?

Investigate search engine, improve matching

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.

Restructure codebase

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.

Move transformers to dedicated directory

Content/data transformation method migration to src/functions/transformers.

• transformSnippetIndex
• parseSnippetContext -> transformSnippetContext

Blocked by #66

Revert dark mode default

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.

OpenGraph tags not working correctly

I recently noticed that our OpenGraph tags do not work as intended. We should fix this as soon as possible.

Make snippet meta description more dynamic

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.

Settings menu

Add a settings menu with the following:

• Dark mode switch - Related #57
• GitHub edit switch - Related #57
• Sorting default mode picker - Related #23

Create a job for adding new content sources

Provide an easy, customizable way to generate the necessary files for a new content source repository with a single CLI command.

Revamp preview cards and tags

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.

Enable goal tracking for snippet interaction buttons

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.

Category-specific ranking

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.

2020 Q1 OKRs

The plan for 2020 Q1 can be tracked here.

At a glance, we aim to:

• Lower Bounce Rate from 40% to 35%.
• Increase average session duration from ~3 to 4 minutes.
• Increase number of pages per session from ~5 to 7.
• Keep Lighthouse scores consistently above 90.
• Reach 500 Twitter followers.
• Increase snippet collection to 650 snippets.
• Create a blog and write at least 10 blog posts.
• Reach 6 content repositories.
• Have a 10% recommendation CR from snippet pages.
• Create at least 3 personas for users.
• Gather research data from 100 users using a survey.
• Conduct 6 face-to-face interviews with people
• Decrease contibution guidelines length by 10%.
• Increase platform test coverage from ~60% to 70%.
• Implement at least 2 end-to-end tests for 30-seconds-web.
• Simplify steps for creating a new repository to 1 command.
• Install 3 Probot/Actions procedures on our repositories.
• Create a Twitter bot and tweet 100 times.

Breadcrumb for improved navigation

Breadcrumb for improved navigation

Infinite scroll mode in listing

• Add infinite scroll (with some sort of URL-based pagination) in listing pages
• Enable by default
• Add option in the settings - #69 - to allow change of defaults
• Handle impact on analytics
• Customize loading snippet page logic and going back to listing page scroll location
• Add a back to top button, if necessary

Reduce number of font resources

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 multiple CTAs, integrate with snippet pages

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.

Phase out Storybook

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.

Contribution & Collaboration Rules

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.

Terminology

• Contributor: Someone contributing to any repository under the organization
• First-time Contributor: Someone interacting with any repository's codebase for the first time
• Team Member: Someone actively involved in the development of a repository and part of the organization
• Outside Collaborator: Someone actively involved in the development of a repository and part of the outisde collaborators group
• Collaborator: Someone actively involved in the development of a repository (Team Member or Outside Collaborator)

Rules for collaborators and contributors

1. Anyone can be a Contributor by contributing to any of the projects, provided they read the contribution guidelines on the relevant repository and follow the snippet template of the repository. In order to encourage First-Time Contributors, if their PRs do not follow the guidelines and template, Collaborators may review with "Request Changes" once. Any further issues with their PRs that are substantial and not in line with guidelines may be noted as such and closed without any further delay.
2. Contributors should follow the guidance of Collaborators in updating their PRs and resolving issues. Collaborators can edit PRs as they deem necessary, usually if the PR is abandoned over time, but the changes are worth adding, if the PR requires substantial changes that are hard to note in comments or if the PR requires very minor formatting changes and is due to be merged immediately.
3. Contributors can apply for Collaborator status only if the see an open call pinned in 30-seconds-web. Contributors applying for Collaborator status must meet the necessary criteria, as specified in the open call at the time of applying. Collaborators will typically go through a temporary Outside Collaborator status that can last up to 6 months and then be converted to Team Members.
4. All Collaborators are required to follow rules and guidelines and be polite when interacting with the community. Violations will be handled privately by other Team Members, allowing Collaborators to make amends for their mistakes. Should a Collaborator violate guidelines and code of conduct extensively or repeatedly, they might be removed from their position after being notified and allowed to make amends.
5. All Collaborators are required to inform either @Chalarangelo or @fejes713 if they are going to be inactive for prolonged periods of time. Team Members inactive for more than 6 months will be converted to Outside Collaborators and Outside Collaborators inactive for more than 6 months will be removed from the organization. This is temporary and you can re-apply for as a Team Member at a later time, if you are interested, provided there is an open call for new Collaborators. This measure is in effect mainly to minimize potential security breaches.
6. Repositores and teams inactive for prolonged periods of time should also inform either @Chalarangelo or @fejes713 in advance. Any repositories that are inactive for over 6 months will be archived temporarily. Work on archived repositories can be restarted after informing either @Chalarangelo or @fejes713 about future plans.

2020 Q2 OKRs

The plan for 2020 Q2 can be tracked here.

At a glance, we aim to:

• Decrease search page drop-off rate from 35% to 30%.
• Increase monthly return visitors from 13% to 16%.
• Keep Lighthouse scores consistently above 90.
• Reach 1200 Twitter followers.
• Increase monthly Google CTR from 1.7% to 2.0%.
• Increase monthly users from 5k to 7k.
• Increase snippet collection from 785 to 850 snippets.
• Increase blog posts from 15 to 30.
• Keep a 12% recommendation CR from snippet pages.
• Collect the top 100 most searched terms on the website.
• Increase platform test coverage from 75% to 85%.
• Ensure that 80% of our platform is documented adequately.

2020 Q3 OKRs

The plan for 2020 Q3 can be tracked here.

At a glance, we aim to:

• Keep search page drop-off rate at 25% or lower.
• Reach 1500 Twitter followers.
• Increase monthly Google CTR from ~2% to 2.5%.
• Increase monthly users to 7k.
• Increase snippet collection to 920 snippets.
• Have a total of 45 blog posts published.
• Have a 15% recommendation CR from snippet pages.
• Move the entirety of the asset pipeline to custom tooling.
• Research and prototype part of a CMS to speed up content creation.

Investigate Microdata opportunities

Microdata could be very useful when optimizing our SERPs. We should investigate opportunities for integration with our existing components.

Enhance recommendation engine matching strategy

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:

• Reduce repetition (possible solutions: send more recommendations to client, choose 3 out of 10 or so / pick 10 solutions in the backend and send 3 from them at random)
• Improve matching (possible solution: use a better algorithm to find related content, grow outside of the primary tag)

This should also take #43 into consideration to allow for greater flexibility in recommending snippets.

Design and add icons for language tags

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.

Improve search bar design

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.

Move capitalization from Tag atom to Gatsby

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).

Allow the settings button to link to the last page when settings are open

Redesign search page

Improve the search page by adding the following:

• Suggested searches and tips on searching in the empty space.
• Recommend snippets/searches if there are no results.
• Maybe always recommend a snippet or two in the empty search page to lead users to content.

[BUG] Pretty URLs might not respond

Bug description

Sometimes, pretty URLs (without trailing /) might not respond correctly.

Steps to reproduce

• Open Chrome Incognito
• Navigate to (https://www.30secondsofcode.org/js/s/pipe-async-functions)
• No response

Expected behavior

Should respond with the correct page

Screenshots

Environment

• Windows 10
• Chrome (Version 76)
• Behind Enterprise Firewall

Cleanup styles and iconfont

Lately, our styles and iconfont are getting a bit messy. We should perform some cleaning to make things easier for upcoming tasks.

Convert existing icons into an icon font

• Find a way to convert icons to an icon font quickly using a single command.
• Integrate the font generation step into the pipeline as necessary.
• Update usage of existing icons, replace with newly created icon font.

Allow cross-category recommendations

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.

Update navigation/pagination

After deciding against #70 due to UX and technical concerns, we should revamp the pagination of the website, while fixing technical issues:

• Pagination could be cleaner and easier to read, focusing more on important actions (Next, Previous) and not on all actions that it includes.
• Paginator's current page could be highlighted a bit more.
• Navigating from a paginator should always scroll to top.
• Navigating back from a snippet should find the previous scroll position.
• Preview cards per page could be increased (minimum of 30 which is more mobile friendly, 40 might strike a nice balance, 50+ is probably optimal for desktop).

Order customization for content sources in main listing page

Provide a mechanism to decide the order of non-featured content repositories in the main listing (/list/p/1) page.

2020 Q4 OKRs

The plan for 2020 Q4 can be tracked here.

At a glance, we aim to:

• Decrease search page drop-off rate from ~30% to 25%.
• Keep Lighthouse scores consistently above 90.
• Reach 2000 Twitter followers.
• Increase monthly Google CTR from ~5% to 7%.
• Increase snippet collection to 1000 snippets.
• Write at least 10 blog posts. (total: 50)
• Have a 15% recommendation CR from snippet pages.

Upgrade Gatsby

Our Gatsby is a few versions behind. We should try and upgrade it at our earliest convenience.

Redesign listing anchors component

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.

Timeline:

• Design doc by the end of January
• Release alongside blog in February