Stay up to date with the latest UI techniques for web and mobile
A guide to visual aesthetics, written by a nerd.
1. Light comes from the sky (see Part 1)
2. Black and white first (see Part 1)
3. Double your whitespace (see Part 1)
4. Learn the methods of overlaying text on images
5. Make text pop– and un-pop
6. Only use good fonts
7. Steal like an artist
Read more from the source: Medium
This interactive social simulation using canvas will get you thinking
This is a story of how harmless choices can make a harmful world.
These little cuties are 50% Triangles, 50% Squares, and 100% slightly shapist. But only slightly! In fact, every polygon prefers being in a diverse crowd.
You can only move them if they’re unhappy with their immediate neighborhood. Once they’re OK where they are, you can’t move them until they’re unhappy with their neighbors again. They’ve got one, simple rule:
“I wanna move if less than 1/3 of my neighbors are like me.”
Try it outat Parable of the Polygons
Handle DOM events as streams and keep your apps functional
Check it out at baconjs.github.io
Before you dive into Angular for your big app, research best practices, and, in this case, those who ditched Angular
My verdict is: Angular.js is “good enough” for majority of projects, but it is not good enough for professional web app development.
When I say “professional web app” I mean the app, which is maintainable in a long run, performant in all reasonably modern browsers, has a smooth UX and is mobile-friendly.
Professionaly-done web app is not a simple artifact, solving some problem. This is a usable product, which is pleasant to use.
Read full article at fse.guru
Try out the animation demos for Velocity.js and you’ll immediately see why it is better than jQuery animate
Download Velocity, include it on your page, and replace all instances of jQuery’s $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile.
The Secret Sauce. Although Velocity works alongside jQuery, it uses its own animation stack that delivers its performance through two underlying principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize DOM querying.
Read more at julian.com
Firefox creates bridges to use the Firefox Dev Tools on other browsers and even mobile devices. Will it become your new workflow?
From Mozilla’s Blog:
We decided to unleash our developer tools team on the entire browser to see how we could make your lives easier.
We’ve redesigned the browser by looking at it through a completely new filter to put developers’ interests first. It’s built by developers for developers so you can debug the whole Web, allowing you to more easily build awesome Web experiences. It also integrates some powerful new tools like WebIDE and the Firefox Tools Adapter.
Soon, we’re going to bring you more, a lot more, in a package that you deserve as a builder for an independent Web.
Get ready to spread the word (#Fx10) or sign up for our Hacks newsletter here to be emailed as soon as the browser is available.
Read more from the source: The Mozilla Blog