před 2 týdny

Simple pie chart progress bar in canvas element

progresHTML

<div class="chart" id="graph" data-percent="88"></div>

Javascript

 var el = document.getElementById('graph'); // get canvas

var options = {
 percent: el.getAttribute('data-percent') || 25,
 size: el.getAttribute('data-size') || 220,
 lineWidth: el.getAttribute('data-line') || 15,
 rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
 G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
 percent = Math.min(Math.max(0, percent || 1), 1);
 ctx.beginPath();
 ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
 ctx.strokeStyle = color;
 ctx.lineCap = 'round'; // butt, round or square
 ctx.lineWidth = lineWidth
 ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);

And CSS

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

http://jsfiddle.net/Aapn8/3410/

Basic code was taken from Simple PIE Chart http://rendro.github.io/easy-pie-chart/

#css #js #canvas #html5

27. 5. 2014

How to keep directory structure with gulp-zip

Here is a simple way, how to keep directory structure with gulp-zip. You just need add {base: "."} to src:

var gulp = require("gulp");
var zip = require("gulp-zip");
path = require('path');

gulp.task("zip", function () {
 return gulp.src([
   'css/*',
   'img/*',
   'js/*',
   'manifest.json',
   'popup.html',
  ], {base: "."})
  .pipe(zip('archive.zip'))
  .pipe(gulp.dest('dist'));
});

gulp.task("default", ["zip"]);

#zip #gulp #gulp-zip

22. 4. 2014

How to protect your emails with PHP and Javascript

Working with or without javascript it’s combine two technique for email protection ROT13 and CSS

function mail($email, $text = null) {
 return '<script type="text/javascript">document.write("' .
 addslashes(
  str_rot13(
   '<a href="mailto:' . $email . '" rel="nofollow">' . ($text ? : $email) . '</a>'
  )
 ) . '".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));</script>' .
 '<noscript><span style="unicode-bidi: bidi-override; direction: rtl;">' . strrev($email) . '</span></noscript>';
}

Sources:

#js #php #email #protection

14. 4. 2014

Prevent Heartbleed: upgrade openssl with brew on your mac

The Heartbleed Bug is a serious vulnerability in the popular OpenSSL cryptographic software library. Follow brew command will upgrade your openssl library:

brew install openssl && brew link openssl --force

Relaunch your Terminal (has to be hard quit ⌘ + Q) and check your openssl version:

openssl version

Now you shall have OpenSSL 1.0.1g 7 Apr 2014 or newer.

#brew #mac #openssl #heartbleed

14. 4. 2014

Upgrading PHP with Homebrew

Are you using josegonzalez brew repository according my previous blog post? You will need switch your brew to an official PHP repository.

brew untap josegonzalez/homebrew-php
brew tap homebrew/dupes
brew tap homebrew/versions
brew tap homebrew/homebrew-php

Then you can exec upgrade everything:

brew update && brew upgrade

Do not forgot change your shortcut in your bash profile:

alias php-start="sudo launchctl load ~/Library/LaunchAgents/homebrew.mxcl.php55.plist"
alias php-stop="sudo launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.php55.plist"
alias php-restart="php-stop && php-start"

You can also getting an error Dubious ownership on file… then change *.plists rights:

sudo chown root ~/Library/LaunchAgents/*
sudo chmod 644 ~/Library/LaunchAgents/*

#brew #php #osx #mac

1 2 86 87