30-seconds-of-code: [FEATURE] Add beginner category

[fejes713]

[FEATURE] Add beginner category so new developers are welcomed with snippets that are easier to understand.

Description

We have over 200 snippets on our website. Yes, they're very useful in pretty much every situation! However, when a user visits our site he is welcomed with ary, call, collectInto snippets. They're very informative and useful but beginners won't find them friendly? - they might just debounce of the website and won't give __30secondsofcode__ another chance. Why don't we show some interesting and easy to understand snippets first or simply mark few snippets as beginner friendly?

Possible Solution

I suggest that we should implement beginner tags in our tag database and show those snippets first when someone visits the website. That way we are definitely going to help new developers learn faster and stick to using __30secondsofcode__.

What is your opinion on this? Should we do such thing?

[Chalarangelo]

I agree that we should approach this a bit differently than we have in the past. However, recategorizing the snippets in beginner and advanced etc is only half a solution. I was actually thinking of a deeper overhaul of the website:

My suggestion for the website

• Create a clean and lean landing page, so that people can read a short description of the project and what it has to offer. On the same page, we can add a snippet of the day section, built nightly from the cron job, that will pick a random snippet to feature daily. That way we can keep visitiors interested for longer and help people discover interesting snippets.
• Add some proper navigation and separate the content into pages. Each major tag that we currently have will be its own page, so that we can keep load times shorter. However, the main navigation sidebar should remain the same as it is, allowing for the website to feel as a single entity.
• Add a page for beginners that is featured promimently in the landing page links. Curate the beginner-friendly snippets a bit more carefully and add some more content to that page, such as extra links to documentation and learning resources to encourage people to start learning from our snippet database.
• Add a page for the archived snippets, just so that people can more easily find them outside of the repo.
• Add pages similar to the beginner page for certain categories of tasks (not sure if viable/applicable). For example, we could add a page with snippets for working with a specific kind of project. My reasoning for this is that we can curate single pages with a main goal more carefully and add more links and resources to them.

In short, the current website is something I put together very quickly and then we just incrementally improved it until it sort of worked and left it there. We really should work on improving it and making it more usable, while improving our branding and overall visibility. After all, we stil have the README if we want everything displayed as-is without any changes or extra features (and it serves a great purpose as-is).

Opinions are, as always, appreciated. Let's figure out the best approach to this and start building it.

[kriadmin]

On the same page, we can add a snippet of the day section, built nightly from the cron job, that will pick a random snippet to feature daily

Can we have a voting system which decides snippet of the day? Users can vote for the snippets that helped them. We can even have a login feature for a personalized experience.

[Chalarangelo]

Without any backend, neither of these things is possible, @kriadmin. For the highest exposure of snippets we should use a random rotation and have 4-5 snippets each day, so that users who visit the page multiple times a day or refresh can see a few different snippets. That way it should take about 2 months to run through all of them and they will all be featured at one time or another.

[Rob-Rychs]

maybe a multi-tag system?
In the left hand-menu underneath the search bar it would be nice if there was a grouping of three buttons that switched the order/categorization of the snippets

1. difficulty (default) -> rearranges snippets by alphabetic categorized under Beginner / intermediate / advanced (I'm new an hopefully going to find something new)
2. category -> rearranges snippets into current categories (I know how to find what I need)
3. a-z -> rearrange the snippets alphabetically like it's sesame street (gimme the archive i'll read em all)

Both the order of snippets in main viewport and menu should toggle/rearrange by selection

[fejes713]

@Chalarangelo @kriadmin That would definitely require a backend which is not urgent right now. Something similar was suggested in __30 seconds of CSS__ and we delayed the idea a bit.

Right now I think the best solution is what @Chalarangelo suggested. We should discuss the details on Gitter these days. I am free for few days; @Chalarangelo when do you want us to start this? Tomorrow?

[flxwu]

I also agree with @Chalarangelo 's ideas.

[Chalarangelo]

Hey, everyone. I am going to be available starting Friday up to Monday, so we can start implementing these changes and give the website a facelift. I am going to play around with the design of the landing page until Friday, so we have a basis to start from, then we can move on to the rest of the scripting and tools. I believe this is a procedure that will take just a couple of days, so we can all pitch in during the weekend and get it done.

I'll soon start a branch with the new landing page, so we can get started.

[skatcat31]

If done correctly this should be a static site or SPA. Some things to consider:

• Rendering
  Static or a Single Page Application(load all into memory and use a state to decide what to render)
• Snippet a Day Scope
  What limit do you want to have on it? Should it also have a chance to display more advanced topics from the Archive?

[fejes713]

@Chalarangelo be sure to reach out to me on Friday. I would like to help.

[Chalarangelo]

@skatcat31 Our current website is a static site, however the issue is the sheer amount of content that is featured on it that slows it down. My idea is that we should just separate categories into their own pages and update the build script to handle building individual pages, while keeping the navigation similar to the current navigation bar. That way the website will feel like one big thing but load faster.

Adding a landing page with more content, such as a better description of the project, contributors and snippets of the day will help us SEO-wise and allow for a more polished look. Again, utilizing the build script and the cron job will allow us to trigger this to build the website nightly and change the featured snippets, using a pre-generated list that separates snippets into chunks, so that the whole of our collection can be rotated within a month. I would also like for the landing page to have some part of the contribution guidelines and our philosophy featured so that people know we want them to be part of the project and how to get started (maybe the infographic we have at the very top of the contribution guidelines could be featured). The randomization technique could be gamed a bit to make sure no more than 1 snippet tagged advanced is featured at one time. If we do this, we can have the cron job regenerate the randomized index list every first of the month (or most likely every 10th considering we will be launching this at around that time this month).

For now, I would just like the archive to be a part of the website as it is buried deep in the project folder structure and it is barely noticeable. Archived snippets should not be part of the featured snippets rotation, as they are generally very specific and not the best thing to showcase to a newcomer .

Other libraries use the multi-page/single-navigation structure and I have found their websites to be far more enjoyable to navigate than ours on mobile, this is why I am proposing a multi-page redesign. Load times can turn people away from the website and we also want to greet newcomers with a nice explanatory page that tells them a bit about 30 seconds and its core ideas. After all, we are going to hit 20k stars soon and our website is nowhere near as polished as some other websites with this amount of traffic.

@fejes713 I will reach out to you on Friday and I will also actively chat with anyone available in the Core Gitter channel at the time, so we can all tackle this together.

P.S: I am also going to look for some new and interesting snippets we could add to our collection in the next few days. Expect to see a couple of PRs with new content (I already found a decent one I want to add if you guys agree).

[skatcat31]

I think we should probably update archived snippets then as Academic. At that point we can go into heavier detail about EXISTING concepts and unroll some snippets for longer discussion and have it be more of a "learn for the sake of learning" section than the snippets, which are "cool tricks and fast tips".

After all that'd be a great place to put in something like a server side event channel system with subscribers that can be used to create distributed messaging systems with cascading messages. 100 lines of code, and it's a feature a LOT of people would love to implement. All in Native JS, but requires a LOT of explanation.

Or something like Cookie Sessions that are secure and encrypted. 35 lines of code, secure, revokable, and a great article, but not something for our main group of snippets.

[fejes713]

@skatcat31 I would love to see that. Few principles that take more than 30 seconds to understand but are used in modern workflows.

[Chalarangelo]

For clarity and transparency, here's the list of beginner snippets that we will be featuring in the beginner page:

• everyNth
• filterNonUnique
• last
• maxN
• minN
• nthElement
• sample
• similarity
• tail
• currentURL
• hasClass
• getMeridiemSuffixOfInteger
• factorial
• fibonacci
• gcd
• isDivisible
• isEven
• isPrime
• lcm
• randomIntegerInRange
• sum
• reverseString
• truncateString

Special thanks to @fejes713 for hand-picking these.

[fejes713]

@Chalarangelo List could be improved, it requires nearly no effort to update it with the newest web.js script.

[Chalarangelo]

@fejes713 Yep, we could alter the list of beginner snippets anytime. The fact that it can be customized with nearly no effort is a big advantage, as beginners looking to make their first PR could actually tell us which snippets they find most useful. 😉

[Chalarangelo]

Resolved in #642

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.