1728 hours in photoshop

This was definitely a learning experience. Mashups are tricky to upload. You can’t really make money off these because they always get claimed. That’s how you know I’m doing this for the love of the game. I just want people to enjoy my mashups. I’m not trying to get rich of this or anything. But what did I learn? In the future when I make mashup music videos I should avoid using original footage. It just looks to YouTube like I’m reposting the original video. Fair enough!

I never know what to say about these tracks. This mashup combines “1 Thing” by Amerie and “Mama Said Knock You Out” by LL Cool J. But don’t pay too close attention to the lyrics; they don’t really go together. I was matching the vibes and high energy of these two songs, I wasn’t really paying attention to the lyrics. I’m trying to remember now if the mashups I listen to typically have matching lyrics. Eh, it’s half and half. Most mashups just throw away the original vocals now that I think of if. I’m the weirdo for trying to make it sound like a duet or feature/remix.

Making the Video

This is a simple video. I just wanted to get something out there. I figured the fastest video to make would be to mix the originals. Took me about three weeks of production off-and-on. “Mama Said Knock You Out” is in black and white but “1 Thing” isn’t. I put a black & white filter over everything so they match. The original idea was to incorporate live performance footage into the mix but that just made everything cluttered. It felt off so I kept it simple.

I released this video in 4:3. That presented its own challenge. At first Final Cut didn’t want to export the 4:3 footage in a resolution higher than 1280x960. I had to find a way around that. The other tricky thing was cropping “Mama Said Knock You Out” to 4:3. The label put it online as 16:9 but obviously in 1990 when it was released nobody saw it in widescreen. I’m guessing the music video was recored in wide scope. Not uncommon for a music video. They just paid attention to framing because they knew only the middle would be seen. I didn’t have to make any adjustments after cropping, everything is in frame. I just got a new computer and I’m still learning Final Cut so that’s where most of the difficulty was for me.

The final exported resolution is 1440x1080 but I’m thinking maybe I should have gone 1920x1440. The problem is when you upload these things online the high quality audio doesn’t kick in unless you upload “HD.” It’s not that I think you’re gaining any resolution by making it bigger, I’m just doing that so the video hosts retains the audio quality. To be honest both these videos are lower res than I would have liked. The “1 Thing” video was uploaded to YouTube in 2009 in 480p, give me a break! I wish there was a place that had HD music videos.

But yeah, maybe I should take this as a sign that I should be more creative in my efforts in the future.

Listen & Download

Closing Thoughts

I was thinking of maybe making a karaoke version. Just mute LL Cool J’s so you can sing his parts. But the fact that the Amerie footage is blocked on YouTube gives me pause. YouTube is used at a lot of karaoke bars by the way. I love the idea of people using my mashups for Karaoke. Fuck it, I might still do that.

Follow @AlainChristian Everywhere!

If following a blog is too 90s for you then check out the links below. Let’s meet each other halfway!

SowndHaus - Here’s the SECOND best way to get at my music. (FIRST best is here, obvi.) For now, I’m sticking to mashups and SowndHaus is a mashup social network. Early 2000s me would have LOVED this! If you like mashups go to SowndHaus. Let’s be honest, they’ll get taken down eventually. Enjoy it while it’s here.

YouTube - Even though YouTube has its problems my videos are generally allowed to stay up. I just don’t make any money from them. Video quality always takes a hit tho. No downloads allowed so you need to used a third-party thing to save videos. Why is that by the way? Why can’t people download YouTube videos?

Vimeo - I don’t be using this like a social network but I started posting videos here. I feel like the quality is higher than YouTube and they allow you to download the original video anyway so image quality doesn’t even matter when you think about t. Just DL the original video!

Instagram - As much as I want to promote my IG account, my mashups get taken down on there all the time. Even older ones get taken down later. I should probably change my IG focus. Also there’s a 60-second limit to your videos. ALSO the audio and video tend to be out of sync! I really should stop posting AMVs there, the sync is always ruined. IG should have kept to picture hosting. Am I wrong?

Soundcloud - Did I put this in as a joke? Soundcloud is the WORST place for mashups! They HAAAATE mashups on Soundcloud! My shit never stays up. But hey, if it does you can find it here. I mean I always try.

Twitter - I guess? I’m active on here and post music videos but like Instagram there’s a limit to how long the video can be and no downloads allowed. By the way I have my twitter set to delete anything older than 30 days. Just feels like a smart practice.

If I missed any parties then hit me up ASAP on either my instagram or contact page.

Sold Out Weekend (Saturday Morning Update)

Hey man, checked the gram this morning and Otakus with Attitude sold out their party. And then I looked at the ticket page for Perez Play’s event and those tickets are sold out too. If you’re reading this Saturday night I don’t know what to tell you. The Perez Play page says they might sell tickets at the door if space permits but that’s a huuuuuuge if. Good luck!

FRIDAY — 15 November 2019

Anime NYC Kickoff Party (Online tickets SOLD OUT)

• Age: 21+

• Time: 2100-0100 (9PM-1AM)

• Place: Lucky Strike — 660 W. 42ND ST.

• Event Page

• Promotion: Sonicboombox

UPDATE: Online tickets have sold out but you can try your luck at the door.

Senpai After Dark Anime NYC Party

• Age: 21+

• Time: 2100-0200 (9PM-2AM)

• Place: The Tailor Public House — 505 8th Avenue

• Event Page

• Promotion: Senpai Project

Beyond The Cons: Anime Edition Vol. 2 - Anime After Party

• Age: 21+

• Time: 2100-0200 (9PM-2AM)

• Place: Legends — 6 West 33rd Street

• Event Page

• Promotion: Beyond the Cons

SATURDAY — 16 November 2019

Club Love Live! Anime NYC 2019 Official Afterparty (SOLD OUT)

• Age: 21+

• Time: 2000-0200 (8PM-2AM)

• Place: SPIN — 48 E 23rd St

• Event Page

• Promotion: Sonicboombox

Not much to say here since it’s already sold out. But you can possibly try your luck getting tickets on StubHub or the Anime NYC subreddit.

Otakus with Attitude Presents 2nd Year Anniversary: Anime NYC Edition (SOLD OUT!)

• Age: 21+

• Time: 2100-0300 (9PM-3AM)

• Place: OS NYC — 50 Bowery St

• Event Page

• Promotion: Otakus with Attitude, Mashfest NYC

Perez Play Anime NYC After Party (SOLD OUT!)

• Age: 18+

• Time: 2030-0030 (8:30PM-12:30AM)

• Place: BDA Studios — 265 W 37th St

• Event Page

• Promotion: Perez Play

Update: Online tix sold out but if space permits they might sell tix at the door. Good luck!

Pocket Guide

I get it, nobody likes websites anymore. It’s all about apps. You’re a cosplayer so you live on Instagram! Well lucky for you I’ve posted an Instagram version of this guide. Like on the website, I’ll update that post if anything changes. I’ve tagged the promoters and venues so you can easily buy tickets and get directions all from within the app. Now you have no excuse for missing out!

In Summary

And there you go, plenty of options for everyone! Believe it or not I’ve purchased tickets for all of these events. Obviously I won’t be able to attend them all, but I really wanted to support the scene. You’ll notice all these events are 21+ except for the Perez Play event. I wanted to point that out because someone on Instagram asked me about events for younger people.

There’s definitely a bigger story here about the rise of anime, cosplay, gaming parties in New York. They used to not be so common. In the past you’d see parties like this thrown once every few months. And those parties were just meant to be one-time things. To see multiple promotions dedicated to throwing otaku parties on a regular basis (weekly and monthly), makes me so happy! I’ve been covering New York nightlife for a long time and it’s refreshing to see the party scene go in a new and interesting direction. Let’s be honest, things were getting a bit stale.

By the way, you don’t need to be a cosplayer to enjoy this. Crowds are friendly and inviting at these events. Just come out and be yourself. The vibe is chill, I promise. Thousands of you are coming to Anime NYC so there’s no excuse for not selling out every single one of these events!

I’ll see you there!

Keep the Party Going!

If you live in the New York area then please do me a favor and follow these promotions. We can’t grow the scene without your support and attendance! And like I said these parties are going down all year round, so pull up! It actually makes a difference when you come to these parties. (Duh!) But what I’m saying is, it enables them to expand their operations. For example, Sexy Nerds and Perez Play run conventions in addition to their parties. Let’s continue to grow the scene!

These promoters seem most active on instagram so that’s why I listed their IG profiles. It’s also a good idea to sign-up for their mailing lists, that’s what I do. Two promoters don’t seem to have a mailing list so I listed their Facebooks. Followers of my instagram know that I like to share these events so feel free to follow me as well.

• Mashfest NYC instagram facebook

• Otakus with Attitude instagram mailing list

• Perez Play instagram facebook

• Senpai Project instagram mailing list

• Sexy Nerds instagram mailing list

• Sonicboombox instagram mailing list

We have a proper events section now! This is something I tried to put together with spit and duct tape when we were hosted on Blogger. It worked but adding an event was a whole complicated process. I just eventually gave up on that idea. But now I have an honest-to-goodness events section and I couldn't be happier! It's just one of the many quality of life upgrades that come with moving to Squarespace.

If you have an event coming up that would vibe with the ones I already posted then hit me up. I'd love to add it to our events page. But more importantly, I'd love to attend! If your event is nerdy and/or food-related then is has a high chance of being added.

Do you like the splash page? I know in the past I said splash pages are kinda lame but that's mostly because they don't seem to ever serve a purpose other than wasting the visitor's time. Our splash page (or landing page) serves an actual purpose. I'm using it like the cover of a magazine. It will change periodically. I'll be using it to highlight bigger stories I want to tell. I know the world is shying away from long-form content but I think it still has a place. Not everyone's attention span is shot to shit!

Most of my entries from Blogger were carried over but there's still a few (as of right now the count is 37) waiting to be converted. I just want to point out that the only reason this move is taking so long is because I want to take advantage of everything Squarespace has to offer. There's a lot of meta data that goes into a blog post and I want to fill it all in. I want to add banners to all my old posts, geotag locations, stuff like that. It's not that Squarespace requires that, I just want to do it because I know it makes for a richer browsing experience.

I'm saying all this because I don't want to give the impression that this process was taking long because of Squarespace. It's all my fault, blame the OCD. Also my workload increased between December and mid-January so I had no time to work on the site. Sorry about that!

But yeah, check it out. Big things happening soon!

I didn’t just try a space by the way. I loaded up Wikipedia’s entry for whitespace characters and tried the first ten. I also tried using a whitespace and a period, .example.com for example, but that didn’t work either. I gave it a shot guys, I’m sorry but this loophole is closed. I don’t know why they say blogs “can’t” be hosted at naked domains when I’ve had mine hosted that way literally for eight years! I’ve never had any problems. Perhaps they mean blogs “won’t” be hosted at naked domains because they don’t feel like it. I don’t know their reasons.

But judging by the comments for this entry the demand is clearly there. I recommend asking Blogger why they don’t allow this. Maybe there’s a good reason? I know they read my blog so that’s likely how they found out about the exploit. When you see me post a guide like this it means I tried searching first and found nothing. Again, judging by my comments it looks like they gave it about a year before shutting it down.

I’m really sorry about all this..

(Originally published: 31 Jan 11) In my last post I said we were dropping the WWW from our domain name. I'm happy to report the operation was a complete success... But I did encounter some roadblocks. Blogger used to let you point your blog to a so-called naked domain but at some point they stopped. Try it now and you’ll get the error, "Blogs may not be hosted at naked domains." Obviously, I've figured out a way around that. But the solution was not so obvious.

It's out of character for Blogger to impose a limit like that on blog owners. If there's one thing that really stands out it's the freedom you're given to build your brand and identity with a Blogger hosted blog. For example, Blogger won't penalize you for hiding the navbar. I think it's short-sighted of them to impose a limit on the domain name. Is the domain name not part of the brand? I think it is.

So here's my solution to the "Blogs may not be hosted at naked domains" problem. Read the guide first before following it as it contains differing instructions for 301 and 302 redirects.

1. Back to Blogspot.com

If you're currently publishing to a custom domain switch back to blogspot. The Publishing tab in Blogger's dashboard should read, "You're publishing on blogspot.com".

2. Double-Check or Create the A NAME Records in Your DNS Settings

Have these four A Name Records point to your naked domain.

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Note: You may use @ for the host name in Go Daddy.

3. Remove the "www" C NAME Record–Or Don't

Chances are you have a C NAME record of www that points to ghs.google.com. If you're planning to 301 redirect your old traffic, delete it. A C NAME record is an alias, it doesn't inherently redirect traffic. Blogger only does 302 redirection and if that's what you want leave the C NAME record as is or add it.

4. Publish Your Naked Domain

Switch to advanced settings for custom domains. Type in your naked domain and this time include a space in front of it. If done correctly the page will reload and tell you, "Settings Were Saved Successfully." Also the space in front of the domain name will be gone.

5. Decision Time: 301 and 302 Redirection

Check the box where it says, "Redirect www.example.com to example.com" if you want 302 redirection. For 301 redirection go to your registrar and follow their instructions for subdomain forwarding. Again, if there's a www C NAME record pointing to ghs.google.com you must delete it for 301 to work properly!

6. Double-Check Your Work

Go Daddy's web tools and wizards are a little buggy. Even though I wanted a 301 redirect it gave me a 302. I was able to check for this using a simple command in cURL:

cURL -I http://www.mystady.com

It's nice to see the page redirecting in your browser but your browser isn't going to tell you what kind of redirect it was. Well, not without some add-ons. But who needs add-ons when you've got cURL?

I hope you've found this guide helpful. As always, your questions and comments are welcome.

For returning developers (and those filthy web scrapers who keep stealing this), I’ve re-written and updated this guide. It should read a lot better now. The old guide reads like Mojo Jojo wrote it. I don’t know why I was so verbose before. I also replaced the graphical tables (data matrix) with markup. I should have used semantic markup in the first place. I guess that’ll also make it easier for those damn web scrapers to copy the updated version. Did I forget to mention I constantly find rogue copies of this guide on other blogs? If you’re gonna use this to write another guide at least give me credit, please? Thank you.

I’ve finally added a section on error pages. That was often requested and I finally got around to it. Sorry for the delay. That brings our total number of page types from seven to eight. I can’t imagine they’ll be adding more but if they do let me know in the comments and I’ll update this guide.

Cheers!

If you've only been using the pageType tag to identify the page types then you’ve seriously been limiting your potential. That data tag only returns five unique values but the total number of page types is eight. This guide will teach you how to identify all eight of Blogger’s page types. If you’re not family with the terminology consult the glossary section. If that still doesn't help leave me comments. I understand the terminology in this document could be confusing at first. But you’ll pick it up in no time!

The code snippets in this guide are the absolute least amount of code required to get the task done. Blogger’s template engine has seen a revision so I’ve updated my snippets to match. They’ve all been tested to work as of this update.

See also: Printer Friendly Posts for Blogger Made Easy! (Update)

blogger2ools

This data was collected using my blogger2ools project. It’s a Blogger developer template designed to exposes all the underlying code and data tags in realtime. So as you navigate the blog you can see how the variables change from page to page. It’s an excellent tool for advanced Blogger developers out there and it’s been instrumental in helping me put this guide together.

Contents

• Glossary

• Item Page Type

• Static Page Type

• Archive Page Type

• Error Page Type

• Home Page Type

• Search Page Type

• Label Page Type

• Index Page Type

• Putting It All Together

• Closing Thoughts

Glossary

Page Type

The classifification (or type) of the page in question. Blogger uses various types of pages to display information. For example, search results on Blogger are displayed via search pages. Terms like "search page", "search type", and "search page type" mean the same thing and are used interchangeably in this document.

Globally Available Layout Data Tags

They get their name from the fact that you can use these tags literally anywhere in your template code. Think of the possibilities! These tags have the blog. prefix. This guide may sometimes omit the prefix for brevity. Every tag in the data matrix is global.

blog.title Tag

Returns the value of what you entered as your blog title. This can be found under Settings > Basic > Title.

blog.pageType Tag

This is the actual globally available layout data tag. The pageType tag returns a value of item, static_page, archive, index, or error_page.

Item Page Type

These are your blog posts. Fun fact: You used to have to enable post pages in the dashboard but everyone now has them on by default. I’m thinking this was changed with the permalink rollout. Before permalinks they would pull up your blog post with query strings. Not too SEO-friendly, is it? Only someone who’s been using Blogger as long as I have would remember a thing like that.

This code snippet will identify item pages:

<b:if cond='data:blog.pageType == "item"'>
  <!--Item Page-->
</b:if>

Static Page Type

In 2010 Blogger added the ability to publish content as stand-alone, or static, pages. These are what you use to go about adding the standard “About” or “Contact” pages. When they first rolled them out you could only have ten; now it’s unlimited!

This code snippet will identify static pages:

<b:if cond='data:blog.pageType == "static_page"'>
  <!--Static Page-->
</b:if>

Archive Page Type

Most links generated by the Blog Archive widget follow this format. The remainder use query parameters. Any page formatted that way has a pageType value of index.

This affects Blog Archive widgets using the Hierarchy style because it generates some pages using search queries. In general, search queries (when the URL is your homepage followed by /search? or /search/), return a pageType value of index.

There's a similar problem with the navigation links generated by the Blog widget on archive pages. Instead of linking to other archive pages (pages that end in archive.html), they link to search queries. And once again, these search queries return the index value.

Thus, any customizations you have for archive page types are lost by the next page, and your visitors will have an inconsistent experience.

This problem affects all three Blog Archive widget styles. Also, the search queries themselves are malformed half the time which leads to posts getting skipped or repeated.

1. Only use the Flat List and Dropdown Menu styles when configuring the Blog Archive widget.

2. Omit navigation links from archive pages.

3. Add another Blog Archive widget (that only appears on archive pages), in place of the navigation links.

4. And finally, style the widget so it looks like it belongs there.

This code snippet will identify archive page types but keep those caveats in mind. Hmm, are they caveats or bugs? Makes you think…

<b:if cond='data:blog.pageType == "archive"'>
  <!--Archive Page-->
</b:if>

Error Page Type

The code for error pages is straightforward.

<b:if cond='data:blog.pageType == "error_page"'>
  <!--Error Page-->
</b:if>

Home Page Type

This identifies the default URL of your blog, also known as your homepage. You can find it under Settings > Basic > Publishing > Blog Address in the Blogger dashboard. The blog.homepageUrl global tag always returns the same value no matter what type of page you’re viewing: your homepage.

This code snippet will let you know you’re on the homepage.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!--Homepage-->
</b:if>

Search Page Type

You should know that the built-in search is extremely limited: it only searches from a pool of the most recent posts, older posts are ignored and labels are ignored. In the future I might transition to the search box gadget but I'm still exploring my options.

The searchQuery global tag returns the value of what the user searched for.

The second instance of blog.url is to illustrate how the URL changes when you navigate to the next page of results.

Here’s my code snippet for search pages. It’s been factored down from before and now uses two less lines!

<b:if cond='data:blog.pageType == "index" and data:blog.searchQuery'>
  <!--Search Page-->
</b:if>

Label Page Type

Every label has its own RSS feed.

(homepage URL)feeds/posts/default/-/(label name)

The second instance of blog.url is to illustrate how the URL changes when you navigate to the next page of results.

Here’s the label code. It’s also been refactored.

<b:if cond='data:blog.pageType == "index" and data:blog.searchLabel'>
  <!--Label Page-->
</b:if>

Index Page Type

Here’s the code for finding index pages. As you can see it’s just trying to eliminate all other possibilities.

<b:if cond='data:blog.pageType == "index" and data:blog.searchQuery == "" and data:blog.searchLabel == "" and data:blog.url != data:blog.homepageUrl'>
  <!--Index Page-->
</b:if>

Putting It All Together (Revised!)

The following code snippet comes directly from my own template here at MY STADY. I use this snippet as a guide for when customizing multiple or even all eight Blogger Page Types. If you're SEO-obsessed this is probably what you're looking for. We use this snippet in the header and Blog Widget portion of our code. For other sections it's not as important to customize for every different page type. Use it wisely!

<b:switch var='data:blog.pageType'>
    <b:case value='archive' />
    <!--Archive-->
    <b:case value='error_page' />
    <!--Error-->
    <b:case value='item' />
    <!--Item-->
    <b:case value='static_page' />
    <!--Static-->
    <b:default />
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <!--Homep-->
        <b:elseif cond='data:blog.searchQuery == &quot;&quot; and data:blog.searchLabel == &quot;&quot;'/>
        <!--Index-->
    </b:if>
    <b:if cond='data:blog.searchQuery'>
        <!--Search-->
    </b:if>
    <b:if cond='data:blog.searchLabel'>
        <!--Label-->
    </b:if>
</b:switch>

Closing Thoughts

Hope you enjoyed this much needed update to my very popular guide. Feels good to give back to the community. Though I'm not using Blogger anymore to host my site I'll still be keeping an eye on its development. To me Blogger is a platform with tremendous potential if you're a movated enough developer. But for me I just didn't have the time to work on it anymore.

Please let me know if you find any of this confusing or if you need clarification or even if there are typos. Thank you!

P.S.: Please link back to this guide in your own blogs if you use it in a tutorial or something. I'd really appreciate the credit. Puting this together was a lot of work.

Changelog

Oct-25 2018

• Added the error page type.

• Refactored search code snippet.

• Refactored label code snippet.

• Refactored index code snippet

• Refactored the code snippet that detects all the page types.

• Data matrix changed from spreadsheet screenshots to HTML tables.

May-22 2011

• Initial Release.

Finally, a WYSIWYG Editor That Actually Works!

I've transferred my blog many times. This is in fact my seventh time changing web hosts! And this has for sure been the smoothest and nicest transition yet. I'm actually enjoying the experience.

Editing posts is a dream. Everything in the editor is isolated from each other by their HTML block level elements. So if you start writing text, that's the <p> element and it gets its own block. If you add an image that's a new block with <img> tag and so on! And if you want to move a block around just click and drag it to a highlighted hotspot or insert point. It's so elegant! Where has this been all my life? I love, love, love editing in Squarespace.

Yes, I'm describing WYSIWYG! But I've hated WYSIWYG all my life. Shitty WYSIWYG implementations are the reason why I've only ever edited my websites in plain text. And don't try to sell me on Dreamweaver. It is a slow, bloated, memory hogging dumpster fire! All Dreamweaver ever did was slow down my production and cement my ire for WYSIWYG.

But Squarespace has taught me that good WYSIWYG is possible. Who knew, right? And if you ever need to put some code on your site you can just use a code block. Too easy!

A Single Tab Experience

To add an image you just upload it. Say goodbye to copying URLs from a separate image host you have opened in the next tab. Squarespace hosts everything. This includes arbitrary files (up to 20MB per file) and even music! I've never seen anything like it. I'm blown away.

You can also connect many of your social accounts and web services to Squarespace such as Instagram, Facebook and Twitter. How does this help? Because again, this eliminates the need to open a new browser tab and copy URLs. Now it's all built-in and Squarespace can reference these accounts or services and use them when the need arises. There are so many welcome creature comforts on this platform. It's not only convenient, it makes for easier and faster production.

Of course, sometimes you need to bring something in from another tab. A tweet, for example. Squarespace has you covered with their oEmbed support! So just like on Twitter, when you share a link it's converted to rich embedded content. This uses the embed block, naturally. The running theme here is making your life easier. Everything just works!

How's the Move Going?

Of the 261 posts I published to Blogger I only have 86 left to go. That's a lightning fast turnaround time! To put that into perspective, I moved from LiveJournal to Blogger in 2008 and I still have over 300 journal entries remaining on there. Technically I never left. It's depressing! It's such a chore to post on Blogger that just the prospect of importing my LiveJournal posts always gave me a headache. I moved some but most remain on LiveJournal.

Let me tell you how Squarespace has made the import process a breeze. I'm not talking about the import tools because everybody has those. I'm talking about how the entries are formatted after the import. Again, Squarespace's amazing block system simplifies everything.

Some of my imported Blogger posts include a JavaScript code. When I encounter this code, it's inside its own block. Since the code isn't needed for Squarespace I can quickly just delete the block. Compare this to Blogger's (or ANY) editor where you'll need to tediously scroll through walls of text to find and delete the code. On Squarespace you just point and click!

I don't think you understand, this block system is EVERYTHING. It's elegant, simple and powerful. It solves so many problems! Unbelievable. I miss it when I'm on other platforms. It's because of this amazing system that I've been able to get so much work done.

Can You Digitally Remaster a Blog?

I could have just used the import tool and called it a day but I'm using this opportunity to scrutinize and review all my past work. Everything is getting a 99-point inspection. Here's a partial list of the work that goes into the import process.

• Expanding on posts that are too short or brief.

• Simplifying posts that are too long.

• Rewriting entries below my current standard.

• Combining multiple entries that work better as one.

• Spelling.

• Grammar.

• Updating outdated tutorials.

• Deleting posts that bring no value to nobody.

• Adding page thumbnails/banner images. (New feature!)

• Adding META descriptions. (New feature!)

• Adding categories. (New feature!)

• Uploading files. (New feature!)

• Restructuring tags.

• Checking for dead or bad links.

• Linking to archive.org when needed.

• Writing better titles.

• Updating URL slugs.

These are just guidelines. For example, I've kept some entries as they are because I want to remember them that way. "New feature" indicates functionality I didn't have before like categories. Blogger has META descriptions but 99% of my posts don't have them and for the ones that did I'm rewriting them anyway.

I'm also counting thumbnails as new because the way Blogger does it is so trash that I had to code my own method. Neither Blogger's nor my own thumbnails translate to Squarespace's system thus I have to add one for every post. But I like their system so I don't mind.

It's quite a list, but with Squarespace it's all manageable. Every old entry is getting some love. And I can't wait to finally start moving my LiveJournal posts. I don't know why but I feel very satisfied after updating an old entry. Maybe it's the fact that I've been wanting to do this with Blogger for longest time. But the tools and feature set just made that a daunting proposition.

So When's The Relaunch?

You can expect the new site to drop either in late December or early January. I have a full-time job so you know how that goes. That's the other thing, the amount of work I've been able to get done in only my spare time is incredible! Okay, Okay, I'll stop. By now you're probably sick of hearing me sing the praises of Squarespace. Ha ha, sorry about that!

Alright, let's meet back here in thirty days. Enjoy your holidays and see you next month.

A long time ago I asked Blogger to expand the pageType attribute to enable printer friendly pages. Turns out there was never any need for that. The secret’s been hiding in CSS all along! Let’s jump right into it.

See also: The Complete Guide to All Blogger Page Types (2019)

Media Types

Media Types allow you to fine-tune how your content will be presented in different media. Using media types means you don't have to code a different version of the page for every given situation. Not having to do so means you're less likely to run into duplicate content issues. Media types have been around for a long time so most user agents support them.

Note: These are slowly getting depreciated as time goes on.

Available Media Types

all

Used for all media type devices.

print

Used for printers.

screen

Used for computer screens, tablets, smart-phones etc.

speech

Used for screenreaders that "read" the page out loud.

Specifying Media Types

There are four ways to specify the media type. However, one of them doesn't work correctly in IE and Microsoft doesn’t plan on fixing it. So, uh, forget I said four. Three! There are three ways to specify the media type.

Method #1: Include the media attribute when you link to external style sheets.

<link rel="stylesheet" type="text/css" media="projection" href="fluffle.css">
<link rel="stylesheet" type="text/css" media="braille, speech" href="pooner.css">

Method #2: Include the media attribute in a style element.

<style type="text/css" media="handheld, screen, tv">
/* only applies to handheld, screen, and tv */
</style>

<style type="text/css" media="speech">
/* only applies to speech */
</style>

Method #3: Add @media rules to your style sheets.

@media print {
  /* stuff */}
@media tv, print {
  /* more stuff */}

Paged Media

The print type is known as paged media. Paged media sections the document into one or more discrete pages. Custom page breaks can be added to the document with CSS but support for it across major layout engines is very basic. There are multiple CSS properties, and values to go with them, but I’m only going to highlight the few with the most compatibility. And also, we don’t need that many to get the job done. If you ask me the whole paged media thing is overly engineered!

So yeah, the following properties work in most browsers as of this writing.

Property Values

auto

Neither force nor forbid a page break before (or after, or inside) the generated box.

always

Always force a page break before (or after, or inside) the generated box

avoid

Avoid page-break inside the element (if possible).

Here the page breaks before any element with an id of comments.

@media print { #comments { page-break-before: always; } }

By the way, it’s not necessary to use the @media rule.

h1 { page-break-after: avoid; }

This code ensures your tables remain intact.

table { page-break-inside: avoid; }

Print Media and Hyperlinks

Make the URLs of your hyperlinks visible in print media. Let's examine the following rule set from MY STADY.

.post-body a:link:after, .post-body a:visited:after, #related_posts a:after {
  font-size: .85em;
  content: " ["attr(href)"]";
}

This rule set is only applied to hyperlinks inside the post-body (blog entries) and related_posts (links to related entries) selectors because they are the only selectors with unique content. The ':link' and ':visited' pseudo-classes ensure we don't select hyperlinks that don't have an href attribute. The href attribute is always present in related_posts so I omit the pseudo-classes. The :after pseudo-element is used in combination with the content property to verbose the hyperlinks and generate the square brackets surrounding them. The font-size property helps reduce the offset in width from verbose hyperlinks but not by much.

Troubleshooting

If you don't see all your pages in Print > Preview then add this rule set to your print media style sheets.

* { float: none !important; overflow: visible !important; }

This is only intended for use in troubleshooting. I don't advise you to leave it that way. The W3C doesn't have a recommendation for how to handle content outside the page box so all user agents approach this problem differently.

Final Thoughts

I'm surprised Blogger doesn't do this for you. There's a rule set for “handheld” media types in blog_controls.css but that's about it. Don't interpret this as a complaint, I like having control over my layouts!

I suggest writing your new CSS code to an external file so that it only loads when your user needs to print a web page.

Changelog

Nov-4 2018

• Updated with newer standards.

• Removed depreciated information.

• More code examples.

Oct-16 2009

• Initial Release.

I could be wrong. But I'm too old and too tired to put any more effort into Blogger. I used to be willing to put the time and work into hacking the code to fulfill my vision. But now I'm starting to ask myself, 'Do you have time to waste on this?' Let's be clear, I have a vision for what I want my website to do and I KNOW with some clever hacking I could forge that vision through Blogger. But I also know that it's going to take a lot of time and effort to get there. And frankly, to me it's not worth the time anymore.

Time and Money: The Two Currencies

Life has two currencies: money and time. I used to be able to afford the time it takes to code Blogger to get what I want from it. Those days are GONE. My time is now limited. I'm no longer willing to slave over hot code for a week only to get an inch closer to my vision. The longer I work on building this foundation is the longer it's going to take before I can actually CREATE the content I want to feature on it. I can't do both.

What I'm saying is, rather than spend any more time working on Blogger I've chosen to spend my money on a product that already has all the website features I'm looking for. That product is Squarespace.

Why Squarespace?

It's easier if I just list the main features that attracted me:

• Full Mobile and AMP Support.

• First class post editing experience.

• Fully integrated multimedia support. ex: Audio, Video, Images

• Gallery Pages.

• Event pages.

• Tag AND CATEGORY support!!

• Dozens of SEO optimizations built-in.

• A mobile app that REGULARLY RECEIVES UPDATES.

• No ads.

• I retain ownership of my content.

• A site search that actually works and is always up-to-date with your latest content.

And while some of this stuff like galleries and event pages I could add to Blogger with code and third-party apps, it's so much easier when all that stuff is built-in. The site as it is right now is a patchwork of 3rd-party scripts and services and I'm over it.

Take my gallery for example. I use a software called jAlbum. Firstly it's hosted on a separate subdomain. It's not part of the blog software so that's already a disconnect right there. Which means if I add anything I have to blog about it. Squarespace would just surface it to my homepage automatically. Then you have the process of building the gallery pages. I have to use a desktop application to build all the static pages then copy those pages to the subdomain. This is not a quick and easy process!

And by the way, my version of jAlbum is out of date! I'm using version 11.5 but the latest one as I write this is 16.2. And trust me, I've been aware of it. I get an email about a new version like every other month. I got tired of updating. Don't get me wrong, I would definitely recommend jAlbum to people who have time to manage its upkeep but I want out of this life. I just want a CMS that has all of this stuff built in. With no updates for me to perform. I'm tired of the upkeep. I just want to produce CONTENT.

There's more! Embedding a video in Blogger is a pain in the ass if you want to use a non-YouTube source. Category support is something I've missed since my LiveJournal days. I've submitted requests for it in the past with Blogger but as you can see nothing ever came of it. Blogger's post editor is straight trash. They add to it with new feature releases but it's never gotten an overhaul. And it NEEDS it. So many problems.

And for a time I didn't care about all those problems. I was willing to work within the limitations of Blogger. I guess I just got tired of it. Just because I can code doesn't mean I should. It just doesn't make sense to me anymore. I'm putting all this time into coding but it's taking too long for me to get the results I want. And perhaps some of the things I want are beyond the scope of Blogger?

One more thing I want to point out is how even the simple things are a pain in the ass with blogger. Let's say I want to include an image in a blog post. And let's say I want that image to show up as a thumbnail on the post list. Well the image can't be from my personal Flickr or it won't show up as a thumbnail. It only does that for images hosted on Google services. But the post editor doesn't have an image upload option. Which means I have to open Picasa in a separate window, upload the picture, copy the link, tab back to Blogger, then paste the link. Why does this require a patchwork of services? Why can't Blogger just accept my Flickr photos or offer to host my photos directly?

Adding a photo to your blog post should not be this difficult!

Why Not Self-Hosted Wordpress?

Yeah, no. People are always suggesting self-hosted Wordpress to me but that's a lateral move. If maintaining Blogger is a part-time gig then maintaining Wordpress is a full-time six-days-a-week career!

Wordpress isn't even ready out of the box. It's just a basic blog with basic features. A lot of what you want is missing. So then you start looking for plug-ins. There's over 56,300 plugins listed on the official Wordpress directory. Are you fucking kidding me? A search for "SEO" nets me 3,514 results! Who the hell has time to test them all? Even testing out five means I'm once again wasting time on setup instead of producing content. And don't get me started on themes. There must be close to a million Wordpress themes out there on the Internet.

For the sake of argument, let's say I got my self-hosted Wordpress site working the way I want it. (Like, a year after I started, LOL!) And I'm finally free to produce content. What happens when Wordpress releases a critical update? I have to stop everything to apply it . But wait, I've changed the code so much with all these Goddamn plugins I can't even apply the update normally! So now I have to figure this out and troubleshoot how to apply it without breaking my plugins. And while that is happening my blog starts looking stale to Google because I've had to stop updating to fix it. And the same thing happens when my plug-ins have to be updated or the theme gets an update. It's a never ending process. This is the type of thing I'm trying to get AWAY from! If anything self-hosted Wordpress would be an even bigger burden to maintain than Blogger.

Right now I'm in the middle of setting up my Squarespace site. It's only been two weeks but things are already shaping up nicely. I've already gotten more done in the past two weeks of setting up my Squarespace than I have coding Blogger these past few years. Most of the work involves just updating old entries to take advantage of Squarespace's modern features. And while I could just import my posts as they are, I'm taking the time to quality check each one. I've been adding more media, fixing broken links and even adding more text when needed. Yes it's a lot to go through but Squarespace makes it easier to manage than traditional post editors. The way the content of a post divides everything into blocks is a touch of genius! This same task would be a nightmare on Blogger.

Conclusion

I hope I don't sound bitter. Blogger was definitely a step-up from Livejournal when I moved here so many years ago. I meant every nice thing I ever said about this platform when I used to evangelize it. I've tried my best to give back to the community. But look around. I've stopped posting. And it's not because I have nothing to say I just don't like using the product anymore. I still make stuff. I've been active on Youtube, Instagram and Twitter. But when it comes to Blogger I guess the honeymoon for me is over.

So yeah. Right now I'm in the process of moving everything to Squarespace. I'm really pumped and I just can't wait for you guys to see the new site! And more than anything I can't wait to get back into content creation. It's been a long time coming.

For those of you still keeping tabs on this blog, I thank you for your patience. It will be rewarded.

(Original title was "Blogger is Dead" but that felt too harsh.)

Flickr makes it easy to batch download photos from any operating system such as Mac, Windows, or Linux. Simply click the download arrow. This can be done for individual photos, camera rolls or albums. Batch downloads are collected in a zip file. Download the file and be on you merry way! Flickr limits camera rolls and albums to 500 and 5000 photos respectively.

This method is only available when users allow for it in their permissions.

Batch Downloading in Mac OS X

For this task I highly recommend Photo Grabbr by Malarkey Software. Photo Grabbr relieves you from the chore of downloading Flickr photos individually. Flickr photos are batch downloaded, saving you a tremendous amount of time.

Notes:

It isn't necessary to link Photo Grabbr to your Flickr account. That feature is for downloading photos available only to Flickr users. Photos I've flagged on my account for partial nudity are the type that fall under that umbrella. For the best quality set Grabbr to download my photos at original size. With a few exceptions (no resizing, Photoshop, watermarks, etc), I mainly upload my originals to Flickr.

How Can I Batch Download Flickr Photos in Windows?

Sorry Windows users, Photo Grabbr is a Mac OS X exclusive. If I find something like this for Windows (that I like) I'll let you know. So far the search has turned up empty. By all means let me know in the comments if you find something that let’s you download other people’s photos like Photo Grabbr.

I ripped the audio from the Android version of H3H3: Ball Rider. There are 19 music tracks and a couple bonus audio tracks of sound effects and spoken dialog. It wasn’t hard to do as the game was made in Unity. The dialog is in French by the way. I did the translation myself.

The audio files were in WAV format. I even used the original filenames in the song titles to drive that point home. Enjoy!

Wherein I reimagine Shimoneta as an anime where shitposters, tired of being ignored online, start forcing their shit memes on people in real life.

You won’t find this video on my YouTube channel, because of reasons.. It falls under satire but good luck explaining that to the license holder. I tried disputing it but you know how these things go on YouTube. I could have tweaked it to pass under the radar but I like it the way it is.

This video changes the premise of Shimoneta ever so slightly. Instead of it being about ‘A Boring World Where the Concept of Dirty Jokes Doesn't Exist’, instead you have shitposters memespamming people in real life for their personal stakes in the meme economy. Pretty normal plot by today’s anime standards if you ask me.

So check it out, I made this on my iPad. I’ve been really trying to push the iPad platform to it’s limit. Mostly because I don’t feel like editing a minutes-worth of video on a laptop. I used the Videoleap app to make it happen. Don’t be scared off by the paywalled “Pro” features. You probably won’t be using them anyway. I’ve paid for the app myself and still have yet to use them.

The seed of this video was planted after seeing the reaction of that one guy yell, "Whoooooaaaa!" That's the funniest line read in the entire season! His reaction is so genuine! This thing took on a life of its own as I was making it. I didn’t really know what I was making until it was done.

Please enjoy it!

The concept I had for this video was originally a montage of kickass anime chicks working out and training and getting stronger. But the different shows didn't really work together so I narrowed it down to a single episode of a single show.

Please enjoy it and leave honest feedback. This is my second AMV.

If there's demand for it I'll upload the original file. YouTube video quality isn't the best.

Audio

DJ Fresh - Gold Dust (Prime Remix)

Sadly it seems Prime (@primitivedubstep on social media), doesn't make music anymore. All their social media links are either dead or haven't been updated in forever.

Video

Dirty Pair Flash - Episode 14 - "The Winners in Summer Colors"

Original post follows: It's that time of the month again. You ready for another juicy github commit? I don't care! As usual I've detailed every template change in excruciating detail. This month you'll learn why I'm phasing out social sharing beacons and what happened to related posts. You'll also see how my changes to the Blog1 widget are progressing and my plans for the future.

(Spoiler!) Shouts to David Kutcher whose post on Google+ was the final influencing push I needed to do away with share buttons.

View Gone: Related Posts, Share Buttons on Github

Image Credit: GitHub Octocat #83 "The Murakamicat" by Billy Roh.

There's two of us: Arsen and myself. Arsen has a big passion for the game and I'm kind of along for the ride. He's been playing for almost two years now and I joined him last October. He's been helping me and others get better at the game. He even started a website: SWSA Tactics. He wanted to do even more so we started a podcast.

When you listen he's the guy with the deep voice doing most of the talking. It's early days and there's plenty of opportunity for improvement but we're so happy to finally get it out there! And that's just the beginning, future episodes will have a video component. And for our deaf brothers and sisters we will have transcripts.

Please, please, please leave us your comments. We can take it; we want to improve! Be sure to check out Arsen's homepage on Summoner's War: SWSA Tactics. We had a lot of fun doing this, we hope you have fun listening. In this episode we discuss RNG woes, candy collecting, and how awakening DECREASES your stats?

Most changes in this update are under the hood: I refactored the pagetype detection, reworked META tags for better compatibility with Twitter cards and Facebook sharing, started chipping away at the blog widget code, and I re-removed the footer that somehow crept back in. Again, I enjoy writing detailed comments so please go have a look!

View MY-STADY-Blogger-Template September Update on Github

Image Credit: GitHub Octocat #107 "Mummytocat" by Tony Jaramillo.

What’s New

Here it is, a new version of Skinotronic. This version supports more resolutions (Retina) aaaaand positioning the dock on the side. To make this work I had to split Skinotronic into two versions: S and B.

Use Skinotronic S for when the dock is positioned on the side and Skinotronic B for when it's on the bottom. Easy to remember, right? I'd rather keep it to one file but that's impossible because of reasons. The details are boring; don't worry about it.

Skinotronic Employs All Five Priority Levels:

• Very Low - Pretend this static image is pulsing green and you'll get the idea.

• Moderate - As as you can see in this screenshot multiple lines of text are no problem.

• Normal - Your standard issue white on black. No pulsing.

• High - Smaller size and font but still legible from a distance. No pulsing.

• Emergency - Pulses faster than Very Low and Moderate. You should use this one to warn you when you're in danger of running out of disk space from all the porn, anime and music you're downloading.

The Big Picture

What!? You're still not convinced? Here, take this beautiful 1920x1080 PNG screenshot and make it your desktop wallpaper. Now see how far away you can stand from the display before the message becomes difficult to read. How far were you able to stand? I'm guessing very. If you liked that test drive just imagine how INCREDIBLE it's going to be when the notifications are live and pertinent to your interests!!

P.A.Q. — Preemptively Answered Questions

"Skinotronic"? What up with that name?

The name is Fallen's contribution. I explained what I was working on and that I needed a name. He said he would text me his suggestions. I was typing the names into Google as he sent them and Skinotronic was the first one with zero results—Shocking!

—and that's why I chose it. This occupied less than half an hour.

What other names did Arsen suggest?

In order from first to last: Noticefaction, Annoying Notification Program For Random Shit (ANPRS for short), Ballercon v5.0, Random Skin 5.0, Shnizlefizzledorf, Kokanaynay, Skinotronic Skin v0.5, Boilface, Crotchcomet and Zingzongzoom. Boilface and Crotchcomet were my favorites but they came up in too many search results.

Is Skinotronic based on WebKit or Cocoa?

WebKit.

Can you port Skinotronic to Growl for Windows?

No, but it's not for a lack of trying! I downloaded the Display SDK but they lost me at the Getting Started section. It says you need to know C#, VB.NET, or VC++.NET and have a copy of Visual Studio. I have neither the skills, the time to learn them, nor the software, my apologies.

What about Snarl?

If there was demand for it I'd be willing to port Skinotronic to Snarl. It would be a fun challenge to see if I could make it identical to the Mac version. I don't use Snarl on my PC but it looks nice.

There is a space between the bottom or top edge of my screen and the notification when I use Very Low, Moderate, Normal or Emergency. Why is that?

It is because the screen you're using it with has the dock and menu bar on it. I tried every CSS trick in the book but there's no way to offset that space through WebKit. You can manually offset the space by changing GrowlPaddingY in the plist to a negative number like -11 or something. Download a new copy of Skinotronic to do this. You have to restart Growl for the change to take effect. When you have it looking the way you want feel free to delete the extra copy of Skinotronic.

The drawback to changing the offset is the alerts no longer stack. Your alerts will now be displayed one at a time. But you might like it better that way.

I installed Skinotronic on Growl 1.1.5 but it's not working. Oh wait, I'm missing a lot of styles here...

It's been confirmed that WebKit styles are broken in version 1.1.5 of Growl. The Growl team is already aware of this. I recommend reverting back to 1.1.4 until it's fixed, that's what I did.

Where ca—

RIGHT HERE!

How di—

LUCKY GUESS!

Are yo—

RELATED TO BRIAN STACK? NO, WHY DO YOU ASK?

Uh, no reason...

THAT WASN'T A QUESTION A-HOLE!

Changelog

Version 1.7 | Oct-1 2015 (Current Version)

• Support for Retina Displays

• Split Skinotronic into two versions (S and B) for greater customization.

• This update is dedicated to Par Wannman who hit me up on twitter exactly a year ago and requested this. Sorry I took so long, bro.

Version 1.0 | Jun-16 2009

• Initial Release

• Download

It's been a while, yeah? (Miss me?) Sadly, my Nikon stopped working. Instead of getting it repaired (for the umpteenth time) I went on hiatus. But now I'm so rusty; these shots are not my best! I suppose it doesn't help that I'm using a totally new camera and lens. It's like starting from zero. I'm not getting the shots exactly as I want them. I need to get back to my fighting weight!

There's almost a ten year technology gap between my old camera and the new one. They're both Nikon cameras but it almost doesn't matter. They're that different!

The fun's not over yet! Keep an eye on my Instagram where I'll be posting alternative versions of these photos. I didn't want to just copy over what I already put out on my Flickr. I hope you like glitch and pixel art. Please look forward to it!

I must explain a few things, first of all this is somewhat incomplete. At the end of one of the files (DATA3.AIF IIRC) the ripper fucks up and gives me error messages. Perhaps this is due to one of the plugins giving false positives. I'm not sure. But it happens. Otherwise, everything else was ripped and looked over with a fine tooth arrow key.

That's the other thing, there are over 15000 images on the DVD! The majority of them are 8x8 sprites. If you've ever looked at NES chr data then you know what I'm talking about. I had to sort through all that! To me it made sense to combine the smaller objects into a collage. Any collage you see in this gallery was done by me and if you don't like those then tough titties. It doesn't make sense to upload 16x16 objects individually. Image slicing is pretty common in paint programs these days. You can use it to break up the collages.

So yeah, I'd also like to mention that a lot of these images are material we've all seen before from Capcom art books and such. There's also some original content worth looking at.

I've updated the gallery; downloading couldn't be easier! Click the download button and all the images are collected in a zip file for safe Internet transport. I love it!

Man, Capcom was really good at adding detail with only 3 colors to play with. Dig their crazy sprite work at the MY STADY Photo Hut.

Speaking of other websites did you know MY STADY was originally hosted on LiveJournal? It's no longer maintained but you can still check it out. I'm in the process of copying those posts over. I know Blogger has an import feature but when you go that route your posts won't archive properly. There's a bug where entries created with an older date are ignored by the search engine. So to avoid that I have to manually copy/paste. I'm checking the entries for dead links and bad markup. A lot of the posts have been copied over with enhancements. For example, my Destiny of the Shrine Maiden recaps only had screenshots originally. I've always wanted to include more video and now I can! It's a lot of work but I'm proud of the end result and it's always what I originally had in mind anyway. So yeah, blog posts: remastered!

Alright, so that's all I can think of addressing for the moment. Expect updates to be a lot more frequent. It's good to be back!

What was I talking about again? Oh yeah, Charetta 5 years later! Great show. Great energy. Great crowd. Everybody I spoke to was so proud and happy to see how far they've come. Angelina really loves rock music. She's very passionate about it. She's on a mission to keep rock music alive. She's like a rock ambassador. Stop taking rock for granted! Buy the music, come to the shows, adopt a local band. Let's all do our part.

Right, the photos. Firstly, big shout out to Angelina and Mike for bailing me out. Once again my camera was an issue. According to Mike I should probably expect that every time from now on. There was a policy change or something? It's not a big deal, I'll just have to be diligent about getting passes in advance. I got some pix of Mike and Angelina from the after party. Those should be going up next.

And there you have it. What took so long? I took 500+ shots of them performing. Yeah, proofing was murder. Many sleepless nights—and days! Please enjoy these 55 shots of Charetta selling out. (Get it?)

Links

• Amazon

• Facebook

• iTunes

• Last.fm

• ReverbNation

• SoundCloud

• Twitter

• YouTube

I linked to EVERYTHING.

*I stole this device from Interstella 5555: The 5tory of the 5ecret 5tar 5ystem.