Forem: Lina Rudashevski

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

Lina Rudashevski — Tue, 20 Aug 2019 23:57:47 +0000

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-cheek', social media game theory multiplayer game where players strategize to get followers. The followers a player gets depends on what the other players did that round. I am the sole contributor. 5 months later I wasn't done and I had a moment of reflection...why am I doing this? It was to learn more programming concepts (although it would be great if people played), particularly everything that goes into making an app production-ready from front to back. I also wanted to learn tech I didn't have much familiarity with, like Django and React Hooks. My ultimate goal was to make a production-quality app.

The project is not quite "production-quality", but I consider it mostly "done." If you want to support it, star it on github, play it, and offer your feedback!

I learned, by category:

Frontend: Design
Frontend: CSS + HTML
Frontend: Javascript
Frontend: React/Redux
Frontend: Tooling
Backend: Django
Backend: Python
Backend: Infrastructure
Tooling: Github
Overall: Metalearnings

Frontend: Design

1) Sketch is awesome. I’m not a designer but learned enough Sketch to improve my design. Importing google fonts, exporting svg/png/css, and using the iPhone components that come free with the 1000's of plugins greatly improved my design process. Plus you can prototype quickly:

2) Coolers is useful for generating color schemes

3) Learn CSS rather than a component framework. I started off trying to learn and decide on a component framework. Getting the library components to do what you want is time consuming. I was more productive/improved my skills by learning CSS fundamentals.

4) If you do use a component framework, Grommet is a nice one that looks modern.

5) On the homepage, tell users what your webpage does. Make navigation very clear. I neglected navigation before reading this book. My homepage said "Click to enter!" without other info. I fixed these issues which might be obvious to a designer but were not on my radar.

Frontend: CSS + HTML

6) Reset CSS to reduce browser inconsistencies. The link has CSS that standardizes how your site looks on different browsers.

7) Styling components inline is more manageable than using CSS in my opinion. It’s uglier, but having the styling in one file is easier. I sometimes move it to CSS later.

8) A component should not know about its position on a page. It is the container's job to position the component. For example, all of my buttons had margin-right: 5px on them which I removed because relative positioning is the container's job. This improves the reusability factor of the component.

9) How to use flexbox, and that it doesn't look the same in Safari (Safari requires special -webkit prefixes to display flexbox). flex-grow is especially useful.
with flex-grow: 1;

without:

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

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

12) How to style a scrollbar. It's different in Firefox, which only added some support with Firefox 64 in 2018. I didn't style my scrollbars to be compatible with Firefox. For Safari and Chrome here is my CSS:

::-webkit-scrollbar {
  width: 0.5em;
  background: none;
}

::-webkit-scrollbar-thumb {
  background: black;
  outline: 1px solid slategrey;
}

13) Objects, imgs, svgs. Initially, an svg I used on the landing page was 440KB and hard to resize dynamically relative to the pink div around it because it was basically a base64 embedded .png of an iPhone that I made into an svg (the wrong move). My bundle size was huge when just loading it directly and wrapping it in a React component. Some solutions I tried:

img I used an img with the src being the relative path to my svg. This made my bundle much smaller and let me resize, but I lost my Roboto font face. img tags default to system fonts.
object I then embedded the svg in an object. This solved both the aforementioned problems, but I wasn't able to click the image anymore. I had to solve that styling the link wrapping the object with display: inline-block. This didn't give me quite the styling I wanted.
png The moral is be sure to select the image format that is the best for that image type and use, which in this case was a png.

14) There are many ways to add animations in React. CSS is the best IMO. I say this based on two criteria: performance and simplicity. I looked at React Transition Group and some libraries. I spent a minute trying to learn transition group and was confused. Then I found this library. It has a bunch of awesome examples and you can copy the CSS for the animations you want into your CSS file so you don't have to import the entire library. I like to learn by example, so seeing all of these CSS animations gave me a sense of how they work.

15) A little bit of SCSS. I don't like adding packages, but this is a dev dependency that compiles to CSS. It has additive feature like letting you embed properties and lighten() or darken() by certain amounts. Here is an example of how I styled my button:

button {
  border-radius: 20px;
  cursor: pointer;
  border: 3px solid darken(#44ffd1, 5%);
  background-color: #44ffd1;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0.5, 0.5);
  font-size: 14px;
  padding: 5px;
  outline: none;
  &:hover {
    background-color: lighten(#44ffd1, 10%);
  }
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

Frontend: Javascript

16) How to write vanilla JS websockets and integrate them with redux.

Write your own WebSocket middleware for React/Redux in 4 Steps

Lina Rudashevski ・ Jul 27 '19

#redux #react #javascript

17) The next()function. I dove under the hood of javascript to learn more about iterators and generators when writing my websocket middleware.

18) Error handling with fetch. I wanted fetch to throw an error if the backend returned a 400+ response. To do that, you have to check the status of the response first. A 400+ error will have a message in the response body, but that is not available until the promise has resolved (res => res.json()). But if you throw an error before the promise has resolved, then you don't have access to the response body yet. To solve this, I added an async/await so I could pass the response body to my catch statement.

const status = async (res) => {
  if (!res.ok) {
    const response = await res.json();
    throw new Error(response);
  }
  return res;
};

export const getCurrentUser = () => dispatch => fetch(`${API_ROOT}/app/user/`, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Token ${Cookies.get('token')}`,
  },
})
  .then(status)
  .then(res => res.json())
  .then((json) => {
    dispatch({ type: 'SET_CURRENT_USER', data: json });
  })
  .catch(e => dispatch({ type: 'SET_ERROR', data: e.message }));

Frontend: React/Redux

19) You can’t use redux devtools with websockets without more advanced configurations.

20) How to use useRef with React Hooks. I needed to use this to scroll to the bottom of a div. This project was the first time I ever used React Hooks:

21) How to use PropTypes. I normally use Flow.js but tried PropTypes. PropTypes library has the benefit of telling you about type issues both in the code editor and the console.

// example propTypes for my game object
Game.propTypes = {
  id: PropTypes.string,
  dispatch: PropTypes.func.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
  game: PropTypes.shape({
    id: PropTypes.number.isRequired,
    game_status: PropTypes.string.isRequired,
    is_joinable: PropTypes.bool.isRequired,
    room_name: PropTypes.string.isRequired,
    round_started: PropTypes.bool.isRequired,
    users: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number.isRequired,
        followers: PropTypes.number.isRequired,
        selfies: PropTypes.number.isRequired,
        username: PropTypes.string.isRequired,
        started: PropTypes.bool.isRequired,
      }),
    ),
  }),
  time: PropTypes.string,
};

Game.defaultProps = {
  id: PropTypes.string,
  game: PropTypes.null,
  time: PropTypes.null,
  currentPlayer: PropTypes.null,
};

22) How to share logic between components with React Hooks. I use a hook that determines the color of buttons in different components.

React Custom Hooks - Sharing Logic Between Components

Lina Rudashevski ・ Aug 20 '19

#react #javascript

23) You need to return an empty array when using useEffect or your component may keep re-rendering. If you used any props though, you’ll get an error react-hooks/exhaustive-deps. To fix this, pass the prop you used to the array.

24) How to set environment variables. create-react-app makes it simple and I never appreciated how much create-react-app does for you. Just define an env.production and env.development file, and start your variables with REACT_APP_

# my env.development file
REACT_APP_WS_HOST=localhost:8000
REACT_APP_HOST=http://localhost:8000
REACT_APP_PREFIX=ws

# my env.production file
REACT_APP_WS_HOST=selfies-2020.herokuapp.com
REACT_APP_HOST=https://selfies-2020.herokuapp.com
REACT_APP_PREFIX=wss

// using the environment variable
const HOST = process.env.REACT_APP_WS_HOST;
const PREFIX = process.env.REACT_APP_PREFIX;

const host = `${PREFIX}://${HOST}/ws/game/${id}?token=${Cookies.get('token')}`;

25) How to create an Error Boundary. My code is a copy/paste of the example minus logging errors, which I might do if my app gets users.

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      hasError: error,
    });
    // You can also log error messages to an error reporting service here
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <React.Fragment>
          <h1
            className="animated infinite bounce"
            style={{
              textAlign: 'center',
              margin: 'auto',
              position: 'absolute',
              height: '100px',
              width: '100px',
              top: '0px',
              bottom: '0px',
              left: '0px',
              right: '0px',
            }}
          >
            Something went wrong
          </h1>
        </React.Fragment>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Frontend: Tooling

26) How to analyze bundle size. The instructions are here.

[13:45:24] (other-stuff) selfies-frontend
🙋 yarn run analyze
yarn run v1.9.4
$ source-map-explorer 'build/static/js/*.js'
build/static/js/2.e1a940a4.chunk.js
  Unable to map 130/173168 bytes (0.08%)
build/static/js/main.17442792.chunk.js
  Unable to map 159/29603 bytes (0.54%)
build/static/js/runtime~main.a8a9905a.js
  2. Unable to map 62/1501 bytes (4.13%)
✨  Done in 0.52s.

Sample output from one of my builds:

27) Configure eslint enough to keep my code organized.

28) Safari does not support localStorage in private mode. I switched to storing the token with cookies. I wanted to support major browsers, which very much includes Safari for mobile.

29) The WS tab in the browser. I never noticed it or had any use for it before.

Backend: Django

30) It's hard to change a model from a One-to-One relationship to a foreign key relationship in Django. I had to do four migrations and delete all of the records from my database to make it work.

31) Django get method returns an error if what you're getting isn't actually there. A get_or_none class is useful to either get the object if it's there or return nothing if not:

class GetOrNoneManager(models.Manager):
    """Adds get_or_none method to objects"""

    def get_or_none(self, **kwargs):
        try:
            return self.get(**kwargs)
        except self.model.DoesNotExist:
            return None

32) Overriding objects in Django. If I want to use the class defined above, I will need to override the objects Manager in Django. A Manager is how you perform database queries in Django (i.e. Model.objects.get, Model.objects.save, etc) and one named objects is added to every Django class by default.

class GamePlayer(models.Model):
    #...
    objects = GetOrNoneManager()

33) What on_delete does on Django models. It's a SQL standard and I set it to MODELS.CASCADE so that if one item is deleted, the references to that item are also deleted.

For example, I have this definition in my models:

class Message(models.Model):
    game = models.ForeignKey(Game, related_name="messages", on_delete=models.CASCADE)

If I delete an instance of Game, all models that have a foreign key to that instance of Game will also be deleted:

[14:10:42] (other-stuff) selfies-frontend
🙋 docker exec -it e079c83c8e1c bash
root@e079c83c8e1c:/selfies# python manage.py shell
Python 3.7.4 (default, Jul 13 2019, 14:20:24) 
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from app.models import Game
>>> Game.objects.get(id=17).delete()
(5, {'app.Move': 1, 'app.Message': 1, 'app.GamePlayer': 1, 'app.Round': 1, 'app.Game': 1})
>>>

34) Django has a User model with built-in authentication, but you can't save stuff on it. This wasn't a problem for me until I wanted a Leaderboard. I solved this by creating a new model called Winner with a One-to-One relationship to the User model.

35) Custom error handling with Django REST framework.
I thought the way the error messages were constructed with Django Rest Framework was hard for the frontend to handle, and decided to override them.

Creating Custom Exceptions using Django Rest Framework

Lina Rudashevski ・ Aug 19 '19

#django

36) Using Django Channels with token authentication is not ideal, and I had to write custom middleware. I've attached the token to the request because you can't headers with websockets.

37) How to use Django Channels. Working through the tutorial in the documentation and following this tutorial gave me what I needed to start my project. This is a big topic I may write a separate post about.

Backend: Python/Pytest

38) Set up pytest in a project. It’s fairly simple and one of the few setups where there isn’t some gotcha or bug that I need to fix.

; pytest.ini, create this file in your root folder

[pytest]
DJANGO_SETTINGS_MODULE = selfies.settings
addopts = -s --ignore integrations --ignore tests --ignore integration_tests
python_files = tests.py test_*.py *_tests.py

39) Testing with pytest-factoryboy and pytest.

Writing Tests with pytest and pytest-factoryboy

Lina Rudashevski ・ Aug 20 '19

#testing #python

40) Threading. I needed to send the updated time on the timer to the frontend while not blocking other data I had to send too, like messages. To achieve this, I put the timer in another thread that updated the timer and sent the right time to the frontend.

Here is the code for that within my websocket class:

    def start_round(self, data=None):
        """Checks if the user has opted in to starting the game"""

        game_player = GamePlayer.objects.get(user=self.scope["user"], game=self.game)
        game_player.started = True
        game_player.save()
        self.send_update_game_players()
        if self.game.can_start_game():
            # start the timer in another thread
            Round.objects.create(game=self.game, started=True)
            # pass round so we can set it to false after the time is done
            self.start_round_and_timer()

    def start_round_and_timer(self):
        """start timer in a new thread, continue to send game actions"""

        threading.Thread(target=self.update_timer_data).start()
        self.send_update_game_players()

    def update_timer_data(self):
        """countdown the timer for the game"""

        i = 90
        while i > 0:
            time.sleep(1)
            self.send_time(str(i))
            i -= 1
            try:
                round = Round.objects.get_or_none(game=self.game, started=True)
            except Exception:
                round = Round.objects.filter(game=self.game, started=True).latest(
                    "created_at"
                )
            if round.everyone_moved():
                i = 0
                j = 10
                while j > 0:
                    time.sleep(1)
                    self.send_time(str(j))
                    j -= 1

        # reset timer back to null
        self.send_time(None)
        self.new_round_or_determine_winner()

Backend: Infrastructure

41) How to lint python with black. You type black and then the folder you want to lint and get:

[15:27:16] (master) selfies
🙋 black app
reformatted /Users/lina.rudashevski/code/selfies/app/services/message_service.py
All done! ✨ 🍰 ✨
1 file reformatted, 54 files left unchanged.

42) What a webserver is. You don't want to use python manage.py runserver to start your server in production.

43) How to get Docker to work with Django Channels. For a while, no matter what I did, my server would not hot reload. I finally realized that my Dockerfile was in the wrong order after looking at this helpful example.

44) How to deploy Django Channels with Heroku. I did not deploy my docker container, but used a Procfile to start up my server.

45) How to find environment variables in Heroku, and what to do if they're not there.

Creating the app from the site didn't generate the environment variables I needed:

After creating the add-ons, I looked for my database url using heroku config but nothing appeared. What fixed it was deleting my add-ons from the browser, and then recreating them from the the command line

Tooling: Github

46) How to .gitignore files I've already committed. This isn't something I needed to do before, and because of that, it's a basic command that I overlooked.

Overall: Metalearnings

47) To finish anything, just commit to starting. I didn’t want to work on the project a lot, especially when I was stuck. It’s important to say “I’ll make progress on one thing” today, and not worry about hitting a certain goal or spending X amount of time. By just starting most days, I’d sometimes work all day, or sometimes I’d do nothing.

48) It's hard to know what "done" means. Should I add a leaderboard? Does my game need to work on mobile? Do the rules of the game make for a "fun" experience? Ultimately I said no to all of these questions so I added the leaderboard, redid the CSS to look right on mobile, and completely rewrote the rules of the game. Now I think it's done but I have a lot more I want to add like:

better images/dynamic images server from the server
sound effects
a Jenkinsfile and scripts that build and deploy the app, and run management commands to perform certain routine actions like deleting old games
let users customize their iPhone
significantly expanded user menu with a profile they can fill out, and where they can see their old games and messages
users can message other players directly

49) Don't name commits "ok" out of laziness. This bad habit made it hard to find info for this post when looking through my commit history.

50) I don't learn well by watching tutorials or reading because I get bored and want the relevant information. I don't learn well with verbal explanations, especially with code, because people are often coming from a place of either knowing their subject matter too well or not knowing it at all. As a newbie you often can't tell the difference either. I learn best looking at code examples and sample projects.

51) Sometimes you cannot fix a bug for weeks. If that happens, work around it and revisit later when you have the mental energy. My game used docker with django channels for websockets. I had an issue where my docker server wouldn't hot reload. I had this issue for a long time and finally gave up by running everything locally. This let me make progress, and eventually I fixed the issue by copying the docker settings in one of the django channels sample projects.

52) It is a battle between trying to finish and trying to learn. I grew impatient wanting to finish my game. Still, I remembered my personal mission statement and that it didn't impact anyone but me if I finished or not. It's not like it's a useful package other people can use. I didn't have to refactor with React Hooks, configure linters, use propTypes, etc., but my goal was to try to make a production quality app and learn a lot of new concepts. Stick to your personal mission statement when doing a big project!

53) Backtracking is necessary sometimes. I defined a one-to-one relationship between my User and GamePlayer models early on. This ended up being the wrong design because there was no reason players couldn't be in multiple games and I had to make sure they were exited from a game, or they couldn't join another game. This wasn't really feasible. I had to

redo the schema,
delete everything from my production db
find out that changing a one-to-one relationship to a foreign key in django is really troublesome I almost didn't do it, opting to think of every possible way to make sure users were in one game at a time (lots of event listeners). I am glad I did because my app is less buggy and it was probably less work than trying to work around my bad design.

I also completely redid the rules of my game. I made them match the rules of the original game. This was a huge rewrite that ultimately made for a much better experience.

Writing Tests with pytest and pytest-factoryboy

Lina Rudashevski — Tue, 20 Aug 2019 22:21:30 +0000

Testing in python can be tricky so I've outlined what works for me. I like to use pytest with pytest-factoryboy to generate testing data. pytest-factoryboy is an easier way to test than having to maintain fixtures in a test database.

Define the factories. They look very similar to models.

# tests/factories.py 

import factory
from faker import Factory as FakerFactory

from django.contrib.auth.models import User
from django.utils.timezone import now

from app.models import Game, Message, GamePlayer, Round, Move

faker = FakerFactory.create()


class UserFactory(factory.django.DjangoModelFactory):
    class Meta:
        model = User

    email = factory.Faker("safe_email")
    username = factory.LazyAttribute(lambda x: faker.name())

    @classmethod
    def _prepare(cls, create, **kwargs):
        password = kwargs.pop("password", None)
        user = super(UserFactory, cls)._prepare(create, **kwargs)
        if password:
            user.set_password(password)
            if create:
                user.save()
        return user


class GameFactory(factory.django.DjangoModelFactory):
    room_name = factory.LazyAttribute(lambda x: faker.name())
    game_status = "active"
    created_at = factory.LazyAttribute(lambda x: now())
    updated_at = factory.LazyAttribute(lambda x: now())
    round_started = False
    is_joinable = True

    class Meta:
        model = Game


class GamePlayerFactory(factory.django.DjangoModelFactory):
    followers = 0
    selfies = 3
    user = factory.SubFactory(UserFactory)
    started = False
    game = factory.SubFactory(GameFactory)

    class Meta:
        model = GamePlayer


class MessageFactory(factory.django.DjangoModelFactory):
    game = factory.SubFactory(GameFactory)
    username = None
    message = factory.LazyAttribute(lambda x: faker.sentence())
    created_at = factory.LazyAttribute(lambda x: now())
    message_type = None

    class Meta:
        model = Message

# etc

In a `conftest.py` file I register the factories.

Fixtures defined in conftest.py file will be recognized in any test file. "Registering" the factories lets you inject them into your tests with a lowercase-underscore class name. In this same file, I'm defining fixtures with @pytest.fixture() which I'll use in my tests, and injecting them with the factories I just registered.

# tests/conftest.py 
import pytest
from pytest_factoryboy import register

from .factories import (
    UserFactory,
    GameFactory,
    GamePlayerFactory,
    MoveFactory,
    RoundFactory,
)

register(UserFactory)
register(GameFactory)
register(GamePlayerFactory)
register(MoveFactory)
register(RoundFactory)


@pytest.fixture()
def game(game_factory):
    return game_factory()


@pytest.fixture()
def rnd(game, round_factory):
    return round_factory(game=game, started=True)


@pytest.fixture()
def p_1(game, user_factory, game_player_factory):
    return game_player_factory(game=game, user=user_factory(), started=True)

#etc...more player fixtures defined

Write tests

Here I'm writing tests. I'm passing in my fixture data into my test method, and also passing in a factory called move because that's what I'm mainly testing here. In order to test player moves, I first needed to have created the players, the game, and the round, which is what I did in my conftest.py file. I only need to do this once, and I don't need to import the fixtures because anything declared in conftest.py is visible to the test files.

# tests/test_round_service.py

import pytest

from app.services.round_service import (
    RoundTabulation,
    LEAVE_COMMENT,
    CALL_IPHONE,
    DISLIKE,
    GO_LIVE,
    POST_SELFIE,
    DONT_POST,
    NO_MOVE,
    DISLIKE_DM,
    POST_SELFIE_PTS,
    POST_SELFIE_DM,
    GO_LIVE_DM,
    NO_MOVE_DM,
)
from app.services import round_service, message_service
from app.models import Move, Message, GamePlayer


@pytest.mark.django_db
def test_iphone_go_live_do_selfie(rnd, p_1, p_2, p_3, move_factory):
    """if a girl calls a girl who is trying to take a selfie, she sustains go
    live damage"""
    move_factory(round=rnd, action_type=GO_LIVE, player=p_1, victim=None)
    move_factory(round=rnd, action_type=CALL_IPHONE, player=p_2, victim=p_3)
    move_factory(round=rnd, action_type=POST_SELFIE, player=p_3, victim=None)
    tab = RoundTabulation(rnd).tabulate()
    assert tab[p_1.id] == 0
    assert tab[p_2.id] == GO_LIVE_DM
    assert tab[p_3.id] == GO_LIVE_DM


@pytest.mark.django_db
def test_go_live_with_call(rnd, p_1, p_2, p_3, p_4, p_5, move_factory):
    """message was created, points are corrected, player is removed from player
    points array, they have one less story"""
    move_factory(round=rnd, action_type=GO_LIVE, player=p_1, victim=None)
    move = move_factory(round=rnd, action_type=CALL_IPHONE, player=p_2, victim=p_1)
    move_factory(round=rnd, action_type=DISLIKE, player=p_3, victim=p_1)
    move_factory(round=rnd, action_type=DISLIKE, player=p_4, victim=p_1)
    move_factory(round=rnd, action_type=LEAVE_COMMENT, player=p_5, victim=p_1)
    tab = RoundTabulation(rnd).tabulate()
    assert message(rnd.game, p_2.user.username) in message_service.iphone_msg(
        move, p_1.user.username
    )
    p_1 = GamePlayer.objects.get(id=p_1.id)
    assert p_1.go_live == 1
    assert tab[p_1.id] == -50

Execute the tests

Now your tests can run with test data!

[17:59:32] (master) selfies
🙋 docker exec -it 5c93db3f3183 bash
root@5c93db3f3183:/selfies# pytest app/tests/test_round_service.py
======================================= test session starts ========================================
platform linux -- Python 3.7.4, pytest-5.0.1, py-1.8.0, pluggy-0.12.0
Django settings: selfies.settings (from ini file)
rootdir: /selfies, inifile: pytest.ini
plugins: factoryboy-2.0.3, django-3.5.1
collected 15 items                                                                                 

app/tests/test_round_service.py ...............

React Custom Hooks - Sharing Logic Between Components

Lina Rudashevski — Tue, 20 Aug 2019 16:31:33 +0000

Below is an example of a React hook that is responsible for making a button turn purple in two different components. I use this is in my project which you can play here.

import { useState } from 'react';

 // hook code 
 function useMoveUpdate() {
  const [currentMove, setCurrentMove] = useState('');

   const newMove = (event) => {
    event.preventDefault();
    let move = event.currentTarget.value;
    let theVictim = null;
    if (event.currentTarget.value.includes('leave_comment')) {
      move = 'leave_comment';
      theVictim = event.currentTarget.id;
    }
    setCurrentMove(event.currentTarget.value);
  };

  return [currentMove, newMove];
}

import React from 'react';
import useMoveUpdate from '../hooks/CurrentMove';

function GameMoves({
  game, dispatch
}) {
  // component that uses the hook
  const [currentMove, newMove] = useMoveUpdate();

  return (
    <div>
      {['post_selfie', 'dont_post', 'go_live'].map(item => (
        <button
          className={currentMove === item ? 'button-color' : null}
          type="button"
          style={{ padding: '10px' }}
          value={item}
          onClick={newMove}
          disabled={!game.round_started}
        >
          {item.replace(/_/g, ' ')}
        </button>
      ))}
    </div>
  );
}

import React from 'react';
import { Phone } from '../images/iPhone';
import useMoveUpdate from '../hooks/CurrentMove';

function GameBox({ game, dispatch}) {
  // component that uses the hook
  const [currentMove, newMove] = useMoveUpdate();

  return (
    <div>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        {game.users.map(player => (
          <div style={{ margin: '1%' }} key={player.username}>
            {player.username}
            {!game.round_started && (player.started ? '!' : ' ?')}
            <div>
              {player.followers}
              {player.followers === 1 ? 'follower' : 'followers'}
            </div>
            <div style={{ marginBottom: '3px' }}>
              {player.stories}
              {player.stories === 1 ? 'story' : 'stories'}
            </div>
            <button
              onClick={newMove}
              id={player.id}
              disabled={!game.round_started}
              value={`leave_comment_${player.id}`}
              className={currentMove === `leave_comment_${player.id}` ? 'button-color' : null}
              type="button"
            >
              <Phone />
            </button>
            {' '}
          </div>
        ))}
      </div>
    </div>
  );
}

How it works.

const [currentMove, setCurrentMove] = useState('');

currentMove holds the value of which button should be purple and setCurrentMove executes the action, defined in the hook.

The state of the initial hook is an empty string, which means all of the buttons are green because the className is what changes when the button is clicked. The className dictates the CSS.

The hook returns [currentMove, newMove], and that is what useMoveUpdate returns in the components. Clicking the button executes newMove, the action that updates the button that is clicked and changes its color.

Here is an example of it working in my project:

Creating Custom Exceptions using Django Rest Framework

Lina Rudashevski — Mon, 19 Aug 2019 21:13:15 +0000

Serialization errors returned by Django Rest Framework are not simple for the frontend to display, IMO. Here is how it return serialization errors for common user signup errors:

{'username': ['This field is required.'], 'password': ['This field must be at least 8 chars'], 'email': ['This field cannot be blank']}

I find this hard for the frontend to have to handle. It might have to do a lot of work to say which field the error message relates to. It's also cumbersome for the frontend to parse a bunch of arrays for errors.

To make the error messages friendlier:

First, override the default error messages in the __init__ method of your serializer. Here I am changing it so that it actually says what field (i.e. username instead of 'This field') the error is related to:

class UserSerializer(serializers.ModelSerializer):
    email = serializers.EmailField(required=True)
    username = serializers.CharField(required=True)
    password = serializers.CharField(min_length=8, required=True)

    class Meta:
        model = User
        fields = ("id", "username", "email", "password")

    def __init__(self, *args, **kwargs):
        super(UserSerializer, self).__init__(*args, **kwargs)
        self.fields["username"].error_messages["required"] = u"username is required"
        self.fields["username"].error_messages["blank"] = u"username cannot be blank"
        self.fields["email"].error_messages["required"] = u"email is required"
        self.fields["email"].error_messages["blank"] = u"email cannot be blank"
        self.fields["password"].error_messages[
            "min_length"
        ] = u"password must be at least 8 chars"

Then define the custom exception, which I did in a new file called exceptions.py. I am looking at the fields I might want to override an error and grabbing the first item in the array. If there are multiple exceptions per field, I'm not concerned because if the user fixes one, they'll graduate to the next exception.

from rest_framework.exceptions import ValidationError
from rest_framework.views import exception_handler


def base_exception_handler(exc, context):
    response = exception_handler(exc, context)

    # check that a ValidationError exception is raised
    if isinstance(exc, ValidationError):
        # here prepare the 'custom_error_response' and
        # set the custom response data on response object
        if response.data.get("username", None):
            response.data = response.data["username"][0]
        elif response.data.get("email", None):
            response.data = response.data["email"][0]
        elif response.data.get("password", None):
            response.data = response.data["password"][0]

    return response

Finally, make sure to specify in your settings.py to use your new exception handler:

REST_FRAMEWORK = {
    "DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",),
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "rest_framework.authentication.TokenAuthentication",
        "rest_framework.authentication.SessionAuthentication",
        "rest_framework.authentication.BasicAuthentication",
    ),
    "EXCEPTION_HANDLER": ("app.exceptions.base_exception_handler"),
}

Here is the friendlier error message!

5 chrome extensions for active development

Lina Rudashevski — Mon, 29 Jul 2019 23:43:29 +0000

1. lighthouse - get a full audit of your site

Lighthouse does a full audit of your site along 5 dimensions: performance, accessibility, best practices, SEO, and whether you have a Progressive Web App. Each category is broken down into several metrics and includes opportunities for improvement and diagnostics.

Clicking Generate Report:

Generates this (note that localhost will have slower performance metrics):

2. stylebot - change the appearance of websites (+get rid of the annoying red highlighting on github prs)

Mostly this is useful to me to override the red highlighting that shows up in github pr's whenever you use an apostrophe, but which github can sometimes think is a syntax error. To override the syntax,

Go to the styles section of the extension:

create a new style with the following css:

3. jsonformatter - make json readable

This makes it much easier to read json and also lets you collapse trees within the json. You can also switch back to the 'raw' json if you want to

without syntax highlighting:

with syntax highlighting:

4. React Developer Tools - examine your react components, plus see what version of react different sites run

If you use React, this one is good to have. I don't use this one all that much but it can be useful. The "Profiler" tab helps you improve the performance of your app. As shown in the below screenshot, it breaks down all of your components and then highlights them, showing you all of the props on the righthand side:

You can also see what version of React different sites are running, or if they're using React at all, and open up the React tab by clicking inspect. Here is Facebook, for example:

5. Redux DevTools - See what's in the store, and examine state changes

This is the tool I use the most. It's an absolute must have if you use Redux. This lets you see whats in your store and also see the store update as different actions dispatch:

Write your own WebSocket middleware for React/Redux in 4 Steps

Lina Rudashevski — Sat, 27 Jul 2019 00:23:03 +0000

If you want to use websockets with redux and don't like dependencies, it's not too hard to write your own middleware as long as you understand some basic principles and how the pieces fit together. In this post I'll explain how to write your own websocket middleware and go through the entire websocket "flow" on the frontend. The code for this project can be found here

Step 1: Define an action that will be used to establish a websocket connection

I have defined a const that returns an object, or "action" of type WS_CONNECT.

export const wsConnect = host => ({ type: 'WS_CONNECT', host });

Some people choose to create an actions.js where they keep all of their actions. I prefer to keep all of my redux actions, reducers, and functions in the same file, grouped by category. Currently my project has 3 modules called websocket, game, and account.

My websocket module looks like this, and it has my WS_CONNECT action:



// modules/websocket.js 

export const wsConnect = host => ({ type: 'WS_CONNECT', host });
export const wsConnecting = host => ({ type: 'WS_CONNECTING', host });
export const wsConnected = host => ({ type: 'WS_CONNECTED', host });
export const wsDisconnect = host => ({ type: 'WS_DISCONNECT', host });
export const wsDisconnected = host => ({ type: 'WS_DISCONNECTED', host });

*Normally I would have a reducer here with something like case WS_CONNECT:, but I don't really need it for websockets because I don't need to save the data in my redux store. I'll show a case in the bonus section with an example of where it is helpful to have.

Step 2: Dispatch your action to open a new websocket connection

My project is similar to a chat application where people join rooms. Once they join the room, I want to establish a websocket connection to the room. This is one approach, with another approach being wrapping your entire project in a websocket connection, which I have an example of at the BONUS section of this post.

In the below example I establish a new websocket connection on componentDidMount when the user enters the room. I am using token authentication which is OK but I suggest using session authentication with websockets because you can't pass a token in a header. I'm dispatching the wsConnect function I defined above, but it's not going to do anything because I haven't written my middleware yet.



// pages/Game.js
import React from 'react';
import { connect } from 'react-redux';
import { wsConnect, wsDisconnect } from '../modules/websocket';
import { startRound, leaveGame, makeMove } from '../modules/game';
import WithAuth from '../hocs/AuthenticationWrapper';

class Game extends React.Component {
  componentDidMount() {
    const { id } = this.props;
    if (id) {
      this.connectAndJoin();
    }
  }

  connectAndJoin = () => {
    const { id, dispatch } = this.props;
    const host = `ws://127.0.0.1:8000/ws/game/${id}?token=${localStorage.getItem('token')}`;
    dispatch(wsConnect(host));
  };


  render() {
    // abridged for brevity
    return `${<span> LOADING </span>}`;
  }

}

const s2p = (state, ownProps) => ({
  id: ownProps.match && ownProps.match.params.id,
});
export default WithAuth(connect(s2p)(Game));

Step 3: Write the websocket middleware

Ok, so if you've done something similar to the above then you've written and dispatched an action, just like you would with normal redux. The only difference is you don't need to dispatch the action in the reducer (or at least i don't need to for this example). However, nothing is happening yet. You need to write the websocket middleware first. It's important to understand that every action you dispatch will apply to every piece of middleware you have.

Here is my middleware file, while I'll break down in detail:



//middleware/middleware.js 

import * as actions from '../modules/websocket';
import { updateGame, } from '../modules/game';

const socketMiddleware = () => {
  let socket = null;

  const onOpen = store => (event) => {
    console.log('websocket open', event.target.url);
    store.dispatch(actions.wsConnected(event.target.url));
  };

  const onClose = store => () => {
    store.dispatch(actions.wsDisconnected());
  };

  const onMessage = store => (event) => {
    const payload = JSON.parse(event.data);
    console.log('receiving server message');

    switch (payload.type) {
      case 'update_game_players':
        store.dispatch(updateGame(payload.game, payload.current_player));
        break;
      default:
        break;
    }
  };

  // the middleware part of this function
  return store => next => action => {
    switch (action.type) {
      case 'WS_CONNECT':
        if (socket !== null) {
          socket.close();
        }

        // connect to the remote host
        socket = new WebSocket(action.host);

        // websocket handlers
        socket.onmessage = onMessage(store);
        socket.onclose = onClose(store);
        socket.onopen = onOpen(store);

        break;
      case 'WS_DISCONNECT':
        if (socket !== null) {
          socket.close();
        }
        socket = null;
        console.log('websocket closed');
        break;
      case 'NEW_MESSAGE':
        console.log('sending a message', action.msg);
        socket.send(JSON.stringify({ command: 'NEW_MESSAGE', message: action.msg }));
        break;
      default:
        console.log('the next action:', action);
        return next(action);
    }
  };
};

export default socketMiddleware();

Dispatch WS_CONNECT and make a new WebSocket(). Looking at the above, when I am dispatching the WS_CONNECT action, you can see that I have an action.type also called WS_CONNECT that establishes the websocket connection. The WebSocket object comes installed with javascript. I establish a new connection with the host url that I passed in my action.

Javascript WebSocket API. The javascript websocket API comes with three useful properties: onmessage, onclose, and onopen. In the above, I've created handlers to deal with all three of these, called onMessage, onClose, and onOpen, respectively. The most important one is onmessage which is an event handler for when a message is received from the server. The websocket API also has close and send functions which I use in my middleware.

Working with the server. I won't go into the server side on this post, but the server sends the frontend plain objects with data, just how the frontend sends the server plain objects with data. in onMessage, which receives the server actions, I have defined an action on the server side called update_game_players which gives me information from the server, and then I dispatch a function called updateGame with an action of type SET_GAME to save that information to my redux store.



// modules/game.js 
export const updateGame = (json, player) => ({ type: 'SET_GAME', data: json, player });


const gameInitialState = { time: null };

export const gameReducer = (state = { ...gameInitialState }, action) => {
  switch (action.type) {
    case 'SET_GAME':
      return { ...state, game: action.data, current_player: action.player };
    default:
      return state;
  }

You may be wondering what default: return next(action) does. As mentioned before, all actions are dispatch to all pieces of middleware. That means if I have an action type that isn't relevant to my socket middleware, but is relevant to my normal redux middleware, I still need a way to handle it in the socket middleware. The default part of the function just passes the action along. The below example can help illustrate:

When I type something in the chat, the frontend is sending an action called NEW_MESSAGE to the server with the data. The websocket server receives it and then sends a payload back to the frontend with a type of update_game_players, which essentially includes every relevant thing to the current game, including any new messages. When the frontend receives the action from the server, it dispatches an action called updateGame which has a type of SET_GAME. That action dispatches, but the socket middleware doesn't have any handler for SET_GAME so it goes to the default case, while simultaneously going to the SET_GAME case in my default redux middleware.

Step 4: Create the store with your new middleware

This part is relatively straightforward. As shown in the below example, you are able to create an array with all of your middleware (I'm using my middleware I just created and the redux default) and then create the store using the compose and createStore functions that redux provides



import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import reduxThunk from 'redux-thunk';
import rootReducer from './modules/reducers';
import wsMiddleware from './middleware/middleware';
import App from './App';

const middleware = [reduxThunk, wsMiddleware];
const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  ),
);
const Root = ({ store }) => (
  <Router>
    <Provider store={store}>
      <Route path="/" component={App} />
    </Provider>
  </Router>
);

ReactDOM.render(<Root store={store} />, document.getElementById('root'));

BONUS: Wrap your entire project in a websocket connection

Here is an example of how to wrap you entire project in a websocket connection. This is another pattern that can also be used.



// index.js abridged example showing just the root

const store = // where you create your store 
const Root = ({ store }) => (
  <Router>
    <Provider store={store}>
      <WebSocketConnection
        host={`ws://127.0.0.1:8000/ws/game?token=${localStorage.getItem('token')}`}
      >
        <Route path="/" component={App} />
      </WebSocketConnection>
    </Provider>
  </Router>
);

ReactDOM.render(<Root store={store} />, document.getElementById('root'));

Here is my WebSocketConnection wrapper, which is very simple. It establishes the connection to the websocket



// hocs/WebsocketConnection.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { wsConnect } from '../modules/websocket';

class WebSocketConnection extends Component {
  componentDidMount() {
    const { dispatch, host } = this.props;
      dispatch(wsConnect(host))
    }
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}


export default connect()(WebSocketConnection);

My reducer is slightly different in this case. In step 2 above, I was doing all the server actions around joining a game at the same time as I established the websocket connection. In this example, I'm opening a general websocket connection first and joining the game as a separate action. This means that I need to make sure my websocket connection has been established before trying to do anything else, which is why I now want to see whether I'm connected or not.



// modules/websocket.js 

const websocketInitialState = { connected: false };

export const websocketReducer = (state = { ...websocketInitialState }, action) => {
  switch (action.type) {
    case 'WS_CONNECTED':
      return { ...state, connected: true };
    default:
      return state;
  }
};

I can now use the connected prop to determine whether to dispatch actions. In the Game.js file I now do this



// pages/Game.js 

  componentDidMount() {
    const { id, connected } = this.props;
    if (connected) {
      this.connectAndJoin();
    }
  }

  connectAndJoin = async () => {
    const { id, dispatch } = this.props;
    await dispatch(joinGame(id));
  };

10 docker-compose and docker commands that are useful for active development

Lina Rudashevski — Thu, 25 Jul 2019 02:05:13 +0000

Sure you might need other ones but I've found over time that these are the only ones I need or use on a regular basis, and I use Docker and docker-compose regularly for various projects.

1. terminal into the docker container

docker exec -it :container_id bash

You may need to terminal into a container to do things like run tests or apply migrations.

[13:54:41] (master) selfies
🙋 docker ps
CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
b5e87b73f6f6        selfies_web            "python manage.py ru…"   2 seconds ago       Up 1 second         0.0.0.0:8000->8000/tcp   selfies_web_1
d8e636ad4805        postgres:10.1-alpine   "docker-entrypoint.s…"   3 seconds ago       Up 2 seconds        0.0.0.0:5432->5432/tcp   selfies_db_1
aeb5cba5a482        redis:latest           "docker-entrypoint.s…"   3 seconds ago       Up 2 seconds        6379/tcp                 selfies_redis_1
[13:54:43] (master) selfies
🙋 docker exec -it b5e87b73f6f6 bash
root@b5e87b73f6f6:/selfies# python manage.py makemigrations
No changes detected
root@b5e87b73f6f6:/selfies#

2. run the docker container in debug mode

docker-compose run --service-ports web

If you want to debug your server, this command will let you do it. Otherwise you may get an error if you put a debugger in your code.

[13:56:59] (master) selfies
🙋 docker-compose run --service-ports web
Creating network "selfies_default" with the default driver
Creating selfies_redis_1 ... done
Creating selfies_db_1    ... done
Performing system checks...

System check identified no issues (0 silenced).
July 24, 2019 - 17:57:11
Django version 2.1.7, using settings 'selfies.settings'
Starting ASGI/Channels version 2.2.0 development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
Performing system checks...

System check identified no issues (0 silenced).
July 24, 2019 - 18:12:29
Django version 2.1.7, using settings 'selfies.settings'
Starting ASGI/Channels version 2.2.0 development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
HTTP OPTIONS /app/users/ 200 [0.01, 172.25.0.1:60046]
> /selfies/app/views/account_views.py(48)post()
-> try:
(Pdb)

3. build the docker container

docker-compose build

This runs everything in the Dockerfile. I usually run this the first time to build the project, and after that only if I add dependencies to my requirements.txt file or change anything within my Dockerfile.

[18:59:42] (master) selfies
// ♥ docker-compose build
db uses an image, skipping
redis uses an image, skipping
Building web
Step 1/7 : FROM python:3.6-stretch
 ---> 9167692c277e
Step 2/7 : ENV PYTHONUNBUFFERED 1
 ---> Using cache
 ---> 0533dfe1c141
Step 3/7 : ENV REDIS_HOST "redis"
 ---> Using cache
 ---> c01adb015773
Step 4/7 : RUN mkdir /selfies
 ---> Using cache
 ---> e60377d4e9ee
Step 5/7 : WORKDIR /selfies
 ---> Using cache
 ---> 9018fb3984b0
Step 6/7 : ADD . /selfies/
 ---> Using cache
 ---> 8c6d291d99a7
Step 7/7 : RUN pip install -r requirements.txt
 ---> Using cache
 ---> 7caa2f3bf2ac
Successfully built 7caa2f3bf2ac
Successfully tagged selfies_web:latest

4. start the docker container

docker-compose up

This will run your container/s in the terminal and will show the server output

[13:39:32] (master) selfies
🙋 docker-compose up
Creating network "selfies_default" with the default driver
Creating selfies_redis_1 ... done
Creating selfies_db_1    ... done
Creating selfies_web_1   ... done
Attaching to selfies_db_1, selfies_redis_1, selfies_web_1
db_1     | 2019-07-24 17:40:36.069 UTC [1] LOG:  listening on IPv4 address "0.0.0.0", port 5432
db_1     | 2019-07-24 17:40:36.069 UTC [1] LOG:  listening on IPv6 address "::", port 5432
redis_1  | 1:C 24 Jul 2019 17:40:36.085 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis_1  | 1:C 24 Jul 2019 17:40:36.085 # Redis version=5.0.5, bits=64, commit=00000000, modified=0, pid=1, just started
redis_1  | 1:C 24 Jul 2019 17:40:36.085 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
redis_1  | 1:M 24 Jul 2019 17:40:36.086 * Running mode=standalone, port=6379.
redis_1  | 1:M 24 Jul 2019 17:40:36.086 # WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128.
redis_1  | 1:M 24 Jul 2019 17:40:36.086 # Server initialized
redis_1  | 1:M 24 Jul 2019 17:40:36.086 # WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This will create latency and memory usage issues with Redis. To fix this issue run the command 'echo never > /sys/kernel/mm/transparent_hugepage/enabled' as root, and add it to your /etc/rc.local in order to retain the setting after a reboot. Redis must be restarted after THP is disabled.
redis_1  | 1:M 24 Jul 2019 17:40:36.086 * Ready to accept connections
db_1     | 2019-07-24 17:40:36.072 UTC [1] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
db_1     | 2019-07-24 17:40:36.086 UTC [18] LOG:  database system was shut down at 2019-07-24 17:39:28 UTC
db_1     | 2019-07-24 17:40:36.090 UTC [1] LOG:  database system is ready to accept connections
web_1    | Performing system checks...
web_1    | 
web_1    | System check identified no issues (0 silenced).
web_1    | July 24, 2019 - 17:40:38
web_1    | Django version 2.1.7, using settings 'selfies.settings'
web_1    | Starting ASGI/Channels version 2.2.0 development server at http://0.0.0.0:8000/
web_1    | Quit the server with CONTROL-C.

5. start the docker container in the background

docker-compose up -d

This will run the container but in the background so you can continue to type in the terminal. I usually run it this way if I don't really need to see what the server is returning.

[13:31:03] (master) selfies
🙋 docker-compose up -d
Creating network "selfies_default" with the default driver
Creating selfies_db_1    ... done
Creating selfies_redis_1 ... done
Creating selfies_web_1   ... done

6. see all of the docker containers currently running

List of active docker containers which is useful for the CONTAINER ID and to know what you have running.

docker ps

[13:31:10] (master) selfies
🙋 docker ps
CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
a2b93a900c36        selfies_web            "python manage.py ru…"   2 seconds ago       Up 1 second         0.0.0.0:8000->8000/tcp   selfies_web_1
2d39a1161aa2        postgres:10.1-alpine   "docker-entrypoint.s…"   4 seconds ago       Up 2 seconds        0.0.0.0:5432->5432/tcp   selfies_db_1
62a6f364860e        redis:latest           "docker-entrypoint.s…"   4 seconds ago       Up 2 seconds        6379/tcp                 selfies_redis_1

7. remove all docker containers in the repository

docker-compose down

I almost always follow this command with docker ps to make sure the containers were successfully removed, out of habit.

[13:37:20] (master) selfies
🙋 docker-compose down
Stopping selfies_web_1   ... done
Stopping selfies_db_1    ... done
Stopping selfies_redis_1 ... done
Removing selfies_web_1   ... done
Removing selfies_db_1    ... done
Removing selfies_redis_1 ... done
Removing network selfies_default

8. remove a specific docker container

docker kill :container_id

The container id is the leftmost column when doing docker ps. I sometimes do this if I need to remove a specific container that I'm not using.

[13:51:43] (master) selfies
🙋 docker ps
CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
274b1605ca94        selfies_web            "python manage.py ru…"   11 minutes ago      Up 1 second         0.0.0.0:8000->8000/tcp   selfies_web_1
a641f449edfc        postgres:10.1-alpine   "docker-entrypoint.s…"   11 minutes ago      Up 2 seconds        0.0.0.0:5432->5432/tcp   selfies_db_1
61b08693e242        redis:latest           "docker-entrypoint.s…"   11 minutes ago      Up 2 seconds        6379/tcp                 selfies_redis_1
[13:51:44] (master) selfies
🙋 docker kill 274b1605ca94
274b1605ca94

9. view all of the docker images

You can see all your builds by running this. For me these are either official "images" like redis or python or old builds of my projects. I only occasionally use this, it's not really a part of my daily development.

docker images

[18:28:17] (master) selfies
// ♥ docker images
REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
selfies_web                      latest              4869d063569e        7 days ago          1.32GB
python                           3.6-stretch         9167692c277e        11 days ago         936MB
redis                            latest              598a6f110d01        12 days ago         118MB
<none>                           <none>              9c4676224e86        2 months ago        1e+03MB
<none>                           <none>              6c925f68c3a9        2 months ago        929MB
<none>                           <none>              b44ef8ff52f4        2 months ago        929MB
<none>                           <none>              903b976cd478        2 months ago        1.47GB
<none>                           <none>              f7009c6f0868        2 months ago        1.49GB
<none>                           <none>              52750c0c3926        2 months ago        1.48GB
<none>                           <none>              1c509a380925        2 months ago        1.44GB

10. clean out any images, builds, etc., that might be hanging

docker system prune

I only occasionally use this, it's not really a part of my daily development.

[18:18:35] (master) selfies
// ♥ docker system prune
WARNING! This will remove:
        - all stopped containers
        - all networks not used by at least one container
        - all dangling images
        - all build cache
Are you sure you want to continue? [y/N] y
Deleted Containers:
1f570bbf6828dadfdaa97655165943fd0b93ce6c185df2531f61a82982ec24f2
40f79091bc943c86f5f3ab7bc9d484ac9b576effc686a8a0fdb0031a465b16b4
f3399b0cd4f8c30159b15e1a2027aadeeaf9006efa4b759e4e3586d4589a0004
e0d18cddd40241de3d3b03d695afe667819c884a12fd36465c4c6d584df5aaa6
b7757cef15b49ecfe58ac6a8de3f8fcae91c71d793b7942955ccaf7c266bff92
a8fc94cd1af14f27b0ae22c1728b33fc8cef4090aa7deef1c2549c33755ed114
4de12efd1f88b9ee3541049c9b6fb3df5b1ade3b5787f888f5cf05f2e02c3cec
21d97261412949c06a4fcfb9846a6dee22f92e6a928cd6fb715ee81924917d43
073ca414e8c79e593c82f46f565adbae92a159994699dbbd0fb9df8044b3b1bb
b62f36a4a182479d25c2251e8d90fb7d2b612f31a03e943e83882ab436981879
456510a02d7ad5137dcb907484b2c8d9e07f51946be1103d294e4e253bc0e664
effee0d0a9afa74825f8f820bd363ebe1b7b54948aed38d57e84342482c367fd
5d930ece03ed8a2c2cb9178b81c9b42ef4c7397ef90d29b040ed3b1220f8ba27
a6ccf4f68831a19ab7381354f5643f3afd94cfbe0d066ff9ce4b248b90139a63
1a65f709f9b9c7d9749a04e88d3c4d18539a495160e143337c25025b10f9b24c
e98fbb022cb920dd4550751fdb735c1f73ae1dd6a049b9855bd77db1a2cbb3d1
18cb48bcb6428d4a9d5ca2f4b9c0a2fbedb3ef98c1d1fe6788029d7abea8efe9
97d0ee4625df7d107bc543318b1b45701f17720c41c7bb9614183e2cca0e26c7
5fafd4e2df31a0b84657ce1a0450c9cc8d8caa56ede9b10cddbfa6b6f55f6b50
212dae9eab339a84817b590cceb345d66290fa7f0fd7e347bffda322eb60400e
14cdd7e40ca412e1b091ddf640513ecf3f5f8bfd51cbc826e59b4901b1a0e213
ceeeb46b3aa52660a7080949543654e6436b0c050c865ef6cbed83f43bba8cc3
6c96d28cffed031a8bdd836670401b74eb52fa8f03c1dca83b73b8d0ba8530ec
9c89d36c6ee1f8fbc9d0c542d14d6d5b924817abf47a656941062eed95e607f6
58d212388ac7f15468306e306977661169e8aacdeeaba2fea4fc9cf7ebbb9e46
71963edbfe38d4578ba1338a0d03ed94f81664b202f969acf72d38ceeded5fed
4838aa870e8962e6a1c8c0e679dad8d25f5ad08824bfd45df150d148ae7097ba
abab59a1cd1fcf0a14e1d8f45d03f1787b218233a118af59f604ad890cc64dc1
5375b62e20d2660f8347f5f7355122f9fb528a1b603b1e58ceb7d7b811740410
29d7238e6d81f522f8c98b4d2e478bb304aec7a00892b8339bf1b4a0483e7040

Deleted Networks:
selfiesh_default

Forem: Lina Rudashevski

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

Frontend: Design

Frontend: CSS + HTML

Frontend: Javascript

Write your own WebSocket middleware for React/Redux in 4 Steps

Lina Rudashevski ・ Jul 27 '19

Frontend: React/Redux

React Custom Hooks - Sharing Logic Between Components

Lina Rudashevski ・ Aug 20 '19

Frontend: Tooling

Backend: Django

Creating Custom Exceptions using Django Rest Framework

Lina Rudashevski ・ Aug 19 '19

Backend: Python/Pytest

Writing Tests with pytest and pytest-factoryboy

Lina Rudashevski ・ Aug 20 '19

Backend: Infrastructure

Tooling: Github

Overall: Metalearnings

Writing Tests with pytest and pytest-factoryboy

Define the factories. They look very similar to models.

In a conftest.py file I register the factories.

Write tests

Execute the tests

React Custom Hooks - Sharing Logic Between Components

Creating Custom Exceptions using Django Rest Framework

5 chrome extensions for active development

1. lighthouse - get a full audit of your site

2. stylebot - change the appearance of websites (+get rid of the annoying red highlighting on github prs)

3. jsonformatter - make json readable

4. React Developer Tools - examine your react components, plus see what version of react different sites run

5. Redux DevTools - See what's in the store, and examine state changes

Write your own WebSocket middleware for React/Redux in 4 Steps

Step 1: Define an action that will be used to establish a websocket connection

Step 2: Dispatch your action to open a new websocket connection

Step 3: Write the websocket middleware

Step 4: Create the store with your new middleware

BONUS: Wrap your entire project in a websocket connection

10 docker-compose and docker commands that are useful for active development

1. terminal into the docker container

2. run the docker container in debug mode

3. build the docker container

4. start the docker container

5. start the docker container in the background

6. see all of the docker containers currently running

7. remove all docker containers in the repository

8. remove a specific docker container

9. view all of the docker images

10. clean out any images, builds, etc., that might be hanging

In a `conftest.py` file I register the factories.