loading...
Cover image for webgems.io πŸ’Ž a devs startpage

webgems.io πŸ’Ž a devs startpage

lostdesign profile image AndrΓ© ・5 min read

πŸ‘‹ Introduction

Since I am a community person, I am often helping people within several developer discords as well as running my own server called devcord. There is not a single day were I don't find myself linking some resource, as many beginners are asking how to do "that" in flexbox for example.

On our server we even have a bot command to just send an embed saying "Hey want to learn flexbox? Checkout https://flexboxfroggy.com". But sometimes I feel like a particular member might not want to use flexboxfroggy but is looking for a documented approach, so I sent them the link to the css-tricks flexbox guide.

πŸ’‘ The idea

That brought me to the idea to create a website for beginners, that are looking for resources which will help them get started in the big and chaotic domain of webdevelopment.

As always I started to look out for a domain first, before even thinking about how I would actually implement this site itself. It was the 10th of may that I started to bug my friends asking what they think about this particular domain name. It's just a small flaw of mine, thinking good domain first and then comes the project (but that actually just changed recently - more on that soon).

Here is the list of domains I was running through, until I found the perfect match (with the help of my friends, looking at you Jacob): webgems πŸ’Ž, "the best gems out there for developers". If you are lucky, you might be still able to register any of these. IMO those are some good domains :)

webbin.io - webbin.dev - sourcebin.io - webcollect.io - devbucket.io - webrepo.io - devcollect.io - devbin.? - resourcebin.io

πŸ’» Starting to dev

Anyhow, once I was settled on the domain, I quickly registered it since you should never wait too long - the domain can be gone anytime. It was now time to decide what stack would be fitting for this site - since Vue is usually my goto framework and just recently I started to rewrite my own website in Nuxt, I decided to use NUXT for webgems as well.

I am not sure how deep I should go into the dev process, I'd only like to highlight that one particular thing has been costing me some nerves:

Being able to click on a copy button that will highlight the card and put a reference in your clipboard.

That's how it looks like now:
highlight-card-preview

It worked completely fine on localhost, but when I pushed it to prod using Netlify, the reference and routing would just break. I was so hyped about this project but this one issue frustrated me a lot. After some hours researching about this issue I found some references about Nuxt+Netlify and Netlify adding trailing slashes. Quickly I decided to spin up my very own server to verify if it was either me or Netlify's issue.

discord-message

At that time I was kinda sad since I thought i could not use Netlify, even if I enjoyed their whole workflow that much.

me sad

I guess that message makes it quite clear?

Well after I came down a bit, I wasn't happy with the current situation and wanted to find out if there was another solution to the problem. It took me some days but I found the solution - here is the final code snipped. I actually forgot how I fixed it, but I will make sure to dig through the commits and come back later with the answer for you!

  methods: {
     async createCopyUrl() {
      try {
        let currentPath = this.$router.history.current.path
        let reference =  this.createReferenceTag(this.$props.title)
        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
        this.$router.push(`${currentPath}?card=${reference}`)
      } catch (e) {
        console.error(e);
      }
    },
}

βœ… IT'S LIVE

As that was out of the way and I was now able again to work with Netlify, I continued to add more resources and fix some small things here and there. Several streams on my twitch and one month later, it was finally done. I pushed the last commit and decided to tweet about it, even if I am not a twitter person that much.

Not thinking what would happen, the tweet actually blew up. It was the first time for me that anything I tweeted actually reached that many people.

About 120.000 people saw this tweet and the site itself got about 10k visits within the first week of the launch. I was completely astonished that I'd actually get that support.

Shortly after the launch, S3BAS a friend from the devcord server chimed in on the project and helped me out a bit, refactoring the code and what not. We had some late night shifts but it was well worth it.

This project was also published on producthunt, but I kinda failed the launch there, assuming not posting at the right time.

πŸ“– Skill++

While working on this project I had so much fun and learned/fixed my git and git flow skills. Thanks to the people that sent me messages on how much they appreciated what I and the contributors of this project did. Even today, some weeks after the launch people still thank me for this project. And it means so much to me, that it does exactly what I wanted - help other people (and ofc that I don't have to send individual links anymore :D).

It has been a road of emotions and just recently webgems was mentioned in one of my favorite podcasts "Syntax.fm". I can highly recommend listening to their podcasts and this particular one, where webgems was mentioned -> click here.

I didn't even notice at first it was mentioned there, but yet another friend told me about it. I was actually close to crying, hearing that I made it on there. I was shaking at least and had to tell my friends about it, even if they don't know anything about web development at all and couldn't understand what was going on. But they were happy for me at least, so i appreaciate that.

πŸ’Ύ The Conclusion

Even if your project is nothing completely new, people that may not believe in your idea, the issues you face or any other reason should never stop you form doing what you are passionate about.

The web domain is quite toxic sometimes and even more for beginners - that's why I wrote this story about this small project, that still had an impact.

If you are looking for a friendly community with like minded devs and are in need of help or want to help people, come join us over at devcord - we would love to have you there.

If you want to checkout the source of this project, feel free to do so it's on github. I'd love if you share it when someone is in need of some resources as well as contributing to the project - just shoot a PR or open an issue if you think something is missing.

.

GitHub logo webgems / webgems

A curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)

Netlify Status All Contributors

webgems.io

This project should help anyone to find new resources but especially beginners in the field to have something they can look things up.

Built With

Contributing

Please read CONTRIBUTING.md if you'd like to report an issue or contribute code.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details

Posted on by:

Discussion

pic
Editor guide
 

Lovely idea! Maybe you can find a way to integrate the already existing and pretty nice awesome lists collection: github.com/sindresorhus/awesome - Seems kind of related to what you want to achieve πŸ˜€

 

As far as i know the purpose of awesome lists is just having a list for "cool" things you might wanna checkout. Webgems should rather be a resource to learn web development and design. But maybe, the awesome lists should be added as a resource of their own, just something to look into.

Thanks you btw!

 

I think this is an awesome idea, and there are some great resources here! πŸ˜€

However, I think the structure for organizing content could use a little touching up. I can see things getting messy pretty quick. Just a thought!

Great work though.

 

Thanks Tenyson, appreciate it!

Yeah definitely needs some more work, already adressing this in some issues:
github.com/webgems/webgems/issues/44
github.com/webgems/webgems/issues/46
github.com/webgems/webgems/issues/52

 

I really like your website πŸ’™ and already contributed to it πŸ˜‰

Regarding Discord: It is running really slow (compared to Slack) on my MacBook, is that just me or a general Discord problem?

 

Ahh, hi there again and thanks!

I cannot say that it's slow on neither windows or mac for me at least. Maybe remove the app and reinstall it? I am using the canary version for both, windows and mac at the moment.

 

There are several websites similar to this one, but the idea of it being a public repository hopefully means it doesn't die out like the other ones. :)

I made a PR with some of my favorite links.

 

Yeah, that was the issue I had with the others, simply not updated anymore which is sad. There are so many hidden gems out there and it's a shame to not find them.

Already saw the PR, will check it tonight. Thanks a bunch.