Webdev these days:

*{
display: flex;
}

Oke so this just happened...

Spent 30 minutes figuring out why the f**k a div was vertically centered within another one.

Apparently margin:auto within a display: flex not only centers horizontally but also vertically.

I remember the days when i spent hours vertically centering sh*t. What universe are we in?

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

Next time you write CSS

display: flex;

You're welcome!

Remember those margin: auto?

So the CSS code I'm working on has a terrible vertical alignment problem on every browser except IE11. Using `display: flex` =_=

I'm not joking this alignment glitch is driving me nuts! Deadline tomorrow.

body .arms { display: flex; }

I'm a front end developer who knows Ruby on rails and Node Js, I still call myself a freaking FRONT END DEVELOPER because I don't have enough knowledge of the required concepts to trust my skill in a complex backend project.

How the fuck there are so many full stack developers who lack shit tons of knowledge in both specialties! And worst of those are asp.net "FULLSTACK DEVS" that can't write JavaScript without copying and pasting from SO and don't know that display flex is a thing!

If only it were that easy...

...

display: flex;
align-items: center;
justify-content: center;

Done!

😁

My life as a web developer changed forever when I realized that 80% of my layout problems can be solved by adding "display: flex;" to literally everything in sight.

What should I do to practice being a "good coder" vs a "code Googler" who slaps other people's code into the site just because "it's enough to get the damn thing working"?

I feel really overwhelmed with all that Ive learned thus far. At this point I feel width with know depth when it comes to my knowledge of websites.

I've been messing around with html/css/js for a while and played with plenty of other languages,pre-processors, frameworks, etc. I never went to school for programming and have done work for small businesses independently for some time. Most of what I know comes from codecademy treehouse and similar sites. I can refer to Google on a lot of things but I feel like there are habits that I should be implementing so I don't have to re-do things later. I love the book apart series but I still feel like it's missing the foundational knowledge that I'm looking for.

After all of the time I've spent going through courses I feel like my experiences have given me solutions to build a few things and now I'm just jamming those solutions onto whatever I can until something I like comes on to the browser.

It's really easy to sit down and bang my head against the keyboard until something comes out that looks the way I want it to. However, I know there is way more going on that could help me make better decisions. I just feel like I'm missing something. Maybe it's experience, or maybe it's just the lack of commroddery from working alone and not being able to approach problems with a team.

I hate pulling up my css file and feeling like it's rubbish, and feeling like I don't completely understand things like flex, or display, or position. I've been pushing at this for a while but I don't think I've found a resource that has really made me feel like I'm anywhere close to being a competent coder.

There are tons of watch and learn and do type classes that show you how to make stuff, but I guess what I want to know now is why we make it that way.

At some point do you just sit down and read the MSN start to finish?

I wonder sometimes if my brain has been reprogrammed because I grew up in Google world and don't actually have to solve anything for myself. I read about a guy who locked himself away for hours with books on code and he just sat there and wrote his code on paper until he was confident that he was getting it right.

Using display: flex; for my disorders

Doing the impossible...

.work-life-balance {
display: flex;
}

Spent a couple of hours trying to figure out why my flexbox css wasn't rendering as suspected. Finally discovered that the html tag I tried to apply it to didn't support display: flex;

Gah.

I recently got into an argument with a random person on internet about the new Corsair XENEON FLEX OLED, the new fancy one that you can make curved or flat…
In my opinion it doesn't make any sense, curved is better, in particular with a 45" display, so it's a cool technology but useless in this case.

Apparently this guy thinks "for work is better flat, for gaming curved".
It made me thinking… really?
There is someone out there (and maybe here) that uses huge flat monitors or when have 2 puts them parallels to each other and not turned towards himself at an angle?

It seemed a random bullshit, but maybe I could find some valid arguments why "flat is better for work" or not. 🤔

I want some help with media queries I am new and learning so please don't bash me up :

Here is my css code I want to know how to solve the issue :

/* About Section */

.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.abouttext
{
 position: relative;
 padding: 0 50px;
 height: inherit;
}

.abouttext h1
{
position: relative;
left: 230px;
}

.abouttext img{
width:20vw;
position: absolute;
top:50px;
}

.aboutlist
{
width:50%;
}

ol
{
list-style: none;
color: #e0501b;
}

ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}

li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}

li span
{
float: right;
  position: absolute;
 line-height: 25px;
 font-weight: 600;
}