Discover Top Posts Tagged with #css disasters

Popular Recent

who is this weird fuckin thing and why is it following me

the CSS on his page is backwards ass fuckin retarded and nigh-unreadable. Pink on pink? fuck off

stop following me any time

#tumblr #CSS disasters #CSS #mutant #jew

“i’m so confused” from awshuckle like 5 seconds ago regarding the anti-shoutout

sorry but your css is just garbage

pink and light blue on white? get lost

also you made the font smaller than normal which is a super fucking awful thing to do

also your css forces a mascot. don’t do that

also your css breaks at low resolutions. don’t do that either.

#tumblr #css #tumblr css #css disasters

here’s a tip for people who want to have custom css on their tumblr

don’t. you’ll just fuck it up and make yourself look like an ass

the default tumblr theme is actually fucking beautiful as far as css conventions go

#tumblr #tumblr css #css #css disasters

two more anti-shoutouts today

one to awshuckle for sucking rockituu’s tranny cock and having horrible css

and another to desolationsugarskull for being a weeb sjw and having horrible css

#tumblr #tumblr sjws #sjw stupidity #css disasters #css

>accs that use custom css with retarded cursors/scrollbar/autoplaying music/low contrast colors/absurdly tiny font/not formatted to work at all resolutions

FUCK OFF

#css #css disasters #tumblr

CSS disasters #40

CSS disasters: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40.

Wow, it’s been about a year and a half since my last CSS Disasters post! This is because I tend to only do a post only when I discover some new perversion, and there is a limited number of terrible things you can do with the web stack, right?

Right?

Paola Lynn neatly illustrates fandom's schizophrenic attitude towards intellectual property, to wit: blithe indifference to the IP rights of others, absolute frothing rage when your own property is infringed.

<a href="http://mashedpaotato.tumblr.com/" target="_blank">Theme</a> [snip] "Eye of the Tiger" made by <a href="http://mashedpaotato.tumblr.com/" target="_blank">Paola Lynn</a>.<br> Tutorial and images from <a href="http://www.google.com/" target="_blank">Google</a>.<br> All Rights Reserved 2014.<br> Powered by <a href="http://tumblr.com/">Tumblr</a>.

"Tutorial and images from Google." What an interesting statement. To Paola, anything found on Google Images is public domain, (notably, she hotlinks the page background from wallpaper4me.com, which is a bad idea for a number of reasons) but as soon as she copy and pastes it, it's her property, and don't you even look at it.[1]

Seriously, don't look at it:

These event handlers trap all keyboard and mouse events. You can't right click, left click, select text, page up or down, or use any keyboard shortcuts (like opening view-source) while the page has mouse focus.[2]

That is a new thing.

It's also completely pointless! Note how these "security" measures, while making the actual page a lot more annoying to use, did not at all prevent me from "stealing" "her" code.

I've said it before:

Any time you try to go against the grain of the underlying data model of how computers work, you’re in trouble. Tampering with the basic architecture of all computers is going to be the ultimate in leaky abstractions, prone to failing in new and exciting ways. This is the enduring lesson to be learned from the slow-motion trainwreck of Digital Rights Management: You can’t push water uphill.

You can't let someone read something without letting them copy it. It can't be done. Stop trying.

1: This calls to mind What Pumpkin's heavy-handed approach towards IP enforcement. Homestuck uses quite a lot of unsourced copyrighted images for background art and weapons, (which Hussie does not seem to enjoy drawing) but What Pumpkin has been remarkably proactive in threatening legal action against anybody who could be perceived to be profiting off the Homestuck brand.

2: The redundant <body> tags seem to indicate that Paola did not bother to learn what a <body> tag does before she copy-and-pasted that snippet from somewhere else.

#css #themes #CSS disasters

body { font-size: 14px; color: #dab087; background-color: #fef1da; }

a { color: #ecd39a; }

damn son are you fucking serious

Not quite the lowest contrast color combination yet, but real close.

#css disasters

A couple days ago, thepunchlineismachismo.com got a redesign. Let's take a quick look at it.

Firstly, it loads 186 files, consuming 2.8MiB of transfer in the process. (10 CSS files, 15 javascript files) That's a lot of files.

DOMContentLoaded fires at 3.2s, onload at 6.27s. (Eyeballing Google's online PageSpeed waterfall graph puts it at about 2s and 2.9s, respectively.) Considering that all of the content on this page is just a single jpeg, that's slow.

Why is it so slow? Let's see:

The following images are resized in HTML or CSS. Serving scaled images could save 728.7KiB (64% reduction).

http://thepunchlineismachismo.com/.../tumblr_meebc32Xdw1qjm6tmo1_12802.jpg is resized in HTML or CSS from 1,000x903 to 400x361. Serving a scaled image could save 233KiB (84% reduction).

http://thepunchlineismachismo.com/.../tumblr_meeaj6iT0k1qjm6tmo1_12801.jpg is resized in HTML or CSS from 1,000x771 to 400x308. Serving a scaled image could save 210.2KiB (84% reduction).

http://thepunchlineismachismo.com/.../tumblr_meeard4aVt1qjm6tmo1_12801.jpg is resized in HTML or CSS from 800x876 to 400x438. Serving a scaled image could save 148.6KiB (75% reduction).

http://thepunchlineismachismo.com/.../tumblr_mcl2mjyTcG1qjm6tmo1_5003.jpg is resized in HTML or CSS from 500x667 to 400x533. Serving a scaled image could save 132KiB (37% reduction).

[...]

Compressing the following resources with gzip could reduce their transfer size by 162.5KiB (70% reduction).

Compressing http://thepunchlineismachismo.com/.../jquery.js?... could save 58.8KiB (64% reduction).

Compressing http://thepunchlineismachismo.com/.../cvi_text_lib.js could save 23.3KiB (79% reduction).

Compressing http://thepunchlineismachismo.com/.../instant.js could save 18.6KiB (77% reduction).

Compressing http://thepunchlineismachismo.com/.../style.css could save 17.8KiB (75% reduction).

Compressing http://thepunchlineismachismo.com/.../lessgen.css could save 11KiB (81% reduction).

[...]

My perennial bugaboo, resource caching, strikes yet again. The list is greatly abridged to save space: of the 186 files loaded, almost none are cached.

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

http://ads.thehiveworks.com/delivery/fl.js (expiration not specified)

http://ads.thehiveworks.com/.../12a4c248030c645f8179e5820b0513b7.png (expiration not specified)

http://ads.thehiveworks.com/.../5d7e4860ce0f79286ee8ddd08282f700.png (expiration not specified)

http://dropbears.developersatlarge.com/.../pixie-hiveworks.png (expiration not specified)

http://platform.twitter.com/.../timeline.996256af577d2c3d78784b9bf8b6... (expiration not specified)

http://thepunchlineismachismo.com/images/logo.png (expiration not specified)

http://thepunchlineismachismo.com/images/mgdmtbanner.jpg (expiration not specified)

http://thepunchlineismachismo.com/.../advert-label-horiz.png (expiration not specified)

[...]

Unoptimized images? You bet your ass:

Optimizing the following images could reduce their size by 381.9KiB (24% reduction).

Losslessly compressing http://thepunchlineismachismo.com/.../tumblr_meeaj6iT0k1qjm6tmo1_12801.jpg could save 55.9KiB (23% reduction).

Losslessly compressing http://thepunchlineismachismo.com/.../2013-02-18.jpg could save 50.8KiB (20% reduction).

Losslessly compressing http://thepunchlineismachismo.com/.../tumblr_meebc32Xdw1qjm6tmo1_12802.jpg could save 41.8KiB (16% reduction).

Losslessly compressing http://thepunchlineismachismo.com/.../tumblr_meeard4aVt1qjm6tmo1_12801.jpg could save 38.8KiB (20% reduction).

Losslessly compressing http://thepunchlineismachismo.com/.../purty_wood.png could save 21.7KiB (20% reduction).

Losslessly compressing http://www.thehiveworks.com/images/misfilejump.jpg could save 20.8KiB (88% reduction).

Losslessly compressing http://thepunchlineismachismo.com/images/mgdmtbanner.jpg could save 17.7KiB (72% reduction).

Losslessly compressing http://ads.thehiveworks.com/.../12a4c248030c645f8179e5820b0513b7.png could save 17KiB (15% reduction).

Losslessly compressing http://www.thehiveworks.com/.../lesbianspacepiratesjump.jpg could save 14KiB (65% reduction).

Losslessly compressing http://www.thehiveworks.com/images/yousuckjump.jpg could save 13.8KiB (68% reduction).

Losslessly compressing http://www.thehiveworks.com/images/amyajump.jpg could save 13.7KiB (68% reduction).

Losslessly compressing http://www.thehiveworks.com/images/crazysunshinejump.jpg could save 13.3KiB (73% reduction).

Losslessly compressing http://www.thehiveworks.com/images/metajump.jpg could save 11.7KiB (68% reduction).

[...]

The usual small-file overhead is in evidence: next-bar.png is a 2,888 byte PNG with a 2,639 byte color profile, which makes the metainformation nearly 18 times larger than the actual image.

How's the CSS? Well...

1,545 unused rules. Some great laughs in there, too:

@font-face { font-family: 'Open Sans'; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } @font-face { font-family: 'Open Sans'; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); } @font-face { font-family: 'Open Sans'; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff'); }

This loads three copies of Open Sans at three different typeface weights, at 30 kilobytes each, but only actually uses weight 700. And it's just used to style header elements, too. Here's the difference between Open Sans and the default sans font on my machine:

Worth 90 kilobytes, you think?

Here's the entire contents of style.css:

/* Theme Name: Easel-Manly Theme URI: http://thepunchlineismachismo.com/ Description: ComicEasel child theme for Manly Guys Doing Manly Things. Author: Jetha Chan Author URI: http://developersatlarge.com/ Template: easel Version: 0.1.0 */ @import url("../easel/style.css"); @import url("lessgen.css");

Ah, @import, the CSS antifeature that's never, ever a good idea. Every single @import forces another HTTP request, which blocks page rendering, since the browser can't paint anything without loading all the CSS. @import can slow down page load 2x-5x, depending on how stupidly you use it.

Why do I keep seeing this on Wordpress themes? Does it not let you do SASS-style inlining?

#css #html #webperf #thepunchlineismachismo #CSS disasters