Browsery TX723.5.B36 B83 2018

Browsery SF422.5.M545 2018a

Browsery SF487.B185 2018

Browsery HD6073.H8 H69 2019

Browsery PN6071.A45 S437 2018

Browsery Q175.4.R44 2018

Browsery HQ799.2.M352 H36 2019

Browsery QE523.T285 B4413 2019

Browsery PS3527.A15 Z46 2018

Browsery HQ1237.C745 2019

I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for myself. Below is my initial draft of the negative margin section.

The latest specification only says: “Negative values for margin properties are allowed, but there may be implementation-specific limits.” and leaves it at that. Not extremely helpful. MDN is mostly silent as well, and Rachel Andrew’s big overview article doesn’t mention negative margins at all.

That’s odd, especially since negative margins are a very old functionality that I might even have used in my very first CSS test somewhere back in 1998. (Unless I used position: relative; I can’t remember.)

But anyway, here is, apparently, the first-ever systematic treatment of negative margins in simple situations.

Negative margins in CSS

It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Also, there is an exception we’ll get to in a minute.

Here is our test element: a simple container with three paragraphs in it. Note that the paragraphs have a width of 250px. This is extremely important, due to the exception we’ll get to in a minute.

Negative margin-top and -bottom

To start, let’s give the first paragraph a -15px margin-bottom. Essentially, when the browser calculates the point where the second paragraph should start, it moves that point 15px upward. From then on the browser lays out all paragraphs as normal.

Therefore the second paragraph, being the bottom neighbour of the first one, is draw 15px closer to the first paragraph. The margin between the second and third paragraphs remains intact; the browser calculates it normally. Thus, the rest of the vertical rhythm is preserved.

This trick is useful for subtle tweaks, where the content of one element should slightly overlap the content of the one above it.

Now let’s give the second paragraph a -15px margin-top. As you see, this yields exactly the same effect. Again, the second paragraph is moved upward by 15px, and the subsequent paragraphs follow.

Margin collapsing

Also note that margin collapsing behaves different when you use negative margins. This, at least, is specified in CSS 2.1:

In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

In the last example, the first paragraph still has its default margin-bottom of 1em (Chrome; can’t find Firefox’s value).

Normally, the browser would take the first paragraph’s margin-bottom and the second one’s margin-top, figure out which one is larger, and apply that margin between the two, which would yield max(-15px,1em) = 1em. That’s not how it works, though.

In case of negative margins we take the absolute values of the two adjoining margins (15px for the second paragraph; 1em for the first), and deduct the smaller (15px) from the larger (1em). This yields about 1px (depending on the font size, of course).

Thus, negative margins are actually allowed to pull elements closer to their neighbours without being hindered by regular margin collapsing.

Now we treated negative margin-top and -bottom fully. It’s an occasionally useful effect.

Negative margin-left and -right

Negative margin-left and -right work the same, provided the element has a width. Here we apply margin-left: -10px and margin-right: 10px.

As you see, the first paragraph is now offset 10px to the left, while retaining its width. Thus, its right edge also moves 10px to the left.

The second paragraph with the negative margin-right is unaffected. The negative margin-right would influence any element to the right of the second paragraph, but there aren’t any.

To show negative margin-right in its full glory, let’s float the paragraphs, so that they have a right neighbour. Here is the reference element.

Now we’re going to sprinkle some negative margins on the paragraphs.

As you see, the second paragraph is now drawn 10px closer to the first one due to the first’s negative margin-right. This is exactly the same effect as with a negative margin-bottom.

Also note that the second paragraph has a negative margin-top, which means it is offset 10px upward. The third paragraph has a negative margin-bottom, which has no effect, since it does not have a bottom neighbour.

Remember: margin collapsing does not work on margin-left and -right; just on -top and -bottom. Therefore we do not have to worry about it in this case.

If we give the second paragraph a margin-left: -10px, the same happens. Just like with top and bottom, left and right are interchangeable for this effect.

So far, negative margin-left and -right behave exactly like negative margin-top and -bottom.

width: auto and negative margin-right

Now let’s change the behaviour of negative margin-right by giving the paragraphs width: auto. They do not have a fixed width any more; instead they fill up their parent element completely while respecting its padding. That’s how width: auto works.

The paragraph with margin-left: -10px is still offset 10px to the left, but its width grows. Thus, its right edge is not offset but stays where it is.

The negative margin-right now does the same thing. It offsets the paragraph’s right margin by 10px to the right, and the paragraph’s width increases, causing its left edge to stay where it is. This only happens when an element has width: auto. As we saw before, elements with a fixed width behave quite differently.

Finally, the third paragraph has both. Both its left and its right margins are offset by 10px, essentially negating the container’s padding: 10px;.

This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.

These are the header styles; the container has padding: 10px

h5 {
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
	background-color: grey;
	color: white;
	/* no width, so defaults to width: auto */	
}

Again, this is only possible if the header has width: auto. Fortunately that’s the case in 99% of real-world use cases.

This is how negative margins behave in simple situations. Now that I established a baseline I can look into how they behave in flexboxes and grids.

One of the things that keeps me fairly upbeat these days is playing board games and D&D with my friends online. Since others might want to do the same, I thought I’d jot down some notes on how I do it.

I briefly tried Tabletopia but didn"t like it. I understand why they built the interface as they did, but I found it very hard and very confusing to use, and it took us about 45 minutes to even start understanding the system. Granted, we picked Teotihuacan for our test game, which may not have been the best of choices.

So I continued using my homebrew system, and it works great so far.

Technical set-up

I use Whereby (the former appear.in), a WebRTC service that works absolutely GREAT. I totally recommend it to everyone for your online communication needs. The greatest thing about it is that you just go to a URL, ask the people you want to communicate with to go to the same URL, give permissions, enter the room, and start talking. No sign-ups or logins or whatever.

I have a pro account (or whatever it’s called) that allows 12 simultaneous connections to my room. You can also just grab a room name, go there, and start communicating, but these free rooms have a maximum of four simultaneous connections. So I advise you to take a paid account; you will most likely need more than four connections for playing board games online.

Besides, fuck free. The free Internet is slowly coming to an end and you should pay for services you like and use, or they won’t survive (or sell your data; see also Zoom).

Whereby works on modern Chromium-based browsers, and also in Firefox (though I haven’t tried Firefox on Android yet). It does not work in Safari iOS, but an app is available that works as simply as the web client.

Then figure out how many devices you own that you can use. On the whole, I send out three streams: my 'social' stream (my face, basically) from my laptop, the main board stream from my iPad, and a secondary board stream from a Samsung S6 I happened to have lying around. I occasionally use my real Samsung phone (an S7) as a third cam, for instance to make sure that everyone has the same bits and pieces on mirrored player boards.

Plug in all devices you use, and make sure any phones are on at least 25% charge or so before starting. My Samsung phones, especially, tend to spend a lot of juice on keeping the streams running, and even though plugged in all the time they might end up with less battery charge after a gaming session.

Mute Whereby on all devices except for your social stream. One very annoying thing I noticed is that, both on the iPad and on the Samsungs, it is impossible to turn off the sound completely. Therefore you need to do two things:

1. Disable sound input by clicking on the microphone icon in the bottom bar.
2. Disable sound output of all connections by clicking the Mute option in the menu you get after clicking on the three bullets icon in the upper right corner. You must repeat this for every connection.

You can only mute the output once everyone else has joined the stream. If someone drops out and re-joins you must mute them again. This is annoying; but it’s caused by idiotic device vendors not allowing you to mute the sound completely by using the provided hardware buttons — don’t ask me why they took this stupid step.

Now ask the others to join you. If possible and necessary they can also add their own cameras, for instance to show their player boards.

Picking the game

With the technical set-up out of the way, you should pick your game. I found that there are two absolute necessities here:

1. All players must own the game, so that they can copy the moves of the other players.
2. The game should have little to no hidden information.

So you might need to buy the same game as your friends. If you are in the Amsterdam area, please support your friendly local game store Friends & Foes instead of the big online retailers. Friends & Foes deliver in Amsterdam (I just ordered Tzolkin from them).

The two games I played most often so far are Azul and Alchemists. I am currently gearing up to try Madeira, Istanbul and Tzolkin; they should work as well.

Azul, Madeira, and Tzolkin have no hidden information at all. They have a variable set-up (and in case of Azul this is repeated each round), but that should be no problem.

Appoint one player or group of players as the Master; the other ones have Copies. The Master players draw all the randoms and show them to the other players, who copy them on to their Copy boards. Having the Master set provide all random draws is very important, since usually quite a bit of design thought went in to deciding exactly how many of one type of card or tile are available. These distributions should not be disturbed!

Azul

With Azul it is very important that all players set up copies of all other players’ personal boards. Part of the game is figuring out which tiles other players are likely to want, and for that all players need an overview of who has which tiles in which position.

Wnen I stream Azul, the main camera is on the central part with the available tiles. Other players can copy that if they like, but it’s not really necessary if the stream is clear enough. My secondary camera is on my own player board, so that everyone can see what I’m doing.

During the game all players clearly state their moves; for instance “I take the two blues with the star, and I put them on my three row.” I take the tiles from the central part, and the other players see me doing that, so they can correct me. They don’t see my copy of their playing baords, but that has never been a problem yet, as long as everyone gives clear instructions.

Alchemists

Alchemists does have a little bit of hidden information: random ingredients drawn, and random helper cards we always call Friendly Friends. (I forget their official name.) The Master player draws these cards for me and shows them on their camera without looking. I take the corresponding cards from my own copy of the game. This works fine, and the distribution of ingredients and Friendly Friends remains intact.

Alchemists really only needs a Master main board stream and social streams; there is no reason to add more cameras.

Although Alchemists’ board is pretty big, it doesn’t contain all that much information, which is good for online gaming. I just need to see which artifacts and ingredients are drawn (and copy them to my own board), and where players place their action cubes (and copy them as well). If I can’t see it clearly I just ask, and that works fine.

Part of Alchemists becomes much easier. In real life every player needs a beautifully-designed but sometimes cumbersone player contraption to both visualise their research and hide it from the other players.

Credit: Karel_danek

Online, it’s not necessary, and I find that my research and thinking flows much easier. Other players cannot see my board, and that gives me a lot more space to work with.

Madeira, Istanbul and Tzolkin

I haven’t played Madeira, Istanbul and Tzolkin yet, but they do not contain hidden information; just start-of-game randoms, plus the random buildings that occasionally appear in Tzolkin and the bonus cards in Istanbul. I do not think these will cause a problem.

The bigger problem might be that their boards are much more involved, and there’s a lot of game state to track. I might need to use two cameras to stream them accurately; I’m not sure yet. We’ll figure that out once we do the first session.

Publisher Oxford ; New York : Pergamon Press, 1977-

Location World Wide Web

Call No. QD921

Publisher Oxford ; New York : Pergamon Press, c1982-1985.

Location World Wide Web

Call No. QC787.N78

Publisher Oxford : Pergamon Press, c1993-c1994.

Location World Wide Web

Call No. QC787.N78

Publisher Oxford ; New York : Pergamon.

Location World Wide Web

Call No. QC787.N78

Publisher Oxford ; New York : Pergamon Press, 1977-1978.

Location World Wide Web

Call No. QC787.N78

A few of them are expected to move into clinical trials later this year.

Fitbit on Thursday launched its Fitbit Heart Study, a large-scale, virtual study to validate the use of its wearable technology to identify heart acti

The coronavirus-induced lockdown has been coined as the world's biggest psychological experiment by the World Economic Forum. The spread of the pandem

 The Hyderabad-based Bharat Biotech International Limited (BBIL) would lead a project to develop human monoclonal antibodies as therapy for Covid-19 i

The key benefit offered by the one-year full time MBA at IIM, I believe, is that the course gives you time to discover yourself before you manage others. In Indian society the pressure to rise above the neighbour’s kid is a constant one. The ...

Gevorkian, Peter, author

Ginsberg, Michael (Energy consultant), author

Dharmadasa, I. M., author

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Dewey Library - QA431.R3255 2019

Online Resource

Dewey Library - QA10.5.A15 2019

Online Resource

Dewey Library - QA671.A47 2020

Online Resource

Dewey Library - QA273.S6875 2019

Online Resource

Dewey Library - QA614.5.D36 2019

Online Resource

Online Resource

Online Resource

Online Resource

Dewey Library - QA180.J33 2019

Online Resource

Dewey Library - QC20.7.D5 B34 2020

Online Resource

Dewey Library - QA278.55.B55 2020

Online Resource