Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
css quick maffs
so you did this:
.foo:hover {
transform: scale(1.1);
}
and now ugly scrollbar is there when the element is scaled.
No, don't do overflow: hidden. There's a better way. Instead, do this:
.container {
padding: 1rem;
box-sizing: border-box;
}
the element total width is calculated based on the width of its content. That's true unless you specified width and height explicitly (if you did so, you're a doofus, I'm sorry).
Scaling makes content somewhat larger. With border-box, paddings work differently with the total width.
By default, if you set width to say 100px, and paddings are 20px, total width will be 140px — it's your 100px of content plus two paddings of 20px. width property set the width of the content, not the total width.
With border-box, width property sets the total width. So if you set width to 100px and paddings to 20px, total width would be 100px, just like you set it, and content will be 60px wide — it's 100px minus 20px times two.
The key part is it doesn't end with explicit width. The algorithm remains. When some node is rendered, its total width is calculated. When you use border-box, the total width will stay the same even if your content grows by some value that is less than your paddings. So, your content was 100px, you scaled it, and it became 110px. Well, then that extra 10px will be subtracted from your paddings, and they will be 15px each instead of 20px.
No more ugly scroll bar. Yaaay!
aight bye8 -
WTH...
While styling some frontend stuff with LESS, I experienced that on one page template the <header> was not displaying the given line-height eventhough the whole fscking code was 1:1 identical with the other template in which everything was fine. I checked EVERYTHING... caching, URL, source, classes, open / wrong tags, HEAD, ... I even did a diff compare. NO FSCKING DIFFERENCE!
After one hour of pulling out hair I suddenly saw that in the faulty template file 2 lines were missing:
<!DOCTYPE html>
<html lang="devRantLang">
WHOEVER DID THIS: YOU ARE FSCKING STUPID!!! (it was me...)7 -
So my company wanted a view in view look on their website. So it would look like a black background with a while box in the middle, right?
Well, the devs apparently thought that screens were capped height! On my monitor, the box is less than half the height, but since it stretches the width, the image got larger. So my screen has a scrollbar, and the actually useful part also has a scrollbar, with a shitton of space below!
If that didn't make sense, see crappy drawing of what I see...(painted on Phone). The dashes are the hidden parts that I can't see because of the window!
2 -
The Zen Of Ripping Off Airtable:
(patterned after The Zen Of Python. For all those shamelessly copying airtables basic functionality)
*Columns can be *reordered* for visual priority and ease of use.
* Rows are purely presentational, and mostly for grouping and formatting.
* Data cells are objects in their own right, so they can control their own rendering, and formatting.
* Columns (as objects) are where linkages and other column specific data are stored.
* Rows (as objects) are where row specific data (full-row formatting) are stored.
* Rows are views or references *into* columns which hold references to the actual data cells
* Tables are meant for managing and structuring *small* amounts of data (less than 10k rows) per table.
* Just as you might do "=A1:A5" to reference a cell range in google or excel, you might do "opt(table1:columnN)" in a column header to create a 'type' for the cells in that column.
* An enumeration is a table with a single column, useful for doing the equivalent of airtables options and tags. You will never be able to decide if it should be stored on a specific column, on a specific table for ease of reuse, or separately where it and its brothers will visually clutter your list of tables. Take a shot if you are here.
* Typing or linking a column should be accomplishable first through a command-driven type language, held in column headers and cells as text.
* Take a shot if you somehow ended up creating any of the following: an FSM, a custom regex parser, a new programming language.
* A good structuring system gives us options or tags (multiple select), selections (single select), and many other datatypes and should be first, programmatically available through a simple command-driven language like how commands are done in datacells in excel or google sheets.
* Columns are a means to organize data cells, and set constraints and formatting on an entire range.
* Row height, can be overridden by the settings of a cell. If a cell overrides the row and column render/graphics settings, then it must be drawn last--drawing over the default grid.
* The header of a column is itself a datacell.
* Columns have no order among themselves. Order is purely presentational, and stored on the table itself.
* The last statement is because this allows us to pluck individual columns out of tables for specialized views.
*Very* fast scrolling on large datasets, with row and cell height variability is complicated. Thinking about it makes me want to drink. You should drink too before you embark on implementing it.
* Wherever possible, don't use a database.
If you're thinking about using a database, see the previous koan.
* If you use a database, expect to pick and choose among column-oriented stores, and json, while factoring for platform support, api support, whether you want your front-end users to be forced to install and setup a full database,
and if not, what file-based .so or .dll database engine is out there that also supports video, audio, images, and custom types.
* For each time you ignore one of these nuggets of wisdom, take a shot, question your sanity, quit halfway, and then write another koan about what you learned.
* If you do not have liquor on hand, for each time you would take a shot, spank yourself on the ass. For those who think this is a reward, for each time you would spank yourself on the ass, instead *don't* spank yourself on the ass.
* Take a sip if you *definitely* wildly misused terms from OOP, MVP, and spreadsheets.5 -
min-height: calc(100% - 1rem)
AAAAA REEEEEEEEE WHAT ARE YOU DOINGGGGGGGGGGG IF YOU DONT UNDERSTAND CSS DONT USE ITTTTTTTTTTT
so much pain / time could be saved if devs just used a damn framework (i don't care, bootstrap or tailwind, have at it which is better, i could care less). stop trying to be fancy, like this above, because its ultimately wrong. sorry i'm not sorry7 -
Comparing human size to a dinosaur on a scale of height is the dumbest thing I most often see online.
Yeah well, 65 million years ago, there was more oxygen on earth than today, which means we would be larger as well (if we existed at that time).
A majority of that oxygen got burned up because of them meteors that wiped out every land mammal, which is why we are now the size that we are. Less oxygen means lesser sized creatures.
Dumbass comparison.
2.13 -
Today I fought against a monster named as CSS and I sort of won.
I am having a problem in that the grid layout don't work with the scroll bar (overflow)
After hours of trying thing out I remember that I am just creating the prove of concept that the system can actually be build.
I said "Hey this is just a prototype, it doesn't need to be pixel perfect, and finally use height in css".
I really appreciate it if anyone can advise me on less dirty method. Here is the source code
https://jsfiddle.net/rc0f9t5j/
The input box should stay at the button no matter how much text the container have. The fiddle have the intended behavior.4
Top Tags
Weekly Rant
View