Challenge yourself this #codevember!

Kenan Yusuf — Thu, 01 Nov 2018 10:16:38 +0000

Over the last few years in the developer world, November has been taken over by a creative coding challenge called Codevember. I'm attempting Codevember myself this year, and hopefully, after reading this you will challenge yourself too!

What is Codevember?

Codevember is a challenge by Arthur Rob and Valentin Daguenet which invites developers to post a new creative piece of code for every day of November.

The Codevember website has a list of hints for each day of the month, e.g. 1. Infinity, 2. Time and 3. Carrot. Using the hint, participants come up with a creative bit of code inspired by the word. For example, for the hint Music, you could create a usable piano with JavaScript.

Why should I do Codevember?

Here are a few reasons why you should partake:

Gives you a chance to experiment with new technologies that you might not always have a chance to
Helps expand your knowledge of HTML, CSS and JavaScript whilst having fun
After 30 days you will have a collection of code creations that you can be proud of

How can I do Codevember?

The Codevember team aim to make the challenge as accessible as possible and allow you to submit your creations using any platform/tool you like.

If you want to get your work featured on the Codevember website, you can do so in a few ways. To attempt Codevember on Codier, post a solution each day with the hashtag #codevember and the day of the month e.g. #codevember - 12 - My awesome work. CodePen users can get their pen's featured with the same title format. Alternatively, you can submit your work directly to the Codevember site.

And don't worry if you have missed a day or two, you can join in whenever!

Introducing Codier - Front-end Coding Challenges and Creations

Kenan Yusuf — Thu, 02 Aug 2018 10:29:15 +0000

Around two years ago, I was starting the final year of my degree in Digital Design and had to come up with an idea for my dissertation/major project. At the time, I had a year's experience as a front-end developer, and one of my biggest passions and hobbies was coding.

I spent a lot of my time on sites like CodePen, creating pens and occasionally using them as blog material on my personal site. The only blocker I had to creating more content was my inability to come up with ideas for things to build.

Scattered around the internet are coding challenges, often just posted on Twitter by big name developers - discovering these challenges gave me the idea to create a platform where front-end developers could go to get inspiration for things to build, as well as share their code creations with a community.

Challenges on Codier

I began developing Codier as a university project, and once I began to show people outside of that environment, it was clear to me that there was a genuine interest in this idea. Shortly after graduating I begun discussions with my employer, Clock, about how they could help me make Codier happen for real.

Clock agreed to help support my side project financially (hosting etc.) and through them, I managed to convince two incredible Software Engineers, Bala Clark and Jack Burgess to help rebuild Codier. They would handle all of the stuff behind the scenes, and I would do the design and front-end. The rebuild was necessary as what I had built at university was more of a prototype and not suitable for use.

Together, we narrowed down the idea to what Codier is today:

Challenges: User submitted coding challenges.
Creations: User submitted code creations.
Profiles: A page hosting all of a user's challenges and creations.

Challenges

Challenges on Codier can be anything that the challenger wants them to be; if it's a Pure CSS Checkbox challenge, the user that creates the challenge can specify that in the rules of the challenge. They can also add a template to get creators started - templates can be the basic HTML structure for a challenge or even just a framework like React.

'Make a superhero logo!' Challenge on Codier

Once a challenge has been posted, any signed up user is able to post a solution to it. The solutions to the challenge are listed directly under the challenge's title and description. Solutions are created through Codier's editor and can be as basic or complex as the user feels.

Creations

Creations on Codier can be built through a combination of HTML, CSS and JavaScript within the editor. Users can alternatively use preprocessors to write their creations, and even include external resources.

Solution to 'Material design card' challenge

The editor has been built to feel familiar to users; people that have used similar online editors like CodePen and JSFiddle should have no problems using the Codier editor. It is also customisable in many ways; users can set the editor to be dark themed, move and hide panes, change editor font family and size and much more.

Users of VS Code will be pleased to know that Codier uses Monaco Editor to handle code input. Monaco has some incredible features that make our editor feel more like a native IDE such as code suggestions, autocompletion and search and replace.

Creations can be upvoted and commented on, both features help us decide which to feature as popular; if a creation is a solution to a challenge, upvotes will decide its ranking. Users can also, name, describe and tag their creations to help boost their rankings in search results.

Profiles

Signed up users have a unique profile page to host their content on; Profiles display all of a user's challenges and creations. If user's wish to, they can also add a bio, location and website to their profile.

Final words

Codier is a lot more than just a platform for people to find challenges. We believe it is a great place for learning, and also as a source of inspiration.

I would urge you all to give challenges on Codier a go, you might surprise yourself with how fun it can be! Alternatively, if you're an old hat and don't need any practice, give Codier's editor a shot the next time you need to quickly demo some code.

I would love to hear your comments on Codier, and if you have any suggestions for new features or improvements to the current ones, please let me know!

DEV Community: Kenan Yusuf