picostitch
crafting (and) JavaScript

Tidbits tagged with #javascript (67)

#node-red

Learning node-RED

December 4, 2022 - tagged with: #low code #no code #nodejs #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.
Continue reading →

#React Native

Understanding React Native's onLayout Attribute (a bit)

July 29, 2021 - tagged with: #JavaScript #android #iOS #mobile #KeyboardAvoidingView

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.
Continue reading →

#React

Redux, Context or What

March 16, 2021 - tagged with: #JavaScript

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?

February 6, 2021 - tagged with: #words #knowledge #JavaScript

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

February 2, 2021 - tagged with: #tools #frontend #web #JavaScript

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 →

#conference

TestJSSummit - Notes for Day 2

January 29, 2021 - tagged with: #JavaScript #a11y

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.
Continue reading →

#JavaScript

ECMAScript Module Support in nodejs

July 26, 2020 - tagged with: #node.js

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

June 20, 2020 - tagged with: #architecture #code #web #design patterns #clean code #TypeScript #monorepo

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 →

#javascript

TypeScript for JavaScript - Part 1 (Setup)

May 12, 2020 - tagged with: #typescript #typing #setup #ts4js

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.
Continue reading →

#JavaScript

Make arr[0] Fail Safe

May 3, 2020 - tagged with: #knowledgebase

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 →

#purescript

Purescript #1 - the semantics of JavaScript with types

March 1, 2017 - tagged with: #javascript #functional #typing

I am convinced, that stricter types are of help when writing, reading and understanding source code. Why? Ever had the primitive obsession? And if you continue down the (type) rabbit whole, you get to stricter typing. And to Purescript, which attempts "to keep the semantics of JavaScript, while enjoying the syntax and type system of a language like Haskell".
Continue reading →

#javascript

React LifeCycle

February 16, 2016 - tagged with: #react

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!
Continue reading →

#emberjs

How Ember methods become computed properties

December 8, 2015 - tagged with: #javascript #framework

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().
Continue reading →

#emberjs

Exploring emberjs

December 3, 2015 - tagged with: #javascript

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.
Continue reading →

#javascript

Don't promisify fs.exists

November 10, 2015 - tagged with: #async #knowledgebase

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].
Continue reading →

#npm

A meta project

January 20, 2014 - tagged with: #nodejs #javascript #knowledgebase

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, ...
Continue reading →