Lol I’m just glad I’m not the only one.
I know I’m probably doing well because I already got a raise and stuff but for me a lot of my self worth comes from work unfortunately.
1 Like
I don’t know if I envy or pity you guys. I work way too much, mostly because I wear too many hats at a small but growing company. Most days I struggle to actually get a good 2-3 hour session of programming done, so when most people are done I’m like “finally, time to work”.
Sounds bad, but I do love the programming part and I’m also making real change (well, to the company and our customers and their customers, not world hunger) so I mostly like where I’m at.
2 Likes
That used to be me when we were busy at my previous job. Spend all day herding cats then start programming at 5. I liked it better than this.
1 Like
I gotta get one of these wfh jobs and it doesn’t have to pay much because I’ll just keep installing solar anyway.
I like days like yesterday where I run into an interesting technical problem to solve that also enhances my understanding of some concept. I was trying to build a service mesh with consul connect across a few different machines and the networking problems it presented were quite interesting and took up a large chunk of my day.
Then ofc my boss has to tell me the problem was much simpler than I made it (it wasn’t) and pretty much accused me of building something that couldn’t have worked. So I had to show him that it does indeed work, and explain it. This is the same guy that thought because I advertised a loopback address on my consul cluster that I could connect to the same node on another machine using the same loopback address it advertised - which of course will not work.
Like lol no. It’s a loopback address. It won’t work on another machine.
I think a big part of my job is just making my boss understand things and it gets really frustrating. Honestly thinking of putting in another year here and peacing out but I’m not sure if I’ll make it that long, or if it would even be prudent to stay that long (feel I’m stagnating).
It’s honestly not as great as it sounds in my opinion. Roll out of bed and you’re basically at work. Ugh. I want a clean separation between work and home.
uh its pretty fucking great
2 Likes
Put me down for pretty fucking great. Living with my GF, who has a similar, but not programming-related position at the same company, I’m still as up to date with everything as ever, plus I don’t need to wear pants. No people walking up to me, and collaborating 1-1 works much better with screensharing, anyway.
I’ve actually never worked for the man before, much less in an office, so this turned out better than expected. Looking forward to leave this miserable weather again as soon as it’s reasonable again as we moved to fully remote. Maybe Malta again for a year or so.
1 Like
@microbet could equip his van as necessary and call that his office, creating a hard border between home and work.
2 Likes
I’ve been working on side projects pretty much every time I’ve been camping. Equipment is a laptop and a little inverter so I can keep it charged. I mentioned recently in the camping thread that I was with a bunch of youngsters who sleep all morning.
I see this sentiment from a lot of programmers and it kind of confuses me. Is it really a matter of not understanding CSS, or is it more a dislike of layout and design work? Because CSS itself is several orders of magnitude less complicated than any programming language.
1 Like
CSS is not conceptually difficult, but you gotta know what your options are and then either trial and error a lot or just know what to expect on different screens and platforms. It’s like a language that’s all knowing syntax and no logic. I guess it’s the logic that’s complicated, but it doesn’t necessarily take the most time and work.
I’m not that good at any of this, but I end up spending way more time figuring out devops and design problems than programming problems. Devops is also not complicated in the way programming is, but it’s a lot to know and remember.
1 Like
Here’s maybe 2% of the CSS on our fairly simple react site. If my goal was be to recreate this from scratch I have absolutely zero idea which markup to pick, when to use flex-box, grid-layout, etc. How to handle responsive. When to use a background image instead of real image - and a million other things like that.
import {createGlobalStyle} from 'styled-components'
import {device} from 'components/Device'
const wrapperWidth = 1368;
const tabletWrapperWidth = 720;
const mobileWrapperWidth = 320;
export const Grid = createGlobalStyle`
/* default .grid has grid gap */
.grid {
/* begin IE 11 hacks */
display:-ms-grid;
-ms-grid-columns: (1fr)[12];
-ms-grid-rows: auto;
/* end IE 11 hacks */
display:grid;
box-sizing:border-box;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
width:${ (wrapperWidth + 30) / wrapperWidth * 100 }%;
margin-left:${ -15 / wrapperWidth * 100 }%;
/* spans */
${ props => {
let spans = ''
for (let i=1; i<=12; i++) {
/* ie first */
for ( let j=0; j<(Math.floor(12/i)); j++ ) {
spans += `
.span-${ i }:nth-child(${ j+1 }) {
-ms-grid-column:${ i*j+1 };
}
`
}
/* ie specific classes to help make layout easier */
spans += `
.-ms-force-row-${ i } {
-ms-grid-row:${ i };
}
.-ms-force-column-${ i } {
-ms-grid-column:${ i };
}
`
spans += `
.span-${ i } {
-ms-grid-column-span:${ i };
grid-column-end: span ${ i };
box-sizing:border-box;
padding-left:${ 15/(wrapperWidth+30) * 12/i * 100 }%;
padding-right:${ 15/(wrapperWidth+30) * 12/i * 100 }%;
}
`
}
return spans
}}
/* rowspans */
${ props => {
let rowspans = ''
for (let i=1; i<5; i++) {
rowspans += `
.rowspan-${i} {
-ms-grid-row-span: ${i};
grid-row-end: span ${i};
}
`
}
return rowspans
}}
}
/* no gap variants */
.grid, .t-grid, .m-grid {
&.no-gap {
width:100%;
margin-left:0;
${ props => {
let nogaps = ''
for (let i=1; i<=12; i++) {
nogaps += `
.span-${ i }, .t-span-${ i }, .m-span-${ i } {
padding-left:0;
padding-right:0;
}
`
}
return nogaps
}}
}
}
/* remove padding from nested spans and grids */
[class*=span] [class*=span] {
padding-left:0;
padding-right:0;
}
[class*=grid] [class*=grid] {
padding-left:0;
padding-right:0;
width:100%;
margin-left:0;
}
.wrapper {
box-sizing:border-box;
max-width:${ wrapperWidth + 72 }px;
width:100%;
padding-left:calc(36rem/16);
padding-right:calc(36rem/16);
&.no-padding {
padding-left:0;
padding-right:0;
}
margin-left:auto;
margin-right:auto;
}
@media ${ device.tablet } {
.wrapper {
padding-left: calc(24rem/16);
padding-right: calc(24rem/16);
&.t-no-padding {
padding-left:0;
padding-right:0;
}
}
.t-grid {
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
.t-span-1, .t-grid .t-span-1 {
grid-column-end: span 1 !important;
}
}
/* redefine spans */
.grid, .t-grid {
width:${ (tabletWrapperWidth + 20) / tabletWrapperWidth * 100 }%;
margin-left:${ -10 / tabletWrapperWidth * 100 }%;
${ props => {
let spans = ''
for (let i=1; i<=12; i++) {
/* ie first */
for ( let j=0; j<(Math.ceil(12/i)); j++ ) {
spans += `
.t-span-${ i }:nth-child(${ j+1 }) {
-ms-grid-column:${ i*j+1 } !important;
}
`
}
/* ie specific classes to help make layout easier */
spans += `
.-t-ms-force-row-${ i } {
-ms-grid-row:${ i } !important;
}
.-t-ms-force-column-${ i } {
-ms-grid-column:${ i } !important;
}
`
spans += `
.t-span-${ i } {
-ms-grid-column-span:${ i } !important;
grid-column-end: span ${ i } !important;
}
`
spans += `
.span-${ i }, .t-span-${ i } {
padding-left:${ 10/(tabletWrapperWidth+20) * 12/i * 100 }%;
padding-right:${ 10/(tabletWrapperWidth+20) * 12/i * 100 }%;
}
`
}
return spans
}}
/* rowspans */
${ props => {
let rowspans = ''
for (let i=1; i<5; i++) {
rowspans += `
.t-rowspan-${i} {
grid-row-end: span ${i} !important;
}
`
}
return rowspans
}}
}
}
/* mobile breakpoint */
@media ${ device.mobile } {
.grid, .t-grid, .m-grid {
grid-template-columns: 1fr 1fr;
width:100%;
margin-left:0;
}
.wrapper {
padding-left:${ 15 / mobileWrapperWidth * 100 }%;
padding-right:${ 15 / mobileWrapperWidth * 100 }%;
&.m-no-padding {
padding-left:0;
padding-right:0;
}
}
/* reset desktop / tablet span classes */
.grid {
${ props => {
let resets = ''
for (let i=1; i<=12; i++) {
resets += `
.span-${ i }, .t-span-${ i } {
grid-column-end: span 2 !important;
}
`
}
return resets
}}
}
/* redefine spans */
.grid, .t-grid, .m-grid {
.m-span-1 {
grid-column-end: span 1 !important;
}
.m-span-2 {
grid-column-end: span 2 !important;
}
/* spans */
${ props => {
let spans = ''
for (let i=1; i<=12; i++) {
spans += `
.span-${ i }, .t-span-${ i }, .m-span-${ i } {
padding-left:0;
padding-right:0;
}
`
}
return spans
}}
/* rowspans */
${ props => {
let rowspans = ''
for (let i=1; i<5; i++) {
rowspans += `
.m-rowspan-${i} {
grid-row-end: span ${i} !important;
}
`
}
return rowspans
}}
}
}
const desktopColumnWidth = 319
const desktopTotalWidth = 900
const Content = styled.div`
& > input[type="radio"], label[id^="mobileTabs"]{
display:none;
}
@media ${device.tablet}{
padding:${20/defaultFontSize}rem ${24/defaultFontSize}rem;
}
@media ${device.mobile}{
padding:0;
}
`
const StyledHeading = styled.div`
text-align: center;
padding: 0px 15px;
font-size: 16px;
letter-spacing: 0.1px;
line-height: 26px;
& > p {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.1px;
line-height: 26px;
text-align: center;
}
`;
// TODO - we should move all these exported components to a shared component
export const Heading = ({ children, className }) => (
<StyledHeading className={className}>
{children}
</StyledHeading>
);
const HeaderForSignInRegisterForm = styled.div`
display:none;
@media ${device.mobile}
{
display: flex;
justify-content: center;
background-color:#FAFAFA;
border-radius:3px;
border: 1px solid #DDDDDD;
width:100%;
position:relative;
box-sizing:border-box;
& > p{
width:50%;
text-align:center;
font-size:calc(16rem/16);
color:#666666;
text-decoration:none;
}
.show{
color:#2774AE;
font-weight:bold;
&:after{
content:"";
display:block;
position:absolute;
background-color: #FFD100;
width:50%;
height:5px;
bottom:0;
}
}
}`
const ContentInner = styled.div`
display: flex;
justify-content: center;
padding-bottom:${ 100/defaultFontSize }rem;
width:${ desktopTotalWidth / 1440 * 100 }%;
min-width:750px;
margin:0 auto;
box-sizing:border-box;
.external-accounts {
margin:auto 0;
}
@media ${device.tablet} {
padding-bottom:${ 60/defaultFontSize }rem;
width:100%;
min-width:auto;
}
@media ${device.mobile}{
display:block;
margin:${30/defaultFontSize}rem auto;
padding-bottom:0;
padding-left:${ 15 / 320 * 100 }%;
padding-right:${ 15 / 320 * 100 }%;
}
`
const SignInForm = styled.form`
flex:1 1 ${ desktopColumnWidth / desktopTotalWidth * 100 }%;
`
const SignInDivider = styled.div`
flex:1 1 ${ desktopDividerWidth / desktopTotalWidth * 100 }%;
display:flex;
justify-content: center;
align-items: center;
position:relative;
::after{
content: "";
position: absolute;
top:0;
left:50%;
transform:translateX(-50%);
background:#ccc;
width:1px;
height: 100%;
}
img {
position: absolute;
background-color: #fff;
z-index:${Zindex.zindexOverlaystackOrder1};
transform:translateX(-50%);
left:50%;
top:40%;
}
`
// TODO - we should move all these exported components to a shared component
export const SignInRegisterDiv = styled.div`
flex:1 1 ${ desktopColumnWidth / desktopTotalWidth * 100 }%;
.block-title{
color:${colors.darkGray};
}
}
`
const SigInInnerDiv = styled.div`
line-height:50px;
& input[type=checkbox]{
opacity:0;
:checked + label::after {
content: "";
}
:focus + label::before {
outline: rgb(59, 153, 252) auto 5px;
}
}
label{
position: relative;
padding-left: 10px;
&:before,&:after{
position: absolute;
content: "";
display: inline-block;
}
&:before{
height: 25px;
width: 25px;
border: 1px solid #2774AE;
left: -${20 / defaultFontSize}rem;
top: -${3 / defaultFontSize}rem;
cursor:pointer;
}
&:after {
height: 6px;
width: 12px;
color:#2774AE;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
left: -${14 / defaultFontSize}rem;
top: ${4 / defaultFontSize}rem;
}
}
input[type="checkbox"] + label::after {
content: none;
}
& > a{
text-decoration:none;
float:right;
}`;
export const Label = styled.label`
font-family: Arial;
color: #666666;
margin-bottom: 4px;
`;
export const Button = styled(buttons.FilledBlue)`
display:block;
width: ${props => props.width || "100%"};
text-align:center;
`
const PasswordCheck = styled.div`
position: absolute;
display: inline-block;
right: 20px;
top: 40px;
`
const MoreInfoPosition = styled.div`
display: inline-block;
margin: ${ 4/defaultFontSize }rem;
margin-bottom: 0;
height:1rem;
width:1rem;
`
const MobileGutter = styled.p`
@media ${device.mobile} {
margin: 0 4px;
text-align: left;
}
There’s so much more of this. It’s endless. And it’s all weird.
It’s just so fucking much to learn, including picking what markup to learn. I can learn enough to tweak someone else’s CSS. But it’s gotta be a year or more of constant work with CSS to get to where you could do this on your own.
1 Like
MY EYES, MY EYES
Holy shit that’s atrocious! You need a new front end person.
1 Like
I am so bad at CSS and design that I use a static site generator with templates to get the look and feel for what simple site I’m making, and then just copy paste the generated CSS and tweak it as needed. Fuck doing that from scratch
It probably is. But CSS on a modern react site in the real world with 100s or 1000s of components that supports phone and tablet (and at the time had to support IE-11) is always going to be messy as hell.
lmao CSS is so fucking easy today especially since even my 400k employees company doesn’t support IE at all any more, I’ll never understand people who complain about it. I mean there’s probably more shit to remember in any other language other than HTML where you can get the same shit out of “semantic elements” as putting divs on everything. Oh no I have to assign a color to text, I have to assign a font size, I have to define an area, I mean this is not hard stuff. ¯\(ツ)/¯
Discourse tells me grue already posted this, but here it is again. This will (assuming you don’t need to support some ancient IE version) solve 90% of your layout issues on all platforms. It even fits on a poster, which you can buy from them.
1 Like
Want to emphasize that the nonsense that the admins here go through is not easy, because they’re working with a 3rd party CMS and hacking it more or less. But when you control everything CSS is simple if you don’t fuck it up.