Monday, February 23, 2015

Colorama

Here is a neat little python module for cross-platform colored terminal: colorama.

Thursday, September 18, 2014

Waypoints

I thought this plug-in was cool and wanted to remember it: Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Thursday, February 13, 2014

Miscellaneous CSS links and tricks

Here are some links I've been using recently related to CSS:

1. colorpeek.com is a nice tool to create a color palette and to share it.

2. Colors by commutercreative.com is a neat tool to visualize the 147 named colors in CSS.

3. On-Off switches made with CSS only ... pretty cool.

4. For generating gradients (and other neat CSS-related stuff), check out the excellent westciv.com from John Allsopp.

Wednesday, August 7, 2013

Simple and nice-looking tabs for your web page

Hi there, We've just posted a new trick at frenetic.be: how to make great-looking tabs for your website. Here's how they look like (of course, you can change the appearance with a little bit of CSS):
To find out how we make those and how they work, check our NEW POST AT FRENETIC.BE. Hope you enjoy.

Tuesday, June 25, 2013

Circles in CSS

In this post, we show how to make circles in pure CSS. We also made a short JavaScript to create random and regular patterns of circles and squares inside a div. Check it out at frenetic.be/tricks/circles.php.

Saturday, June 15, 2013

A simple javascript timer (using Web Workers in HTML5)

A Web Worker is a JavaScript that runs in the background without affecting the performance of the page you are visiting. In this post, we will show how to implement a simple timer, using Web Workers in HTML5. Without any further introduction, let's jump in the code. The results (and the source code) can be seen at frenetic.be/tricks/simple-timer.php
Let's start with a standard HTML5 document:

<!DOCTYPE html>
<html lang="en">


Let's add a title and a few css definitions to make it all look good:



<head>
<meta charset="utf-8" />
<title>Timer</title>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400' rel='stylesheet' type='text/css'>
<style type="text/css">

        .header
        {
            width:280px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 50px;
                        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 24px;
            font-weight: 300;
            text-align: left;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;

        }

        .timer
        {
            width:200px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 10px;
            padding: 40px;
            border:1px dotted gray;
                        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 32px;
            font-weight: 300;
            text-align: center;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;

        }

        .buttons
        {
            width:280px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 20px;
        }
        
        button
        {
            width:100px;
        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 18px;
            font-weight: 300;
            text-align: center;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;            
        }
        
        #button1
        {
            float:left;
            margin-left: 25px;
        }
        
        #button2
        {
            float:right;
            margin-right:25px;
        }        

</style>

</head>

The body of the page is simple: a title, the timer, a start and a stop button:


<body>

    <div class="header">A simple timer:</div>

    <div class="timer" id="timer">00:00</div>   
    <div class="buttons">
        <button onclick="startTimer()" id="button1">Start</button>
        <button onclick="stopTimer()" id = "button2">Stop</button>
    </div>

</body>

And then let's create the Web Worker:


<script>

var w = null; // initialize variable

// function to start the timer
function startTimer()
{
    // First check whether Web Workers are supported
    if (typeof(Worker)!=="undefined"){
        // Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simpletimer.js
        if (w==null){
            w = new Worker("simpletimer.js");
        }
        // Update timer div with output from Web Worker
        w.onmessage = function (event) {
            document.getElementById("timer").innerHTML = event.data;
        };
    } else {
        // Web workers are not supported by your browser
        document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
    }
}

// function to stop the timer
function stopTimer()
{
    w.terminate();
    timerStart = true;
    w = null;
}
</script>

</html>

Finally, one piece is missing: the script run by the Web Worker. In this case, 'simpletimer.js':


// Should the timer start or not (has it been started already?)

var timerStart = true;

function myTimer(d0)
{
   
// get current time
    var d=(new Date()).valueOf();
   
// calculate time difference between now and initial time
    var diff = d-d0;
   
// calculate number of minutes
    var minutes = Math.floor(diff/1000/60);
   
// calculate number of seconds
    var seconds = Math.floor(diff/1000)-minutes*60;
    var myVar = null;
   
// if number of minutes less than 10, add a leading "0"
    minutes = minutes.toString();
    if (minutes.length == 1){
    minutes = "0"+minutes;
    }
   
// if number of seconds less than 10, add a leading "0"
    seconds = seconds.toString();
    if (seconds.length == 1){
    seconds = "0"+seconds;
    }

   
// return output to Web Worker
    postMessage(minutes+":"+seconds);
}
                   
if (timerStart){
   
// get current time
   var d0=(new Date()).valueOf();
   
// repeat myTimer(d0) every 100 ms
   myVar=setInterval(function(){myTimer(d0)},100);
   
// timer should not start anymore since it has been started
   timerStart = false;
}




In summary, there should be two files:

1) simpletimer.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Timer</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400' rel='stylesheet' type='text/css'>
<style type="text/css">

        .header
        {
            width:280px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 50px;
                        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 24px;
            font-weight: 300;
            text-align: left;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;

        }

        .timer
        {
            width:200px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 10px;
            padding: 40px;
            border:1px dotted gray;
                        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 32px;
            font-weight: 300;
            text-align: center;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;

        }

        .buttons
        {
            width:280px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 20px;
        }
        
        button
        {
            width:100px;
        
            font-family: 'Open Sans', sans-serif, Palatino;
            font-size: 18px;
            font-weight: 300;
            text-align: center;
            text-decoration: none;
            letter-spacing: 1px;
            color: gray;            
        }
        
        #button1
        {
            float:left;
            margin-left: 25px;
        }
        
        #button2
        {
            float:right;
            margin-right:25px;
        }        
</style>
</head>
<body>

    <div class="header">A simple timer:</div>

    <div class="timer" id="timer">00:00</div>   
    <div class="buttons">
        <button onclick="startTimer()" id="button1">Start</button>
        <button onclick="stopTimer()" id = "button2">Stop</button>
    </div>

</body>

<script>

var w = null; // initialize variable

// function to start the timer
function startTimer()
{
    // First check whether Web Workers are supported
    if (typeof(Worker)!=="undefined"){
        // Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simpletimer.js
        if (w==null){
            w = new Worker("simpletimer.js");
        }
        // Update timer div with output from Web Worker
        w.onmessage = function (event) {
            document.getElementById("timer").innerHTML = event.data;
        };
    } else {
        // Web workers are not supported by your browser
        document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
    }
}

// function to stop the timer
function stopTimer()
{
    w.terminate();
    timerStart = true;
    w = null;
}
</script>

</html>




2) simpletimer.js

// Should the timer start or not (has it been started already?)
var timerStart = true;

function myTimer(d0)
{
    // get current time
    var d=(new Date()).valueOf();
    // calculate time difference between now and initial time
    var diff = d-d0;
    // calculate number of minutes
    var minutes = Math.floor(diff/1000/60);
    // calculate number of seconds
    var seconds = Math.floor(diff/1000)-minutes*60;
    var myVar = null;
    // if number of minutes less than 10, add a leading "0"
    minutes = minutes.toString();
    if (minutes.length == 1){
    minutes = "0"+minutes;
    }
    // if number of seconds less than 10, add a leading "0"
    seconds = seconds.toString();
    if (seconds.length == 1){
    seconds = "0"+seconds;
    }

    // return output to Web Worker
    postMessage(minutes+":"+seconds);
}
                   
if (timerStart){
   // get current time
   var d0=(new Date()).valueOf();
   // repeat myTimer(d0) every 100 ms
   myVar=setInterval(function(){myTimer(d0)},100);
   // timer should not start anymore since it has been started
   timerStart = false;
}


Check out frenetic.be/tricks/simple-timer.php to see it in action. Enjoy!!!

Monday, May 13, 2013

How to batch rename files in shell

Say you have files abc0.ext, abc1.ext, ... abc257.ext that you want to rename to def0.ext, def1.ext, ... def257.ext.

You can either use the "rename" command if you have it (http://unixhelp.ed.ac.uk/CGI/man-cgi?rename) or you can use a for loop, mv and sed together, like this:

for f in abc*.ext; do mv $f $(echo $f | sed 's/^abc/def/g'); done