DEV Community

Cover image for 53 Things I Learned Writing a Multiplayer Strategy Game in Javascript and Python

53 Things I Learned Writing a Multiplayer Strategy Game in Javascript and Python

Lina Rudashevski on August 20, 2019

I started working on Selfies 2020 in April 2019, wanting to recreate a 1999 game called sissyfight 2000 with a modern twist. It is a 'tongue-in-che...
Collapse
 
tlannigan profile image
tlannigan

Great read, however I do have one qualm with you saying to remove outline for focused input elements. The outline property's specification doesn't call for need to follow border-radius (however Safari does). Check this out for more about it:

outlinenone.com/

Collapse
 
aduranil profile image
Lina Rudashevski

thanks for the feedback! I just meant I didn't like it from a styling perspective, I don't like how it looks. But the accessibility factor in the link you shared trumps my styling preference, and I didn't know that about it so thank you! The accessibility part of my lighthouse report did not catch this either

Collapse
 
aut0poietic profile image
Jer

The outline property itself isn't the critical bit. A distinct, accessible focus state is. So you could fake them:

input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #bfe7f3;
}

Only down-side to this technique is you generally need to then pay attention to the focus appearance for anything else in the app that receives focus so they all match.

Hope that's helpful and not just a noise-comment for what is a very awesome article! :)

Thread Thread
 
aduranil profile image
Lina Rudashevski

thanks for the tip!

Collapse
 
pitops profile image
Petros Kyriakou • Edited

Hello there Lina, nice job - getting your feet wet by diving into the project is the only way i know of that you can actually grow. I would like to point out a few somewhat wrong statements

7) Styling components inline is more manageable than using CSS in my opinion

In truth it seems more manageable because its easy but its not composable. You are redefining the same styles that you could reuse anywhere. I suggest you checkout styled-components which are the number one way to style stuff in react. Inline styles have their place but mostly for writing/overwriting specific css attributes.

10) Positioning a div in the middle of a screen isn't straightforward.

Aside fron the fact that you present a h1 tag :) - Its actually quite straight forward. You already mentioned flexbox so why not do this?

// html

<div>
  <h1>Loading</h1>
</div>

// css
div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flexbox;
  align-items: center;
  justify-content: center;
}

14) There are many ways to add animations in React. CSS is the best IMO - performance and simplicity

This statement is half wrong. CSS animations are actually slower than Javascript animations. Yes they might feel more complex than CSS animations. But javascript animations (given a nice library) are more powerful and flexible.

This is a nice read if you want to get technical (css-tricks.com/myth-busting-css-an...). See a library like react-spring which again is a favorite among developers for animations in react.

Other than that, thats a lot of learning good job :)

Collapse
 
aduranil profile image
Lina Rudashevski

Thanks for the detailed feedback! On points 7 and 10, I heavily prefaced that this is just my opinion. Both statements are opinions that I don't present as fact. Tks about the div note, I updated my gist. The last comment, tks for the information. On 14, I looked at the link you sent across and it says that CSS vs Javascript performance is browser dependent and CSS is still faster in some cases, so I think that it is unfair to say that 'CSS animations are actually slower than Javascript' because that is not true either

Collapse
 
pitops profile image
Petros Kyriakou

Lets agree to disagree :)

Collapse
 
bootcode profile image
Robin Palotai

It is a battle between trying to finish and trying to learn.

I can relate to this. Getting stuck at The ends of this spectrum is not productive on the long term. You either fiddle without progress, or eventually get swamped by all the accumulated hacks.

Swinging between the two gives development a rythm.

Collapse
 
aduranil profile image
Lina Rudashevski

100% sometimes you just gotta finish

Collapse
 
sebbdk profile image
Sebastian Vargr

I tend to get bored reading too, so I skim, a lot.

That sometimes backfires tho, as I will miss crucial information, that will leave me googling impossible questions easily answered in docs...

I’ve gotten better at skimming tho, and nowadays I use source code just as much as docs.

I find source code much more paletteable to read.

Collapse
 
aduranil profile image
Lina Rudashevski

yeah i need to get better at this :( patience is a virtue

Collapse
 
noway profile image
Ilia

Awesome!

Does anyone know if error boundaries in react are sort of deprecated? The point about error boundaries and getDerivedStateFromError brought me to thinking that rendering an error state ui is something you are not supposed to do in react? What is a proper way then?

Collapse
 
aduranil profile image
Lina Rudashevski

hmm i dont see anything about it being deprecated, its still in the official docs without any deprecation warnings. do you have a source where you saw its deprecated? i would love to know more

Collapse
 
moopet profile image
Ben Sinclair

11) Set outline: none; when styling inputs and buttons or they will get an outline like the below when clicked/interacted with

But I want the outline, otherwise the page is going to be really difficult to use!

Collapse
 
rudolfolah profile image
Rudolf Olah

Awesome list!

It's interesting that you used React for game dev. It would be neat to see this type of game created with Godot or Phaser or pygame using the same Django backend.

Collapse
 
aduranil profile image
Lina Rudashevski

great suggestion!

Collapse
 
emlautarom1 profile image
Martín Emanuel

Thanks for sharing your experiences!

Collapse
 
aduranil profile image
Lina Rudashevski

of course!

Collapse
 
netanelravid profile image
Netanel Ravid

Such a great post.
Thanks Lina!!

Collapse
 
aduranil profile image
Lina Rudashevski

thank you for reading!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Awesome article, Django channels is one of the intresting topics that does not have tons of documentation or tutorials out there.

I'm really amazed that you were able to built something out of it.

Collapse
 
aduranil profile image
Lina Rudashevski

Thanks! Yeah there wasn't a lot of documentation which is why I included a link to a tutorial I found helpful. I might write a longer post out of this topic!

Collapse
 
adusoft profile image
Geofrey Aduda

am new in Python, but how you have explained it in your tutorial gives me the energy to press on. I would like to learn advanced python, Django since I am a beginner which articles do you suggest

Collapse
 
aduranil profile image
Lina Rudashevski

i suggest having an idea for a project and then figuring out what you need along the way. i didn’t know a lot of what i learned before i started and would just stack overflow my way into solutions. good luck!

Collapse
 
adusoft profile image
Geofrey Aduda

Thanks

Collapse
 
khaldon profile image
mohamed khaled

Do you know how to make auto-reload for Django app during development or change files in the local environment

Collapse
 
alexparra profile image
Alex Parra

Great stuff!
Now I want the spare time to do the same ;)

Collapse
 
aduranil profile image
Lina Rudashevski

it is quite a time investment

Collapse
 
chrisachard profile image
Chris Achard

That's quite the list of things to learn!

Collapse
 
aduranil profile image
Lina Rudashevski

haha yes, it was

Collapse
 
jimlynchcodes2 profile image
Jim Lynch

This is awesome. :)

Collapse
 
shenril profile image
Shenril

That looks like an amazing journey! Congrats to you!

Collapse
 
aduranil profile image
Lina Rudashevski

thank you!