As a freelance web designer and developer I have become accustomed to working in a specific order from start to finish on a typical client’s website. My typical workflow starts with programming/sketching which then leads to development and revisions all with constant contact with the client along the way.

When I was asked about developing for Tumblr my mind initially went blank. Tumblr at the time was something I never knew of or understood why someone would want to use it. I had no clue how customizable it truly was until I dug deeper.

The purpose of this post is to share some insight about Tumblr and how you can use it effectively for your own upcoming projects.

Key benefits

The true benefits of Tumblr are within the blogging section of each site. The one concept that stood out to me was FREE hosting for your theme. There are steps to make this work but once you carry them out all you need is the domain name and you’re golden.

The same rules apply when it comes to developing a traditional website with tumblr but any includes such as CSS or JavaScript files need to have absolute URLs (more on this in a bit).

Getting started

To get started you first need to create a Tumblr account. Set one up and then navigate to the settings area after logging in. For each client I’ll typically set up two Tumblr blogs or use my own testing Tumblr and create a password-protected blog for development and viewing before the site goes live. For the purpose of this demo I’ve included my band’s most recent blog design (music coming soon :)). Inside the sidebar you see my test blog and then the main blog featuring the band’s Tumblr.

You may be wondering why I created two blogs? Well to password protect a blog or make it private you need to have a base blog in place on Tumblr, which I did here in order to do so. Later on you can switch this feature off and either keep the sitename.tumblr.com extension or switch it to a direct URL like I have. You can also just skip this step if you’re not worried about only releasing the site once it’s fully developed.

To create a private blog click on the Create a new blog link inside the side bar and you’ll be taken to the page below. Make sure the Privacy tick is selected and you’re good to go.

Moving forward

Now we move into the meat of Tumblr: after you have your site designed and finalized it is then time to move into the slicing and dicing of it to optimize it for Tumblr. There are two types of operators to render content into your existing HTML. You will need to have a basic HTML shell built when starting a custom theme.

Some key terms and useful lins:

• Variables: are used to insert dynamic data like your blog’s title or description.
• Blocks: are used to render HTML or set data like a previous link or a blog post.

There is a complete list of the different types of Variables and Blocks you can assign to your HTML here. Rather than copy the site I HIGHLY recommend you visit this page and get familiar with it. It would be best to even do this before you start your design. There are a lot of features available for any Tumblr theme which can be used or not used inside your own design. My band’s site is a bare bones site. I needed a place for people to go to find out more and see what we are always up to and that’s about it.

You’ll want to have a plan for all types of posts that are available inside of Tumblr. Code these and style them properly for every blog you create and of course see the documentation to include other elements that are essential like navigation, pagination, meta data, reposts, comments (notes) etc:

• {block:Posts} This is a wrapper or sorts to any post {/block:Posts}
• {block:Text} For text based posts {/block:Text}
• {block:Photo} For photo posts {/block:Photo}
• {block:Photoset} For photo posts in gallery form {/block:Photoset}
• {block:Quote} For quotes {/block:Quote}
• {block:Link} For Links {/block:Link}
• {block:Audio} For audio posts {/block:Audio}
• {block:Video} For video posts {/block:Video}

So where do I put my code?

To import your freshly polished HTML into your custom theme you will need to login and select the appropriate blog on the left sidebar inside the Settings section of the dashboard. Look for the Heading titled Theme and click the Customize button.

Once you click the button you are greeted with a new page with some custom editing options for your site. Below you see how my finished site currently looks with Tumblr dummy content. This area is great to see updates to any changes you make inside Tumblr’s code editor but I really recommend developing the site using a basic code editor and browser from the start. Once the code is in place you can insert the custom Tumblr based variables and block elements within the HTML. Then simply copy and paste your changes into each custom Tumblr page.

To edit the HTML click the Edit HTML button (yes it’s that easy) and a new side window appears. You’ll see some HTML with whatever base theme you are customizing. Delete or alter that code to match your own style and design and then click Update Preview to see the page update to your right. One thing I cannot stress enough is to use absolute URL’s to host your images, CSS, JavaScript, and whatever includes you may have because they will not link properly inside of Tumblr if you don’t. I happen to have hosting for my own website so I just created a directory to link the images and includes. You could just as easily use an image or file hosting service for free. I would only do that if you are completely sure the links won’t drop and leave your website without styles or images, etc…

What if I want more pages?

Easy. After you’ve clicked the Edit HTML button like I mentioned above, scroll down to the pages section of the sidebar on the left that appears. Here you’ll see the example I’ve provided with additional pages of my band’s website. You can drag the order of them and edit each individually.

Simply click the +Add a page link to create another. With each new page you will need to update the content as well as navigation if, for example, you have active states that change via CSS. This should be a no brainer if you’ve worked with HTML and CSS before. If not, you should check out the numerous tutorials and posts on this subject on this site.

One thing to note is that when you click edit beside an existing page you will see a new browser window appear like below. Be sure to have the custom layout active in the drop down as you are creating a custom layout for each page. The option is there to use a standard layout and have a navigation link redirect to another.

Advanced features

On top of creating your own CSS styles and HTML documents you have the ability to use some of Tumblr’s advanced features, which are bundled with each blog. Right below the Pages section you will see an Advanced section with a few options available.

Most of these are self-explanatory. If your site doesn’t have a mobile optimized layout like mine does then I would switch on the use optimized mobile layout option. Descriptive URLS make the permalink to any post much more identifiable. Finally, if you’re in a pinch, you can insert some custom CSS below that but it’s just as easy to include your own CSS via absolute link.

I don’t want the .tumblr extension

The folks at Tumblr made this easy. All that is required is that you own the domain name you are trying to redirect your Tumblr blog to.

To lose the extension you’ll need to navigate to the settings area of your dashboard. From there select Use a custom domain name inside the URL section. Enter the appropriate domain you have registered and then make sure to test your domain by clicking the blue button staring back at you. Once you do that you’ll need to update the A-record of your current domain supplier to point to Tumblr’s, which is 66.6.44.4. Complete directions on how to do this are available here.

To summarize

Using Tumblr is a great option for anyone interested in keeping an active blog or even developing a complete website.

I built the example site you’ve seen throughout this tutorial from the ground up. The website was first designed inside of photoshop. Once I decided on the style and look I began translating the static design into an interactive experience much like a similar website but then added the variables and blocks required for Tumblr to function as an additional, but easy step. From there I optimized it to fit on mobile devices and the rest is history.

There are plenty more customizations available like incorporating Google analytics, customizable options which can be turned on and off from the settings panel, the connection to other apps like Instagram, Facebook, and more, but the process overall was very easy and highly recommended to anyone interested in a new way to host a blogging based website.

This tutorial is meant to be a very broad overview of how to start developing websites with Tumblr. To get more information and to gain a better understanding please read the full documentation provided by Tumblr.

Have you built a project around Tumblr? What tips would you add? Let us know in the comments.

Top-Selling Vintage Veneer Font Family – only $9!

Dan Croak is the Chief Marketing Officer of the prominent development shop thoughtbot. Before he moved to San Francisco to start thoughtbot’s west coast branch, Dan was a friend of mine in Boston who helped me learn the ins and outs of Ruby on Rails.

Dan’s a good guy to know because he and his shop have authored everything from core Rails commits to numerous gems and plugins (such as Capybara Webkit and Bourbon) that are known throughout the web community. I wanted to sit down with him and talk about Rails, its evolution, and how his company has built such a following around Ruby on Rails.

I hired thoughtbot in 2006 to complete a side project. I was writing ASP.NET web applications by day. I wanted to learn about open source, Ruby on Rails, Test-Driven Development, Unix, version control, etc.

After they completed the project, I did some Rails freelancing, then applied for a job at thoughtbot and they hired me. I’ve now been at the company for more than five years.

Rails struck them as something that would be great.

In 2005 Jon and Chad had been doing consulting projects in different languages, such as Perl and Java. After they did a couple of projects in Ruby on Rails, they felt it was state of the art and that they could be reliably productive with it.

As a team, they needed to pick one language/framework and specialize in it. Rails struck them as something that would be great. The community surrounding the language were the kind of people that they would want to work with. They were one of the first consultancies to announce that Rails was their specialty.

That was the turning point – they could have been a shop that split technologies but by picking one, especially an up-and-coming one like Rails, they were able to attract great people like Tammer Saleh, Jared Carroll, Eric Mill, and others.

In total, our team currently spends about 2,000 hours/week interacting with Rails and its ecosystem. It is the main medium from which we work with our customers. It’s the environment we feel most efficient, and most able to create software with a solid test suite.

I’m currently in a role where I’m reviewing a lot of code – reading thousands of lines of diffs a day – and it’s nice to have a language that doesn’t have a lot of ceremony or extra tokens. In the last year, we’ve developed a style guide that makes it even easier and more pleasant to review lots of code.

There is always some shortcut in Rails to clean up a view by letting it render partials polymorphically, based on its type and based on conventional directory structures. Things like HAML and CoffeeScript further reduce clutter and help simplify the code to focus exactly on your ideas and how to express them in a web app.

The community is a huge benefit, too. Ruby is a very stable, 20-year old language with a gigantic community. Libraries for dependency management (Bundler), testing (RSpec), authenticating users via OAuth (Omniauth), are in a great state. Rubygems.org is a tremendously useful community effort. There are thousands of Rubyists with GitHub accounts contributing to gems. Ruby is the second-most represented language on GitHub.

Once GitHub came out, it became obvious that Git and GitHub were the superior way to share code.

Prem and Arun show up on the Rails contributed list.

Paperclip and Shoulda were early libraries that became pretty popular in the community. Both were continuations of testing and file uploading that we did before. Paperclip was inspired by file_column and attachment_fu. Shoulda was built atop Test::Unit – similar to how Sass was built atop CSS. That process of improvement is never ending in the community. Other great efforts in the file attachment tradition continue today with CarrierWave and Filepicker.io.

I remember coming to Rails and learning a ton by going to technoweenie’s Subversion account. Paperclip and Shoulda were open sourced on a custom Subversion instance at svn.thoughtbot.com.

Once GitHub came out, it became obvious that Git and GitHub were the superior way to share code. We moved our older libraries over to GitHub and have continued to chip in on other projects and some of our own. Shoulda has evolved into a library that works beautifully with RSpec. Factory Girl was written to replace fixtures.

We added test spies to a fork of Mocha, then a standalone library called Bourne that extended Mocha, and more recently added spies to RSpec Mocks. We didn’t invent the test spy technique (we recommend everyone reads xUnit Test Patterns), but we worked hard to bring them into our workflow and add them to the existing tools in the community, evolving as those tools have gotten better and gained community support.

We wrote Clearance (which I personally maintain) after writing email-and-password-based authentication a few times by hand. We wrapped it in a library with a great automated test suite. It’s now a battle-tested, four year old library. Things like that we’re always trying to tweak and improve, as well as blog about it to keep the community informed and see how we’re evolving our practices.

We’ve described our development process in our playbook and guides.

I’ve taken better advantage of my shell (zsh) and editor (vim). I’ve tightened my feedback loops, particularly when writing tests. I’ve gotten more consistent and disciplined about style and Git flow. I understand and use object-oriented techniques better.

I think they’re great! I’m most looking forward to the speed improvement and named parameters in Ruby. I’m most looking forward to the additional Postgres integrations in Rails 4, like hstore and database array types.

We don’t have any major projects in production on Rails 4 or Ruby 2 yet. Looking at the history of past releases, we tend to be careful not to jump the gun. We’ve been testing our open source libraries against both versions for awhile and reporting any issues back upstream, fixing what we can, but for the sake of our clients, we’re a bit more conservative to adopt the newest technology.

For a long time, I’ve been wrapping my head around some of the base choices you need to make as a developer. We’ve had a less-than-a-hundred-line shell script called Laptop for a couple of years to help us set up new machines while documenting the current best practice we know of. I still think there’s lots of room for improvement here, though.

Let’s say you’re using OS X. You probably want to use Homebrew but it’s not the standard package manager for the operating system. I’d like to see Apple make that the standard. In the same way, Ruby installers, Ruby switchers, Bundler’s binstubs, the .ruby-version file community convention, and rbenv’s shims continue to evolve to manage different versions of libraries that you want to use on different projects.

It’s unlikely we would make a primary replacement for Ruby as our server-side language.

I don’t know! In the near future, definitely – there’s a lot we can accomplish with Ruby, SQL, and JavaScript. It’s unlikely we would make a primary replacement for Ruby as our server-side language. It’s more likely we’d work on projects that use service-oriented architectures and the various services start to use alternative frameworks and languages such as Go.

I’d expect us to be more polyglot as opposed to replacing Ruby. We’ve used lots of databases in the past few years, although, Redis and Postgres can currently handle 99% of our use cases.

I’d also like to try doing something like the Barack Obama 2012 campaign’s architecture, which was static HTML/CSS/JS served by Akamai and S3, with hundreds of backend APIs.

We’ve worked really hard for years to put our best advice on Learn Rails. We have a “trail map” specifically for learning Rails and we’ve curated it from across the web and in our own shop. Go in there and you can see which resources we recommend going through in which order. There’s an iPhone app that helps you self-assess your own abilities and keep track of your progress along the Rails, Git, Postgres, JavaScript trails, and other trails.

In Conclusion

Thank you Dan for taking the time to do this interview, we really appreciate it.

Today we’re announcing a new upcoming workshop from Treehouse expert teacher, Amit Bijlani. In this workshop, you’ll learn to build a simple weather app called GOOD Weather using jQuery Mobile. Find out the strengths of jQuery Mobile and how to use some of its components. Learn about data roles, themes and page layout.

Here’s the trailer:

If you’re a Treehouse Gold Member, you can login and take this workshop very soon!

The post Build a Mobile Web App Using jQuery Mobile and AJAX appeared first on Treehouse Blog.

Ellen Handler-Spitz’s, most recent publication, Barbara Chase-Riboud: The Malcolm X Steles, in which she is a principal contributor, is featured now on the Yale University Press’ website.

The publication, a catalog for the exhibition of the same name, features Handler-Spitz’s writing alongside photography of the work of Barbara Chase-Riboud’s “monumental series of sculptures dedicated to the assassinated civil rights leader Malcolm X.” It includes a fascinating analysis of the Malcolm X sculptures in light of critical debates on abstract art’s role in memorializing the past.

Barbara Chase-Riboud: The Malcolm X Steles will be on display at the Philadelphia Museum of Art September 14 – December 8, 2013.