Ana Tudor has recreated the Twitter Heart Animation in pure CSS: See the Pen no sprite, no JS heart animation – click it! by Ana Tudor (@thebabydino) on CodePen. Easy to follow step-by-step instructions in the original post. The most surprising part – to me – is that the particles are rendered using box-shadow. Recreating …
Author Archives: Bramus!
Mapping NYC Transit. All of it.
Anthony Denaro: Looking at The Subway Map the thought hit me: If I can transfer to the bus for free, why isn’t there a map that shows where to connect with buses? Why does the system map only show subways? […] The whole system of buses and subways could fit on one map. It could …
Death to Complexity: Advanced Search at Spokeo
Considering the nature of people search, filtering by parameters other than first and last name is crucial. ‘John Smith’ doesn’t really help you find who you’re looking for, but a 36 year old John Smith in Pasadena, CA, related to a Susan is damn specific, and will inform you quickly if we have the data …
Continue reading “Death to Complexity: Advanced Search at Spokeo”
WebViewBridge.Swift
Like JockeyJS, written in Swift, and with support for WKWebView: A bridge for WebView(UIWebView, WKWebView), using JavaScriptCore, handles communications between native(Swift) and js. Example usage (call native function from JS): // XCode override func viewDidLoad() { // … let webView = WKWebView() let bridge = ZHWebViewBridge.bridge(webview) bridge.registerHandler(“Video.Play”) { (args:[AnyObject]) -> (Bool, [AnyObject]?) in self.player.play() return …
Fun with JavaScript and Emoji
Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji: It’s possible to spread emoji sequences into their single parts: […’👨👩👧👦’] // [“👨”, “”, “👩”, “”, “👧”, “”, “👦”] Combining Emoji is also possible: [“👨”, “”, “👩”, “”, “👧”].reduce((prev, curr) => prev + curr) // “👨👩👧” And oh, you can …
bezier-easing – cubic-bezier implementation for your JavaScript animation easings
bezier-easing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, …any other custom curve) exactly like in CSS Transitions. Pass in the 4 points of the bezier curve of your liking – just like you’d use when defining a CSS Transition Timing Function using cubic-bezier() – and then project x, ranging from …
Continue reading “bezier-easing – cubic-bezier implementation for your JavaScript animation easings”
500px labs: Splash
webpack-dashboard – A CLI dashboard for your webpack dev server
webpack-dashboard is a webpack plugin that changes the noisy CLI output from this … … into that: Now when you run your dev server, you basically work at NASA Awesome stuff! Installation possible via npm: npm install webpack-dashboard –save-dev webpack-dashboard – A CLI dashboard for your webpack dev server →
Chrome “Go Back With Backspace” Extension
With the release of Chrome 52, the backspace button no longer navigates back when pressing it. Highly annoying, because the navigating back with the backspace button is just very, very handy (it only requires one finger/hand!). “Go Back With Backspace” is the official Google released Chrome Extension that restores this behavior (other – non-Google developed …
Continue reading “Chrome “Go Back With Backspace” Extension”
react-music — Make beats with React!
The past few days Ken Wheeler has been tweeting some sneak peeks of what he’s been up to, after having heard that Akai was discontinuing its standalone hardware MPC drum machine offering: I did what any geek that writes React code all day long would do: I wrote a library so that I can make …