Using JavaScript the seed attribute of the turbulence filter gets randomised at a given interval. Along with the scale transform, the heat shimmer effect is achieved.
-
Recent Posts
Archives
Categories
Meta
SVG Heat Shimmer Effect
Flow – A static type checker for JavaScript
Flow is a static type checker for JavaScript. With it, you can add types to any existing JS code.
Without flow:
function foo(x, y) {
return x.length * y;
}With flow:
// @flow
function foo(x: string, y: number): number {
return x.length * y;
}When passing in a Number for the value of x, Flow will spit out an error.
Even without annotations, Flow can notify you of wrong types. The snippet below for example – where one passes in a String into the function, where it should obviously be a Number – will also make flow spit out an error:
// @flow
function foo(x) {
return x * 10;
}
foo('Hello, world!');How does Flow notice it?
Flow uses type inference to find bugs even without type annotations. It precisely tracks the types of variables as they flow through your program.
Flow checks all JavaScript files that contain the // @flow comment. You can also use // @flow weak to make Flow run in weak mode. This mode is handy when starting to use Flow in an existing project:
In regular mode Flow will infer types for all missing annotations, and produce errors whenever it detects a mismatch. In weak mode, Flow will do much less type inference. It will still infer types within functions, but will otherwise treat unannotated variables as having the any type – meaning no typechecking happens on them.
You can run Flow yourself, or you can integrate it into your existing build script. For use with Babel – since types are not part of the JavaScript specification – you need the transform-flow-strip-types plugin to strip out the type annotations.
npm i babel-plugin-transform-flow-strip-types --save-devDon’t forget to update your .babelrc file to include the transform-flow-strip-types plugin.
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-flow-strip-types"]
}Using a .flowconfig file (yes, that’s another dotfile in your project root :-P) you can configure Flow to include certain files/directories, ignore certain files/directories, make it play nice with external libraries (using interface files), and set it’s options. Having glanced at some projects that use Flow, I’ve found these options to be common:
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enableBootstrapping a React project
If you’re looking for an entry point into React, the Auth0 blog has a really good post on getting you started:
Setting up a React application requires a lot. Learn how to bootstrap a React project without complexities!
Keystroke Recognition Using WiFi Signals
We’re all doomed:
In this paper, we propose a WiFi signal based keystroke recognition system called WiKey. WiKey consists of two Commercial Off-The-Shelf (COTS) WiFi devices, a sender (such as a router) and a receiver (such as a laptop). The sender continuously emits signals and the receiver continuously receives signals. When a human subject types on a keyboard, WiKey recognizes the typed keys based on how the CSI values at the WiFi signal receiver end.
Obviously that must not be accurate at all, right? Erm, wrong:
WiKey achieves more than 97.5% detection rate for detecting the keystroke and 96.4% recognition accuracy for classifying single keys. In real-world experiments, WiKey can recognize keystrokes in a continuously typed sentence with an accuracy of 93.5%.
Using Feature Queries in CSS
There’s a good introduction to @supports on Mozilla Hacks:
With
@supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.
Progressive enhancement in it’s finest form:
// fallback code for older browsers
@supports (display: grid) {
// code for newer browsers
// including overrides of the code above, if needed
}But can we use it?
Feature Queries have been around since mid–2013. With the imminent release of Safari 10, I believe it’s past time for us to add @supports to our toolbox.
Pure CSS Twitter Heart Animation
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 the Twitter Heart Animation (with One Element, No Images, and No JavaScript) →
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 work. Right?
The result is one impressive, and good looking, map:
Mapping Brooklyn (detail above) was the hardest part:
Brooklyn’s street layout requires the need for a incremental angle grid. This influenced how the rest of the city would be laid out. I started out using 45/90 angles. I found this to be too rigid to accurately display the entire city.
[…]
I ended landing on a 22.5/45/90 degrees. 22.5 is the magic number that made this project work. It afforded the right subsect of minor angled lines at 22.5/67.5/112.5 degrees. This kept the map looking neat enough.
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 you want.
Interesting to see how they made their Advanced Search more Simple.
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 (true, nil)
}
// …
}// JavaScript
<-- orig source: /Pods/WebViewBridge.Swift/Sources/bridge.js -->
<script src="bridge.js"></script>
<script>
ZHBridge.Core.ready(function() {
ZHBridge.Core.callNativeHandler('Video.Play');
});
</script>
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 units (or how are they called?) into their single parts:
[...'👨👩👧👦'] // ["👨", "", "👩", "", "👧", "", "👦"] -
Combining Emoji is also possible:
["👨", "", "👩", "", "👧"].reduce((prev, curr) => prev + curr) // "👨👩👧" -
And oh, you can even replace single emoji within emoji units, yielding a new emoji unit:
'👩👩👦'.replace(/👩/g, '👨') // "👨👨👦" -
This kind of sorcery also works with skin tone modifiers by the way:
[...'🛀🏾'] // ["🛀", "🏾"] ["🛀", "🏾"].reduce((prev, curr) => prev + curr) // "🛀🏾" '🛀🏾'.replace("🏾", "") // "🛀"
Geekfun! 🌈