A CSS rule consists of two main parts: selector (‘h1’) and declaration (‘color: red’). In HTML, element names are case-insensitive so ‘h1’ works just as well as ‘H1’. The declaration has two parts: property name (‘color’) and property value (‘red’).
We’re looking for the selector that targets the tumblr controls. There’s a number of different ways you could select that element, but the theme designer probably used the element’s id attribute, which is tumblr_controls.
So, open the theme source, search for #tumblr_controls, (CSS uses # to select elements by ID) and delete that CSS rule.
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 save728.7KiB(64%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:
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:
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:
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?
The default width of all tumblr themes, as well as the dashboard itself, is 500 pixels, which was established back in 2007. On modern monitors, six years later, this is pretty cramped. But in case 500 pixels isn’t narrow enough for you, this theme uses a content column that’s 250 pixels wide.
2.) Contrast on link text isn’t nearly as important as contrast on main body text— obviously you’ll never have to read long stretches of link text.
3.) You can just switch themes. The transaction cost of changing themes is a lot lower than most people think, and you can always switch back.
4.) Well made themes will expose link color as a user-configurable option.
5.) You don’t need to hire a web developer to change link color, you can just DIY.
Both Firefox and Chrome have an element inspector, which allows you to examine the DOM of a page. Just right click on a link, select “inspect element” and boom,
Here it’s telling us that the operational CSS selector is .post .sidebar a {}, overriding a{}, and is setting the color to rgb(106, 0, 106). Fiddle with the color in the element inspector, then once you find a value you like, change it in your theme’s source code.
(99 times out of 100, the selector will be a{}, I picked a complicated instance for this example.)
<!-- Custom Tumblr theme made by Fugiman for Octopimp -->
Ah, fugiman. And you were doing so well.
Let’s just get this out of the way first: it’s better than his previous effort, but it’s still ugly. Just godawful. It’s hard to know who to blame, precisely. Let’s take a tour of the code.
This is a doozy of a layout mistake. The problem is this rule:
.post-title {width:500px}
Change 500px to 400px, and it doesn’t happen anymore.
if(location.pathname == "/ask" && false) {
$("#post- .post-footer").html("As an ongoing part of Operation Troll Octopimp, Anonymous asks have been turned off. Apologies for the inconvience, and let's see how long it takes him to realize! -Fugiman");
}
<!-- Just for funzies code. Remove before release
<script type="text/javascript">
(function(file) {
var myAudio = new Audio(file);
if (typeof myAudio.loop == 'boolean') {
myAudio.loop = true;
} else {
myAudio.addEventListener('ended', function() {
this.load();
this.play();
console.log("Looping...",this.buffered.start(0),this.buffered.end(0),this.seekable.start(0),this.seekable.end(0));
}, false);
}
//myAudio.play();
})('http://fugiman.com/octopimp/annoying.webm');
</script> -->
That’s professional.
blockquote {
padding: 10px;
margin: 5px;
}
The single-value margin/padding shorthand adds margin on all four sides of a block element, as you’d expect. But on Tumblr, where nested blockquotes are very common as the result of long reblog chains, you almost always don’t want to set margin-right, which is mostly useless, and only serves to crunch the deepest blockquote into a narrow single-word column of text. That’s bad. You don’t want that.
(Style quibbling: I’d use black here instead of #000. I mix up #000 and #FFF all the time, and black is only one byte longer.)
(The attribute is repeated to, not a joke, make the shadow darker. This is official W3C-endorsed best practices, and is due to the fact that text-shadow, unlike box-shadow, doesn’t have a spread attribute. Box shadows will always be convex polygons, while a text-shadow is concave, so the spread value wouldn’t be well-defined.)
.block-link{color: #000000 !important}
Whoops, someone left an !important directive in production code!
#header a {
text-decoration: none;
}
.post-meta a {
text-decoration: none;
}
.tags a {
text-decoration: none;
}
Now the problem of attribution arises. The giant background image (896 kilobytes!) and semitransparent main column, creating yet another readability catastrophe, (Transparency compositing is also dog-slow, which makes scrolling sluggish and unresponsive) are both user-visible settings. Who set them? It’s impossible to know.
Also, I thought we stopped using gradients for backgrounds back in Hypercard.
Fuck the police, I live on the edge. The edge of the highway to the danger zone.
I forgot.
This resulted in a very specific, very subtle bug. Can you spot it?
In the code, the first regexp is s/>\>/g (“search for >, replace with >”)
I ran escape.sh on its own source code to escape the > character. (how recursive!)
This resulted in s/>/\>/g, which in HTML, renders to s/>/\>/g.
Whoops.
Amusingly, this meant that my own escaping code was unsafe in HTML. This is an edge case that only occurs in source text which already has escaped entities, and it’s important to only sanitize HTML once.
Alrighty, I’m currently a working Web-Designer and I’m still learning a lot about the field of work, It’s time to share the basic HTML before I start a tangent about some of the more complex things.
Before I get under way; here are the things you can expect of my posts!
Basic structure tags and formats!
Using CSS to change the appearance of all of your content!
Free code available online that will MAKE YOUR LIFE SO MUCH EASIER
And MUCH later when I get a bit more savvy, Javascript and how to swing it!
Onwards!
Alright so web coding can be done with the simplest of tools, for a lot of first time user it starts out with notepad, VERY basic but allows for all the customisation of the latest web tools but without handy things like auto-complete, colour coding and the like!
For the beginning you can leave your notepad as a .txt, this will help for saving the file and re-opening it without the faff of Open With… > Notepad.
The first tag you’ll have is known as the HEAD tag, it’s declared using the right angle brackets:
To open the tag: <head> and then close it: </head>
It is important to state at this point that all tags and code excluding content is best left lowercase as this can cause errors on execution. Next we have what is the content area of the code known as the body, it is the same in application as the head but must exist between the head tags! For example:
“<head> <body> </body> </head>”
This generates the area for applying content, this can be done in a number of ways and the simplest is in the paragraph tags, these are declared with “<p>” and to close “</p>” so using this we can make a text area saying “Hello World” with the following:
<head>
<body>
<p> Hello World! <p>
</body>
</head>
All the text declared between the paragraph tags will have the default style of your web browser! (Arial Font for most).
Now that we have this snippet of code the .txt file must be saved in another format, the easiest method is bog-standard: Save As… and then change the extension at the end of the file from:
example.txt > example.html
From here you’ll have a file that should use your default browser icon that will open your web browsing with the piece of text “Hello World!”
That’s all for now, it’s the most basic of coding in HTML but it makes up the foundation of every website ever!
I hope you enjoy the content I start creating and please leave any feedback or comments in asks and reblogs! I’m always game for some criticism!
-DrToppleton
Well, here’s some feedback: You’d think it wouldn’t be possible to screw up a hello world. And, yet, here we are.
There are two questions here. (Again! What’s with all this duality?)
The first one is, is this the correct way to write old HTML,circa 1997?
The answer is no. For one, you nested the <body> tags inside the header. You’re not supposed to do that. Plus, you forgot the <html> tag. Here’s what the hello world should actually look like:
But maybe you weren’t intending to write Geocities-vintage HTML. The second question is, is this the correct way to write modern HTML?
The answer is no. HTML5 needs a doctype. HTML5 also happens to be a lot more liberal with regards to required tags: <html>, <head> and <body> are all optional, which makes the HTML5 hello world a lot pithier:
Grid layouts are “unnatural”— they don’t work well with the “DOM tree” metaphor HTML+CSS uses, so you have to align everything with Javascript. Cargo does that with some fairly heavyweight code, considering that its only job is to “line up images”: four files, 82.91kb, incl. the entire JQuery Javascript framework. On my two year old laptop, it took 3.3 seconds to load and render, for a page that’s ten thumbnails and some text! Webperf nerds hate and fear Javascript, this is why.
It depends on Javascript. If your user-agent doesn’t execute Javascript, like the two million people who use NoScript, web browsers used by blind people, and perhaps most significantly, Google’s web indexer, then they won’t see anything.
It’s written in a fairly archaic style. Since 2010, the big thing in CSS has been responsive design, giving the browser exactly what they need. Small screens get small images, big screens get big images. This is slightly more complicated than you would expect, since layouts don’t scale at all: a 10x10 grid of thumbnails might look fine at 1920x1080, but be lost in a sea of whitespace at 2880x1800, and be completely unreadable on a cellphone, where a 10x10 grid can result in thumbnails that are sixteen by sixteen pixels each.
It doesn’t look great on my weirdo clowncar monitor either.
Some good examples of responsive design is Justin Ouellette’s theme, (which costs money) and to a lesser extent, mine. (which doesn’t)
There’s some UI problems. Grid themes usually don’t have timestamps, and the layout breaks the “older posts are lower down on the page” convention; which makes it hard to tell how often a person posts, which is the second most important piece of information you need when you’re considering following someone. (“Do they post dumb shit, and do they post dumb shit all the time?”)
A nebulous, hornrimmed-glasses criticism: Are thumbnails even necessary in the year 2012? Monitors are big, internet connections are fast. (For modern desktop computers, ignoring the hundreds of millions of cell phones and old computers out there— this is where responsive design comes in, again) A greenfield design, written today, would just put all the images, at moderate resolution (800xN) on one big page, without the premature optimization of thumbnails. Thumbnails are important if you’re Amazon, and serving ten zillion product images a day; but perhaps less important if you’re displaying art. You want people to see your stuff! More importantly, you don’t want to make it hard for people to see your stuff!
This page has a really unfortunate choice of background, in clear violation of Commandment 2. But images are tricky to cleanly quantify, since they don’t have a single color. The average color can be fairly easily approximated, though. Just take the image:
(This is a 68.28KB .gif, by the way. Which intuitively seems completely bonkers: but it’s palletized, and only uses 8 colors. Converting it to .png and running it through optipng -o7 results in a 72KB file. The .jpeg version is 109KB.)
Then blur the shit out of it:
This 219 byte PNG is a single pixel of #2B3F32. We are now free to compare colors.
This is a bad theme. The prosecution rests.
It is, of course, worse than this. Averaging the entire image discounts background detail, which can greatly complicate reading. Consider the pathological case:*
Averaging the background image gives us #D9D9D9, which is a very light shade of gray, and scores an excellent 13.88:1 contrast ratio… yet is completely unreadable.
You could imagine writing a contrast checker which would take into account visible detail, except the use case for such a utility would just be reviewing shitty Tumblr themes, so it’s probably not worth the development time.
A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per “page” for actual content, sometimes results in the use of unreasonably small font sizes.
Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.
The problem here is a basic usability and accessibility issue: a good design should look goodwithout requiring the user to enlarge or reduce the text size.
The default font size is 16px. If you override the standard font size, and make it smaller, you are making a mistake.
There are certain decorative elements which can use smaller text, sure, that’s fine. But making all the text on the page small is a mistake. Don’t do it.
[Do not] have a theme with transparent text boxes that overlays some obnoxiously patterned background so everything is unfuckingreadable, seriously that shit is neither kawaii nor kakkoii choose your fucking themes to be r e a d a b l e so people can READ THEM, because that is why you have A FUCKING BLOG, so that losers can look at this dumb shit you have deluded yourself into believing anyone else cares about and READ IT,
Dark gray on light gray is bad. Dark red on light red is bad. You want contrast, otherwise you can’t read the text.
There’s a contrast calculator which can give you objective numbers on just how bad a particular color combo is.
The rule of thumb with image scaling is that when you use it to make big images smaller, then you’re throwing away data that you spent time to transmit over the network; and when you use it to make small images bigger, then you just have a blurry mess. It has some uses, so it’s not a “never do this thing”, but if you ever write a theme that scales all _500 images up to 600px, then you are making another mistake. Use max-width or min-width instead.
Nested blockquotes aren’t common on the greater web, and they’re not in the standard set of example posts in Tumblr’s theme preview page, but long reblog chains are very, verycommonin everyday use by average Tumblr users. If your CSS reset does * {margin: 0}, then don’t forget to set 20 pixels of margin-left for blockquotes, or else it will be impossible to see who’s saying what.
The Principle Of Least Surpriseis the absolute bedrock foundation of UI design. It’s the First Commandment: Least Surprise is the Lord your God, you shall follow no other God but him.
Never move the Tumblr controls. Never fade them out, or in any way obscure them. Make no CSS rule that targets their iframe, or any way violates their sanctity.
All these other elements are yours to style— except the Tumblr controls. Attempt no landing there.
Pagination links are one of those bikeshedding arguments which spawn pages and pages of circular arguments. Screw those nerds, because there’s only One True Way to do it: older posts are viewed by clicking a link that points to the left, newer posts are viewed by clicking a link that points to the right.
[Do not] change the fucking mouse cursor, no stop this is dumb nobody thinks those little trailing pink sparkles is cool, it makes you look like a 13 year old girl, and if you are actually a 13 year old girl you should be working harder than the rest of us not to look like a 13 year old girl because there is absolutely nothing about 13 year old girls that is cool unless you are a pedophile i guess but somehow i doubt that is the target demographic,
CSS is generally a less than powerful language, which is why SASS and LESS exist. But no language is so inexpressive that it can’t be used to shoot holes in things, and you’ll find yourself blowing your own foot off a lot less often if you avoid certain language features completely.
im kinda sick of having my doodle gettin more notes than stuff i worked on for than an hour its9:35am but im goin back to sleep thanks for lettin me know my effort is worth shit thankbye
EDIT: Jiontwings has switched to a theme that is not terrible. The rest of this post is of historical interest only.
What? Width is a block property, it’s not supposed to be used on an inline style. It works anyway, with the browser Doing What You Mean, but it’s still an error.
Speaking to the actual content of the post, this seems like a classic cost/value confusion. Just because it took more time to make does not mean it’s better.
An html element’s start tag may be omitted if the first thing inside the html element is not a comment.
A head element’s start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A body element’s start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.
An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
A td element’s end tag may be omitted if the td element is immediately followed by a td or th element, or if there is no more content in the parent element.
There’s some life left in this horse, better keep beating it!
The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
