Skip navigation

Tag Archives: down the rabbit hole

Home Sweet Home

Home Sweet Home

I guess Sass happened a few years ago and I missed the memo. That’s bad news for me because since I didn’t hug it, and pet it, and squeeze it with such love as soon as it appeared, I missed the total-newb tutorial train. Everyone’s already supposed to know everything about it by now, so all the advanced Sass techniques and integrations assume you do. After all, how could you not? …unless you’ve been living under a rock. Which I have.

I get what Sass does and I know Foundation makes heavy use of it for customization. When I realized I wanted Foundation to render rows wider than 1000 pixels by default, I knew it was time to adopt Sass. I simply had no idea how to do it for my current setup, which is Visual Studio 2013 Update 3, Web Essentials 2013 for Update 3, and Foundation 5.

In my travels, I kept seeing mention of something called Compass (I have no idea what it is or why I would need it), but according to what I’ve been reading, Web Essentials recently supplanted much of that tool’s usefulness in Visual Studio. Fine with me: the less bloat, the better. Unfortunately, the web development community at large hasn’t really caught up with this turn of events, so tutorials for Compass are still all over the place like it’s the only option for this particular quest. And it’s not.

Without further ado, I will describe here the steps I followed in order to customize Foundation 5 via Sass in a new ASP.NET MVC 5 Web Application through Visual Studio 2013 Update 3 with Web Essentials 2013 for Update 3 installed.

  1. In Visual Studio, FILE → New → Project… → Installed → Templates → Visual C# → Web → ASP.NET Web Application → (name it whatever) → OK.
  2. MVC → OK.
  3. Right-click your new Web Application project in the Solution Explorer and select Manage NuGet Packages…
  4. Search for “foundation sass”. At the time of this writing, the most appropriate package was Zurb Foundation 5 (for Sites) Core Sass files. I guess you could alternatively do this in the Package Manager Console:
  5. Rename  /Content/Site.css to  /Content/Site.scss (CSS to SCSS) and replace its contents with the following, which puts a custom variable out there and then processes it against the core Foundation SCSS files to create a compiled CSS file:

    Let me briefly explain what’s going on here…

    • Line 4: If you don’t have this line, you can’t do stuff like rem-calc() in your customizations… which, as it turns out, is exactly what I need to widen the rows. This crucial little tidbit stole an hour of my life. It’s mentioned in the documentation, but it should just be there by default. I’ll explain the pathing in a sec.
    • Line 6: That’s me doing what I came here to do: I want Foundation to take advantage of wider screens. Instead of limiting itself to 1000 pixels, I want 1200 pixels. Much better. Also, super secret unobvious magic: order matters!
    • Lines 8-10: These three files are what actually build the Foundation CSS. Similar to what happened on line 4, we have to point Web Essentials to the files using paths. You’ll notice that the /sass/foundation/Site.scss file (which we didn’t use in this scenario) doesn’t have pathing because all those files are in the same directory. It’s also missing the ever-important line 4, which is just cruel if you’re trying to use it as an example. Ahem.
  6. Saving Site.scss generates Site.css.

    Saving Site.scss generates Site.css.

    As soon as you save your modified Site.scss, Web Essentials will compile Site.css and stick it under Site.scss.

  7. Run your project now and you’ll see that Foundation has been applied to the default ASP.NET hello world page. It’s not the best test in the world, but it’s quick and it shows it’s working. Change 1200 to 700 or something and refresh to see the effects.

 

The $row-width setting I modified is just one of the many things you can customize. Check /sass/foundation/_settings.scss for more options. The official Foundation documentation explains a few of them on a per-feature basis, too.

It’s not that this is terribly difficult… I just couldn’t find it explained the way I needed given my varying levels of proficiency with these tools. Hope this helps someone save a few hours and tears.

The Foundation Icon Fonts 3 pack is pretty cool. Not the best selection, and way too many stupid “social & brand icons” (MySpace? Really?), but I figure if I’m going to use Foundation anyway, why not. And since I’m living in ASP.NET MVC land these days, the official way to go about adding them to my web application is to chuck them into a bundle. That’s a nice, clean way to keep things organized and optimized. So, I did it, but it didn’t work very well once pushed to Azure. The icons wouldn’t load and I got weird 404s and 500s… What gives?

Well, I spent more time than I’d care to admit trying to figure out why something I figured was going to be simple and easy… wasn’t. Here’s what I discovered it took to get those icons working in this particular environment, and I hope it saves someone a little time.

foundation-icons

First things first, the files need to be in there, so you’ll want something like the structure I’ve got.

Then comes bundling. You could just throw it into your primary Foundation bundle, but here it is in its own. Line 10 is the real magic because of the CssRewriteUrlTransform added to Include(). It’s kind of a big deal because it forces any URLs in your CSS file to cooperate with the MVC routing. And for being so crucial, it shouldn’t have been so hard to find.

Then make sure you actually call that bundle in your BundleConfig.cs:

Same deal in your _Layout.cshtml or wherever else you may want to do it:

And finally, one more “guess the password” type of requirement (that’s my way of saying you’d probably never, ever figure it out unless someone shared it with you). In your Web.config, you need to add these MIME mappings so everything will load correctly across all browsers. Why you have to explicitly set this instead of it being default behavior is stupid and beyond my comprehension:

Happy Happy Joy Joy

There you have it. After I did those magical things and published to Azure, the icons showed up. Ridiculous.

AMD CPUs run really, really hot.

AMD CPUs run really, really hot.

I recently upgraded the CPU on the media center PC in our living room so we could do a little gaming when we’re tired of watching shows and stuff. The upgrade went well except for the stock cooler that came with the CPU. For the amount of sound it made, we may as well have surrounded the case with box fans and taken a leaf blower to it as well for good measure. That thing was LOUD.

I’ve never really done the aftermarket cooler thing because it’s a pain in the ass. Ripping the machine open and performing brain surgery is enough without also having to screw around with thermal paste and most likely take the whole motherboard out just for a fancy cooler. Stock’s fine, thanks. Except now it wasn’t, and I had to do something.

I ordered a Cooler Master Hyper 212 EVO because it has lots of really good reviews and seems like a safe bet. When it got here… man, I knew it was going to be tall, but it was really tall. As in I wasn’t sure I’d be able to close the case with it in there. I soldiered on though, hoping that once it was secured onto the chip, everything would be tight but alright. So out came the motherboard, off came the old thermal paste, and so forth… and yeah, no, I couldn’t close the case.

Hacksaw

Hooo!

What now? Well, if you look at the heatsink, you can see 8 little copper nubs sticking out the top of it. These nubs were the only thing preventing me from closing the case — if they weren’t there, everything would be great. And so, convinced I was awesome enough to do this kind of thing after four years of generally successful home improvement projects, I took a hacksaw to the little bastards and extracted them.

A half hour or so later, I gave myself a pat myself on the back as I slid the side cover back onto the case. Score! I’m so good. After a few minutes of uptime, however, the machine shut itself off without warning. It had overheated. Hmm, that’s odd. Wonder what I did wrong?

I spent until 5:00 AM that night (morning?) trying to fix the problem. I probably cleaned and reapplied the thermal paste like six times, thinking each time I must have done a bad job that last time and that this time would be it. Nope. How about the BIOS? Maybe the fan speed is too low? Nope. I eventually concluded that I was doing everything quite correctly and that it had to be something else.

Could it be those copper tubes? Naw! They’re just pieces of copper bent in such a way that they help conduct the heat! Right? …right?

GeniusIt was, of course, the copper tubes. Butchering them eliminated a key component of the cooler according to this article I finally found. So that kind of sucked.

In the end, that cooler went in the trash and I ended up using a Logisys MC2002GX instead. It was just short enough to fit, it works, and it’s nice and quiet. But yeah, don’t mess with those damn copper tubes.

Down the Rabbit HoleSome of my time is spent supporting an aging home-grown CRM. It’s not particularly user-friendly and sometimes the error messages it produces are rather cryptic, but it gets the job done.

Today, one of its users told me he couldn’t pull up a certain ticket, so I tried to pull up the same ticket and successfully reproduced the error. Looked like a pretty run-of-the-mill bug so far, though I had to wonder how something that’s been working fine for months (and has had no recent code or database changes) suddenly stopped working.

About an hour later, I was pretty far down the rabbit hole trying to get as much of the ticket page to load as I could. I eventually narrowed the problem down to the query that selects the tickets, but noticed something strange: when I selected all tickets, it worked. When I tried to select only the ticket ID the user wanted… no rows. Upon closer inspection, I realized the user had given me a bogus ticket ID, one much larger than the largest ticket ID in the system so far.

I know that was 30 seconds you can’t get back, but hey — now there’s no way you’ll ever spend an hour of your own life on such a thing.