Coding Education Part 2 — Interview with Sid, a Guy Behind React.Games

Sid is a funny guy, you know

Coding Education Part 2 —

Interview with Sid, the Funny Guy Behind React.Games

I talked to Sid, an indie web developer, who quitted his day time job and decided to build educational coding games. In this interview, Sid shares his discovery of design and JavaScript and how it defined his future in web development; talks about his master project on React Hooks, his newsletter, and his upcoming plans.

This post has become possible thanks to Soshace.com: hire a developer or find a remote job. Part 1 (with Mike Driscoll and Chris Ching) can be viewed here: People at the Forefront of Coding Education Part 1

Hello Sid! Please, tell me about yourself, share your story.

Thanks to my Dad, we had a computer at home when I was really young. I spent a lot of time making animations in Powerpoint 😋. To make my animations more interesting, I had to learn how to make graphics. I was privileged to find free and open source tools that I could explore my creativity with. Shoutout to Gimp!

When it was time for college, I didn’t think I wanted to be a designer and chose to study Physics instead. Ended up hating it and kept designing posters for the college fest on the side.

Graphic design led to Interface design and I bumped into the world of web development, discovered PHP and Javascript and never looked back.

What do you do now?

That’s a very difficult question to answer 😅 I’m a bit of a scatterbrain, so at the point of time, I’m trying to do multiple things. As I write this, I am wrapping up an online Hooks course and prepping for the launch of honest.jobs

When it comes to languages, I use Javascript everywhere — browser, server, mobile, etc.

I work from my home office and a nearby cafe.

Why did you leave your previous workplace? How do you feel about working for startups and established companies?

I left my previous workplace because I wanted to work on my own projects and the timing felt perfect. Auth0 is a great place to work and I can’t recommend them enough.

When it comes to picking a place to work, it depends. In a startup, you can get more responsibility whereas, in a big company, the impact of your work might be bigger. It boils down to what you’re looking for at your stage. I wrote more about it on my blog.

Please, tell me the story behind your project, React Hooks course.

I wanted to create a course that tricks you to actually finish it because you have fun finishing it. That was the core idea behind react.games. It’s heavily inspired by the style of work by Joshua Comeau and Dave Geddes. There are great courses on React that are available, I wanted to do something completely different and have fun while doing it.

Hooks are a new API for using existing React features. On first glance, it’s just another way of using React if you don’t like writing classes. But, it’s really an easier way to maintain and move logic around your application.

What’s the course all about? Please, tell us the basic functionalities, features, etc. Be as descriptive as possible.

You have to help a pirate get to the treasure. To do this, you have to write code while you play the game.

To move a ship, you need to update the position of the ship in the ocean, that’s an example of maintaining data or state in a component. You need to listen to the keyboard events so that the pirate can walk when you press arrow keys.

The pirate teaches you how to use Hooks to manage state, apply side effects, create reusable custom hooks and all the things you need to navigate through the game.

https://react.games/stage-1.gif
https://react.games/stage-7.gif

I created a video preview that might help:

https://medium.com/media/de455ccfefad71dcf5f5760b60c6b07c/href

I’ve noticed that you’re also a public speaker. Can you tell us more about your experience and conferences you’ve already participated at?

Yep, I’ve given talks at a bunch of conferences. Conferences are a great way to meet internet friends in person and make some new ones. I usually only watch a few talks and spend the rest of the time in the hallway track hanging out with people.

My favorites ones are Design Systems London, ReactFest and ReactFoo. I talk about React and Design Systems.

I just came back from React Amsterdam, where I gave a talk about refactoring React.

body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}

function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}

Please, tell us about your newsletter. What subjects do you cover?

I have a weekly newsletter to share what I learn. I write about Javascript, React, and personal growth.

body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}

function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}

Here are some articles to get you started:

React — Just use children

Design systems for the rest of us

CSS Animation

Burnout

Do you have any other initiatives to promote coding education or make it fun? Please, share.

I have another course in my head, but it’s going to take a while until I get around to it. Creating courses is hard!

Folks in the React community publish a lot of articles and that’s amazing. It’s also hard to keep up. I started another newsletter where I send the 3 articles that I found most useful, once a week: tinyreact.email

I am a copywriter at Soshace.com: a hiring platform for web developers. If you have an interesting story to tell, please DM @ MaryVorontsov


Coding Education Part 2 — Interview with Sid, a Guy Behind React.Games was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: