eldh

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div

rsms

Fixing macOS 10.14, 10.15, 12

Dark main menu without the rest of dark mode

1. Set Light mode
2. defaults write -g NSRequiresAquaSystemAppearance -bool Yes
3. Log out and log back in
4. Set Dark mode

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

chriseppstein

@mixin default-arg($s: &) {
  default-arg: inspect($s);
}

@mixin defaulted-in-body($s: null) {
  $s: & !default;
  defaulted-in-body: inspect($s);
}

output {

pascalduez

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// SassyBitwise (v1.1.1)
// ----

@import "SassyBitwise";


// Gray code (reflected binary code) convertion in Sass.

pascalduez

SaßySon

Collecting my Sass snippets.

• Prime number. [ test ]
• JS String.prototype.split(). [ test ]
• Caesar cipher in Sass. [ test ]

bastianallgeier

<?php

/**
 * Instructions:
 *
 * 1. Put this into the document root of your Kirby site
 * 2. Make sure to setup the base url for your site correctly
 * 3. Run this script with `php statify.php` or open it in your browser
 * 4. Upload all files and folders from static to your server
 * 5. Test your site

chriseppstein

module Sass::Script::Functions
  def file_exists(path)
    return bool(false) unless options[:filename] # not all sass has a file name (e.g. std input)
    current_directory = File.dirname(options[:filename]) rescue nil # a sass filename from an importer may not be processable by File.dirname
    return bool(false) unless current_directory && File.exist?(current_directory) # not all sass files are served from the filesystem
    full_path = File.expand_path(path.value, current_directory) # a relative path will be expanded against the current_directory of the sass file, symlinks will be followed, absolute paths will be left alone.
    return bool(File.exist?(full_path))
  end
end

sergejmueller

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

• http://www.fontsquirrel.com/tools/webfont-generator

jlong

// Brightness math based on:
//   http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

@function brightness($color) {
  // Extract color components