Find a Good Google Font

I like looking at the font selected by Typewolf : https://www.typewolf.com/google-fonts

Otherwise you can browse the whole archive at : https://fonts.google.com/

The post General Web Development Helpers appeared first on Techy Things.

Bibliography / Sites Consulted / Example

https://www.w3.org/TR/SVG/paths.html

https://stackoverflow.com/questions/51932434/d3js-animate-a-2-arc-donut

Nice blog post. How does he do all those arc sections?
https://swizec.com/blog/silky-smooth-piechart-transitions-react-d3js/swizec/8258

https://codepen.io/anthonydugois/pen/mewdyZ

An continuously animated arc component in React, simply written, although I didn't use this code it is working and a good example
https://codepen.io/Gesma94/pen/oJvjwe

https://codeburst.io/svg-morphing-the-easy-way-and-the-hard-way-c117a620b65f

Simple ARC with D3, arc() and stroke-linejoin: round
http://jsfiddle.net/tjh2o9ms/

https://github.com/react-tools/react-move

Software

Inkscape
https://inkscape.org/release/inkscape-0.92.4/windows/64-bit/msi/dl/

The post Draw an animated ARC vector in HTML / CSS / SVG appeared first on Techy Things.

Increase SWAP if have 512 MB or below

$> sudo dd if=/dev/zero of=/swap bs=1M count=1024
$> sudo mkswap /swap
$> sudo swapon /swap
$> nano /etc/fstab
# add the following line
/swap swap swap sw 0 0
# reboot and verify with the "free" command that you now have above 1GB of swap

Install basic packages

$> apt-get install php5-curl php5-gd

# php5-gd is for wordpress thumbnails

For Ruby on Rails servers

Now on its own post http://tech.yipp.ca/ruby/putting-ruby-rails-production-debian-virtualmin/

The post Create a new Debian server with Virtualmin appeared first on Techy Things.

Well sometime we have to if our clients is still on it, and yes in 2015, there are groups in the federal business that still only use IE 8.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Problem: Object doesn't support property or method 'preventDefault'

Basic solution #1
Replace
event.preventDefault()
with:
if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }

More elegant solution #2

Using a library to handle event handler will usually take care to shim all your event with a preventDefault() function. For example the most basic Javascript toolbox will take care of it when attaching your event. jQuery will also shim events so you don't have to worry about it.

Problem: The "onchange" event does not fire for checkboxes and radios

Solution #1 - Cry a lot and pretend it's not happening

Solution #2 (preferred) - Do this hack :

Problem: The UI renders additional blocks

Wrong (for IE8):

for (var i in streamsList) {
div = document.createElement("div");
(...)
}

Good:
for (var i=0; i<streamsList.length; i++;) {
div = document.createElement("div");
(...)
}

Problem: Object doesn't support property or method 'indexOf'

This is a known issue and not your fault. IE8 plainly doesn't support indexOf for Array type.

Use the following polyfill from MDN :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility

// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {

    var k;

    // 1. Let O be the result of calling ToObject passing
    //    the this value as the argument.
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }

    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get
    //    internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If len is 0, return -1.
    if (len === 0) {
      return -1;
    }

    // 5. If argument fromIndex was passed let n be
    //    ToInteger(fromIndex); else let n be 0.
    var n = +fromIndex || 0;

    if (Math.abs(n) === Infinity) {
      n = 0;
    }

    // 6. If n >= len, return -1.
    if (n >= len) {
      return -1;
    }

    // 7. If n >= 0, then Let k be n.
    // 8. Else, n<0, Let k be len - abs(n).
    //    If k is less than 0, then let k be 0.
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

    // 9. Repeat, while k < len
    while (k < len) {
      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the
      //    HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      //    i.  Let elementK be the result of calling the Get
      //        internal method of O with the argument ToString(k).
      //   ii.  Let same be the result of applying the
      //        Strict Equality Comparison Algorithm to
      //        searchElement and elementK.
      //  iii.  If same is true, return k.
      if (k in O && O[k] === searchElement) {
        return k;
      }
      k++;
    }
    return -1;
  };
}

The post Supporting IE 8 appeared first on Techy Things.

1. Navigate to chrome://extensions

2. Click on "Load unpacked extension..."

Troubleshooting

Problem

There were warnings when trying to install this extension: Permission '://.google.com' is unknown or URL pattern is malformed.

http://stackoverflow.com/questions/17406941/webrequest-permission-malformed

How to view the source code of a Chrome Extension

http://www.howtogeek.com/198964/how-to-view-the-source-code-of-a-chrome-extension/

Sample Cookie Chrome Extension by Google
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/cookies/

Chrome Extensions Examples by Google
https://developer.chrome.com/extensions/samples

http://stackoverflow.com/questions/11545743/chrome-extension-insert-content-script-on-browser-action
http://stackoverflow.com/questions/9498685/resize-popup-html-in-chrome-extension
http://stackoverflow.com/questions/19288202/inject-javascript-in-an-iframe-using-chrome-extension

The post Create your own Chrome Extension appeared first on Techy Things.

Installation :


npm install gulp-concat --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-usemin --save-dev
npm install gulp-shell --save-dev
npm install gulp-sass --save-dev
npm install gulp-watch --save-dev 

My link database

http://leaverou.github.io/prefixfree/
https://www.npmjs.org/package/autoprefixer

The post Gulp usage with sass watch, minify and r.js compressor appeared first on Techy Things.

Lato
Calibri

The post Nice fonts for websites appeared first on Techy Things.