renarsvilnis

// sass svg fallback to png (or your desired extension)
// similar to other fallbacks but this supports < 4 firefox
@mixin png-svg-fallback($url, $extension: '.png') {
  background-image: url($url + $extension);
  background-image: -webkit-linear-gradient(transparent, transparent), url($url + ".svg");
  background-image: linear-gradient(transparent, transparent), url($url + ".svg");
}

renarsvilnis

// mixin for easy focus color removement
@mixin remove-focus-color {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

renarsvilnis

TIPS

• If parent has overflow hidden and child has backface-visibility: hidden; then fonts on chrome <= 37 render blurry due to the are converted to and image upscaled.

• What is the difference between perspective and transforms perspective property
  • http://stackoverflow.com/questions/25910933/what-is-the-difference-between-perspective-and-transforms-perspective-propertie
  • http://desandro.github.io/3dtransforms/docs/perspective.html

FONTS

• [Youtube - Bram Stein: The State of Web Typography] (https://www.youtube.com/watch?v=VbCqFQ1sTYQ&amp;list=WL&amp;index=2) - great speech about fonts, their browser supports

renarsvilnis

<?php
  
  ini_set("max_execution_time", "30000");
  
  // how much detail we want. Larger number means less detail
  // (basically, how many bytes/frames to skip processing)
  // the lower the number means longer processing time
  define("DETAIL", 5);
  
  define("DEFAULT_WIDTH", 500);

renarsvilnis

PHP trick-tips

Some tips or useful info that i found interesting or useful at the moment of writing.

UTF-8

USE IT EVERYWHERE. THE END.

Working with Databases

• PDO vs MySQLi
• PDO Tutorial for MySQL Developers
• Prepared database statements

renarsvilnis

HTTP Headers

• Wei Lu: HTTP Headers - The Simplest Security - JSConf.Asia 2014
  • Content-Security-Policy
  • X-XSS-Protection
  • Strict-Transport-Security
• X-Frame-Options

renarsvilnis

• Passing an object as reference
• var functionName = function() {} vs function functionName() {}
• event.target vs event.currentTarget
• event.stopPropagation vs event.preventDefault
  • What's the difference between event.stopPropagation and event.preventDefault?
  • jquery: event.stopImmediatePropagation() vs return false
• bind vs call vs apply
• [JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals](http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-prof

renarsvilnis

/**
 * ES6 way of removing nth array element in an immutable way
 * @param  [Array] arr
 * @param  [number] i
 * @return [Array]
 */
function removeNthEl (arr, i) {
  return [
    ...arr.slice(0, i),
    ...arr.slice(i + 1)

renarsvilnis

import {PureComponent, PropTypes} from 'react';

export default class DelayMount extends PureComponent {
  static propTypes = {
    render: PropTypes.bool.isRequired,
    children: PropTypes.any,
    transitionEnterDelay: PropTypes.number.isRequired,
    transitionLeaveTimeout: PropTypes.number.isRequired
  }

renarsvilnis

export function calcFitDimensions (target, boundries, upscale = false) {
  if (!target.width || !target.height || !boundries.width || !boundries.height) {
    return calcCenterPosition(target, boundries);
  }

  let imgRatio = target.width / target.height;
  let newWidth;
  let newHeight;

  // if image is horizontal