Poppy, clicky, high-latency onboard soundcard wrecking your music production times? ASIO4all to the rescue

There's a scourge that messes with poor music producers everywhere: the crappy onboard sound cards that come with Windows laptops and desktop computers. They're ultra-slow. So when you hit a note on a midi controller or whatever, it takes forever for that note to get processed by your software synths and come out the other end. And the pops, clicks, ticks etc that interrupt your sound, wrecking your concentration. So you absolutely must spend at least $300 on an external USB soundcard or something.

Except that the problem isn't the crappy soundcards themselves, it's the crappy drivers written for them. So why not just have a good driver? Well, that's what ASIO4all is: a low-latency, universal audio driver. So now you can keep your crappy onboard soundcard and use your laptop as an autotune box. Or whatever kind of pedal you want. And you can leave your expensive external extremely buggy soundbox that crashes your laptop at home. Let it gather dust.

Having trouble converting crazy video formats to proper mp4s for editing?

Yeah, sorry, you can't do anything with that cellphone video because it's in some stupid format, right? and yeah no your conversion software will convert it... into some special magical mp4 file that can be played by your player but not opened by your video editing software... especially if you're trying to use Ableton Live for video editing. Which you can do. It's great. Shut up. It's awesome. It can only open mp4s and movs if you have QuickTime installed and nobody bothers to document that but whatever, that's OK. It's software. Accountability. It has no meaning.

So anyway, give up on your encoder and just upload the offending video in its crazy format to Google Drive, or YouTube, and then rip it back out of the YouTube player using Firefox Video Download Helper.

Yet another classic instance of having to use software that's legal but in the process of getting shut down for enabling hacking and piracy, in order to do something that's totally legal, but made difficult by companies that want you to pay for your right to edit the videos that you yourself record using the camera in your phone... instead of just sharing it.

So, yeah, the solution is basically to share it, to nobody, then rip it, using software used almost exclusively for piracy, and then you can edit it. Don't be surprised if you can't even see the video clip when surfing your cellphone's hard drive from your PC while it's tethered. Maybe it'll be visible, maybe it'll be invisible. It's software. Literally half a person at Google cares what your experience is like with it. There's somebody around there that's just a pair of legs (no ears so they can't hear your usability problems).

Removing the Dynamic Views menubar and gadgets bar from your Blogger layout

All it takes is a little CSS, and you can say goodbye to these two pesky things:

Paste this into your "add CSS code" thing in the Advanced part of the Template Editor:

.header-drawer, #gadget-dock { display: none; }

Styling Blogger's label filtering message

When you go to a page that displays all posts with a certain label, Blogger puts a note at the top of the page to let you know about the filter. This thing which I have hilighted here in yellow:

But I wanted to change it so that it just had the filter name, as a title, and nothing else.

Here's the code I used:

.status-msg-body {
text-align: left;
color: white; /* Set this to your background colour to make the message body invisible */
background-color: white;
}

.status-msg-body b {
font-size: 2em;
font-weight: normal;
color: black; /* desired font colour for the title */
position: absolute; /* this positions the title in the top left of the box so that it's not being positioned by a bunch of invisible text around it */
left: 0;
top: 0;
}

.status-msg-body a:link {
display: none; /* removes the show-all-posts link */
}

And here's what it looks like now (not perfect, but it's a start):

Next, I'll make some more fixes: adding a text-transform to .status-msg-body b so it's capitalized, and fix the font. I'll do that by adding ".status-msg-body b" to a current selector that's providing the styling for my other titles. Good as gold!

Okay, so I'll lazily fix the margins so it lines up with other stuff: margin: 0 .45em;

So here's what it finally looks like. Pretty smooth:

Filtering Blogger posts using multiple labels

I've been wondering for some time now about how to filter a post feed using combinations of labels, like if I want articles about Usability that are also about Windows. I've been thinking of categorizing each of my posts according to which audience they're written for, so that people can filter my other categories by the audience as well.

I've seen this in user interfaces before, but I need to learn the terminology so I can continue my research.

In the meantime, I discovered an easy point of access: The URL itself. Google built some logic into these URLs:

So this link will bring up a feed of articles that have a combination of three different labels

All I need to do is find some Javascript to make the label buttons correspond to what's in the URL, and also affect it when they get toggled on or off.

For the interface, I want to essentially have the functionality of groups of radio buttons and checkboxes that we see in desktop operating systems and advanced searches.

I don't feel like this is a big enough task to require advanced javascript libraries. I just need to be able to add and remove a series of labels from the URL.

Google does the right thing about the Blogger Nav Bar

It's a time for rejoicing, not only in less sketchy CSS code needed but also in the reaffirmation of Google's intentions for us: it wants us to use its software, even if others don't know we're using it.

So now, let us bid farewell to all that is old and broken:

Now, we can chill out and work with this:

Wow! Firefox inspector hits and misses

I don't like FireBug. You know, the 3rd party utility that gives Firefox a DOM inspector that's somewhere between how bad IE 8's is, and how great the Chrome one is. It will let you edit CSS and HTML live, in the browser, and let you copy your changes so you can paste them back into your code. But it's like it doesn't really want to do those things for you. Chrome's inspector really does want you to do it. Taking my fiddling around into the inspector has cut my development time quite a bit, so I'm totally going to use whichever inspector makes it easiest.

I mean, thank goodness it's there so I can debug stuff in Firefox, but thank goodness Chrome's is better, so I don't have to do my CSS design with it. Whew.

This Firefox DOM inspector is even worse than FireBug, though. Try to select that CSS? No, don't try. Don't bother. Just use it to see why it looks like shit in Firefox, try your thing out, and then copy and paste the value. Don't try to copy and paste the whole declaration. Don't try to bring the value with it. Just write "font-size: ;" then hit the arrow-key back to the left of that semicolon, paste your thing, and thank your lucky stars you don't have to use Firebug every single time you're curious about some CSS.

Creating a completely plain starting point for your blog with CSS in Blogger

I'm starting on a project that I want to be 100% plain, as if it was written in plain HTML without any CSS, and with a CSS Reset applied.

I added a CSS Reset:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

The CSS Reset did remove some styling, but I still need to get rid of Blogger's special classes, IDs and Selectors.

So I'll need to make or find a Blogger CSS Reset. Looks like there's none already online, so here goes. I guess it'll end up being a list of all of Blogspot's css selectors.

So somebody made a matrix of it, and put it in a PDF and a GIF. I'm kind of thankful.

Copying and pasting from the list to the reset was easier than I thought it would be. Now I have two copies of the reset, the second one with some additional properties "neutralized."

Here's the two resets, plus some additional code to add a few things back, like list styles:


/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video,

{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}


/* Other stuff that I have to put in each blog */

div.blogger-clickTrap {display: none;}
div#navbar {display: none;}
div#Attribution1 {display: none;}
a.home-link {display: none;}
.blog-feeds {display: none;}

/* Blogspot-altered Reset */

/* Blogspot selectors */
#blog-pager, #blog-pager-newer-link, #blog-pager-older-link, #comments, #comments .comment-footer, #comments dl dd, #comments dl dt, #comments h4, #comments h4 strong, #comments li, #comments ul, #comments-block, #comments-block .comment-author, #comments-block .comment-body, #comments-block .comment-body p, #comments-block .comment-footer, #comments-block dd, #comments-block dd p, #comments-block dd.comment-footer, #comments-block dd.comment-timestamp,
#comments-block dt,
#content-wrapper,
#footer,
#footer .widget,
#footer .widget-content,
#footer a,
#footer hr,
#footer p,
#footer-wrap1,
#footer-wrap2,
#footer-wrapper,
#header,
#header .description,
#header .description span,
#header .descriptionwrapper,
#header .titlewrapper,
#header a,
#header a:hover,
#header h1,
#header h1 a,
#header h1 a:hover,
#header img,
#header-inner,
#header-wrapper,
#main,
#main .comment-footer a,
#main .comment-footer a:hover,
#main .Header,
#main .profile-data,
#main .widget,
#main-bot,
#main-top,
#main-wrap1,
#main-wrap2,
#main-wrapper,
#outer-wrapper,
#sidebar,
#sidebar .widget,
#sidebar a,
#sidebar a:active,
#sidebar a:hover,
#sidebar a:link,
#sidebar a:visited,
#sidebar h2,
#sidebar li,
#sidebar ul,
#sidebarbottom-wrap1,
#sidebarbottom-wrap2,
#sidebartop a,
#sidebartop a:hover,
#sidebartop a:visited,
#sidebartop h2,
#sidebartop-wrap,
#sidebartop-wrap2,
#sidebar-wrap,
#sidebar-wrapper,
#wrap,
#wrap2,
#wrap3,
#wrap4,
.Blog,
.Blog h2.date-header,
.BlogArchive #ArchiveList,
.blog-pager,
.blog-pager-older-link,
.clear,
.comment-author,
.comment-body,
.comment-body p,
.comment-footer,
.comment-footer a:active,
.comment-footer a:hover,
.comment-footer a:link,
.comment-footer a:visited,
.comment-link,
.comment-link strong,
.date-header,
.date-header span,
.deleted-comment,
.description,
.descriptionwrapper,
.feed-links,
.Header,
.Header .description,
.Header h1,
.Header h1 a,
.main,
.main .Blog,
.main .widget,
.main .widget .clear,
.post,
.post blockquote,
.post blockquote p,
.post div,
.post h3,
.post h3 a,
.post h3 a:hover,
.post h3 a:link,
.post h3 strong,
.post img,
.post li,
.post p,
.post strong,
.post ul,
.post-body,
.post-body p,
.post-footer,
.post-footer .span,
.post-footer a,
.post-footer a:hover,
.post-footer p,
.postpage #description em,
.postpage #header h1,
.post-title,
.Profile,
.Profile dd,
.profile-data,
.profile-datablock,
.profile-img,
.profile-link,
.profile-textblock,
.sidebar,
.sidebar .Profile h2,
.sidebar .widget,
.sidebar .widget-content,
.sidebar a,
.sidebar a:hover,
.sidebar dl,
.sidebar h2,
.sidebar h2 img,
.sidebar li,
.sidebar p,
.sidebar ul,
.sidebar ul li,
.uncustomized-post-template,
.uncustomized-post-template .post-footer,
.uncustomized-post-template .post-footer .comment-link,
.widget-content,
a,
/* @-something styles removed from here!!! */
a img,
a.comment-link,
a.title-link:hover,
a:active,
a:hover,
a:link,
a:visited,
blockquote,
blockquote p,
body,
body#layout,
body#layout #content-wrapper,
body#layout #footer-wrap1,
body#layout #header,
body#layout #header-wrapper,
body#layout #main-top,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #sidebar-wrapper,
code,
div#sidebar,
div#sidebar-wrapper,
h1,
h1 a:hover,
h1 a:link,
h1 a:visited,
h1.title,
h2,
h2.date-header,
h3,
h3.post-title,
h3.post-title a,
h4,
h5,
h6,
hr,
body #outer-wrapper,
body .post-body,
body .post-footer,
body a.comment-link,
img,
li,
p,
p.comment-author,
p.comment-footer,
strike,
ul

/* Extra elements not covered by that terrible PDF */

{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
border: inherit;
-moz-box-shadow: 0 0 0px transparent);
-webkit-box-shadow: 0 0 0px transparent;
-goog-ms-box-shadow: 0 0 0px transparent;
border-top-style: none;
border-style: none;
text-shadow: transparent 0px 0px 0px;
-moz-text-shadow: transparent 0px 0px 0px;
-webkit-text-shadow: transparent 0px 0px 0px;
}

.date-header {
width: 6em;
position: absolute;
}

.date-posts {
margin-left: 8em;
margin-right: 1em;
}

.date-header span {display: block; margin: .5em;}

#Header1 {

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gwvy16ez4C2i4_69XeLVNc4Dp7J-ClURJ9LAIJmUb73ry4627VjBJ9xFPWId7FxClcEBats3duYochN3J06RMecU9kdpH9lg8jVuN0uadojA5esiInRGD5Ku_2bUMEjdemNL1-x65k4/s1600/picasion.com_ba0855ba978fdd0d8c18f21eaebb7583.gif");
background-position: center;*/
min-height: 100px;
_height: 100px;
background-repeat: repeat;
overflow: hidden;
height: 10em;
}

h1.title {
text-align: center;
padding-top: 2em;
line-height: 5em;
}

a:link {text-decoration: underline;}

h3.post-title a:link {
margin-bottom: 1em;
display: block;
font-size: 1.6em;
}

ol {
list-style: decimal;
}

/* Add space between entries */
.post.hentry {
margin: 5em 0;
}

.widget .post-body ul {list-style: square;}


At this point it's getting to be a bit much. Instead of adding CSS, perhaps I should be subtracting HTML code from the template. If I simply remove the class and ID names, I won't have to reset them all, because the CSS that's written into the themes won't have anything to grab onto.

Flattening the Archive Lists in Blogger

.BlogArchive #ArchiveList ul ul li {padding-left: 0;}

.sidebar li {
text-indent: 0;
padding-left: 0;
}

.BlogArchive #ArchiveList ul li {
padding-left: 0;
text-indent: 0;
}

.BlogArchive #ArchiveList ul.posts li {padding-left: 0;}

To change spacing between the list elements:

.sidebar li {margin: 0 0 1em 0;}

Styling a Link List in Blogger

When you first add a link list to your Blog, it tends to look something like this:

Yeah it's pretty ghetto. Let's fix it up by adding some custom CSS code to the template designer:

.LinkList li {display: block; float: right; margin: .2em 1em;}

Instead of telling the list items to show no bullets, I've just told them to show up as "block" elements, as if they were

s.

So now it looks like:

Better, of course, but the "find us" part needs to be next to the list. Here's how I'll accomplish that:

.LinkList h2 {float: left; text-align: left; margin-top: 0;}

And there we go:

Profile Block tweaks in Blogger

Here's the CSS I used to remove my profile pic and link from the profile block, and keep my e-mail address from wrapping, on this site:

.Profile .profile-datablock {

margin: 0 0 .5em;

white-space: nowrap;

}

.profile-img {

display: none;

}

.profile-link {

display: none;

}

Photo Gallery solutions that work with Blogger: SimpleViewer and Galleriffic

Blogger is great, but it's not easy to get a great photo album web gallery plugin that works with it.

I found two options, and explored them by implementing them on active projects. I'd like to provide stand-alone demonstrations to make sharing these solutions more convenient, but for now I've included links to the project pages. They can still be used to figure out how to implement on your own projects, and at least they're proof-of-concept prototypes.

Paul Van Roekel's Picasa Web Albums Simpleviewer Embed Code Generator

I demonstrated this with my roommate search page.

• takes about five minutes to set up
• takes the form of a flash viewer with acceptable performance
• the look and arrangement of elements is not editable
• pulls your gallery right from Picasa Web Albums, so you can edit
• it's not always best for commercial implementation


• the last slide in each gallery is an attribution slide mentioning Paul Van Roekel
• Simpleviewer branding appears when the plugin loads and in a little square to the bottom-right of the plugin, however the little square can be covered up by other HTML/CSS elements


• photos are inaccesible for download or viewing in another page, which could be a good or bad thing depending on whether your project favors accessibility or protection of the media

The Galleriffic JQuery Gallery Plugin

I demonstrated this with a client website.

• takes about an hour to properly adapt the plugin to our blog, if you've done it before
• the first time I implemented this, it took about eight hours to figure out the ins and outs of the plugin, and that's once I got it working outside Blogger, which was relatively easy
• uses CSS that needs to be modified to ensure that it doesn't conflict with Blogger CSS
• I haven't figured out a way to make it automatically grab gallery XML from Picasa Web Albums, so I've had to copy and paste photo URLs from there
• you can host (or pull) photos from wherever you want - Flickr, your own server, etc
• very customizable - all the effects, look and feel, etc are very flexible and can be easily edited with sensible CSS
• several "themes" are available from the authors to help make sense of the CSS and start from a point that's closest to your desired result
• as long as the CSS is modified judiciously, it performs well in all browsers across all systems, including when Javascript is unavailable, and it uses great HTML markup and CSS styling
• it's very ready for commercial deployment


• no branding or attribution is forced
• custom branding can be applied along with a custom look and feel


• photos can be sourced from the viewer, which makes them easy to share (or steal, if you're the type of person who thinks of it as theft)

Re-branding blogger: removing the blogger navbar, attribution and other Bloggerisms from your blog

I'm often asked by clients whether the website I make for them using blogger will have Blogger branding on it. The short answer is "no," and the long answer is "not after I spend a few minutes making all that disappear."

So the deal is, Google doesn't make it super easy to remove the navbar, the "powered by blogger" footer, or other bloggerisms that tip a user off that they're on a blog.

But they do make it kind of easy, using CSS. Just add this custom CSS to your blog. Some of this stuff won't work if it's in Blogger's easy-to-use "add CSS" feature in the template editor, so just go into the HTML and put it below all the other CSS:

.blogger-clickTrap, .post-feeds, .blog-feeds, .blog-pager#blog-pager, .widget.Attribution#Attribution1, #navbar {display: none;}


Here's what each of these selectors is (so you can omit the ones you want to leave in):

• .blogger-clickTrap is the thing that gets in your way when you're trying to use a browser's inspector feature to pick apart your layout and try out CSS changes. If you don't understand what that means, then you can omit this from the above CSS (and remember to remove the comma after it as well).
• .post-feeds and .blog-feeds are the things that create that weird "subscribe to (atom)" thing.
  
• .blog-pager#blog-pager is the thing that will put things like "next entry" and "previous entry" under your articles. It's for when you want your site not to be paginated like a blog, or if you want to trick Blogger into acting like a normal site by telling it to show only one post on the home page, and then making a post out of your home page, and making sure it's always dated as the most recent post.
• .widget.Attribution#Attribution1 is the thing in your footer from which you can't remove the words "powered by blogger."
• is the Blogger navigation bar at the top of your screen.

Now you have to realize, you've removed some pretty great functionality from your site and you should put it back - on your own terms, and with your branding:

• A Search This Blog button. It can be added as a "Gadget" in the Design: Page Elements panel.
• A "subcribe" or "follow" feature. "Follow by E-mail" is what you need. It's also one of Blogger's handy Gadgets and does a much better job than what we're using it to replace.
• If you have no form of navigation, and you have more than one post, you stranded the user on one page by removing the blog pager thing. So I recommend tagging each of your posts with at least one of your categories, and then making yourself a "Tags" gadget, either in the form of a cloud or a list, and using it as a menu.
  

Now as for being on a blogspot subdomain, it's easy to remove "blogspot" from your domain name, by using Blogger itself to associate your blog with your custom domain. You can ever buy it right from Blogger. It's in the "settings" tab somewhere.

How to expand all posts and remove the toggle triangles - Blogger Post Archive Customization with CSS

Here's how to make Blogger display all your blog entries in the Blog Archive, without making your users expand the years, then months, to view a chronological list of your blog entries.

Use this in the CSS portion of your Blogger Template:


#ArchiveList .collapsed ul { display: block; }

#ArchiveList .toggle, .post-count {display: none;}

I put it at the end of my CSS on instinct.

Your Blogger Template can be gotten to like this: customize: layout: edit html: after the variable definitions and before the body tag.

Flash MP3 Player with Level meter and special FX?

I just got an idea for displaying visual information from audio waveforms in Flash. First you get a waveform analysis of the audio file, and convert it into an image. Then you trace the line in illustrator to make a proper vector path. Import that into a 3D program or 2D animation in Flash and then map particles to bounce along it as it travels out, and it would indicate the movement of air in response to the speaker. Or you can just have a bar that follows that bath as it moves through the stage. I'm gonna do it right now. Bye.