Programming

StrontiumDog · February 11, 2021, 9:53pm

Give [x] absolute position top right to take it out of the flow and you’re left with icon&content which you can then position within the flexbox - row/column, justify, align etc.

bobman0330 · February 11, 2021, 9:54pm

CSS is easier than other programming languages because it’s declarative rather than imperative and lets you program with high-level abstractions. On the other hand, CSS is harder than other programming languages because it’s declarative rather than imperative and lets you program with high-level abstractions.

zikzak · February 11, 2021, 9:56pm

I suspect a lot of the problems with messy CSS is that the people who write it often don’t come from a technical background where the importance of clean, maintainable code was repeatedly beaten into their heads.

grue · February 11, 2021, 9:57pm

Yeah that would take me about 30 seconds with position absolute and justify-content center

StrontiumDog · February 11, 2021, 10:16pm

I used to hate working on CSS - anything less than basic styling was a trial. You knew it could be done but omg this is awful…

Less/Sass, CSS3 and browser dev tools make it fun now.

suzzer99 · February 11, 2021, 10:21pm

Ok thanks. This works on code pen. But I need to try it on our real app.

<div class="alert-box">
  <div class="icon-content-container">
    <div class="icon">[ICON]</div>
    <div class="content">This is some content yeah!</div>
  </div>
  <div class="close-button">X</div>
</div>

.alert-box {
  background-color: yellow;
  padding: calc(1.4375rem) 4.6875% calc(1.1875rem);
}

.icon-content-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.icon {
  position: relative;
  display: block;
  margin: 0px calc(0.9375rem);
}
.content {
  display:block;
}
.close-button {
  position:absolute;
  top: 28px;
  right: 50px;
  display:block;
}

grue · February 11, 2021, 10:33pm

suzzer99:

.alert-box {
  background-color: yellow;
  padding: calc(1.4375rem) 4.6875% calc(1.1875rem);
 // you need position relative here or the X box won't be "anchored"
}

.icon-content-container {
  display: flex;
  flex-direction: row; // this is default and can be deleted
  justify-content: center;
}

.icon {
  position: relative; // dont need this
  display: block; // this is default and can be deleted
  margin: 0px calc(0.9375rem);
}
.content {
  display:block; // this is default and can be deleted
}
.close-button {
  position:absolute;
  top: 28px;
  right: 50px;
  display:block; // dont need this
}

See css is easy

suzzer99 · February 11, 2021, 10:40pm

Right I just need to learn about 1000 more of these rules that are really hard to google (like the position absolute thing) and I’m good to go. Just saying it takes a while and the prospect is daunting. It’s like learning Unix.

Also the position absolute thing works except for mobile, where the X overlaps with the content. I guess I need another empty div to preserve enough space for the X?

grue · February 11, 2021, 10:43pm

Should either set that right to less in a media query or just use percents instead of px

suzzer99 · February 11, 2021, 10:48pm

padding-right:25px on the icon-content-container seems to make it happy

Thanks guys - it feels good to finally clear up this low priority bug. Also makes it look like I’m doing something.

synapse · February 12, 2021, 12:16am

It seems practically everyone ITT seems to lean front end! It’s surreal to be a programmer looking at a programming thread and wondering what everyone is talking about.

grue · February 12, 2021, 12:55am

REAL programmers make queries to databases and respond with JSON imo

synapse · February 12, 2021, 1:56am

I’ve actually seen^H^H^H fixed code where a stored procedure returned xml created by concatenating strings and columns together!

VoteForSocialists · February 12, 2021, 6:06am

db programmers: “fuck both of you”

synapse · February 12, 2021, 5:18pm

My very first job was to make some enhancements to a ledger reconciliation batch process which was written as a giant pl/sql blob of around 10k lines and a proC module in Oracle.
Fun times.

suzzer99 · February 12, 2021, 6:32pm

By the way, in case others (like myself) are unfamiliar or uncomfortable with Cauchy’s interlace theorem, here’s a version of the proof that does not use it:

Let S be the sqrt(n)-eigenspace of the matrix A_n. Then S has dimension 2^(n-1). Consider a large principal submatrix B of A_n. We wish to lower bound its spectral norm (maximum eigenvalue). This is the same as maximizing over vectors x with norm 1. But it’s not hard to see that this maximum as the same as the maximum of over unit vectors x that have a 0 entry on indices corresponding to rows/columns that are not in B. Let L by the subspace of all such vectors with 0 entries on those indices. Then L has dimension at least 2^(n-1)+1, since B uses at least that many rows/columns. It follows that the intersection of L with S must have dimension at least 1. Thus there is a unit vector x that is in both L and S, meaning it has 0s on entries corresponding to rows/columns not in B but it is a sqrt(n)-eigenvector of A_n. This gives a lower bound of sqrt(n) on the spectral norm of B, as desired.

Math is a lot harder than programming right? I feel reasonably confident I could remove the jargon and explain any high-level programming concept to a lay person in a few minutes, to where they at least had a conceptual grasp. But I’m not sure I could understand this in a year of trying, with expert help.

ChipsAhoy · February 12, 2021, 6:55pm

ok, how do neural networks work? How do I write one? How do I know if it is good?

jmakin · February 12, 2021, 6:59pm

I have studied this - but good luck trying to get me to explain it these days

suzzer99 · February 12, 2021, 7:04pm

Lol I’m getting canceled by the anti-cancel-culture mob on Hacker News.

zikzak · February 12, 2021, 7:05pm

Dude, that’s easy. Put the eigenspace in a flexbox and use absolute positioning on the subspace vectors.