Pixel Nazi - Add a little media query

Apple you drove of delusional suckers! When will your retarded fashion devices finally support WEBP?!

A gallery page with images, and thanks to WEBP, it's 408 kB. Because Google made WEBP and handed out a well documented CLI FOSS compression tool that even can convert the source PNGs to lossy WEBP with bloody transparency. Well done, Google!

Except that Apple's shitty management can't take it that Google actually made something nice, so no WEBP. Instead, JPEG-2000 that enjoys nearly no fucking tool support. The free tools that even can deal with that mostly don't support transparency, and the encoder sucks donkeys so that JPEG still fucks JPEG-2000 big time.

So it's JPEG with matching background for iOS. Fine, but since JPEG's blocky artifacts are much more visible, the compression can't be that high, and it's 769 kB. That's 88% more image data for Shittari than for non-retarded browsers and even Edge! EDGE!!

Oh and if the user changes light/dark system mode according to surrounding light conditions, guess what happens? Yep, since JPEG doesn't support transparency, now it's different JPEGs with dark background via the media query in the "picture" element, and it's another 754 kB download. Bloody 1523 kB instead of 408 kB, that's a factor of 3.7!

Fuck your ass Crapple, with an electric eel!

I was assigned a ticket which was about a drop down menu which was not aligning properly.

Turns out the drop-down was positioned absolutely and my co-worker (read bestie) had written media query for every 10 pixels to match the position for mobile and desktop devices (from 320px to 1040px and beyond ~150 lines for a drop-down). No one noticed any flaw for few weeks until one of the QA had to check the site in landscape mode on mobile device.

I replaced it with 4 lines of JavaScript.

"Knowing" Bootstrap or Foundation is not the same as knowing CSS. If you claim to know css and you can't even tell me what media query is or how to make a page even semi-responsive without a css framework, please do everyone a favor and fuck off.

Data Disinformation: the Next Big Problem

Automatic code generation LLMs like ChatGPT are capable of producing SQL snippets. Regardless of quality, those are capable of retrieving data (from prepared datasets) based on user prompts.
That data may, however, be garbage. This will lead to garbage decisions by lowly literate stakeholders.
Like with network neutrality and pii/psi ownership, we must act now to avoid yet another calamity.

Imagine a scenario where a middle-manager level illiterate barks some prompts to the corporate AI and it writes and runs an SQL query in company databases.
The AI outputs some interactive charts that show that the average worker spends 92.4 minutes on lunch daily.
The middle manager gets furious and enacts an Orwellian policy of facial recognition punch clock in the office.
Two months and millions of dollars in contractors later, and the middle manager checks the same prompt again... and the average lunch time is now 107.2 minutes!
Finally the middle manager gets a literate person to check the data... and the piece of shit SQL behind the number is sourcing from the "off-site scheduled meetings" database.
Why? because the dataset that does have the data for lunch breaks is labeled "labour board compliance 3", and the LLM thought that the metadata for the wrong dataset better matched the user's prompt.

This, given the very real world scenario of mislabeled data and LLMs' inability to understand what they are saying or accessing, and the average manager's complete data illiteracy, we might have to wrangle some actions to prepare for this type of tomfoolery.

I don't think that access restriction will save our souls here, decision-flumberers usually have the authority to overrule RACI/ACL restrictions anyway.
Making "data analysis" an AI-GMO-Free zone is laughable, that is simply not how the tech market works. Auto tools are coming to make our jobs harder and less productive, tech people!
I thought about detecting new automation-enhanced data access and visualization, and enacting awareness policies. But it would be of poor help, after a shithead middle manager gets hooked on a surreal indicator value it is nigh impossible to yank them out of it.

Gotta get this snowball rolling, we must have some idea of future AI housetraining best practices if we are to avoid a complete social-media style meltdown of data-driven processes.
Someone cares to pitch in?

If you are a web developer, consider using proper page titles.

Page titles are one of the most basic elements of a web page and yet websites often fail to make proper use of them.

Without a proper page title, your user does not have an accurate idea of what page is in the tab without having to open the tab, which gets tedious if many tabs are open. With a proper page title, an instant glance on the tab does suffice.

Some sites only put in their site name or something like "Search - Site Name" without including the search query in the page title, or "User profile - Site Name".

An example of this is, disappointingly, archive.org. As thankful as I am for the Archive, they could make better use of page titles to make browsing their library more convenient. While they use proper page titles on item pages (including both title and author!), they use non-descriptive titles on their 2023 search feature (downgraded from lightweight static HTML+AJAX to a JavaScript app) and user profile pages.

The user name of a profile or a search query and ideally a page number should be in the page title so a browser tab with a search can be found faster and can also be seen on social media sites that auto-generate preview cards with page titles.

Descriptive page titles also improve your search engine ranking! You surely don't want to miss out on that, do you?

Can someone explain what's so wrong with CSS?

My only issue is you can't set media query variables - which is totally not an issue with cssnext or similar..

Some people think that web development is easy because they use framework for responsive designs, they dont know the struggle of manually using media query in css.

This was originally a reply to a rant about the excessive complexity of webdev.

The complexity in webdev is mostly necessary to deal with Javascript and the browser APIs, coupled with the general difficulty of the task at hand, namely to let the user interact with amounts of data far beyond network capacity. The solution isn't to reject progress but to pick your libraries wisely and manage your complexity with tools like type safe languages, unit tests and good architecture.

When webdev was simple, it was normal to have the user redownload the whole page everytime you wanted to change something. It was also normal to have the server query the database everytime a new user requested the same page even though nothing could have changed. It was an inefficient sloppy mess that only passed because we had nothing better and because most webpages were built by amateurs.

Today webpages are built like actual programs, with executables downloaded from a static file server and variable data obtained through an API that's preferably stateless by design and has a clever stateful cache. Client side caches are programmable and invalidations can be delivered through any of three widely supported server-client message protocols. It's not to look smart, it's engineering. Although 5G gets a lot of media coverage, most mobile traffic still flows through slow and expensive connections to devices with tiny batteries, and the only reason our ever increasing traffic doesn't break everything is the insanely sophisticated infrastructure we designed to make things as efficient as humanly possible.

I aim to be web designer...

a little backstory, I've always been ignorant towards how much effort it takes to design one responsive website without frameworks or libraries and now that I know it's not a child's play (at least not for me), I aim to be one, I mean I look some websites' media query rules and they go down till smart watches now a days

!Rant
Dear fellow front end developer, why?, just why would you use "!important" on every property value inside your @media query?

This developer has an media query break point for each style 912 break points. 304 desktop, 304 mobile, and 304 tablet break points. With 18000 line style sheet.

An Android app to query user details using the GitHub api and display them in charts which can be shared on social media.

I am really frustrated and angry when my friends only think that web development is easy you just do everything in bootstrap thats it, but really not all web apps are made in bootstrap, i make mine using css media query and thats hard to set everything manually, im so pissed that they take my job for granted and they cant even right a single decent php function , ignorant retards

I worked 2012-2016 for a big telco company in my country and there was this HTTPS webpage with an iframe rendering any url you passed over the ?url query param plus a header with the company's logo.

I was on a meeting with some friends in charge of social media and they found it for a user report.

Unbelievable 🤷🏻‍♂️ I remember I tried the page's url itself and it rendered a loop of the header with the company's logo 😂

I think I finally, really, comprehend why secret societies have historically been created... I mean the potentially logical ones. This train of thought is logically terrifying.

I want a logic check.

I've been jokingly mentioning some of my totally true, practically useless in most scenarios, skills/specific fields of knowledge/ability under a moniker of 'extremely useful, assuming apocalyptic event' for years. Things like advanced knowledge of Coefficients of glass expansion, Fortran, various things that have caused friends to refer to me as MacGyver after the reboot came out.

In recent years, I've personally encountered several varieties of the ones defined by helplessness, self-victimisation, some version of a real disability... that theyve expounded into a personified personal nemesis-- to flashily battle yet never overcome, etc... the vast majority perplexing me as to why that's a valid form of life to them... it's not that they never consider some other way; the ball is just quickly dropped and never picked back up.

College?(not that I'm a big fan) they wish they could but so expensive... aide? The form was hard/confusing/past-due...

Lookup/learn something more indepth than a tiktok? *some self-deprecating bs*

Yet it's "I always wanted to do/be/learn X"

Shows like 'How It's Made' fascinate, but don't inspire enough for a 5min google query.

In the dev world its a clear, inverted pyramid-- one of the first posts I saw when I rejoined here was ostream's rant on Apple sucking because after they stop support/updates you "can't" load a different OS... ofc you can. But several comments down... no mention of that... i think it was @LensFlare who was the only one in ~15 respondents to point out the core logical fallacy.

Basic shit is totally forgotten... try asking some random adults what plastic is made from... or pay attention to how many people declare they have a gluten "allergy".

I get people frequently telling me that things im pointing out as differences don't matter because "it's just semantics"... semantics is literally the epitome of "significance", with roots in 'meaning' and 'truth'

Back to the main issue... We are in a world where DIY is typically something you pay more to do as a catered experience than actually learning anything, people destroy their own arguments hopes of validity unwittingly often by stating the arguement, get 'offended' or 'triggered' by factual statements, propagate misinformation and bastardise words until MW needs money enough to print a new version, likely adding the misuse as an actual definition and basic knowledge and the thought to actually learn is vetoed by the existence of google translate, the wisdom of tiktok and the pure brillance of troubleshooting every random linux issue you have from not knowing basic CLI and thinking linux makes you cool, with chmod 777 because so many other dumbasses on forums keep propagating misinformation. Ask them what 777 means, most have no clue... as they didnt consider googling that one before putting it in a terminal several times.
The number of humans that actually know the basic shit that the infrastructure of the world is built on keeps decreasing... and we aren't even keeping a running tally.

The structure of the internet has the right idea... dns- 13 active master root servers, with multiple redundancies if they start dropping... hell ICANN is like a secret society but publicly known/obfuscated... the modern internet hasnt had a global meltdown... aside from the lack of censorship and global availability changing the social definition of a valid use of braincells to essentially propagating spam as if it's factual and educational.

So many 'devs' so few understanding what a driver is, much less how to write one... irl network techs that don't know what dhcp is or that their equiptment has logs... professionals in deducated fields like Autism research/coping... no clue why it was called "autism", obesity and malnutrition simultaneously existing in the same humans... it's like we need to prepare a subterranean life-supporting vault and stock it like Noah's ark... just including the basic knowledge of things that used to be common/obvious. I've literally had 2 different, early 20s, female, certified medical assistants taking my medical history legitimately ask if not having a uterus made it harder to get pregnant...i wish i was joking.

Any ideas better than a subterranean human vault system? It's not like we can simply store detailed explanations, guides, media... unless we find a way to make them into obfuscated tiktok videos apparently on nonsense or makeup tutorials.

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

I once added a scale css-transform with a media query targeting some specific Macbook to the whole <body> of a site.

Some designer came up with a pretty stupid navigation which wouldn't fit into that viewport, deadline was close and the customer wanted to see exactly the layout he had approved. Still feel bad about this :/

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

@media (min-width:767px) and (max-width:99999999px){
//This could be because the front end dev thought to use the css for max available with 😂
}