So this was another fun little experiment, albeit a morbid one. Check back tomorrow for an update on my progress. Will i get better?
Categories
rip me
Tag: PHP
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 the source code in either pretty HTML or plain text format.
So i recently created a banner for use in my forum signature for Vaping Underground. It’s dynamic; it displays how long it’s been since i’ve been quit smoking in years, months, and days, plus how much money i’ve saved in that time (with a rough accounting for how much i’ve also spent on vaping gear), and how many cigarettes i’ve avoided in that time also. There’s also a random quote at the bottom just for fun. Here’s what it looks like:
Somebody asked me how i did it, so i posted the code there. I cobbled it together from code i found across the internet. Eventually i ended up replacing all the code i found with snippets from php.net. Note that this is really only for vaping enthusiasts.
This is probably very inefficient code. It’s… been a while since i’ve coded anything at all. As the Department of Homeland Security says, “If you see something, say something.” Feel free to alter it – i’ve licensed it under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
And here we go.
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:
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.
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
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 (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 (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
Cheaters, etc.
Here’s a list of cool resources for web design and development, including cheat sheets galore.
- Kuler, by Adobe is really cool; it’s an interactive color palette generating widget thing that’s all about inspiration
- Visibone’s Font Card is all the most important information you need to know about fonts
- Ampsoft’s Browser-safe fonts includes a demonstration of each
- XHTML Character Entity Reference with extra info on hover
- Will the browser apply the rule(s)? A cool chart, if slightly outdated
- Quirksmode’s W3C DOM Compatibility Table
- 30 Exceptional CSS Techniques and Examples
- A slew of great cheat sheets of all flavors, courtesy of Dave Child, formerly of ILoveJackDaniels.com (i was wondering when that would happen! Sorry, Dave!)
- The Web Developer’s SEO Cheat Sheet
- A shitload of WordPress cheat sheets from Kahi
- Lorelle’s giant list of various cheat sheets, covering HTML, CSS, PHP, and more
- jQuery cheat sheet
- Another jQuery cheat sheet
- jQuery Visual Map
- And lastly, where i found some of these, SixRevision’s Cheat Sheets for Front-end Web Developers and Useful Cheat Sheets for Web Designers
I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ’em. Enjoy!
Categories
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.
- Kuler, by Adobe is really cool; it’s an interactive color palette generating widget thing that’s all about inspiration
- Visibone’s Font Card is all the most important information you need to know about fonts
- Ampsoft’s Browser-safe fonts includes a demonstration of each
- XHTML Character Entity Reference with extra info on hover
- Will the browser apply the rule(s)? A cool chart, if slightly outdated
- Quirksmode’s W3C DOM Compatibility Table
- 30 Exceptional CSS Techniques and Examples
- A slew of great cheat sheets of all flavors, courtesy of Dave Child, formerly of ILoveJackDaniels.com (i was wondering when that would happen! Sorry, Dave!)
- The Web Developer’s SEO Cheat Sheet
- A shitload of WordPress cheat sheets from Kahi
- Lorelle’s giant list of various cheat sheets, covering HTML, CSS, PHP, and more
- jQuery cheat sheet
- Another jQuery cheat sheet
- jQuery Visual Map
- And lastly, where i found some of these, SixRevision’s Cheat Sheets for Front-end Web Developers and Useful Cheat Sheets for Web Designers
I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!
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.
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
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.
Look out for my B.U.T.T.! I’ve just finished uploading some tweaks to make the Big Urgent Wish theme a little nicer. Please, as always, wear your helmets, and let me know if anything falls on your head. I could always use a good laugh.
I hope to have a sanitized version available soon.
The B.U.G. hunt is on! See if you can find all the problems with my new layout… I’ve already identified the ugly 3rd-tier dropdown menu thing on the navbar at the top, but I haven’t had much time yet to test everything out. fixed Later tonight I’ll tweak it and try to get it to behave itself a little better. Please post your comments here (be sure to include your OS/browser). And thanks!
(Things are bound to be a little on the messy side for a few days while I convert this thing over to the new theme.)
EDIT: Yikes! Single posts & pages are also totally unstyled! fixed
Categories
color layout chart
This is the color chart I made for orchestrating and managing the background images/colors when using both a style switcher and a browser sniffer to determine which background, exactly, to display for each area of the page. You might even find it useful for your own layouts. The key is below.
Note that the header isn’t really used, and that the content and sidebars (sometimes), and the drop-downs, post meta-data, and my-own-comments boxes (always) use the same background CSS (once for each subtheme).
In all there are 6 × 3 = 18 different CSS inserts for what ended up being one of 4 types of user agents (1. browsers that cannot handle PNG transparency, 2. browsers that can and receive special message A, 3. browsers that can and receive special message B, and 4) all other user agents).
So, yeah, you can tell that this is becoming a bit of a logistical nightmare for me! Nevertheless, I’m pretty confident that once I’ve got the thing done, it’ll be easy to extend.
I’m trying to make the learning curve for anyone else as shallow as I can. Here’s how it breaks down for anyone wishing to add their own subtheme:
- Create CSS for layout and color
- Add style to
styles.inc - Add any needed sniffer-generated CSS to
sniffer.inc- This is really for generating either translucent PNG or GIF, depending on browser
- Obviously, this also entails creating both a PNG and GIF version for each translucent background
- Edit
header.phpso that cookies don’t retain old style names (there must be an easier way to do this; maybe someone will come along and improve this step so it’s automated; nevertheless, it currently only requires inserting the style names into two lines of existing code, towards the top of the page) - Upload and enjoy!
Not too terribly bad, I think, all things considered.
Key:
| (A) | header |
| E | navbar |
| B (+C+D) | content |
| (C+D) | sidebar |
| F+G+H+I | contrast |
| J | comment1 |
| K | comment2 (alternating) |
Categories
Know Where You Laid Each Part
One thing about PHP is that it can get pretty complicated. CSS can get complicated enough on its own, with one class referencing any element on the page, pointing here and there. But when you combine the two… you’ve got something pointing to something which points to something that’s pointing at a thing which references anything you choose. See how crazy this stuff can get?
What I’ve been doing the past couple of days is turning my CSS files into dynamic style sheets, renaming them with .php extensions and serving them up, after preprocessing, as CSS. Doing this allows me to use a thing called a sniffer which looks at the User Agent string browsers send when doing HTTP requests to servers, which allows me to see to what I’m delivering content, $Browser on $Platform (e.g., Safari browser on Mac OS X), so that I can send either PNG images or GIFs. The only real reason for doing this is just because PNGs can be semi-transparent, except that all but the very latest Internet Explorer beta have serious problems reading semi-transparency (called “alpha” transparency).
This is something of a specialty of mine. For those who know me online, my old site was one of the first wave of sites to use semi-transparent backgrounds.
Like I said, this is complicated stuff. So now I’ve got a sniffer going “if $browser equals ‘IE’ on Win, set $imgExt to ‘.gif’, otherwise set $imgExt to ‘.png'”. And then I’m making a PNG and a GIF for every background that I want to see through. Meanwhile, all three subthemes have got several places where they reference $imgFileXX.$imgExt for different backgrounds.
So I’m pointing, and I’m pointing, and I’m pointing, referencing this variable to get to that variable to get to an image file to put in an element. Up until this very moment, I was doing all this without a particularly coherent strategy. That changes. Now. Because I only just now realized that I had been rearranging things trying to come up with reasonable alternative GIF images to send to Infernal Exploiter versions less than 7, and I’ve turned around at noticed that I have left one hell of a wreck in my wake. I now have way too many unused background images (failed experiments), and have tossed the variables standing in for the filenames like so much salad, resulting in a chaotic mess for all the good browsers out there who actually know how to deal with PNG images!
Guess you’d have to be there.
So tomorrow, I’m going to sit and think and make a god damned chart, so I can have a set pattern across all subthemes (e.g., Image5 is for alternate comments, Image10 is for the post background).
As they say, hindsight is 20/20.
Oh, btw, I’ve named the first three subthemes “Leather” (brown and tan spaceship interior), “Saturn” (white, black, and dark teal; very clean and high-contrast), and “transmothra 3.0” (black, smoky indigo, and blue) (this last being a bit of an homage to the final version of my very nicely done old site, thankyouverymuch).
Now that I’ve said all that… it’s probably going to be another week before this thing is actually ready enough to be unveiled. It’ll be worth the wait, I promise.
Sigh.
I really only have one thing left to do before I upload and activate the preview of the Big Urgent Wish WordPress theme. It’s a bit of a killer. It’s actually quite easy, but the logistics are making me swoon a bit just now. Mind you, once I have it all down, the installation will be a breeze for anyone familiar with the mind-bogglingly super-easy process of downloading and using a new WordPress theme. (The basic gist is this: download a theme, upload it to your Themes directory, and then activate it. That’s all there is.)
Here’s what I gotta do: because my theme uses semi-transparent PNG graphics for backgrounds in some places, any version of IE under 7 will not display them properly. Therefore, I have a browser sniffing PHP routine to determine what, exactly, the platform/browser are… and, hence, what the User Agent is capable of supporting (assuming UA string spoofing is not taking place).
Thus, by renaming *.css files as *.css.php (the “.css” bit is unnecessary but useful), and by parsing those files as CSS (after, of course, being processed as PHP), I can substitute GIF images instead for the crippled masses.
However, this entails a bit more typing and rearranging than I care to stomache today, so I will put it off until tomorrow (a day off from work).
Incidentally, the name “Big Urgent Wish” came to me one day as I was at my day (read: night) job (answering e-mails for a big-name online fashion retailer), extrapolating on some of the strangely translated phrases we sometimes get from non-English speaking customers abroad. This is not a phrase that was directly written out by anyone, it’s just something I thought up while trying to come up with something to top a goofy phrase I once read. As an aside, I embrace non-English speaking peoples… and, equally, the unusual and poetic, evocative turns of phrase that they can sometimes be capable of producing. Isn’t language even more wonderful from alternate angles?
Categories
New look
Using Rob Ballou‘s Styleswitcher, the previous version of which i used on my last site, i’ve uploaded a new PHP-driven stylesheet-switching system. You can see on the left hand side that there are now options for the color scheme, the font size, and the font face (serif or sans-). I also changed the default from a black background to a white one to make it look a little less like a 13-year old Marilyn Manson fan with some design potential did it.
Not very friendly towards IE6-, but IE7 is around the corner, and you should be using a better browser anyway.
Categories
Portfolio updated
Finally! My online portfolio is nearly finished… The only thing left to do now is to acquire the main files from my most recent project and remove all proprietary informations.
I thought i’d NEVER get that shit done. That last one was a bitch to nail down – it turned out that it made much better sense to lose the damn b2evolution blog and just write in static content.
Categories
busy
I’m working on getting my legacy sites ready for an online portfolio to be presented here on this site.
The unfortunate thing about being a relatively-inexperienced web designer/developer is that most of your clients will be fairly small outfits and that much of your work will be necessarily pro-bono, or close to it. This means that many of them won’t be around for a very long time. In my case, none of them are. I think the Tecumseh Local Music Boosters may still maintain a site somewhere, though probably one with tildes in the URI that i’ll never be bothered to really track down, because it’s probably no longer my work being displayed there.
On to the point: this means that i have to re-build all of those old sites from the archives. Which, in turn, means trying to get code written a pretty long time ago (by www standards) to work. That’s not much of a problem, in most cases, because i at least had the foresight to include some useful future-compatible functions, the most underrated of which is the doctype declaration.
Regrettably, i don’t remember how some of the functions worked, and i don’t have much time to figure it all out.
The worst part, though, is that the one of the coolest sites, for a sadly defunct print magazine, won’t work locally, and i think it’s because i no longer have any idea what kind of a server environment it was written for.
So take this to heart, fellow amateurs: always, always, always include copious comments in your PHP, and archive a copy of the phpinfo() that you generated at the time (when you were literally losing sleep trying to iron out that one nagging bug). Mirror the damn thing live if you have to. This will save you in the long run, when the site goes belly up, and you have to prove to potential employers or clients that it existed outside of the sick, narcissistic fantasy world inside of your head. You won’t look like a blowhard when you can at least produce a working copy. Right now, i’d settle for just some screenshots of that magazine site.
Speaking of which, i can at least produce a static HTML version, using archive.org for the markup and my backup image files for the graphics. So all is not completely, irretrievably lost.
But i’d rather get those bugs ironed out. I just need a lot more time than i can actually come up with lately.
Categories
new items
Spiffed up the navigation menu a little bit to have submenus, via Suckerfish. Added some poems, grouped mainly by the volume of work from which they spawned.
At least one is a song i’ve been working on for many years, which may soon see the light of day, finally…
Have a lot of catching up to do in many areas. Off to bed with me!