DEV Community: Daniel P 🇨🇦

Hacktober backfires on OSS

Daniel P 🇨🇦 — Thu, 01 Oct 2020 18:53:05 +0000

Hacktober Fast🍻

Looks like the lure of the free tshirt is causing more headaches than help to the open source community

A new twitter account @shitoberfest

is documenting collecting some "fun" contributions.

Tip

If you're participating, try to contribute in a helpful way.

how-to-contribute

Don't be this guy

(here's a couple fun ones...)

cover image

Start writing Vue3 now

Daniel P 🇨🇦 — Wed, 23 Sep 2020 23:30:49 +0000

This is about how to create a setup using online tools such as jsfiddle to start coding in Vue3 right away.

Vue v3 finally has a public release, which might get a lot of people wanting to try it out. The issue I find with these frameworks is that there is a bit of a setup to go through to get going, so I like when there's a way to just start using it with minimal setup.

In this case, I've been using jsfiddle to skip the setup of local environment for smaller tests or examples. You can use this in most REPL-style coding environments lie jsbin and codepen. Of course, if you want to setup a full-fledged project follow the official docs.

Here is a quick setup

add js resource (either via script tag or settings)
https://unpkg.com/vue@next/dist/vue.global.js

this should always get the latest version (3.0.0 at the time of writing), however the downside is that breaking changes may be introduced, so locking it in at a working version for posterity may be worthwhile for you.

Using vue.global.js (or the prod version vue.global.prod.js) will make the Vue object available as a global variable, and is IMHO the easiest way to do this

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

const app = Vue.createApp({
  template: `
    <h1>App</h1>
    <my-component></my-component>
  `
})

app.component('my-component', {
  template: `A component`
})

app.mount('#app')

This is pretty straight forward, and a common way of setting these up without ability to include Single File Components. And while you can put the template content of #app into the HTML DOM element, it is going to render before the html is loaded, and is not usable for components, so what I do is use the template tag and document.getElementById to get the content

And voila:

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <h1>H1: App</h1>
  <my-component></my-component>
</template>

<template id="componentTemplate">
  A component
</template>

const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

app.component('my-component', {
  template: document.getElementById("componentTemplate").innerHTML
})

app.mount('#app')

Note that Vue 3 doesn't require you to have a single top level component, which allows you me to skip the extra div to wrap the h1 and component tags in the app template.

link https://codepen.io/scorch/pen/yLOZyxg

Vue 3 docs: v3.vuejs.org

Image Credit: Paweł Czerwiński

Vue composable - array pagination

Daniel P 🇨🇦 — Sat, 28 Dec 2019 16:37:36 +0000

Vue composable - array pagination

This is an example of a creating a pagination class for of the Vue 3 composition API.

The benefit of the composition API is that it allows to encapsulate the logic in a reusable self-enclosed non-single-file-component. This makes it easy to reuse and, compared to a mixin, is more predictable and maintainable. Because Vue 3 is not released yet, this write-up will be presented using a global bundle which will allow easier showcasing in a jsfiddle. While I have not tried it, this should be possible to apply to a Vue 2 project with the composition-api plugin with few changes.

Composable function

const { computed, ref, isRef } = Vue;

/**
 *
 * @param {Object} options
 * @param {ref|number} options.pageSize
 * @param {ref|number} options.currentIndex 0 based index
 * @param {ref|array} options.array
 */
const pagin8r = options => {
  // setup props
  const pageSize = isRef(options.pageSize)
    ? options.pageSize
    : ref(options.pageSize);
  const currentIndex = isRef(options.currentIndex)
    ? options.currentIndex
    : ref(options.currentIndex);
  const array = isRef(options.array) ? options.array : ref(options.array);

  // create computed
  const total = computed(() => array.value.length);
  const currentPageNum = computed(() => currentIndex.value + 1);
  const numPages = computed(() => Math.ceil(total.value / pageSize.value));
  const range = computed(() =>
    array.value.slice(
      currentIndex.value * pageSize.value,
      (currentIndex.value + 1) * pageSize.value
    )
  );

  // create methods
  const gotoNext = () => {
    currentIndex.value = Math.min(currentIndex.value + 1, numPages.value - 1);
  };
  const gotoPrev = () => {
    currentIndex.value = Math.max(0, currentIndex.value - 1);
  };
  const gotoFirst = () => {
    currentIndex.value = 0;
  };
  const gotoLast = () => {
    currentIndex.value = numPages.value - 1;
  };

  // return props, computed, and method variables
  return {
    array,
    pageSize,
    currentIndex,
    currentPageNum,
    total,
    numPages,
    range,
    gotoNext,
    gotoPrev,
    gotoFirst,
    gotoLast
  };
};

Few things to note.

The function has been laid out to mimic a typical non-composable, grouping props, computed, and methods. All of these have been passed to the returning object, to be available for use.

The pageSize, currentIndex, and array props check if they are being passed a ref or a value using isRef. This allows the function to accept ref and non-ref values. This makes it easier to compose functionality if you have multiple composables. Having this functionality in the Composition API makes it well suited to build a library of functional bits that can be assembled together in various configurations. For example having a simple scroll listening composable, you could calculate the page index from the scroll position and pass it to the pagination function. The Vue component itself would only worry about tying the composables together and rendering the outcome.

In the example fiddle, I use a ref for pageSize, to allow editing it in the template through a v-model. The other params are not used after creation, so a ref is not needed (but possible).

let array = [...Array(50)].map((x, n) => n);
let pageSize = ref(4);
let currentIndex = 0;

It's not complete. Edge cases have not been considered thoroughly. For example changing the page size when you're on the last page does not update the pageIndex automatically. (i.e. if you can end up on page 20 of a 10 page book.) I would probably implement through currentPageNum though

const currentPageNum = computed(() => {
  if (currentIndex.value >= numPages.value) {currentIndex.value = numPages.value - 1}
  return currentIndex.value + 1
});

I'm hoping to keep adding more examples of composables over the upcoming weeks/months.

TL;DR;

Full example: https://jsfiddle.net/dapo/kmpj38od/

photo credit: https://unsplash.com/@moonshadowpress

How I test on front-end

Daniel P 🇨🇦 — Wed, 20 Nov 2019 06:06:51 +0000

On November, 21 2019 14:00 PM (EST) I'll be giving a presentation on vuemeetup.com

It will be about agile development with Vue, and in preparation I've come up with some content that I won't have time to cover. While this was meant for a Vue presentation, nothing in here is Vue-specific (Which is partially why it didn't make the cut)

Why test?

The role of testing, in the context of agile development, is to give you confidence so that you can release more frequently.

My view on testing front-end projects is that I'm mostly testing for regressions.

I'm not automating tests to make sure that it matches ticket acceptance criteria, I'm writing tests to make sure that the feature I just added will not at some point stop working.

When I've just added a new feature, I usually know it works because I'm interacting with it while I'm coding. So if I'm writing a test for it, I find it easy to get lazy and and write a test that doesn't capture enough of the functionality. If I think of the tests as trying to capture the functionality that I've implemented, I find it's a bit easier to get through the work of writing the tests.

How many tests do I write?

I was asked recently to quantify the amount of testing I would do for a (non-specific) project. I had a hard time giving a simple answer, because not only is it just the way I roll, it varies a lot from project to project.

I have one project that currently has no tests at all. I'm the sole (front-end) developer and the changes range from bug fixes to one significant refactor I've done. It is mostly a dashboard with limited ability to affect change. But it's not going to see release soon and some of the changes have been causing major changes, so until the functionality of the UI gets solidified or the project gets a release date, I see adding tests as adding overhead that I can save time/budget on for the time being. Eventually, before release, I will put together a set of tests so that I can release and make additional changes after the release with confidence.

On another project, I've got unit and integration tests. I've even written a script to diff visual snapshots to check the rendering in various browsers. It takes a while to run and is a nuisance to maintain, but it catches errors and every time it does, my dopamine levels surge.

I like long test names

Also helping me with tests is writing seemingly unnecessarily long descriptions.

For example, when your test fails, after a year of not looking at the code, which error message would you prefer?

it('checks for existing email', () => {})
it('opens modal with error when user submits with an existing email', () => {})

Not only will my future self thank me for that ridiculous message, I also find that when I start by writing the tests like this, it's easier to write the tests because I remember what I'm testing. In some cases, these can even come from a ticket acceptance criteria.

So if my tests read like a history of the various ticket acceptance criteria, I can change code with more confidence, and so can a dev that is seeing the project for the first time.

But I'm, not a fan of snapshot

I, as of recently, have resolved to stay away from snapshot test (code snapshot, not visual/screenshot snapshots).

I find these tests are very easy to write. You have a single line of code expect(myComponent).toMatchSnapshot(); and it ensures against any change in the DOM. The problem, however, is that there are no useful assertions given in that test. The test will show you the diff, highlighting which parts changed, but with little context you may spend a lot of time making sense of it.

I was writing a new feature after 9 months of not looking at a project's code, and the snapshot test failed. The snapshot test is expected to fail, because I just added a feature, but I don't have the slightest clue what I was checking for in the snapshot. After a few minutes of staring at the diff I assume all is probably good and essentially blindly update the snapshots so that it passes in the CI/CD pipeline. So what is the value of a test that tells you that something changed when you changed something? Take the time and write assertions,

I'll have extensive unit tests for some functionality, like a regex that tests emails. But unit testing a button seems pointless when your integration test is going to test that.

I also rarely do TDD, because the paradigm of writing unit tests on front end components before writing the components just doesn't give me the ROI. On a CLI or an API server it makes sense, but for front-end it just seems like a lot of thrashing.

photo credit: https://unsplash.com/@sarahmcgaughey

Extending Vue Test Utils

Daniel P 🇨🇦 — Sun, 10 Nov 2019 06:43:11 +0000

The Vue Test Utils is the official unit testing library for you Vue.js components. It works with test runners, such as mocha or jest, to allow making assertions and executing interactions on the Vue components.

The library offers many helpful functions, but for the most part they are fairly low-level.

Some of my test involve dealing with lists of items that may have this kind of layout. This might be used for the checkbox css styling hack, where a checkbox is hidden using css, but the label is used to toggle the value.

<div>
  <label class="my-input">
    Audi
    <input v-model="vehicle" value="0" type="checkbox"/>
  </label>
  <label class="my-input">
    Saab
    <input v-model="vehicle" value="1" type="checkbox"/>
  </label>
  <label class="my-input">
    Volvo
    <input v-model="vehicle" value="2" type="checkbox"/>
  </label>
  <!-- etc... ->
</div>

In your test, you may want to toggle the values by triggering a click event on a label element.

Let's say, that for this test you want to simulate the click on the Saab label element.

The Saab text is a child of the label tag, so you cannot use a simple selector for the label tags, since the items look the same (at the top level).

There are three common ways of dealing with it

custom test-only data
use n-th child
use child to find text

adding custom attributes for test only

You could add a parameter like data-test to make testing easier:

<div>
  <label class="my-input" data-test="label-audi">
    Audi
    <input v-model="vehicle" value="0" type="checkbox"/>
  </label>
  <label class="my-input" data-test="label-saab">
    Saab
    <input v-model="vehicle" value="1" type="checkbox"/>
  </label>
  <label class="my-input" data-test="label-volvo">
    Volvo
    <input v-model="vehicle" value="2" type="checkbox"/>
  </label>
  <!-- etc... ->
</div>

const wrapper = shallowMount(Foo);
const labelSaab = wrapper.find("label[data-test='label-saab']");

While there are many developers advocating for this, I prefer not exposing these values that are for tests only. This is a personal preference, and doesn't mean that it is wrong.

N-th child

const wrapper = shallowMount(Foo);
const labels = wrapper.findAll('label');
const labelSaab = labels.at(1);

This relies on making some assumptions; namely that the index of the expected element is correct.

You can reduce the risk of selecting the wrong item by validating the text content, but the downside is that you still need to keep track of the name and the index separately, which might make the test less readable

Use child text to find the correct item

This is the the most complex of all, since it there are more steps to find the correct label.

The test runner needs to find all labels and loop through them. Then for each label, it will go through the children, and check for a string match.

const wrapper = shallowMount(Foo);
const labels = wrapper.findAll('label');
const labelSaab = labels.filter(i => i.text().match('Saab')).at(0);

This is not much more complicated than the other versions, but it is more verbose, and less intuitive/readable (especially compared to the first option)

The way I've been dealing with these cases is by wrapping the wrapperArray with custom functionality to suit the layout of my components, which helps make the code less verbose and more readable.

Wrapper functions

this is an example of some of the functions I may use either with assertions or as selectors

function withWrapper(wrapper) {
  return {
    find: (selector) => ({
      childSelectorHasText: (childSelector, str) => wrapper.findAll(selector).filter(i => i.find(childSelector).text().match(str)),
      withText: (str) => wrapper.findAll(selector).filter(i => i.text().match(str)).at(0),
    }),
    areVisible: () => wrapper.findAll(selector).wrappers.filter(w => w.isVisible()).length,
    areHidden: () => wrapper.findAll(selector).wrappers.filter(w => !w.isVisible()).length,
    areAllVisible: () => wrapper.findAll(selector).wrappers.every(w => w.isVisible()),
    areAllHidden: () => wrapper.findAll(selector).wrappers.every(w => !w.isVisible()),
  }
}

by making that function available in your test spec you can then do things like...

const wrapper = shallowMount(Foo);
const labelSaab = withWrapper(wrapper).find('label').withText('Saab');

// and ...
const numLabelsVisible = withWrapper(wrapper).areVisible('label');
const allLabelsVisible = withWrapper(wrapper).areAllVisible('label');

Which, I believe, makes the tests a lot more readable. These functions can abstract the complex repetitive tasks and add functionality that you might find is missing from the library.

Photo Credit: by ShareGrid on Unsplash

Canvas color sampling

Daniel P 🇨🇦 — Thu, 31 Oct 2019 04:55:25 +0000

I was reminiscing recently; going through some of my old codepens and noticed that the performance has degraded substantially. These pens had couple things in common. They were using particles and noise fields. After some investigation, I found that disabling color sampling made the performance issue disappear.

So, what was the problem?

I was using getImageData to do color sampling.

Here is the bad code:

/**
* @params {number} x x-coordinate
* @params {number} y y-coordinate
* @params {CanvasRenderingContext2D } ctx
* @returns {array} [r, g, b, a] where each value is [0..255]
*/
function getColor (x, y, ctx) {
  return ctx.getImageData(x, y, 1, 1).data;
}

Back when my browser was not using hardware-accelerated canvas this worked fine. Now, however, by having the browsers use the GPU, there is a round-trip penalty added to the calculation. When I'm doing the noise field color sampling on hundreds of particles, the computer is spending more time sending and receiving data from the GPU than doing any calculation. As a result, I've had code that worked reasonably well a couple years ago be degraded to almost a screeching halt by a performance improvement of the browsers.

After finding this out, I've switched to a slightly more cumbersome way of getting the color value at the pixel.

So what's the solution?

/**
* @params {number} x x-coordinate
* @params {number} y y-coordinate
* @params {ImageData} imageData
* @returns {array} [r, g, b, a] where each value is [0..255]
*/
function getColor (x, y, imageData) {
  var i = (x >> 0 + (y >> 0 * imageData.width)) * 4;
  var data = imageData.data;
  return [data[i], data[i+ 1], data[i+ 2], data[i+ 3]];
}

Note that instead of the context (ctx), the function now needs imageData to be passed.

var canvas = document.createElement('canvas'); // or select from document...
var ctx = canvas.getContext('2d');
var imageData = ctx.createImageData(canvas.width, canvas.height);

Instead of using the x and y coordinates, the data is found in a Uint8ClampedArray representing the image data. This data structure is an array of integers that can be a value from 0 to 255. They are organized in a horizontal order, each pixel being represented by a sequence of 4 values, one for each channel (r,g,b,a). This data structure has no information about the size of the canvas, so the canvas size is provided to calculate the location of the relevant data.

So to look up a value, we get the x position and add the y position multiplied by the canvas width, and then multiply the sum by 4 (for 4 channels).

I've also rounded the numbers down using a bit shift n << 0. This has the same effect as Math.floor(n). The reason is that if a decimal number is passed, the index is going to be decimal, and not only would that cause an error, since the index has to be a whole number, but if the number was rounded later, it would yield inaccurate location.

So what's moral of the story?

By pushing the getImageData function to the GPU, the bad color sampling implementation code from the past was exposed and caused a degradation of performance. Also, in spite of what you may read on the google search results, getImageData absolutely is hardware accelerated today on all modern browsers. I've tested it by reverting the code, and it performs better by disabling the hardware acceleration. The performance profiling tools indicate a huge load on the GPU.

Any shameless plug?

no before links, but here are some of the updated codepens

API Mocking server with hapi.js

Daniel P 🇨🇦 — Sun, 20 Oct 2019 05:32:25 +0000

RestAPI Mocking server with hapi.js

using hapi v. 18

Purpose

Most of the work I do these days is creating user interfaces for admin backends. This usually entails building Single Page Applications (SPA) using front-end JavaScript frameworks like Vue or React, and to build an SPA, you need to have an API to power the application. Sometimes you may be able to work with a working API server, but usually you want to have a server that mocks the actual server.

Using a mocking server allows you to set the application in a predictable state, which makes development and testing easier.

Mocking server functionality

Depending on your application, your needs will vary.

The simplest form of mocking server can be done with little more than a file server. The expected responses can be stored in json files, and the server just sends the various files as api endpoints. This is fast to set-up, but is not very flexible. It only supports GET requests, so you wouldn't be able to do any other Rest API calls (like POST).

You could add some additional route handlers for POST or DELETE requests, but the benefit/issue is that because data is immutable. So these requests will not affect subsequent requests. That means that if you have a list of users and you delete one, upon a seemingly successful delete, that user will remain there. This can be acceptable, even desired, functionality, but the mocking server I'm going to build here is going to maintain state between restarts. Every time you start the server it will start from the same state, but interacting with the server will mutate the state. So deleting an existing user will remove them from db until you restart the mocking server.

About hapi (hapi.js)

hapi, like express, is a Node.js server. Unlike express, though, it is much more opinionated and (IMHO) suitable for large projects. It has more out-of-the-box functionality and more focus on security. That said, express would make a fine choice for a API mocking service, but I chose hapi.

getting started

Initialize project

npm init

install dependencies

npm i -s @hapi/hapi @hapi/joi lowdb

hapi is the server
joi is a validation library
lowdb is a local JSON database based on the lodash library

add script to package.json

"serve":"node server.js"

running npm run serve will start the server (once the server.js file is created)

create database file `db/users.json` with some mock data

  [
    {"id": 1, "first_name": "Guillaume", "last_name": "Potapczuk", "city": "Dopang", "country": "Indonesia"},
    {"id": 2, "first_name": "Torre", "last_name": "Burnell", "city": "Shiqiao", "country": "China"},
    {"id": 3, "first_name": "Donalt", "last_name": "Giannoni", "city": "General Elizardo Aquino", "country": "Paraguay"},
    {"id": 4, "first_name": "Jade", "last_name": "Warsap", "city": "Fuhe", "country": "China"},
    {"id": 5, "first_name": "Violet", "last_name": "Hinzer", "city": "Bondo", "country": "Democratic Republic of the Congo"},
    {"id": 6, "first_name": "Eleanore", "last_name": "Leiden", "city": "El Porvenir", "country": "Honduras"},
    {"id": 7, "first_name": "Andris", "last_name": "Bysouth", "city": "Moss", "country": "Norway"},
    {"id": 8, "first_name": "Hilary", "last_name": "Speenden", "city": "Rāmhormoz", "country": "Iran"},
    {"id": 9, "first_name": "Albertine", "last_name": "Courage", "city": "Devon", "country": "Canada"},
    {"id": 10, "first_name": "Aubert", "last_name": "Favill", "city": "Murfreesboro", "country": "United States"},
    {"id": 11, "first_name": "Rik", "last_name": "Rushforth", "city": "Sidokumpul", "country": "Indonesia"},
    {"id": 12, "first_name": "Nataline", "last_name": "Pickvance", "city": "Araxá", "country": "Brazil"},
    {"id": 13, "first_name": "Irina", "last_name": "Trounce", "city": "Kardzhin", "country": "Russia"},
    {"id": 14, "first_name": "Bowie", "last_name": "Ranklin", "city": "Jinhe", "country": "China"}
  ]

create `server.js` file

const Hapi = require("@hapi/hapi");

// get routes plugin
const userRoutes = require("./routes/users");

// get host from environment variable, or default to "localhost"
const HOST = process.env.HOST || 'localhost';

// get port from environment variable, or default to 7000
const PORT = process.env.PORT || 7000;

// create async function, this allows using await
(async () => {
  // create a new hapi server
  const server = Hapi.server({
    host: HOST,
    port: PORT,
    // define route defaults
    routes: {
      //enable CORS
      cors: true,
      validate: {
        // assigning a failAction function here will make this
        //   the default handler for validation failures. That
        //   means anytime a user submits data that doesn't pass
        //   validaiton, this functions handles it.
        // If this function is not defined anywhere, the message
        //   to the user will be generic and not very useful.
        failAction: async (request, h, err) => {
          // wrap message using Boom library
          // in this case, it will send a bad request response 
          //   with a 400 code and the error message will
          //   include information about parameter that didn't
          //   pass validation
          throw Boom.badRequest(err.message);
        }
      }
    }
  });

  // difinition of the base route
  server.route({
    method: "GET",
    path: "/",
    handler: (request, h) => {
      // respond with a json object
      return h.response({ message: "Hello World" });
      // you can also just return an object, hapi will handle
      //   it the same way
    }
  });

  // register the user routes plugin
  // this needs to finish before server.start(), that's why it
  //   uses await. You can also use a promise.
  await server.register(userRoutes);

  // start the server
  server.start();

  // display information to console about what host/port the
  //   server is running on
  console.info(`Server started at ${server.info.uri}`);
})();

create `routes/users.js` file

This file will create a hapi plugin, that registers the user routes to the server.

const initUserCollection = require("../db/users.json");

// boom is library for HTTP-friendly error reporting. It is a dependency of hapi and doesn't need to be installed
const Boom = require("@hapi/boom");

// joi is for object/schema validation
const Joi = require("@hapi/joi");

// lowdb is the json database
const low = require("lowdb");

// load in-memory adapter for lowdb. This will keep changes in memory and not write to file system
const MemorySync = require("lowdb/adapters/Memory");

// create a lowdb database using the memory adapter
const db = low(new MemorySync());

// initialize the database with data from json file
db.defaults({ users: initUserCollection })
  .write();
// after any interaction that changes the database, use `write()` to commit changes

// store an id, this is for creating new users, and makes sure we don't assign same id twice
let uuid = initUserCollection.length + 1;

/*
 create a schema for the user post request using joi

 joi uses chained functions to build a validation objects
 e.g.
  - string() expects the value to be a string
  - min(3) expects the string to be at least 3 characters long
  - max(64) expects that the maximum is 64 characters
  - and required() makes the field required, without it user can ommit passing field
 for example, the city does not need to be included but country does
 the id field is not included here, because it needs to be genreated by the server
 */
const userPostRequestSchema = Joi.object({
  first_name: Joi.string().min(3).max(64).required(),
  last_name: Joi.string().min(3).max(64),
  city: Joi.string().min(1).max(64),
  country: Joi.string().min(1).max(64).required(),
});

// create and export plugin
module.exports = {
  // plugin requires a name
  name: "user-routes",
  // and a version
  version: "1.0.0",
  // and the register function
  register: async function(server, options) {

    /**
     * list users route
     */
    server.route({
      // define get method
      method: "GET",
      // and the url
      path: "/user",
      /*
       and define the handler
       the handler passes two objects, request and h
       - request is the server request object, it gives access to the the request and the server internals
       - h is the response toolkit, and it helps with modifying the response (like adding response code)
      */
      handler: (request, h) => {
        // get all users from users array
        const users =  db.get("users").value();
        // returning users array will be converted to a json array by hapi
        return users;
      }
    });

    /**
     * get single user by id
     */
    server.route({
      method: "GET",
      // define path with a required parameter - id
      path: "/user/{id}",
      handler: (request, h) => {
        // get id from request parameters
        const { id } = request.params;
        // find user in array, note that the id needs to be converted to a number, since that's how it's stored in the db
        const user = db.get("users").find({id:parseInt(id, 10)}).value();

        if (user !== undefined) {
          // uf user is define return
          return user
        }
        // if user is not found, return an error
        // I'm using the Boom library to generate the errot, this will add the 400 code.
        throw Boom.badRequest(`id ${id} not found`);
        /*
         because you may be matching another API you may need to customize the response.
         you can then use the h toolkit like this: `h.response({error:"BAD ID"}).code(400)`
         */
      }
    });

    /**
     * create user
     */
    server.route({
      method: "POST",
      path: "/user",
      config: {
        validate: {
        /**
         * payload validation
         * This will prevent sending an object that doesn't have the required parameters.
         * The error handler is defined globaly in server.js, you may find
         *   that you want to customize the response per-reoute
         *   in which case you can define it here under failAction
         */
          payload: userPostRequestSchema
        }
      },
      handler: (request, h) => {
        // get user from payload using object destructuring
        const { first_name, last_name, city, country } = request.payload;

        // generate an id using the uuid
        const id = uuid;

        // increment the uuid (for next user)
        uuid += 1;

        // create the user object
        const newUser = { id, first_name, last_name, city, country };

        // push user into the database and write changes
        db.get("users")
          .push(newUser)
          .write();

        // return a success message and the new id
        return { message: "user created", id };
      }
    });
  }
};

run your server

npm run serve

Adding more routes

To add additional routes, you can keep creating additional route plugins and registering them with the server. I would recommend to have each url in separate file, as it makes it easier to find handlers.

One problem you may find is that in some cases you may want to show multi-model relationships. Because the database is specific to the route, updating users would not be possible from any other plugin because each plugin would have their own instance of the database even if they're sharing the same file to generate the initial state. There are ways of handling it by sharing the database instance between the plugins. I lean toward thinking that that's coming too close to building a server, rather than mocking one. However, that depends on the need and should be decided on a case-by-case basis; also some may find that this server is already going bit past what a mocking server should do.

Customizing responses

The responses in this case are using the hapi conventions, which I believe are a pretty good convention to use. In some cases you may be mocking an existing server or a server that is going to have different requirements. In that case you can modify your responses by removing use of Boom and/or Joi, and handle the route validation and response yourself.

For example, Instead of using

return Boom.badRequest("invalid query");

you can use the hapi toolkit object (h) provided to the handler

return h.response({statusCode:400, error: "Bad Request", "message": "invalid query"}).code(400);

these two commands have the same result, but the former (Boom) is easier to implement, while later gives you more control.

Other possibilities

As your application grows, you may find yourself wanting to have different initial states. This is especially useful for automated testing.

You can handle this by versioning the database folder. Instead of listing the route initial states there, you can put the different version into sub-folders.

For example, you can have the users.json file under db\default\users.json, and an empty users array in db\initial\users.json.

You can then update the line calling the json db file to...

// to define using environment variables
const INSTANCE = process.env.INSTANCE || 'default';

// OR using command line argument
// const INSTANCE = process.argv[2] || 'default';

// and call the database using the folder name as the instance
const initUserCollection = require(`../db/${INSTANCE}/users.json`);

Then you can call the script setting the environment variable. (or by passing the command line argument, if you're using argv)

Vue3 Composition API - Creating a dragable element

Daniel P 🇨🇦 — Sun, 13 Oct 2019 05:20:06 +0000

Vue3 Composition API - Take 2

My initial fumbling around with the newly released Vue3 (pre-release version) had not gone well. In short, I've made some silly mistakes and hadn't done nearly enough of reading before starting. Now, after couple more days, I wanted to give an update on my progress in a form of a how-to.

The Goal:

Break down dragable component using the Composition API in Vue3

I've chosen to do this, because dragging a component requires the following:

reactive values
computed values
watch
event listeners

Previously I've done similar things with Higher Order Components or Mixins. Either way, I got it to work, and there is nothing in this release that will unlock functionality that was not available before, but it allows us to do things with better ease and code maintainability.

The Plan

The idea in this experiment is to separate the dragging functionality out of the component, so that we can call a function and pass the returned values to the template. The component code should look something like this:

// reusable function
const makeDragable = element => {
  // create reactive object
  const position = reactive({x: 0, y: 0, /*etc...*/ });

  // compute style
  const style = computed(() => {
    // To Be Implemented (TBI)
    return {};
  });

  // create  mouse interaction functions
  const onMouseDown = e => {/* TBI */};
  const onMouseMove = e => {/* TBI */};
  const onMouseUp = e => {/* TBI */};

  // assign mousedown listener
  element.addEventListener("mousedown", onMouseDown);

  // return objects
  return { position, style };
}

// my component
const MyComponent = Vue.createComponent({
  setup() {
    const { position, style } = makeDragable(el);
    return { position, style };
  },
  template: document.getElementById("myComponent").innerHTML
});

This shows the beginnings of what this code for the reusable function and the component may look like. The problem is that el is not defined, and if we were to define it, it would be null, since the component doesn't get mounted until after setup executes.

The way to deal with this, is to create a reference (ref) to a reactive value that the template will render.

const MyComponent = Vue.createComponent({
  setup() {
    // create reactive reference variable el
    const el = ref(null);
    // send el to function to assign mouse listeners
    const { position, style } = makeDragable(el);
    // pass el to template
    return { el, position, style };
  },
  template: document.getElementById("myComponent").innerHTML
});

Then we can pass it to the template using (ref="el")

<template id="myComponent">
  <div ref="el" :style="style">
    <h3>DRAG ME</h3>
    <pre>{{ position }}</pre>
  </div>
</template>

This will create a reactive reference for variable el and initialize it as null and send (return) it for use in the template. The template assigns the reference to the div in the template.
At this point the el in the makeDragable function changes from null to an HTMLElement. If we were to assign listeners on first run, it would fail because the element is not mounted and the el variable is null. In order to assign the listeners to the element, I used a watch that will assign the functionality once the value changes

The Code

The code uses the vue3 pre-release code current at the time of writing. The steps to generate can be found on the vue3 page on my previous post.

// reusable function
const makeDragable = element => {
  const position = reactive({x: 0, y: 0, /*etc...*/ });

  // compute style
  const style = computed(() => {
    // To Be Implemented (TBI)
    return {};
  });

  const onMouseDown = e => {/* TBI */};
  const onMouseMove = e => {/* TBI */};
  const onMouseUp = e => {/* TBI */};

  // Add a watch to assign the function when it changes, and is an instance of HTMLElement
  watch(element, element => {
    if (!element instanceof HTMLElement) return;
    element.addEventListener("mousedown", onMouseDown);
  }

  // return objects
  return { position, style };
}

Fill in the owl

As far as the Composition API implementation goes, this pretty much finishes it off. The rest is just implementing the mouse interaction which I'm including in the full code at the end. It can also be seen in this jsFiddle

In this case, I'm using a single component, so the benefit may not be clear. The idea is that I could easily create other components that use this functionality. In this jsFiddle I've split the position and style into separate functions, so that I can create a different style for the svg elements. With minor modifications, I can have a dragable HTMLElement or SVGGraphicsElement.

Notes

Here is a list of things I've come across while working on this

template ref and JavaScript ref are not the same.
- the template ref allows referencing DOM elements. In Vue2 this would be a string that can be then referenced using vm.$refs. The composition-api plugin for Vue2 cannot handle it the same way as Vue3 and requires a render function or jsx. In Vue3, the concept has been unified, so even though the function of the two differs they work together and the ref expects a defined object instead of a string.
ref is like reactive but not the same
- ref is a useful for a single property. In this case we're interested in creating a single element for assignment and watching for changes.
- reactive is useful when you have multiple properties, like the position parameters, which are tied together
watch is a lifecycle hook for component fragments
- use watch to handle the equivalent of updated and beforeUnmount
- watch accepts an onCleanup parameter that fires between beforeUnmount and unmounted of the component
lifecycle methods seemed to have changed
- Vue3 currently supports
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
- The following lifecycle hooks from Vue2 are currently (at the time of writing) not available.
- beforeCreate
- created
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
Vue dev tools don't work with Vue3 yet

Code

It uses a compiled IIFE Vue dependency, that this article shows how I generated

Template

<div id="app"></div>

<!-- APP Template -->
<template id="appTemplate">
  <!-- one component -->
  <my-component>
    <!-- nested child component -->
    <my-component></my-component>
  </my-component>
</template>

<!-- myComponent Template -->
<template id="myComponent">
  <div ref="el" class="dragable" :style="style">
    <h3>DRAG ME</h3>
    <pre>{{ position }}</pre>
    <pre>{{ style }}</pre>
    <slot></slot>
  </div>
</template>

<style>
.dragable {font-family: "Lucida Sans", Geneva, Verdana, sans-serif;width: 40%;max-width: 90%;min-width: 320px;min-height: 6.5em;margin: 0;color: rgb(6, 19, 29);background-color: rgb(187, 195, 209);border-radius: 16px;padding: 16px;touch-action: none;user-select: none;-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);transition: transform 0.1s ease-in, box-shadow 0.1s ease-out;border: 1px solid rgb(6, 19, 29);} pre { width: 48%; display: inline-block; overflow: hidden; font-size: 10px; }
</style>

JS

const { reactive, computed, ref, onMounted, watch } = Vue;

const makeDragable = element => {
  const position = reactive({
    init: false,
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    isDragging: false,
    dragStartX: null,
    dragStartY: null
  });

  const style = computed(() => {
    if (position.init) {
      return {
        position: "absolute",
        left: position.x + "px",
        top: position.y + "px",
        width: position.width + "px",
        height: position.height + "px",
        "box-shadow": position.isDragging
          ? "3px 6px 16px rgba(0, 0, 0, 0.15)"
          : "",
        transform: position.isDragging ? "translate(-3px, -6px)" : "",
        cursor: position.isDragging ? "grab" : "pointer"
      };
    }
    return {};
  });

  const onMouseDown = e => {
    let { clientX, clientY } = e;
    position.dragStartX = clientX - position.x;
    position.dragStartY = clientY - position.y;

    position.isDragging = true;

    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
  };

  const onMouseMove = e => {
    let { clientX, clientY } = e;
    position.x = clientX - position.dragStartX;
    position.y = clientY - position.dragStartY;
  };

  const onMouseUp = e => {
    let { clientX, clientY } = e;
    position.isDragging = false;
    position.dragStartX = null;
    position.dragStartY = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  };

  watch(element, (element, prevElement, onCleanup) => {
    if (!element instanceof HTMLElement) return;
    let rect = element.getBoundingClientRect(element);

    position.init = true;
    position.x = Math.round(rect.x);
    position.y = Math.round(rect.y);
    position.width = Math.round(rect.width);
    position.height = Math.round(rect.height);

    element.addEventListener("mousedown", onMouseDown);

    onCleanup(() => {
      // do cleanup
    })
  });

  return {
    position,
    style
  };
};

const MyComponent = Vue.createComponent({
  setup(props) {
    const el = ref(null);
    const { position, style } = makeDragable(el);

    return {
      el,
      position,
      style
    };
  },
  template: document.getElementById("myComponent").innerHTML
});

const App = {
  template: document.getElementById("appTemplate").innerHTML
};

const app = Vue.createApp({});
app.component("my-component", MyComponent);
app.mount(App, "#app");

Trying the composition API in Vue3

Daniel P 🇨🇦 — Wed, 09 Oct 2019 03:44:00 +0000

Trying the composition API in Vue3

On October 4th, The Vue-3 code was made public at github.com/vuejs/vue-next
It is still in pre-alpha monorepo that you can't quite use the same way as Vue2 just yet. There is also functionality from Vue2 that hasn't reached parity yet. At the time of writing, these are SSR, kep-alive, transitions, DOM-specific transforms (v-on, v-dom, etc.)

It does allow us, however, to start playing with though.

I spent the last couple nights trying to make some sample code to work. Unfortunately, the going was a bit tough. I wanted to start by making a parent component pass a prop to a child component. It took me a lot longer than I expected, but that was mostly my fault. I'll try to describe the path I took to get it eventually to work, and some of the mistakes I've made.

Get the repo

I started by downloading the git repo with the following commands

# clone the vue-next mono repo to vue-next folder
git clone https://github.com/vuejs/vue-next.git

cd vue-next

# install dependencies
npm install

# build vue.global.js
npm run dev

this will generate a vue.global.js file at packages\vue\dist\vue.global.js

Of course later I realized that the best place to start is here: https://github.com/vuejs/vue-next/blob/master/.github/contributing.md

The problem I had was that the file that was generated mounts Vue as a global, so is not suited for use with bundlers like parcel or webpack, which as what I was trying to use it with. In the contributing link from the repo, there are further instructions for generating other builds, but I've decided to use the global package instead with a simple file server (like serve or http-sever), it even works on online code editors like jsfiddle, which I ended up using.

I've found a sample code from the vue-composition-api-rfc at https://vue-composition-api-rfc.netlify.com/#basic-example

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
  import { reactive, computed } from "vue";

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2)
      });

      function increment() {
        state.count++;
      }

      return {
        state,
        increment
      };
    }
  };
</script>

First I made it available by uploading it to gitlab as a gist and generating a rawgist link for includeing in a jsfiddle

https://gistcdn.githack.com/dasDaniel/f3cebc1274339055729c6e887ca8d2ad/raw/8f0432bfd812c453cdecee61862963fe3e24119a/vue.global.js

I had to make some changes to make it work with the global package, since that doesn't support Single File Components.

HTML:

<div id="app"></div>

<template id="appTemplate">
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

JS:

const { reactive, computed } = Vue

const MyComponent = {
  setup(props) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    };
  },
  template: document.getElementById("appTemplate").innerHTML
};

const app = Vue.createApp({})
app.mount(MyComponent, "#app")

As you can see, instead of using template literals or SFC, I used the <template> html tag and referenced it with getElementById. Otherwise it's pretty much the same.

The next goal was to add another component and pass a prop to it.

I added the following code to the appTemplate

<my-component :count="state.count"></my-component>

and this to the script


const MyComponent = Vue.createComponent({
  template: `<div>my component {{count}}<div>`,
  props: {
    count: Number
  },
  setup(props){
    return {...props}
  }
})

I also registered the component before mounting the app

app.component('my-component', MyComponent)

The result was that the prop was passed initially with a value of 0, and then it didn't update any after that. So I tried copying what the app does.

const MyComponent = Vue.createComponent({
  template: `<div>my component {{state.count}}<div>`,
  props: {
    count: Number
  },
  setup(props){
    const state = reactive({...props})
    return {
        state
    }
  }
});

Shis still doesn't work and it's not clear to me why.

Now is the time when I frantically try a hundred different things and nothing seems to work. I could list all the things, but I'll just mention a few.

// added `onUpdated`
const { reactive, computed, onUpdated } = Vue;

const MyComponent = Vue.createComponent({
  template: `<div>my component {{state.count}}<div>`,
  props: {
    count: Number
  },
  setup(props){
    const state = reactive({...props})
    // added onUpdated function
    onUpdated(() => {
        state.count = props.count
    })
    return {
        state
    }
  }
});

When I console logged the state after the update, the state did change, but the template did not update. This wasn't making any sense.

Eventually after more reading and debugging I've found out two things.

The way to do it correctly from what I gather is to use reactive AND computed

  const state = reactive({
    count: computed(() => props.count)
  })

The other thing that I eventually noticed, was that my div tag wasn't closed. This was causing the layout to only render the first time, and likely why I may have tried something that should have been working (like using onUpdate) and weren't.

the working code (https://jsfiddle.net/dapo/fp34wj6z/)

<div id="app"></div>

<template id="appTemplate">
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
  <pre>{{ state }}</pre>
  <my-component :count="state.count"></my-component>
</template>

<template id="myComponent">
  <div>
    Child
    <pre>{{ state }}</pre>
  </div>
</template>

const {
  reactive,
  computed,
} = Vue;

const MyComponent = Vue.createComponent({
  props: {
    count: Number
  },
  setup(props) {
    const state = reactive({
      count: computed(() => props.count),
      triple: computed(() => props.count * 3)
    });

    return {
      state,
    }
  },
  template: document.getElementById('myComponent').innerHTML
});

const App = {
  setup(props) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  },
  template: document.getElementById('appTemplate').innerHTML
};

const app = Vue.createApp({});
app.component('my-component', MyComponent)
app.mount(App, "#app");

TL;DR;

I didn't watch my template syntax and missed that a tag wasn't closed, which was causing the rendering not to work properly.
should have spent more time reading the docs than trying madly to just get it to work.

Resources :

Anyway, I'll be playing more with this in the future. I certainly subscribe to the benefits of the composition API, I just need to spend some more time understanding the how ref, reactive, computed, and watch all work together.

Creating a dockerized vue-storybook project

Daniel P 🇨🇦 — Thu, 29 Aug 2019 05:04:24 +0000

Let's create a vue-based storybook project that runs in docker

Overview

Setup
- 1. Create new project
- 2. Install vue and dependencies
- 3. Install storybook
Build
- 4. Add storybook script package.json
- 5. Create a component /components/MyButton.vue
- 6. Create configuration /.storybook/config.js
- 7. Create a story /stories/button.js
Ship
- 8. Create dockerfile
- 9. Create .dockerignore
- 10. Create docker-compose.yml

1. Create a new project

Assuming you don't have a project created, start by creating a new directory and starting a new project within by running the init command.

npm init

This will ask some questions about the project setup, like name, version etc. Fill these in however you like.

2. Install vue

Next up, install the vue dependencies. Typically vue is not installed as a dev dependency and the other dependencies are. I'm leaving it as is, even though in this example they could all be same.

npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

3. Install storybook

This is just one more dependency, but it takes a while to install compared to the others.

npm install @storybook/vue --save-dev

4. Add storybook script

Open package.json file and replace the "test":... script with:

    "storybook": "start-storybook -s 8086"`

This will allow us to use npm run storybook to start the storybook application.

It also uses the same port number every time it starts, so that we can make the port available through docker easier.

5. Creating a component

To illustrate a basic component in storybook, let's create a button component in /components/MyButton.vue

This component will allow changing color to red, blue or green and have the ability to set rounded to true or false'. It uses a slot to define the button text.

<template>
  <button :class="className"><slot></slot></button>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    },
    rounded: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    className() {
      let c = ['btn']
      if (this.color.toLowerCase() === 'red') c.push('btn-red');
      if (this.color.toLowerCase() === 'blue') c.push('btn-blue');
      if (this.color.toLowerCase() === 'green') c.push('btn-green');
      if (this.rounded) c.push('btn-rounded');
      return c.join(' ')
    }
  },
};
</script>

<style scoped>
.btn {
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  font-family: arial;
  background: linear-gradient(to bottom, hsl(224, 10%, 68%), hsl(225, 3%, 51%));
  box-shadow: 0px 1px 5px hsl(215, 8%, 16%);
  border: solid hsl(217, 10%, 74%) 1px;
  border-radius: 2px;
  padding: 15px;
  text-shadow: 0px 1px 2px #000000;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.btn:hover {
  opacity: 0.9;
  background: linear-gradient(to bottom, hsl(224, 10%, 68%), hsl(225, 3%, 51%));
  box-shadow: 0px 1px 2px #000000;
}
.btn.btn-rounded{
  border-radius: 8px;
}
.btn.btn-red{
  background: linear-gradient(to bottom, hsl(0, 100%, 68%), hsl(0, 63%, 51%));
  box-shadow: 0px 1px 5px hsl(0, 68%, 16%);
  border: solid hsl(0, 100%, 74%) 1px;
}
.btn.btn-red:hover{
  background: linear-gradient(to bottom, hsl(0, 100%, 62%), hsl(0, 63%, 48%));
  box-shadow: 0px 1px 2px #000000;
}
.btn.btn-blue{
  background: linear-gradient(to bottom, hsl(255, 100%, 68%), hsl(255, 63%, 51%));
  box-shadow: 0px 1px 5px hsl(255, 68%, 16%);
  border: solid hsl(255, 100%, 74%) 1px;
}
.btn.btn-blue:hover{
  background: linear-gradient(to bottom, hsl(255, 100%, 62%), hsl(255, 63%, 48%));
  box-shadow: 0px 1px 2px #000000;
}
.btn.btn-green{
  background: linear-gradient(to bottom, hsl(108, 100%, 68%), hsl(108, 63%, 51%));
  box-shadow: 0px 1px 5px hsl(108, 68%, 16%);
  border: solid hsl(108, 100%, 74%) 1px;
}
.btn.btn-green:hover{
  background: linear-gradient(to bottom, hsl(108, 100%, 62%), hsl(108, 63%, 48%));
  box-shadow: 0px 1px 2px #000000;
}
</style>

6. Create Storybook configuration

Create a new file: .storybook/config.js with:

import { configure } from '@storybook/vue';

function loadStories() {
  const req = require.context('../stories', true, /\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

This will scan through the stories folder for any .js files for stories to load.

7. Create a story

Create a file stories/button.js

import { storiesOf } from '@storybook/vue';
import MyButton from '../components/MyButton';

storiesOf('Button', module)
  .add('default', () => ({
    components: { MyButton },
    template: '<my-button>Default</my-button>'
  }))
  .add('red', () => ({
    components: { MyButton },
    template: '<my-button color="red">Red</my-button>'
  }))
  .add('blue', () => ({
    components: { MyButton },
    template: '<my-button color="blue">Blue</my-button>'
  }))
  .add('green', () => ({
    components: { MyButton },
    template: '<my-button color="green">Green</my-button>'
  }))
  .add('rounded', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">Rounded</my-button>'
  }))

Test it

At this point, you should be able to run storybook using

npm run storybook

8. Create Dockerfile (for docker image)

This file defines what the image instructions are.
The image is based off the node version 10, using alpine Linux. I'm using Alpine because it's small, and has all the things needed for this purpose.

Create the Dockerfile and put in the following instructions.

# Select reference image
FROM node:10-alpine

# This is optional. Sets the level of logging that you see
ENV NPM_CONFIG_LOGLEVEL warn

# Create app directory
WORKDIR /usr/src/app

# Copy project files into the docker image
COPY . .

# Install app dependencies
RUN npm set progress=false && npm install

# Make port 8086 available
EXPOSE 8086

# run storybook app
CMD ["npm", "run", "storybook"]

9. Skip node_modules with .dockerignore

Create a .dockerignore file and put in the following

node_modules/

This will prevent your local node modules file to be copied into the docker image. Since different environments may require different dependency versions (binaries), preventing docker from copying node_modules will prevent headaches and you should most likely always do it.

10. Create a docker container

Create a docker-compose.yml file and paste the following:

version: '3'
services:
  storybook:
    ports:
      - "8086:8086"
    build: .

This file makes it easier to run the container, so you don't need to run a build and run command for the Dockerfile.

Then run it with:

docker-compose up

# or to force building after making changes you can use --build
docker-compose up --build

The first time it runs, it will take a bit longer, since it needs to download the required images, but subsequent runs should be faster.

After storybook is ready, you can test it using localhost:8086

Link to git repo: https://github.com/dasDaniel/dockerized-vue-storybook-project

How to create a Vuetify data table that has only some expandable rows

Daniel P 🇨🇦 — Wed, 24 Jul 2019 23:27:34 +0000

Uses vuetify v2.0.0

To make only some of the items expandable use the data-table-expand slot. The slot provides the following props.

{
  item: any
  select: (v: boolean) => void
  isSelected: boolean
  expand: (v: boolean) => void
  isExpanded: boolean
  headers: TableHeader[]
}

Using the item object and the expand function, you can add custom expend functionality.

<template>
  <v-data-table
    :headers="myHeaders"
    :items="myItems"
    :single-expand="true"
    show-expand
  >
    <!-- expand column -->
    <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
      <v-btn @click="expand(true)" v-if="item.canExpand && !isExpanded">Expand</v-btn>
      <v-btn @click="expand(false)" v-if="item.canExpand && isExpanded">close</v-btn>
    </template>

    <!-- expand item/row -->
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
        <pre>{{item}}</pre>
      </td>
    </template>
  </v-data-table>
</template>

The items objects use a canExpand boolean for determining if it can be expanded.

Vuetify, by default adds a text-start class to the expand td element. To change alignment, update the header object for that column, by adding an align property.

Available values are: 'start' | 'center' | 'end'

The expand column is always first though, If you want to make it last, you need to add a custom column.

steps:

Remove the show-expand prop from v-data-table, we're no longer using it.
Add :expanded.sync="expanded" prop to the data table, and a expanded:[] variable to your component data.
Add a new column { text: '', value: 'expand', align:'end' }, to myHeaders.
Add a row slot for the new column. Because the row slot does not provide a expand function, you need to use the expanded variable to toggle selection.

<template v-slot:item.expand="{ item }">
  <v-btn x-small @click="expanded = [item]" v-if="item.canExpand && !expanded.includes(item)">compare</v-btn>
  <v-btn x-small @click="expanded = []" v-if="item.canExpand && expanded.includes(item)">close</v-btn>
</template>

More info here: https://vuetifyjs.com/en/components/data-tables#api

Adding Front-end framework to existing PHP project

Daniel P 🇨🇦 — Sun, 21 Jul 2019 04:55:04 +0000

This was an answer to question at stack overflow that I couldn't post because it was closed before I could post it. https://stackoverflow.com/questions/57129851/how-to-use-js-frameworks-like-react-and-vue-and-es6-with-a-php-project

For a newcomer to front-end frameworks, I'd say probably the easiest way is to make small incremental changes replacing jQuery with Vue. I'd say Vue, and NOT React, because of the learning curve and changes since v. 16 that make it less friendly for un-compiled use. The React team seems to have dropped interest in supporting this kind of progressive approach by deprecating React.createClass from the main package. You can still do it, but it's an extra package now.

You can add incremental chages by adding a new script tag like

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

into your PHP template which will load Vue in addition to jQuery until you have removed jQuery completely)

Then find a component you want to convert from jQuery to Vue.

You can now add a Vue template or component into your PHP layout/page and the JS script into the page, a page script file, or a component-specific script file.

Rinse and repeat for other components.

It's important to note though that this is not the best practice. Ideally you'd have a JS pipeline that generates a SPA(Single Page App) and deals with APIs from your PHP app. This is my preferred way of developing apps, but it's not a must. Doing it the way I described will add some pain when it comes to managing the app long-term, but it's likely not as bad as managing jQuery. As long as you organize your files well, using this method is a reasonable way to get started with adding some advanced functionality. If you know you're going to support modern browsers only, you can start defining templates in the script using template literals, which will help with code management, since you can keep your vue layouts in js files instead of in php templates. Later on, as you get more comfortable, you can start consolidating the project into a unified SPA that gets all the benefits of a compiled project.

DEV Community: Daniel P 🇨🇦

Hacktober backfires on OSS

Hacktober Fast🍻

Tip

If you're participating, try to contribute in a helpful way.

Don't be this guy

Start writing Vue3 now

This is about how to create a setup using online tools such as jsfiddle to start coding in Vue3 right away.

Here is a quick setup

Vue composable - array pagination

Vue composable - array pagination

Composable function

Few things to note.

TL;DR;

How I test on front-end

Why test?

How many tests do I write?

I like long test names

But I'm, not a fan of snapshot

Extending Vue Test Utils

adding custom attributes for test only

N-th child

Use child text to find the correct item

Wrapper functions

Canvas color sampling

So, what was the problem?

So what's the solution?

So what's moral of the story?

Any shameless plug?

API Mocking server with hapi.js

RestAPI Mocking server with hapi.js

using hapi v. 18

Purpose

Mocking server functionality

About hapi (hapi.js)

getting started

Initialize project

install dependencies

add script to package.json

create database file db/users.json with some mock data

create server.js file

create routes/users.js file

run your server

Adding more routes

Customizing responses

Other possibilities

Vue3 Composition API - Creating a dragable element

Vue3 Composition API - Take 2

The Goal:

Break down dragable component using the Composition API in Vue3

The Plan

The Code

Fill in the owl

Notes

Code

Template

JS

Trying the composition API in Vue3

Trying the composition API in Vue3

Get the repo

TL;DR;

Resources :

Creating a dockerized vue-storybook project

Let's create a vue-based storybook project that runs in docker

Overview

1. Create a new project

2. Install vue

3. Install storybook

4. Add storybook script

5. Creating a component

6. Create Storybook configuration

7. Create a story

Test it

8. Create Dockerfile (for docker image)

9. Skip node_modules with .dockerignore

10. Create a docker container

How to create a Vuetify data table that has only some expandable rows

Adding Front-end framework to existing PHP project

create database file `db/users.json` with some mock data

create `server.js` file

create `routes/users.js` file