Get Nostalgic with the Oregon Trail running in this Mac OS8 simulation
Wow, what does it run?
Wow, what does it run?
Have you been coding in easy mode? Well, now its time to flip into the upside-down, where your indents are backward and nothing makes sense.Oh dear...
If you’ve got an interest in data visualization on the web, it’s hard to look past Shirley Wu’s fantastic work. Now you can follow along via video as she goes through her entire workflow from beginning to end.Tell me more...
GitHub has released a new feature allowing people to display a readme markdown file on their profile, while it seems like a small feature at first, people are turning this simple readme into some incredibly creative and funny profiles!How do I make my own?
I know its there to catch the bugs, but nope, nope nope.
The self-proclaimed buggiest site on the web really takes the cake with this scary console-based beast (use
CMD + OPT + I on Mac, or
CTRL + SHIFT + I on Windows to open the console!)
Ever wondered what your branches, merges & commits would look like in the third dimension, well now you can find out.How do I make it work?
Has anyone ever stopped you on the street to show you their vim setup? Well, now you have the perfect reply with vim cubed.
Vim Cubed will bring your code editing into the 3rd dimension, literally in the form of a spinning cube. As the cube spins infinitely, your editor works with all the gusto and power that vim can provide.Any extra details?
Debugging tools are better than ever, but some things still remain hidden to the un-observant eye… this small script is a delightful way to hear what webpages are doing behind the scenes.
The script is activated by pasting it into your console (not always the best idea, if you can’t understand all the code). Here’s a quick video of it in action:
The simplicity of the script, is based in both the power of the Web Audio API and the Mutation Observer API.
So how does this work? Lets break it down!Explain it to me
Last week I completed a small weekend project called Always Judge a Book by its Cover. Rather write about it, I thought it would be fun to go over some of the neater pieces of tech that have gone into it and break them down into small examples.
The first, and perhaps the most obvious, is the goop effect that sits on the header and in between each of the books (alternating from white to a light grey). This is created using JS and a
canvas element. (Although CSS Houdini could be a good option in the future.)
You can have a look at the code above… Ultimately, it’s a fairly simple effect that definitely looks a little more complex than its actual code.
The second little flair, which was a fun one to make, is the 3D CSS book.
The book gets its 3D effect from the CSS transform property. I used the
transform-style: preserve-3d; property to really give it that semi-realistic feel. The pages are just divs with box shadows and rounded corners. And then to top it all off, an image of the cover is used on the front and back.
padding-top stops the image from jumping as it loads. There are lots of thoughts on how to patch up this annoying part of loading images on the web, but I chose to stick with this old faithful method.