react-fns – Browser APIs turned into declarative React components and HOCs

react-fns is a collection of imperative Browser API’s turned into declarative React components and higher-order components for lots of common situations. The <Network /> component for example is a wrapper around the Network Information API. import { Network } from 'react-fns'; const Example = () => ( <Network render={({ online, offlineAt }) => ( <div> …

ESNext: JavaScript “Nullish Coalescing Operator”

UPDATE December 2019: This feature has now advanced to Stage-4 and will be part of the ES2020 Specification! 🎉 One of my favorite ECMAScript Proposals is the “Optional Chaining Operator”. Another proposal that forms great duo with it is the “Nullish Coalescing Operator” (sometimes also referred to as “Nullary Coalescing Operator”). Both proposals still are …

Fly and Control a Drone Using JavaScript

Whilst the video is only a sneak peek of a Code School tutorial, you can puzzle the pieces together yourself. The key part is the rolling-spider Node package which uses Bluetooth to communicate with the drone. var RollingSpider = require(‘rolling-spider’); var temporal = require(‘temporal’); var rollingSpider = new RollingSpider({ uuid: ‘Mambo_434915’ }); rollingSpider.connect(function() { rollingSpider.setup(function() …

Lazy Loading images with IntersectionObserver

Smashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded …

urql – A Universal React Query Library

Ken Wheeler: There are some amazing solutions in the space already, notably Relay and Apollo, both of which are incredibly full-featured, brilliantly engineered, and wonderfully flexible. That said, these libraries might feel like a bit much to get started with at times, especially for beginners. Our goal with urql is to simplify the process of …

JavaScript: What’s new in ECMAScript 2018 (ES2018)?

👋 This post also got published on Medium. If you like it, please give it some love a clap over there. At the latest TC39 meeting the new features that will make it into the “ECMAScript® 2018 Language Specification” (ES2018) have been selected. All proposals that have reached stage-4 since the consolidation of ES2017 got …

ResizeObserver now available in Chrome

Chrome 64 includes ResizeObserver: ResizeObserver notifies you whenever an element’s size changes, and provides the new height and width of the element, reducing the risk of layout thrashing. To use it create a new instance of it, and then make it observe one or more elements: var ro = new ResizeObserver(entries => { for (let …

Can (a ==1 && a== 2 && a==3) ever evaluate to true?

Is it ever possible that (a ==1 && a== 2 && a==3) could evaluate to true, in JavaScript? This is interview question asked by a major tech company. My answer was that it’s impossible. They said nothing is impossible. It happened 2 weeks back, but I’m still trying to find the answer. I know we …

JavaScript: Remove a property from an object immutably by destructuring it

Say you have a JavaScript object like this: const user = { firstName: ‘Bramus’, lastName: ‘Van Damme’, twitter: ‘bramus’, city: ‘Vinkt’, email: ‘[email protected]’, }; And now say you want to create a copy of the whole object, containing all properties except for the email property. # The oldskool way: The first idea that came to …

Stealing Usernames, Passwords, and other (Personal) Data via Browsers and NPM Packages

👋 This post also got published on Medium. If you like it, please give it some love a clap over there. Late 2016, Stoyan Stefanov published “Oversharing with the browser’s autofill”. It’s an article on stealing personal data using the browsers their form autofill feature. The attack works by leveraging abusing the fact that autocompletion …