picostitch
crafting (and) JavaScript

Tagged with #javascript

I changed my job inside Sono Motors a bit, I need to learn node-RED now. Node-RED is a low-code, drag-n-drop UI for building execution flows, often used in IOT, but basically can be used to build any kind of (JavaScript) program. One can install add-ons (nodejs modules) that offer any kind of helper, interfaces, connectors, UI, and so on. You can build anything with it.

The <KeyboardAvoidingView> is one component provided by react-native, which (magically) handles the screen to re-layout when the virtual keyboard opens on ones phone.
This component comes not without challenges, I had actually written about it and I still keep finding things, which make me dig deeper into it to understand and eventually (fix and) use it properly.

State management in react as it is most commonly spread among devs is suboptimal, I would say. I just looked up my first react app, it's from 2014 and we used react to make working with HTML in a "normal" DOM based page easier and code more readable. React didn't control all the page. We used jQuery to animate between the pages, where each page was a react component. Nowadays a react app tries to get the entire app to be react as quickly as possible. Has it turned around, against us?

Coming across "unary operators" might happen in JavaScript, or (m)any other programming language(s). A couple examples for what is a "unary operator".
In JavaScript you may find: +1, -42, + "1", !true, delete x. All those are unary operators as you can also read on MDN and in the spec. But what does the "unary" really mean? And why is 1 + 1 not using a unary operator?

I am currently working on a React Native app that uses redux saga heavily. My main concern with it is the traceability of code that goes together, the modularization. It is hard, if not impossible to know what belongs together, what is needed in combination with what.

After live blogging on day 1 I made a plan for day 2. I will watch all content in 2x speed and just pause whenever I need a bit to write. It's just a video, so I can catch up by higher speed. Also I came to the conclusion that I don't even need to be fully in sync, except for the polls and the live chatting, but there is too much life going on in parallel that I am glad about the pause button.

While working on pico-tester I realized I am not as knowledgable in nodejs' support for ECMAScript Modules (esm).
I think it's very simple in the browser. There is <script type=module> which understands import and there is <script nomodule> which nicely gradually falls back to before ESM times. But what about nodejs? There is a package.json with properties such as main: <filename>, exports: {} type: module, type: commonjs, and any combination of them. For a long time I am using the package esm to allow me to use ESM on nodejs, but when publishing a package such as pico-tester, I must be compatible with as many ways as possible, in which nodejs can be used. So first there is terminology to get right (esm, cjs, ...) and than provide the right type of package or packaging so it can be used there. I might update this over time with more learnings.

You don't need to rename all your ".js" files to ".ts" to go all in on TypeScript, you can go gradually. Adopt TypeScript step by step, become familiar with it in your existing JavaScript project. No need to put development on hold for weeks, while you convert the code base to TypeScript and fix all type errors. Read on to see how I adopt TypeScript for JavaScript for the sourcecode of jskatas.org.

I was just filtering a list list.filter(someCondition) and I only wanted the first element in case there is one. Doing list.filter(someCondition)[0] fails when the filtered list is empty. So I am using slice(0, 1), which returns the first element if there is one, an empty list otherwise. Now I do list.filter(someCondition).slice(0, 1) and never list.filter(someCondition)[0]. Such small things.

While refactoring some badly tested code, a pattern of how I extract dependencies emerged. The actual intention was to improve the testability. In this case dependency injection is the tool that helped me. Read here to find out the steps I found to separate the dependencies.

Actually we are currently discussing and evaluating to use react or alike and this react lifecycle comes in perfectly and somehow also makes the point stronger that a well documented, cared and widely used project is a good thing to be using. Decided!

At this point in the EmberJS Framework Basics Part 2 video the author explains how you can make (computed) properties out of 'normal' methods by using what the ember.js Ember.Object offers. It starts out with friend.age(), which returns what you expect. The author wants to write this as a property (as one accesses it in ember!) like this friend.get('age'). How is that done? Well, ember extends the native prototype of Function, so you can write this inside an ember object definition age: function (){}.property().

730.975 byte - the size of the main JS file of an empty app that ends up in the dist folder after building the app by ember build --environment=production.

Don't promisify fs.exists since this does not play by the rules of node style callback params, where the first one should be err and then data. It seems this does return only the data, which promisify understands as an error and does throw right away. Instead do what the node js docs suggest too and use fs.access instead, like so: promisify(fs.access)(aPath, fs.R_OK). See it in action [here in the cosmowiki].

The new dojo? I started with dojo about 10 years ago, or so. Now I see reapp which seems to be the same as dojo, lots of widgets, just around react and transferred 10 years ahead and to mobile.
Good stuff? Or not?

In order to keep all your meta data of your project in one place and only create files that actually just copy those data you can use projectz where you maintain data like title, description, author(s), badges, ... in one CSON file and with a special markup you can update fill in the templates files like README, package.json, ...