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
seen from China

seen from United States

seen from United States
seen from United States

seen from Hungary
seen from Colombia

seen from Malaysia

seen from United States
seen from China
seen from United States
seen from United States

seen from United States
seen from China

seen from United States

seen from United States

seen from Sweden

seen from Malaysia
seen from United States

seen from United States
seen from United States
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

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch ⢠No registration required ⢠HD streaming
ā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.
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
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
>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

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch ⢠No registration required ⢠HD streaming
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?
<!----- THEME #16: EYE OF THE TIGER THEME MADE BY āāāāā āāāāā āāāāāā āāāāā āāāāā ć āāāāā āāāāāā āāāāāā āāāāāā āāāāā āāāāā āāāāāā āāāāā āāāāā ć āāāāā āāāāāā āāāāāā āāāāāā āāāāā āāāāā āāāāāā āāāāā āāāāā ć āāāāā āāāāāā āāāāāā āāāāāā THE DO'S AND DON'TS: ⢠DO NOT STEAL OR RIP ANY OF MY CODINGS I WORKED HARD FOR THIS. ⢠DO NOT REDISTRIBUTE OR CLAIM MY THEMES AS YOUR OWN. ⢠DO NOT REMOVE THE CREDITS OR PLACE IT SOMEWHERE IN YOUR BLOG. THE CREDITS SHOULD BE VISIBLE. ⢠DO NOT USE THIS AS A BASE CODES IN MAKING YOUR OWN THEMES. ⢠YOU ARE ONLY ALLOWED TO MODIFY THIS THEME FOR YOUR PERSONAL USE ONLY. ⢠IF I SAW YOU USING MY THEMES WITHOUT THE CREDIT OR CLAIMING MY THEMES AS YOUR OWN, I WON'T HESITATE TO REPORT YOU IN TUMBLR STAFF. THANK YOU FOR FOLLOWING MY SIMPLE INSTRUCTIONS. PLEASE ENJOY MY THEME! :) ----->
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.
<!-----DO NOT REMOVE THIS CREDIT!!!-----> <!-----DO NOT REMOVE THIS CREDIT!!!-----> <!-----DO NOT REMOVE THIS CREDIT!!!-----> <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>. <!-----DO NOT REMOVE THIS PART!!!-----> <!-----DO NOT REMOVE THIS PART!!!-----> <!-----DO NOT REMOVE THIS PART!!!----->
"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:
<body> <BODY onselectstart="return false;" ondragstart="return false;"> <body onkeydown="return false">
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.
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.
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?