Categories
internets web design

moved site again, updated some things

So i spent a year on Nixihost. They were cheap, but their technical support was hell. I kept getting the same guy and he was kind of an unhelpful dick. Plus they don’t support Cloudflare for some dumbass reason? Wtf? Thankfully, Cloudflare themselves have made things a bit easier anyway, so when i moved to Namecrane it went a lot smoother. They’re dirt cheap. I need dirt cheap. Things are tight. For reasons.

Anyway, i also decided to update the home page, since my list of self-links was growing as i adopt less toxic social media channels like Mastodon and Bluesky and i wanted to include all the places where i currently have a presence to any degree. So now the links appear in columns: 1 for pocket-sized screens, 2 for bigger small screens, and 3 for everything larger than that. I used the quick-and-dirty approach of using column-count: 2 rather than using flexbox, which limits directionality, but is quicker and easier and doesn’t require any real thinking to speak of.

I also changed the way links are styled. This was because i was experimenting with NeoCities and liked the way the links turned out.

a {
text-decoration: none;
border-bottom: 2px solid;
}
a:link, a:visited {
border-image:
linear-gradient(
to right,
#d60270,
#9b4f96,
#0038a8
) 1;
}
a:hover, a:focus, a:active {
border-image:
linear-gradient(
to right,
#5bcffb,
#f5abb9,
#fff,
#f5abb9,
#5bcffb
) 1;
}

This way, links by default (currently) have a gradient like the bisexual pride flag colors, while in a hover state it changes to a transgender flag color scheme. I also used :not to de-target other types of links like the site logo, etc.

Lastly, i updated the microblog feed to use both Mastodon and Bluesky, since that other site went to absolute shit. (Fuck billionaires and their fascist, bigoted ideologies.)

Categories
creative internets web design

random background colors experiment

A while back i made a random background color generator. What was cool about that was it took a random color (actually, three) and determined whether it was generally visually dark or light, then used that determination to color the text accordingly light or dark gray for contrast.

So today, after not really working with PHP (or much code at all) for several years, i decided to revisit my experiment. Instead of either light or dark gray, i wanted to take the random colors i generated and lighten or darken them up, so they’re the same hue, just darker or lighter depending on the value of the generated color. The contrast is a lot more subtle, however. Maybe next i’ll see if i can add a contrast switcher to it.

Here’s that experiment.

Here’s the source code in either pretty HTML or plain text format.

Categories
internets

Accessibility rules!

Want an argument for accessibility?

Here you go! (via Ma.tt)

 

Uber-cool Glenda Watson Hyatt, aka the Left Thumb Blogger, shares her perspective on how WordPress has improved her ability to communicate effectively on the internets.

Whether you are 100% able-bodied or not, accessibility is important. Because no matter who you are, the future is coming. Some day many of us may have devices assisting us, whether we need them or not, and completely removing all barriers between humans and machines will be an important first step in enabling us to proliferate on the digital grid – on a truly level playing field.

I’ve committed to making my upcoming theme be as accessible as possible. You should too, especially if you want to meet the Future head-on. Keeping all variants of humanity and machinery in mind when designing user interfaces of any kind will be important there.

Categories
uncategorized

Accessibility rules!

Originally published at jeremyjarratt.com. You can comment here or there.

Want an argument for accessibility?

Here you go! (via Ma.tt)

Uber-cool Glenda Watson Hyatt, aka the Left Thumb Blogger, shares her perspective on how WordPress has improved her ability to communicate effectively on the internets.

Whether you are 100% able-bodied or not, accessibility is important. Because no matter who you are, the future is coming. Some day many of us may have devices assisting us, whether we need them or not, and completely removing all barriers between humans and machines will be an important first step in enabling us to proliferate on the digital grid – on a truly level playing field.

I’ve committed to making my upcoming theme be as accessible as possible. You should too, especially if you want to meet the Future head-on. Keeping all variants of humanity and machinery in mind when designing user interfaces of any kind will be important there.

Categories
creative uncategorized web design

new wp-theme preview: “transitory”

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout
"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change. 

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot
"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
uncategorized

new wp-theme preview: “transitory”

Originally published at jeremyjarratt.com. You can comment here or there.

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout

"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change.

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot

"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
creative internets uncategorized web design

CSS tricks: Styling parent elements with :hover

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

Categories
uncategorized

CSS tricks: Styling parent elements with :hover

Originally published at jeremyjarratt.com. You can comment here or there.

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

First, create a nested list, with headings. For example:

<ol>
<li>
<h1>text</h1>
<h2>more text</h2>
<ol>
<li>
<h3>subtext1</h3>
</li>
<li>
<h3>subtext2</h3>
<ol>
<li>
<h4>subtext2.1</h4>
</li>
<li>
<h4>subtext2.2</h4>
</li>
</ol>
</li>
<li>
<h3>subtext</h3>
</li>
</ol>
</li>
<li>
<h2>text again</h2>
</li>
</ol>

Now create the following style rules:

li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */ li:hover>h3, li:hover>h4, li:hover>h5
{
background: #000;
color: #fed;
}

(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)

Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)

See the demo

Categories
creative internets web design

Cheaters, etc.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ’em. Enjoy!

Categories
uncategorized

Cheaters, etc.

Originally published at jeremyjarratt.com. You can comment here or there.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!

Categories
web design

Coming up, a redesign

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
uncategorized

Coming up, a redesign

Originally published at jeremyjarratt.com. You can comment here or there.

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
creative web design

Fun & stupid things to do with PHP and CSS

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
uncategorized

Fun & stupid things to do with PHP and CSS

Originally published at jeremyjarratt.com. You can comment here or there.

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
internets uncategorized web design

Google Chrome obeys alternate CSS

NOTE: this post is ancient, but still gets a good bit of traffic, so i need to let readers know:

This issue was fixed long ago.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized

Google Chrome obeys alternate CSS

Originally published at jeremyjarratt.com. You can comment here or there.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized web design

hello, again

Thanks to ScareCrowe @ htmlforums.com, i finally got my theme working. Mostly.

I know it still looks like crap on IE. That will be fixed. And none of my plugins are enabled or updated yet.

I still have plans on releasing this theme into the wild, but i have a ways to go before it is up to snuff. Some of the backend is still kind of messy.

Btw, over at technothrope i plan on doing a tutorial on upgrading WordPress for people who are very far behind.

Categories
uncategorized

web design rant

OK, so i’ll admit two things.

1) that i have not updated my WordPress installation, nor fixed the PHP in my totally custom theme to work with PHP5. This is a major headache for so many reasons, not least of which involves time. That’s why it looks super ugly right now.

2) that i have not created a web site in many moons. This means there are a lot of things which i have not yet had to deal with extensively. I’m talking to you, IE7, and your diabolical hasLayout bullshit.

Right now i’m working on a web site for an old friend who has a desktop publishing business. It’s a WordPress site, because that means she can update it herself and not have to pay a schmuck (hello!) to do it for her. So i’m making a theme that matches her design, and it’s not been easy.

Thanks to every single goddamn iteration of Internet Exploder rendering pages completely differently than the others, because of wildly varying degrees of standards compliance, there are now so many bugs to work around that it’s actually no longer fun to make a web site.

To wit:

I have a floating element, followed by a fixed element, on the page. Unless i take out the float, the fixed element completely disappears in IE7. WTF. But when i remove the float, the layout goes all wonky because IE7 measures things differently. Which means i’ll have to bugfix that, which will no doubt screw things up in IE6. Did i mention that IE8 will probably make all of these endeavors even more stupefyingly, insanely complex?

All because Microsoft has got to buck the convention and do their own thing… which i would normally applaud, if it wasn’t so idiotic a thing to do when we’re dealing with a medium which exists on so many different platforms that standards are an absolute necessity.

So fuck you to Microsoft, yet again.

And seriously, to all of you cavepeople who are STILL using Internet Exploder… why? Why, why, why???

Categories
internets uncategorized web design

IE6 users

I am aware of a problem with viewing this site through the narrow and unrefined lens of IE6. I have a fix for it in mind and will implement it as soon as we are done moving and settled in.

For now, why not get the juicy taste of the Twenty First Century in your mouth with a shiny new web browser? They’re Box Modelicious!

Firefox | Opera | IE7 | Safari

Categories
creative internets uncategorized web design

You can quote me on that

For those designers who want to do the fancy-pants block-quotes thing, here is the CSS. Note that you have to put a DIV element in there to give it padding and close the quotes. That’s because the current specification for CSS do not allow for more than one background image for any single element. This may change in the future, but for now, we must write fairly non-semantic markup in order to achieve the cool effect.

blockquote {
background: transparent url(path/to/quote-left.img) left top no-repeat;
}
blockquote div {
background: transparent url(path/to/quote-right.img) right bottom no-repeat;
padding: 0 50px;
}

… And this is what it looks like:

I used to be really, really humble.

It just made me big-headed.
x jeremy jarratt

I added a :hover behavior to mine. What will you do?