Category Archives: Web dev

13 February, 2023

Ansible in an hour

I stumbled upon a nice server automation course made by an expert I follow. I don’t do many tedious, repeatable tasks in my daily work, but I wanted to prepare for future.

Ansible is useful for bulk server configuration, application deployment, and other automation tasks. The course I finished is very compact, but it explains the most important topics:

  • Prepping Ansible for use (installation, management node, inventories)
  • Ad-hoc modules (running commands on all servers)
  • YAML configs (playbooks)
  • Facts, variables
  • Playbook creation (generating SSH keys, using variables, loops, groups, creating users, conditionals, file operations, tags, templates, firewall config)
  • External roles (using playbooks from Ansible Galaxy, Docker containers)
  • Creating own roles (complete web server setup example)
  • Ansible Lint (config validation)
  • Ansible Dynamic Inventory (useful for large server farms)
  • Ansible Vault (credentials storage)
  • Ansible AWX (free counterpart of Ansible Tower; a web interface for playbook management)

Looks like a quite useful, pretty complex tool. Sadly, most of the Linux servers I use are handled by Laravel ecosystem tools, so I might need to wait a while before putting Ansible to use.

16 October, 2016

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.

10 April, 2016

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.

10 April, 2016

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.

5 April, 2016

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.

4 April, 2016

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 eliminate 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.

13 January, 2016

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
                ]
            ]
        ]
    ]);
});;