TLDR #7 - January 2022

January 8, 2022 • MrAnyx • 5 min de lecture

📚 TLDR (Too Long; Don't Read) is a monthly post to help you discover some great and innovative github projects, youtube channels or blog posts.

Today's episode is about : an app to manage invoices and payment, a fake activity tool, a very simple web components library, a funny way to show the technologies you use and a new way to create account avatar on a website.

Crater

As a freelance or an auto entrepreneur, you may have noticed that invoicing and payment management is very complex. You seem organized but the more clients you have, the more likely you are to be overwhelmed by invoices, quotes, ...

That’s why Crater was created. Crater is an open-source app that helps you stay organized by managing expenses, creating invoices and reports.

Crater is a self-hosted solution which means that you need your own server in order to use it. Crater is also available on mobile. In both cases, you’ll need to host Crater in your personal server. Indeed, the mobile application needs the server url to work properly.

This application uses Laravel and Vuejs for the web application and React Native for the mobile application. These technologies are very popular and a lot of documentation are available online. Thereby, if you encounter difficulties during the installation process, you will easily find solutions.

The user-interface is pretty clean, the upgrade guide explains each steps in case of updates. However, the main drawback is that the installation guide lacks precision. It doesn’t explain the process to change the public directory, or the upload process. Other than that, Crater is still a great solution for invoicing and payment management.

Genact

Sometimes, when you are at work and you’re just too lazy to work, you need to have an excuse like “I can’t work right now, my computer is doing a software update” or “Sorry, I’ll not be able to attempt the meeting because I’m doing a major update on my system”. That’s why Genact was created.

Genact created a fake activity on your computer, more precisely in your terminal. With a single command, you can simulate a building script, a memory dump or a download of several packages.

It runs on Linux, MacOS, Windows and even on your browser. There are several options available : botnet, bootlog, kernel_compile, memdump, composer, docker_build, download, ...

⚠️ I will not be responsible for your lack of productivity 😅

Lit

Lit is an extremely easy to use library to work with web components on an existing project. It is available on both javascript and typescript.

It includes reactive states, scoped style and automatic event listeners. Although the approach is quite different from other frontend frameworks like React or Vuejs, the syntax reminds me the one on React with class components and the render function.

Lit is very powerful and is extremely interesting if you want to add custom elements in an existing project without adding Vuejs or React.

The documentation seems very accurate and the community seems ready to help new developers who want to start with Lit.

Here is a code example of how to use Lit in a real-world example.

import {LitElement, css, html} from 'lit';

export class SimpleGreeting extends LitElement {
  static properties = {
    name: {},
  };
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      color: blue;
    }
  `;

  constructor() {
    super();
    // Declare reactive properties
    this.name = 'World';
  }

  // Render the UI as a function of component state
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Misbrands

You’ve probably already seen developers with stickers on their computers at school, at work or during a tech event. Sticking stickers allows to show the technologies that we use or that we appreciate.

However, sticking misbranded stickers can be a good way to laugh. Indeed, the Misbrands repository currently provides 9 stickers but the community is more than ever present to add new stickers. As i write this article, 37 pull requests have been created by the comunity to provide even more stickers.

This project is highly inspired by the legendary Sam Beckham's JavaScript sticker. It is under the Creative Commons Zero v1.0 Universal licence which means that you can freely use, modify or copy it. In other words, feel free to print and stick them at the back of your laptop.

Boring avatars

Boring avatars is a tiny React library that creates little avatar SVG. Different style are available : beam, marble, pixel, sunset, bauhaus and ring. You can also specify the size, the colors or the shape.

It can be used via the library or via the API. In both cases, you’ll need to specify the previous parameters.

This way, you can add some originality to your website. Instead of using the traditional default user avatar with the grey background, you can either use the React library or the API to create custom avatar.

Cover by Avi Richards

Cette œuvre est mise à disposition selon les termes de la licence Licence Creative Commons