The last issue started with a classic game created solely with HTML & CSS. This issue starts with another classic game, but this time with just a sprinkling of JS.
A robotic butler (dubbed a Botlr) has started work at the Aloft hotel in Cupertino, California.
How long, do you think, until they start grumbling about lousy tips??
Humin is a phone app, on steroids! (Skip to the 4th paragraph, where the author starts talking about the actual app.) Humin automatically adds where & when you added contacts so you can later find them by searching for things like “met in New York last summer”; it “even does some clever work finding a photo for each of your friends, their work experience, when your next meeting with that person is, and even which friends you have in common.” Worth checking out!
Lots of developers use Git. At work. But how many use it home, for personal projects? I know I don’t. Setting up and managing your own version is not always easy. But Bitbucket might be the way around it!
I was not previously familiar with Heydon Pickering, but this video of his Effortless Style presentation from CSS Day is not only pretty entertaining, but suggests several CSS tips to allow editors to just write, and have their content just look good… (He really gets into the gist of the topic at about 6:40, but those first 6:40 do a really good job of setting the stage for his suggestions.)
And if you like that CSS thing, here are all the videos I could find from that conference:
- Peter-Paul Koch: “viewports”
- David Baron: “animations”
- Tab Atkins: “layout”
- Ethan Marcotte: “responsive design”
- Ana Tudor: “3d transforms”
- Mathias Bynens: “fun facts”
Christian Heilmann offers a new tool for creating all the various icons you need with just a simple drag-and-drop and a button click. Handy!
Sticking with Christian for another tool, this one is called Make Thumbnails, and it does just that! Though, only a single crop at a time, you can customize the size, and since the whole thing is available for download, you could probably configure a set of crop sizes and have it return the lot.
smoothState.js lets you add really cool page transitions to your site, so users don’t have to deal with that flash of white page until your actual content starts appearing. The animated GIFs in the above demo are good, but the actual smoothState.js site is an even better demo of the transition effects.
And speaking of CSS animation, once your page has elegantly loaded, here are 22 CSS3 animations that will hopefully inspire you, or at least give you something to rip-off… ;-)
It seems to me that position: sticky is really what most people have wanted position: fixed to do all along… And while browser support isn’t very good yet, this SitePoint article shows how to implement it natively, test for support, and apply a polyfill when needed.
Sticking with SitePoint for a moment, Craig Buckler shows 5 uses for a vertical media query. Good tips!
How well do you know your favicon? I’ll bet not well enough to get the correct answer for every question on this favicon quiz from Chris Coyier…
How do you get your sites to load faster? Download them before the user asks for them, that’s how!
If you’re a WordPress user, and want to get some insight into your server’s current status, this tutsplus tutorial will show you how to create a Server Dashboard with 9 widgets to keep an eye on things!
The good folks from appendTo, like many of us I imagine, got annoyed with the responsive framework options that are bloated, overbearing, and require a ton of overrides to customize, so they built their own:
BareKit is a super minimal, open source, responsive framework. Unlike most frameworks, it comes with zero “styling”. It uses CSS, but only for positioning and display properties.
And with a total CSS weight of 10kb and JS weight of 7kb, it is easily worth a shot, to see if it can do all you need.
The 11 most exciting open source projects on the web. (Interestingly, the URL says 10, guess they found one more just before publishing?) Most you already know, maybe one or two might not really be “exciting”, but hopefully you find something new and interesting.
My wife recently downloaded a new iPhone app, Photo Sphere Camera,
by Google, that let’s you take and stitch together 360-degree photos, for a very cool image. Unfortunately, the only thing you can then do with that image is upload it to Google Maps (I guess how else would you look at a 360-degree photo?), and unfortunately you will look like a complete dork taking all those photos, but what you get is actually very cool.
Waves is a cool CSS click effect for a, button, or input elements. Minified CSS and JS are each around just 3kb.
Minuum is “[t]he little keyboard for big fingers” that uses a “revolutionary auto-correct” so you can “worry less about typing”… I’ve seen a lot of variations of keyboards and typing, but I just don’t know if I could do it… Could you?
And finally, ever thought about lying in a hammock listening to waves crashing on the beach while you’re coding? Then check-out Nomad List: the best cities to live and work remotely. :-)
Happy reading,
Atg