picostitch
crafting (and) JavaScript

Articles tagged with #javascript (53)

#React

Redux, Context or What

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?
Continue reading β†’

#learning

What's an "Unary" Operator?

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?
Continue reading β†’

#react

React: Hooks vs. Saga

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.
Continue reading β†’

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.

#JavaScript

ECMAScript Module Support in nodejs

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.
Continue reading β†’

#javascript

NodeJS Architecture Applied

The article Node.js, Dependency Injection, Layered Architecture, and TDD: A Practical Example, Part 1 by @Carlos GonzΓ‘lez gives a very good introduction of how to structure a (TypeScript/JavaScript) app. He links articles that allow one to dive deeper into underlying concepts and still explains the big picture very well. Great job Carlos!
Continue reading β†’

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.

#JavaScript

Make arr[0] Fail Safe

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.
Continue reading β†’

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, ...