Log in
Hamburg, Germany
When referring to the user’s stuff, which is better out of these:
- “My account” or “Your account”?
- “My orders” or “Your orders”?
- “My cases” or “Your cases”?
It’s a trick question because often you don’t need any prefix and can just use:
- Account
- Orders
- Cases
Amazon is a good example of this in action because it’s obvious that it’s your account and your orders:
But what if your product contains things that belong to you and to others – for example, a case working system that contains your cases and everyone else‘s?
The problem with “my”
You could use “My cases” in a navigation menu like this:
This seems fine on the face of it.
But screens are not only accessed or referred to through a menu.
For example, you might need to sign post users to their cases in an onboarding flow, email notification or help article.
Saying something like “Go to my cases” is awkward and unnatural – if I told you to go to my cases, you’d think I was telling you to go to my cases, not yours.
Similarly, a support agent might tell you to “Go to your cases” over webchat or a phone call. This is confusing if the UI says “My cases”.
These issues just don’t come up when you use “your” – I’ve used this approach in multiple products over the years, and seen exactly zero issues in user research.
So that’s good.
“But what if the user is communicating to us using radio buttons, for example?”
This is easy if we look at an example:
This doesn’t make sense because it sounds like you’re instructing the computer to share their profile, not yours.
But it’s clear if you use “my”:
In summary:
- Use “your” when communicating to the user
- Use “my” when the user is communicating to us
If you’d like to design forms that nail basic details like this, as well as complex problems found in enterprise systems, you might like my course, Form Design Mastery:
Hamburg, Germany
This is a collection of classless css themes to use as starting points in web development.
How do I get this theme?
Paste into your website's <head> this snippet.
See this same page in a different classless theme
- HTML only
- awsm.css
- bahunya
- bamboo
- bootstrap
- evenbettermotherfucking
- holiday.css
- kacit
- marx
- meyer
- minicss
- no-class
- pico.css
- sakura
- sakura-vader
- simple.css
- stylize.css
- tacit
- thebestmotherfucking
- tufte
- vanillacss
- w3c-chocolate
- w3c-traditional
- water.css-dark
- water.css-light
- writ
- yorha
Why use classless themes?
- Responsive
- Good browser support
- Beautiful
- Small size (< a few kb) - you don't waste bytes on every widget imaginable
- No learning curve - use HTML as you would normally instead of going to the docs to learn which class does what and having to fight the framework otherwise.
- Original Hacker News Thread
Is it responsive?
Heck yeah! It doesn't include any fancy styles so it's easily mobile responsive. Just add the famous responsive viewport tag and you'll be good to go!
In fact, try resizing this page. Everything flows super nicely as you'll see.
Element demos
This is supposed to be a demo page so we need more elements!
Form elements
Code
Below is some code, you can copy it with Ctrl-C.
Did you know, alert(1) can show an alert in JavaScript!
// This logs a message to the console
console.log('Hello, world!')Other
Here's a horizontal rule and image because I don't know where else to put them.
This is a or a more formal
This is a blockquote
Good old preformatted text, no code at all
|\_/| **************************** (\_/)
/ @ @ \ * "Purrrfectly pleasant" * (='.'=)
( > º < ) * Poppy Prinz * (")_(")
`>>x<<´ * (<a href="mailto:pprinz@example.com">pprinz@example.com</a>) *
/ O \ ****************************
And here's a nicely marked up table!
| Name | Quantity | Price |
|---|---|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
Typography
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using theciteattribute, while a text representation of the source can be given using the<cite>cite element."
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
Links with mailto:, tel:, sms: addresses might be styled...
Heading 1
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 2
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 3
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 4
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 5
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 6
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Hamburg, Germany
Hamburg, Germany
Hamburg, Germany
Previously on meyerweb, I explored ways to do strange things with the infinity keyword in CSS calculation functions. There were some great comments on that post, by the way; you should definitely go give them a read. Anyway, in this post, I’ll be doing the same thing, but with different properties!
When last we met, I’d just finished up messing with font sizes and line heights, and that made me think about other text properties that accept lengths, like those that indent text or increase the space between words and letters. You know, like these:
div:nth-of-type(1) {text-indent: calc(infinity * 1ch);}
div:nth-of-type(2) {word-spacing: calc(infinity * 1ch);}
div:nth-of-type(3) {letter-spacing: calc(infinity * 1ch);}
<div>I have some text and I cannot lie!</div>
<div>I have some text and I cannot lie!</div>
<div>I have some text and I cannot lie!</div>According to Frederic Goudy, I am now the sort of man who would steal a infinite number of sheep. Which is untrue, because, I mean, where would I put them?
Visually, these all came to exactly the same result, textually speaking, with just very small (probably line-height-related) variances in element height. All get very large horizontal overflow scrolling, yet scrolling out to the end of that overflow reveals no letterforms at all; I assume they’re sat just offscreen when you reach the end of the scroll region. I particularly like how the “I” in the first <div> disappears because the first line has been indented a few million (or a few hundred undecillion) pixels, and then the rest of the text is wrapped onto the second line. And in the third <div>, we can check for line-leading steganography!
When you ask for the computed values, though, that’s when things get weird.
| Computed value for… | |||
|---|---|---|---|
| Browser | text-indent |
word-spacing |
letter-spacing |
| Safari | 33554428px | 33554428px | 33554428px |
| Chrome | 33554400px | 3.40282e+38px | 33554400px |
| Firefox (Nightly) | 3.40282e+38px | 3.40282e+38px | 3.40282e+38px |
Safari and Firefox are at least internally consistent, if many orders of magnitude apart from each other. Chrome… I don’t even know what to say. Maybe pick a lane?
I have to admit that by this point in my experimentation, I was getting a little bored of infinite pixel lengths. What about infinite unitless numbers, like line-height or — even better — z-index?
div {
position: absolute;
}
div:nth-of-type(1) {
top: 10%;
left: 1em;
z-index: calc(infinity + 1);
}
div:nth-of-type(2) {
top: 20%;
left: 2em;
z-index: calc(infinity);
}
div:nth-of-type(3) {
top: 30%;
left: 3em;
z-index: 32767;
}<div>I’m really high!</div>
<div>I’m really high!</div>
<div>I’m really high!</div>It turns out that in CSS you can go to infinity, but not beyond, because the computed values were the same regardless of whether the calc() value was infinity or infinity + 1.
| Browser | Computed value |
|---|---|
| Safari | 2147483647 |
| Chrome | 2147483647 |
| Firefox (Nightly) | 2147483647 |
Thus, the first two <div> s were a long way above the third, but were themselves drawn with the later-painted <div> on top of the first. This is because in positioning, if overlapping elements have the same z-index value, the one that comes later in the DOM gets painted over top any that come before it.
This does also mean you can have a finite value beat infinity. If you change the previous CSS like so:
div:nth-of-type(3) {
top: 30%;
left: 3em;
z-index: 2147483647;
}…then the third <div> is painted atop the other two, because they all have the same computed value. And no, increasing the finite value to a value equal to 2,147,483,648 or higher doesn’t change things, because the computed value of anything in that range is still 2147483647.
The results here led me to an assumption that browsers (or at least the coding languages used to write them) use a system where any “infinity” that has multiplication, addition, or subtraction done to it just returns “infinite”. So if you try to double Infinity, you get back Infinity (or Infinite or Inf or whatever symbol is being used to represent the concept of the infinite). Maybe that’s entry-level knowledge for your average computer science major, but I was only one of those briefly and I don’t think it was covered in the assembler course that convinced me to find another major.
Looking across all those years back to my time in university got me thinking about infinite spans of time, so I decided to see just how long I could get an animation to run.
div {
animation-name: shift;
animation-duration: calc(infinity * 1s);
}
@keyframes shift {
from {
transform: translateX(0px);
}
to {
transform: translateX(100px);
}
}<div>I’m timely!</div>The results were truly something to behold, at least in the cases where beholding was possible. Here’s what I got for the computed animation-duration value in each browser’s web inspector Computed Values tab or subtab:
| Browser | Computed value | As years |
|---|---|---|
| Safari | 🤷🏽 | |
| Chrome | 1.79769e+308s | 5.7004376e+300 |
| Firefox (Nightly) | 3.40282e+38s | 1.07902714e+31 |
Those are… very long durations. In Firefox, the <div> will finish the animation in just a tiny bit over ten nonillion (ten quadrillion quadrillion) years. That’s roughly ten times as long as it will take for nearly all the matter in the known Universe to have been swallowed by supermassive galactic black holes.
In Chrome, on the other hand, completing the animation will take approximately half again as long as our current highest estimate for the amount of time it will take for all the protons and neutrons in the observable Universe to decay into radiation, assuming protons actually decay. (Source: Wikipedia’s Timeline of the far future.)
“Okay, but what about Safari?” you may be asking. Well, there’s no way as yet to find out, because while Safari loads and renders the page like usual, the page then becomes essentially unresponsive. Not the browser, just the page itself. This includes not redrawing or moving the scrollbar gutters when the window is resized, or showing useful information in the Web Inspector. I’ve already filed a bug, so hopefully one day we’ll find out whether its temporal limitations are the same as Chrome’s or not.
It should also be noted that it doesn’t matter whether you supply 1s or 1ms as the thing to multiply with infinity: you get the same result either way. This makes some sense, because any finite number times infinity is still infinity. Well, sort of. But also yes.
So what happens if you divide a finite amount by infinity? In browsers, you very consistently get nothing!
div {
animation-name: shift;
animation-duration: calc(100000000000000000000000s / infinity);
}(Any finite number could be used there, so I decided to type 1 and then hold the 0 key for a second or two, and use the resulting large number.)
| Browser | Computed value |
|---|---|
| Safari | 0 |
| Chrome | 0 |
| Firefox (Nightly) | 0 |
Honestly, seeing that kind of cross-browser harmony… that was soothing.
And so we come full circle, from something that yielded consistent results to something else that yields consistent results. Sometimes, it’s the little wins that count the most.
Just not infinitely.
Hamburg, Germany
Next Page of Stories