tholman.com Open in urlscan Pro
3.72.140.173  Public Scan

Form analysis
0 forms found in the DOM

Text Content

THE CURIOUS CREATIONS OF


TIM HOLMAN

I'm a tinkerer, tuner & tamperer who's been around the block.

Give me a buzz: Twitter, CodePen, Github, StinkedIn, Email log & Email.

Send some love:
Buy me a Coffee

Some filters:
Serious Stuff
Jokey Stuff
Talks & Podcasts


MODERNIZED JAVASCRIPT 90'S CURSOR EFFECTS, THAT WE ALL KNOW AND LOVE

Bringing those beloved cursor effects into the modern age.

These Cursor Effects have been sitting in my GitHub profile for a fair while
now, and much like the cursor effects of the ’90s were a little old and
decrepit, so I decided now’s the time to modernize them a whole lot!



These range from the character-based fairy dust.



Right through to the beloved snowflakes, and ghost cursors.



To emoji powered springy ball cursor danglers.

Each of these is built with modern JS in mind, so they’re super speedy and very
customizable… you can have them sit over the whole screen, or sit within smaller
windows.

Super free to use, which is the icing on the cake I guess! If you’ve seen any
other old effects floating across the web, I’d love to bring them into this
library, if anything for the preservation of a beautiful time on the internet.

➶ 90’s Cursor Effects ➶ 90’s Cursor Effects on GitHub


THE MAKING OF MOSQUITO.JS

A 10 minute talk about the making of a murderer mosquito.

Making the mosquito was one thing, though after it’s creation it didn’t feel
quite right leaving the project alone.

That’s when the amazing !!Con came along. Bang Bang Con is one of my favorite
conferences each year, focusing on small bite-sized projects and often
showcasing people being super creative within speedy 10-minute talks. And they
were interested in my mosquito!

You can watch the talk on youtube!

If you enjoyed that, I definitely recommend watching some of the other talks of
the two-day conference, both are available via their recorded livestreams.

What’s next for the mosquito? Only time will tell.

➶ The Making of Mosquito.JS on YouTube


THE USELESS SITES OF THE USELESS WEB

Back in 2012, I built The Useless Web, a portal to the weird of the internet.
Now, I’m tracking down how those sites came to exist.

When The Useless Web was built, honestly, I was on a broad search for everyone
all sorts of weird sites here and there, but didn’t put a whole lot of research
into them… they exist, people all over the world have been spending time
creating all sorts of useless wonders. Now, I’m going back and trying to find
out the what, when, where, and why’s of these sites.

The hub for them, is here, a subdirectory of the main site. As the sluthing
continues, and the emails roll back in, I’m updating it with the backgrounds of
these sites.



To kick things off, we have Cat Bounce, Endless Horse & RRRGGGBBB.



I’m also using the service to try to appeal to anyone reading, I’m seeking out
any information on sites are very difficult to find information about, The
Pigeon for example.

➶ The Useless Sites of the Useless Web


MOSQUITO.JS

In an attempt to learn a little more about the web audio API, I created a
mosquito from nothing!

This bite sized weekend project started out innocent enough, I wanted to mimic
the noise of a mosquito using tech on the web.

The initial steps were easy. Listen to some mosquito videos on youtube (yes,
they exist!). Create an oscillator to mimic the most annoying mosquito pitch
possible. Then, get into the mind of the mosquito, to create the random pitch
and volume variations that drive someone insane.



I had originally planned to build this out like an API, so people could add
mosquitos to their website. Maybe hook it into the mouse movements, so you could
“play” the mosquito so to speak, but the very act of creating it sent me insane.

I documented the journey.

➶ Mosquito.JS


ALWAYS JUDGE A BOOK BY IT'S COVER

A weekend project that took a a couple of weekends. Weird books & weird covers.

I’ve had this project in my brain for over a year, and was really waiting for a
gap when I had the time and patience to complete it.

Always Judge a Book by its Cover is a collection of all the strangest book
titles out there, as well as their amazon links, and a small parody-styled
review of the book based on its cover.



The real time suck of this was finding all the books, writing all the reviews,
collecting all the links, and then building the site itself.



There are some nice little touches that were fun to build on this project. The
drippig effect was done with canvas (could probably be nicer with css houdini in
the future.)

The 3d book effects were done with css transforms, and are hooked up to lazy
load with the js intersection observer.

➶ Always Judge a Book by its Cover


INSPIRING ONLINE 2.0

I’ve remade inspiring online, with a focus on a slightly longer format.

I’d first made inspiring online in late 2016, and had kept it fairly busy into
2018, and then dropped off completely.

I’ve decided to do a revival, with a little longer format of the posts.
Partially because I’ve been putting a little more effort into writing, and
trying to improve on it, and partially because I feel that I have the knowledge
to give some fun insights into some of these things.

The refresh also has come with a fresh redesign, to accommodate the longer
format of writing.



I’ve rebuilt the code from scratch, moving it from jekyll to hugo, which is a
lot faster. And hosted it on Netlify, for quick and easy deployment.

Edit: After this initial rebrand, I’ve done a larger, weirder one. Inspiring
Online is now The Indie Web.

➶ Inspiring Online website
➶ Inspiring Online source on Github


GENERATIVE ARTISTRY PODCAST

A podcast about generative art, to go with the interactive tutorials!

Last year, Ruth reached out to me and proposed the idea of a generative art
podcast!

We mulled over the idea for a few months, and then put together a format that we
thought would be fun for us to create, as well as educational and inspiring for
others.

We’ve got some great guests coming on.

As well as some short chats, where we kind of completely got off-topic and found
the chat interesting enough to publish.

We’ve combined the podcast into the generative artistry site, so you can get all
your tutorials and blog posts in the same place.

The podcast is available in all the cool places too!

➶ The Generative Art Podcast
➶ On Spotify
➶ On Apple Podcasts
➶ On Google Podcasts


BINARY MUSIC PLAYER

A little music player, with a binary twist.

A while ago, I stumbled onto this beautiful video. A music player that counted
up with binary, playing notes on each particular 1, and being silent on each
particular 0. In the video (which I do think everyone should listen to!) the
creator has also added some background sounds, and is also using real piano
notes, so it is definitely a lot more beautiful.

That said, it was still something that I wanted to replicate on the web, using
Tone.JS.

I also went ahead and added the ability to customize the notes, and share the
individual creations with others via url parameters.



There wasn’t really any need to use a framework (other than Tone.JS of course),
so its all relatively vanilla JavaScript, so if you take a peek at the code, it
shouldn’t be too insane.

➶ Binary Music Player
➶ Binary Music Player On GitHub


WOWEN WILSON

Perhaps the most important quiz thats ever existed. Hear the ‘wow’ and name the
movie.

With all these serious projects rolling through, it was time to get back on the
joke train. This beauty was an idea I’d had with some friends back in Australia…
it was one of those things you just can’t ignore. A friend of mine Tobias jumped
in, and we made a quick weekend of it.



The idea is fairly simple, you hear Owen say “Wow”, and then you need to guess
which movie it was from.



We got pretty good at it by the end, even scoring a perfect 10/10.



Although that said, having built it gives you a bit of an advantage. Check it
out on the link below.

➶ Play Wowen Wilson


TUTORIAL MARKDOWN

I’ve open sourced the magic behind the generative artistry website, aptly named
tutorial markdown

Tutorial Markdown is a javascript library that reads onto a small extension of
markdown syntax, allowing for self coding tutorials like these

Interactive blogging is something that had been on my mind for a long time, so
it was great to finally get this out. It involved really picking apart the way
that we write code, and finding a way we can explain it in terms that aren’t
overwhelming at all.

I’ve added a lot of documentation in there as well, but of course am happy to
help anyone getting started!

➶ Tutorial Markdown on GitHub


TOOLSDAY PODCAST (GENERATIVE ART)

Wahoo, I was on toolsday again, this time talking about generative art, and
tutorial markdown.

Toolsday continues to be a fantastic podcast, transversing a wide variety of
tools and products. It was a pleasure to be on there again!

➶ Listen here


GENERATIVE ARTISTRY

Generative Artistry is a small venture I’m making into blogging actual code!
Including something I’ve been thinking a lot about, self coding tutorials.

I’m super excited about Generative Artistry, its going to be a great avenue for
me to explore technical blogging, as well as an experimentation into how people
learn to code. There’s been a ton of encouraging feedback, that is leading to my
next release, which will be called Tutorial Markdown, a markdown style for
interactive blogging.

The site itself is a simple blog, built on hugo, a static site build built with
GO… its primary focus is speed.



The site provides a list of tutorials, simple as that.



The tutorials are where the magic really happens, as you scroll through the
posts, the code is compiled together in a small editor (to the top left), and
then executes in an iframe at the bottom left.



This means that as you’re reading the post, you can scroll back and forth
between code examples and see the difference and steps. This helps build a much
stronger understanding about the code thats heading into the editor, and can
hopefully help to foster a better learning process.

Edit: Tutorial markdown is now open sourced, for those looking to build
something similar

➶ Generative Artistry
➶ Generative Artistry on GitHub


GENERATIVE ART SPEEDRUN

I’ve had a big swing into generative art lately, and this talk has been a big
part of my research, discovery and exploration.

This video is from JSConf Australia, when I first gave this talk. Since then,
I’ve given it in a lot of different formats, and from a lot of different angles,
including workshops and lightning talks. Generative art is rich with avenue’s
for exploration, inspiration and all round fun!

➶ Check out the video.


THE ZEN ZONE

The Zen Zone is an exploration into what it takes to slow myself down, switch
off, meditate.

The idea behind the Zen Zone has been sitting in my head for a year or so now…
the thought that I sometimes get stuck focusing on a simple boring task, but
when I’m supposed to be focusing on something, like work for example, I find
myself wandering aimlessly.

After using Vue recently for the What Have You Made Today extension, I decided
to rock back to React for this one. Honestly I feel that both of them are very
similar when it comes down to designing and ideating while you create… so no
harm dancing around a little bit.

I set out to build a few simple “games” that would keep me captivated, and went
in search of inspiration outside of the regular web circles.

The Switches game is inspired by… well, every day switching on the lights. As
well as that little satisfaction you can get when animating things nicely in
code.



The Swirl game has been inspired by the Japanese zen gardens, of which monks
would focus on to help clear the mind.



The Break game was inspired by the general nature and make-up of all things.
Everything can be broken down into smaller and smaller pieces.



The games are stitched together in a way that makes me feel like I can expand
upon these games easily, add more to the platform, and grow it out when I feel.

Having launched the project, there is a lot to be done straight off the cuff
design and development wise. So lots do do still!

➶ The Zen Zone
➶ The Zen Zone on GitHub


JOLLY JS JOURNEYS

Had a blast at JSConf Asia! I’ve been talking about the journey of creation for
a while now, and am always changing how I want to present it. This is one of my
favorite renditions.

Honestly, JSConf Asia was really top notch this year, I met an incredible group
of developers from all different backgrounds. Could barely sleep afterwards. I
highly recommend it to anyone thinking of going!

➶ Watch on YouTube.


S.JS

Canvas JavaScript polyfill for the vital and pivotal S we all drew in school.

The web canvas is a powerful tool, the API is fairly straight forward, and
provides us with the tools to draw almost anything. Circles, squares and lines
are the building blocks we have used since the dawn of time…

That said, there is also one other basic shape… that we all learn in school…
passed down through generations… as old as time… no one really knows its origin.



Absolutely a must have for any canvas project.

➶ S.JS on GitHub


WHAT HAVE YOU MADE TODAY?

Got a little sick of my old “new tab” page, so I built something small to
replace it.

The idea of this little project was to build something that replaced the default
“Chrome” new tabs page, which, although good, would be a little frustrating at
times… it would load a whole google search bar, when really I was using the
browsers URL bar to search anyway. It was also sending off requests this way and
the next, which weren’t really neccesary.

All I really wanted was a simple speed dial, and some motivational text. So
thats what I did!



One pleasant surprise, was that the FireFox addon’s use exactly the same api’s
as Chrome, and that there is a whole documentation amongst browsers, about how
to implement said extensions. Yay for standards!

➶ The extension on GitHub
➶ Chrome install page
➶ FireFox install page


TOOLSDAY - HEADLESS CHROME

I had the pleasure of speaking with Una Kravets & Chris Dhanaraj about Headless
Chrome

Toolsday has been a favorite podcast of mine since its conception, so it was
great to be a part of it, speaking about Headless Chrome.

➶ Podcast and shownotes


TETRIS PIECES

A couple of months ago, I did a little commission work for Electric Object, in
the form of Abstract Clocks. While working on the clocks, I ended up creating a
bunch of different proof of concepts and directions. This was one of them.

The initial idea for “Tetris pieces” was to create a bunch of small video game
demo’s that would use AI to play on your wall, I had looked at snake, a brick
breaker game and a maze solver. Ultimately, I found myself drawn to the
different renderings of Tetris games. It was so mezmerizing watching tetris play
out automatically on the Electric Object, I had to stick with it.

To begin the project, I began researching tetri’s AI’s, and immediately found
one that was absolutely perfect built by a very talented developer, Yiyuan Lee.

You can read about how the AI works in the post linked above. Here’s a snippet
about how the AI decides where to put each piece. Its definitely worth the read!

> To meet this goal, our AI will decide the best move for a given Tetris piece
> by trying out all the possible moves (rotation and position). It computes a
> score for each possible move (together with the lookahead piece), and selects
> the one with the best score as its next move.
> 
> The score for each move is computed by assessing the grid the move would
> result in. This assessment is based on four heuristics: aggregate height,
> complete lines, holes, and bumpiness, each of which the AI will try to either
> minimize or maximize.

From this point, I forked the code and set my mind to hacking how the pieces
were drawn, so I could have multiple different looks and feels.



These are, from left to right.

1: Ambient Blocks, in this version the tiles take up solid block colors. As the
game goes on, the hue of these colors rotates very slowly, meaning whenever you
look at the wall you should see slightly different colors. This playful touch
made it my personal favorite.

2: Classic Tetris, in this specific rendering I’ve copied the colors and
patterns from the original GameBoy game, including that ever present green
tinge.

3: Colored Classic, using the colors of the tetris game that appeared on Super
Nintendo, the colored tiles perhaps look the nicest on the screen, and
definitely bring back some nostalgic feelings!

All in all, the project was definitely a good experience. When you have to plow
into someone elses code, with no background its funny what you can learn.
Finding and editing the code that renders the tetris pieces to the canvas was a
little tricky, but ultimately very rewarding.

➶ Tetris Pieces in Action
➶ Tetris Pieces source on Github
➶ Tetris Pieces on Electric Object


SMELVETICA

Sadly, this received a takedown notice from monotype and their lawyers… so this
is all that remains of the project

[Smelvetica] was an experimentation in taking one of the worlds most beloved
fonts, and turning it into a morbid monstrocity.

This project began by pulling the original “Helvetica” font from my system
files, and making a copy of it. From there I opened it in FontForge, which is a
brilliant open source font editor.



From here, the task was fairly simple. I opened up each “version” of Helvetica
(these being bold, oblique, light etc), randomly went through the capital and
non capital letters and moved them around within their guide grids. This had the
desired effect of ruining their beautifully crafted kerning, as such, creating
“Smelvetica”.

With the fonts completed, the remaining work was to wrap it all up with a nice
web page, and some installation instructions.



The installation ended up being the most devious part of the prank in the end,
since it would install on the system it makes it really difficult for anyone to
understand why everything looks just that little bit wrong.

Edit: Sadly this was subject to a takedown notice, you can see the brief
conversation in the github repository.

➶ Smelvetica source was here


PASSIVE AGGRESSIVE OFFICE SIMULATOR

“Remember everybody, the crisper is for green vegetables only, anything else
found in it will be thrown out at the end of the day.” ~ Passive aggressive
post-it note.

One of the funnier things I found from office life was the small messages that
would blast out to the whole company “There’s a fire drill tomorrow.”, “The
coffee machine on the first floor is broken” etc. Now that I’m working remotely,
in a weird way, I miss them. As such, the passive agressive office simulator
Slackbot was born.



The core of this slackbot is the npm module, slackbots, which honestly made the
whole process a breeze. The bot itself is broken into a few key pieces.

The first piece, is the scheduler, which will take specific actions (namely
sending a passive aggressive message), and give it a time to be shared with
everyone. These are generally within work hours.

The second piece is a “ticker”, which keeps the script checking the time, and
seeing if there is anything that needs to be ran.

The final piece, is of course, the messages themselves. They were all hand
written by me, and also include wildcard variants… so something like the day of
the week, or a piece of stationary (please put the stapler back where you found
it!) could be switched out, to add a small extra dimension of randomness.



Another little piece, which I felt gave it that little bit of extra “officey”
cringe, was follow up messages. If your office is out of ink, you’ll be sure to
get another message when it gets back in!



… 5 days later



Building a slackbot was a fun way to spend a day or two, honestly, the amount of
articles and support docs out there makes it one of those technical, yet quickly
rewarding projects!

➶ Office Simulator source and installation instructions


OBNOXIOUS DOT CSS

Animations for the strong of heart, but weak of mind.

As you’ll know, if you’ve been following my projects for a while, or seen any of
my talks, one of my favorite things to do is find something thats good, in this
case, the increasingly awesome set of CSS api’s for animations, and see what
terrible things can be made from them.

Obnoxious.css is an exploration into what kind of freakishly frustrating things
you can do with CSS animations on the web, the project itself is modeled after
Dan Edens Animate.css.



The key to bad animations is fairly simple really, make them move to much, make
them run to long, make them flash and jitter! All of these terrible components
have been compiled into the Obnoxious.css library!

The crowining glory of these animations, is “fontalicious”, which contains a
devestatingly frustating series of font changes.



I always find that when you explore the way things SHOULDN’T be used, you get a
little bit of appreciation for how good we ultimately have it.

➶ Obnoxious.css website and examples
➶ Obnoxious.css source and instructions


FRIENDS TALK FRONTEND PODCAST

The talented Jag Talon and I talk life, frontend and just generally hang out!

Friends Talk Frontend is an delightful podcast of developers discussing how they
got to where they are now, and what their day-to-day life. In general, its
always a good time!

➶ Have a listen!


ABSTRACT CLOCKS

I recently talked to Electric Object about building something on their platform
for their artists program, this is what I came up with.

When I was looking into what I could do on the Electric Object, the biggest
thing that stood out to me was that not many people were taking advantage of the
fact that it can run a browser, and as such, can display something made
programmatically on the fly, or change with time. Instantly I wanted to do
something with time.

Over the years, I’ve amassed a large collection of clocks and timers on CodePen,
which served as a big inspirational source. The general idea here, is that the
clocks would be abstract and difficult to read, but after spending a week with
them it would be as easy to read as a regular clock, in a sense, the same way
people are able to read time from the sun.

The theme for the clocks came as a combination of the original circular clock
face, but instead using gradients as clock hands. From here, a lot of
experimentation and explorations occured, resulting in the 5 “types” of clock.



You can read about how to understand each clock, on this little web page … some
of them are a little trickier to get a handle on than the others, but ultimately
learnable.

➶ Abstract Clocks Demo’s & Instructions
➶ Abstract Clocks code on Github
➶ Abstract Clocks on Electric Object


OK, GET THIS

EDIT: Sadly, Bumpers.fm shut down, and I ended the project with that. Was fun
though!

Things you probably didn’t know about, in 5 minutes or less!

I recently “bumped” into [bumpers.fm], a cool little app for recording small
audio casts. I figured why not, and so “OK, Get This” was born.

The goal of this “podcast” is to highlight weird and wonderful events,
happenings and coincidences in the world, and then talk about them for 5 minutes
or less.

For example, The Emu Wars in Australia, or the history of tug-o-war fatalities,
yikes!

The individual episodes are also embeddable, which is cool, and make for nice
little sharable snippets.

EDIT: Have moved this project over to Anchor now that bumpers has sadly died.

➶ OK, Get This on Anchor


HUMAN MUSIC

This is earth radio, and now here’s human music.

In season x, episode y of Rick and Morty, there’s a particular scene where Jerry
is listening to the radio in the car, within a simulation of earth running at
5%, as he listens to the music it plays close to the most simplistic audio you
could imagine.

I fired up ole Garage Band and had a go at re-creating it, and a few more
inspired versions.



All up, I made 7 or so “human music” pieces, and wacked them together into an
album for my soundcloud debut!

And of course, any project wouldn’t be complete without a little sharable web
page.

➶ Human Music WebPage
➶ Human Music on SoundCloud


ASCII MORPH

While playing around with ASCII art, I explored animating one image to another.

AsciiMorph is a small JS library designed to transition between two ascii images
for an old website of mine.



The library counts the spaces around the “image” and then systematically
collapses it from the outside inwards.

Rather than just hiding the bordered ascii characters, they are replaced by a
series of slashes and stars, which gives a general collapsing effect.

➶ Ascii Morph on CodePen
➶ Ascii Morph on Github


CONSOLE DOT FROG

Sometimes you find a few hours free in your life, and try to fit a little
project into that.

Console dot frog is perhaps my most important creation to date. No longer shall
I debug with the simple monotony of regular logs… for now, there are frogs.

So, here is a simple explaination. I think its supreme utility speaks for
itself.

// Here is you, logging some logs
console.log("Boring.");


// And here is your output.
Boring.


And here is how console.frog can improve your life.

// Here is happy you, logging some logs
console.frog("Amazing!");


// And here is your output.
          _,-.     ------------
  ,-. ,--'  o ) -(   Amazing!   )
  \(,' '  ,,-'     ------------
 ,-.\-.__,\\_
 \(`--'    `\


Truly life changing.

➶ Console.Frog Webpage & Instructions
➶ Console.Frog source on Github


INSPIRING ONLINE

A project aimed at creating a simple inspirational open source blog, that could
be a launching point for people beginning to look at git/github and contributing
to open source!

This blog was a fun little one to create, the aim of giving myself a simple area
that I can share inspiring and creative work as well as a simple repository that
I could use to help people kick off contributing to open source, either in
person or online.

The design was a fairly simple isotope layout (thanks Dave!), and dark color
scheme… really, the content speaks for itself.



This is the kind of project that grows slowly, but always has a place in my
day-to-day life… fixing bugs/helping new contributors/adding new sites.

On the extra nerdy side, I have a script that I use to add posts from the
command line. This creates the new post file, setting the date, and linking the
image files needed to add a new post. Its not really needed, but means that I
can create a new post without opening the text editor, or manually moving images
around.

Edit: Inspiring Online is now The Indie Web

➶ Inspiring Online website
➶ Inspiring Online source on Github


GITHUB CORNERS

My personal take on the “fork me on GitHub” banners.

For a long time, I have used “fork me on GitHub” banners on my sites and
projects, for the most part because these were regular go-to of most developers.
I decided that I’d like to create something a little more modern and playful,
and as such, this project was born.

Technically speaking this update isn’t really too much of a reach, but is one of
those projects where you can do a little to get a lot.

I moved GitHubs infamous Octocat into the corner, as an SVG, and then seperated
its arm in sketch, so I could add some CSS animations to it.



The animation is added with CSS, which means people can use it if they like, but
its not going to be mandatory. The animation is added by default on hover, which
will allow it to wave.

@keyframes octocat-wave {
  0% {
    transform: rotate(0deg);
  }
  
  20% {
    transform: rotate(-25deg);
  }
  
  40% {
    transform: rotate(10deg);
  }
  
  60% {
   transform: rotate(-25deg);
  }
  
  80% {
    transform: rotate(10deg);
  }
  
  100% {
    transform: rotate(0deg);
  }
}


There are a lot of other advantages to using SVG, over the “original” github
ribbons, one of the biggest is that the colors are totally malliable, you can
change a single CSS property and have it change, rather than having to pull out
and change a whole image (with text).

From here, I built a little site to offer the code, which was made to
deliberately show off some of the colors and options available.



EDIT: There’s some great discussion about how to use CSS blend modes, to blend
the github corners seamlessly with any background, including those that are not
a flat color. Given the future, when blend modes are deeply rooted in the web,
or for people not too worried about much older browsers, this is already an
awesome option!

EDIT 2: Some awesome people have made tools to build your own custom corner.
Ultimately I’ve left this GitHub issue open, just incase I decide to build an
“official” version.

EDIT 3: Honestly seeing these all over the web. Always makes me proud.

➶ GitHub Corners web page (get them here!)
➶ GitHub Corners source on Github


DON'T HATE THE PLAYER, HATE THE GAME

My main talk of 2016, “don’t hate the player, hate the game”, explores being
creative in weird ways, as well as finding motivation in everything.

Honestly some of the most fun I’ve had, crafting a talk. This recording of it,
was at FrontTrends in Poland.

➶ Watch the talk on YouTube.


THE VERSIONING SHOW

The Versioning Show discusses the industry of the web from development to
design, with some of the people making it happen today, and planning where it’s
headed in the next version.

The opening question of the versioning show ask which version of “myself” am I
currently, which is an awesomely unique way of kicking off a podcast.

Its always great when a podcast just flows nice and easy, all credit to Tim and
David there for being awesome hosts.

EDIT: Looks like the audio’s dropped off from this now… can still read the
script though, if you’re a hyper fan!

➶ Have a look


ELEVATOR JS

Elevator music for when you press those “back to top” buttons.

Elevator.js strung out from a small hack-day experiment, while I was working at
tumblr.

The library is fairly simple, but again was a fun learning experience. When you
hit the “back to top” button, it plays music, as though it were an elevator
scrolling to the top.

Technology wise, its all vanilla JavaScript, and a single MP4 audio file. The
trickiest part of this was getting the scroll to act smoothly, for this we
needed to incorporate some easing algorithms.

Naturally, I built a small web page to show it off as well… although you should
probably visit the site to actually see it in action.



The library was built to be able to take in any music file, so its pretty
malliable. In the time the library has been out, I’ve spotted it on a lot of
websites, including one for Google IO.

EDIT: Woah, this got super popular. Now is my most popular open source project.

➶ Elevator.js Webpage
➶ Elevator.js on Github


OVERSCROLL

Every now and then you find some interesting browser quirks that catch your eye,
they’re always worth exploring!

In this instance, I found that if you are tracking the scroll position with an
event listener, when you try to scroll down, beyond the end of the page, or up,
beyond the top of the page, you still get values coming back. Which means the
browser is telling you, the scroll position is in those “overscroll” areas.

Once I found this out, it was a matter of wiring up some functionality to them.
I went with a small easter egg.



And on the top.



EDIT: Looks like of chrome 51, this doesn’t work… leaving us only with safari.

EDIT 2: Chrome 58 has brought this back, woo!

EDIT 3: Chrome 60+ this was taken away again. RIP.

➶ Overscroll site/demo
➶ Overscroll source on GitHub


BLUE SCREEN OF DEATH

In light of how amazing web development tools have become, last week I got to
thinking, what could I do to make development much much harder.

BlueScreenOfDeath.js is a small script you can add to your webpage, that will
catch any error that its thrown, and more or less, make it impossible for you to
debug what was wrong.

When the error is caught, the script strips the page of any elements it may have
had (so we’re down to just an empty body tag). It will replace it with the
classic Blue Screen of Death style.

It will also spam the crap out of your web console, effectively making it
impossible to see what the error was in the first place.



And then, naturally, I couldn’t help myself but create a “bleu” version.



EDIT: I also ended up using this for my 404 page.

➶ Blue Screen of Death
➶ Blue Screen of Death on Github


ZENPEN

A Zen text editor, for maximum writing peace.

ZenPen is a simple text editor, that I built based off the medium editor back in
2013.

As it turns out, building things with the rich text editing api can be a super
frustrating experience, but on the flipped side, building something on top of it
is super rewarding.



ZenPen remains one of my most popular open source projects, it combines a lot of
cool web APIs to bring the product together. It was also a explore designing
something with a minimal interface.

➶ ZenPen
➶ ZenPen source on GitHub


INTENSE IMAGES

Intense Images is a full screen modal built for high definition images.

The Intense Images library came out as part of the Aquatilis project. It allows
you to click on images, and experience them within the full browser window, with
little to no overhead.



You can see it active in the image above, but I really recommend checking out
the live demo, to get the full experience.

➶ Intense Images demo
➶ Intense Images on GitHub


FUN DOT CSS

In this talk, I journey through the badlands of CSS, digging through the strange
nooks and crannies, and showing how the prankster plays..

For this talk, I made my own presentation framework, that more or less exploded
into a big jokey system, complete with star wipes, x-ray mode and motivational
queues.

➶ Watch Fun.CSS on YouTube


PALLETAB

New fonts and colors with every new tab!

Palettab (palette ~ Tab) is a chrome extension built with my wonderful friend
Claudio Guglieri. The thought here, is that every time you open a new tab, you
will be greeted with a beautiful color palette, and a selection of fonts you
haven’t seen yet.



The fonts are all available via Google Fonts, and the colors come from Colour
Lovers. There are thousands of combinations, so its rare that you would
recognize two of the same, even after using it for months.

Of course, we built a small webpage for sharability as well!



To date, the extension has around 30 thousand active users, which feels great.

➶ Palettab Google Extension
➶ Palettab Website
➶ Palettab on Github


THE FINGER

A website that gives people the finger. No tricks here.

A little quick collab with my friend Guy Trefler.



Actually I lied, there are some cool tricks here! I always say you can learn
something even from the most simple projects, and “The Finger” is no exception.

I needed to look into translating between one color and another. I read into
this, and made sure I understood all the math. In the end, used an answer from
Stack Overflow (because why re-invent the wheel), but at the same time, its
always important to understand what you’re putting into your site, especially if
you’re copy pasting.

EDIT: I also recieved an awesome pull request, allowing you to tilt your phone,
to effect the ammount of finger the page is giving. Check it out on your phone.

➶ The Finger
➶ The Finger on Github


DOM ANIMATOR

A small library for console based easter eggs.

When I’m building websites, I like to put in easter eggs here and there. For the
most part, I get personal enjoyment out of it, although I guess its a weird way
of procrastination.

DOM animator animates a small ASCII image within the code of the page, which
will be visible when someone is inspecting the source. Great for getting the
attention of developers, or for overall fun.

➶ DOM Animator
➶ DOM Animator on GitHub


AQUATILIS

Aquatilis was the kind of project that comes along once in a blue moon.
Beautiful photography, russian dive team, oceanic adventure… how could anyone
turn it down!

The Aquatilis expedition website was a project undertaken by a friend of mine,
Tobias, and myself. Entailing the goals and ambitions of an experienced dive
team… in their own words.

> Our custom-built expedition yacht Aquatilis, will carry us through the world’s
> oceans for three years. The places we sail to will take our breath away with
> their beauty, or with their danger. The use of the most cutting-edge
> technology will give us the opportunity to scrutinize gelata in their natural
> glory. Our experiences will be broadcast all over the world, encouraging
> everyone to embark on their own journey of discovery.

The goal of the website was to be visually captivating, yet still get across the
message and goals of the expedition.



The photography was so vivid, that it really pushed along the art direction in
an incredible way.



There are several pieces of this website, that I found particularly enjoyable to
build, and that find a nice way of having a powerful impact, while being subtle
and clean.



When building this, the pieces that I felt could be abstracted, and shared with
the world, I did! These include intense images, a library to show a clean full
screen modal.

Also, if you look very closely on the website, you can see small things swimming
around, as though they were in the ocean. You can check that out, on CodePen.

You can look at some of the original designs, and mood boards here.

➶ Aquatilis


SHOPTALK SHOW

Talking shop with Dave Rupert and Chris Coyier.

Shoptalk Show is one of those super well established podcasts, with a great
history of speakers. Was fantastic to be a part of it.

Its sometimes really nice to sit back and reflect on the journey that you’ve
taken to get to where you are today.

Edit: Also, who would have known, a year or so later, and Chris is my boss at
CodePen.

➶ Listen to the full podcast


THE USELESS WEB

Take me to a useless website!

While I was stuck indoors during hurricane Sandy, in 2015, I went down a strange
rabbit hole of weird websites. Some of them didn’t seem like they should exist
at all, and some (like eelslap) were incredibly perplexing.

I gathered as many of these sites as I could, and put them all into a small
website, which I called The Useless Web.



It was through this simplicity that the website gained popularity, hundreds of
thousand visitors a month!

➶ The Useless Web


MEET THE IPSUMS

A website to collect and display all the wonderful filler text generators in the
world.

Meet The Ipsums was built over a week or so, with the designs and direction
coming from good friend, and awesome designer Claudio Guglieri.



I’ve always been a collector, this website showcases filler text. It turns out
there’s alot of them… Cat ipsum, coffee ipsum, Ryan Gosling ipsum… the list goes
on!



Its always a fun time building things with friends, but then also opening up the
website for submissions via GitHub.

➶ Meet the Ipsums
➶ Meet the Ipsums source on GitHub


GIFLINKS

Punch people in the face with your hover effects.

Giflinks is a jokey exploration into just how intense we can get hover
interactions going.

Caused a bit of a stir when it came out, but for the most part, people realized
it was a joke. Check if out for yourself if you are a fun happy person.

➶ Giflinks
➶ Giflinks on GitHub


PASSIVE AGGRESSIVE PASSWORD MACHINE

Imagine your in-laws are helping you with a password… this is what they’d say.

I always irk a little inside, when a machine tells me something that I’ve done
is wrong. The most common form of that, is probably passwords. “Your password is
too weak”, “Your password needs to contain a number and a special character”.

While I absolutely understand why they need to be this way (they’re looking out
for us!) … that said, its the jarring interaction that I wanted to focus on.
What if they said meaner and meaner things. Thats what this website is all
about.



This was done in collab with a new friend of mine, Tobias, who worked with me on
the designs and interactions.

➶ Passive Aggressive Password Machine


HAVING FUN WITH JS

This talk explores some of my JS creations, and how I find lessons in everything
that I make.

This recording was at Empire.JS, an amazingly welcoming conference, that was a
joy to present at!

➶ Fun With JS on YouTube


TEXTER

Draw with text!

Texter is a small experiment, where I moved a Flash project from a book, over to
JavaScript… it really helped me focus on the language, rather than what I was
making. Comparing how Flash rendered items, to how the JS canvas does it.



You can see a small pic above, but I really recommend checking out the live
demo. There’s a link to the source below too… some cool stuff in there about the
speed of mouse movement, and angles of direction.

➶ Play with Texter
➶ Texter source in GitHub


DISCREET TWITTER UI

A small experiment into hiding tweet and facebook buttons, until they’re truly
needed.

I’ve never been too crazy about social media, but there’s no denying that having
a Facebook or Twitter button on your site can be a nice little boost.

These buttons are the result of a small experimentation, checking to see if I
could hide them discreetly, but still have them active and available on the page
if someone wanted them.



The idea generally was to show a small icon, and then reveal the actual twitter
button.



There are so many different ways this could be taken.



➶ Play with the Demo
➶ Check the source on GitHub


GENERATIVE BOIDS

A small experiment in combining flocking algorithms with line art.

In this experiment, I combined some flocking algorithms I found online, with
some open source “brushes”, borrowed from this cool drawing project

The brushes work by saving single coordinates on the canvas, and then cross
checking themselves with every other stored coordinate… they then apply
different behaviours based on their proximity to the others.

Clicking on the screen with change the “brush”, as well as some of the
properties of the flocking logic… this means the possible outcomes are pretty
much endless.







I really love these clean canvas experiments. Somehow finishing them up feels
like I’ve made something “complete”.

➶ Generative Boids


CONCENTRICS & RASTERIZER

Experimenting with Image data in the canvas. There’s always fun to be had!

This is one of my earliest experiments (of course writing this from the future),
that said there were a lot of great things to learn.

The canvas is (was) fresh to the web, and there was (still is!) a lot of
experimenting to do. In these experiments I am loading image data in and
checking it in the format of a grid (which color is this pixel, 10 pixels from
the top and left, 20 pixels from the top and left, 30 pixels etc)

From that data, I decide certain things, “how dark is this”, or “what color is
this” and then made different renderings from that information.



The custom controls here are using DAT.GUI, which is a great utility to use when
building projects that have lots of workable variables.



I’ve added both of these projects to CodePen, where you can play with, and edit
the source.

➶ Concentrics & Concentrics source on Github
➶ Rasterizer & Rasterizer source on Github


WOAH, YOU GOT TO THE END

Hi there! Thanks for checking everything out, if you have any questions (at
all), please shoot me at ~ timothy [dot] w [dot] holman [at] gmail [dot] com



I don't know what you expected.