I recently discovered that my page navigation was not letting users get past the first page of posts. Utterly annoying. Then I switched to the default theme temporarily. Whoops. Doing so resets all of your widgets and everything. Forgot about that one. Now I’m just fed up and want to redesign it altogether. So you might be seeing the elegant twentyten twentyeleven theme for a little while.
CSSEdit Override Generator for Drupal Stylesheets
If you are familiar with Drupal and the way it outputs stylesheets, you’ll understand how this works. As a precaution to force web browsers to load a fresh version of the stylesheet(s) every time, Drupal appends each stylesheet link with a variable. This forces web browsers to think that it’s a new stylesheet every time, thus it never loads an older cached version. Here’s an example:
http://bloqhead.com/somestylesheet.css?a
This is all well and good and can be extremely handy when heavily styling a Drupal template. It prevents you from having to force your browser cache to empty on every refresh.
The Problem
The problem I ran into is that stylesheet overrides in CSSEdit can not be appended with a wildcard. So in order to keep my overrides intact while styling on my local machine, I would have to add an override for each and every stylesheet URL including it’s random-generated variable.
What The Hell is an Override?
In CSSEdit a stylesheet override is a way for the user to apply their style changes to a live webpage on the fly. It speeds up stylesheet deployment and development rapidly and has become an absolute must have in my daily design tool set. With CSSEdit you can open your CSS file in one window, and open a separate Preview window. The Preview window is very open-ended: You can either set your local stylesheet to override a stylesheet on a live webpage, or you can make it override a stylesheet on a local file. The advantage to this is that every time you make a style change, the changes are reflected on the webpage you are previewing. There is no need to refresh or save your CSS file. The Preview window updates as you type new CSS declarations. I can’t even count how many hours this feature has saved me.
This is what an override looks like in a CSS file edited via CSSEdit:
/* @override http://bloqhead.com/style.css */
This is a proprietary comment that will tell CSSEdit to override the stylesheets listed within the override comment.
The Solution
I discovered that Drupal’s method for appending stylesheet links is simple and only appends a single character from A-Z, a-z or 0-9. This is most helpful because if it generated a random set of characters every time, there would be no way for me to even attempt this. So in my spare time I developed a simple web form that will allow users to generate all of the overrides required to avoid the pitfall I encountered. It took me about an hour to create and has already proven itself useful. Behold!
Daryn’s fancy CSSEdit Override Creator for Drupal!
There you have it. Simple.
Expand A Container With jQuery and a URL hash
A while back I was trying to devise a way to make a section of a page expand or “reveal” without having to direct users to an individual page for each piece of information I was delivering. I was unable to find a definitive method for doing this in a simple way, so I consulted with my trusty sidekick jQuery. What I ended up with was a simple, elegant way of revealing portions of page content when the user went to a URL appended with the hash ID of the element to be revealed.
Before we get started
Before anything else, we need to hide the definition descriptions (dd) from the user. We can do this with one fell swoop. All that is required is some simple jQuery.
$('dd').hide();
Grabbing the URL
This small string of code will traverse the current URL of the open page and find only the hash at the end. The hash is what matches to the ID of the container you want to reveal. We’re going to make a var out of it since we will be using it more than once:
var url = self.document.location.hash.substring(1);
Using the URL
Now that we’ve grabbed the URL’s hash, this is going to be what makes the whole thing function. Since the URL also represents the ID of the container we want to reveal, we’re going to map it to some jQuery effects–primarily slideDown and addClass. The advantage of this is that a little extra work and experimentation allows you to use various effects and DOM manipulations. I decided to keep it simple:
The slideDown effect — This will go to the immediate dd after its corresponding dt. Using a definition list proves most effective since a definition term is always accompanied by its definition description immediately after.
$('dt[id=' + url + ']').next('dd').slideDown('fast');
Now we add the class “active” (optional but has a cool effect and helps the end user).
$('dt[id=' + url + ']').addClass('active');
Now we’ve got the major functions out of the way. The next step is to make the dt elements clickable so that the end user can expand and collapse each corresponding dd as they see fit:
$('dt').click(function () {
$(this).toggleClass('active');
$(this).next('dd').slideToggle('fast');
});
The toggleClass will do exactly what it suggests. It will add and remove the specified class on the corresponding element when it is clicked or interacted with. This is one single effect, as opposed to doing something like removing the class on mouseout and adding it on mouseover. The .next() will apply the slideToggle effect to the dd immediately after the corresponding dt. Simple and effective. If you aren’t keen on using a definition list, you can always use div containers or whatever else.
Now we’re going to add some extra controls just because we can (and because it’s super easy). The first one will collapse all dd within the definition list. First, we need to have an href tag that has the class hideall. I used classes for these in case we want to have some controls at the top and bottom (good idea if you have a lot of content blocks that you want to apply this functionality to).
<a class="hideall" href="#">Collapse All</a>
And this is the jQuery function that makes it work.
$('.hideall').click(function () {
$('dd').slideUp('fast');
$('dt').removeClass('active');
});
Now we have our expand control.
<a class="showall" href="#">Expand All</a>
And the function that makes it work.
$('.showall').click(function () {
$('dd').slideDown('fast');
$('dt').addClass('active');
});
Simple enough. These last two controls are completely optional but also helpful. If the end user expands a bunch of the expandable boxes and they don’t want to close them each individually, they can hit the “Collapse All” button and they’re all set. Here is what our finished javascript looks like.
$(document).ready(function(){
// get the URL hash
var url = self.document.location.hash.substring(1);
// hide all dd on initial page load
$('dd').hide();
// expand id via url hash
$('dt[id=' + url + ']').next('dd').slideDown('fast');
$('dt[id=' + url + ']').addClass('active');
// make items expandable and collapsible on click
$('dt').click(function () {
$(this).toggleClass('active');
$(this).next('dd').slideToggle('fast');
});
// hide all
$('.hideall').click(function () {
$('dd').slideUp('fast');
$('dt').removeClass('active');
});
// show all
$('.showall').click(function () {
$('dd').slideDown('fast');
$('dt').addClass('active');
});
});
If you want to see this in action, check out my demo.
This method is really easy to manipulate and can be repurposed to do a lot of things. I’ve had this tool in my back pocket for quite a while and have been meaning to share it. I hope you find it useful and let me know what you come up with.
Scratching The Surface of A Glass Ceiling
Fuck off, AT&T!
It seems like the phrase “bandwidth caps” is quickly becoming synonymous with internet service providers here in the United States. Once a term that we celebrated and often times saw as the buzz word for whether or not we bought a company’s services, “unlimited” is quickly being phased out in favor of limitation. While a good amount of users won’t be affected by the caps, there is a much larger impact than on the personal level alone.
I’m currently an AT&T DSL user and have been fairly happy with the service. I recently upgraded from 3 to 6MB (6 wasn’t available for a while) and have seen a big difference in my download speeds. My friends and acquaintances know that I am by no means your average internet user. I’m constantly streaming, downloading or connected in one way or another. Whether it’s on Xbox LIVE, MLB TV or via wifi on my HTC G2, I’m connected. Metered internet service raises a red flag for me on multiple levels. If I were to begin with the personal level, I would say that it will indeed hinder my internet use considerably. I’ll have to throttle back my downloads and reconsider my streaming services. I’ve almost reached 150GB of transfer for a month that hasn’t even ended yet. What these large corporations don’t realize is that it has an adverse effect on the internet as a whole.
An aspect that I think most people overlook, myself included (until I read CrackerJoe’s Reddit post on the matter), is that web developers and programmers now have to re-think data delivery strategies for their web applications and media formats. If Hulu and Netflix want to stay afloat they’ll need to entertain the idea of having to optimize their data even further, or even redesign their websites to be more lightweight; in an effort to offset the load. Streaming websites such as Netflix, Hulu and Grooveshark transfer large amounts of data on a daily basis and have become hugely popular. It’s quickly becoming a slippery slope that only benefits the ISPs implementing caps. Don’t you worry though. I’m sure in the wake of negative backlash that such ludicrous limitations receive, these companies are conjuring up new names for the same old networks and services (U-Verse, LTE, 4G, 3G, etc.). A glossy new marketing campaign always does the trick, right?
A Dash of Conspiracy Theory
One would say that “conspiracy theory” is a bit of a stretch when labeling this but I’m at a loss for a better phrase. Broadband internet providers are conspiring to shut down streaming services (remember, we’re still on a theoretical level here). AT&T wouldn’t want Netflix to impose a threat on their beloved U-Verse now, would they? For those that are not familiar with U-Verse, it is a pay-TV service that AT&T provides via DSL. Essentially the same concept as Netflix and Hulu. Of course if you give into the beast that is AT&T and you have their U-Verse service, you get an extra 100GB per month of extra bandwidth (standard AT&T DSL users like myself will get a 150GB cap while U-Verse offers 250GB).
It’s obvious that caps are coming into play to protect company interests. Streaming services means more and more users are abandoning satellite and cable television, in favor of the leaner, more streamlined approach of entertainment delivery. So if companies like AT&T can hinder these providers while pushing their own streaming services, it’s a worthwhile business plan. What better way to stay alive than to eliminate the competition altogether? It’s been apparent for decades that corporations only care about one thing and that one thing is not the end user–it’s the bottom line.
Speak your mind by canceling your service in favor of one that does not impose bandwidth caps. If they see a large influx of service cancellations it’s possible they’ll change their tune. I’d love to hear the Google team’s thoughts on caps, especially with Google TV in the wild.
Update
Today I learned why nobody is interfering with AT&T’s purchase of T-Mobile. Here’s an excerpt from the site included in the Reddit post:
News reports in December 2005 first revealed that the National Security Agency (NSA) has been intercepting Americans’ phone calls and Internet communications. Those news reports, plus a USA Today story in May 2006 and the statements of several members of Congress, revealed that the NSA is also receiving wholesale copies of their telephone and other communications records. All of these surveillance activities are in violation of the privacy safeguards established by Congress and the U.S. Constitution.
Wow, I feel so much safer knowing that my once T-Mobile network will now be under surveillance by the NSA. So what are your recommendations? How’s Verizon? Sprint? There’s no way in hell I’m sticking with T-Mo…. AT&T.
Oh, I nearly forgot. To make things even better, T-Mobile 3G devices will have to be replaced over time. So basically that means the HTC G2 sitting on my desk is virtually worthless. That’s right. The phone I’ve had less than 6 months is essentially a paperweight. I can’t even sell it.
So here’s to monopolies and government surveillance. I hope you all rot.
Google Groups spam
^ makes more sense than this shit >
Over the past week or so I’ve been receiving spam emails via a Google group that I was somehow subscribed to. I don’t know how many of you out there use Google Groups avidly, but I am not one of those people. I see their value and I’ve used them on occasion for technical assistance on previous matters, but that was the extent of it. My inbox already has enough clutter. I was trying to figure out how I could be receiving emails from a group I had never knowingly subscribed to and that’s when I stumbled upon this gem.
I’m not into this group stuff…
First and foremost, this post is also a prime example of bad user experience. I had to search all over Google Groups in order to change these settings. By default Google group owners can add any user they please to their group. This is the equivalent of being added to a mailing list without opting into it. A giant red flag in my book. There is a simple way to disable this but finding it is another story. Instead of giving you step-by-step instructions on how to arrive at your membership management page, here is a link to it instead. Why did I do this? Because I can’t even figure out how I arrived at this page to begin with. That’s right. I can’t even figure out how I got to this membership management page. Fortunately I saved the link.
Once you’re at this page make your settings look like this:
The first one is optional but I made sure to set it. Whenever I resort to a Google group, I find it myself. I already receive friend requests from practically every social network on the face of the internetz. Do I really need them from Google groups now? The second option is the treasure we’ve been searching for. This is something that should be set by default, otherwise any person with a group can add you without your consent or approval. Come on, Google. You know better than this! To be fair, Google outlines their reason for allowing direct adding by default on this page:
Google Groups allows group owners to directly add members as a convenient way of transferring groups from other services. We don’t intend for this to be used to build lists for unsolicited email; we don’t like spam, and using the “Add Members” feature in this way violates both the spirit of Google Groups and our official Terms of Service. If you think a group owner is abusing this feature, please let us know about it by clicking the abuse report link at the bottom of the subscription email you received from the group.
Hopefully they are on top of spam reports and assess them in a timely fashion. As a courtesy to the 10,000+ people receiving spam from the aforementioned group, I sent out an email to the members that outlined how to both report the group to Google and how to prevent this from happening to them again.
Funny Call of Duty: Black Ops Emblems
During lunch with a coworker we were trying to find some humorous Call of Duty: Black Ops emblems and quickly discovered that there was no central place for them. So I got the idea to create a Tumblr blog that catered to people like myself and my coworker. Behold, a showcase of human anatomy in primitive shape form, amongst other monstrosities — Funny Call of Duty: Black Ops Emblems
If you or someone you know has a funny emblem, please submit it. The more the merrier.
Just a forewarning: People make a lot of phallus-themed emblems. I’m not responsible if you’re easily offended.
iPhone 4 vs. HTC Evo [video]
I don’t normally post things of this nature but this video is absolutely hilarious. Despite my love for Macs, I’m a huge fan of Android (fandroid?) so this killed me. Also, this is kind of NSFW. The video is vulgar and the site has some content that might not be suitable for innocent eyes, yadda yadda. Yeah, I just yadda yadda’d a disclaimer. Video at the break.
Listen to The Entire Red Dead Redemption Soundtrack
John Marston is the man.
I recently completed all the main missions in Red Dead Redemption and still continue to play it. Since the day I purchased this game at my local Best Buy, I have not been able to put it down. Everything in the game is sublime and the soundtrack is by far one of the best I’ve ever heard on a video game. If you own an Xbox 360 or a Sony PS3 and have yet to play this, do yourself the favor and pick it up. Rockstar has managed to craft perfection into a game. The characters are some of the most memorable I’ve ever encountered in any title, the storyline is compelling and the overall presentation is stunning.
Now onto the whole point of my post. Recently a fellow Redditor posted a link (please upvote!) to listen to the entire Red Dead Redemption soundtrack on YouTube. Needless to say, I was pretty happy about this. “Deadman’s Gun” is one of my favorite songs right now and the entire soundtrack follows suit. It gets better. You can also purchase the OST on iTunes for a mere $9.99. I highly recommend this one.
Sidenote: If you haven’t beaten the game yet or you’re thinking of purchasing it, please refrain from reading the comments on each of the tracks on YouTube. A lot of people post spoilers regarding events in the game.
Upgraded to WordPress 3.0 “Thelonious”
After a case of the “white screen of death” for both my administrator panel as well as the front end pages, I was able to get WordPress 3.0 installed. Sure, I had to delete all of the files in my httpdocs folder and upload everything clean, but now it’s working and that makes me happy.
WordPress 3.0 “Thelonious” has some awesome new features that I’m excited about and the video below will help illustrate them.
Carol Zara Featured on G4TV’s Women of The Web
Wait, what was I talking about?
My sexy Brazillian blogger pal Carol Zara was featured on G4TV‘s Women of The Web today. If you’re into video games, blogging, pop culture and other things that some might refer to as vices, she’s you’re girl. I help her out with her website from time to time and frequent it for a laugh.
Check her out on G4TV’s Women of The Web. You won’t regret it. You can also follow her on Twitter or checkout her website DigitallyBlonde.com.