The new multiplayer Deck of Cards is now published, so I decided to open up some of it’s secrets (the cards library will be published soon as open source in the same familiar repo).

If you’ve read the first two posts, I actually ended up designing a bit more minimalistic set of cards:

In the previous version of Deck of Cards, I used JavaScript animations with my own quite low-level helper called animationFrames. …

In the first post I showed how to create playing cards in the command line. Now it’s time to bring in some visuals. We will be using functions from the previous post, so make sure to read that first.

Playing card size

The first thing to study is what’s the correct size of playing cards. Wikipedia tells it’s 2.5" by 3.5" (poker) or 2.25" by 3.5" (bridge). Poker size will give use more room, so let’s use that. If we double the dimensions we’ll get 5 by 7 — nice and round numbers, good!

Sketching the card

I will be using just the plain old HTML…

I’m currently rewriting my Deck of Cards project and decided to write about the logic behind virtual playing cards. This is the first post of the series.

How to represent cards in a deck

Deck of cards have 52 cards, 4 suits and values from 1–13. So let’s start with a loop from 0 to 51:

const cards = new Array(52);for (let i = 0; i < cards.length; i++) {
cards[i] = i;

Here we have a deck of cards. You probably think I’m crazy – just an array of numbers? But wait, we’ll just need some number magic. …

RE:DOM is the perfect tool for creating HTML components

Google’s Polymer team have lately talked about this new way to create templates, lit-html, which is heavily copied from HyperHTML.

Tagged template literals provide a way to update components smarter, so that static content is untouched and only the dynamic part gets updated. There’s a lot of performance and memory benefits of doing that, compared to virtual dom approach, where you need to diff everything.

RE:DOM have always supported this by design. Instead of defining a single create/update method, you define constructor and update methods separately:

import { el } from 'redom';export class Hello {
constructor () {…

Need for speed

Think of your busy day. You are in such a hurry in your physical life even your smartphone is not flexible enough to use to answer a thread in Slack, Reddit, Twitter or whatever. You know the feeling when someone’s wrong in the Internet, don’t you? Or you’re driving a car and need directions, quickly. You wish your smart device could understand you, without typing.

There are talk interfaces, but they make a lot of mistakes and are really cumbersome to use. And you need to talk, even you’re in a public place. And listening is so slow compared to…

The Internet has changed our lives. We use it for everything now.

Building the web is not easy. It’s a constant iteration of questioning every little design and development choice over and over again.

I believe nothing else matters but the user experience. Even if you have the most elegant solutions under the hood, the user only cares about the ease of use of the product itself.

Check out my website refresh:

It’s good to know about the “native” way

npm is more powerful you’d expect (image from:

Build tools come in all size and color. But do you really need them? Wouldn’t it be easier to just follow the original CLI documentation of Rollup, Stylus or whatever and call it a day? Not to mention they add up a lot of dependencies.

I’m going to show you the “native” way with NPM scripts and chokidar.

Initialize node.js project

Let’s start by creating a node.js project. Open your terminal and write:

$ mkdir example
$ cd example
$ npm init -y

Also create some folders and install express:

$ mkdir -p css js public/js public/css
$ npm i express --save


Paljonko tuntisähkö oikeasti maksaa?

Vuoden 2015 sähkönkulutus/-hintakäyrä. Sinisellä sähkönkulutus, keltaisella spot-hinta, punaisella maksettu sähkönhinta. 1px = 1h

Why do we keep asking that?

We web developers tend to ask the same questions year after year: What’s the best framework? What’s the best bundler? What’s the best editor?

What does the best even mean without any context? We should first stop and think about the project we’re doing. After that we can start to wonder which tools are best suited for the task at hand. Sometimes the answer is that we don’t even need a framework. Or a bundler. Even JavaScript isn’t always needed. Remember: less is more.

Mattias Petter Johansson said it best in his latest YouTube-video: Throw out your tools. I totally…

Share the love ❤️

You can order stickers here. Get $10 off from your order by going here first!

There’s other cool stickers at Stickermule as well, for example this ”starter pack” you can add to the same cart.

Happy JavaScripting!

Juha Lindstedt

Web architect at iDiD digital signage, creator of RE:DOM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store