Posts Tagged as: web-development

December 28, 2019

Storing Time-Series Twitter Engagement Data in a Graph Database

I wanted to better understand how Tweets get traction, and how that contributes to people’s follower counts. So I wrote some Node.js code that connects to the Twitter API every so often, looks at the people I follow and their tweets, and saves the results into my favorite graph database software, Neo4j.

Editor’s Note: Neo4j is not paying me for this post, but they totally should.

It took some trial and error, but I’m pretty happy with the schema I’m using. Here it is.

Every time the data is fetched from the Twitter API, a new “Timestamp” node is created. That node has 2 connections from the User node and the Tweet node, and the actual stats about the user and the tweet are stored in those 2 connections. That’s the magic part, so I’ll reiterate: The time-series data is stored inside the connection, not the node.

(The files are insiiiiiiide the computer….)

Let me explain with pictures.

For this example let’s use one of my favorite high-profile data scientists, Max. Here you can see Max (in green) posted a tweet (in blue). But let’s look at those connections to the tan timestamp node below.

In the screenshot above, I’ve clicked on the connection between the tweet and the timestamp, so you can see the data it contains. You can see it’s got one favorite and no retweets.

Now, in real life I go ahead and like that tweet, run my script again, and let’s see what happens…

Holy shit it worked! There’s another timestamp node. And when you click the connection between that new timestamp and the tweet, you can see the new favorite count.

So that’s the basic technique. You can see that the same approach works for tracking follower growth too. For example:

There are more complicated ways of storing time-series data in graphs (Google “time trees”) but this simple approach seems to be working well for me, and will hopefully yield some interesting results.

So that’s it. That’s the post.

(PSSST: I’m having lots of fun with this nerdy graph stuff and will be posting more in the future. For updates you should follow me on Twitter, where you bet your ass I’m tracking my follower count using this technique.)

December 20, 2019

Getting fancy with CSS’s Position Sticky

Yesterday we published this ambitious story on Esquire about competitive yoga, which apparently is a thing that exists.

It’s the result of an experimental collaboration between a few different departments within Hearst Magazines, each possessing vastly different skillsets but all sharing a love for quality storytelling. The goal: Abandon the various elements on a modern webpage that compete for your attention (ads for instance – of which this article has none) and just tell a damn good story.

I’m proud of how it turned out, and wanted to share some learnings about the nerdy CSS stuff featured in the story.

One of my favorite parts of the story are these little parallaxy breaker images. Parallax can be a dirty word in web design because it’s so easy to screw up, but we developed this method that adds some slick visual candy to the page without performance costs on modern browsers, so I thought I’d walk you through how it’s done.

Ready? Ok, let’s go.

The first step is to get CSS “position:sticky” working in a basic way. In this example, the blue box is sticky and the image element is its sibling. They’re wrapped in a div, which is important to get sticky positioning to work.

Now that the basics are working (and we have silky-smooth browser-native scroll behavior with no JavaScript!) we just need to move things around and adjust margins and padding. Here we go…

First we want the text to be positioned in the center of the screen. We change it from “top:0px” to “top:50%”, and we get this:

The blue box gets sticky at around the right place, but it leaves an ugly gap; that’s where it “lives” in the document flow. So how do we fix that? Easy! Just put a negative margin on the top of the parent wrapper!

To visually clean this up, you can put a white background on whatever div you’re invading with your top negative margin. Then you’ll have something like this…

Ok, so now the text enters the image smoothly but exits lamely. Let’s make the bottom as smooth as the top.

If we add some extra height below the image, it will scoop up the text instead of the image itself. Badass.

To hide that text below the image, we can apply a negative margin just like we did at the top of the parent element.

Sweet! But we’re not quite done… What happens if the user resizes the browser and the height of the box changes? Since the size of the top/bottom margins depends on the height of the text box, this would throw off the vertical alignment. For example:

So how can we fix this?

Who gives a shit!

Kidding… Of course you give a shit. That’s why you’re still here.

Here’s where some sparingly-used JavaScript can come in handy. When the page is resized, you can dynamically calculate the height of the text area, and use that value to set the negative margins we hard-coded above. (Just make sure to “debounce” your function otherwise you might crash someone’s browser and look like a fool.)

So the only thing left is the transparency part. The trick here is to bust out Photoshop and replace the main image with a semi-transparent image, which will become the “foreground”. Then you use the regular image and absolutely position it in the parent container as the “background”.

After some z-index fiddling, you’ve got your effect. The more you mask out of your foreground image, the cooler the effect will be.

(I was lucky to work with Mike Kim, whose attention to detail is amazing. Anyone that can silo hair wins at Photoshop.)

I hope this was helpful. If you have any questions or want to show off anything cool you’re making with CSS position:sticky, hit me up on Twitter.

February 20, 2019

Judging People Who Don’t Exist

TLDR: I made a thing and it got some press.


Judging people by their appearance feels icky. Why? Because there’s more to people than their looks; we need to consider the whole package.

(“But they have such a good personality!”)

But what if someone exists in appearance only? A cover without a book, solely for your judgement?

That sounds like a fun place to make guilt-free snap judgements, so I built it!

Please enjoy “Judge Fake People“, a place where you can vote on the appearance of people who don’t exist.

Background

Like many internet addicts, I was blown away by NVIDEO’s demo using style-based Generative Adversarial Networks to generate faces. They seem to have crossed a threshold for generating artificial images that can genuinely fool our brains.

Flash forward to last week when I saw Philip Wang’s amazing single-serving website thispersondoesosxist.com.

It was fascinating to see a photo-realistic face of someone that doesn’t exist. Philip’s writeup does a great job explaining his motivations and this implications behind this groundbreaking technology.

But I just wanted to turn it into hot or not.

So I wrote a script to download an image from thispersondoesnotexist.com every 5 seconds and built up a collection of around two thousand fake people. Then I made a voting system with php/MySQL and some filters to show the highest and lowest rated faces. And I enabled comments just for fun.

So sit back, relax, and enjoying rating the attractiveness of people who don’t exist right here.

July 18, 2016

Rockstar Developers

For the last few months I’ve been leading games product development at Hearst Digital Media working with some amazing folks building some pretty awesome stuff. We’re bullish on using the latest web technologies to bring app-like game functionality onto the web, and it’s been a blast so far.

We’ve just signed a deal with a big gaming company (can’t say who yet… but you’ve heard of them), and with wind in our sails we’re expanding the team. If you’re a rockstar full-stack developer or know one, check out the job description here.

August 21, 2015

Interactive Subway Station Maps

I’ve been having way too much fun with these. Last week I made an interactive sharable NYC subway map called “What’s Your Subway Station Number” and it’s been making its way around the web, being covered by Gothamist, Curbed, Brooklyn Magazine, 6sqft, and more.

And yesterday I made one for Boston, which you can see here.

Boston.com just did a nice writeup, and I’m hoping it brings Bostonians as much fun (and lost workplace productivity) as it’s brought New Yorkers.

Based on the stats, people have spent a combined 370,000 hours playing with just the NYC map alone. Crazy!

September 19, 2014

Can Eye Axe Ewe Equestrian

can-eye-axe-ewe-equestrian

I made this with icons from my one of my favorite online resources, The Noun Project.

Credits:

Can designed by Deuk from the Noun Project
Eye designed by Edward Boatman from the Noun Project
Axe designed by George T Hayes from the Noun Project
Sheep designed by Unrecognized MJ from the Noun Project
Jockey designed by Jerry Wang from the Noun Project

May 5, 2014

Chainlinking

As far as I can tell, there’s no word for that thing when a website links a few consecutive words of text. For example, if I was talking about Charlie Sheen I might mention he’s a had some trouble with the law. (See what I did there?)

So I’d like to formally submit my term, “Chainlinking”:

Chainlinking. When a website hyperlinks a few consecutive words, usually to provide background on a topic. Often snarky. Usually annoying.

Lastly, I should add that there’s another definition for chainlinking on Urban Dictionary. My definition is decidedly different, and has nothing to do with a bunch of dudes blowing each other.

April 4, 2014

Embedding Posts from Bitcoin Megaphone

I just added a cool new feature to Bitcoin Megaphone. Now, each post’s permalink has an “embed” button, which lets you embed that post anywhere on the web.

This opens up the content to anyone who wants to categorize it or share it in new and creative ways. Enjoy!

While we’re on the topic, here are some of my favorite posts so far.

March 19, 2014

Bitcoin Megaphone

Last week I had a crazy idea for a website. This week I’m proud to announce BitcoinMegaphone.com. Let me explain the idea and why I’m so excited about it.

The website is based on two basic rules: Anyone can post, and anyone can profit.

Rule 1: Anyone can post

In this regard it’s like Twitter, but instead of being limited to 140 characters, you’re charged per character. So the only limit to the size of a post is the size of your wallet.

If you wanted to post a message the length of a tweet (140 characters), it would cost around $0.08 (based on the current Bitcoin/USD exchange). Posting just a bit.ly URL costs around a penny. If you want to stand out and post a chunk of text, the price (along with the post’s visibility) goes up.

So that’s the first part of the website. It’s got kind of a “Million Dollar Homepage” vibe to it. Ok, so far so good.

Rule 2: Anyone can profit

This is where things get interesting.

Every time someone creates a post, a “virtual tipjar” is automatically generated for that post. Each post has its own unique tip jar, and it’s baked right into each post’s URL. And here’s the kicker – only the original creator of the post is given the keys to the tip jar. This is possible thanks to the ingenious system of public/private key generation that’s a part of the Bitcoin system. So any time you see a post on Bitcoin Megaphone, you can send money to it and the author gets 100%.

This lets people get a return on their investment, and offers incentive to post and share funny, engaging, or timely content. Getting social currency in actual money is much more enticing than the meaningless Retweets and Likes we’re all so obsessed with.

There’s already a post that cost $15 where someone jokingly referenced the infamous Nigerian Prince scam email. It hasn’t gotten any tips yet, but I applaud the author’s balls:
http://bitcoinmegaphone.com/1FMiqFSdHwAZF9SKi8DVLUGfghEeAyWwSZ/

On the opposite end of the spectrum, here’s a post where the author only spent $0.08, but has already made $0.40 in tips, making about 4x his/her investment. (It’s a cute emoticon, by the way):
http://bitcoinmegaphone.com/14XMmrqXiUcpPHySzj4SXSPyxLPiVVgoiX/

Why I’m Stoked

Before Bitcoin, it would have been impossible to create a website like this. There are no credit cards to hook up, no user accounts to create and spam with marketing emails; no annoying ads that disrupt the experience of exploration and discovery; no annoying comments to moderate. It’s just content and micropayments.

There are a lot of smart and talented people looking at micropayments as the future of online publishing. Personally, I have no idea how things will shake out, but I’m excited to keep watching this living breathing ecosystem evolve.

In Summary

Right now on the internet, text is a commodity (think of those walls of text on your crazy friend’s Facebook page). Bitcoin Megaphone transforms strings of text from a commodity to a unique store of value. And that’s some pretty interesting shit.

PS – I was considering posting this entire post on Bitcoin Megaphone for $21.30, but decided it would be weird on launch day :-p

February 12, 2014

Javascript “World” Simulation

This is brilliant. View the source to see what’s happening.

November 20, 2013

Amazing Fluid Particle Simulator

I just love things like this.

There are a ton more links to other simulations and visualizations in this Hacker News thread.

October 8, 2013

Great Parallax Website

This Danny Brown story by Complex Magazine is really well done.

This feels like the forefront of online publishing to me. My spidey-sense tells me that if it looks amazing and is very difficult to build, you’re doing it right; very similar to how painstaking it was to lay out a magazine in the 1950s.

October 3, 2013

Cool Interactive Cloth Simulation

All done with basic web technologies. Very cool.

See the Pen Tear-able Cloth by suffick (@stuffit) on CodePen

Via The Loop

September 26, 2013

Cookie Clicker Calculator

One of the most annoying parts of the new game Cookie Clicker is the waiting. So I made a little tool to help make it more bearable. If you’re a Cookie Clicker junkie I hope you enjoy this.

Change the values below:

August 7, 2013

Mac OSX’s Responsive Font Panel

My habit of unconsciously resizing my browser window surprised me when I accidentally resized the Fonts panel in OSX and discovered that it was “responsive.” Depending on the available width, it smartly switches between list views and dropdown menus, and removes non-crucial elements as space gets really tight.

Pretty cool.

July 11, 2013

Cutting Out a Candle in AfterEffects

Those mask guides look pretty cool as they dance around the flames. I had to manually adjust their position for each frame. It’s tedious work, but someone’s gotta do it.

Check out the final product on the glamour.com homepage on August 9th.

July 10, 2013

Embedding an Instagram Photo

Hot off the presses. You can now embed an Instagram photo into any web page. Just browse to any Instagram photo on instagram.com, and click the little rectangle on its right side.

Here’s one of my favorite recent shots, taken in Long Island City.

June 27, 2013

Browser Pong

If you’re on a desktop computer, check this out: http://stewd.io/pong/.

I could explain but I don’t want to ruin the surprise.

Via Tim Holman on Twitter

June 4, 2013

Social Media Button Alignment

For the last 6 years or so, every time I’ve added the standard slew of social media buttons to a website I’ve needed to manually adjust their vertical position to get them to line up. This is a sight I’m sure all web designers are familiar with:

So today when I noticed the alignment was off again and started editing the CSS, I was delighted to see that I could just remove the vertical position hacks altogether. So it looks like it’s taken Twitter and Facebook 6 years to agree on a consistent vertical position.

In any case it’s nice to have one less thing to worry about while maintaining a website.

May 21, 2013

Sharing Photos From the New Flickr to WordPress


This is very cool. While browsing the new Flickr, I noticed a share button labeled “Share to WordPress – The Cleverest” so I clicked it. Apparently I had hooked it up to my WordPress installation ages ago and forgot about it. This type of one-click publishing is very cool, and reminds me a bit of Tumblr, which Yahoo also just snatched up. Interesting.

Via Flickr:
on Instagram bit.ly/10digbk

May 8, 2013

The User is Drunk

An interesting way to think about website usability, created by Squareweave.

Basically, if you assume your users are drunk (blurry vision, short attention span, etc…) you can make a UI that gets out of the way and makes your website easier to use.

May 6, 2013

Confusing User Interface Elements

Too many people are trying to make the web more usable so I thought I’d try the opposite. Below are some user interface elements I designed to confuse, badger, and infuriate users. Enjoy.

1: The Chutton
Part checkbox, part button. Ideally this will initially present itself in the “checked” state, regardless of user intent.

2: The Boggle
Functions as a regular checkbox, but activating the slider simply covers up the checkbox and label. Avoid action-oriented labels such as OK or YES, and instead use vague language and/or the past tense.

3: The Notifuckation
Displays the number of notifications alongside an active radio button. Clicking or tapping on the radio button immediately marks all the notifications as “read”.

4: The Search & Destroy
A standard text entry field, but the user must slide the search button to the left to submit the form. As the search button slides, it deletes the characters it touches.

5: The Homer
This UI element has everything; pre-populated tags that are confusingly named, 2 scroll buttons, a search field with a settings icon, and Windows controls that do nothing!

I’ve also made the PSD available for download. Please use irresponsibly.

May 3, 2013

Everything You Always Wanted To Know About Bitcoin (But Were Afraid To Ask)

This video series by the Khan Academy is an extremely informative and approachable high-level overview of Bitcoin and all the technologies associated with it. I’m planning to make my way through it this weekend.

April 11, 2013

Computers and Hollywood

I found this great subreddit about those designs on computer screens you see in movies. Some really interesting stuff in there.

Speaking of fake UIs, here’s a cool video made by designer Phillip Lentz. I’d love to open it fullscreen on my work computer and start frantically typing and see how long it takes someone to notice. If they ask what the hell I’m doing I’ll probably say something about how I’m just breaking through the encryption shield before uploading a nano-virus.

March 25, 2013

Understanding MD5 Hashes and Security

Geek confession here. Before today I had a sorry understanding of what MD5 hashes were, and how they related to passwords and online security.

All I knew was they had something to do with obscuring your password so it could’t be cracked. Or something.

But after skimming a fascinating article on Ars Technica called How I became a password hacker I decided that ignorance was no longer an option.

So it turns out an MD5 is just a specific type of “cryptographic hash function“, which means it’s a one-way function; you can’t figure out what went into it just by looking at what came out of it. Badass.

This graphic (via Wikipedia) sums it up pretty nicely. (The “Input” represents a password, and the “Digest” represents a hash.)

It turns out you can make MD5s yourself pretty easily. Do something like this on your command line (or you can just Google for “MD5 Generator”), and you can start to play around with making hashes. You’ll see that no matter what you use as your input, you get 32 characters of crap:

$ echo -n “hello world” | md5
$ 5eb63bbbe01eeed093cb22bb8f5acdc3

$ echo -n “helloooooooooooo world!” | md5
$ 9fa764163c098ec3374ef0c3f7419524

So again, that’s the secret. The magic is the crap. Those 32 characters are so crappy and so random, no amount of computing power can reverse-engineer it back into your password. And the other crucial piece of the pie: Your password is the only piece of input that will consistently produce that exact same piece of crap.

So how does this relate to passwords and security? Reading this blurb on the Wikipedia page made it all click for me:

Alice poses a tough math problem to Bob and claims she has solved it. Bob would like to try it himself, but would yet like to be sure that Alice is not bluffing. Therefore, Alice writes down her solution, computes its hash and tells Bob the hash value (whilst keeping the solution secret). Then, when Bob comes up with the solution himself a few days later, Alice can prove that she had the solution earlier by revealing it and having Bob hash it and check that it matches the hash value given to him before.

So that’s basically the gist of it. Pretty cool, and that ain’t no shit.

March 12, 2013

Condé Nast Entertainment’s Video Play

Some pretty exciting news from Condé Nast today. The new Entertainment group launched a platform for video delivery which they hope will showcase (and monetize) branded video content.

Today’s launch started with Glamour and GQ. Check out the sites – they’re really well executed with the latest in responsive design. My only quibble is that when you hover over a video (with the intention of hitting play/pause), the whole video and all its navigation buttons slide to the left and out from under your mouse. But that’s a small UX gripe with an overall brilliant execution.

They even let you embed the videos. Let’s give this Bill Murray one a shot.

Overall this is the “Netflix” approach of creating and distributing your own content and bypassing traditional channels. Will it work out and create a new revenue stream? Well if I knew for sure, I’d be with the executives on the 11th floor. So until then, I’ll just stick to making websites.

January 10, 2013

Web Developer Checklist

The Web Developer Checklist is a brilliant and fun way to prep a website for launch. Surprised I’ve never heard of it before.

January 4, 2013

A Brief History of This Website

I thought it would be fun to take a look at this site as it’s developed over the years. Thanks to archive.org, I was able to find some screenshots.

Let’s start backwards from today. Here’s how the site looks now:

The version before this endured since 2008:

Back in 2007 I was going for a very “2007” look. Note the classic pixel stripe patterns and gradients. Very Web 2.0:

2006 marked the start of the gradients and reflections. I also took some flowery/asterisk patterns from the previous design to add some texture to the top of the site:

Back in 2004 I was going for kind of a grungy look:

In late 2001 the site looked like a shitshow. Puke yellow and musty orange? Sure, why not!

Early 2001: Using images for corners before it was cool, and then not cool.

In early 2000 this site lived at solomania.com, which is now my portfolio. Believe it or now, this was a cutting-edge table-based layout.

And from early 2000, here’s the earliest design I have on record. I still remember how hard it was to figure out those colored borders.

December 19, 2012

Downloading Dropbox – The FTP Killer?

We all know about the invaluable Dropbox, but I recently found out that you could download and run your own instance of Dropbox on any computer.

I haven’t tried it out yet, but in essence I could install it on a web server and sync it with a local folder on my computer, eliminating the need for me to use FTP while making websites.

It doesn’t have as much “geek cred” as running a shell script, deploying to a GIT repository and getting to say things like “deploy it to the production server!” But we can’t all be the geeks we want to be, sometimes we’re just the geeks we are.

December 14, 2012

The Modern Seinfeld Generator

If you haven’t already, you should check out the Seinfeld Today twitter feed. It’s amazingly well done. So as homage, I whipped out my PHPness and created a little web app that randomly generates a plot every time you refresh the page. Check it out and enjoy!

http://www.thecleverest.com/modern-seinfeld-generator