Mental Drizzle

Not a Brainstorm - Just Some Mental Drizzle

18 notes

Your first mistake might be assuming that people are rational. Your second mistake could be assuming that people are eager for change. And the marketer’s third mistake is assuming that once someone knows things the way you know them, they will choose what you chose.
Seth Godin (via typeaffair)

3 notes

…This area is called the human exclusion zone.”
This video is awesome because the speed, efficiency, and safety of these robots makes me excited for the future of autonomous cars.

This video is scary because of the need for a “human exclusion zone.”

Filed under robots autonomous self-driving cars g+

0 notes

Escaping in HTML

I was writing a bunch of HTML the other day and I needed to escape an ampersand (&).

Some characters are reserved in XHTML; for example you cannot use the greater than or less than signs or angle brackets within your text beacuse the browser could mistake them for markup.
I needed to refer back a few times so I thought I would share the resource I found:

escapecodes.info

Filed under HTML escape codes

0 notes

Not Scrollspy and Not Affix

I was working on a client website and decided to include some user interface components inspired by Twitter’s Bootstrap. If you check out the Bootstrap docs you’ll see that the sections of the current document are affixed to the side of the screen using Bootstrap’s affix.js. Then as you scroll, each section is highlighted as the id passes through the section on the right. This is achieved with scrollspy.js.

I really enjoy the UX/UI that this combination add to a web page. This combination makes gives the nav menu two functions. It provides the user with a navigation menu. But it also provides the user with context of the document immediately upon initial load, and continues to do provide that context while scrolling through the document.

My first attempts did not go as planned. Bootstrap’s affix.js and scrollspy.js work very well within the bootstrap framework. However, this was a Wordpress project based on a different framework so I had to find some alternate solutions.

ddscrollspy

To replace scrollspy.js I found this little JavaScript plugin. Ddscrollspy worked where Bootstrap’s scrollspy.js wouldn’t. Specifically, the Bootstrap script would only highlight the last <li> in the div. After an hour of fiddling around with scrollspy I searched for an alternative and ddscrollspy worked as advertised immediately after configuration.

jQuery Stickem

Bootstrap’s affix.js worked a bit better than scrollspy did. The only problem is that it flickered, a lot, when you got to the part where affix-end needed to happen. This issue is tracked pretty well over at github. In my case, I think the root cause was that I wasn’t working within the Bootstrap framework. For me, the Bootstrap Docs work very well in all browsers.

A quick search lead me to jQuery Stickem. This plugin worked very well. To make it work in Wordpress, it took a bit of theme manipulation, but that was sorted pretty quickly.

Document Ready vs. Page Load

It turns out that with jQuery Stickem, I was still having a problem at the end of the scroll. The navigation box would jump to the bottom of the page too quickly.

Both jQuery Stickem and Bootstrap’s affix.js rely on calculating the size of the div that is being watched. Unlike the Bootstrap docs site, my documents contained images.

After a bit of investigation I found that the images were my problem. The height of the div changed after I was running the jQuery Stickem script. The height change was caused by the images loading. The solution was (found at csstricks.com) to run the script in the head with:

$(window).bind("load", function() {
   // code here
});
instead of:
$(document).ready(function{
// code here
})

Chris Coyier says that

…this [script] will wait for images to be finished loading, so that you can measure their widths and heights accurately…

Essentially, the (document).ready(function{}) code won’t provide you with accurate heights if images or other DOM manipulations are involved.

Filed under JavaScript jQuery twitter bootstrap ddscrollspy jquery stickem wordpress ui ux

0 notes

Updating Ruby on Rails

Are you a developer?

Do you have Ruby on Rails installed - anywhere?

DO THIS NOW!!!!

  1. Open a terminal
  2. Type in this:
    gem update rails

That’s better…

After reading this article, I ran around to all my everyday machines and made sure I was up to date. The scariest part for me was this:

There are many developers who are not presently active on a Ruby on Rails project who nonetheless have a vulnerable Rails application running on localhost:3000. If they do, eventually, their local machine will be compromised. (Any page on the Internet which serves Javascript can, currently, root your Macbook if it is running an out-of-date Rails on it. No, it does not matter that the Internet can’t connect to your localhost:3000, because your browser can, and your browser will follow the attacker’s instructions to do so.

To keep tabs on the situation, check in at the official Ruby on Rails blog.

Filed under Ruby on Rails Security Update Developer Web Developer

0 notes

Installing Ruby on Rails

Over the past month, I’ve invested in some new hardware. In order to keep a consistent development workflow, I had the opportunity to install RoR on Windows 8, Mac Mountain Lion, and Ubuntu.


RailsInstaller.org

If you are on Windows or Mac the first thing you should do is visit RailsInstaller.org. This is a great project by EngineYard. On windows this will install the following:

  1. Ruby 1.9.3-p125
  2. Rails 3.2
  3. Bundler 1.0.18
  4. Git 1.7.6
  5. Sqlite 3.7.3
  6. TinyTDS 0.4.5
  7. SQL Server support 3.3.3
  8. DevKit

On Mac you will get:

  1. Ruby 1.9.3-p194
  2. Rails 3.2.7
  3. Git 1.7.9.6
  4. Sqlite 3070500
  5. osx-gcc-installer 4.1
  6. JewelryBox 1.3.0
  7. RVM 1.14.2
  8. SM 0.10.3

Command Line Install

When it came time for my Ubuntu install, I couldn’t find any Linux packages that were as convenient as the Windows and Mac installers. However, I did find these instructions here.

This great write up worked well for my Ubuntu12.04 desktop. Bonus! Since it is a command line install, this write up works for your headless Ubuntu servers too! I should note that Digital Ocean is a company that provides competitively priced virtual private servers.

Filed under Ruby Ruby on Rails RailsInstaller EngineYard Windows Mac Ubuntu Linux Command Line Digital Ocean Git JewelryBox RVM

2 notes

Proxmox, Linux, and Java

I took a look at my sweet custom built server and decided that I was underutilizing my resources. I could be doing so many more cool things with 16GB of RAM and a quad-core CPU.

After looking around at free and open source solutions for virtualization, I decided to dedicate the hardware to Proxmox. Proxmox is an opensource KVM hypervisor that is fully administered through a browser window. Check it out here.

Things had been going really well with my Mac and administering VMs in Proxmox. However, I was having trouble in Linux. In both Ubuntu 12.01 and LinuxMint 13, I couldn’t keep a Proxmox window open without crashing the browser.

It turns out that Proxmox uses a Java appelet to serve up a VNC connection to the VM desktops. On a Mac, you need to install the Java plugin yourself and you generally get it straight from Oracle. However, on Ubuntu and Mint OpenJDK is pre-installed.

This is a nice feature to make the distros a bit more user friendly out of the box. However, OpenJDK and Proxmox did not get along well.

The solution ended up being to uninstall all instances of OpenJDK and IcedTea. Then I followed these instructions to install the proper version of Java7 from Oracle. FYI - the instructions are a bit easier (add a ppa and then apt-get install) than the instructions on the Java site (manual download, unzip, copy and more).

Filed under proxmox java Mac OpenJDK Linux Ubuntu LinuxMint Oracle IcedTea OpenSource virtualization

0 notes

Modern UI Meta-Data

I found this while poking around on t.msn.com. FYI - that site only was reachable from IE on my Windows 8 VM.

<meta name="application-name" content="MSN for Windows 8"/>
<meta name="msapplication-TileColor" content="#007eb0"/>
<meta name="msapplication-TileImage" content="/content/images/MSNButterfly.png"/> 

This looks like specific code for putting a webapp into the start menu in the Windows 8 Modern UI.

Filed under Modern UI Metro Windows 8 Meta-Data