Fuckfuckfuckfuckfuckfuckfuck

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.

Friend asked me to help with his HTML5 form validation. His back-end work was decent, but whoever did the front-end... Oh boy.

They used media queries for mobile etc, which was fine. Until I saw what the queries did. Instead of resizing the form accordingly, they hide the visible one and make another one visible.

WHY WOULD YOU DO THIS

My friend a backend dev who manages a little UI by using bootstrap themes. One Saturday he calls me up says "Dude, I need your help, we had a demo and the CEO decides to demo the project to prospective people on Internet Explorer. It looked alright on Chrome but the whole UI has gone haywire on IE. Need your help asap. Join me on screen share". I checkout his HTML code and find a file where the link tag is inside the body tag. I ask him to move that into head tag as in wherever the master template is, I tell him to change the doctype, add responsive meta tags, and even after all these, it just doesn't render bootstraps media queries. After beating my head for around 15mins, I see a drop-down caret in IE's inspector with 7 besides it, someone had set the compatibility mode to IE7. Why in the world would someone set an IE11 to IE7.
My friend heaved a sigh of relief and walked to his boss to show that he isn't a bad developer, his boss is just a bad user.

Hey Designer/Developers, I got a question for you. Yeah, you 👇🏽

When working on a project codebase that is expected to grow and evolve heavily. How do you usually split up your CSS (SASS, LESS etc) in a good way to take into account all the different device sizes?

I am not asking how it is done but more about the design of the code. This would be for a production codebase to be released.

Do you use large blocks broken down by media...

(Media width) {

~site code

}

(Other media) {

~same site code with diff sizes

}

Or do you do individual media queries inside css classes...

.className {

(Media size) {

}

(Other media) {

}

}

Or a mixture of both?

If it is a mixture of both then how do you decide which way to go about structuring the code.

I have been endeavouring to greatly improve my CSS and have done so. But this question has been bugging me. Both sides seem to be a bit sloppy and my programmer side is fighting the repeatitipve code.

Note: all code examples are gibberish and only intended for visualization.

Two of my team members were trying to make a website responsive for over an hour. They tested everything. They checked the JavaScript, checked their CSS media queries, tried everything but it just wouldn't work on mobile browsers.

So as usual they decided it was "impossible" due to "WordPress constraints" and told me that it would work on the browser but not desktop.

I just added the meta viewport tag. It literally took 10 seconds. It worked.

I hate people who give up easily. Just hate it.

media queries in css are awesome.

My colleague has spent 3 days writing a responsive menu that has 5 items in it with no nesting that needs to move to a sidebar on mobiles.

I think that should be maximum 30 lines html and max 40 lines css. Or at least around that sort of area.

He has 150 lines html, 200 lines css, and is not even finished yet. He also made 2 entirely different menus for different screen sizes instead of using media queries...

The reasoning from all my colleagues is that its because the menu needs to use css grid (it doesn't they just randomly decided we can't use flex, float or online).

Working with people that give reasons for their garbage code that literally makes no sense every day gives me a headache....

Going through site after senior dev asked front end dev to go through it and tweak it for design and better responsiveness(he and I are back end oriented and have no design skillz).

Things are breaking visually on almost all devices.

Client sends an email saying it suddenly looks terrible on mobile and wants to know what happened. I let him know we were actively working on things and it should be good in a few minutes.

Looking over CSS...there are "!important" tags EVERYWHERE, media queries are in the wrong order and have "!important" attached to almost everything so the largest screen size settings win.

Why do I even bother?

Finally I was able to look into css grids in more detail and gotta say it's impressive, also "grid-template-areas" made me chuckle for a bit, at how unusual and easy you can define layouts (even compatible with media queries!), which are also heavily obvious and readable, reminds me of the old games where characters were just symbols.

Me: ill use media queries to make our site responsive (site is not responsive before i got here)
Me: code ...
Me: code ...
Me: done, created a PR
Senior: review... removes all the code and media queries and said. We dont have to use media queries because bootstrap is already responsive.

- BULLSHIT! We still need media queries!!!!!

You probably hate bootstrap and jQuery, as I do, but if you block CDN paths for these libraries, you'd probably never see the internet as it was intended.

Side note: web devs, please learn media queries, vm and em for font sizes, and etc. You really don't need complicated stuff, browsers already have your back, I promise.

Gmail: We will be supporting css media queries from now on.

Users: Bitch please, we still use Outlook as our default email app.

Another gem from the cunt I used to call my senior.

.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 7pt !important; line-height: 30px !important; font-weight: normal !important; }
.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 6pt !important; }
.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 7pt !important; }

These are all on the same level (not in media queries) and only a couple of other lines of css between them.

I swear this jackass just wanted to watch the world burn.

My former senior developer thought that including script tags for each JavaScript function you write is efficient. For example: contact function will have contact.js, vacancy function will have vacancy.js. FYI he doesn't merge them in production. What's more shocking was that my project manager thought was the same.

This also applies to CSS when using media queries.

I had six items that I wanted to centre horizontally via CSS. Problem was that depending on the viewport width, the items could either take one, two, three or six lines. But the items broke to the next line like text so that e.g. the top line had five items and the second only one. What I wanted was three items each in this case.

Finally, I came up with a hack of media queries to make the parent container just so wide that six, three, two or one item would fit horizontally, and then centre the parent container with margin left/right auto.

The moment I forgot media queries

I want to talk about media queries.

THERE ARE SO MANY FUCKING VIEWPORTS TO SUPPORT.

Seriously, why hasn't this shit been standardised; why does every new device *have* to be different dimensions from the rest?

Couldn't we have a S, M and LG scale for mobile, tablet and desktop????

Then we've got the fucking pleasure of DPR, as if it wasn't hard enough to be comprehensive for your shitty iPhone 5s.

Fuck you.

The moment when you realize that you have to at least double your media queries to guarantee a good result for that little element at the end of your page that no one really needs... :^(

There are so many.. but probably my worst was when I was building this project and optimizing it for mobile but for some reason when in mobile view, there was a slight white line on the right side when swiping right or zooming out (shouldnt be able to zoom out either).. checked all the media queries and viewport code and everything was normal so it drove me crazy for a few hours. Turns out, I had 1 little element slightly wider than the viewport but you couldnt tell by looking at it xD fixed the css, but still so frustrating.

It's CSS quick maffs time! Consider the following code:

<div class='container flex'>
<nav class='menu flex'>
<a href='#'>Menu item 1</a>
(arbitrary amount of links)
</nav>
<button type='button'>Sign in</button>
</div>

You want the layout to look like a horizontally scrolling, single line menu with a Sign in button to the right. Both container and menu are flex containers. So, here's the code for the menu:

.menu {
overflow: auto;
}

The problem is, as there is no flex-wrap, menu will not be wrapped, and it will occupy all the space it's needed to accommodate all the elements, breaking its container. Pesky horizontal scroll appears on the whole body.

Boubas will set menu's width to some fixed value like 800px, and this is a bouba approach because bye-bye responsiveness.

Here's what you should do:

.menu {
overflow: auto;
min-width: 0;
}

.menu * {
flex-shrink: 0;
}

This way, menu will occupy exactly the width of an empty div. In flexbox, its width will be equal to all free space that is not occupied by the Sign in button. Setting flex-shrink is needed for items to preserve their original width. We don't care about making those items narrower on narrower screens, because we now have infinite amount of horizontal real estate. Pure, inherent responsiveness achieved without filthy media queries, yay!

The menu will scroll horizontally just like you wanted.

aight bye

I need some help people. Need a good tutorial to understand Bootstrap grid and responsive framework. I have always worked on Media queries before. Couldn't find a good tutorial.

On the newer side of web development. Using CSS Grid with some flexbox. Any idea on why my 768px media query styles are overwriting my 320px styles?

I was breaking into modules but moved everything to a single css file until I figure out what causes the issue. The mobile styles are at top and I started the medium breakpoint below the initial styles.

Designed it mobile first if that makes a difference. Should the media queries be nested?

ANYONE WHO ANSWERS IS A HERO! Im having a CSS issue and yes I’m a CSS noob! I have a flex box with two columns of data and I want the divs to stack when the screen gets narrow enough. The issue is that I want them to stack ordered by a data attribute. I wrote a media query like this

@media (max-width: 767 px) {
.row { flex-direction: column};
.row div { order: attr(data-ordinal) };
}

I want each of the divs to be ordered by the data-ordinal attribute (a number) when the screen gets at most 767 pixels or on a mobile device. I was banging my head for a while on this assshole. Can anyone find the issue here? I may have left out a few details but does this CSS at least LOOK ok? I’m new to media queries. PS sorry, whats the bot that does the highlighting? I forgot it, but luckily this is simple enough to read

The days are long right now. The company portal, that I built, is being rebuilt now that we have decided it needs to be responsively designed.

I always knew there would come times in my career, if I leant towards the front end, that periods of time would be taken up with HTML/CSS.

I just didn’t appreciate how soul sucking it can be when you are adjusting margins for 8hrs a day for a few weeks. And how much that is compounded by people changing their minds on things that cascade throughout an increasingly complex system of media queries...how you can spend ages tweaking something only to find it breaks on an another screen size...

The love I found in coding...it is not here...

The future will look back on this period in time with astonishment. The fact that people could still browse the internet without using an app or a mobile phone will seem like a bedtime story.
It’s not even fucking close to ok that this very paragraph is inside of a H1-tag with a font-size of 26px! The UI is so big and dumbed down that I feel like I’m trying to navigate a fucking Pixie book with buttons the size of duplo-blocks. And this shit is happening to more and more sites!
It’s like the CSS-stylists assumes that everyone goes around with a pair of binoculars duct taped the wrong way to their forehead. No no, that was not a typo. Writing CSS is not development dude, it’s more like filling out a coloring book. And still most of the “paint” seems to go outside of the shapes somehow. Even I, a backend developer, know about media queries and that you shouldn’t specify font-size in pixels. How come that these guys do not? It’s like a taxi driver not knowing how to switch lane for fucks sake.
I know I can just adjust the page scale with a simple ctrl scrolling maneuver and believe me I do! I just don’t think it’s right that people, by the millions, should be afflicted with carpal tunnel syndrome just because of their ignorance.

That would be the !important rule, when the client wants some ui change but the stupid library has !important rule applied.. and also the media queries in combination with width/height and percentages, trying to adapt the ui because the client ones ie8 support..

Wish i could lock portrait mode for website im building. Fucking media queries coming out of my arse.

Hi guys..

Any tips for good practices of @media queries for responsive design (portrait and landscape) ?

Are CSS media queries very messy or am I just incompetent? Does anyone have any alternatives to it?
I find it very hard to make decent responsible pages. They either look awful or their source code is just a disgusting mess.

I use /blog/ as the url for the main articles that include seo, web design, and marketing. I am looking for link ideas for articles that are more technical, articles like “How to create a php contact form”, “How to use media queries”, “How to upgrade to php 7 in cpanel” I was thinking about using /snippets/ or /tutorials/ ? Any ideas ?

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;
}

Not a rant, but seeking advice...

Should I abandon 2 years' worth of work on migrating a personal project from SQL (M$) to a Graph database, and just stick to SQL? And only consider migrating when/if I need graph capabilities?

The project is a small social media platform. Has around ~50 monthly active users.

Why I started the migration in the first place:
• When researching databases, I read that for social media, graph is more suitable. It was, at least in terms of query structure. It was more natural, there were no "joins", and queries were much simpler than their SQL counterparts.

• In case the project got big, I didn't want to have to panic-deal with database issues that come with growth. I had some indexing issues with MSSQL, and it got me worried that at 50MAU I'm having these issues, what would happen if I get more?

• It's a personal project, and the Gremlin language and graph databases looked cool and I was motivated to learn something new.

----

Why I'm considering aborting the migration:
• It's taking too damn long. I'm unable to work on other features because this migration is taking up all my free time. Sunk cost fallacy is hitting me hard with this one.

• In local testing within docker, it's extremely slow. I tried various graph engines (janusgraph, official tinkerpop, orientdb), and the fastest one takes 4-6minutes to complete my server tests. SQL finishes the same tests in under 2 minutes, same docker environment. I also tried running my tests on a remote server (AWS neptune) and it was just as slow. Maybe my queries are bad, but can I afford to spend even more time fine tuning all queries?

• I now realise that "graph = no scalability issues" was naïve of me, and 100% wishful thinking. Scalability issues don't care what database I use, but about how well tuned and configured the whole system is.

• I really want to move on. My tech stack is falling behind and becoming outdated. I'm unable to maintain dependencies.

• I'm worried about losing those 50 MAU because they're essential to gaining traction once I release the platform. I keep telling them about the migration but at some point (2 years later) they're going to get bored I feel.

I guess partially it's a rant because I feel like I shouldn't stop now having spent 2 years on this, but at the same time I feel like I'm heading towards a dead end.

If you made it this far, thank you for reading:)

Need some media query help on a website I'm developing.

I'm keeping my browser cache clear, checking different browsers, trying different editors for uploading changes but nothing seems to be working.

Firebug is still showing the code as if the files aren't being overwritten with my changes.

If someone wouldn't mind taking a look I'd really appreciate it

!rant

Developing a website for mobile feels like a pain the back to me. Can anyone recommend any good tutorials?
I can design basic sites for desktop screens but I have problem making them work for mobile. I don't know the right approach. Should I add a bunch of @media queries? Or should I use relative measures like em? It's so confusing.