VueJS watchers for MomentJS

It took me some time to figure out what’s been going wrong with the watchers working on datepicker integration for CakePHP-Calendar plugin.

Problem domain:

On loading modal window for creating calendar event, one of the dropdowns pass default start/end time for the event interval (start/end dates). This config object is passed to as a property into interval component that contains two child datepicker components.

Whenever the config property changes, it adjusts startMoment and endMoment objects and passes them into datepickers. The change is monitored via watch functionality of VueJS.


Vue.component('interval-holder', {
    template: `<div>
        <datepicker :date-moment="startMoment"></datepicker>
        <datepicker :date-moment="endMoment"></datepicker>
    props: ['config', 'initialMoment'],
    data: function() {
        return {
            startMoment: null,
            endMoment: null
    watch: {
        config: function() {
            this.startMoment = this.initialMoment;
            this.startMoment.set({'hour': this.config.start.hour, 'minute': this.config.start.min});
            this.endMoment = this.initialMoment; 
            this.endMoment.set({'hour': this.config.end.hour, 'minute': this.config.end.min});

Vue.component('datepicker', {
    // value var is useless here, as we use daterangepicker from jQuery 🙁
    template: `<div>
        <input type="text" :value="value"/>
    props: ['dateMoment'],
    mounted: function() {
        var self = this;
        //load jquery bootstrap-datepicker instance
        this.instance = $(this.$el).find('input').daterangepicker().data('daterangepicker');
        $(this.$el).find('input').on('apply.daterangepicker', function(ev, picker) {
            self.momentObject = picker.startDate;
            self.value = picker.startDate.format('YYYY-MM-DD HH:mm');
    data: function() {
        return {
            value: null,
            momentObject: null,
    watch: {
        dateMoment: function() {
            this.momentObject = this.dateMoment;
            this.value = this.momentObject.format('YYYY-MM-DD HH:mm');

If we set hours and minutes the following way as in the example above, dateMoment watcher won’t catch the change. According to the docs, it’s adviced to use deep param:

To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument. Note that you don’t need to do so to listen for Array mutations.

watch: {
    dateMoment: {
        handler: function(val, old) {
            console.log('dateMoment changed');
        deep: true

Still no luck. Apparently, MomentJS object “too deep”. The only way to get it working ended up like this, change the parent component moment objects assignment, keeping the child-component watch function unchanged.

watch: {
    config: function() {
        var newStart = moment(this.startMoment);
        newStart.set({'hour': .., 'minute': ..});
        this.startMoment = newStart;
        //create a new instance of newEnd and assigning it to this.endMoment
        // get the dateMoment observe the change.
        // Ugly? Yes. Working? Yes..

If anyone has a better (more elegant) way to fix this issue – welcome in the comments section! 🙂


ES2015: Refresher on modern JavaScript

A quick lookup on modern JavaScript and whole Babel thing. This will be a start of a small research on splitting frontend and backend implementation for CakePHP framework and its plugin.

JavaScript – technological singularity & younglings effect

On March 2017, Eugene Gusev had an interesting talk (in Russian) at HolyJS regarding the technological singularity as whole in Front-End, and JavaScript ecosystem in particular. As a thesis taken, he noted an enormous number of 350k packages in NPM.

Few points being stated over the talk:

  • Quality of the packages (aka younglings publish low quality tools)
  • Hype over the ecosystem (frameworks and libs go up and down in popularity scale).
  • Business forces the choice, leaving minimum time on technical decision-making process.
  • Stop writing code, or “stop publishing your code”.
  • In order to program you should be a computer scientist.

All the points are quiet controversial. Though, accepting some of these statements as a potential problem, most of them have a reasonable explanation.


Back when the trees were tall and the grass was green, I graduated my BSc in Computer Science, I’ve started working as a Junior Web Developer. By that time, a programmer who knew only JavaScript, or solely was coding on Perl/PHP/Python was considered lazy/unemployed/unicorn. The time flew by and the industry started splitting technological stack, so from Programmer/SysAdmin we forked into Front/Backend developers, SysAdmins to DevOps etc.

University, really?

We still have certain professions that require an educational degree. By paying for your education, you’re prompted to access research laboratories, expensive equipment that’s required for your research. Think of physicists or chemists. Stating that diploma (for Computer Science) somehow justifies your profile, or what you should be doing for living left behind with the era of industrial revolution. “The spice must flow” – that’s where we get into the almighty Internet for self-education. Udemy, Coursera – it’s right there, most of it is free, just read it, learn it.

Technological Singularity

Technological singularity is a hypothesis that the invention of artificial superintelligence will abruptly trigger runaway technological growth, resulting in unfathomable changes to human civilization.

Are we there yet? Yes, we are. It just arrived silently. Clustering professions to narrow the specialization is one of the countermeasures to prevent the informational noise that we get once diving into IT-sector. That’s where we step into Hype effect.

Hype Effect

Hype Cycle diagram
Hype Cycle by Ember in the Real World

350 thousand package in NPM. That’s massive, but hold on a minute! CPAN didn’t have the same issue in Perl community? PEAR and Pecl repositories stacked by repetitive packages, written by people just because they could. And they did! Every year, some big player like Google, Facebook, name a few, presents a new approach towards a common problem. Angular, React, EmberJS, VueJS. It automatically triggers a hype.

Architects in the companies start massively migrating to trendy frameworks, as it’s backed up by one of the above companies, which promises stable development, stable versioning and ongoing support. We get a drastic shift of packages developed for these frameworks. And the story continues until something new arrives on the market.

As companies do not operate in vacuum, all these transitions correlate with business decisions. Packages appear in almost-ready-to-us state, and remain loosely maintained just to get your npm/phake/rake running smoothly during the deploy process.

Packages & Plugins flood

Slowly the picture of 350k packages come into place. Each of the packages is a reflection of a person behind it and the problem he or she was trying to solve. Good solutions become trendsetters itself, become community defacto standards. What happens with others? – Well, it’s a pure darwinism, which triggers professional boost among the developers.

To sum things up

Your knowledge derives from those who dared, and published something. If you cannot choose out of a hundred packages one or two that might fit in your application, maybe you should question yourself what exactly you trying to solve? Diversity of approaches in IT and its openness is our strength. You found something wrong, write a bugreport, or send a pull request. The rest is just excuses in most of the occasions!

Office 365 – test trial is over, back to Google

I’ve been using Office 365 for office correspondence for about 7 months, since I moved to Qobo. Today I say enough to Office365 corporate lookalike email client. Everything is back to Google.

UX experience

One of the things I couldn’t get used to is the right-click bindings. I guess the assumption was to enrich the functionality of the interface by letting you move/delete assets on your sidebar (aka folder management). As the result – half of the browser daily routine is cut off. Most of the time my main working tool (apart of the vim) is the browser (webdev happy days!).

When someone screws up the shortcuts that I use gazillion times per day, it kind of annoys me. Who would have thought to replace Ctrl-R to “reply” shortcut for “refresh“. Ah, bollocks, moving on!

Focused/Other/Pinned emails. Pinned email go to the top of the list. Focused follow right after. Others – somewhere at the end. 6 emails fit into my laptop screen height, so you can get an idea, that the number of pinned or focused emails is quiet limited. I guess, I’m too old school to get these things right!

Search & Filter. Google Email search and filtering is unbeatable. Period.


CakePHP: Interview with Larry E. Masters

Interesting interview with one of the core members of CakePHP community – Larry E. Masters.

Throughout the interview Larry covers CakePHP Framework history, as well as covering major milestones of CakePHP 3.x version. If you’re still into 2.x – it’s time to upgrade, as it brings some nice perks, more flexible code, and massive performance boost.


Work fuel: what really motivates us

Seth Godin published once again a great article on work/life motivation.

  • Becoming a better version of yourself
  • Catastrophe (or the world as we know it will end)
  • Connection (because others will join in)
  • Creative itch (the voice inside of you wants to be expressed)
  • Dissatisfaction (because it’s not good enough as it is)
  • Engineer (because there’s a problem to be solved)
  • Generosity (because it’s a chance to contribute)
  • Possibility (because we can, and it’ll be neat to see how it works in the world)
  • Selection (to get in, win the prize, be chosen)

IIO Sensor proxy: screen rotation

One of the things I don’t get is why this thing is enabled by default on Linux distros.

With a GNOME 3.18 (or newer) based system, orientation changes will automatically be applied when rotating the panel, ambient light will be used to change the screen brightness, and Geoclue will be able to read the compass data to show the direction in Maps.

It’s really annoying on the laptops, if you accidentally rotate your monitor.

sudo systemctl stop iio-sensor-proxy.service
sudo systemctl disable iio-sensor-proxy.service

Enough with screen rotations!

PHP: Testing protected methods in CakePHP3

One of the things I recently had to deal with – unit testing protected methods of the class. Few seconds of checking StackOverflow brought a nice and elegant way of checking protected methods using ReflectionClasses. Sebastian Bergmann has a complete guide on how to check non-public functionality of the classes in his archieves.

Here’s a short sample of the code using CakePHP3:


 use Search\Model\Table\SaveSearchTable;
 use Cake\TestSuite\TestCase;
 class SaveSearchTableTest extends TestCase
    public function setUp()
        $this->SavedSearches = \Cake\ORM\TableRegistry::get('SavedSearches');
    public function testProtectedMethod()
        $methodName = 'protectedMethod';
        $reflectionClass =  new \ReflectionClass('\Search\Model\Table\SaveSearchesTable');
        $method = $reflectionClass->getMethod($methodName);
        $methodResult = $method->invokeArgs( $this->SavedSearches, [