jymden.com

{blog}

  • (JS) Newline to br

    Replaces newline characters with <br> tags in the same style as the php nl2br function

    // newline to br - php style
function nl2br(str, is_xhtml) {
    let breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
    JavaScript

  • (Ruby) Ruby on Rails doodles

    Create new Ruby-on-Rails project. By default RoR comes with SQLite support, unless you state otherwise (-d mysql).
    [ruby]
    // Create project. With mysql support
    rails new my_project -d mysql
    [/ruby]

  • (MySQL) MySQL doodles

    [sql]
    — Replace a word or string in a column
    UPDATE my_table SET my_column = REPLACE(my_column, ‘Old string’, ‘New string’);

    —
    [/sql]

  • (JS) Super simple slider/carousel/slideshow

    Here’s how you can make a super simple slideshow that changes slides on a timer interval. You could easily edit it so any other event, like a mouse click, will trigger the slide() function.

    You can see it in action HERE

    HTML

    [html]
    <div class="slider">

    <div class="slide red">
    <p>THIS IS SLIDE 1</p>
    </div>

    <div class="slide blue">
    <p>THIS IS SLIDE 2</p>
    </div>

    <div class="slide green">
    <p>THIS IS SLIDE 3</p>
    </div>

    </div>
    [/html]

    CSS

    [css]
    .slider {
    width: 500px;
    height: 300px;
    margin: 0 auto;

    /* DON’T CHANGE THESE */
    position: relative;
    overflow: hidden;
    }

    .slide {
    /* DON’T CHANGE THESE */
    position: absolute;
    width: 100%;
    height: 100%;
    }

    /** ONLY FOR STYLING THE EXAMPLE SLIDES */
    .slide p {
    color: #FFF;
    text-align: center;
    }

    .red {
    background: red;
    }

    .blue {
    background: blue;
    }

    .green {
    background: green;
    }
    [/css]

    jQuery

    [js]
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
    // Configurable values
    slider = $(‘.slider’); // Slider element
    slideDuration = 3000; // Duration of each slide in milliseconds
    slideSpeed = 1000; // Speed of slide animation in milliseconds (must be equal of less than slideDuration)

    width = slider.width();
    slider.children().hide().css({left: width});
    slider.children(‘:first’).show().css({left: 0});

    // Slide in from the left
    $.fn.slideIn = function () {
    $(this).show().animate({
    left: "-=" + width
    }, slideSpeed / 2);
    }

    // Slide out to the left
    $.fn.slideOut = function () {
    $(this).animate({
    left: "-=" + width
    }, slideSpeed / 2, function () {
    $(this).hide().css({left: width});
    });
    }

    // Main slide function
    function slide() {
    currentSlide = slider.find(‘div:visible:first’);
    nextSlide = (!slider.children(":last").is(":visible")) ? currentSlide.next() : slider.children(‘:first’);

    currentSlide.slideOut();
    nextSlide.slideIn();
    }

    // Timer function
    window.setInterval(function () {
    slide();
    }, slideDuration);
    </script>
    [/js]

    And of course you could make this dynamic by spitting out the slides from a database… for example like this:

    [php]
    <div class="slider">

    <?php foreach ($slides as $slide) { ?>

    <div class="slide">
    <p><?php $slide[‘content’] ?></p>
    </div>

    <?php } ?>

    </div>
    [/php]

  • Get a list of run database queries in Laravel

    Get a list of run database queries in Laravel

    This is great if you want to see what queries are actually run when using Eloquent.

    // Get all querys run
$queries = DB::getQueryLog();

// If you want to sort them by time this works
usort($queries, function ($a, $b) {
return $a['time'] < $b['time'];
});

// Print them on screen in a readable way
echo '<pre>';
print_r($queries);
echo '</pre>
    Dart
  • Log Laravel execution time to console

    Log Laravel execution time to console

    Put this in app/start/global.php to get Laravels execution time to the browser console log.

    L4

    $start = microtime(true);

App::finish(function() use ($start) {
echo &quot;&lt;script&gt;console.log('App finish: &quot;.round((microtime(true) - $start) * 1000, 3).&quot; ms')&lt;/script&gt;&quot;;
});
    PHP

    This works with L5:

    This page took {{ (microtime(true) - LARAVEL_START) }} seconds to render
    Blade

  • Convert CSV to SQL

    This tool is fantastic!
    It saved me many hours of work, when I had complex CSV files I needed to turn into SQL tables
    http://www.convertcsv.com/csv-to-sql.htm

  • (HTML) Form element arrays

    Sometimes you might want to group form elements in arrays.
    Here’s a way to do that:
    [html]
    <form>
    <input type="text" name="textboxes[]">
    <input type="text" name="textboxes[]">
    <input type="text" name="textboxes[]">
    </form>
    [/html]

    The structure of the $_POST array will then be:
    [php]
    Array
    (
    [textboxes] => Array
    (
    [0] => value 1
    [1] => value 2
    [2] => value 3
    )

    )
    [/php]

  • (PHP) sorting an array on a specific value

    Simple way to sort an array with usort on a specific value using a comparator.

    [php]
    usort($myArray, function ($a, $b) {
    return $a[‘foo’] > $b[‘foo’];
    });
    [/php]

  • (CSS) How to center a div without width

    I needed to center a div with dynamic content, so I couldn’t set a fixed width.
    Since margin: 0 auto; really won’t do anything if the element doesn’t have a fixed width you can solve it like this:

    HTML
    [html]
    <div id="container">
    <div class="centered">My dynamic content, that will be centerd</div>
    </div>
    [/html]

    CSS
    [css]
    .centered {
    margin: 0 auto;
    display: table;
    }
    [/css]