Skip to content

16th Week of 2022

Projects⚑

Coding⚑

  • New: Introduce Cypress.

    Cypress is a next generation front end testing tool built for the modern web.

  • New: Introduce Vite.

    Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

    • A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

    • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

    Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

  • New: Introduce Vitest.

    Vitest is a blazing fast unit-test framework powered by Vite.

  • New: Display time ago from timestamp.

    Use vue2-timeago

    Install with:

    npm install vue2-timeago@next

  • New: Introduce Vuetify.

    Vuetify is a Vue UI Library with beautifully handcrafted Material Components.

  • New: Sum up all Cypress documentation.

    In particular how to:

    • Install it
    • Write tests
    • Setup the tests
    • Do component testing
    • Do visual regression testing

  • New: Truncate text given a height.

    By default css is able to truncate text with the size of the screen but only on one line, if you want to fill up a portion of the screen (specified in number of lines or height css parameter) and then truncate all the text that overflows, you need to use vue-clamp.

  • New: Environment variables.

    If you're using Vue 3 and Vite you can use the environment variables by defining them in .env files.

    You can specify environment variables by placing the following files in your project root:

    • .env: Loaded in all cases.
    • .env.local: Loaded in all cases, ignored by git.
    • .env.[mode]: Only loaded in specified mode.
    • .env.[mode].local: Only loaded in specified mode, ignored by git.

    An env file simply contains key=value pairs of environment variables, by default only variables that start with VITE_ will be exposed.:

    DB_PASSWORD=foobar
VITE_SOME_KEY=123

    Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but DB_PASSWORD will not. So for example in a component you can use:

    export default {
  props: {},
  mounted() {
    console.log(import.meta.env.VITE_SOME_KEY)
  },
  data: () => ({
  }),
}

  • New: Deploy with docker.

    And fight to make the environment variables of the docker work, the problem is that these environment variables are set at build time, and can't be changed at runtime by default, so you can't offer a generic fronted Docker and particularize for the different cases. I've literally cried for hours trying to find a solution for this until José Silva came to my rescue. The tweak is to use a docker entrypoint to inject the values we want.

  • New: Testing.

    I tried doing component tests with Jest, Vitest and Cypress and found no way of making component tests, they all fail one way or the other.

    E2E tests worked with Cypress however, that's going to be my way of action till this is solved.

Python⚑

Profiling⚑

  • New: Added memray profiling tool.

    memray looks very promising.

Frontend Development⚑

CSS⚑

  • New: CSS Flexbox layout.

    The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

Javascript⚑

Javascript snippets⚑

Operating Systems⚑

Linux⚑

Linux Snippets⚑

  • New: Trim silences of sound files.

    To trim all silence longer than 2 seconds down to only 2 seconds long.

    sox in.wav out6.wav silence -l 1 0.1 1% -1 2.0 1%

    Note that SoX does nothing to bits of silence shorter than 2 seconds.

    If you encounter the sox FAIL formats: no handler for file extension 'mp3' error you'll need to install the libsox-fmt-all package.

  • New: Adjust the replay gain of many sound files.

    sudo apt-get install python-rgain
replaygain -f *.mp3

Other⚑

  • New: Sum up all the VueJS documentation.