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 -
I messed up . My testicle problem isn't going anywhere soon, and one ultrasound report already says could be a tumor. 2nd test will be done in 10 days, but if its a cancer, then my life just got officially reduced by 20 years and practically reduced to this year, coz fuck this life if I can't be normal.
I already
- haven't ever got love or chance to kiss a loved one,
-have a super beta personality and never got enough respect from anyone
- am not having any friends at current stage
- shifted from my native location and living in a new isolated place
- got ugly ass looks, height and weight to never feel happy
and now with a probable tumor coming which would lead to hair lossing chemo sesssions, ball removal surgery and followed by lifelong of infertility, I would prefer death over a meaningless loveless life
I am so devastated as to why i got into this state. nothing has been going good for lalst 2 years.
- i left my previous company which had a great culture, less work but asked for relocation . i joined this current company with horrible work culture, 3 days working and overload of stress
- I had fights with my friends and don't have any friends anymore
- i broke my arm this year.
- i caught terrible cough last year which took time but got better
- there have been constant bickering and fights among parents for 100s of reason . no more than 2 days goes by when any 2/3 people of our nucleolus family is not fighting
- and countless more shitty stuff
I was on a path to become a mediocre okayish guy. i was having a decent salary , learning new stuff everyday, fighting new task battles, becoming a beeter dev amd aiming to go for senior dev/TL role, buying car l, new home and planning for marriage, ...
but nope. God has some other plans.. some ugly and cruel plans, for the guys who don't even had the chance to live a villionous life.
I wonder how that guy from my scchool who used to date so many girls is doing now. God must be very angry with his Casanova behaviour. Oh wait, that asshole is earning 160k and married her gf from last 8 years!
i wonder how that gu from my homies is doing who used to hookup with random girls every weekend. Oh wait, he got promoted to TL and bought a new home!
I wonder how my friend who smokes 4 cigs a day and drinks beer every night is doing. Oh, he's going on international trips every month , earning 600k and have a clean medical record!
yepp such a great decision maker that guy on the top is . Let me connect with him soon and ask these questions , will let you know what he says. :/6 -
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 -
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 -
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.7 -
Okay, summary of previous episodes:
1. Worked out a simple syntax to convert markdown into hashes/dictionaries, which is useful for say writing the data in a readable format and then generating a structured representation from it, like say JSON.
2. Added a preprocessor so I could declare and insert variables in the text, and soon enough realized that this was kinda useful for writing code, not just data. I went a little crazy on it and wound up assembling a simple app from this, just a bunch of stuff I wanted to share with friends, all packed into a single output html file so they could just run it from the browser with no setup.
3. I figured I might as well go all the way and turn this into a full-blown RPG for shits and giggles. First step was testing if I could do some simple sprites with SVG to see how far I could realistically get in the graphics department.
Now, the big problem with the last point is that using Inkscape to convert spritesheets into SVG was bit of a trouble, mostly because I am not very good at Inkscape. But I'm just doing very basic pixel art, so my thought process was maybe I can do this myself -- have a small tool handle the spritesheet to SVG conversion. And well... I did just that ;>
# pixel-to-svg:
- Input path-to-image, size.
- grep non-transparent pixels.
- Group pixels into 'islands' when they are horizontally or vertically adjacent.
- For each island, convert each pixel into *four* points because blocks:
· * (px*2+0, py*2+0), (px*2+1, py*2+0), (px*2+1, py*2+1), (px*2+0, py*2+1).
· * Each of the four generated coordinates gets saved to a hash unique to that island, where {coord: index}.
- Now walk that quad-ified output, and for each point, determine whether they are a corner. This is very wordy, but actually quite simple:
· * If a point immediately above (px, py-1) or below (px, py+1) this point doesn't exist in the coord hash, then you know it's either top or bottom side. You can determine whether they are right (px+1, py) or left (px-1, py) the same way.
· * A point is an outer corner if (top || bottom) && (left || right).
· * A point is an inner corner if ! ((top || bottom) && (left || right)) AND there is at least _one_ empty diagonal (TR, TL, BR, BL) adjacent to it, eg: (px+1, py+1) is not in the coord hash.
· * We take note of which direction (top, left, bottom, right) every outer or inner corner has, and every other point is discarded. Yes.
Finally, we connect the corners of each island to make a series of SVG paths:
- Get starting point, remember starting position. Keep the point in the coord hash, we want to check against it.
- Convert (px, py) back to non-quadriplied coords. Remember how I made four points from each pixel?
. * {px = px*0.5 + (px & 1)*0.5} will transform the coords from quadriple back to actual pixel space.
· * We do this for all coordinates we emit to the SVG path.
- We're on the first point of a shape, so emit "M${px} ${py}" or "m${dx} ${dy}", depending on whether absolute or relative positioning would take up less characters.
· * Delta (dx, dy) is just (last_position - point).
- We walk from the starting point towards the next:
· * Each corner has only two possible directions because corners.
· * We always begin with clockwise direction, and invert it if it would make us go backwards.
· * Iter in given direction until you find next corner.
· * Get new point, delete it from the coord hash, then get delta (last_position - new_point).
· * Emit "v${dy}" OR "h${dx}", depending on which direction we moved in.
· * Repeat until we arrive back at the start, at which point you just emit 'Z' to close the shape.
· * If there are still points in the coord hash, then just get the first one and keep going in the __inverse__ direction, else stop.
I'm simplifying here and there for the sake of """brevity""", but hopefully you get the picture: this fills out the `d` (for 'definition') of a <path/>. Been testing this a bit, likely I've missed certain edge cases but it seems to be working alright for the spritesheets I had, so me is happiee.
Elephant: this only works with bitmaps -- my entire idea was just adding cute little icons and calling it a day, but now... well, now I'm actually invested. I can _probably_ support full color, I'm just not sure what would be a somewhat efficient way to go about it... but it *is* possible.
Anyway, here's first output for retoori maybe uuuh mystery svg tag what could it be?? <svg viewBox="0 0 8 8" height="16" width="16"><path d="M0 2h1v-1h2v1h2v-1h2v1h1v3h-1v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1h-1Z" fill="#B01030" stroke="#101010" stroke-width="0.2" paint-order="stroke"/></svg>3
Top Tags
Weekly Rant
View