RSS

Speedup your Vue!

Since ’90s the main rule using a render engine is: “don’t draw things you can’t see!”.

A web page is also rendered so we can apply the rule on it. We’ll see a quick trick that actually works, and that will give us the idea of what’s happening under the hoods.

Let’see how

Imagine you have your vue component with an array in its data section:

new Vue({
data: [] // a lot of items!
})

Actually you’ll want to paginate all of this stuff. But imagine you can’t paginate because it is a requirement to see the whole thing in one page.

To add difficulty, imagine every item in the array is rendered as a component with its own tree (subcomponents). In short, every item is costly to render.

The trick

When rendering a list of items you tipically use a v-for statement.
The nice thing with the v-for is that it gives us the i-th item of the iterable AND the i-th index of the item.

We can use this index to divide the list in ‘rendering blocks’: first 3 items will be rendered at time 0, next 3 items will wait (50 msec * 1) then will render, next 3 items will wait (50 msec * 2) then will render, and so on.
The final result is an page with incremental loading.
The only difference is that we call our APIs once to get the whole data in one block then we split into blocks the rendering.

The lower items the latter they appear on our page! We’ll never stress the render engine of our browser with tons of parallel ops.

Now we have an idea and an algorithm.
Let see the code.


<template>
  <MyComponent v-if="isHidden === false">
  </MyComponent>
<template>

(..)

props: {
  index: {
      type: Number,
      required: true,
    }
  },
  data: () => ({
    isHidden: true,
  }),
  created() {
    const self = this
    const delta = Math.floor( self.index / 3 ) // 3 is how many siblings will be rendered with me
    const timeblock = 50 // this is a unit of time (msec) to wait before next block of siblings
    setTimeout( () => {
      self.isHidden = false
    }, timeblock * delta)
  },

The v-if is the key of everything. Vue will not render a component until its v-if=true.

 
Leave a comment

Posted by on 2020/03/02 in dev

 

Tags: , ,

batch a batch

Let’s say you have a batch file that call another batch file.

CALL innerbatch.bat
It is used to call other batch files within a batch file, without aborting the execution of the calling batch file, and using the same environment for both batch files.

START innerbatch.bat
It starts in a new window (or session). It’s asynchronous.

innerbatch.bat
This is in the same shell. If the inner batch does an “exit”, it exits the one and only shell.

 
Leave a comment

Posted by on 2020/01/10 in sys

 

Tags: ,

still loving git (though it has corrupted repo)

Last day I’ve had my 5 minutes panic.

On two (2!) different repos git says that I’ve corrupted files in it.
A rapid googling showed me exotic fixes to the problem, actually removing empty files from inner git secret folders.

The question is…why?
I’m on git, I can clone it again and restart from there!
So..let’s go.

Here’s a picture of my broken repo. Isn’t it lovely? o_O

# broken!
git status
error: object file .git/objects/ea/2dcd1b9994ec139cc1328c8c0f3d45b94be228 is empty
error: object file .git/objects/ea/2dcd1b9994ec139cc1328c8c0f3d45b94be228 is empty
fatal: loose object ea2dcd1b9994ec139cc1328c8c0f3d45b94be228 (stored in .git/objects/ea/2dcd1b9994ec139cc1328c8c0f3d45b94be228) is corrupt

Let’s start from a new cleaned folder, then I’ll inspect where are my changes:

# list what's new
mv folder/ folder.broken/
git clone
diff -q -r -x node_modules -x .git folder/ folder.broken/

After I’m confident of my changes I can copy new stuff into my new folder.

# realign code
rsync -av --exclude node_modules --exclude .git folder.broken/ folder/

…and remember: use many, small commits to keep your tree clean!

 
Leave a comment

Posted by on 2019/04/08 in dev

 

Tags:

Jenkins (on docker) <3 siblings docker images

Untitled drawingI was studying jpetazzo’s docker-in-docker (dind) to manage Jenkins builds, annoyed by the fact that I wasn’s able to separate the build engine from my build artifacts.
While digging deeper I’ve found the two alternative options (read this):

  • installing the Docker CLI using your base image’s packaging system (i.e. if your image is based on Debian, use .deb packages)
  • using the Docker API

So I decided for the third option … 😎

TL;DR

Communicate with your host’s docker daemon through the docker API using docker-compose inside your jenkins image.
Remember that to make it works you have to bind the docker.sock file from-in-to-out (-v /var/run/docker.sock:/var/run/docker.sock)

Let’s go

Install docker-ce and docker-compose on your host

Create a folder that will contain the dockerized jenkins (server) stuff in your home (if you change this path please fix the following docker run command):
mkdir -p $HOME/jenkins/jenkins_home

Into jenkins/ create a Dockerfile that extends the jenkins/jenkins image and downloads+install the docker-compose executable:
FROM jenkins/jenkins
USER root
RUN curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose
USER jenkins

Finally you can run the built image, with some trick: run as a daemon, expose needed ports, mount a named volume for jenkins stuff (to save state) and share the docker.sock

docker run -it -d --name jenkins_docker -p 8080:8080 -p 50000:50000 -v $HOME/jenkins/jenkins_home:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock jenkins-docker
Or, if you prefer using compose:

version: '3'
services:
  jenkins:
    image: jenkins-docker
    build: .
    ports:
      - "8080:8080"
      - "50000:50000"
    volumes:
      - $HOME/jenkins/jenkins_home:/var/jenkins_home
      - /var/run/docker.sock:/var/run/docker.sock

Now, after configuring the first jenkins run, you are able to build your 1st pipeline.
As a test, you can enter the running image:
docker exec -it -u root jenkins-docker bash
and manually launch a build of a docker image using compose.

It will communicate through the container-host binding and the image will be built into our host.

 
Leave a comment

Posted by on 2018/08/24 in dev

 

Tags: , , ,

git + dropbox = gitbox!

Let say you’d like to sync all your projects between different pcs you own. Surely you can put every project on GitHub but this is not good for closed source projects (not if you’re using their free plan).

You can put the entire project on DropBox, but it will fill your space with .obj, .dll, .tmp, /node_modules/, … stuff you really NOT need.

The trick is to keep just a bare repository into DropBox: a well formed gitignore file will prevent you to sync object files.
So I create a GitBox folder into my DropBox folder, then:

cd "c:\DropBox\GitBox"
mkdir MyAwesomeProject
cd MyAwesomeProject
git init --bare

cd "c:\MyDevPath\MyAwesomeProject"
git init
git remote add gitbox "c:\DropBox\GitBox\MyAwesomeProject"
git add *
git status
git commit -m "1st commit"
git push --set-upstream gitbox master

 
Leave a comment

Posted by on 2018/04/22 in dev

 

Tags: ,

Inspect a list of filenames (js)

This shortcut demonstrates the power of some ES6 features.

Given a list of filenames, a map function is applied onto the array to generate (another) array of objects. Arrow functions and parentheses (to return JSON objects) are the trick used to add properties “on the fly”.
The resulting object will have the name, path and stats information resolved.

https://bitbucket.org/snippets/pirraste/8eG956/filesniffjs

 
Leave a comment

Posted by on 2018/04/20 in dev

 

Tags: , ,

SELECT latestversion FROM versionedRows: a comparative approach

Because there’s no “the best way to do things” but only the best way to do THIS thing (to read with Yoda voice).

 
Leave a comment

Posted by on 2017/09/07 in dev

 

Tags: , ,

GZip a file in memory (csharp)

It is a thing I ALWAYS forget: what’s the right piping sequence? How avoid errors? ..and so on…

Here’s the snippet

 
Leave a comment

Posted by on 2017/08/23 in dev

 

Tags: , ,

POST a file, read a JSON response

Here’s a trick to send a file to a server AND read a response from it, in the same context.
I used it with a Node.js server (Express + busboy) and it worked like a charm.

When using HTML forms, you can submit stuff to a server but you can’t read a response from it.
If you need some kind of “send data” → (do something server side) → “read response” it can be painful.

I wrote a workaround to manage this kind of situation. It is pretty simple:
– prepare a form as usual
– block the original event
– build an ajax request as a POST method

Here’s the code

 
Leave a comment

Posted by on 2017/07/14 in dev, Uncategorized

 

Tags: , ,

(another) handlebars template

I just started using loving gist.

This is a pretty basic Handlebars template, with its render engine.

 
Leave a comment

Posted by on 2017/06/12 in Uncategorized