larodiel

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: [
        'Montserrat:400,700',
        'Raleway:100,200,300,400,500,600',
        'Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic'
      ]
    }

xem

Conventions

• A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
• lengths are in any unit (ex: pixels)
• code snippets are in JavaScript

Degrees to radians

angleRad = angleDeg * Math.PI / 180;

luruke

/*
 https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/
 
 You can copy paste this code in your console on smashingmagazine.com
 in order to have cross-fade transition when change page.
 */

var cache = {};
function loadPage(url) {
  if (cache[url]) {

basham

CSS Media Queries: Best Practices

• Media queries have many features, but min-width is the most practical one, the one you should assume to use most of the time.
• Only use em within media query definitions, never pixels.
• Until there's wider rem support within media query, rem should be avoided in media query definitions as well.
• Assuming mobile is 320px and the body font size is 16px, then the breakpoint indicating mobile width in profile orientation would be 20em (320/16).
• Choose breakpoint values to serve the content, not to serve device deminsions.
• Never use media queries to define styles for the smallest viewport size.
• Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) vi

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

johnfoderaro

function binaryConvert() {
  var num = x;
  
  if (num != Math.floor(num)) {
    console.log("Please enter a number");
    
  } else if (num < 0) {
    console.log("Please enter a positive number");
  
  } else {

seavor

@function vunit($input, $width, $height){
  @if unit($width) != px or unit($height) != px {
    @error "function vunit() dimensions should contain a px unit. +[" + $width + ", " + $height +"]";
  }
  
  // Store $input unit 
  $unit: unit($input);
  // Remove unit from $input and convert to ratio
  $ratio: $input / ($input * 0 + 1) / 100;
  // Calc and store return values

wwwtyro

float raySphereIntersect(vec3 r0, vec3 rd, vec3 s0, float sr) {
    // - r0: ray origin
    // - rd: normalized ray direction
    // - s0: sphere center
    // - sr: sphere radius
    // - Returns distance from r0 to first intersecion with sphere,
    //   or -1.0 if no intersection.
    float a = dot(rd, rd);
    vec3 s0_r0 = r0 - s0;
    float b = 2.0 * dot(rd, s0_r0);

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Fonserbc

using UnityEngine;

/* 
 * Most functions taken from Tween.js - Licensed under the MIT license
 * at https://github.com/sole/tween.js
 * Quadratic.Bezier by @fonserbc - Licensed under WTFPL license
 */
public delegate float EasingFunction(float k);

public class Easing