I went down a 🐇 hole yesterday when I decided I wanted to try a new CSS framework. It started innocently enough, I found Siimple and figured I’d give it a try here. Siimple has SCSS files so I wanted to import them directly rather than used their minified distribution CSS. However, I got an error running Jekyll 2 when importing their SCSS. Though I filed an issue on their repo, I figured maybe it was a problem that would go away if I updated my Jekyll version. I used Chase’s handy gems-cli tool to grab the latest version of Jekyll to put in my Gemfile and, while I was at it, I updated nokogiri, kramdown, coderay, mini_magick, rake, and mechanize, too. I figure if you’re going to upgrade a gem, go big or go home, right?

I’m trying to learn ReactJS and it got tiresome for me to change my file type in Sublime Text from regular JavaScript to ReactJS > JavaScript (JSX) every time I opened a .js file. Fortunately, with a couple Sublime Text 3 plugins, I was able to get this happening for me automatically.

I made another thing! This time, I made my first game. Well, the first game I’ve ever finished (I’ll get back to you someday Mahjong). It’s a JavaScript web implementation of the game Blicblock that your Sims play in The Sims 4. I built it using AngularJS, my new loves Yeoman and Bower, and Bootstrap. You can try it out in your web browser and view or contribute to the source code on Github.

I always lag behind Jon when it comes to trying out build tools or frameworks that are supposed to make my programming life easier. He tells me about cool new things he’s using, and I say “yeah, that looks cool, but I just want to be productive, so I’ll do things they way I’ve been doing them.” Then eventually I get a chance and I try out the cool thing and Jon was right, it’s totally great. That happened for me recently with Yeoman and Bower.

Recently, I had need to change the value of a select menu in an iframe from the outer page containing the iframe. There was a change event listener that had been added in the iframe’s JavaScript:

I was excited to see the Jekyll turns 2.0.0 blog post announcing built-in support for CoffeeScript and SASS. I updated 3till7 and my portfolio to use the latest Jekyll. This in turn meant I did away with my custom plugins for compiling CoffeeScript and LESS, and moved from LESS to SASS. Here on 3till7, I stopped using the Jekyll Asset Pipeline to compile my assets and produce a combined, minified file. Using imports in my .scss files was sufficient for me CSS-wise, and my one CoffeeScript file is small enough that I don’t care it isn’t minified. I actually haven’t checked, but I wouldn’t be surprised if Jekyll 2 supports JavaScript minification like you can do with your SASS.

Over the course of a little less than a week, I migrated this blog from WordPress 3.8 to Jekyll. I used WordPress for years, probably since 2005 or 2006 when I switched away from Movable Type. I finally decided I wanted something more lightweight than WordPress, and in particular I wanted a blog that would load faster. Jekyll gives me both of those. The part that took the longest to migrate was customizing the new layout, based on Dbyll, and formatting the code examples in my posts.

I spent yesterday afternoon creating a Chrome extension using Adnan Topal’s extractCSS library. I found extractCSS.com a few months back, I think via Hacker News, and thought it was a cool idea. It lets you paste a chunk of HTML code and it will extract the CSS classes, IDs, and inline styles used in that HTML. It produces a skeleton stylesheet with rules for those IDs and classes, and inline styles already filled in.

Using the Events Manager WordPress plugin at work, I noticed that the event tag archive pages showed only current and upcoming events with a given tag. I wanted them to show all events, including past events, with the tag. I made a custom loop to accomplish this, within the Genesis framework. Create a file called taxonomy-event-tags.php in your Genesis child theme:

I’ve been having a lot of fun at work recently using Spring 3 MVC, Twitter Bootstrap, jQuery UI, jQuery Mobile, and of course jQuery. Not all on the same project, but in a couple different projects I’ve been working on. Twitter Bootstrap has been really cool as a drop-in way of quickly making a pretty, clean layout. I love not having to style my tables manually, and the various spanX classes to have floating blocks a set percentage of the page wide are great. I’ll definitely be using Twitter Bootstrap in future projects; thanks for the suggestion, Joe.

Recently for work, I’ve had cause to write functionality so that a certain chunk of a form can be inserted again, over and over, by the user. The form involves data about course equivalencies between schools, and the user might need to submit data for multiple courses a student has taken. Hence, the user needs to be able to add extra course sections on the fly, as they’re necessary.

It may be useful to your visitors to know which links will take them off of your site without having to hover over all of them. It might also be a nice touch to mark links pointing to PDF documents, for example, with a little Adobe PDF logo. With the help of Javascript and CSS, you can do this pretty simply.

Lightbox is nice and all, but sometimes I find it clunky, particularly in Firefox when I have a lot of other tabs open. However, I don’t want to go the route of having an image load by itself in the browser, because it would be so much nicer to have it integrated into my layout. I could have a whole bunch of separate pages, one for each image, and do a full page load when a thumbnail is clicked, but that’s kind of a hassle. Well, with a simple PHP script and some AJAX calls, I can have my image load within the gallery page without a page reload.

I’m trying to do some work with a Perl app on my Powerbook but I was unable to get any Perl scripts to execute from my local server. At first, I was getting just the source of the Perl files spit back at me. I followed a few tutorials about getting /etc/httpd/httpd.conf set up, but then I kept getting 403 Forbidden errors when I tried to access .pl or .cgi files in my browser. I checked /var/log/httpd/error_log and saw:

Custom shapes can be very useful for making multiple objects that look the same. For example, say you want several photos to all be cut out of the same shape, like this:

If you’ve browsed through many personal sites at all, you’ve probably seen some of the following things that make me personally cringe. I don’t understand why they’re so trendy, since they don’t improve a site in the least.

One of the easiest ways to keep your code easy to update, read, and debug is to keep it neat. That means indentation, documentation, consistency, and logic need to be applied. These are basics in any programming class, and they are just as applicable with coding HTML as they are with C++ or any other programming language.