threepointone

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

ianks

CREATE EXTENSION IF NOT EXISTS "unaccent";

CREATE OR REPLACE FUNCTION slugify("value" TEXT)
RETURNS TEXT AS $$
  -- removes accents (diacritic signs) from a given string --
  WITH "unaccented" AS (
    SELECT unaccent("value") AS "value"
  ),
  -- lowercases the string
  "lowercase" AS (

bendc

var supportsES6 = function() {
  try {
    new Function("(a = 0) => a");
    return true;
  }
  catch (err) {
    return false;
  }
}();

bastianallgeier

Kirby + Patterns = <3

When I heard about Brad Frost's Patternlab for the first time at beyond tellerrand I was intrigued. The idea of splitting your design work for a website into simple modules or patterns isn't new and starts to become more and more of a standard. But organizing this into a very visual styleguide/patternlab seemed to make so much sense. Brad also introduced a very interesting approach with his separation of modules into categories, such as atoms, molecules and organisms.

I started porting Brad's patternlab app to Kirby, but it never really made it to something polished and it turned out for me after using it for Kirby's panel UI, that it's actually a pain in the ass to maintain such a pattern collection.

The problem of patternlab

The problem with such a styleguide or patternlab is that it exists next to the real thing. When you change something in your code base you also have to update the particular code for the pattern in patternlab. To be honest I went very quickly from being

kevinelliott

Mac OS X 10.11 El Capitan

Custom recipe to get OS X 10.11 El Capitan running from scratch, setup applications and developer environment. This is very similar (and currently mostly the same) as my 10.10 Yosemite setup recipe (as found on this gist https://gist.github.com/kevinelliott/0726211d17020a6abc1f). Note that I expect this to change significantly as I install El Capitan several times.

I use this gist to keep track of the important software and steps required to have a functioning system after a semi-annual fresh install. On average, I reinstall each computer from scratch every 6 months, and I do not perform upgrades between distros.

This keeps the system performing at top speeds, clean of trojans, spyware, and ensures that I maintain good organizational practices for my content and backups. I highly recommend this.

You are encouraged to fork this and modify it to your heart's content to match your own needs.

SleepWalker

var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

var gesuredZone = document.getElementById('gesuredZone');

gesuredZone.addEventListener('touchstart', function(event) {
    touchstartX = event.screenX;
    touchstartY = event.screenY;

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

bendc

const toRGB = (() => {
  const expand = hex =>
    hex.length < 7 ? hex.split("").reduce((a, b) => a + b + b) : hex;
  const convert = hex =>
    hex.match(/[\d\w]{2}/g).map(val => parseInt(val, 16));
  return hex => {
    const [r, g, b] = convert(expand(hex));
    return `rgb(${r}, ${g}, ${b})`;
  };
})();

bastianallgeier

<?php

/**
 * Simple helper to fetch the bounding boxes
 * for a point on the map (lat,lng) by radius. 
 * 
 * @param double $lat Latitude
 * @param double $lng Longitude
 * @param int $radius Radius in km
 * @return array

bastianallgeier

<?php

c::set('thumbs.destination', function($thumb) {

  $page     = $thumb->source->page();
  $filename = $thumb->source->name() . '-' . $thumb->settingsIdentifier() . '.' . $thumb->source->extension();
  $root     = $thumb->options['root'] . DS . str_replace('/', DS, $page->uri()) . DS . $filename;
  $url      = $thumb->options['url'] . '/' . $page->uri() . '/' . $filename;

  // create the directory