Well, here it is.
It's a bit like the old style in layout, probably because I am familiar with it's ins and outs, and felt bad trashing it outright. The image replacement for the titles is new, though I am not sure I'm gonna stay with this font for long -- I'm auditioning others, but as its just PHP rendering the font, it can be pretty raw. I actually had to write my own function to adjust the tracking because as-is, it was all squeeshed.
Some little things like tags (finally, duh), and a completely redesigned backend (thanks mostly to the code I wrote for the WBA; that project is still moving forward, if anyone is curious). I did a lot of code trimming and reorganization to make the site easier to maintain.
As it is, the amount the site scrolls at 800x600 is minimal, which makes it even more annoying. I'll probably end up sawing a chunk out somewhere to accomodate those folks. I do believe in "accessibility"; my bluster was just that. Right now I am typing in the backend entry-adder doohickey, which, if you checked out the above screenshot, I've styled with the Segoe UI font—the same font that will be the default on Windows Vista. It is a beautiful font, very very easy on the eye, so if you have the means to pilfer it early like I did, I recommend you do so. Heck, if you're intrigued, whisper in muh ear and I'll see what I have layin' about.
Anyways, here it is. Still some bugaboos floating around, especially with Opera and IE. Actually there's a wierd one involving FireFox's rendering of form fields relative to timed-out DHTML, but after looking at the site with the FF 1.5b1, it seems like they've fixed it, so I'm not too worried.
Bah. I'm Too tired to ramble any more. I like it, and I hope you do too.
High Time for a New Coat o’ Paint
As with lots of things in my life of late, I am in the process of totally overhauling this site. I’ve been working on this redesign for about 10 weeks, on and off, and it is getting to the point where it is ready for prime time.
I’m excited, frankly — and though it runs completely contrary to my nature, I have managed to keep it under wraps for a long time (not even leaving a trace of the development branch in anyone’s logs, I don’t think). I can say this, however:
- It’s heavy, but it has options.
- It’s not for the three people still at 800x600 (get a real computer).
- For the first time ever, I have managed to stay excited with a theme for more than 2 weeks.
- It is, by my reckoning, the thematic opposite of this crappy cardboard thing you’re seeing now.
- To wit, it’s nice to look at.
- It’ll be done in October.
Stay tuned, eh? :)
Make XP Look Like Longhorn/Vista
The Royal Inspirat Special Edition theme for Windows XP by Stefanka is by far the coolest theme I’ve ever used, and I’ve waded through hundreds of them. It’s nice to change your desktop theme once in awhile. It’s much like changing your sheets–or getting a new shower curtain.
This theme is based loosely on Microsoft Windows Vista™ (heretofore known as Longhorn), which, if the beta releases are to be believed, will feature the Aero theme. Aero uses the Segoe UI typeface—quite an improvement over the XP standard Tahoma font. The icons are very cool too.
The best way to use Microsoft’s Visual Styles–without the overhead and adware silliness of a binary like TGTSoft’s StyleXP–is to do a little dll shuffling. Here’s a short article on how this is done. If you do decide to switch out uxtheme.dll, be VERY careful to obtain the version of the DLL that corresponds to your service pack and build (a four-digit number, normally beginning with 2***).
Happy stylin’. ◊
Update
Thanks to Jason J. Thomas for dropping a link in the comments to a page that shows you exactly how to extract the proper DLL using a purpose-built utility. Again I can't stress enough that you need to know your shell build (i.e., which Service Pack you have).
My First website
Thank fsck for Yahoo, in that they never let such a wonderful, aesthetically sound chunk of historical record die.
Obviously, this is before I found the secret to image optimization. And Java, well, I don't know what I was thinking there.
Giving in
A long time friend of my family who happens to be an incredible graphic artist recently suggested (nay, ordered) me to get with the program and buy a Macintosh, as it is the only type of computer I do not currently own, and my familiarity with BSD will make it a snap to learn. He was really suggesting that I dump Paint Shop Pro and learn Photoshop, as its UI is the lingua franca of the web design world, and he believes that I can "do far better".
Putting the "better" backhandedness aside, I have come to agree with his premise. (Of course V, you were right all along.)
The problem is, of course, that I have 0.00 clue about what my future Mac should look like, cost, etc. I know there are a few mac types that stop in here regularly, and I am openly asking for your advice, or perhaps a point in the right direction vis-a-vis websites, etc. Some tips on where to (eventually) buy Photoshop would be appreciated too. ◊
Hinkybox Redux
Well, here it is – the much ballyhooed rebirth of hinkyboxdotcom!
Returning to the fold, I've gone out of my way to create a 100% standards compliant and toes-up dynamic website.
The code for this site is substantially built on the souped-up and trimmed down wheatblog 1.0 project, currently in a state of almost-pre-release-abilty. Some of the more ancillary features do not yet work, such as the “open” commenting system cookie, the mass-media rss feeds, and the networking notebook. I plan to bring those loose ends up to snuff at my leisure; afterall, the hinkybox abides.
Certain other details worth mentioning: I finally got the nerve up to implement niceUrls with mod_rewrite, taking special care to redirect all the old post links indexed by google to their new locations. Now I am dilligently working to squash all the straggling query strings as I come upon them. The upgrade to the new wB1.0 database structure required a completely bizarre and labor intensive rebuilding of the database, involving me, a dusey of a custom php script, and lots of Dr. Pepper and Camel Lights.
I added two stats packages I had been fiddling with — phpsysinfo for remote hardware/network/memory monitoring, and I completely integrated the BBClone "web counter on steroids" system for anywhere, anytime web statistics – a very, very handy feature.
Of course I can't take credit for all of the backend work — most of the wheatblog code was created by James Martin and turbocharged by Peter Salzman, but I paid enough attention to the CVS updates to know how things work, and hacked them accordingly. All of the CSS and artwork is mine, though. ;)
As is the norm around here, the site is in the poke it with a stick phase, so if you see anything bizarre happening, leave a comment or contact me the oldish fashioned way.
Well, that's pretty much it. I should have the comment cookie system up and running within a few days; I took my final exams today and I have a pretty clear schedule, so expect more regular posts. I might even go outside with my dog and get some sun — one kanever kanows. ◊
Mastheads: The Way of the Hink
Mastheads: The Way of the Hink
Masthead Images With Paint Shop Pro
Recently I was asked to jot down a few things about how I work with Paint Shop Pro -- I use PSP because I started with it about 5 years ago, and now a switch to Photoshop, though probably a good idea in terms of "valuable work experience", is damned near impossible. I have settled into a rapid and shortcut-driven workflow with PSP, and whenever I have tried to achieve the same proficiency with Photoshop (numerous times), I become frustrated with my lack of familiarity.
The subject here in particular is the banners at the top of my pages -- although I feel as if I am in a rut in terms of layout (long horizontal bar with a gradient and the logo positioned on the left), sometimes it turns out okay. For this particular banner I decided to go with a fractal pattern to add weight and interest to the otherwise plain header.
Firstly, it is necessary to establish the size of the header - in this case, I use a repeating CSS background image set at a specific height. Here it is 69 pixels high; no particular reason why, but I like to keep it under 100 pixels, as I have adopted that as an arbitrary rule in my head.
I create an blank image with a transparent background,
keeping in mind the ultimate width, as I use a collapsing, percentage-based tables
layout, and if the image within the table row is too long it tends to go bonkers at low resolutions like 640x480. With this layout I broke this rule (resize under 800x600 to see it go hinky) because I assumed that
people using 640x480 need either get new glasses, or a new computer.
I fill the background with my color of choice - usually white. I zoom in to save my poor eyeballs some strain, and then I create a new raster layer in my layer palette. I leave it transparent. I have become pretty disciplined about using layers, and when I did finally realize how to work them, they opened up a whole new scope of design flexibility. For the sake of my own sanity, I also name the new layer background gradient.
I usually futz with the gradient's position and curve by using a bounding box of the right size (as the gradient is applied top-to-bottom in relation to the size of the selection). After I get it where I want it, I apply the gradient.
The most valuable tool I have in this arena are two gradient presets I created myself, which consist of a simple semi-transparent gradient fade adjusted to two levels - sharp and medium. The actual color of these gradients is determined by the background-color I have selected in the Materials palette.
Here are the background-fade gradients if you want them. Just unzip them and stick them in My Documents > My PSP [version number] Files > Gradients. I also have the hex-sorted swatches (#000 - #FFF) -- these go in My Documents > My PSP [version number] Files > Swatches.
I use these gradients for lots of stuff. To add molding and horizontal detail, I change the color of the gradient (controlled by adjusting the background color in the Materials palette).
Also, selecting the gradient properties tab allows you to change the direction of the gradient. For a quick change you can invert it as I did here for the bottom horizontal detail, in pine green.
Here, however, I am unsatisfied with the look of the green, but I like the shape of the gradient. what to do? Well, I open up my trusty Colorize filter (Adjust > Hue and Saturation > Colorize) and play with it until I get it where I want it (I have a lot of presets in this filter too, as once I see a hue/sat I like, I keep it - a great feature of PSP).
Once I get the coloration in line, I temporarily merge the layers. By pressing Control-C (copy) and then immediately pressing
Control-V (paste as new image), I have a completely independent image from which to create the banner background. As I said before, I use CSS to establish the background repeat, so I usually snip the image off at 10 pixels wide by selecting the area I want and cropping the image with Shift-R.
I then save it as something like mylayout-banner-bg-rep.gif. When saving, special care must be taken to NOT optimize the GIF, as it is crucial that the image
be exactly the same horizontally as the resulting banner; in point of fact, I never optimize any of my images, as most of them are so small that the space saved is minimal
and the palette corruption is unacceptable. If you did it right, the image looks like this:
The CSS looks like this:
<!-- CSS --> TD.layout-logo {
margin : 0; padding : 0; color : #000000; background-color : #ffffff; background-image : url(mylayout-banner-bg-rep.gif); background-position : 50% 0%; background-repeat : repeat-x; border : 0 none inherit; }
<!-- end CSS -->
And all stuck together, it results in something like this:
* As an aside: If you have issues with odd vertical lines in your repeat, chances are you had anti-aliasing turned on on the Selection tool when you created the 10-pixel marquee. This happened to me a dozen times before I figured out what the hell was doing it, so I reckoned I would mention it to save you some grief.
Now, keeping my train of thought intact, I immediately return to my multi layered image and hit Control-Z to un-merge my layers (for safekeeping). Often I close the image I created, so it does not clutter my workspace and confuse me later, as I have learned that any ten second distraction can ruin a good run of design success. This might be a good time to save your image and establish a way point. In case something drastic happens you will not have to start over from memory.
This next step is a little fuzzy. I usually spend some time searching Google's image search for something I dig to add as a design element. This can take awhile, and more than a few times it ends in frustration, but there are lots of images to plunder out there, so don't give up too fast. For my banners, and for this example, I used images made by a guy who does some pretty amazing fractalscapes (a hobby I used to have back in the days of DOS) with Fractint and UltraFractal. I right-click, select Copy Image, and then minimize my browser window.
Opening my working image in PSP, I press Control-L, which pastes the fractal image as a new layer on top of my work. It is usually much larger than the dimensions of my banner, but that is alright.
I then name this layer "fractal overlay". After I get the image where I want it, I select the part of the image I want to use.
I then invert the selection (Selections > Invert or by pressing Control-Shift-I). Pressing delete at this point eliminates the fringes of the image, or what I don't want to keep around. Keep in mind that Control-Z is always there for you to undo a mistaken action.
The layer consists of the portion of the image I wanted, but most likely not in the color scheme I wanted. Once again, I can use the Colorize filter to get this to my liking. I never usually have a scheme in mind, I just wing it. In honor of the guy who requested this tutorial, here I went with a loud color.
Now that I have the layer in place, I have to manipulate the alpha properties to achieve the desired effect. In the layer palette, controls exist for the layer's transparency as well as specific filter types; I like to mess around with both of these settings until I have what I want. A word of caution about layers - a deep undo is not something you should rely on, as you might have done something in the interim of the work flow you do not want to destroy. To avoid the frustration of this problem, I suggest making a duplicate of the layer you are working on before you make any radical changes, and then hide it in the layer palette (click on the eye). This is is where being disciplined with naming your layer is important; Imagine this image, my template for the banners of this site (zipped pspimage format) without layer names - it is a nightmare, trust me.
I then use the erase tool, set to a low opacity, to remove the hard right edge of the layer so it appears to blend with the original gradient.
Sometimes this requires a deep zoom to make sure you get all the small bits on that end, because the GIF palette compression algorithm can really make such an error stand out, and that really blows after you have saved it and put it in place.
And there you have it! I know, it is not exactly striking right there, and the text can be a hassle (I am too tired to explain in this tutorial, and besides, I still suck at typography), but with a little patience and some exploration of PSP's features, you can really make some cool stuff happen. Any questions, or any points you think I failed to elaborate on (I am not the best teacher in the world, I know this), please leave a comment and I will spit it out. ◊
CCNA Class Notebook (deprecated)
Discussion on VLSM
Notes: None.
Comments: None.
Unit One Resources
- IP Subnetting: Practical Subnet Design and Address Determination Example
- http://www.tcpipguide.com/free/
- IETF RFC 1817
- http://www.hinkybox.com/getrfc.php?index=1817
- IETF RFC 1518
- http://www.hinkybox.com/getrfc.php?index=1518
- IETF RFC 1519
- http://www.hinkybox.com/getrfc.php?index=1519
- What is VLSM? from faqs.org
- http://www.faqs.org/faqs/cisco-networking-faq/section-37.html
- The Use of CIDR With Routing Protocols
- http://tcpmag.com/qanda/article.asp?EditorialsID=175
- CCNA 3 Overview - Translation from (suckass) PDF format
- http://www.lancaster.ohiou.edu/cisco/
Update Monday, 6/20/2005
The CCNA Notebook section of Hinkybox is currently offline, And will not be returning.
There are, however, future plans to rebuild and relaunch the RFC repository, which will be located in its own subdomain.
Thanks for droppping in. ◊
Nascent Development
Well, here it is. My first actual "development" -- a couple of things more tangible than a website that is never completed, or a blog that never gets posted to.
- hb_notes :
- This is a php-and-mySQL based system that will allow me to take notes in class from a remote location, and subsequently edit, compile and print them from an administrative interface. Very handy functions will be a permalinking system for accurate chronological ordering and archiving, and a fully functional (and cooperative) HTML-based user input -- none of this weak and flawed BBcode junk.
Timetable: None at present. - y!favs :
- A continuation and polishing of my Yahoo chat add-on that allows users of Ymsg.exe to replace the annoying adspace window at the bottom of the screen with a scrolling list of thier favorites, as well as an integrated Google search function. The code for tthe chat side exists, [Demo][Screenshot] but I want to make a back-end scripting system that allows other users to first compile an individualized list of favorites, and either pull this add-on from a directory created under their local Yahoo folder, or from a remote URL (perhaps hosted on this site, who knows).
Timetable: 2 months.
Update Monday, 6/20/2005
Yfavs! was finished but never distributed. HB_notes became the CCNA class notebook, a successful, if seldom-used pseudo-blog, and has since been deprecated in favor of a unified, object-to-category journaling system—the one you are reading right now. ;)