Alright, shameless plug. I spend a ton of time trying to style this table of city data I had as nicely as I could. Getting CSS tables to not overflow in containers is a nightmare. I had to use a bit of Javascript to get the scroll shadows working using Intersection Observers.
I like HTML tables but getting them to do what you want can really be tricky.
HTML tables don't necessarily make this easy but but when you have numbers as tabular data, the "subcolumns" should line up when numbers have the same meaning. So if the number 17,000 is directly above 9,000, the 9 and 7 should be in same horizontal space.
A lot of fonts include tabular number variants (or just use them by default) which also makes them visually line up when you get this part correct. Not necessary but keeps the look cleaner, a real concern with dense numeric tables.
I got everything I know & believe about formatting data from edward tufte who has basically spent his entire career thinking and writing about it. But a really solid usable summary of this specific thing is on matthew butterick's site. https://practicaltypography.com/grids-of-numbers.html
This is quite good, so as a fellow frontend person I'll give some deeper notes, including accessibility.
1. There is perceptible lag when sorting.
2. Sortable headers are interactive yet are `div` elements: they can't be focused or used by screen readers. Instead, change them to `<button type="button>` elements and ensure `:focus` styles look OK.
3. When the table's sorted, consider applying an `aria-sort` attribute to the `th`. This informs a screen reader what order things are in.
4. As a sibling mentioned, consider text-aligning numbers to the right. It makes visual comparison of numbers with differing digit counts easier (with a similar aim, some pair this with, `font-variant-numeric: tabular-nums`)
5. On my small phone, the two stickied columns take up 50% of the screen. May not be worth the squeeze (perhaps just sticky the rank at tiny viewports?).
6. Also on my small phone, the horizontal shadows occlude all the content, making it hard to read.
7. I don't personally love the "click to select a row" feature. I double click to select text as I read it, or to copy, and that distractingly toggles the color on and off. Perhaps this makes more sense when there are actions that can be performed on a selected row?
8. Speaking of, clicking the rank cells do not select the row.
This is literally the smoothest, most fluid table scrolling I’ve ever seen on the web (Mobile Safari). The scaling to viewport bounds, the shadow hinting at additional content… this is almost distractingly good.
Is this all one-off code, or have you packaged it for broader use?
It's not really about you. It's about preventing other, more vulnerable people from getting sick. Living in a society means giving up some of your freedoms in exchange for security, and getting vaccinated as a way to help other people should be part of that exchange.
I think some countries (such as the UK) recognize religious and ethical reasons. For example you can say that you're a vegan and can't take the vaccine because they're tested on animals.
But I'd rather be injected with a litre of smallpox than go vegan.
If you have a suppressed immune system from other medications, then other illnesses like the common cold and the flu can kill you.
This is why people who take immunosuppressants typically avoid going out in public, and when they do they wear serious masks intended to protect them from others.
Immuno-compromised people aren't some isolated hobbit species, they're people like you and me that have jobs, run errands, learn in schools, consume food, often live with other humans who have to go out in public, etc. And new folks with sub-par immune systems are born or created every day.
Many vaccine-resistant folks will throw this population away from the entire risk analysis equation, treating them as a mere error term. At least, this has been my observation. In my opinion they should just admit they don't care about the fate of others beyond the 'thoughts and prayers' passive level.
You're just making things up. Lots of drugs screw with your immunity to various degrees and for the most part they live normal lives. This difference now is we have a very contagious and much more deadly disease.
should the government prescreen all potential romantic partners to stop these vulnerable populations from contracting hepatitis or chlamydia?
surely sexual freedom and bodily autonomy can be put on the bench if more people can be kept safe without them
I don't agree with this, in general. We shouldn't give up our freedoms. "Those who would give up essential Liberty, to purchase a little temporary Safety, deserve neither Liberty nor Safety." (Benjamin Franklin) We should be motivated by a desire to help one another, and resist when freedoms are removed. That being said, if businesses want to exercise their freedoms to make life more difficult for the unvaccinated, so be it.
I think this is for the most part what the person above you is suggesting. B2E and B2C relationships being severed over not getting vaccinated.
In addition like previous precedents, public schools would not allow the unvaccinated in the future. These things all combined would mean individuals would be having to change their lifestyle since they’re choosing not to participate in a way that’s safe for others.
That's a nice thought, but I can't cosign, unless Ben happens to also have an informed opinion on societal life under the tyranny of communicable diseases.
Exactly. Any business can choose to restrict unvaccinated. Any business can fire their employees for being unvaccinated if they want to.
The problem is New York will fine any businesses not checking vaccine passes and are forcing them to turn away unvaccinated.
Ok - so can the unvaccinated start their own restaurants of only unvaccinated? Can we open up our own hospitals with the nurses that were fired from mandates? Can we setup our own public transportation? Why not?
Is it because of the scare mongering about variants? Well people who took the vaccine are also causing variants, actually their supposedly super-high levels of vaccine antibodies are not stopping breakthroughs that much - so they are putting evolutionary pressure on the virus to mutate and evade those antibodies. It makes no sense to blame the unvaccinated for that. So why take away unvaccinated freedoms to setup their own restaurants, services etc? That's not liberty for a business or anyone really, that's fascism.
Or, once companies start paying for interviews, they start outsourcing all of their work to interviewees, never hiring anyone. I don't think this would ever actually scale well, but if there's any way to exploit labor, corporations are going to figure out how.
I agree, I hate how long it takes for the title attribute to show up when hovering over elements. It takes a few seconds, where any decent tooltip will take maybe 0.5 seconds or so to show up. I'd love to be able to style the title attribute for length of time to show up.
Fortunately tooltips are pretty easy to make these days. You don't need Javascript at all to make a nice tooltip. But again, it's a tooltip - it's been done so many times before that it'd be nice to have a native browser version.
A little white balance work would go a long way I suspect. An OLED panel would really make things pop, but the burn-in issue might be a problem unless you had it rotating very regularly.
I think you're trading of the design for a bit of quality, you'll probably get more bang for the buck if you buy a non-designer smart TV. That being said, it's still a good TV!
I am very happy many news sites are now behind paywalls. There is now less of an incentive to drive revenue via clickbait or "picking a fight" as many tabloid journalists are wont to do.
There appears to be some kind of concern that this will put people in their own subscription bubbles. Please. Having a subscription to your city's newspaper or subscribing to a documentary streaming service is a far healthier way of ingesting content than getting put into algorithmic engagement bubbles via social media.
To be fair, most print newspapers were subsidized not necessarily by costing money or traditional advertising, but by classified advertising. Maybe news sites can figure out classifieds next.
I worked for a few different newspapers in the early '00s, including a nationwide conglomerate. Craigslist was the end. Papers have been struggling to make ends meet ever since.
Which is unfortunate because the Craigslist experience is terrible and 'Craig' doesn't want to update the site. It's chock full of spam, phone repair ads, and dozens of the same thing listed in every search. You would honestly think some employee could devise a way to detect and remove such things, but no.
I don't even care that the design of the site is 'old', I just want better listings.
Stop by the comment section of the NYTimes' Facebook page sometime. Now that people can't read the articles without paying, the fights start off of the headline alone.
I subscribe, so I see the NYT's on-site comments, which are of far better quality.
In principle, I'm with you. Problem, though, is that even with subscriptions Google plus a million other crap companies are getting my clicks, and I still get Taboola shite padded after articles. So I cancelled my subscription to a high-profile newspaper/site just the other day. Quality journalism is not compatible with that shit for me as a matter of principle.
I'm not sure why utility frameworks are so popular. It seems like Sass solves most of the problems of vanilla CSS. Writing Sass is not only quicker and more powerful than regular CSS, but you can also create your own utility classes very easily with loops.
Moving CSS into HTML does not makes much sense either, as it's far stylistically cleaner to separate CSS and HTML into their respective files.
Plus, if you have two elements with the same or similar styling, re-writing all those utility classes over and over seems extremely cumbersome. Why not just write the class name and use it everywhere it needs to be used? .button or .button-primary is far simpler than writing out inline CSS over and over again.
> Plus, if you have two elements with the same or similar styling, re-writing all those utility classes over and over seems extremely cumbersome
Tailwind doesn't really work that well on static websites, or apps that have markup that you have to repeat all over. It is supposed to be used with components.
If you have a button, it should be its own component, rather than something that you have to copy-paste around.
Of course, you can use @apply to merge Tailwind classes into CSS Components, but it kinda negates the benefits of functional CSS.
-
> Moving CSS into HTML does not makes much sense either, as it's far stylistically cleaner to separate CSS and HTML into their respective files.
The "separation of concerns" idea is still here, but the idea is that HTML+JS is the "presentation", while the "content" comes in the form of JSON (or any kind of object, if you're using it in the backend).
Without this conceptual shift, it really doesn't make sense to use Tailwind.
I've been making an app with React Native and react-native-svg and even though react-native-svg supports transformations, I've had to do a lot of transforms with trigonometry (i.e. rotating a shape around a center point, then getting the new bounding box, which requires things such as Math.atan2).
It's made me really appreciate 1. how much easier front end web development is and 2. how far we've gotten. I cannot tell you how much I appreciate web methods like getBoundingClientRect() or element.closest(), and how easy it is to make animations with CSS and move things around with transforms.
I mean, CSS transforms aren't really that useful for regular static layout webpages, so people didn't mostly need them.
Probably the main thing they're most useful for is animation, and people just used jQuery/JavaScript for that instead, which could do most of what you'd want, if a little clunky.
If you're genuinely curious, The CSS Zen Garden[1] is a great testimony of what people was able to accomplish with the the limitations of CSS2 while keeping support for IE6. That meant: A limited number of fonts, 1 channel transparency, no flexbox or grid for layouts, just floats and positioning. Fun times.
They used Flash. You can now do everything you could do in Flash, with CSS[0]. There's even a few GUI tools[1] for CSS where you don't have to figure out the code:
> You can now do everything you could do in Flash, with CSS.
AND JavaScript.
With Flash, you just needed to know Flash. With HTML5, you need to know a whole lot more about DOM manipulation. If you're animating SVGs, that has its own markup and learning curve.
Flash could also do 3D animation, which CSS cannot. You need to know WebGL and a library like three.js for that to be workable.
By far the best WYSIWIG animation tool I've used is Tumult Hype for Mac. It handles the creation of all the JS-based animation triggers through the GUI. I hope there will be a WebGL version of this that is as easy to use.
> Flash could also do 3D animation, which CSS cannot
Saw a few Codepens over the years[0] where people managed to rotate 3D cubes, all done entirely with CSS. Of course if you needed to interact with the cube you would need JS, but 3D can be achieved with CSS alone, it's just a very hacky way of doing it.
That article is about rotating 2-D shapes on the z-axis (3-D plane).
An image of a cube in an HTML document will look like 3D without any transforms applied. However if you try to rotate that image on the Z-axis, it will warp, clearly showing that it is still a 2D object. There are other necessary aspects of 3D such as camera angles and dynamic light and shadows, but that's outside the scope of what you'd expect to be supported in the official CSS spec.
HTML and CSS don't support 3D shape manipulation and motion. WebGL is needed for that.
However, Flash was really easy to get into. You didn't need any programming whatsoever if all you wanted was a vector cartoon. And you did need to copy-paste some ActionScript if you wanted a fancy-looking navigation bar. Current web lacks this ease of authoring, so I wouldn't say "you can now do everything you could do in Flash".
Flash also felt more like a proper application framework. Web still feels like you're working with an extremely advanced word processor.
I like HTML tables but getting them to do what you want can really be tricky.
Check out my table: https://caldwell.org/projects/data/city-index