Tesla Inc Chief Executive Elon Musk said in a podcast interview released on Thursday that the company`s planned Roadster sports car would take a backseat to the development of other vehicle models.

Browsery BF1027.M86 M36 2017

Browsery F965.I46 2019

Browsery TS1105.P134 2018

Browsery PN145.D74 2019

Browsery RJ250.R355 2018

Browsery QA76.9.C66 B787 2018

Browsery HM743.R447 L34 2018

Browsery QH450.W37 2018

Browsery Z286.S37 S48 2018

Browsery PQ7798.12.A678 D4713 2018

Browsery CB428.M43 2019

Browsery PQ2668.A314 C6713 2018

Browsery SF745.K33 2019

Browsery LC212.42.S44 2019

Browsery HQ755.85.S25 2019

Browsery TX801.G55 2018

Browsery P279.B64 2018

Browsery TX724.5.A1 M38 2018

Browsery PS3573.A4215 A6 2018

Browsery GV939.U78 A3 2019

Browsery RA1138.M55 2019

Browsery E184.M5 C395 2018

Browsery Q175.A26829 2019

Browsery HQ755.35.P67 2018

Browsery PN6071.A45 S437 2018

Browsery RC606.55.B38 A3 2018

I am going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article snippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track.

Today I present the first draft of the short overflow article. Feedback would be greatly appreciated.

*** START EXCERPT ***

"Web design is a constant battle against overflow."

- Rachel Andrew

Not knowing how tall something is is fundamental to web design. For instance, you cannot know in advance how long the texts will be that will be shown in your site. What happens if if the final text is much longer than the fake text you used during production? Or what if there's a wide image you hadn't counted on?

In both cases the content of your blocks will become larger than you expected, and if you've given them a fixed width or height that might lead to overflow: content escaping from the block — or at least, attempting to escape.

The easiest way to avoid overflow is not giving your blocks a fixed height in the first place. If you allow them to grow as tall and wide as they need to be you avoid quite a few problems.

This short chapter discusses how to deal with overflow.

CSS Is Awesome

The most famous example of overflow is the "CSS is Awesome" meme that's been around ever since 2009.

Born out of one web developer's frustration with CSS's overflow behavior, this meme took on a life of its own and became an example of what was wrong with CSS. Why would the 'Awesome' flow out of the box? Why should CSS be so complicated? Couldn't the box simply grow to contain the 'Awesome'?

Sure it could! And it would, except that you specifically instructed the box not to by giving it a fixed width. You could have used min-width or flexbox — both are good in dealing with unexpectedly large content — but you didn't. No doubt you had good reasons, but since it was your decision, the onus of solving any resulting issues is on you.

In these cases, the overflow declaration is your friend.

The overflow declaration

The overflow declaration allows you to define what to do with content that overflows its box. It has four values, visible, hidden, scroll, and auto. The default value is visible, and that's the one that causes the 'CSS is Awesome' effect.

overflow: visible means that you allow the content to spill out of its block. Although that keeps the content readable, it also means the content might overlap with the block below or to the right of the affected block, which can be very ugly.

When calculating the position of other blocks, the browsers' layout algorithm uses the width and height of the box you defined, and disregards the fact that content may be spilling out of the block. In fact, at that point in the algorithm the browsers have no way of knowing that the content overflows. [FACT-CHECK THIS]

Thus, when calculating the position of the next block the browsers place the block exactly where it should be given the height of the previous block and the margins of both. They do not pay the overflow any mind, wbich may cause the overflowing content to overlap the content of the next block.

Sometimes this is what you want — or rather, what you’re forced to live with. More often, though, you want to either generate scrollbars or hide the overflowing content entirely.

overflow: hidden hides the overflowing content. This creates a pleasing visual effect, but now there's no way for the user to get to the content. Therefore, hidden is something of a nuclear option: necessary in a few cases, but to be avoided whenever there's a better way of handling the situation.

overflow: scroll and overflow: auto generate scrollbars. The auto value generates scrollbars when they're necessary, while scroll scroll value always does so, even when no scrollbars are needed.

If scroll always generates those ungainly scrollbars, even when they're not needed, and auto only generates them when necessary, why would you ever use scroll? The reason is that a content change that generates or removes a scrollbar can be quite ugly.

Suppose you have a block with overflow: auto that initially does not need scrollbars. Then a script adds a lot of content to the block, causing overflow, and thus the generation of a scrollbar. Not only is this quite ugly in itself, but on some systems [BE MORE SPECIFIC] the scrollbar itself takes up about 16px of width and thus narrows the content area, which may lead to the reflowing of the text and even more overflow. And when the content is removed, all of that happens in reverse.

All this can give a quite jarring effect. For instance, see the position of the word "serves" in the two screenshots below. The creation of a scrollbar forces it to the next line, and that might be something you want to avoid.

The easiest way of preventing that effect is by giving the block overflow: scroll from the outset. Sure, the scrollbars may not be needed, but if they are there's no moving around of the content.

Block Formatting Context

[This is a practical tip that readers need to know about.]

An overflow value of anything but visible will create a new block formatting context. In old-fashioned float-based layouts it is sometimes necessary to create a block formatting context in order to contain a bunch of floats. (Just nod wisely for the moment; we'll get back to this.)

The easiest way of doing this is to add overflow: auto to the block, even though the block has no set height and the content will never actually overflow.

So if you're working in an old codebase and encounter a bunch of unexplained overflow: auto (or hidden) declarations on blocks that have height: auto, remember that they're meant to keep a float-based layout working properly. Only remove those overflows once you switched from floats to a modern layout system like grid or flex. If you do not intend to switch, leave the overflows in place as well.

Related declarations

In addition to the overflow declaration, there are also overflow-x and overflow-y declarations. They do what you'd expect them to do: they set the overflow on only the horizontal x-axis, or only the vertical y-axis. Otherwise they work exactly like overflow.

Also, iOS supports overflow-scrolling: touch, which enables momentum-based scrolling for overflowing elements. Without this declaration (or, more precisely, with the default overflow-scrolling: auto in place), overflowing elements scroll normally, i.e. they stop scrolling as soon as your finger leaves the screen. Android devices always use momentum-based scrolling, so they do not need this declaration. It doesn't hurt them, either, so it's perfectly safe to use. [TEST]

*** END EXCERPT ***

The ending is a bit abrupt, but I'm not entirely sure what to say next. Also, I'm not yet sure which chapter will come next, so I can't write a segue.

Anyway, please let me know what you think. I'm especially looking for feedback from JavaScript developers who are not all that good at CSS.

Inspired by Brad’s recent post, here’s a scattering of thoughts I had about things other than conferences (I already wrote about those.)

***

Amsterdam runs in idle, but it runs. That is good to see. As far as I know all cities run in idle right now, but are still running.

Civilization, society, and probably the economy as well, will not collapse. This is no extinction event, just a very bad spell. We will recover.

***

We can give up on the rest of the school year. In Holland the central examinations are cancelled for the first time since 1945. I am in touch with a bunch of 15- and 16-year olds, children of friends and their friends, that I play D&D and board games with. I mainly think of them in this item. I also think of the students I’m currently teaching (online) at university, who are around 20 or so.

Once social distancing is over they will likely go into party mode for months on end. It will be very difficult to get them to pay attention to school or studies, and in my opinion we shouldn’t try. They’re right.

(Note to self: figure out how the people born around 1330 fared after the Black Death. Re-read Froissart.)

Also, I predict a slight uptick in teen abortions during summer.

***

I’m teaching at university right now, and it really goes remarkably well. Still, this is the web faculty, which is the one faculty that’s most likely to adapt seamlessly to the current situation, since not only the students, but also the teachers are well at home on the web. Other faculties might likely have more problems — think a classics professor who never clicked on anything because Aristotle and Cicero didn’t either.

***

Twitter is a cesspool. I don’t go there any more. I get very tired of all the enraged Americans in particular, who think that the specific problems of their country are the most important ones in the world. Not fair, maybe, but that’s how it is. Deal with your orange monkey yourself, we don’t have the time for it.

***

I am supposed to be writing a book. I am currently not writing a book. But last week was very hard (teaching while cancelling a conference for the first time is not my favourite mix of activities), this week will be moderately busy, and we’ll see next week.

***

Eric said websites should get static, because the React monstrosities that rule the web now are too fucking slow and expensive on mobile devices, and people need information right now.

We should rule that important government websites are not allowed to use JavaScript at all. That’ll solve the problem.

Sure, reality is more nuanced, good JavaScript use is possible yaddah yaddah, but right now is not the time for nuance. We need one simple rule that actually does away with the problem and that even idiots understand.

So skip the JavaScript entirely. It’s just fluff. Do away with it.

***

I stopped paying taxes for the first time in my freelance career. Without taxes, I can probably hold on to November or December even without any extra income beyond what I already invoiced. This is definitely better than I initially thought, when I had to say goodbye to 1/3 of my annual income.

***

My first online D&D session was an astounding success. I use Whereby and I swear by it. (Install app for iOS; rest just works in the browser.) I have a Pro account, so my room accepts 12 connections simultaneously.

I used two devices as cameras on the battle mat and the initiative tracker (I use a slightly modified version of this initiative system), and my laptop for an image of myself and to see the players. Rolz for die rolls, Whatsapp for private communication between DM and one player, and that’s it, really. I occasionally added a fourth hand cam with an extra phone, but I could do without if necessary.

The only problem is that it turns out to be impossible to turn off sound entirely on the iPad. There are online instructions that claim otherwise, but they don’t work. Still, just now I realised I should kill all video feeds to the iPad except for its own; I only use it as a glorified web cam.

***

A lot is being said about mental health, and it’s all true. I also suffer a little bit — on average I get Corona about three times per day, but when I forget about it for five minutes my symptoms mysteriously disappear. I assume others have the same problem.

Many good points have already been made, and I’m not going to repeat them. The historian in me wants to make another point entirely.

Once upon a time, not so long ago, this feeling of permanent stress and helplessness, multiplied by two, three, or even four, was the natural state of being of just about all humans. Plagues, wars, famines, too-high taxes, they could all arrive at your doorstep, and in an average year at least one (most likely taxes) did.

People lived like this all the time. They were not aware that it is possible to live in any other way. The stress you’re feeling now is about one-half to one-quarter of what everybody felt all the time during most of human history, and before. As a result, all of them had PTSD. All of them. That’s why assholery is so widespread during all of history (except, in some parts of the world, for most of the people, for the last sixty years or so).

This is what we’re fighting for. We fight for our children to have the chance to live as we did, without constant fear.

Remember that. It gives you a goal to shoot for.

***

Jeremy is right. Writing helps. I feel better already.

Publisher Oxford ; New York : Pergamon Press, 1977-

Location World Wide Web

Call No. QD921

Publisher Amsterdam : North-Holland Pub. Co.,

Location World Wide Web

Call No. QC1

Gevorkian, Peter, author

Online Resource

Online Resource

Dewey Library - QA403.5.D46 2020

Dewey Library - QA431.R3255 2019

Dewey Library - QA671.A47 2020

Online Resource

Online Resource

Dewey Library - QA180.J33 2019

Online Resource

Online Resource

Dewey Library - QA278.55.B55 2020

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource