Principles of software architecture

Hello folks! Recently, I've been doing some consulting for an e-commerce site. During the review it struck me that there are no ground rules there (or anywhere else for that matter) that would guide what the architecture should look like. So I came up with some points myself:

Principles of architecture

The following describes the principles of the desired state of architecture. Architecture is being viewed in this case not only as the system of interconnected components but as a complete framework for developers, testers, devops and business to know their way around the system.

Ease of development

The following principles will allow for streamlined and effective use of development resources:

• the technologies being used should be widely adopted to allow for easy sourcing of new resources (developers, designers, testers)
• both backend and frontend tooling should allow for quick turnaround between changing the code and observing the result
• manual work to get the changes to appear in local development environment should be eliminated
• all projects should have a unified API for starting the development environment

Ease of deployment

The following principles will allow for uninterrupted delivery of individual changes:

• deployment of changes should be automated which includes automated validation of changes as well as pubishing chnaged to production

Extensibility

The following principles will allow for continuous development of new features:

• the system should obey the law of simple design which dictates that finding the relevant part of the code should be obvious and easy
• the system should obey the law of extensibility which dictates that changing/adding/removing functionality should be possible without changing parts of the system that are not directly connected to the part being changed/added/removed (derived from the Open/Closed principle)

Maintainability

The following principles will allow for continuous improvements of existing features:

• the system should be and remain maintainable. This means that both development of new functionalities as well as bugfixes should be as easy and as universaly applicable as possible. For instance, the developer shouldn't worry where to get the data from to reproduce reported errors and how to connect the parts being developed

High availability

The following principles will allow to increase the presence of your app on the market:

• the system should be able to loose access to parts of it without breaking the user experience. That applies not only to services serving the data (such as the CMS) but also to services serving static resources and custom APIs.

Performance

The following principles will allow to increase the presence of your app on the market:

• the system should be performant enough to consistently serve every page update under 2 seconds. This leaves 25% margin for variation in delivery time due to connection speed

Security

The following principles will allow to eliminate any potential risks involving unauthorized use of the system thus eliminating losses:

• the system should not allow for unauthorized users to perform actions they would normally be allowed to accomplish. That includes both accessing frontend pages as well as backend services. Maintaining access to elements of the system should be easy and performant and shouldn't overshadow the essential functionality

Accounting

The following principles will allow to reason about the undesired behavior:

• the system should employ globally tracable logging facilities

So there you go - a few rules to guide you when you need to decide if what you're doing is good or bad.

The point of this list is not only to show what is important but also to prioritize which parts of it are more important than others so you go top to bottom. If your app isn't a critical one then performance and high availability isn't all that important. If it's being used by just 2 people in the entire company and the app is basically a glorified spreadsheet then security and accounting might not be a concern for you. Regardless of the project size its ease of development, maintainability and extensibility are always key points of any architecture.

Have fun!

There is no such thing as free beer - RC link comparison

Controlling a model in the air is not all that difficult. There are analog systems that use PWM modulation that we all know from the old ages where RC hobby was only available for the very few ones with deep pockets and then there are digital systems like DSM2/DSMX, ACCST, ACCESS, CRSF, ELRS and probably a dosen more that rely on some kind of analog signal modulation (like FLRC, LoRa or others) to send digital information.

You might have heard about the exceptional results of ExpressLRS system that Wezly got from his long range tests. I mean, going 35km out on 100mW output power is seriously a lot. Even the mighty Ghost from ImmersionRC or Tracer from Team Blacksheep struggled to get past the 30km mark in the real world tests. So what sets ExpressLRS apart? Are those OpenSource guys just better than commercial companies? Is this the end of the world as we know it?

Well, as the title of this post says, there's no such thing as free beer. Nor is there RF performance that comes for free. Here's the secret behind ExpressLRS exceptional performance.

All other links, besides ExpressLRS are called by the number of channels they support. For example Crossfire (both 900MHz and 2.4GHz) support up to 12 channels. Sure enough there is prioritization of which channels are being sent most often (that'd be the first 4 channels where control inputs are being transmitted) but all channels are being sent with full resolution. If you come to thing about it that's a huge waste of bandwidth if you only want to send binary (on/off) information. That can be encoded on just one bit instead of 10 bits which is the usual resolution of channels.

This is exactly what ExpressLRS does - it sends 4 full resolution channels at an extremely high packet rate (500Hz!) but the rest is sent as 1 byte (8 bits) and only conveys if a switch is on or off. That's the default mode for ExpressLRS and it works great with software such as Betaflight or INAV and for simple setups such as a racing quad or a small flying wing.

There is a second "mode" that you can select when building the firmware that is called "Hybrid switches" in which the 5th channel is a binary switch that is sent with every packet (and that shall be used for controlling arming the quad),then there are 6 channels that can take up to 6 positions (3 bits) and finally there's the 12th channel which has a 4 bit resolution which amounts to 16 different values being sent.

Yes, you read this right: there are only 4 full resolution, high performance channels in ExpressLRS. This is how the link can have much much much smaller packets than any other system. But that comes at a cost. If you'd like to control, let's say, a gimbal in 2 or 3 axes you're not going to be able to do that with ExpressLRS. It just doesn't have the technical capabilities at the core of the solution that would allow you to do that.

Then there is the telemetry thing...

Telemetry is data being sent from the receiver back to the radio. It can include anything from link statistics, battery voltage to GPS position, altitude, attitude of the craft and many many more. That holds true for everyone - besides ExpressLRS. Sure, the basics, such as the GPS position and link stats are being sent back but that is about it. This, however, further limits the amount of data that needs to be sent back and forth which in turn means ExpressLRS can send less data in the aloted time frame and they can do it a lot slower thus extending the range.

So we know what are the limitation. Who would then use such a crippled RC system? Is it good for anything?

Let's examine the requirements of a typical racing pilot. First, the faster the response from moving the sticks the better. There is no limit to it. Faster is better. But does a racing pilot need telemetry? No. does one need a gimbal on the quad that goes from zero to 100 in a second? Hello no! What is needed is a reliable channel for arming/disarming and 4 very fast, very accurate channels to control the vehicle. That's it.

That's 1:0 for ExpressLRS vs everyone else.

Let's see what a typical long-range pilot requires to operate a vehicle at 50km+. 4 control channels - check. A way to arm/disarm - check. A way to switch between 4 modes (launch, air, 3D cruise, RTL) - check (although it requires a bit of fiddling around to get it to work with the default setup with binary switches - in the hybrid mode it is quite simple though). And frankly speaking 500Hz update rate is just not that useful. The thing that is usually happening during the flight is that the plane flys itself and the pilot only enters minor course corrections to point the plane where it should go. So even if the packet rate is at about 5Hz it will still be way more than enough.

But if one would like to have a camera that moves around to be able to see if there is anything coming in at the aircraft from any direction, then the 16 position AUX8 is just not good enough.

That'd be 1.5:0.5 for ExpressLRS vs everyone else.

Now let's go ahead and see what the big boys need. Imagine you're flying something like a hexacopter, with a gimbal and a lot of other accessories. You're most probably going to be doing that with the help of some ground station to better see where you are. For that you need telemetry and a control link that can not only send analog stick positions but also commands to the aircraft (most probably using the two-way MAVLink protocol). ExpressLRS is just not capable of any of that.

That'd be 1.5:1.5.

So it all depends on what you need vs what you can live without. If, for example, you're flying a tiny whoop and just want to have decent range but not a lot of cables and antennas - ELRS has you covered. If you're racing or freestyling and need the fastest link possible - again ELRS is the way to go. The greay area starts with piloting anything that can be a bit more sophisticated than just doing crazy things around the tree. Planes tend to have much more functionality that sometimes needs more control. This is where ExpressLRS starts to fade and other, full-fledged control links come into play.

Hasura - querying fields conditionally

As it turns out GraphQL is great :) I know, I know,... it's an old story but with Hasura sitting on top of PostgreSQL it is a whole different world to explore.

For example, there might be times where you have some filter that might say Select variant: "A", "B", "C", "any". Previously it was kinda obvious, that you'd say the values were [ 'A', 'B', 'C', null ] which resulted in collapsing the expression to an empty object but with the advent of Hasura 2.0 this feature was removed. Are we left with nothing? Hell no!

Conditional expressions

So let's say you have a String field that you want to either query by a value or skip in the WHERE clausule completely. How would you do that if null is not traversed to {}?

First, let's make an example and then I'll exaplain everything in details.

query GetItems($field: String_comparison_exp!) {
  items({
    where: {
      field: $field
    }
  }) {
    id
    field
  }
}

And the accompanying variables section to go along with it:

 { field: value ? { _eq: value } : {} }

So what happened here? First, as you can see we're not passing the value of $field anymore. Instead we're passing a String_comparison_exp. This is a way of passing the actual expression in variables. Previously, in Hasura <2.0 when a value was null the actual epxpression evaluated to an empty object ({}) which in turn evaluates to TRUE in the SQL being generated. That last part still holds true, but null is no longer collapsed in Hasura 2.0. Instead you need to do that yourself. There was a ton of issues with people deleting whole content of tables and so they removed this particular functionality.

Remark: if your field is not of type String there will be an error telling you what type of expression_exp you need to use. Just read the effin error message :D.

Summary

So now you know how to manually do the collapsing and you're the boss of GraphQL again!

Happy coding!

Classes and inheritance with Vue CLI-generated Cypress tests

This is going to be a quick one but took forever to figure out. Brace yourself!

The setup

You have a project that is managed by vue-cli and you have end to end tests created with Cypress (all stock!). Now you want to move it to the next level and use wrappers as described in this tutorial.

The problem

When you try to create classes in separate modules the strangest thing happens:

import _typeof from "../../helpers/esm/typeof";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

This is easy to fix. Just install @cypress/webpack-preprocessor package and follow the instructions in tests/e2e/plugins/index.js - it's all there.

But the moment you'll try to use them... all of the sudden no tests are found.

The Solution

The actual issue here is transpilation and yes, you've guessed it - it has to do with Internet Explorer support. The fix is super easy.

Go to .browserslistrc and add the following line at the end of the file:

not ie > 0

And live is good again :) I so hope the masacre called Internet Explorer will be over really soon!

Happy coding!

ESP3D on SKR 1.4/1.4 Turbo with ESP01S

So you have the board. It's new, shiny and it has this strange looking 8 pin port labeled WiFi? Seriously?! WiFi on that board?

Yes! And it is quite easy to set it up! Curious? Let's begin!

Installation of required tools

For obvious reasons I'll tell you how to do it on Linux. It may work on MacOS too and I doubt it'll work on Windows. Linux is my go-to system and I don't use anything else.

Installing PlatformIO

First you need Platformio commandline tools installed. You can find the instruction on PlatformIO website here.

I've had to symlink the pio command to ~/bin/pio to have it available without specifying the full path. Your milage might vary.

Clone the repository

This is quite easy if you already have Git installed. If you don't have it check out this site for further information. Once Git is on your system clone the repository by issuing the following command:

$ git clone https://github.com/luc-github/ESP3D

Building

This is the coolest part :) There are a few commands that will get you to 100% in no time thanks to PlatformIO:

Erasing EEPROM:
$ pio run -e esp01s_160mhz -t erase

Uploading the firmware:
$ pio run -e esp01s_160mhz -t upload

Uploading files to the SPIFSS
$ pio run -e esp01s_160mhz -t uploadfs

Configuration of ESP3D

Configuring the module is pretty straightforward and described really well on this page so I won't duplicate the content. Clicking a link is easy enough :D

Configuration of Marlin firmware

Now this used to be a royal pain in the neck requiring you to modify framework code which was plain and simple ugly. Luckily enough this is now made super simple!

Find a place in Configuration.h that has the following line:

/**
 * Select a secondary serial port on the board to use for...
 * :[-1, 0, 1, 2, 3, 4, 5, 6, 7]
 */
//#define SERIAL_PORT_2 -1

and change it to look like this:

/**
 * Select a secondary serial port on the board to use for...
 * :[-1, 0, 1, 2, 3, 4, 5, 6, 7]
 */
#define SERIAL_PORT_2 3
#define LPC_PINCFG_UART3_P4_28

The #define LPC_PINCFG_UART3_P4_28 is the newest addition to the LPC1769 core and allows to use the correct pins for the second serial port so that the module can properly communicate with the board.

Compiling Marlin

Now that we have PlatformIO installed we can build Marlin from command line which I think is super cool and so easy! Switch to the root of the Marlin repository and issue the following command:

$ pio run -e LPC1769

And a few moments later... that's it! You have the latest firmware in .pio/build/LPC1769/firmware.bin

Have fun!

I solved the biggest problem I've had recently

One of the biggest headaches I've had recently was to get a software NLE (non linear video editor) to do friggen frame freezes. I edit videos in such a way that I can explain what I do on the screen which, obviously, sometimes requires to pause the video feed and let the audio do its work.

Up until yesterday I've been using Blender's F12 (or as you'll know it Render Frame) feature, then clicking "k" for cut and inserting the image in the place where I needed to do the freeze frame. What a colossal waste of time! And I've had that feeling for over two months but couldn't find a solution for it.

So I kept on doing it and I kept on searching for alternative software that would allow me to do what I need....

The solution

Sometimes it is better to look at the tools you already have at hand and learn them in more depth than just start looking for alternatives. This was the case Today with me and Blender. Blender is a fantastic NLE and I dare to say it satisfies now all the needs I'll ever ever will have. Especially now that I have learned the Shift-K (hard-cut) feature.

So the thing is there's a difference between a soft-cut (k) and a hard cut (shift-k). With soft-cut your clip will extend beyond the last frame when you extend it on the timeline. With hard cut it will essentially repeat the last frame which was what I was looking for in Blender for over A FRIGGEN MONTH!!!

God! I wish someone would have written an article about freezing frames in Blender....

In the mean time... keep on having fun!

Building a MIDI console with Arduino

I have recently been overwhelmed with what can be done with Audio on Linux. The DAWs, like Ardour, are not only free but also so extremely powerful you can actually do lots with it. I don't know if it would stand against the big guys but knowing there's no limitation for tracks, buses and the use of plugins it seems like the sound editing capabilities are only limited by the CPU power. Or are they?

Hardware to be made

In point of fact I am not a professional. I did take some piano lessons (my mum was a piano teacher and I was forced to follow in her footsteps for 5 years that I would rather forget) but beyond that and a few years of learning the theory of music I have no idea what I have set out myself to do. So what is it exactly that I'd like to do?

Well, it is not all that difficult. I think it is far more enjoyable to tweak all the knobs in a DAW if you have... welll.. knobs :D Moving them all with a mouse is just such a pain in the ass. So I have decided to make some hardware that will allow me to control the DAW with physical knobs.

Following are some basic ideas that I have that will allow me to complete my mission:

• Every mixer console has a slider for volume - I need one of those
• Every mixer console has a number of knobs that can be turned from left to right that will then change some parameter in the DAW - configurable. I need at least 8 if not 12 per channel
• I need a set of buttons that will control solo, mute and record per channel. I don't feel like pressing a key combination to achieve any of those
• I need a section that will have a master volume control as well as a set of knobs to control the output parameters. At least 8-10 for that purpose.

That brings me to a whopping 13 potentiometers per channel plus 3-5 push buttons and 11 for the master control plus some 10+ push buttons. No microcontroller can handle that amount of analog inputs alone. This is why I came up with the idea of modular design that will help me accomplish my goal (some time in the unforeseeable future :D).

The grand design

I don't want to be limited by the number of inputs at any stage. That'd be ridiculous. So instead of making an all-in-one design I am going for a modular, expand-as-you-go design that will allow me to basically define two types of modules:

• A channel module that will pretty much be a device on its own, handling all the analog and digital inputs and being an I2C slave that will allow a master to read the state of all the knobs at once
• A master module capable of recognizing all the connected slaves and sending their values over MIDI as they change

Each module will run its own ATMega382p (Arduino) with the necessary I2C hardware (like additional ADCs over I2C or I/O expanders if I choose to go with encoders rather than potentiometers). That way every module will be a slave and the master can ready the values of each control at a time of its choosing leaving the combining and transposition to MIDI commands to the master controller. Cool, ain't it?

Let the fun begin

So here I am, 3:40am, with that crazy idea in mind, putting it all on the blog. I really would like to make a big console for 32 channels but I think I'll start with 1 or 2 channels and the master to validate if the design scales.

Have fun! I know I will!

Vue.js and dialogs

Let's think for a moment about modal dialogs. What is their usage pattern? What are they for, I mean conceptually...

Dialog unveiled

When we create a dialog it is usually to gather some feedback from the user. It might be either a simple Yes / No or some form that the user needs to fill in and return that input after some form of interaction with that dialog.

Unfortunately there is no direct support for this kinds of interactions in Vue.js (nor in any other reactive framework, to be honest). This means that we need to resort to stuff like this:

data() {
  return {
    isConfirmationDialogVisible: false
  }
},
methods: {
  showConfirmationDialog() {
    this.isConfirmationDialogVisible = true
  },
  hideConfirmationDialog() {
    this.isConfirmationDialogVisible = false
  },
  handleConfirm() {
    this.hideConfirmationDialog()
    // the dialog ended with "OK" - perform some action
  },
  handleCancel() {
    this.hideConfirmationDialog()
    // the dialog ended with "Cancel" - do nothing
  }
}

The reason why we're doing all the state mutation nonsense in every place where we want to use a dialog is that the general approach in framework such as Vue.js is to base everything on state and we're completely ignoring the imperative nature of some of the processes. What is even more disturbing is that quite frankly the isConfirmationDialogVisible doesn't really belong with the place of use of the dialog. It should be an internal implementation detail of the dialog itself. But since we don't have implicit support for imperative programming with Vue.js it is sort of necessary to resort to stuff like that. But is it?

API is not just props and events

You might be tempted to think about the API of a component in terms of props that component accepts and events it emits. And even though they form a very important way of communication between parent and childs it is only 2/3rd of the story. Each method you define in the methods block is essentially part of the API of a component.

Suppose we have a dialog component that has the following two methods:

methods: {
  open() { ... },
  close() { ... }
}

Now if we use that dialog component somewhere it is quite easy to call those methods:

<template>
  <MyDialog ref="dialog" />
</template>

<script>
export default {
  mounted() {
    this.$refs.dialog.open()
  },
  beforeDestroy() {
    this.$refs.dialog.close()
  }
}
</script>

This means that we can imperatively steer when the dialog is open and when it closes. This way the state of visibility of that dialog is stored with that dialog and not in every place that uses that dialog which improves the usability quite a bit.

Promises, promises

Knowing that we can actually call methods on components let's move on to the concepts of modal dialogs.

Modal dialogs are dialogs that limit the possibility of user interaction to their content and usually finish with some result of that interaction. A good example is a popup that asks a question to which a user can say Yes or No or prompts the user to enter some data in which case there are usually two outcomes too: either the user entered the required information and approved his/her choice by pressing OK or resigns from proceeding, usually with the user of a Cancel button. It all bears a lot of resemblance to the alert() and confirm(), doesn't it?

The way it is usually handled in other frameworks (the Windows API, GTK just to name a few) is that the call to the framework method is blocking and once the user interaction is done it returns some result. In the browser a blocking code like that would result in everything going sideways. However, and this is where JavaScript really shines, there is a built-in concept of values that will be delivered later in time. This is the concept of Promises.

What if our dialog would expose a function like that:

methods: {
  async show() {
    return new Promise(resolve => {
      this.resolve = resolve
      this.show = true
    })
  },
  onOkButtonClick() {
    this.show = false
    this.resolve && this.resolve('ok')
  },
  onCancelButtonClick() {
    this.show = false
    this.resolve && this.resolve('cancel')
  },
},
data() {
  return {
    show: false,
    resolve: null
  }
}

Now that we have this we can use it in the code of a component that needs this kinds of interaction in a very nice way:

methods: {
  save() {
    const confirmation = await this.$refs.dialog.show()
    if (confirmation === 'ok') {
      // do something, the user is OK with it :)
    }
  }
}

The most important part of that approach is that you're not multiplying state that doesn't need to be multiplied and as a bonus your code expresses the intent: show a modal and react to the result of its interaction with the user

Have fun!

How to be successful when coding from home?

These are extraordinary circumstances for many organizations. The corona virus has forced a lot of people to stay home. This means that many people have found themselves in a situation they have never been before and might not feel very comfortable just being alone. In this post I'll try to share my tips for working remotely that I have gathered for over 7 years and being quite successful in it. Quite frankly I would never go back to the way things were before...

The bottom line

If you're like me and you don't feel like reading long posts here are the highlights:

• Control is good - trust is better and pays off in spades! It is especially difficult for managers when they have no oversight over their workers but it is absolutely necessary to hold your horses and let the situation settle. This is where many managers will fail and only the best ones will prevail. That being said it is equally hard on employees to trust themselves.
• If you're an employer you must believe in your people. They will do a good job even if it will take them time to adjust and get comfortable in the new situation. Judge the effects of work - not the workers - and remember that chemistry doesn't happen over night. Manage your expectations!
• If you're an employee know that working from home doesn't mean you're off work. It just means that you have a really small office. It needs to be properly equipped and comfortable. Keep up the good work and you will prevail
• Communication is key! Learn to use the tools at your disposal. Things like Skype, Hangouts, Zoom, Slack, Teams and Discord are there for you to take full advantage of what they provide. Make sure you have more than one tool at your disposal.
• Limit the necessary communication. It is the key to not getting distracted. There is no such thing as an urgent email. And it also means you need to have a discussion about it with your wife and kids. Be fair to your family!
• If you like working in pair use it to keep connected with your peers. Tools like VS Code combined with a voice call help you do that!
• Make sure you have more than one option to connect to the Internet. LANs do break and having a backup LTE connection will let you concentrate on work and it will put yours and your manager's mind at ease :)

And one last thing...

The thing I found most difficult is to accept yourself. There's nothing in the whole wide world that's worse than judging yourself over and over again to the point where you are so down you can't take anymore. There are times when we're overly productive and times when we suck, big time. No matter how you want to slice it the sine wave is the most perfect shape in the world. It's the rule all living things live by, no matter if they like it or not. Accepting it will help you understand where you are, where you are coming from and where you're headed.

Have fun!!!

If you made it here and want to learn more about my experience with working from home - read on :)

The circumstances

My adventure with working from home begun some 14 years ago when I joined Sabre inc. It was the first company that employed proper VPN technology and gave us all laptops to work on. Since many teams were dispersed throughout different continents it was obvious that from time to time you would work in crazy hours. For example we have had regular team meetings every Thursday at 8pm CET. Staying at work for so long, although possible, was in fact not very practical (not to mention my wife was not very happy about it).

On top of that there were times when I needed to work directly with a guy that lived on Hawaii. That's 12h difference from CET! To put it in perspective if some of you end your day at 5pm it was 5am (yes! the middle of the night!) for Walker. Walker was a very important person (a VIP you might say) because he was the original author of the software we were working on. So he has had all the intimate knowledge of the system and was the best person to learn from. Frankly I wouldn't like to be in his shoes getting up 4am just to have a call with some guys across the globe :) And did I mention I am not really a morning person?...

The solution

And so I came to the conclusion that it would make sense for me to start working in a timezone that's a bit of both: 2pm to 10pm. This would mean I would have plenty of overlap with Walker and the rest of the team based in the US yet enough time to take care of my daily business. The downside, though, was that there was nobody in the office after like 6pm and staying alone in a huge office wasn't my idea of fun. So I worked remotely for half a year. There were no papers to be signed, no permissions to be given - just my personal decision to have more time with the guys overseas.

The first few days it felt really strange. I was organizing my home office for a few hours, reorganizing my desk every now and then to fit the new situation, then doing a bit of project work, having lots of time with the rest of the team in the States and in the evening watching a movie with my wife after work. The adjustment period went on for about a week and after that it felt like I was doing it forever.

Now that I think about it in fact I was doing it forever - just didn't realize it! I am a self learner. I didn't finish my study at the university, I wasn't particularly good in high school and even in ground school things were not looking very up for me. All because I preferred spending time coding. Yes, I started coding at the age of 12 and I knew I wanted to be a programmer when I was 6 years old :)... Quite frankly I don't know how I managed to meet that wonderful girl that I spent over 23 years with :) I think I just got lucky!

Communication

I am an introvert. My wife would say that's not really true but I know how I feel inside. It isn't a bad thing - it just means I can concentrate better when there's less people around me. Sure there are times when I am fed up with just my 4 walls and I am looking for some company. But that grows old very soon for me. Even though I can literally see the office from home with a naked eye I go there maybe once a month, often times even less. I found that it is way more productive if I can shut out everybody and just do coding. That led me to employing rules like checking emails only in the morning, keeping to the necessary minimum my interactions on Skype - you know what I mean.

How does that help you?

Using multiple ssh keys with Github (or any other host)

Imagine you're working on one machine with multiple clients. In that case each client might require you to have a separate account on Github. This means that you need to have separate SSH keys for those accounts too and that in turn means is a pain in the butt to have it working.

If you're on Linux (and probably MacOS too) there's hope for you! Follow those simple steps to get everything setup so that you won't even notice it is there!

Step 1: Add a host entry in ~/.ssh/config

Host client-github.com
     Hostname github.com
     User git
     IdentitiesOnly yes
     IdentityFile ~/.ssh/client_rsa

This allows you to connect to a host named client-github.com which will in fact connect to github.com but with a specific identity file (ssh key)

Step 2: Add the following 2 entries to your ~/.gitconfig

[url "ssh://git@client-github.com/client"]
        insteadOf = ssh://git@github.com/client

[url "ssh://git@client-github.com/client"]
        insteadOf = git@github.com:client

Using client-github.com is not really practical. There are instances (like linked npm modules from github.com) where you're not directly in control of the hostname. That's where the URL substitution in Git comes in handy. Whenever someone requests a URL from the client's namespace we substitute it with our custom address and everything's golden

Obviously if you substitute the client part of the custom hostname with the name of the client it will be easier for you to manage multiple such cases :) Just sayin'...

Have fun!

How to pass an interview?

This is sort of a generic post that I feel might help one or two people when they go for an interview. If you find it helpful throw me a comment. If you find it stupid and you feel that I am not right - say so as well. Criticism is WELCOMED!!!

The stage

The stage is simple: you are looking for a new job. For the sake of simplicity I will focus on a new job for a programmer.

The process

It does matter if you're applying for a job that is way above your current experience or if you're applying as an expert in a field  your client requires. In the first case it is extremely easy to pass: all you need to do is be open, make sure you outline what you don't know and what you're keen on learning, what you expect to gain (besides money!) from your new position and chances are if the employer is smart enough (and you engaged enough) that things will play out just fine.

The other situation is a bit different. You have to know what you're selling if you wish to sell it to someone. A good example (and a very good exercise before going to an interview) is to present your topic to an audience on a conference. So let's assume you apply for a position as an architect of some sort. Before you do the actual interview apply for a presentation at your local interest group (a meetup, conference - whatever!) and do the presentation. What's nice about it is you'll get immediate feedback from the audience. And remember: no feedback is also some feedback! It just means you have not been good enough to spark interest in your audience. And I don't mean Q and A session right after your presentation. If there are people hunting you after you're packed and ready to leave asking questions - you did a good job!

The reason I am bringing public presentations up here is because those are equally stressful as an interview and touch on the same kind of topics that you will encounter during an interview. Pretty much the same stuff. Imagine, if you will, you're presenting in front of 100 people (not uncommon even on local meetups). And all of the sudden someone asks you a question you know absolutely nothing about. How would you react? How would you react in a similar situation during an interview?

Epilogue...

This far I have I have had countless interviews - only two of them were negative and I didn't even want the position I was applying for. From that I am gathering that you only pass interviews for positions you will actually find yourself useful. If you really really really want to work for Google - get interested in the stuff they do. If you want to work for Microsoft (although I find it hard to believe) get interested in what they do. Learn their ways and technology, learn about their requirements and prepare yourself for what will be asked. Don't be ashamed to say I don't know. It is way worse to lie you know stuff than to admit it.

Designing as small stable Core XY 3D printer

The journey so far

I have been completely swallowed by the idea of designing my own 3D printer. Just like that. From the day I have put together my Ender 3 that finally came in from Ali Express all I could think of was this project of creating the smallest working CoreXY 3D printer possible. I don't actually care about the possible print size (unless it is smaller that 1cm per 1cm per 1cm). What I do care about is making the 3D printer easy to put together and solid as fuck.

Currently I am at a point where the structure is in place (and it is a tweaked one I tell you), all the roles are also in place and what I fight for at this point is to make the mount for the roles stable enough to handle the Core XY load with 3D printed elements)

Stay tuned for more information on how this printer is being created :D

Making an UV image setter for PCBs

This is going to be a quick one. I wanted to do one of these for a long time but somehow it eluded me for quite some time (too long if you ask me)

The problem

I need to make a PCB for a small circuit at home. Conveniently. After I'm done designing the circuit it usually is late and the sun doesn't shine no more. I want to be able to use the photoresist dry film (foil) and I want it to be fast!

The solution

I used to use a 500W halogen, then an energy-saving fluorescent lamp but all of those things were just cumbersome. Finally I have decided to make use of UV emitting diodes.

See the following picture of a ready-made product:

The device is powered by a 3 cell LiPo battery (I have a bunch of them for my flying toys). The time it takes to properly develop the foil is ABSOLUTELY SHORTEST FROM ALL THE LIGHT SOURCES I USED BEFORE!!!

The 500W halogen needed circa 30 minutes in the setup I used. The energy-saving light bulb needed 12.5 minutes. This little toy does the same and more in 90 seconds!!!

The making

Making such a toy is extremely simple. You just cut as many pieces to length as much space you have in the housing of your choosing (I used the Z23 housing where I have cut a full-size hole in one of the parts).

Next you cut a piece of paper that fits inside the housing. Once you do that take the pieces of strips and glue them on to the piece of paper in a similar way that you see on the picture above. The point here is to make the as evenly spaced as possible.

Then you solder them to form a strip (plus with plus, minus with minus). On one end you solder any kind of connector (I went for the small JST one because I have a lot of them). Then just make a hole on the side where the leads with the connector are coming out.

Finally place that paper with glued strips inside, apply power and enjoy!

Happy PCBing!

The Flame Wars - story of my life

Flame wars have been with us for God knows how long. Christianity vs all other religions, Islam vs everyone else, socialism vs capitalism, Atari vs Commodore, Amiga vs PC, Macintosh vs the World, Linux vs everyone else. Fighting for our believes seems to be at the core of our nature. We just can’t help thinking that what we think is best must be the best - because we deemed it to be the case.

Developers are a particular strain of oddities: Whatever technology we seem to work with at the time seems to be either the evil incarnated or the impersonation of God - depending on the current hype among our friends that we trust know better. Very seldom it is the case we grow big enough balls to actually go over the fence, dig into the dirt and figure out for ourselves if the grass on the other end is really so gray as we deem it to be.

It has been an eye opening experience every time I took a turn in my career when it came to the tools I worked with.

I started in the 7th heaven owning an Atari 800XE and 3 games I could barely hold still while loading a game from a tape storage. For that reason I started to learn what the keyboard and TV set has to offer beyond playing Mr Robot and Forth Apocalypse and I discovered that, in point of fact, Basic was a part of the package.

Soon after that I became a sworn 6502/C64 freak at the age of 14. I know. I betrayed. I was the outcast. But I was doing ora-dycpys going over side borders while playing ripped tunes and waving Dedal logos. And I did it all in machine language - not even assembly! All I have had was the Final Replay 2 cartridge but for reasons I cannot fathom it was the best thing that ever happened for me. I was able to see the results of my work upon issuing a single sys command. And it looked great!

At that time Amiga was “the better game machine for me”. I mean, with all due respect, I still think that the playability of Giana Sisters, the Mario clone for Commodore computers, was way better on C64 than it was on any platform (even XBox!). Having said that I was kind of socially pressed into wanting the A500 with 512Kb of Slow RAM extension to be able to play Pinball Dreams and IK4+. But playing games was never my thing. After I saw how much Giana Sisters sucked by comparison I started looking for things to do with my shiny new computer. Pascal was there, but the animation example I saw was visually so bad that I couldn’t stand watching it. The C example didn’t even compile so I thought it was a waste of time to get interested in it. But the good old low level language, Motorola 68k assembler, was quite a nice fit for me after having a few years of experience in programming registers on its older uncle. Man, those plasma screens I loved so much! I was staring at it for hours! I was finally home!!!

At that time I remember reading a quite far reaching article about code quality. A couple of demo scene Gods discussed if it makes sense to write good quality code or if it is more important to just code it in the fastest way possible, win the compo at a demo party and move on to the next one. A question I sure hope the industry has answered so far to everyone’s satisfaction.

Being bored writing sinus scrolls, 3D animations and plasmas I started looking into this promised land Amos was said to be. With its Amal animation language targeting Amiga’s coprocessors it was told to be even better than asm itself. I remember it being the first IDE having an integrated debugger, forward function declaration and (upon pressing F9) code folding. Man! I missed that for years afterwards!

Then one day everything changed. My beloved A1200 was (again, upon the pressure of friends) exchanged to a 486SX with 50MB hard-drive. It was running DOS, Norton Commander, it looked bad (compared to A1200’s workbench) and what I had no idea then it was the first computer running an OS that was not Unix-like. Apparently, for what seems to be forever, I have fallen into the Redmond dream that I was unable to wake up from.

I remember a few years after that trying to install RedHat Linux from a 23 floppy disks installation - and failing miserably. I thought that those “Linux” guys must be insane to be using something like that. I was a sworn DOS enthusiast! I discovered Windows 3.1 and the only thing it was good for was multitasking to run the BBS software and at the same time to be able to code in Turbo Pascal that I fell in love with in the meantime. Pascal wasn’t fast enough though to write intros/demos so me and my friend resorted to “db 66” asm instructions to speed up double buffering.

Not long after that I learned that programming isn’t really something lots of people do particularly well - me included. That was when I discovered The Almighty Internet. Suddenly the knowledge that I craved for so much for so long became within my reach. But it was so overwhelming!!! Just going through some examples that I found on swagger took me a lot of time. Those were the times when I first saw Qnix - a windowing system-enabled one floppy-disk, Unix-like, free to use real time operating system. So Unix did have some appeal after all, I thought. I went even deeper when I learned about the Linux Router Project - a one-floppy-disk Linux distribution that did IP routing and masquerading out of the box. I knew Linux was the one - but it was so different than Windows and Dos Navigator that I grew so accustomed to!! All the things were different. That was just a hassle I was not ready to go through.

Fast forward a few years and the Turbo Pascal I worked in became Delphi and my professional career was booming! I was moving to a different country, founding my second business - I was on the roll! To have everything in check instead of buying Windows XP I decided to try out this “SUSE Liunux” as it was promised to “just install and work” on my PC. Well, it did. But it was soooo different than Windows XP and… Delphi didn’t run there. I was still deep in the Redmond dream.

I don’t remember when it really happened but it must have been when I received the Ubuntu 7 something CD for free. It really delivered on the promise to be approachable enough for everyone - this time me included. But Delphi still didn’t run there. By accident that was the time I went to a seminar in Warsaw where the successor of Delphi 7 was announced and I realized that this is the end of what I was able to get out of the platform. So I started looking…

At that time I worked in a corporation that offered me an option to learn Java and .NET. C# looked like a natural choice (being coordinated by the creator of Delphi himself) but for reasons I cannot fathom till this day I decided to go with Java. The first years were a disaster! Nothing was like it should have been. Java developers spoke of things I had no idea even had names (like refactoring, unit testing, clean code, design patterns) although upon deeper investigation it looked like we spoke about those same things - just naming them differently.

I fell in love with Groovy and Maven (I know - I’m different that way). I use both of those tools till this day with great proficiency. I think that Maven was the best thing that ever happened to Java. It made it approachable for mere mortals and freed us from Ant hell. Groovy on the other hand was for me the Pascal equivalent on the JVM. It had the concept of properties that I missed so much ever since I left Delphi behind. But at the same time I unwillingly became independent of the environment I worked in. Linux, Windows, OSX - I didn’t care anymore. So I realized one of my long-lived dreams and switched fully to Ubuntu - the Linux platform for the rest of us :) It was a natural step because all production servers were running Linux so using SSH that was not (and still isn’t) present on Windows felt so natural. And so, Windows became “the OS I sometimes run”. I do remember the day when I installed Linux exclusively without dual-boot. It felt weird - but good.

Since then I moved from Java to frontend development. Something I thought I had some idea of but was proven sooooooo wrong. Learned that what you see is not really what you will get (as in I finally learned what the hell everyone else was talking about in relation to Internet Explorer 6). But I love every bit of it. It gives out of the box tooling that on other platforms you need to pay good money for. To some extent I am even happy I learned about frontend development through the Ember.js perspective. It was the worst thing after getting struck by Java Server Faces but it made me explore the domain to see if there’s something that can substitute this horrible piece of machinery. So I learned about React and fell in love with it, I also learned about Angular and how it makes development more like I was used to from my times in Java and ended falling completely in love with Vue.js.

Then I decided to move to a company that thinks very little of frontend development but is really big on Sitecore. If you don’t know what Sitecore is think Wordpress on .NET that you can pay for because you think it is better than X or Y. This meant for me taking a round trip to the .NET world and the C# language.

At each step after a few months of digging in I felt my passion for software development giving away field to understanding of capabilities. Every week/month/year I meet sworn enemies of technology X than can give me 5, 10 sometimes even 20 reasons for not using the other, legacy, frameworks, languages, platforms. The truth however is that everything has its reason for existence. Yes, even jQuery and goto. I just wish I learned that years ago. The only thing that really counts is writing code for other developers to read (regardless of the platform/language) and questioning the status quo if it makes your life harder.

So going from 6502, through M68k, Amos/Amal, Pascal, Delphi, Java, JS and the browser and now .NET and Sitecore I learned only one thing: developing software is easy. But doing it right is hard. And if you don’t use whatever means necessary to help you out then sinking in the pool of your own blood and excrements is as obvious as the fact that sun’s rising in the east. The rule for me now is to first learn for myself if a piece of tech is useful in a context - not “in general”. And as a rule it has its exception for me: JSF. Everything else I learned over the years made me a better programmer, person, husband and father.

Happy years!

Creating PCBs

I have been working lately on perfecting a formula for preparing PCBs. If you're like me and like your designs tried out faster than a few days read on.

Assumptions

I am assuming you either are using the applications and materials that I used or you are happy to realize the same functions in the application you are using. I will be using Linux, KiCAD, a PDF viewer for printing and chemicals available in Poland, where I live.

Preparing the printout

The following assumes you can use KiCAD. KiCAD's printing functionality is basically broken. The quality of printouts is so low you can't do anything with it. The following mitigates that by using Plot.

When creating designs that contain through-hole components make sure to check the size of pads. By default they are tiny-tiny small and can easily break when heat is applied. To change the parameters of a pad right-click on, select Properties and set the Hole shape to Oval, Size X and Size Y to at least 2. With that there is probably enough space to solder.

1. Create your design
2. Select File / Plot
3. Set Plot format to PDF
4. Select the copper layers
5. Select Mirrored plot and Negative plot
6. Set Drill marks to Actual size
7. Click Plot
8. Open the created PDF and print it on a Canson calcque
9. Use Density Toner to even the traces on the layout. Density Toner is basically rectified gasoline which melts the toner making it evenly black in all spots. This prevents the printout to leak UV rays through

Depending on your printer (I use OKI C332 laser printer) it is important to set the printout density to maximum. That black toner is all that will block the UV rays from the light-sensitive material!

Preparint the PCB

1. Cut out a piece of laminat to the size of your project. You don't need any excess - that's a waste I don't like
2. Cut out the printed layout to the size of your PCB. Again, I do that precisely which then makes aligning things easy
3. Cut out a piece of light-sensitive foil with additional 5-10mm. That excess is needed for the board to be exactly covered form side to side
4. Clean the PCB. I mean like really, really well. I use a special sanding block for cleaning PCBs that I bought ages ago but a very fine sanding paper will do just fine. Don't overdo it - you don't want the copper layer to get too thin!
5. Wipe the board with a clean tissue so that any dust is removed from the surface
6. Peal the cover off of the foil on the inner-side. I do that with a piece of tape - works every time with absolutely no hassle
7. Place the foil on the PCB - the side that had the outer foil removed
8. Make sure there are no air bubbles or dust bubbles between the foil and PCB
9. Put the PCB between a folded sheet of paper (PCB towards the fold!) to form a sandwitch
10. Run the sandwitch through laminator at least 3 times. Make sure the laminator is properly heated!
11. Remove paper from sandwitch leaving only PCB. Beware not to peal of the foil from PCB
12. Put the printed layout toner-down on the PCB
13. Spray the PCB with layout on it with Transparent and remove all air bubbles
14. Cover the PCB with a plexi and make sure there are no air bubbles. If there are then you either have to litle Transparent or the field is not even.
15. Place a 32W energy saving bulb 22cm from the PCB.
16. Turn on the light source for 12-13 minutes
17. Remove the PCB and put it in a dark place for 10 minutes (necessary for the chemical process to finish)
18. Remove the outer protective foil - watch out not to break the layout!
19. Use foil developer for 2 minutes. While developing use a soft brush to remove the disolved foil. Do NOT exceed 2 minutes!
20. Wash the PCB under warm running water and using hands delicately remove any remaining pieces of foil.
21. Put the PCB under light for 5 minutes. That way if there are any parts of the foil lefy they will turn blue and you'll know you have to start again
22. Put the PCB in a dark place for 5 minutes for the chemical process of hardening the foil to settle
23. Use B327 to remove non-covered parts of the copper; Don't keep it too long.
24. Once all the parts are disolved put the PCB under running water and wash excessively
25. Pour acetone on the board using surface tension to flow the liquid from one side to another. Do that until the foil peels of from the traces
26. Wash under running water

That's it! With luck the PCB can have extremely small traces (requires good printer which the C332 is not) and very delicate handling especially when washing out the unexposed foil. I stick to 0,25mm traces and above but even that can sometimes go wrong. 0,5mm traces are guaranteed to be 100% successful.

Important remarks

Don't rush things! With the exception of exposing the foil for too long and developing the foil for too long take your time! Rushing things is the worst you can do. This process requires you to be gentle with the board, precise and methodical. Rushing things will only get you to broken traces.

That is it! Happy etching!

POI 10, tests and coverage

The problem

You're using POI 10 with @poi/plugin-karma and want to get coverage of your unit tests. The way to do it is to specify:

  plugins: [
    require('@poi/plugin-karma')({
      coverage: true,
    })
  ]

and theoretically you should be all set. Only that it won't work:

TypeError: Cannot read property 'preLoaders' of undefined

I've looked everywhere and it seems that it is, unfortunately, not a known problem. What is even worse the GitHub repo with POI sources, version 10, is GONE! I mean I understand everything but removing history of an opensource project - that is a bit too much for me. SHAME ON YOU, EGOIST!

The solution

The problem is that @poi/plugin-karma taps directly to options of the vue-loader whist seems to be undefined at that point. The quick and dirty solution is to add those options:

  plugins: [
    require('@poi/plugin-karma')({
      coverage: true,
      chainWebpack (config) {
        config.module.rule('vue').use('vue-loader').options({})
      }
    })
  ]

I need to dig more into the matter why vue-loader isn't configured there and why the hell when testing a Vue.js SFC still causes errors but for now for testing just javascript code the above solution works

Happy coding

Replacing strings in proxied response using Apache mod_substitute

This is another quicky but it took me forever to finally figure it out - maybe someone will have that same problem...

The problem

You're working on a site that uses Apache2 proxy to merge your local frontend development environment with a remote site providing the content. That is easy to setup:

ProxyRequests Off
ProxyPreserveHost Off

ProxyPass "/path-to-a-resource" "http://localhost:3000/path-to-local-resource"
ProxyPass / http://remote-host/
ProxyPassReverse / http://remote-host/

Now all is nice and dandy until all you want to do is just to merge the remote site with local resources on localhost. It starts to get interesting when you want to modify the content sent by upstream server. Why? Well... let's say links in that sent HTML are absolute and you'd like them to be relative. There's a ton of options that are available once you can do that!

The solution

To be able to substitute strings in the response sent by upstream server there are 3 things that need to happen:

• Enable the mod_substitute ($ sudo a2enmod substitute)
• Enable filtering using mod_substitute
• Specify replacement rules

The second part is what gave me a headache Today. Basically you need to understand 2 things: when Apache does the substitution it needs to have the full page received to be able to perform the substitution. That doesn't happen automatically. And then once the substitution is done Apache needs to put it all back together and send it to the browser. It's all done using the following for HMTL files only:

AddOutputFilterByType INFLATE;SUBSTITUTE;DEFLATE text/html

And last but not least: we need some substitutions to see the effect. For the purpose of demonstration we'll replace all class attributes with TEST:

Substitute "s|class|TEST|i"

That's it! It's easy as pie when you know the deal :) I know I'll be using it more and more in the future!

Happy coding!

Handling new POI's publicPath

Today I wasted over 3 hours frantically looking for explanation why the hell POI's publicPath setting thinks I am an idiot and it knows better what I want. So this is a quick post to let you know what you should do if you really want to change the output.publicPath in a POI-managed project.

The problem

Imagine you're working on some project that has pre-existing sources and their location is (surprisingly) not in the root of your server. That's the case every single time when you're working on existing apps trying to induce some build system on them to bundle up the scripts and stylesheets.

Usually, for those cases Webpack has a special configuration option output.publicPath that handles everything for you and life's good. POI, on the other hand, has that option exposed at the top level - but with a twist: it only works in final build and not in development mode.

The problem is, however, that if you'd like to work against an existing server that produces HTML and other artifacts you need to comply with that structure regardless of the mode. Unfortunately, POI fucking knows better! And here's the relevant point in POI's code that does it:

function getPublicPath(command, publicPath) {
  if (command === 'build' && typeof publicPath === 'string') {
    return /\/$/.test(publicPath) || publicPath === ''
      ? publicPath
      : publicPath + '/'
  }
  return '/'
}

module.exports = getPublicPath

I have no idea what was going through EGOIST's head at the time of writing but it must have been something really, really strong. Not good for opensource as it breaks the fundamental rule of least surrprise.

The fix

Instead of setting the publicPath in poi.config.js or setting it via command-line parameter override it in the resulting Webpack configuration like so:

module.exports = {
  configureWebpack(config, context) {
    // we're not setting publicPath as the general configuration option
    // because some sick bastard decided this will only have an effect
    // in production mode and we need it everywhere. Talk about predictability...
    config.output.publicPath = '/path/where/everything/lives/'
    return config
  },

With that life's good again (even thought it was so damn frustrating Today)

The architecture

Working on projects where the content is delivered from some sort of CMS or other app that has a fat backend isn't easy. It usually boils down to having everything running locally, even if we don't need it. There is, however, a better way of doing it! Use some reverse proxy to route traffic to your browser from 2 different sources: the backend and the frontend in development mode. Here's an example configuration with Apache2 but you can do much much more than that:

<VirtualHost :80>
    ServerName my-app.local

    # Make sure no caching is induced so that refresh always brings the latest version
    # run "sudo a2enmod headers" to enable headers module
    Header set Cache-Control no-cache

    # run "sudo a2enmod proxy_http" to enable http proxy
    ProxyRequests     off
    ProxyPreserveHost off

    # Serve all theme files from local development server
    ProxyPassMatch    "^\/path\/where\/everything\/lives\/(.*)$" "http://localhost:10001/path/where/everything/lives/$1"

    # Required by Hot Reload (run "sudo a2enmod proxy_wstunnel" to enable ws proxy)
    ProxyPassMatch    "^/(.+).hot-update.js$" "http://localhost:10001/$1.hot-update.js"
    ProxyPassMatch    "^/(.+).hot-update.json$" "http://localhost:10001/$1.hot-update.json"
    ProxyPassMatch    "^/sockjs-node/(.+)/websocket" "ws://localhost:10001/sockjs-node/$1/websocket"
    ProxyPassMatch    "^/sockjs-node/(.+)$" "http://localhost:10001/sockjs-node/$1"

    # Serve everything else from remote server
    ProxyPass         / http://dev-machine.somedomain.com/
    ProxyPassReverse  / http://dev-machine.somedomain.com/

</VirtualHost :80>

Also, don't forget to set NameVitualHost *:80 or the name-based virtual hosting just won't work. Now with that in place add the following entry to your /etc/hosts file:

127.0.0.1   my-app.local

and you're all set.

You can of course fiddle with it, add SSL support if your backend server requires it, but the point here is that it is possible and you can work without installing heavy backend to work on frontend!

Happy coding!

Scaffolding a new Vue.js component

I've been working for the past few months on a travel portal rewriting parts of it from old jQuery code to Vue.js - and learning a lot of stuff in the process. One thing that I learned the hard way is that scaffolding that's built in into Vetur is just not for me. It is too simple.

The naming convention we have for our component files is for them to have the same name as the file they exist in. So basically TestMe.vue becomes

<template>
  <div class="test-me">
    ...content
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'component'

@Component({})
export default class TestMe extends Vue {
}
</script>

<style lang="scss" scoped>
.test-me {
}
</style>

Makes sense?

The problem is that having to type this in every time I create a new component (and the number of those grows like creazy!) is tedious. So I finally got to it and created a snipped that works for me:

That's it! You type "sfc", press [Tab] and the component is ready to be worked on by magic of the VS Code templating engine.

The first thing that'll be edited is the name of the exported class. If it is OK then just press [Tab] to move to the name of the CSS class. Edit it if you must then press [Tab] again and you'll be able to select the processor for styles. The next thing that you get to customize is if the styles should be scoped. Once on it either press [Tab] to go with scoped styles or [Delete] and then [Tab] to go without scoped styles. Finally you arrive at the Hello, world! text where the editing of your component begins.

Have a nice day!

Vue.js - editor components

When talking about creating applications in Vue.js it is not hard to find one that does something to data. Obviously for state management there's Vuex, Redux and other stores but in this post we're going to focus strictly on passing state via props to components that one could generally call controls - so more on the lines of custom inputs.

The 3 cases

There are 3 cases that we will encounter when passing data down to controls:

• We're passing in primitive values (strings, numbers, booleans)
• We're passing in complex reactive objects (think: list of people)
• We're passing in a complex reactive object but we'd like to treat it as a primitive and have atomic changes to all its fields

Primitives

In the case of primitives the situation is dead simple: use v-model, you can react to changes by hooking up to the input event - done. The documentation is fantastic in that area so if you'd like to know more about it dig in!

Reactive complex objects

Imagine you have a data structure like this:

data = { firstName: 'John', lastName: 'Doe' }

In this case if you create a control (we'll call it DataEdit.vue) that you'd like to immediately edit the fields you could do something like that:

<template>
  <div>
    <input v-model="value.firstName">
    <input v-model="value.lastName">
  </div>
</template>

<script>
export default {
  props: {
    value: Object
  }
}
</script>

This means that if used in a parent component (ContactForm.vue) like so:

<template>
  <div>
    <h1>{{ person.firstName }} - {{ person.lastName }}</h1>
    <DataEdit :value="person" />
  </div>
</template>

<script>
import DataEdit from './DataEdit.vue'

export default {
  components: {
    DataEdit
  },
  data() {
    return {
      person: { firstName: 'John', lastName: 'Doe' }
    }
  }
}
</script>

then changes to values in inputs in DataEdit.vue component will immediately be reflected in ContactForm.vue. Vue's reactive system at its best.

Treating complex objects like a value

This is the trickiest one because even though we're passing on a complex, reactive object we'd like to get all the changes at once or none at all. You might ask why would you want such a thing? The answer is quite simple: you'd like to implement "OK/Cancel" functionality or (if the edits drive some kind of Ajax requests) limit the number of actions upon edits. It is quite obvious that there will be a need for a copy of the reactive object. For that I use cloneDeep method from Lodash and it works just great so far.

<template>
  <div>
    <input v-model="internal.firstName">
    <input v-model="internal.lastName">
    <button @click="$emit('input', internal)>Save</button>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'

export default {
  props: {
    value: Object
  },
  data () {
    return {
      internal: cloneDeep(this.value)
    }
  }
}
</script>

Now if that component is used in the ContactForm.vue (note the change from :value to v-model)

<template>
  <div>
    <h1>{{ person.firstName }} - {{ person.lastName }}</h1>
    <DataEdit v-model="person" @input="personUpdated" />
  </div>
</template>

<script>
import DataEdit from './DataEdit.vue'

export default {
  components: {
    DataEdit
  },
  data() {
    return {
      person: { firstName: 'John', lastName: 'Doe' }
    }
  },
  methods: {
    personUpdated(newValue) {
      console.log('Person has been updated to: ', newValue)
    }
  }
}
</script>

you won't see any changes to the header until they are saved by clicking the Save button. Pretty neat, right? On top of that you can be notified when the change occurred so if some additional action needs to take place (like updating list of people from an external database) by listening to the input event. That is just pure awesome!

One more thing...

If the editor persists it will now share the internal and value objects which will make it behave like the case where everything is reactive. Not good - let's do something about it

<template>
  <div>
    <input v-model="internal.firstName">
    <input v-model="internal.lastName">
    <button @click="$emit('input', internal)">Save</button>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'

export default {
  props: {
    value: Object
  },
  watch: {
    value: {
      handler (newValue) {
        this.internal = cloneDeep(newValue)
      },
      deep: true
    },
  },
  data () {
    return {
      internal: cloneDeep(this.value)
    }
  }
}
</script>

The introduced watch updates the internal state so that it is again disconnected from the ContactForm.vue. Of course in a situation where the DataEdit.vue component is removed from DOM due to let's say closing a popup then the watch is completely unnecessary. It does however come in handy if there might be a possibility that the data object in question (or some of its parts) can be modified from the parent component. The internal state will be out of sync in such case. This might happen if some of the details come from an Ajax request or a timer. The watch covers both cases so it is basically a universal way for data synchronization on changes from parent component.

Working example

I know this is a lot to take in at once. Therefore I have prepared a test application for you that illustrates all the pieces. You can find it at https://github.com/padcom/vue-editor-components

That's it, folks!