Working for a Start-up: How to Pace Yourself

This post is more so a running inner dialogue as I have not completely figured out how to successfully throttle my efforts to achieve maximum output without ever reaching the burn-out phase.

When you first start at a job, everything is exciting and you're able to work your ass off to get near the point where you can contribute at a level your accustomed to. As you start to catch on and get familiar with your new job, it takes less effort to achieve what you need to as the amount of unknown barriers and new technologies to learn begin to dissipate. I do not believe, however, that your work ethic and output have a direct x = y correlation.

If x is work ethic and y is the output, I believe there is a coefficient that needs to be calculated into the equation. This coefficient is how smart you work, which for this example we will call z. In my mind, the real equation is x * z = y where z is a number between 0 and 1. If you're working as smart as you can, z = 1. If you're meandering your way through your work, the value of z drops to some arbitrary number less than 1 (i.e. .65) and your output drops even though your work ethic remains constant. Working unintelligently can be as simple as falling off the critical path on a project by not focusing on the crucial parts of a project and putting too much energy on the trivial parts.

In my experience, burning-out typically causes your z coefficient to drop and in result causes your y value to drop as well. When this starts to happen on a regular basis, you enter into the burn-out phase.

The burn-out phase I'm referring to is when work needs to be done, but your completely apathetic to actually making it happen. Another symptom is when you become surly when discussing a project and demonstrating reluctancy to change the project for the better as it would result in re-engineering some of your initial efforts. I plan on addressing some remedies I've used to get through these periods, but first you have to identify what type of burn-out phase you're going through.

There are two types of burning-out that I believe exist. One is a short-term problem and the other is much more serious long-term problem. The short-term problem I see is typically when you have worked really hard or long on one project and it simply keeps getting larger or every time you think you've crossed the finish line somebody tacks on an additional 10%. The 10% can be scope creep or it can also be bugs that you originally lacked the foresight to test for. Either way, I consider this type of burning-out a short-term problem. Here are some ways to avoid or break through the short term burn-outs:

Grinding it Out

I know what you're thinking: this is a shitty remedy. Sorry, but for a lot of the barriers you come across, grinding it out will resolve the issue. Sometimes you just need to suck it up and crush it. If you find yourself having to grind it out very often, then there's probably a bigger underlying issue and you'll need to find a more sustainable solution then just adding more to your workload.

Getting your Little Wins

It's the little things in life. You can argue otherwise, but the smallest things can often have the most profound changes in your mood and outlook on life (or work). You need to identify where these little wins are and get them. It's important to keep things in perspective as well. The average developer makes $75k a year. That means your company is dropping $1,500 a week on you to do your job. If you take off one day from being lazy or burnt-out, you essentially just wasted $300 of your company's money. If you were to take that $300 and do something with it to remedy the reason why you're taking a day off, then you're doing yourself a solid as well as the company.

It doesn't have to be big either. If your little win is getting a bigger monitor, new computer or new coffee maker and you think this will make you happier to the point where you'll be productive, I guarantee it will pay for itself a couple times over. It doesn't have to be physical goods either. If getting to the gym during the middle of the day gives you more energy and revives your second half of the day, then do it. If your boss asks you why you need what you're requesting and you explain to him/her that it will make you more productive and relieve the stress of your monotonous day, there's no reason for him to say no (assuming he/she is rational). It's almost implied, but I'll say it anyways - every time you ask for more, more will be expected of you so be careful not to overdo-it.

Disconnect for your Sanity

If the two suggestions I wrote above don't work, get out of town. Take a little vacation to anywhere that will make you seem disconnected for your work. First, actually leaving your work and not allowing yourself to come into the office on Saturday or Sunday will force you to work more efficiently during the week as your normally flexible working window is now confined by outside forces. Once you're out of town and you've worked hard to take care of everything that needs tending to, remove the tether to the electronic world. Turn-off emails on your phone and don't open your computer. Engage in conversation outside of your profession. If you're a developer or work at a start-up, avoid talking about the tech. like the plague. Let your brain turn off and you'll free very refreshed and ready to go come Monday morning.

Abandon Routine for Perspective

If all else fails, change it up. Take your schedule and flip it on its head. Breaking routine will force you to take a fresh look on everything and re-evaluate why you do everything the way you do.

What if it's not a short-term issue?

The long-term problem is when either your job or the company you work for is becoming the common denominator for lack of ambition or motivation. I have only come across the short-term version of burning out and hope to never come across the long-term kind so I don't have any suggestions to counter-act this. The only thing I can say is that whenever you need to radically change a prevalent aspect of your daily life, you need to shake up your routine in a drastic way. Coming from someone who was overweight for a large portion of their life and lost 60 pounds 5 years ago and haven't put a pound back on, you need to do something big. Small changes are easier to relapse on and you'll fall back into your problematic lifestyle before you know it. You need to go down to your core and summon as much will-power as possible to generate some sort of movement against the current that has led you to your unhappiness your currently experiencing.

How to Develop Locally with the Facebook API

by Dan DeMeyere - @dandemeyere

When you create a Facebook application, they require you to give them the domain of your website that will be accessing the Facebook API. The Facebook app keys they supply you with are only valid through the domain of the URL you listed. This strikes the following question: how do you develop locally if your development domain is something like 0.0.0.0:3000 or yourapp.local? The answer is SSH remote tunneling. You use a service to connect a port on your local machine to an open port on a public server somewhere (preferably securely). I've been using tunnlr.com to do this. Tunnlr is not the flashiest service, but it works really well. The following tutorial was made based on my experience with a Rails app, thredUP.com, that I develop for. I'm not sure how useful this tutorial will be to you if you're using a different framework.

Tunnlr Account

Once you sign-up for an account at Tunnlr, you will be given your Tunnlr URL. It will look something like http://web1.tunnlr.com:11908. Write this URL down, you'll be using it later. While you're on your Tunnlr account page, you'll find a section towards the bottom that says 'Need help?'. Follow the steps listed under 'How do I use Tunnlr with Rails' including the plugin and two gems along with created the tunnlr.yml file. I'm not positive you need to do this for creating manual tunnels, but I did just in case. The remote port variable is the number at the end of your tunnlr URL. For example, if your URL is web1.tunnlr.com:11908, your remote port would be 11908. Tunnlr says to use port 3000 for you local port, but I've been using 80 because of some issues I ran into with our app.

After everything is configured, it's time to get this baby up and running. I've always deferred to creating a manual tunnel as opposed to doing any rake tasks, but to each their own. The command to do so is in the 'How do I manually start a tunnel?' help section. It should look something like this:

In this example, 11908 is your remote port number and 2202 is your user number, which you can find on your Tunnlr account page. If you plan on tunneling a lot, I suggest creating a bash alias like this:

Now I can just type 'tunnelme' into my terminal any time I want to test Facebook locally. So assuming you're ports are ok and your local development server is running, you should be able to go to your Tunnlr URL (i.e. http://web1.tunnlr.com:11908) and view your local app. If this doesn't work and you have good reason to believe it has nothing to do with your local development, try adding the facebooker.yml file that is detailed in the 'How do I use Tunnlr with Facebooker?' help section.

Facebook Setup

Assuming your tunnel is good, now you're going to need to setup a second Facebook application to develop locally. Go to Facebook developers page and create a new application. When they ask you for your Site URL, paste your full Tunnlr address (http://web1.tunnlr.com:11908). For the Site Doamin, just put web1.tunnlr.com. Boom, you're done. Enjoy :)

Parting Gift

Most Rails apps have different config files for each environment such as development, test, and/or production. This is really convenient in the context of developing for Facebook applications as this is great way to handle having different App ID, API Key, and App Secret variables. Definitely setup your Facebook app in a way that is indifferent of what environment it's running on.

If you have any questions about setting this up or I messed up somewhere along the way, leave a comment below and I'll follow up the best I can.

Dan DeMeyere
Ruby on Rails Developer & Front-end Engineer
dan@thredup.com

From the Dev Couch: SoftFacade, Flow, Pow

by Dan DeMeyere - @dandemeyere

I'll start doing some more tutorials, gem configurations, and code snippet posts soon, but these posts are a lot of fun and I've come across some cool websites and apps recently that I wanted to share.

Inspiring Websites

Topic: SoftFacade
Link: SoftFacade.com
Twitter: @SoftFacade
Dribbble: dribbble.com/softfacade

Let's kick it off with a fun one - SoftFacade. Wow. Where to even start with SoftFacade. Their work is so visually stunning that it will leave you questioning how it's possible to even compete in the same stratosphere when designing your own graphics. If you haven't seen any of their portfolio, here's a quick montage I made containing some of their work:

Crazy, right? Who wouldn't kill for a logo like that? That's not all either, as I eluded to in my post last week about SimpleGeo, SoftFacade also does front-end UI work. Rarely do you find graphic shops capable of understanding what it takes to deliver a professional web presence for a company, but they obviously have that skill in aces as well. In addition to SimpleGeo's website, they also did Project Noah and SendGrid. Very excited to see what this top-notch Russian shop has in store next.

Apps to Improve your Workflow

Topic: Flow
Link: getflow.com

Flow is a web application that allows you to tackle lists and projects by yourself and with others . . . . . . . you're probably thinking to yourself 'Did someone else really make another task management app?'. Yup, but it's awesome. Unlike BasecampHQ or Lighthouse, Flow has a social spin to it. Not Color social, but real social. Flow's video demonstrates it best, but they have an iPhone app that allows you to collaborate on things in real time - i.e. planning a party. They also have push notifications, so if you made a list of things to get for a party and your friend bought the beer and checked it off in the app, you'll be notified and not through email.

Did I mention it was designed by MetaLab? They are responsible for some of the best looking websites out there. MetaLab and SoftFacade's portfolios would be the equivalent of the Rumble in the Jungle if they squared off against one another. Back to flow, the design was so good that they made it fun to make lists and tasks, something I already have a perverse pleasure in. Quick tangent - if you're a list-oriented person, you'll like this book I've started reading called The Checklist Manifesto. If you want more info about the app, check their website out (which is pretty rad) to see more.

Learning About New and Old Technology

Topic: 37signals Pow
Link: pow.cx
GitHub: github.com/37signals/pow

37signals released a lightweight, open-source chunk of software that let's you develop faster? Am I a sarcastic question talker? Apparently. And yes, 37signals has made another contribution to the open-source community with their release of Pow - a super simple and fast Rack server.

While it may not be at the same level of Ruby on Rails in terms of potential impact to the development community, it's still a noteworthy offering on their behalf. If you develop on apps using Rack (Rails, Sinatra, etc.) then Pow will become your buddy. When you have multiple apps you're working on, it can become a really big hassle setting up your virtual host files and configuring IPs in your webserver of choice. Pow takes care of all of that for you. All you do is run the install, set-up a symlink to the app's directory and you're off and running. If your project is located at /Sites/thredUP, then the server address becomes thredup.dev. You can setup as many apps locally as you'd like and they are all able to talk to each other (really handy with APIs and sub domains). They also did an amazing job designing the webpage for the project:

If you're familiar with Jason Fried and the 37signals suite of product designs, you probably would have expected nothing less.

I can tell you from first-hand experience that it's really hard to turn a project you're working on into something that can be used and developed further by everyone. It takes a certain level of abstract thinking to exclude all your app's specificity when you're at the design phase of the project. For more of 37signals open-source work, check out their GitHub repository. I'm always a fan of those giving back to the open-source community and I hope someday soon I'll be able to do the same.

Dan DeMeyere
Ruby on Rails Developer & Front-end Engineer
dan@thredup.com

From the Dev Couch: SimpleGeo, IndexTank, Loggly

by Dan DeMeyere - @dandemeyere

thredUP is hosting the San Francisco StackOverflow Meet-up this Wednesday, April 6th at 7pm at thredUP HQ. If you're a developer, designer or interested in getting into the web development field, you should really come. There's going to be beer (assuming you're 21), some snacks, and three really cool companies demo'ing their new, cutting-edge services. The great thing about all three companies that will be present at Wednesday's meetup is that all of them could be very useful for most apps. Below you'll find a little bit about each company and their services.

Learning About New and Old Technology

Topic: SimpleGeo Context
Link: simplegeo.com/products/context/

Andrew Mager, SimpleGeo's developer advocate, gave the thredUP dev team a demo last week about the 3 services SimpleGeo provides: Storage, Context, and Places. I'm not sure how to describe our reactions other than being absolutely blown away. All of our minds were racing with ideas. There were times during his demo when one or more of our jaws dropped, literally. If you can come to our Meet-up this Wednesday you can see for yourself and realize I'm not exaggerating at all. You don't have to be an engineer to appreciate what they can do either.

Storage provides a way to store location-based data in a system that scales well and is lightning fast to query. Places is a way to use that location-based data to find points of interest all of the world (and their database is growing rapidly). Context, however, is the one that could open doors to hundreds of new ideas and apps. Imagine being able to take a location, whether it's an address or latitude/longitude coordinate, and extracting specific contextual relationships that are defined and accessible like this no where else on the web. What does that mean? It means given a location you can determine someone's postal code, their weather, school district, neighborhood, census data, and the list goes on. Think about using all three of these services together and your head might explode. Proceed thinking with caution.

Web Services for your App

Topic: IndexTank
Link: indextank.com

I don't know if you've ever played around with indexing and search engines, but it's not a walk in the park. There are a lot of different options when it comes to search (Sphinx, Terrier, Solr, etc.), but if you're not savvy with linux and hooking up 3rd-party gems/libraries to utilize and maintain the indexes necessary to run these engines, you should probably look into a service like IndexTank. IndexTank does all the indexing for you and allows you to add search functionality to your website using their API, which is available in Python, Ruby, PHP, and Java. If your team is small or your resources are limited, don't re-invent the wheel especially when someone has a great, simple-to-use implementation that is cost effective.

Assuming you need robust search capabilities, think about how many man hours it would take to build and maintain a new search engine, calculate your developer's hourly rates when you break them down and I'm guessing this will become more and more appealing. Reddit, one of the top 100 trafficked websites with 75 million monthly visits, only has 1 full-time developer now and they use IndexTank. If that doesn't convince you to take a look then I don't know what will.

Topic: Loggly
Link: loggly.com

I'm a metrics junkie, sometimes to a fault. If you're like me or you enjoy optimizing your app then Loggly might be your chance to finally geek-out on your logs. Loggly provides a way to analyze your app's logs while presenting the data to you in a consumable way. I've lost an entire evening before sifting through a 300MB production log file in search of an errant Ruby process that would eat up our server's resources like a worm until it consumed the CPU usage and crashed the instance. If I had known about Loggly, I could have searched the log (they index it for you) with a number of different criteria to narrow down the possibilities dramatically instead of blindly grepping through time windows that *I hoped* the process could have possibly ran within. Do you know how many log entries can occur inside a 15 second window of time on an app? Thousands. Save some time and check out Loggly - they will be speaking this Wednesday at the Meet-up as well.

 

Inspiring Websites

Topic: SimpleGeo
Link: simplegeo.com

I couldn't resist not commenting on how beautiful the SimpleGeo website is. First, their icons are captivating. Look closely at the detail in each one of them. They're all masterpieces. After you have marveled at the graphic design, check out the SimpleGeo team page and start clicking the different departments (i.e. 'Engineering'). Only the members in the department you clicked will remain visible while the others fade out. This isn't hard to do with jQuery, but it provides a pleasant experience and an easy way to deduce the size of each department and make the connections between the faces and the roles. It's the subtle, intuitive UI elements like this that demonstrate superior user experience in my opinion.

Dan DeMeyere
Ruby on Rails Developer & Front-end Engineer
dan@thredup.com

From the Dev Couch: Node.js, Facebook Open Graph, & Mutant Labs

by Dan DeMeyere - @dandemeyere

Like many others, I come across a lot of great articles and websites every week. The problem is I don't have time to give each one their fair due so I end up bookmarking them for a later read. I'd rather set aside a block of time to read each one thoroughly then skim and move on because I'm always paranoid I'll glance over something profound. Since I took the weekend off, I've been able to plow through about 30-40 of the articles in my backlog and I thought I would share a curated list of ones I think are worth your time. I've broken them out into different categories so people can skip to the topics that interest them the most.

Learning About New and Old Technology

Topic: Node.js
Link: mashable.com/2011/03/10/node-js

It seems like every week there is a new JavaScript framework coming out that will supposedly change the JavaScript landscape forever. After reading this article, Node.js might actually be that framework - but in a completely different way that I anticipated. Node is nothing like jQuery or Backbone. Node is not a client-side framework. Using the JavaScript V8 parser, Node is extremely fast, scalable, and is an event-driven programming model (not that I entirely comprehend EVP). After reading this article and multiple other Node-related articles, I can't say I still fully understand how Node.js works. I think Node is one of those technologies that you can't effectively 'learn' until you've actually played with it. The Mashable article I listed does a pretty good job talking about the background of Node and some practical applications.

Inspiring Websites

Topic: Mutant Labs
Link: mutantlabs.com

Inspirational websites really speak for themselves. I'm not a graphic designer, but I can appreciate attention to detail and mastery of a craft. Click around and I'm sure you'll see what what I'm talking about.

Cool Snippets of Code

Topic: Practical Uses of Ruby Block
Link: viget.com/extend/practical-uses-of-ruby-blocks

If you develop in Ruby, odds are you write a lot of these types of blocks - you assign an object and then wrap your block of code around an 'if object' statement. I think these are fine and they take up the same amount of code as the new way; however, I like the clean assignment and readability that the new code proposes.

Rails Gems Worth Checking Out

Topic: Facebook OpenGraph to ActiveRecord Gem
Link: github.com/rubenrails/acts_as_opengraph

So this is really cool. Facebook integration is everywhere these days. What if you were able to take a model and turn its objects into Facebook Open Graph objects? That's what acts_as_opengraph does. For example, what if you were building a blog engine or basically any type of model that has a show page that will need Facebook integrated on it. Well all you do is take the model and add the dependency like this:

Then you just integrate this into your layout and views wishing to use the Open Graph:

Hopefully you found some of these interesting as I have about 30 more articles that I'd like to post in a similar fashion in the upcoming months.

Dan DeMeyere
Ruby on Rails Developer & Front-end Engineer
dan@thredup.com

AJAX Content Pagination with Dynamic URLs

by Dan DeMeyere - @dandemeyere

Sorry about the ugly title, I couldn't think of a better way to describe the post in fewer words. The long title would have been: "How to paginate through content with AJAX and still be able to share the current content piece that is viewed without the page refreshing". See why I shortened it? Onto the post.

AJAXing content in and out creates a nice experience for the user when done correctly. You can flip through posts or articles in a magazine-like fashion. If you're having trouble visualizing this, a good example is daily.thredup.com. The Daily Thred is a new project that a colleague of mine, Heidi, and myself created over the past month. Heidi was in charge of all of the front-end (design/layout/templates etc.) and I was responsible for the back-end implementation and JavaScript. Since we're a Ruby on Rails shop here at thredUP, I chose the Refinery CMS gem to handle the majority of the functionality. As for the JavaScript library of choice, we use jQuery. I love jQuery. 

jQuery makes working with JavaScript fun. Seriously. A lot of people think of JavaScript and cringe, but I always look forward to the part of my project that involves JavaScript. Anyways...a big requirement (at least in my mind) of this project was being able to share the URL at any point in time on The Daily Thred and having that URL reference the current piece of content the user was viewing when they copied the URL. If you're reading this, you probably know that if you change the URL in the browser (i.e. thredup.com/how-it-works -> thredup.com/register) with window.location.href, the page refreshes automatically. Not very convienent for the problem we're trying to solve, but I'm sure there are security reasons for having the browser respond the way it does. The answer is not the window.location.href object in JavaScript. Close though, the answer is the window.location.hash object. Subtle yet important difference between the two.

The hash portion of the URL (http://thredup.com#hash_portion) is not visible to the controller. You can play around with the params variable in Rails all day or the $_REQUEST variable in PHP, but you'll never find the string 'hash_portion' anywhere. This is why we have to use JavaScript. I came to this conclusion after doing some brief reverse-engineering. I knew Facebook allowed you to browse pictures without the page refreshing while still being able to the share the URL of the specific photo you were viewing at all times. So I watched the URL while flipping through some photos and sure enough I saw that the URL was changing with each new picture, but only after hash portion of the URL. I figured this must be the key and I began Googling, which is a developer's best friend.

After reading a couple of posts on Stack Overflow, a developer's 2nd best friend, I quickly discovered a couple of plug-ins and libraries that already existed for this exact purpose. The only problem was they didn't seem easy to configure to our app's needs and they weren't lightweight. I wanted something fast, very fast. I also wanted the feature to fail gracefully in the event garbage was entered to the URL's hash parameter. So I decided to write my own implementation.

There are two parts to my code. The function definitions and the setup calls. As usual with most jQuery plug-ins, the setup calls need to be made when the DOM is ready. I also have an additional call that should be the first jQuery call made after the jQuery <script> includes. Here is the setup:

The paging.check_hash() call (which I'll show the code for in a second) checks the URL's hash string to see if the URL is actually referencing another piece of content. This function will intercept the current page from loading and swap out its contents for the hash string referenced content before the user ever notices. Here is the rest of the code:

As you can see the URL's hash string is updated upon a successful AJAX request. You'll also notice there's a function called refresh_social(). The purpose of this function is to find the Facebook Like and Twitter Tweet social plug-ins on the page and activate them. My controller returns a block of html to the AJAX method and therefore the JavaScript within that block will need to be called/refreshed once the DOM is visible to the new elements. Without those calls, not only would the Facebook/Twitter widgets not be unique to each content piece, they would never be clickable as the 3rd-party API calls need to be made first. 

Hopefully that was helpful in your AJAX endeavour. As always, shoot me an email (contact info below) if you have any questions or see any flaws in my code. Also, if you're looking for a new job and you're interested in learning Ruby on Rails or are already a RoR developer, send me an email and I'll forward it along to the right people because thredUP has some openings on the dev team (and it's an awesome team to work for). 

The next step for this plug-in will be adding forward/backward functionality with the hash event. Should be fun.

Dan DeMeyere
Ruby on Rails Developer & Front-end Engineer
dan@thredup.com

Refinery CMS Review

by Dan DeMeyere - @dandemeyere

If you're looking to try out Refinery CMS for your app, there are a couple of things you should know ahead of time. If there is anything I don't cover in this review, shoot an email to dan[at]thredup.com and I'll see what I can do.

Background

Refinery is a Rails 3 compatible CMS gem that allows users to perform the standard Content Management System (CMS) tasks - create, edit and manage content on a website. However, given its Rails nature, Refinery is capable of much more than this. Refinery was developed in a way to allow 'engines' to be seamlessly integrated into the Refinery app.

To take a step back for a moment, Refinery can be used in many different ways. For example, if you have a large pre-existing app, such as thredUP, Refinery can be used/integrated to serve up all your public facing content such as your help section, press releases, or any other content you might want non-developers to edit. I think this type of application of Refinery is using the CMS in the traditional way. Another way of using Refinery is using it as the founding architecture of a whole separate app. This is what we did with the Daily Thred, which is a good transition point back to using engines within Refinery.

The analogy I use for engines is that they are to Refinery as gems are to Ruby on Rails. Engines tap into the existing infrastructure of your app and typically extend or add new functionality. You can use pre-existing open sourced engines or you can build your own engines to mold Refinery into your project's necessities. This open, modular approach has turned me into a Refinery proponent.

Installation

It's easy. I went from gem install to posting my first page in about 5 minutes. Refinery has a great guides section of their website dedicated to getting all the essential components one might need setup. Here's a look at my Gemfile and the custom gems we ended up choosing:

Pros

  • It's free and open source (thanks open source community!)
  • It's easy to install, configure and extend
  • Decent documentation and the guides are adequate
  • Needed urgent help once and their IRC channel came through for me
  • Readily updated (last commit was less than a day ago)
  • Really easy to style
  • Engine list is growing

Cons

  • No post scheduling - had to create myself
  • No easy previewing - had to re-write the system
  • Any changes to system require overriding files (not sure how else I would do it though)
  • Image storage implementation is ambiguous

Conclusion

It's open source, so there's not much more you can ask for. If you do want something that's not there, fork it and do it yourself - the beauty of open source:)

As you can tell the pros definitely outweigh the cons and therefore I recommend Refinery and hope others start to pick it up as the community will grow and more engines will be available. If you want to try it out, here is their github and here are the creators.

Dan DeMeyere
Ruby on Rails and Front-end Engineer
dan@thredup.com

Fixed floating sidebar with top AND bottom cutoffs

this code is adapted from http://jqueryfordesigners.com/fixed-floating-elements/. Without that, i'd still be staring at x,y coordinate values and pulling out my hair.

it creates a floating sidebar that switches from absolute to fixed once you scroll past a certain point on the top of the page. THEN, if you pass another point at the bottom of the page, it starts to adjust the height of the sidebar so that it looks like it's fixed to the bottom of your content frame. it's certainly not perfect, but works pretty well.

the HAML:

 

the SASS:

 

the JS:

 

the key in the JS is that once the sidebar is fixed, if the scrollBottom (which is calculated in the JS) passes the point where you want start adjusting the height of the sidebar, you then have to figure out how tall the sidebar should be. the way it's done here is to figure out how much of the content area has been hidden by the scroll and then use that to calculate the remainder of that content area that's still showing on the page. that remainder is the new height of your sidebar.

if you want to get fancy, you could have a minimum height of the sidebar and if the remainder showing is less than that height, you could adjust the top of the sidebar to appear like it's finally scrolling up off the page (instead of having the sidebar content are keep shrinking). the problem with this is that the scroll doesnt give exact numbers so the position tends to jump a and it's a little to noticeable to be worth it. 

Transitioning from Newbie to Novice

I'm at the point in my development of Ruby on Rails learning where the grace period of being a beginner has worn off and it's time for me to transition to an intelligent Rails developer. I need to start engineering my mind to look for the elegant solution at the beginning of the project as opposed to looking back on my code at the end and wondering how I could have done it better. I believe the development community uses the expression 'cut my teeth' to describe this chapter of professional development for a developer. I believe the first step is to admit that there will be many roadblocks along the way where I will become frustrated with wrapping my head around certain concepts and humbled by discovering how much I have yet to learn. I plan to catalog the roadblocks I encounter on this blog as a way for other Rails developers to hopefully learn from my mistakes.

My new priority will be stepping back and opening my mind to tackle problems with the new tools I have been learning. I'm going to go after projects that I have no idea how to do and instead of looking for a block of code on Google to solve my problem or asking one of my colleagues what they would do, I'm going to work through the solution process myself. I expect to re-invent the wheel a couple of times, which would typically be thought of as inefficient, but I'm hoping the short-term losses in productivity will yield greater gains in the long run. With that having been said, bring on the pain!

Dan DeMeyere
Ruby on Rails Newbie...err...Novice and Front-end Engineer
dan@thredup.com

jquery selector tips + bonus ruby/haml discovery for HTML attribute options for options_for_select

a few things i came across the past few days. and yes, the formatting/colors are horrible. and im so exhaused i just dont care. i think that means something... 

using selector to do a lot of work for you:

<input class='my-form-element' key='A'>....</input>
<input class='my-form-element' key='B'>....</input>
<input class='my-form-element' key='A'>....</input>

check_val = 'B';
$("input.my-form-element[key]key!='"+check_val+"']").attr("disabled",true);

- finds all inputs
- with the class my-form-element
- that have the attribute "key"
- where the "key" does not equal some value, in this case "check_val" (a passed in variable)  
- and disables them 

result:
<input class='my-form-element' key='A' disabled>....</input>
<input class='my-form-element' key='B'>....</input>
<input class='my-form-element' key='A' disabled>....</input>

all this from the selector. no if or looping necessary!  you can also check if the value does equal some value in the [key='val'] part. you can also add additional manipulations on after the .attr() like adding/removing classes, updating content, etc. e.g.  ...attr("disabled",true).addClass("disabled)... etc.

working with select menus where you need to access the option # from the item selected:

<select class="my-favorite-options">
<option value="1">
Favorites
</option>
<option value="red">
Food
</option>
<option value="trucks and toys" special="1">
Toys
</option>
</select>

the_select = $("select.my-favorite-options");
the_select_text = $("select.my-favorite-options :selected").text();
the_select_value = $("select.my-favorite-options :selected").text();
the_option_id = the_select.attr('selectedIndex');

selecting "Toys" from the options, the returned values are:

the_select_text =
"Toys"
the_select_value =
"trucks and toys"
the_option_id = 2

now extend the first example one step further. you can get access to the attributes of the options this way:

- find only options with a "special" attribute

the_special_select = $("select.my-favorite-options").children("[special]");

- add .val() onto that returns:  "trucks and toys"

- add .val() onto that returns: "Toys"

- add .attr("special") onto that returns:  "1"

adding selector modifiers to previous values:

the_select = $("select.my-favorite-options");

you could also do things like:

the_select.children("[special]")
- returns all options that have a "special" attribute

the_select.children("[special='1']")
- returns all options that have a "special" attribute with value 1

(just learned, use the .filter() selector to really add to previous selections.)

RUBY/HAML and working with options_for_select():

using the above jquery can be really powerful when combined with page elements, especially form elements. ive been working on custom select dropdowns that are hidden but are then manipulated by a custom UI. but in order to do it effectively you need to access some of the data in the options. but for that you need to get those attributes INTO the select so that when it's created (and then hidden) what you result in has the same attributes. I found a way of doing that using options_for_select().

= my_form.select :form_id, options_for_select( Collection.all.map { |c|  [ c.name , { :value => c.name, :id => c.id, ... etc.} ] ), {}, {:class => "my-class", :attr1 => "value" ... etc.}

the bold stuff is where it's at and the red bit is where the power is. pass in attributes which you may want to use later. pass in as many as you'd like and have fun.