Chuck Grimmett

Archives

Blog index

Blog

  • Meteor Basics, Secure Hash Algorithms, and 404 Error Pages

    Today I learned:

    Meteor Basics

    • Meteor is a platform for building real-time web apps that sits between your app’s database and its user interface and makes sure both are kept in-sync. It is built on Node.js, so it uses javascript on both the client and the server.
    • If you want to go above and beyond the Meteor documentation, the Discover Meteor bookArchived Link is a good place to start.
    • If you want to start learning Meteor but are fuzzy on the basics of Javascript, here is an 80/20 primerArchived Link.

    Basic Usage

    • To create a new project:
     $ meteor create [project name]
    • To then run that new app at http://localhost:3000/:
     $ cd [project directory] $ meteor
    • To stop the app from running, press ctrl+c
    • Adding a package like Twitter Bootstrap to a Meteor app is incredibly simple. No files to link up, Meteor takes care of all of that out of the box:
     $ meteor add twbs:bootstrap

    Structure

    Meteor has five types of packages. most can be seen in [project directory]/.meteor/packages:

    1. meteor-base is Meteor’s set of core components.
    2. First-party packages that come bundled with Meteor that can be removed, such as mongo (the database) and session (a client-side reactive dictionary).
    3. Local packages specific to your app, which are stored in /packages
    4. Third-party packages available at Meteor’s online package repo, AtmosphereArchived Link. These are named in the author:package convention.
    5. NPM packages in Node.js. They aren’t listed with other Meteor packages, but can be imported and used by other Meteor packages.

    Meteor has some special directories:

    • /.meteor/ is where Meteor stoes its own code. Don’t modify it.
    • Code in /server only runs on the server
    • Code in /client only runs on the client
    • Everything else runs in both places
    • Static assets should be stored in /public (The exception is CSS. Meteor automatically loads and minifies CSS, so it should be stored in /client)

    Meteor loads files in a specific order:

    • Before anything: Files in /lib
    • After everything else: Any files named main.*
    • Everything else is loaded in alphabetical order by file name.

    Deployment

    • To quickly set up a staging server, you can create a Meteor account and deploy to a Meteor subdomain for free:
     $ meteor deploy yourappname.meteor.com
    • For deploying to your own server, check out Meteor Up, a command line utility that automates setup and deployment for you.

    404 Error Pages

    • Making a 404 error page isn’t enough, you have to tell Apache where to find it. I’m used to working on WordPress, which takes care of that automatically. Turns out I’ve been running this site for a few months without my 404 page working. Whoops!
    • To do so, add ErrorDocument 404 /404.html to your .htaccess file. Replace /404.html with the path to your 404 page.

    Secure Hash Algorithms

    What are they and what is the difference between SHA1 and SHA2?

    • SHA stands for Secure Hash Algorithm. The short story about how is works is that a mathematical operation is run on a given input and a unique output, or hash, is generated. By comparing the output to an expected output, you can verify the data’s integrity. The theory is that no two different input values should result in the same hash output (called a collision).
    • SHA1 algorithms produce a 160-bit hash value, while SHA2 algorithms can produce 224, 256, 384 or 512 bit hash values depending on the function used.
    • The very short explanation is that SHA2 hashes larger and are theoretically much less likely to have a collision than SHA1 hashes due to the underlying algorithmic changes.

    What is it used for?

    • Generally, SHA is used for verification. If the hash you calculate matches the expected result, your data has most likely not been tampered with or corrupted.
    • Git uses SHA1 to verify data has not changed due to accidental corruption.
    • SHA is used to sign SSL certificates.
    • Bitcoin uses SHA2 to verify transactions
    • SHA2 is used in the DKIM message signing standard (i.e. what checks to make sure someone isn’t spoofing your email account)
    • Some software vendors are adopting SHA2 for password hashing.

    Why should I care?

    • SHA1 is on its way out. Chrome is showing errors on sites with SHA1 SSL certificates that expire past Jan 1, 2016. All major browsers will stop accepting SHA1 SSL certificates by 2017.
    • Every site using SSL signed with SHA1 needs to update their certificates.
    • Most certificate authorities have instructions for migrating to SHA2.

  • Readable Code Snippets, VPN Clients, and Privacy

    Today I learned:

    Making code snippets prettier

    • I did some research for Sean Nelson about making code snippets prettier without using Github’s Gist.
    • This problem is already solved. Google’s Code Prettify is javascript that works parses your code pretty well and colors it.
    • Put the prettyprint class on your 
      

       tags and put this script in your document:
      • 

    

    

    "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
    

    

      

    • I might start using this for my code snippets in the future. Right now I have some CSS styles that conflict with it, so I need to sort those out first.
      • 

    

    

    VPN Connection issues
    


    

    Privacy Policies
    

    I’ve been having a lot of discussions about privacy and data collection recently, both at work and with friends. This episode of What’s the Point on privacy with Kashmir Hill cleared up some common misconceptions. The main points:
    

      

    • If a company’s fundamental business model is collecting data and figuring out things about you (i.e. Google and Facebook), they aren’t selling your data, but rather selling access to your attention to advertisers. They don’t want to give up your data to other people because it is such a valuable resource to them.
      • 

    • Some companies who sell you physical products have a side-business selling data on what you bought and when to others.
      • 

    • Privacy has become a genuine concern for companies recently, as evidenced by the rise in end-to-end encryption in consumer products like iMessage. This is worrying to some government agencies.
      • 

    • If you read privacy policies, they actually tell you all the ways a company is going to violate your privacy. As long as a company doesn’t do anything they didn’t say they were going to do, they are protected.
      • 

    

    






  • 

    Photoshop Patterns, Homestead Provisioning, Composer Basics
    



    

    



    


    



    



    Today I learned:
    

    Tiling Photoshop Patterns
    

    I’ve been making some patterns for the header images on these TIL posts in my down time the past few days. There are two ways to tile patterns in Photoshop. One is manual and time consuming, the other is fast, easy, and less prone to error.
    

      

    • The manual, time consuming way is to open a pattern in one layer, duplicate the layer multiple times, and move the layers so that they line up in a tiling pattern. While PS is pretty great at snapping items to a grid, sometimes they don’t always line up and you only find out after you export the image.
      • 

    • The fast and easy way is to open the pattern in PS, go to Edit > Define Pattern…, then use the Pattern Stamp Tool to paint the pattern you just created across a large canvas.
      • 

    

    This would have saved me a lot of time on the first nine headers, but c’est la vie. This will definitely save me time going forward.
    

    

    Homestead Provisioning
    

    I use Laravel Homestead for my local PHP environment. Provisioning a new site is something I’ve done multiple times, but I do it so infrequently that I have to look it up each time. So here are my quick notes:
    

      

    • Create the site folder in ~/Projects/
      • 

    • Map the folder and domain in ~/.homestead/Homestead.yaml
      • 

    • Map the domain to 192.168.10.10 in /etc/hosts/ (reminder: $ sudo nano /etc/hosts/)
      • 

    • Run $ cd ~/Homestead
      • 

    • Run $ vagrant up --provision or $ vagrant reload --provision if vagrant is already running.
      • 

    • Site should now be accessible locally.
      • 

    

    If you need a new database for this site and load it from a SQL dump:
    

    

    $ vagrant ssh $ mysql -u homestead -p -e 'create database DBNAME;' $ mysql -u homestead -p  DBNAME < path/to/file.sql
    

    

    

    Composer Basics
    

    Composer is a dependency manager for PHP. I’ve used Composer, but like Homestead provisioning above, I’m a little rusty. Writing it down helps me remember.
    

    After you’ve installed it (I have it installed globally), the basic usage is:
    

      

    • Set up composer.json in the directory you are working on. A basic structure looks something like this:
      • 

    

    

    {     "require": {         "ajt/guzzle-toggl": "^0.10.0",         "corneltek/getoptionkit": "~2"     } }
    

    

      

    • In that directory, run $ composer install to install the dependencies listed in composer.json. They will be in a file called vendor.
      • 

    

    






  • 

    Automating Drudgery, Project Planning, Parent Selectors, and Find and Replace
    



    

    



    


    



    



    Today I learned:
    

    Automating the tedious parts of these TIL posts
    

    When writing these TIL posts, I want to eliminate as much resistance as possible so I can get straight to writing. The more steps I have to take, the less likely I am to follow through. So I took some time today to automate the one of the tedious parts: Setting up the markdown file I write these posts in with most of the specs already filled out.
    

    I created 3 TextExpander snippets to help with this process:
    

      

    • One with today’s date string and extension separated by dashes for the file name: %Y-%m-%d-.md (I tried a fill-in for the title, but the filename doesn’t stay selected in Coda when another window launches)
      • 

    • One with Javascript randomly picking one of the 7 default header images I use (this is used in the next snippet):
      • 

    

    

    var random = Math.floor(Math.random() * 7) + 1; TextExpander.appendOutput(random + ".jpg");
    

    


    

    --- layout: post title:  author: Chuck Grimmett date: %Y-%m-%d category: TIL feature-img: "/img/defaults/%snippet:;random-img%" tags:  -  excerpt: 
     ---
    

    

    

    Better Project Planning
    

    Besides for the normal scope, budget, platform, dependencies, timeline, and underlying technologies, here are a few things you need to consider when architecting and planning out a software development project:
    

      

    • After delivery, what resources will we have available to maintain the system and handle emergencies?
      • 

    • What impact will maintenance and support have on our ability to sell and develop new projects in the future?
      • 

    • What is the opportunity cost of using one developer over another?
      • 

    

    

    Parent Selectors in CSS
    

    There are no parent selectors in CSS.
    

    There are two ways around this:
    

      

    1. Use the jQuery parents() selector to return the appropriate parent element, then use the css() method to set the style you want. For example, ("a i").parents("li").css({"margin-right": "5px"}); finds list items who are the ancestors of icons wrapped in links and makes their right margin 5px.
      2. 

    2. Change the structure of your code and add specific classes that you can apply your desired styles to. For example, instead of applying a right margin to all list items and then a different right margin (via parent selector) for all list items that contain icons, make two classes with the proper margins and apply one to the plain list items and the other to list items that contain icons.
      3. 

    

    I opted for #2. It makes your CSS cleaner, keeps you from having to load new dependencies like jQuery, and keeps the styles in one place so you don’t have to search 6 months from now for where that extra margin is coming from. I’d only use the first option in cases where you have complex rules that can’t be accomplished by restructuring your code and/or adding classes to make your desired change possible.
    

    

    Project-wide Find and Replace in Coda
    

    I do the vast majority of my code-writing in Coda. I used to have to open up TextWrangler to do find and replace across multiple files, but apparently Panic added this feature into Coda sometime between v1 and v2.5. I got used to having to switch and didn’t look for it again until today.
    

    It is buried in the sidebar under “Find In” instead of in the regular find and replace bar, so I never saw it. You can search across open files, the entire site, or in a specific directory on your local machine.
    

    Find In is buried under the sidebar in Coda
    

    






  • 

    Jekyll Upgrades and Liquid Templates
    



    

    



    


    



    



    Today I learned:
    

    Upgrading Jekyll from 2.x to 3.x
    

      

    • The upgrade itself is simple: In Terminal, run gem update jekyll. Use sudo if you run into permissions issues like I did.
      • 

    • If you use pagination in any of your templates, you’ll now have to add gems: [jekyll-paginate] to the # Plugins section of your _config.yaml or else your site won’t compile. This wasn’t necessary in 2.x.
      • 

    

    

    Making an index for my TIL posts in Liquid
    

    I wanted to have an index for my TIL posts that was organized in two ways: reverse chronologically and by tag. Here is how I’m handling that with Liquid:
    

    

    	### Recent TIL Posts 	 	 	 	--- 	 	### TIL posts by category 	 	{% for tag in site.tags %} 	  {% assign t = tag | first %} 	  {% assign posts = tag | last %} 	 	#### {{ t }} 	 	{% endfor %}
    

    

    Notes:
    

      

    • The general structure of the tags method comes from Joe Kampschmidt. I started searching when it didn’t work the same way as the categories method I wrote earlier.
      • 

    • This method for displaying tags works because I’m only tagging my TIL posts. Everything else goes into categories. If I were to tag other kinds of posts, I’d need to first limit by posts in site.categories['TIL']
      • 

    • Category names are case sensitive.
      • 

    • You can display raw Liquid markup without it rendering by wrapping it in {%raw%} and {%endraw%}.
      • 

    

    






  • 

    Pull requests, scraping Reddit, and flexbox quirks
    



    

    



    


    



    



    Today I learned:
    

    How to contribute to an open-source project on Github
    

      

    1. Fork a project
      2. 

    2. Make the changes, commit, and push back up to Github.
      3. 

    3. Go to the repo on Github you want to propose a change to.
      4. 

    4. On the page: Choose your branch. Compare and review. Create pull request.
      5. 

    

    

    Pulling Reddit data with Python
    

      

    • Connect to Reddit and grab data with PRAW
      • 

    • Store the retreived information in a MySQL database with PyMySQL
      • 

    

    The above two items came together in one learning experience. I helped Seth Millerd debug a Python script he was working on (with considerable help from Eric Davis!Archived Link). It is the first public repo I’ve contributed to, and the first time I’ve made a pull request. We use git at work, but we use a shared repo model instead of the fork & pull model.
    

    

    Image scaling quirks with flexbox
    

    All about flexbox (CSS)
    

    Eric DavisArchived Link and I ran into a strange CSS issue where an image was scaling in a funky way when we resized the browser. The height was staying fixed while the width was changing, but there was nothing in the CSS setting a specific height.
    

    It turns out that one of the parent 
    

    s had display: flex; flex-direction: column; specified for layout order purposes, and when we turned that off the problem went away. So then we went searching and the quick-and-dirty fix is wrapping the image in a vanilla 
    

    . That is working for us for now, but I want to read through the W3 docs and see if there is something bigger we are missing or if this is a known bug.
    

    

    

    






  • 

    Five Minute Journal TextExpander Snippets
    



    

    





    



    



    A few days ago I listened to Tim Ferriss’s show on The Magic of Mindfulness and learned about the Five Minute Journal. I made some TextExpander snippets for it.
    

    I love the idea of the Five Minute Journal, but I know that I won’t use yet another notebook or iPhone app to fill it out. I took a look at the tools I use on a daily basis and came up with a solution: A TextExpander snippet that I can put into the journaling app I already use, Day One.
    

    All I have to do is type ;5am in the morning and ;5pm in the evening to fill out the journal. It automatically adds the date and time then pre-populates the template. Presto. It works on TextExpander’s iOS app, too.
    

    I formatted the snippets with Markdown so they can be easily used in a wide variety of apps. If you want to change the formatting, feel free to make it suit your specific needs.
    

    Download the Five Minute Journal snippets for TextExpander (as a zipped file) here.
    

    Here is what the morning and evening snippets look like and the final result in Day One:
    

    Five Minute Journal Morning TextExpander Snippet
    

    Five Minute Journal Evening TextExpander Snippet
    

    Five Minute Journal entered into Day One
    

    Download the Five Minute Journal snippets for TextExpander (as a zipped file) here.
    

    






  • 

    Single iPhone Home Screen
    



    

    



    


    






    For the past two weeks I’ve been using a single iPhone home screen configuration a la CGP Grey.
    

    Most of the apps live in folders on the top row, divided into four main buckets: Media, Work, Life, and Other. The other three rows of apps are the ones I use most frequently and want quick access to.
    

    The rest? I search for them. This is just as convenient for me as swiping through multiple screens, but the added benefit is that my screen is much less cluttered.
    

    In the process of reorganization, which I completed during a 30 minute train ride, I took a moment to delete applications I no longer use, enable me to waste too much time, or provide too little value. For the distracting/time wasting apps I still want to use (Instagram, Twitter), I made the intentional decision to move them into folders so I am less likely to use mindlessly tap them when I have a free moment. I filled their would-be spots on my home screen with apps I want to use more: Day One to journal and Pocket to read some of my recently saved articles.
    

    my iPhone home screen
    

    The Results
    

      

    • My screen is less cluttered, so it is easier to look at.
      • 

    • I’m spending less time mindlessly tapping on an application and scrolling through stuff I didn’t really look at anyway.
      • 

    • I’m spending more time using my phone for productive purposes like journaling and reading articles I’ve saved.
      • 

    • My default method of finding an application is now using the search functionality (swiping down and typing) instead of swiping through screens, which is very useful when using a different iOS device.
      • 

    

    I really like this layout and I think it will prove to be my long-term configuration.
    

    






  • 

    Follow-up for Praxis
    



    

    





    



    



    I joined Praxis for a group discussion last night on technology and building a personal website. Here are the apps, services, and pieces of advice I mentioned during our conversation.
    

    My Four Pieces of Advice
    

      

    1. Hone your search skills. You don’t have to know how to do everything, just how to find it. Master the Google Advanced Search. Dig into the Stack Exchange communities for answers. If you want to take it even further and use search programmatically, dig in to regular expressions.
      2. 

    2. Poke the Box. Do something, see what happens. Take notes. Do something else and see what happens. Take more notes. Repeat.
      3. 

    3. Stay on top of what is possible. Read the “Site to read and learn from” below to keep abreast of what is possible so that you know where to turn when you encounter a unique problem in the future.
      4. 

    4. When someone asks you a question and the answer is “no”, don’t just say no. Figure out the root problem and always offer a possible solution.
      5. 

    

    My Most-Used Applications
    

      

    • 1Password – The best password management out there. Stop using the same password all around the web and step up your security game.
      • 

    • Evernote – Taking notes, scanning paperwork, research. Very searchable and easy to organize. Available across all of your devices.
      • 

    • DayOne – Top journaling app for the Mac and iPhone. Simple and powerful. I journal every day, whether it is just a few photos or a full manifesto. Here are the ways people have found to use it.
      • 

    • Pocket – Save anything from the web, your email, or 1500+ apps and have access to it on any device later.
      • 

    • F.lux – I spend a lot of time in the evening on my computer. This makes sure I can sleep afterward but eliminating blue light from my screens after dark.
      • 

    • Coda – Coda is my text editor and FTP client of choice. Preview, Terminal, and MySQL connection built in.
      • 

    

    Staying Focused While Working
    

      

    • Pomodoro Method – Focus for 25 minutes, then take a 5 minute break. Take a longer break every 4 rounds. I use this iPhone app and this Mac app to keep track of the rounds. Marinara Timer is a free online alternative.
      • 

    • WasteNoTime Safari and Chrome Extension – Increases your productivity by limiting the amount of time that you can spend on time-wasting websites that you set. I have all social media and news sites blocked during working hours.
      • 

    • RescueTime – Get in the habit of tracking your time early on. Apps like RescueTime make it easy to see where you are spending your time so that you can manage it.
      • 

    • Buffer I use Buffer to share things I find interesting and things I write to social media during the work day so I don’t have to go on those sites.
      • 

    • Brain.fm – Brain.fm helps me regain focus when I lose it.
      • 

    • Keep your phone out of reach during the work day unless you need to take a call. It is too distracting. I keep mine plugged in on a table that is out of reach from my desk. I can still hear when it rings, but I’m not tempted to check Instagram when something is tough.
      • 

    • Turn off as many notifications as you can. They kill focus.
      • 

    • Use your apps in full screen mode if possible. If not, drag the window as large as it can go. Or use two apps side-by-side that fill the screen up. This keeps what is running in the background from distracting you.
      • 

    

    Managing Email
    

      

    • Seth Godin’s Email Checklist
      • 

    • The Email Game Clear out your email quickly with a fun little game.
      • 

    • Unroll.me – Unsubscribe from junk with one click and see unimportant mailing list emails later.
      • 

    • Only check email a few times a day, not every time a message comes in.
      • 

    

    Sites to Read and Learn From
    

      

    • Codecademy – The best place to gain beginner and intermediate coding skills. Even if you aren’t building a site from scratch, it is useful to learn the basics of HTML and CSS.
      • 

    • Hacker News – This is where I get my tech news every day.
      • 

    • Lynda – The best tutorials site on the web.
      • 

    • Smashing Magazine – Great blog on web design. (Powered by WordPress.)
      • 

    

    Backing Up Your Data
    

    The value of backing up our data doesn’t set in until we’ve been burned. If you start a good habit now, you won’t have to know that pain.
    

      

    • Dropbox – If you only need to back up some files but not everything, Dropbox is the best option.
      • 

    • Backblaze – The best online backup service. Safe and secure.
      • 

    • Hard drive back ups – Get an external hard drive and copy your computer’s hard drive to it once a week. If you use a Mac, Time Machine makes that easy. If you use Windows, File History is the way to go.
      • 

    

    WordPress
    

    WordPress sites that illustrate good personal branding
    

    These sites have good branding, nice imagery, good colors and typography, and good navigation. They also happen to be built on WordPress.
    

    Do you like a site and want to see if it is built on WordPress? Install the Wappalyzer extension in Chrome to find out.
    


    Design Checklist
    

      

    • Clean layout without animated gifs, autoplay videos, or distracting imagery.
      • 

    • Easy to read typography.
      • 

    • Imagery that adds to the page/post and attracts people on social media, but doesn’t distract them from your content once they are on your site.
      • 

    • Responsive layout
      • 

    • Easy to find, clear navigation that takes the user where they want to go.
      • 

    • About page with a nice photo of you, clear contact info, and current/past projects you want the world to see.
      • 

    

    Getting WordPress help
    


    Domain Management
    

    There are a ton of registrars out there, but Hover is the best. Hands down.
    

    Even if you are using wordpress.com to host your site, it is a good idea to buy a domain and connect it to your WordPress site.
    

    Hosting options
    

    All of these options have great uptime and customer service. The top three also have automated features that will do an initial WordPress install for you.
    

      

    • WPengine – If you are only hosting a WordPress site, WPengine’s platform and support are unparalleled.
      • 

    • A Small Orange
      • 

    • InMotion
      • 

    • Linode – If you are savvy enough to build your own servers but don’t want the physical hardware, Linode is the option you want.
      • 

    

    Backups
    

    If you are hosting a WordPress.org site, you’ll need to take care of the backups on your own. Those of you hosting on WordPress.com don’t have to worry about this.
    

      

    • Vaultpress – Vaultpress is great, but is a paid service.
      • 

    • BackUpWordPress If you don’t want to pay for Vaultpress, this is a free alternative.
      • 

    

    

    Contact info
    

    If you have any questions, email me, tweet at me, call me on Skype: cagrimmett, or leave a comment below.
    

    






  • 

    Faux Basecamp to Slack Integration
    



    

    



    


    






    

    Get Basecamp notifications in Slack for free without custom code.
    

    A few weeks ago, Slack rolled out a very useful email integration. I didn’t think I had much use for it at first because Slack drastically cut down on the amount of email I receive.
    

    The one thing I still found myself regularly flipping back over to my email window for was notifications from Basecamp, the project management app.
    

    Slack does not officially integrate with Basecamp as of this writing, though there are a few community-built integrations and a paid connection through Zapier. I held off using one of these solutions because I didn’t want to pay for a service or set up a cron job with webhooks that I might have to monitor. Checking my email was a low-cost alternative.
    

    When I logged in to Basecamp the other day, I noticed that you can specify a different email address for notifications than the one you set up your account with. This means you can use the new Slack Email integration to funnel Basecamp notifications into Slack. Awesome!
    

    Email notification settings on Basecamp allow you to set an email address that is different from the one you created your account with.
    

    I quickly set up the integration to post to a private channel, and uploaded Basecamp’s icon for quick visual recognition. Then I grabbed the email address Slack generated and changed Basecamp notifications settings.
    

    BINGO. Works like a charm.
    

    Email integration settings on Slack
    

    Do you want to set up this integration and use the Basecamp icon? Here is a handy version that is already in the correct aspect ratio. You’re welcome.
    

    Basecamp/37 Signals owns all rights to this image. I just found it online and cropped it to a square aspect ratio.
    

    






  • 

    Illum Light Graffiti
    



    

    



    


    



    



    

    My friend Sean Nelson and I spent many nights in high school experimenting with light art, long exposure times, and shadows. Illum was the result.
    




    None of these photos were Photoshop’d. These effects were created by carefully controlling the exposure time, aperture, and light in the photos.
    




    Our work got some notoriety, including being featured in a few small magazines and the New Internationalist 2010 plannerArchived Link, as well as being shown at the 2008 Nuit des musées at Le CompaArchived Link, Conservatoire de l’agriculture in Chartres, France.
    




    We also wrote a short how-to guide that is now linked to all over the Internet.
    




    IMG_0687
    




    IMG_0686
    




    IMG_1571
    




    IMG_1491
    




    IMG_0567
    




    IMG_1208
    




    IMG_1799
    




    IMG_6844
    




    IMG_6842
    




    IMG_4637
    




    IMG_0047
    




    IMG_0012
    




    IMG_3924
    




    IMG_9679
    




    IMG_9638
    




    illum_flickr2
    




    illum_flickr
    




    IMG_9029
    




    Child's Path
    

    






  • 

    Spotlight on Speech Codes 2015 Animated Web Infographic
    



    

    



    


    



    



    

    I took a static infographic made by a client in Illustrator and applied some web magic to make it animated and interactive. Along the way I developed stronger JavaScript, jQuery, and CSS animation skills.
    




    Note: I made this for a client of eResources, my current employer.
    




    Project and Challenges:
    




      

    • A client came to us with a pre-designed infographic made in Illustrator. They wanted it to be interactive, sharable, and viewable on the web.
      • 




    • We had a limited number of hours we could use. This didn’t include enough time for making the infographic fully responsive, so we needed to get creative with how it would work on mobile.
      • 

    




    What I learned:
    




      

    • Structuring code in a clean, readable way
      • 




    • Pre-development sketching of outlines
      • 




    • CSS animation with keyframes
      • 




    • Nuances of layering containers and using selectors in CSS.
      • 




    • Giving content sections a parallax effect
      • 




    • Positioning elements by the page’s scroll position
      • 




    • jQuery for clicking and toggling actions
      • 




    • Open Graph and Twitter Card metadata
      • 




    • Making custom share URLs with encoded pre-populated data
      • 




    • Using Javascript to check User Agents to determine whether or not Skrollr should fire (it doesn’t play well with iOS)
      • 

    




    View the finished product in action! →
    




    Third-party tools used
    




      

    • Skrollr to drive parallax and positioning elements by the page’s scroll position
      • 




    • Wow.js for triggering CSS animations
      • 




    • Animate.css so I didn’t have to write all of the CSS animations from scratch
      • 




    • Chart.js for rendering the pie charts and making them interactive
      • 




    • jQuery for clicking and toggling actions
      • 

    




    In-Progress Photos
    




    I first sketched the infographic out on an IKEA drawing paper roll to plan out where elements should go and how to structure the code overall.
    




    Sketching it out
    




    As I wrote the code, I previewed and tested it in real-time with Coda’s AirPreview.
    




    Live Preview
    




    View the finished product in action! →
    




    Original image:
    




    Spotlight 2015 Static Image
    

    






  • 

    Our Inflated Thanksgiving
    



    

    





    






    For the past 29 years, the American Farm Bureau Federation has conducted an informal survey of the price of a classic Thanksgiving dinner for 10 people. At first glance, it looks like the price of food has been steadily rising. But when you adjust the numbers for inflation, you get a different story. It isn’t the cost of our food that has been rising, but the amount of US currency in circulation.
    

        
    

    This year, we’re thankful for technologies like bitcoin breaking the Federal Reserve’s grip on money.
    

    Happy Thanksgiving!
    

    The individual prices of a traditional Thanksgiving dinner this year:
    

        
    


    






  • 

    Rebuilding Mogadishu with Local Knowledge
    



    

    





    



    



    Underneath the bombed-out buildings and bullet-riddled doorways of Mogadishu lies a vibrant marketplace and hidden infrastructure known only to locals. Mitchell Sipus is trying to make that data public that with his “project to digitally map Mogadishu, encoding not just geography but also businesses, infrastructure, and people” (Wired).
    

    The Freeman has covered Somalia many times, with an eye to how society there functions in the absence of a state. In recent times, it appears anarchy might be preferable to formal states there, at least to the kind of state that has held power historically. Ben Powell has done a great job covering the internal effectiveness of Somali customary law and how living standards seem to have improved since the state collapsed.
    

    Most of these articles are a few years old, or rely on stale data. So where is Somalia today?
    

    Two years ago this month, the militant group al Shabaab abandoned Mogadishu. Since then the “world’s most dangerous city” has seen a serious economic boom. Since the unrest has died down, community groups have started cleaning and rebuilding the city. Even so, Mogadishu is hardly a kind of place you want to pack up and move to. Yet. Sipus may help change that.
    

    “We’re not just trying to make a map,” said Sipus of his technology.
    

    

    I mean, we get a map, and that’s cool, but through this map we are creating a business-registration system. We are creating a system for houses to have a title. There’s a census component. What condition is this building in? Is there a business there? Who’s the owner? Where are markets? Wells? There’s infrastructure left over from when the Italians operated Somalia, sewers from 1950. A lot of them just need to be cleaned out; they’re full of sand. Right now there’s none of that information.
    

    

    In essence, Sipus has found a way to encode residents’ local knowledge and make it publicly available—which should dramatically decrease search costs and uncertainty for would-be investors, business owners, and residents.
    

    This is huge—and not just for Somalis. A system like this takes us one step closer to private management of cities. Take Detroit: Residents could feed information directly to contractors who would bid to fix the issue, cutting out the bankrupt government middlemen.
    

    In the case of public-private partnerships in which cities outsource services to private firms, residents could easily find which company has responsibility for which service. Feedback mechanisms can in turn provide on-the-ground information about problems directly to the relevant company’s internal information systems.
    

    Uses of Sipus’s technology could extend further than physical infrastructure. At this stage, it could also collect information on the jurisdiction of different forms of non-state Somali customary law, Xeer, and where the clan elders preside. Or, because some of these groups are pastoral, their jurisdictions could be updated in real time. If someone knows where a crime took place, a citizen (or victim) could look up the nearest clan elder and seek faster resolution.
    

    Imagine how useful something like this would be for startup cities and seasteads. Such areas are designed for innovation, rapid development, and testing, knowing in real time who owns which property, which independent court has jurisdiction over a given part of the city, and which laws or codes affect certain areas, not to mention all of the physical infrastructure benefits mentioned above. Residents could see which organizational rules nearby groups are testing, how they are performing relative to theirs, and possibly make an exit. Such information would be at their fingertips.
    

    Technology like that Sipus is developing is streamlining public administration and bringing us closer to private, competitive cities. There are still many kinks to be worked out, but day by day we are slowly outcompeting the State, that “legacy system for managing physical space.”
    

    Originally published at The Freeman.
    

    






  • 

    Big Wins: Small Changes That Accumulate Over Time
    



    

    



    


    






    This is a big win (making a very small change in your routine that you don’t even notice after a week but that adds up over time) disguised as a small one (taking the stairs.) I am more concerned that you get the big lesson here, but I think that a story about a small application of this lesson is the best way to explain it.
    

    Two years ago, I went on a hiking trip with my friend Ben StaffordArchived Link out in Rocky Mountain National Park. I knew about the trip for about 3 months, and I was worried that my legs wouldn’t be able to handle the long hikes (16 miles some days) over the rocky terrain. So, I started taking the stairs as often as I could. I noticed that I wasn’t actually building my legs up, though. Taking the stairs was easy. So, I resolved to take them two hat a time for the next three months. It was difficult for the first week, I’ll admit. You’d be surprised how much easier it became after that, though. It quickly became a habit and it is now it feels unnatural and tedious to take one stair at a time. In fact, after about a month, I stopped noticing that I was doubling up on the stairs. (Two years later, it is still a habit!) As a consequence, my legs are stronger and I now get up the stairs with speed and ease. (In the short term, my hikes were much easier!)
    

    I didn’t take a gym subscription, changes to my schedule for more workouts, no time on a leg press, and no aching muscles to build up my legs. Just a very minor change to my daily routine that took no additional time (but a little additional effort, at least at the beginning.)
    

    What minor change could you make to your daily routine that will add up over time and help your achieve a significant result?
    

    I don’t care how you walk up the stairs, but I do care about you making small positive changes that  accumulate over time to something much bigger.
    

    






  • 

    Big Wins: Audiobooks
    



    

    



    , , 
    


    






    This is the first post of a series that will focus on improvements I’ve made in my life that have led to advances in my productivity, effectiveness, or general well-being. I call these things big wins.
    

    Back in high school, I remember a few people recommended that I listen to audiobooks. I tried, but never got into it on a regular basis. Audiobooks were something that my family listened to in the car on long road trips, but nothing more.
    

    That changed last summer. A post by Sebastian MarshallArchived Link pushed me over the tipping point, but recommendations from multiple friends led me that far. I must have read the post at the right time. At first, I tried finding free audiobooks, but most were classic novels with low quality narrators. I listened to a few, but only on long drives. I couldn’t seem to get into them otherwise. On my quest for contemporary non-fiction books, I signed up for an Audible account. They seemed to have the best selection and had a deal going on for new subscribers.
    

    That was June 2011. Since then, I’ve purchased about 30 audiobooks and so far I’ve listened to more than 20 of them. Most of them were non-fiction (on a wide variety of subjects), though a few were fiction. I’ve learned quite a bit and I have made many changes to the way I live my life due to what I read (er.. listened to..) in the audiobooks.
    

    I do not use audiobooks as a replacement for reading. I still read physical books that I have to hold in my hands, as well as digital books on my Kindle and iPad. (I am currently reading Brothers Karamazov, Deleting the State, and It Starts With Food the old-fashioned way. I can read multiple books concurrently as long as they aren’t the same genre.) I use audiobooks for when I would otherwise have dead time, such as walking to work, cooking, washing the dishes, or generally doing menial tasks that do not require my full attention. Without changing my schedule, I consumed an extra 20+ books in the past year. I’ve learned a little bit about neuroscience, exercise, diet, philosophy, economics, the founding of Google, the lives of people who have accomplished great things, self-discipline, productivity, travel, and more. I’ve also listened to some excellent literature and bought a physical copy of a few of the titles so I can spend some more time with them.
    

    The majority of the books I listen to are informational books. This isn’t a coincidence: I can listen to informational books in 20 minute chunks without getting lost since most of the information does not rely heavily on what came immediately before it. I save the philosophical books and novels for long drives, plane rides, etc.
    

    This year, I am on track to listen to 50+ audiobooks, again without changing my schedule. I am not pushing off tasks or projects to listen to audio, nor am I cutting into my regular reading time. I am simply being more diligent about listening to audio while I am doing menial tasks. For the past 3 weeks, I’ve gone through a book and a half a week.
    

    A few times a year, Audible runs a $4.95 sale. For a few days they list 200+ titles, mostly popular titles that people actually want to listen to, at $4.95 each. At that price, you can grab 5 great books for $25, which is an insanely good price, considering that the books usually go for between $13-$25 a piece. Each time this sale comes around, I stock up on great titles.
    

    Another way I can listen to so many books is that I play them at 1.5x speed. I think most of the narrators are fairly slow compared to how my friends speak, so listening to the books at 1.5x sounds fine to me. This allows me to listen to an hour of recorded audio in 40 minutes.
    

    A note on podcasts: I haven’t explored them. I know there are many excellent ones that my friends listen to, but audiobooks have been more than adequate for me this past year. I will look into podcasts again soon. I am sure there are a few that I would enjoy listening to each week.
    

    My number one complaint with listening to audiobooks is that my headphones are always tangled. I am currently looking into bluetooth headphones to solve this problem. I think not having to deal with wires will be a significant improvement. (Have any recommendations?–Let me know in the comments.)
    

    What could you learn if you consumed an extra 20 books a year without changing your schedule? More importantly, what are you missing out on? Give audiobooks a try and let me know how it goes.
    

    






  • 

    Photo Credit at The Daily Caller
    



    

    



    , 
    


    






    Last week I had a photo credit at The Daily Caller. 
    

    The photo I took at Hillsdale to illustrate a story on medical marijuana was picked up by The Daily Caller to illustrate a story on Chicago’s decriminalization decision.
    

    

    See the original photo.
    

    






  • 

    Giving to beggars: My policy, reasons, and recent outcomes
    



    

    



    , 
    


    






    I have a policy when it comes to giving to people who come up to me in the street and ask for money to buy food or some basic necessity: I tell them that I do not carry cash (this is the truth, I do not carry cash), then offer to purchase for them what they say they need the money for. (I won’t purchase them alcohol, drugs, weapons, cigarettes, or things like that. But, who actually tells you they need those things?)
    

    For a month and a half at the beginning of the summer, no one took me up on my offer. I would get uneasy looks, then the person would decline and walk away. Two examples:
    
1. A man told me a story about how he had AIDS and how he was in a shelter, and he stands in front of the post office (where he and I both were) opening doors for people so that he can get money to go to Publix and buy juice to drink. It just so happened that I was going to Publix (directly across the street), so I made him my normal offer: “I don’t carry cash, but go across the street with me and I will buy you juice at Publix.” Unsurprisingly to me, he did not take me up on my offer. He said, “Oh, I can’t go to Publix. I’ll manage.” It was obvious to me that he didn’t want to get juice… he just wanted money for other things. (By the look of him, it was likely drugs.) So, I walked away, and he continued asking people for money. (I wonder if he changed his story?)
    
2. I work in downtown Atlanta right now. I walk down the street multiple times a day, and get asked for money at least once a day, usually more. This story is true (and typical of what usually happens): As I was walking between my office and Georgia Pacific, a man approached me and asked me if I could spare a dollar for a sandwich. I told him that I do not carry cash, but I would walk one block down the street with him to the food court and buy him a meal. He looked kind of worried and said, “No, that’s okay,” and walked away. This happens most of the time. I can only assume these people want something other than a sandwich, but don’t want to admit it. It is strange to me that they do not take me up on my offers, though. [EDIT: It was pointed out to me that it does not necessarily follow that people want this money for other things. See the comments.]
    

    After a month and a half, I actually had two people take me up on the offer, just a day apart. One was a woman, the other a man. The woman took me up on buying her a MARTA (Atlanta’s metro system) ticket to somewhere on the other side of town so she could get to a women’s shelter. The man wanted soap, a toothbrush, toothpaste, and deodorant so he could be clean for an interview. I have no idea whether the stories they told me were true or not, but that does not matter to me. I made an offer, and I held up my end of it once they accepted. I can only pray that these individuals use what I bought them to help alleviate their situation.
    

    Some people have asked me why I do this. Here are my reasons:
    
-Offering to buy someone food or basic necessities instead of immediately rejecting them and walking away acknowledges that person’s human dignity. These people get treated as less them human all day, so the least I can do is acknowledge their dignity and offer to help them out.
    
-Offering to buy someone food or basic necessities weeds out most people who want money for something else, such as drugs or alcohol. I’ve made the over dozens of times with only two people taking me up on it so far. This way, I can help people who really need it. I know this isn’t a perfect system, but I think it is better than just giving out cash. If people actually need help, I feel an obligation to help them.
    
-In 2008, when I attended my first FEE seminar, Dr. Anthony Carilli finished out the week by telling the attendees that, besides being a professor, speaker around the US, and an umpire for minor league baseball, he is a volunteer fireman. Why? In his words, “If you believe in the free market, you have to be willing to do your part to support it.” I’ve thought about that statement a lot in the last four years. If I advocate abolishing government welfare programs, I have to be willing to help people out with my own time and money. I am trying to do that.
    

    Some people I know have objected to my practice. One guy said that I am just providing temporary relief to their problem and it doesn’t really help them. So, when I asked him what he recommends, he cited a privately run homeless shelter that has strict rules about work, but actively helps people get jobs and is surprisingly good at doing so. But the guy who told me this does not donate to such shelters or individuals, and isn’t actively trying to start one. That is fine with me. It is his time and his money, which he can do what he wants with it. 
    

    One of my favorite professors at Hillsdale always says, “Once you confront a situation or possibility, you have to own it.” The situation I am confronted with on a daily basis is people asking me for help. This is my way of owning it. I know it is not perfect, but I am trying to do what I can.
    

    






  • 

    Photo Credit at Huffington Post College
    



    

    



    , , 
    


    






    Back in March, I had a photo of a Hillsdale College Center for Constructive Alternatives lecture picked up by Huffington Post College in an article entitled, “The 13 Most Conservative Colleges.”
    

    You can check out the original photo in this post or read the article over at the Huffington Post.
    

    Huffington Post Photo Credit
    

    






  • 

    Photo of Reagan Statue in Dream Villager Magazine
    



    

    



    , 
    


    






    My photo of the Reagan Statue at Hillsdale College that was picked up by the National Review Online was just picked up by Dream Villager MagazineArchived Link to accompany an article by Andrew Roberts! Download the PDF of the article, or view the article online (go to page 30.)
    

    

    






  • 

    I am Engaged!
    



    

    



    , 
    


    






    On December 24, 2011, at around 12:45 a.m., Amanda Kate Rubino and I got engaged. 
    

    Check out Amanda’s blog, The Ring Diaries, to see the ring and for more info.
    

    Amanda and Chuck
    

    Amanda and Chuck
    

    






  • 

    Interview with John Durant
    



    

    



    , , 
    


    






    Originally posted at The Primal Challenge blog. Enjoy!
    

    

    I had the great fortune of being able to listen to a lecture by professional caveman John Durant at Hillsdale College last night. I also got to hang out and chat with him for the evening and he graciously agreed to do an interview for The Primal Challenge! Click on the link below to listen to the interview.
    

    Interview with John Durant (approximately 13 minutes in length)
    

    Topics: The gourmet hot dog party that started it all, the role of community in keeping you with your new identity, advice for people who want to start blogging or doing something in health, why so many libertarians are attracted to paleo, and advice for people just starting out with paleo.
    

    For those of you who don’t know him, John is a barefoot runner who started the NYC Barefoot Run,  a health entrepreneur, and a libertarian who runs a popular blog on the paleo lifestyle, Hunter-Gatherer.com.
    

    I had a great time chatting with him and learning from him. Thanks, John!
    

    Here is a photo of John at the Hillsdale Lecture:
    

    

    






  • 

    Diving
    



    

    



    , 
    


    






    At the beginning of the semester, I got to spend some time down at the pool shooting some fun photos for the Hillsdale Collegian. The sports editor wanted to run a profile on the swim team’s new diver, Gretchen. She is the first diver Hillsdale has had since the 2008 season. 
    

    Gretchen
    
Whenever the Collegian runs profiles on people, we almost always have some sort of portrait and an action shot. Sometimes portraits can be pretty bland, such as a regular mugshot against a white background, so I decided to go the extra step on this one. I used the pool and diving board as the backdrop and used two strobes to light Gretchen. I used a shoot through umbrella from camera left as my main light, then set up another strobe with a spot grid behind Gretchen on camera right to open up the shadows on that side of her face.
    

    Gretchen
    

    Timelapse
    
This timelapse was the main art for the story. It ran pretty large in full color and I got a lot of compliments on it. The photo was pretty easy to do: I set up three strobes on 1/2 power across the pool from the diving board and fired my camera in burst mode to get Gretchen in 10 different frames as she dove into the water. I then chose 6 of the frames and masked them together in Photoshop.
    

    ALT
    

    Hesitation and Anticipation
    
When we were finished with the portraits and the diving shots, I asked Gretchen if she wanted to do one more shot, a fun one this time. She enthusiastically said, “Sure!”, so I came up with this. I had her carry an umbrella up the diving board and clamp it on to one of the rails. I then had her go to the edge of the board and act like the was afraid to jump off. It didn’t run in the paper, but it was still fun.  
    

    Hesitation and Anticipation
    

    






  • 

    Lighting Smoke Trails
    



    

    



    , 
    


    






    I shot this for a story at my college paper about the city deferring the medical marijuana decision ruling four consecutive times. We needed a catchy jump from A1, so I came up with this. This was a fun shoot. We got some strange looks, but good results.
    
Disclaimer: These are hand-rolled tobacco cigarettes. No illegal drugs were used in these photos. While I am in favor of drug legalization, I am most certainly not in favor of using drugs. They destroy our most valuable asset, our mind.
    

    Smoke and Light
    

    Strobist info: Gridded LP160 to fill the face in and a bare LP160 at a higher power as a rim/smoke light, shot from behind the subject’s right side. I also used a snooted 430EX to light the hand with the cigarette in it. Cactus V5 triggers.
    

    Smoke and Light
    

    Strobist info: Gridded LP160 to fill the face in and a bare LP160 at a higher power as a rim light, shot from behind the subject’s right side. Cactus V5 triggers.
    

    






  • 

    National Review Online
    



    

    



    , 
    


    






    One of my photos was on National Review Online today!
    

    Photo on NRO
    

    The photo was of the recently dedicated statue of Former President Reagan that was dedicated here at Hillsdale College last week. The Reagan statue is Hillsdale’s most recent addition to the Liberty Walk.
    

    Here is a larger version:
    

    Reagan Statue on Hillsdale College's Liberty Walk