Generate code screenshots straight from within Visual Studio Code with Polacode

Remember those really nice screenshots of code, generated with Carbon? Polacode is an extension for Visual Studio Code that offers (somewhat) the same functionality directly inside the IDE. Polacode – Polaroid for your Code →

Ordering tabular data with only CSS thanks to CSS Variables

Neat experiment by Roman Komarov in which he orders tabular data using just HTML/CSS, thanks to the use of CSS Custom Properties (CSS Variables): Each cell of each row is given a specific value to sort on. <tr class="table-row" style=" –order-by-published: 161221; –order-by-views: 2431; "> <th class="table-cell"> <a href="http://kizu.ru/en/fun/controlling-the-specificity/">Controlling the Specificity</a> </th> <td class="table-cell">2016-12-21</td> <td …

PWAs are coming to iOS 11.3: Cupertino, we have a problem

Recently it was announced that iOS 11.3 and macOS 10.13.4 will include Service Workers, opening up the way for PWAs on iOS (and potentially macOS too, following lead of Microsoft here). ☝️ If you don’t want to download the macOS 10.13.4 beta you can alternatively download Safari Technology Preview (> 48) for use with your …

React Native Snoopy, a profiling tool for React Native

The React Native bridge is the hub where communication between the Javascript and the Native world happen. Optimizing and catching unexpected (bad) communications can make or break your performance. Being that central and sensitive place, it made sense to have tooling built around it. Snoopy is a profiling tool for React Native, that lets you …

Counting With CSS Counters and CSS Grid

Thanks to Counting With CSS Counters and CSS Grid my attention was directed to this fact comes to using CSS Counters: The effectiveness of counter() wanes when we realize that an element displaying the total count can only appear after all the elements to be counted in the source code. This is because the browser …

WTFJS with Math (or why 0.1 + 0.2 results in 0.30000000000000004)

A few fun little Math-related wtfjs examples. A classic one is adding an empty Array and an empty Object: [] + {} // ‘[object Object]’ {} + [] // 0 If you’re looking for a hint: Coercion. JS WTF with Math →0.30000000000000004.com →

Everything Easy is Hard Again

Frank Chimero was out of the loop for 3 years when it comes to developing websites. Coming back he was put off by the complexity of how things have gotten. Take layouting for example, where we went from tables to floats to flexbox to grid layout. [With Grid Layout] I’m reminded of the table layouts …

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> …

Create a timelapse of your web development with tlapse

This one’s quite fun: tlapse is a tiny utility that takes periodic screenshots of your site while you develop. Combine all generated screenshots and you can get a sequence like this: The interval to take screenshots is configurable, and duplicates are omitted. tlapse –every 60s –directory ./screens — localhost:3000 tlapse – Create a timelapse of …

Extended Validation Is Broken

https://stripe.ian.sh/ is an interesting site by Ian Carroll. See it? Take a closer look at the certificate. Yes, that’s one for “Stripe, Inc” … but, that’s not “Stripe, Inc” is it? This site uses an EV certificate for “Stripe, Inc”, that was legitimately issued by Comodo. However, when you hear “Stripe, Inc”, you are probably …