Category Archives: Web dev

Vue.js

I’m tired of Angular. I never had time to learn it properly. Other JS frameworks are even less appealing for me. But something has changed – Vue.js appeared on the horizon. It looked very promising, and I decided to learn it. Why? It’s lightweight, clean, and has all the features I need.

Vue.js 2.0 is going to be released pretty soon, it’s going to be much faster than 1.0, while keeping the API largely the same.

There are the sources I used for learning:

You can see the mess I created in my lab at http://lab.acedude.pl/ in the “Vue.js framework” section.

3D in HTML5 using three.js

Let’s try some 3D things today. I just found a post about using three.js and decided to try it. Three.js website is full of excellent examples, the library is well documented, and there are plenty of tutorials lying around.

I just used the code from the blog post I found. Looks like using three.js is really simple. It should be easy to use it along with my favourite HTML5 game engine, ImpactJS. I was working on a tabletop game prototype, and three.js would fit perfectly to add some 3D awesomeness.

CSS – steps()

CSS animations are fun. I don’t have a lot of experience with them, so it’s the time to change it. First related thing on my “to learn” list is steps() function, for some reason.

steps() function is used for making non-fluid animations. It’s nothing big, so I’ll just drop a link here: How to Use steps() in CSS Animations If you have no experience with CSS animations, this is an excellent starting point.

The trick consists of two parts: you define the animation function:

.tick-tock {
    animation: tick-tock 60s steps(60, end) infinite;
}

the syntax is “animation: <keyframe definition name> <animation length> steps(<number of frames>, <direction>) <iteration count> <direction>;”

then you define the keyframes:

@keyframes tick-tock {
    to {
        transform: rotate(360deg);
    }
}

and that’s it. I tested it out in my lab: http://lab.acedude.pl/css-animations-steps/

It works. Best post ever.

Laravel, laravel-mongodb, Laravel Forge, and PHP 7

Oookay, so for some reason the mix from the title was a big deal. When you try to install laravel-mongodb package on servers created by Laravel Homestead or Forge – it’s going to fail. To be specific, when you try to run:

composer require jenssegers/mongodb

composer is going to start bitching about missing mongodb php extension. And you can’t install it until you run:

sudo apt-get install libcurl4-openssl-dev

Then you’ll be good to go. Install the new mongodb extension by running:

sudo pecl install mongodb

and then add the following line to your php.ini file (probably /etc/php/7.0/cli/php.ini & /etc/php/7.0/fpm/php.ini):

extension=mongodb.so

That should be it. Don’t forget to restart nginx.

CSS – flexbox

Flexbox, the new CSS layout type. Created to replace hacky and messy ways of doing things with CSS. I hate all that silly “post-css” stuff, so a widely-adopted, well-specified layout system sounded great to me.

To start, take a look at:

A little bit less interesting:

All in all, it’s an awesome piece of tech. Making responsive websites can be really fun with it. It should also elminate all the hacks, and less code = better code. One concern is browser support. Sure, it is widely supported, but the issue right now is that the websites are rendered a little bit different on various devices and browsers. Hopefully it will get better with time.

Oh, and one last thing. Flexbox should simplify stuff. If you use it, because it’s cool, and then add table/grid/float/whatever -based layout to support older browsers – it’s just stupid.

laravel-mongodb – complex query example

Complex queries can be pretty hard to translate. I tried to convert a PostgreSQL query for grouping by a boolean and a date at the same time. Here is my original Eloquent query:

ModelName::selectRaw('COUNT(*) AS "count", boolean_one, date_trunc(\'day\', created_at) as date')
    ->where('created_at', '>=', Carbon::now()->subMonth())
    ->where('boolean_two', '=', $booleanTwo)
    ->where('string_value', 'LIKE', $searchForString . '%')
    ->groupBy('boolean_one')->groupBy('date')
    ->orderBy('date')->get();

And here’s the same query translated, using Moloquent:

ModelName::raw(function ($collection) {
    return $collection->aggregate([
        [
            '$match' => [
                'created_at'   => ['$gt' => new MongoDate(Carbon::now()->subMonths(1)->timestamp)],
                'boolean_two'  => $booleanTwo,
                'string_value' => ['$regex' => new MongoRegex('/.*' . $searchForString . '.*/')]
            ],
        ],
        [

            '$group' => [
                '_id'   => [
                    'month'       => ['$month' => '$created_at'],
                    'day'         => ['$dayOfMonth' => '$created_at'],
                    'year'        => ['$year' => '$created_at'],
                    'boolean_one' => '$boolean_one'
                ],
                'count' => [
                    '$sum' => 1
                ]
            ]
        ]
    ]);
});;