Forem: decker

No more State Management with Signals

decker — Sun, 31 Dec 2023 16:12:40 +0000

State management and I have never been on good terms. The sheer amount of boilerplate code and the usage of strings during development have always been pain points for me. At its worst, the entire algorithm can be scattered across the entire source code, making it challenging to decipher the application's behavior and when the firing stops. Consequently, I only resort to using state management when absolutely necessary and make a conscious effort to avoid it wherever possible.

Recently, a new star has emerged on the horizon that seems poised to replace traditional state management. It appears to be more straightforward to comprehend and requires less code. What are your thoughts on this? Do you believe the era of traditional state management is coming to an end, and if not, what factors are contributing to its endurance?

Is programming in TypeScript simply another excuse not to write test in JavaScript?

decker — Wed, 04 Jan 2023 21:53:58 +0000

I know TS and i know JS and I prefer JS over TS because of multiple reasons.

Reading posts where people tells us why it is a good idea to use TS ends with types makes programms more stable because the TS compiler helps to avoid errors at build time.

But this can even better be done with tests, I think.
Tests can describe behaviour and the structure of your JS and that includes the types.

If you add an attribute to an object, your tests should show the problem and so on.

Homework: Brackets Check in JS

decker — Tue, 06 Dec 2022 21:33:25 +0000

I recentliy saw a homework for students in which you should write a function that gives true if a string with brackets of different types closes brackets accordingly otherwise false.

My first solution not using a stack was this:

const openBrackets = '([{'
const closingBrackets = ')]}'

function checkBrackets (string) {
  let bracketsStack = ''
  for (let i = 0; i < string.length; i++) {
    const char = string[i]
    if (openBrackets.includes(char)) {
      bracketsStack += char
    } else if (closingBrackets.includes(char)) {
      const lastBracket = bracketsStack[bracketsStack.length - 1]
      if ((lastBracket === '(' && char !== ')') ||
          (lastBracket === '{' && char !== '}') ||
          (lastBracket === '[' && char !== ']')) {
        return false
      }
      bracketsStack = bracketsStack.substring(0, bracketsStack.length - 1)
    }
  }
  return true
}

console.log(checkBrackets('()()')) // true
console.log(checkBrackets('([])')) // true
console.log(checkBrackets('([)]')) // false

But it looks a bit ugly using the big if and I created a second one using a map, to make it shorter and easier, I would think.

const brackets = {
  '(': ')',
  '{': '}',
  '[': ']',
}
const openingBrackets = Object.keys(brackets)
const closingBrackets = Object.values(brackets)

function checkBrackets (string) {
  const bracketsStack = []
  charIterator = string[Symbol.iterator]()
  let char
  while (char = charIterator.next().value) {
    if (openingBrackets.includes(char)) {
      bracketsStack.push(char)
    } else if (closingBrackets.includes(char)) {
      if (brackets[bracketsStack.pop()] !== char) {
        return false
      }
    } 
  }
  return true
} 


console.log(checkBrackets('()()')) // true
console.log(checkBrackets('([])')) // true
console.log(checkBrackets('([)]')) // false

What do you think? Is there a more elegant version to do it?

Most useful Font for JavaScript

decker — Sat, 17 Sep 2022 10:12:24 +0000

Recently I saw a tutorial and the visualisation of the arrow symbols in the source and ask myself: Where can I get this font?

The solution is quite simple. Visit FiraCode and you are almost there.

What's the use? Here an excerpt from the README

Problem
Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

Solution
Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. For some frequent sequences like .. or //, ligatures allow us to correct spacing.

FiraCode

Reputation for Posts?

decker — Mon, 12 Sep 2022 14:50:35 +0000

I am wondering very often how many reputation some posts got, even they contain almost nothing new, are not well written and does not do something extraordinary to mention.

Do we already had bots here, doing their job to get in the tops?

Think First, Code Second

decker — Sat, 10 Sep 2022 10:51:54 +0000

From time to time I see code from colleges or other people, that seems to be to complicated or architectures that consists of many parts, more than I would add.

My questions: Why is that?

I think they simply follow a known pattern read or seen anywhere.

They do not think about it first, is something really needed or who needs it.

Adding a statemanagement library like Pine, adding Axios for the REST API, MinIO for Object Store, Elastic Search and so on. And sometimes it is even more strange, when the framework itself has a solution for this and you do not have to add another one.

I would suppose: Think first, start lean and simple, use interfaces to hide implementation details and only switch to bigger players when really needed.

What do you think? How would you start a project?

Write your own CORS Proxy with NodeJS in no time.

decker — Fri, 09 Sep 2022 13:44:47 +0000

You know CORS otherwise you would not read this article, I guess. So let's get beyond it and straight to the solution coded in a few lines of JavaScript. Or better before, show the problem.

My demo page below shows it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <textarea id="output" rows="20" cols="120"></textarea>

  <script type="module">
    const outputNode = document.getElementById('output')
    const TARGET_URL = 'https://datahub.erde-und-umwelt.de/en/api/getServiceConfiguration/climateResilience'
    const URL = TARGET_URL
    // const URL = `http://localhost:8088/${TARGET_URL}`
    fetch(URL)
      .then((response) => response.json())
      .then((data) => outputNode.textContent = JSON.stringify(data, null, 2))
      .catch((exception) => {
        outputNode.textContent = exception
      })
  </script>
</body>
</html>

It simply tries to request some JSON data from a REST API and puts the result into a textarea.

But this does not happen, because of the wrong CORS header - the request is not allowed for every client.

So it only shows an error.

To get beyond this, you can write a backend that requests the data for you and put it through with a universal CORS header, so everyone can use it.

I will write this backend in NodeJS means JavaScript. The idea is, as also visible in the page, putting a proxy in front of the requested URL like this:

http://localhost:8088/${TARGET_URL}

That means a request to http://example.de is prefixed with http://localhost:8080 in result gives http://localhost:8080/http://example.de

The proxy receives the request and extracts the requested URL from the request and requests the data.

The code is pretty simple using the http-proxy-middleware.
There is not much to do, at all, as you can see below.

const express = require('express')
const cors = require('cors')
const { createProxyMiddleware } = require('http-proxy-middleware')

const app = express()
app.use(cors())
app.use(createProxyMiddleware({
  router: (req) => new URL(req.path.substring(1)),
  pathRewrite: (path, req) => (new URL(req.path.substring(1))).pathname,
  changeOrigin: true,
  logger: console
}))

app.listen(8088, () => {
  console.info('proxy server is running on port 8088')
})

I therefore use the external NodeJS modules express, http-proxy-middleware and cors.

How is it done?

This creates the server.

const app = express()

This enables CORS for all routes, methods and clients.

app.use(cors())

The only special tricky line is this.

app.use(createProxyMiddleware({
  router: (req) => new URL(req.path.substring(1)),
  pathRewrite: (path, req) => (new URL(req.path.substring(1))).pathname,
  changeOrigin: true,
  logger: console
}))

It creates the middleware. The middleware routes to the embedded URL and rewrites the path.

And that's it. You created a CORS Proxy in NodeJS.

UI5 Web Components && SolidJS

decker — Tue, 23 Aug 2022 14:07:31 +0000

If you are looking for a Component Framework useable with SolidJS maybe UI5 Web Components are the right choice for you.

They have instructions for Vue, React and Angular and hence SolidJS is not so far away from React, it also fits into the stack.

Simply start with Getting Started from SolidJS and add the webcomponents with

npm install @ui5/webcomponents --save

After that you are good to go.

import '@ui5/webcomponents/dist/Button.js'

<ui5-button>Hello world!</ui5-button>

What do you prefer for SolidJS?

Singeltons in JavaScript not needed?

decker — Sat, 20 Aug 2022 15:33:00 +0000

Yes you can implement the singelton pattern in JavaScript with a class, but is it useful or do we need it?

I don't think so, because simply using an object literal is sufficient and always a singelton, if you place it in his own file.

This little example shows it.

console.log('A imported')

const state = {
  isLoading: false,
  hasError: false
}

export default state

import state from './A.js'
console.log('B imported')

const api = {
  getData () {
    state.isLoading = true
  }
}

export default api

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script type="module">
    import state from './A.js'
    import api from './B.js'
    console.log(state)
    api.getData()
    console.log(state)
  </script>
</body>
</html>

The console shows only one A imported and the state is shared.

The reason is, JavaScript imports each file/module only once and modules are singletons per definition. If a module is imported multiple times, only a single instance of it exists and it is evaluated only once after load.

Timeout with the fetch API

decker — Sat, 20 Aug 2022 15:05:00 +0000

Some time ago I shifted from Axios to fetch, to get rid of another dependency. Nowadays the fetch API is available everywhere, in the browser and also in node, so no need to take something else and it also supports streaming that is not available in Axios.

But when it comes to set a timeout for a request, how could this be done?

I saw solutions using setTimeout but far better seems the following solution.

Simply add

signal: AbortSignal.timeout(<number>)

to your fetch like in this example and you are done — at least for the timeout.

fetch(<url>, {
  ...
  signal: AbortSignal.timeout(5000)
})

Hope this helps to get more comfortable with the fetch API.

Do we need Axios having the fetch API everywhere?

decker — Thu, 11 Aug 2022 13:38:00 +0000

What do you prefer?
Is there a reason to use Axios these times?

In my opinion there is almost no reason to do so and I would suggest to get rid of another dependency, making things more lean and easier to understand.

At least thank you for your work Axios team. It helped a lot in the old times before fetch.

Do we really need Flux, Vuex, Pinia, MobX and all the other Statemanagement Frameworks?

decker — Wed, 10 Aug 2022 16:43:00 +0000

Or is it sufficient to us the build in reactivity system of Vue or the other frontend frameworks like in SolidJS.

I think it is the same question like using Axios or fetch?
You don't have to axios any more in times of the fetch API and it makes your source easier to understand.

The JavaScript World gets overwhelmed with frameworks and libraries, that soon gets replaced by the next one.

The argument to use them get killed with the next one coming up from nowhere. So why using them at all and how often do you really need them to share a state between to components.

Less is more.

What do you think?