Today I created AdGoggles for the Facebook-MacArthur foundation hackathon. The event was a wonderfully organized event by the Chelsea Pier in the 585 Art gallery complex. Amazing food, the highest of quality attendees, and amazing prizes.

Advertisement Goggles

Freelancers miss sales opportunities due to time traveling and poor coordination. Once we have production on the first DeLorean is complete, this will no longer be an issue. Until then, talent with GPS devices can broadcast their travel itinerary to acquire clients on the go.

Upcoming blog post about professional WordPress development and some of the tools that can help your workflow. Also, I’ll start writing a weekly article on how to learn Javascript. A few of the upcoming articles will be about Test Driven Development, using jQuery, common Javascript design patterns, as well as many more.

Fab.com CEO Jason Goldberg

Jason Goldberg came to NYU’s Startup week this week to speak with Adam Penenberg. Penenberg led Goldberg through his entrepreneurial path from college dropout to CEO. Goldberg’s success and ongoing journey encourages eager adventurers like myself. A few points from Goldberg:

1. It’s worth pursuing what you believe is meaningful, even if it means dropping out of school (twice).
2. Find the one thing you are particularly good at and focus on it.
3. Find a partner who you admire.
4. Don’t outsource. Make partnerships.
5. Invest in customers, rather than short-term revenue.

It’s worth pursuing what you believe is meaningful, even if it means dropping out of school (twice).

Goldberg was born in Rockville, Maryland (followed by a single cheer in the audience) and went Emeryville for his bachelors degree. He dropped out of college in 91’ to work on Bill Clintons presidential campaign. Believed in Clinton before he was the Democratic nominee, but saw the potential behind Clinton’s cause. His first volunteer position was to “drive around the wife” when she came to visit Atlanta. Ended up spending six and a half years in the Whitehouse in the economic council with Erskine Bowles. By 1998, he was a completely different person (joking about weighing 185 pounds) and worked 7 days a week.

To take a break, he decided to go to business school at Stanford. While at Stanford, received a call from Bowles under the lines of (cue southern drawl) “I just put 50 million dollars in a company, but don’t know what they do. Can you find out for me?”. Left Stanford mid-degree to join the startup Bowles invested into and began the startup culture of the dot-com era. This is where he saw excess and understood the importance of a business model. He also learned this is where you invest in people that you know.

Following the dot com bubble’s burst, he moved to AOL Time Warner, right after the merger. He did strategy work but knew he was more interested in operations and management. He also knew that he was much more focused on user experience and moved to T-Mobile, where he worked on their first hotspot network. This was his first “big win” in his career. After finishing his project, the T-mobile CEO said “you can do whatever you want”. Shortly after, Goldberg pursued his own company.

Find the one thing you are particularly good at and focus on it.

For Goldberg, he knew his talent was in User Experience. Rather than being stuck micromanaging every part of his own company, he wanted to focus on the part that he knew best. His past projects were always recognized comparatively as the best user experiences. Rather than being caught up in all parts of the business, he wanted to lead the thing he knew best: User Experience. This is exactly what he did.

Goldberg’s first company in 2003 was a job-centered social network called Jobster. He noticed that the best hires at his companies were the friends of existing effective employees. Jobster was mean to help hiring “someone who knew someone who knew someone else”. The idea that good people knew good people that you should hire, resulted in a social network before its time. LinkedIn, coming a year later, approached the same space through creating a network. Jobster approached it by creating the tools that a company could use to tap a network.

Jobster had good ideas, but Goldberg felt he “ran too fast”. Instead of focusing on the one thing that he knew he was good at, he was involved in everything else. By doing everything, he got nothing done. Through the process he learned if he started another company, he would focus on being the project manager. Sadly, his next project was with Microsoft developers on a Microsoft development cycle. The one-year development cycle didn’t work for the internet.

When Facebook launched, he saw how apps were launching with millions of downloads going viral. Discovering an app making use of the emerging social-graph, he contacted the developers asking to “buy your company”. He discovered the app was built by two engineers in India and couldn’t even keep their servers running because of the traffic they received. As a result, he hired them to work at Jobster and built a product in four weeks that was better than anything the company had built before.

His new product enabled a very simple aggregate of the people in your social network circle. Goldberg related it to Facebook’s News Feed, before it existed. The focus was helping people discover news, just the way he was interested in discovering the news. The product was rolling out right before the election cycle and in under a year had several million users. The company sold in fourth quarter to a European social network, Zing.

Find a partner who you admire.

Goldberg moved to work in Germany to work on Zing, where he missed his boyfriend. This led him to decide on building a social network for gay men. The idea was developed with Bradford Shellhammer, who Goldberg had met years before outside a nightclub at 2am. Goldberg stayed friends with Shellhammer through mutual respect for one another. He felt Shellhammer was one of the most creative people he has ever met. “Bradford brought color to peoples lives.” To add, Shellhammer was showcased in Times magazine, twice.

The first idea of Fabulous was well timed with the trend for a new gay culture. Goldberg was confident in building a new product. Fabulous was “Gay foursquare meets gay trip advisor meets gay deal of the day”. Goldberg saw his relationships with Shellhammer as “Im a geek and your a gay” so we should do something. He knew he could build an amazing user experience and he had complete faith in the style that Shellhammer would produce.

In 2010, the two decided they would leverage their community to start selling stuff. On paper the idea for Fabulous looked perfect, but it wasn’t taking off. The mainstreaming of gay culture made a gay app less needed. Glee, Modern Family, Grindr and all these “things” started coming up. Goldberg states, “even Facebook turned gay”. Seeing that the only successful communities were being based around sex, he wan’t to shift into selling stuff.

The idea for Fab took off during a dinner with Shellhammer. After three bottles of wine at the Market Village, they decided they were not leaving until they figured out what they were doing next. They liked working together, recognized the unique talents they brought together, and both wanted to work on “design”. Using Shellhammer’s taste, Goldberg suggested “lets build a business around your tastes and sensibilities to the world”.

Shortly after the decision, they told their Board of Directors a plan to shutdown the existing website and move ahead with their new idea. Note, they had no idea what they were going to do and were clear with their investors that they could step out and get their money back if they wanted.

TileMill makes beautiful maps

TileMill is a downloadable program that allows you to make beautiful maps. The software is developed by MapBox, a company that provides OpenSource maps as a service.

TileMill is a basic GUI for skinning GIS data. Using a CSS like language, called CartoCSS, users can modify and add visual elements. CartoCSS provides conditional logic, allowing styles to target specific segments of data.

An example of segmented data styling is in open data regarding city populations. Using the CartoCSS, you can render a circle on all of the cities in the world. Using conditional logic, you can make the circle bigger or smaller based on the population of the city.

Getting started

To get an introduction to TileMill, I suggest going through the Crash Course provided by MapBox. The crash course will show you how to load in external data sets, provide conditional styling, and export your map (or upload it online).

Quick Lesson

I showcased a map I made for Acquinity Interactive on Forrst this week. On it, I showed the working files of the TileMill map I created. One of the users requested that I explain how to make something like this.

Step 1: Download and install

I won’t go into detail. Get the program here and install it.

Step 2: Start a new project

Click Projects > New project. Set a filename. Make sure the “Default data” box is check. Then click Add. Click the newly created project to open up the Editor.

Step 3: Add in open data

Just as you will learn in the Crash Course I mentioned above, we will add in a new layer of data. For the sake of this example, we will select the urban city data.

Click Add Layer, at the top right. Once the Add layer model pops up, click Browse. In Browse, click MapBox.

Once in MapBox, click to mapbox-geodata / natural-earth-1.4.0 / cultural / 10m-populated-places.zip. Then click done and save.

Step 4: Find the data to style

From here, you can style anything from the countries you can see, to the data that you just loaded in. For the sake of simplicity, we will make a selector on the cities we loaded in and differentiate them by population.

For more specific selectors, you can go to the CartoCSS documentation.

Step 4.5: Code example

After looking at the Layer’s “Feature” data, I found the data column POP_MIN that I would like to target.

The proper syntax for selecting a data attribute is similar to CSS. I will use #10mpopulatedplaces{} to make a selector for the data we imported.

Second, I will made a distinction between the small, medium, and large cities with a conditional selector. The conditional selector should go onsite the one we created above. You can make something like this:

#10mpopulatedplaces {
  marker-width:1;
  marker-fill-opacity: 0;
  marker-line-color:#ec9a14;
  marker-allow-overlap:true;

  [POP_MIN <= 1200000] { marker-width:100;marker-opacity: 0.4; marker-line-width:1.0; }
  [POP_MIN > 1200000]   { marker-width:400; marker-opacity: 0.1; }
  [POP_MIN > 10000000]   { marker-width:700; marker-opacity: 0.5; marker-line-width:.3;}

This will make three different styles targeting cities with a minimum population smaller than or equal to 1,200,000, larger than 1,200,000 and larger than 10,000,000. The styles that I select are the marker size, opacity, and border. CartoCSS documentation explains there are a number of other styling features such as fill, glow, and much others.

Step 5: Export

From here, you have a map with some generic circles. You can make some additional styling choices to the land and ocean. If you want to make the purple map that I had, you can find the style.mss content here

Go ahead and click Export to get the choices of different export formats. Personally, I like to screenshot the export screen, then modify the screenshot in Photoshop. I have found it looks more like the way I want it to. Otherwise, explore in PNG and set the dimensions.

Learning More

The above was a really basic instruction set. This doesn’t do justice to the capacity of TileMill, so I highly suggest that you go and follow the Crash Course provided by TileMill and experiment yourself.

If you are interested in digital maps, I highly suggest listening to the WebAhead podcast on Maps with Alex Barth. This was the first time I learned about TileMill and MapBox.

Using multiple icon fonts from Zurb

Preface

The creators of Foundation, Zurb, provide useful tools for full-stack developers. One of their freely available tools are the Icon Fonts found here. The fonts are free. There are four sets: general, enclosed, social, and accessibility.

Of the four sets, it is difficult to simply choose one. Personally, I took a couple icons from each set. Because Zurb sets up their font sets in SASS files, this becomes exceptionally easy.

This guide is for users of Foundation and SASS

How to setup

1. Download

First, download the fonts that you want from the Foundation Icons page. The link is here: http://www.zurb.com/playground/foundation-icons.

2. Moving files

Second, grab the files located in the /sass and /fonts directory. Move these two directories to your website’s main root directory. My home directory is setup like this:

/
/index.html
/css/*.css
/css/*.scss
/css/[ONE-FONT-SET]/[scss-FILES]
/fonts/[FONTS-GO-HERE]
/images/
/scripts/

I have my SASS files and CSS files in the same directory. I create a separate directory in the /css/ directory for each individual font .scss file set. Because I use SASS, I try to keep my working directories as organized as possible. I place the font files (.eot, .svg, .tff, .woff) into the /fonts/ directory.

3. Update Foundation Icon .scss files

After your files are placed in their respective directories, you need to update the files paths declared in the files. Also, if you are using multiple fonts, then you need to update the CSS class names, so the fonts do not overwrite one another.

First, open the _settings.scss file for each font set. You should have something that looks like this:

$fontFileName: "../fonts/general_foundicons";
$fontName: "GeneralFoundicons";
$classPrefix: "foundicon-";

@mixin i-class($name,$pua) {
  .#{$classPrefix}#{$name}:before { 
    content: "f#{$pua}";
  }
}

@mixin ie-class($name,$pua) {
  .#{$classPrefix}#{$name} { 
    *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf#{$pua};"); 
  }
}

@mixin face {
  @font-face { 
    font-family: $fontName;
    src: url('#{$fontFileName}.eot');
    src: url('#{$fontFileName}.eot?#iefix') format('embedded-opentype'),
         url('#{$fontFileName}.woff') format('woff'),
         url('#{$fontFileName}.ttf') format('truetype'),
         url('#{$fontFileName}.svg##{$fontName}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

You need to change the first and third lines, respective to your own setup. The first line declares where you font files are located, respective to where you compiled .scss files appear. For me, my CSS files render in /css/*. To access the /fonts/ directory, I use ../fonts/general_foundicons to go up one directory and into /fonts/.

If you are using multiple fonts, you need to change the $classPrefix statement on the third time of _settings.scss to be unique. I change the name of my General Set from

$classPrefix: "foundicon-";

to

$classPrefix: "foundicongen-";

Similarly, I changed my accessibility, social, and enclosed sets respectively, by adding one three letters after foundicon.

4. Using icons in webpage

For this part, you can follow the directions on Zurb’s instructions. You need to find out the name of the font icon you want to declare. Then, using the <i> tag, set the class foundicon-[icon], where [icon] is the name of the icon you want to declare.

In my case, because I am using multiple fonts, I needed to rename the class prefix above. Therefore, depending on the icon set I am pulling, I need to declare class that reflects the icon set.

For example, if I want the globe icon from the General Icons set, I will declare:

<i class="foundicongen-globe"></i>

This will appropriately pull the Globe icon associated with the General Icon set.

5. Style Away!

Again, just as the Zurb page says, you can now freely use CSS techniques to manipulate the icons. You can change colors, add triggers (hover, focus, active), as well as set animations using CSS3.

Enjoy!

For any questions, feel free to contact me at @lkbcc