DEV Community: nop33.eth

Looking for (React) open-source contributors to reward

nop33.eth — Fri, 20 Dec 2024 12:11:00 +0000

As our user base grows so does the GitHub issue backlog. My teammate and I at Alephium would be delighted to collaborate with open-source contributors from the React community.

We will reward good code through our grands & rewards program. 🤑

Our codebase consists of a monorepo with a React webapp, a React Electron app, and a React Native app, alongside shared packages.

https://github.com/alephium/alephium-frontend/

Hit us up on Discord, Telegram, GitHub, X, or wherever you can find us!

Bun challenges: @shopify/react-native-skia

nop33.eth — Tue, 21 Nov 2023 13:51:00 +0000

At work we recently switched from a poly-repo to a mono-repo set up and from using npm to using Bun as our project manager. One of the challenges that I faced today was that I could not run our React Native app in an Android simulator anymore. The main error I was getting was this:

    Cannot find source file:

      node_modules/@shopify/react-native-skia/android/cpp/jsi/JsiHostObject.cpp

Click here for full traceback

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':shopify_react-native-skia:configureCMakeDebug[arm64-v8a]'.
> [CXX1429] error when building with cmake using /path/to/monorepo/node_modules/@shopify/react-native-skia/android/CMakeLists.txt: -- Android: Targeting API '21' with architecture 'arm64', ABI 'arm64-v8a', and processor 'aarch64'
  -- Android: Selected unified Clang toolchain
  -- The C compiler identification is Clang 12.0.8
  -- The CXX compiler identification is Clang 12.0.8
  -- Detecting C compiler ABI info
  -- Detecting C compiler ABI info - done
  -- Check for working C compiler: /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/bin/clang - skipped
  -- Detecting C compile features
  -- Detecting C compile features - done
  -- Detecting CXX compiler ABI info
  -- Detecting CXX compiler ABI info - done
  -- Check for working CXX compiler: /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/bin/clang++ - skipped
  -- Detecting CXX compile features
  -- Detecting CXX compile features - done
  -- Configuring done

  C++ build system [configure] failed while executing:
      /path/to/android/sdk/cmake/3.22.1/bin/cmake \
        -H/path/to/monorepo/node_modules/@shopify/react-native-skia/android \
        -DCMAKE_SYSTEM_NAME=Android \
        -DCMAKE_EXPORT_COMPILE_COMMANDS=ON \
        -DCMAKE_SYSTEM_VERSION=21 \
        -DANDROID_PLATFORM=android-21 \
        -DANDROID_ABI=arm64-v8a \
        -DCMAKE_ANDROID_ARCH_ABI=arm64-v8a \
        -DANDROID_NDK=/path/to/android/sdk/ndk/23.1.7779620 \
        -DCMAKE_ANDROID_NDK=/path/to/android/sdk/ndk/23.1.7779620 \
        -DCMAKE_TOOLCHAIN_FILE=/path/to/android/sdk/ndk/23.1.7779620/build/cmake/android.toolchain.cmake \
        -DCMAKE_MAKE_PROGRAM=/path/to/android/sdk/cmake/3.22.1/bin/ninja \
        "-DCMAKE_CXX_FLAGS=-fexceptions -frtti -std=c++1y -DONANDROID" \
        -DCMAKE_LIBRARY_OUTPUT_DIRECTORY=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/intermediates/cxx/Debug/5v1r3a6q/obj/arm64-v8a \
        -DCMAKE_RUNTIME_OUTPUT_DIRECTORY=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/intermediates/cxx/Debug/5v1r3a6q/obj/arm64-v8a \
        -DCMAKE_BUILD_TYPE=Debug \
        -DCMAKE_FIND_ROOT_PATH=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/.cxx/Debug/5v1r3a6q/prefab/arm64-v8a/prefab \
        -B/path/to/monorepo/node_modules/@shopify/react-native-skia/android/.cxx/Debug/5v1r3a6q/arm64-v8a \
        -GNinja \
        -DANDROID_STL=c++_shared \
        -DREACT_NATIVE_VERSION=72 \
        -DNODE_MODULES_DIR=/path/to/monorepo/node_modules \
        "-DPREBUILT_DIR=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/react-native-0*/jni"
    from /path/to/monorepo/node_modules/@shopify/react-native-skia/android
  -- ABI : arm64-v8a
  -- PREBUILT: /path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/react-native-0*/jni
  -- BUILD : /path/to/monorepo/node_modules/@shopify/react-native-skia/android/build
  -- LIBRN :
  -- LOG : /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/lib/aarch64-linux-android/21/liblog.so
  -- JSI : ReactAndroid::jsi
  -- REACT : ReactAndroid::react_nativemodule_core
  -- FBJNI : fbjni::fbjni
  -- TURBO : ReactAndroid::turbomodulejsijni
  CMake Error at CMakeLists.txt:40 (add_library):
    Cannot find source file:

      /path/to/monorepo/node_modules/@shopify/react-native-skia/android/cpp/jsi/JsiHostObject.cpp

    Tried extensions .c .C .c++ .cc .cpp .cxx .cu .mpp .m .M .mm .ixx .cppm .h
    .hh .h++ .hm .hpp .hxx .in .txx .f .F .for .f77 .f90 .f95 .f03 .hip .ispc

  CMake Error at CMakeLists.txt:40 (add_library):
    No SOURCES given to target: rnskia

  CMake Generate step failed. Build files cannot be regenerated correctly.

However, the following file DID exist:

node_modules/@shopify/react-native-skia/cpp/jsi/JsiHostObject.cpp

Seems like some symlinking is not working properly.

This unrelated issue reminded me that:

Bun does not execute arbitrary lifecycle scripts for installed dependencies, such as postinstall and node-gyp buildshttps://bun.sh/guides/install/trusted

Solution

Adding a trustedDependencies property in the package.json file of my project, deleting the bun.lockb file and node_modules and reinstalling with bun i fixed the issue:

  "trustedDependencies": [
    "@shopify/react-native-skia"
  ]

rm -rf node_modules
rm bun.lockb
bun i

This is also verified when looking at the logs og the bun i command:

Updating symlinks for Android build...
Creating symlink to api /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to jsi /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to rnskia /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to skia /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to utils /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Symlinks created successfully.

Storing a function in React state

nop33.eth — Wed, 07 Jun 2023 14:11:00 +0000

I felt very React-dumb today. I simply wanted to store a function in the state of a React component. So, I would initialize the component state:

const [myCallback, setMyCallback] = useState<() => void>()

and later in the code I would have a button that sets this state:

const cb = () => console.log('hi!')
setMyCallback(cb)

I’ve been breaking my head on why the hell my callback function gets called even though I never call it anywhere in my code! Notice that we didn’t execute cb() or myCallback() anywhere.

The problem is that the argument of the setState functions can be a function that let’s us update the state based on the previous value. See the docs of setState for details. React cannot tell if the function we pass is the aforementioned function, or the value that we want to store in our state. A solution to this is to simply wrap the value we want to store into a function:

setMyCallback(() => cb)

So funny yet so frustrating at the same time! Hope I save someone’s time!

Using npm distribution tags the right way

nop33.eth — Sat, 02 Apr 2022 15:06:00 +0000

I learnt a lot about npm package distribution tags at work in the past couple of weeks and I thought to share my learnings in this blog post.

Publishing a package on npm is quite simple. All you need is an account on npmjs.com and a project containing a package.json file. Then, with a few simple commands you can publish your package to npm:

npm login
npm publish

The above command will pack your project and deploy it to the npm registry. What’s more, is that it will make the latest distribution tag of your npm package point to the version of the package that is defined in the package.json file:

// Example package.json file
{
  "version": "0.1.0"
}

But what is a distribution tag?

What this means is that when a user of your package installs it with npm i my-awesome-package or npm i my-awesome-package@latest it will install version 0.1.0 from the example above. So, when running npm publish in a project where the version in package.json is set to 0.1.0, the latest package distribution tag is an alias to the 0.1.0 version of your package.

But what if you want to publish a version of your package to npm, but you don’t want the latest alias to point to that version? You may want, for example, to publish a release candidate version (say 1.0.0-rc.0) so that your users can download it (with npm i my-awesome-package@1.0.0-rc.0) and test your upcoming changes before you publish a new patch/minor/major version of your package. But while you want your release candidate to be available on npmjs.com for people to find and download, you don’t want this version to show up when users are upgrading their packages, for example, with npm outdated and npm upgrade, nor when users install it with npm i my-awesome-package.

The answer is in the docs of npm publish. Running npm publish is the same as running npm publish --tag latest. That’s why the package version is always mapped to the latest distribution tag. You can easily override this, by simply providing a different distribution tag. The mistake I made (guilty for not reading the distribution tags docs properly) was that I thought “OK, I can just pass the version of my package as the tag and then the latest won’t point to it”. So I tried:

npm publish --tag 1.0.0-rc.0

only to receive the error message:

npm ERR! Tag name must not be a valid SemVer range

Going back to the docs helped me understand the issue better. But it was this StackOverflow answer that really brought the issue home.

Package distribution tags are not meant to be version numbers. They are aliases to version numbers. They are words like latest, stable, next, rc, experimental, etc.

So, the correct way to publish a release candidate to npm, without making the latest alias point to it is to run

npm publish --tag rc

Workflow for versioning and publishing

Overall, this is the workflow I follow to version my package and publish it on npm:

Step 1 : Bump the version of the package with npm version to create a git commit and a git tag (not to be confused with package distribution tags as I did above):

npm version patch # for a patch version
npm version minor # for a minor version
npm version major # for a major version
npm version prerelease --pre-id rc # for a release candidate version

Step 2 : Have a GitHub Action workflow that runs when pushing tags on GitHub. The workflow:

reads the name of the tag that was pushed
defines the distribution tag (latest if the tag matches the pattern X.Y.Z or rc if it matches the pattern X.Y.Z-rcN)
runs npm publish --tag [latest|rc]

Step 3 : Push generated tag on GitHub to trigger the workflow

Step 4 : Profit ✅

Tips

Something that helped me clear things out in my head was the command npm view. You can run it to inspect any published package on npm. For example, you can use it to inspect the distribution tags of a package:

$ npm view web3 dist-tags
{ latest: '1.7.1', next: '2.0.0-alpha.1', rc: '1.7.2-rc.0' }

Git commits from GitLab CI

nop33.eth — Wed, 04 Aug 2021 00:00:00 +0000

Last week I implemented a search functionality for a static website with Lunr.js. The way I implemented the search system, depends on 2 files to work, the pagesData.json and the searchIndex.json. These 2 files get generated by running an npm script (I called it yarn createSearchIndex) which will parse all markdown files of the static website (pages and blog posts) and create the 2 aforementioned files. Obviously, I do not want to be responsible for running this script on my machine every time someone publishes a new blog post through our CMS (we use NetlifyCMS, so when someone wants to create a new blog post, they simply log in into the CMS, create the blog post, and the CMS will create a new commit on the branch NetlifyCMS connected to). What I want is the following:

User commits a new blog post in branch main
A GitLab CI pipeline is triggered, which runs the yarn createSearchIndex script, which in turn generates the new pagesData.json and the searchIndex.json files
GitLab CI commits the new pagesData.json and searchIndex.json files without triggering a new CI pipeline

Allowing GitLab runner to push to the git repo

We need to ensure that the GitLab runner machine can push new changes to our repository, so we need to have an SSH key and a git user.

Create SSH key pair

Create a public (deploy_key.pub) and private (deploy_key) SSH key pair without a passphrase with:

ssh-keygen -f deploy_key -N ""

Create environment variables

In the settings/ci_cd page of your GitLab project, define 3 environment variables:

CI_GIT_USER_EMAIL with the email of the git user that will appear in the commits made by the GitLab runner
CI_GIT_USER_USERNAME with the name of the git user that will appear in the commits made by the GitLab runner
SSH_PRIVATE_KEY with the contents of the private SSH key (you can copy the contents with pbcopy < deploy_key)

Create deploy key

In the settings/repository page of the GitLab project we need to create a deploy key. Create a new deploy key and paste the contents of the previously generated public key (pbcopy < deploy_key.pub).

Make sure to enable Grant write permissions to this key, otherwise the runner won’t be able to push new commits.

Write .gitlab-ci.yml file

A basic version of my .gitlab-ci.yml file looks like this:

image: node:14

stages:
  - commit

update-index:
  stage: commit
  before_script:
      # Set up the SSH key and the known_hosts file
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    - eval $(ssh-agent -s)
    - echo "${SSH_PRIVATE_KEY}" | tr -d '\r' | ssh-add - > /dev/null
    - mkdir -p ~/.ssh
    - ssh-keyscan my.selfhostedgitlab.com >> ~/.ssh/known_hosts
  script:
      # Configure git
    - git config --global user.email "${CI_GIT_USER_EMAIL}"
    - git config --global user.name "${CI_GIT_USER_USERNAME}"
      # Cone git repo
    - git clone git@my.selfhostedgitlab.com:${CI_PROJECT_PATH}.git
    - cd ${CI_PROJECT_NAME}
    - git checkout main
      # run scripts to generate new pagesData.json and searchIndex.json
    - yarn && yarn createSearchIndex
      # Check if there is something to commit, commit files, and push
    - |
      if [[-n $(git status --porcelain)]]; then
        git add src/pagesData.json src/searchindex.json &&
        git commit -m "Update search index" &&
        git push origin main -o ci.skip
      fi
  only:
    - main

Make sure to add the -o ci.skip flag in the git push command, so that you don’t trigger another pipeline.

The commit should then appear, with the name of the git user you have configured:

Resources

These resources helped me figure it out:

Photo by Pankaj Patel on Unsplash

Question regarding best practice on managing state

nop33.eth — Thu, 22 Jul 2021 12:52:04 +0000

I am working on an app that presents a list of questions to the user and expects answers. The representation of data is something like this:

const steps = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
    answer: null,
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
    answer: null,
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
    answer: null
  },
];

My question is, should I store this whole object in the state, or only store the answers?

In the first case, the code would look something like the following. Here we can see that questions and answers are bundled together, which makes it easier to iterate over them and display them together.

const WheelOfLife = () => {
  const [stepsData, setStepsData] = useState([
    {
      title: "Health",
      question: "How satisfied are you with Health",
      answer: null,
    },
    {
      title: "Career",
      question: "How satisfied are you with Career",
      answer: null,
    },
    {
      title: "Love",
      question: "How satisfied are you with Love",
      answer: null
    },
  ])

  const setAnswer = (index, answer) => {
    const newStepsData = [...stepsAnswers]
    newStepsData[index].answer = answer
    setStepsAnswers(newStepsData)
  }

  return (
    <ul>
      {stepsData.map(step => (
        <li key={step.title}>
          {step.title}: {step.answer}
        </li>
      ))}
    </ul>
  )
}

In the second case, I am following the recommendation of the React docs that says "Does it remain unchanged over time? If so, it probably isn’t state.", but now questions and answers are separated and it becomes a tiny bit more complicated to access the data:

const stepsData = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
  },
];

const WheelOfLife = () => {
  const [stepsAnswers, setStepsAnswers] = useState(new Array(stepsData.length))

  const setAnswer = (index, answer) => {
    const newStepsAnswers = [...stepsAnswers]
    newStepsAnswers[index] = answer
    setStepsAnswers(newStepsAnswers)
  }

 return (
    <ul>
      {stepsData.map((step, index) => (
        <li key={step.title}>
          {step.title}: {stepsAnswers[index]}
        </li>
      ))}
    </ul>
  )
}

Thank you for the feedback!

Splitting huge NetlifyCMS config.yml file to multiple JS files

nop33.eth — Thu, 15 Jul 2021 00:00:00 +0000

For a long time, I have been procrastinating in finding a solution to my ever-growing NetlifyCMS config.yml file.

Context

The website I have been working on consists of 18 unique pages (home page, about page, contact page, etc) as well as of a blog feature. The content of each page is stored in frontmatter inside markdown files, except for the content of the blog posts which is stored in actual markdown.

To demonstrate the differences between the content of each page, have a look at the following snippets of 3 of those pages:

Home page

---
title: Home
seo:
  title: Lorem ipsum dolor sit amet
  description: >-
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
header:
  title:
    text_part_1: Sed ut perspiciatis
    text_part_2: unde omnis iste natus
  button:
    text: Lorem ipsum
    url: /lorem
  subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
key_facts_section:
  title: At vero eos et accusamus
  key_facts:
    - title: Et harum quidem
      icon: static/images/icons/clock.svg
    - title: Nam libero tempore
      icon: static/images/icons/earth.svg
testimonials: ...
---

About page

---
title: About
menu:
  footer:
    weight: 40
  main:
    weight: 20
seo:
  title: Quis autem vel eum
  description: Et harum quidem rerum facilis est et expedita distinctio.
header:
  title: About
video_section:
  text: >-
    Et harum quidem rerum facilis est et expedita distinctio. Nam libero
    tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
    id quod maxime placeat facere possimus.
  title: Rerum necessitatibus saepe
  video: https://player.vimeo.com/video/845028457
team_section: ...
---

Blog post

---
title: Et harum quidem rerum facilis est et expedita
date: 2017-02-28
description: >-
  Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
  quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
  est, omnis dolor repellendus. Temporibus autem quibusdam et aut.
image: /images/uploads/featured-image.jpg
---
This is the body of the **blog post** , written in markdown.

As you can see the content of each page is vastly different from the others, yet there are some patterns that repeat themselves. To create a NetlifyCMS configuration file for all of the 18 pages and other data files I needed a 2’000 lines of code config.yml file. This approach works, but the code is not very DRY and it is really hard to change something or add something new. It’s time to improve.

Make the NetlifyCMS configuration code DRY

One valid approach to not repeatting parts of the YAML configuration would be to use YAML anchors (&), aliases (*), and overrides (<<). But I discovered a better approach. ✨

Using JavaScript instead of YAML

Through the related GitHub issue and the new beta NetlifyCMS feature of manual initialization I discovered that I am not restricted to using YAML to configure the CMS. Using JS does not only allow me to split the configuration into multiple files but to create objects and functions to keep my code DRY as well.

File structure

The file structure that fits my needs is the following (the tree view is simplified to only show the related pages from the example snippets I mentioned above). Below I explain what the purpose and contents of each file are.

└── cms
    ├── index.js
    ├── editor-components.js
    └── config/
        ├── index.js
        ├── fields.js
        ├── patterns.js
        └── collections/
            ├── blog-posts
            │ └── index.js
            └── pages
                ├── about.js
                ├── blog.js
                ├── home.js
                └── index.js

`cms/index.js`

Here is where I import the NetlifyCMS library. This file will eventually be parsed by Webpack in my setup and included in the admin.html file that is used to load the CMS.

// Import NetlifyCMS library
import CMS from "netlify-cms";
import "netlify-cms/dist/cms.css";

// Import custom editor component from cms/editor-components.js
import myCustomEditorComponent from "./editor-components";
// Import NetlifyCMS JS configuration object from cms/config/index.js
import config from "./config";

// Disable loading of the configuration from the default config.yml file
window.CMS_MANUAL_INIT = true;
// Initialize NetlifyCMS with the JS configuration objext
window.CMS_CONFIGURATION = config;
CMS.init({ config });
// Register the custom editor component
CMS.registerEditorComponent(myCustomEditorComponent);

`cms/editor-components.js`

This file is not necessary to explain the setup, I’ve written another blog post on creating custom NetlifyCMS editor components, check it out!

`cms/config/index.js`

This is where we build our NetlifyCMS JS configuration object.

// Import the configuration of each collection from cms/config/collections
import blogPostsCollection from "./collections/blog-posts";
import pagesCollection from "./collections/pages";
import pressReleasesCollection from "./collections/press-releases";
import servicesCollection from "./collections/services";
import siteConfigurationCollection from "./collections/site-configuration";
import testimonialsCollection from "./collections/testimonials";

// Build the Netlify JS configuration object
const config = {
  backend: {
    name: "gitlab",
    repo: "website",
    branch: "staging",
    auth_type: "implicit",
    app_id: "MY_APP_ID",
    api_root: "https://my-self-hosted-gitlab.com/api/v4",
    base_url: "https://my-self-hosted-gitlab.com",
    auth_endpoint: "oauth/authorize",
  },
  // It is not required to set `load_config_file` if the `config.yml` file is
  // missing, but will improve performance and avoid a load error.
  load_config_file: false,
  publish_mode: "editorial_workflow",
  media_folder: "site/static/images/uploads",
  public_folder: "/images/uploads",
  collections: [
    // Include the collections imported from cms/config/collections
    pagesCollection,
    servicesCollection,
    blogPostsCollection,
    commonPageSectionsCollection,
    testimonialsCollection,
    pressReleasesCollection,
    siteConfigurationCollection,
  ],
};

export default config;

`cms/config/collections/pagesCollection/index.js`

This file groups together all the configuration objects from each individual page.

import { collectionDefaults } from "../../patterns";
import homePageConfig from "./home";
import aboutPageConfig from "./about";

const pagesCollection = {
  ...collectionDefaults("Pages", "pages"),
  files: [homePageConfig, aboutPageConfig],
};

export default pagesCollection;

`cms/config/collections/pagesCollection/home.js`

The configuration of a page. It utilizes fields and groups of fields (patterns) to keep the configuration code of the page DRY.

import { stringField, textField, objectField, listField } from "../../fields";
import {
  pageDefaults,
  buttonDefaults,
  titleWithSubtitleDefaults,
} from "../../patterns";

export default {
  label: "Home page",
  name: "home",
  file: "site/content/_index.md",
  fields: [
    ...pageDefaults,
    objectField("Header", "header", [
      ...titleWithSubtitleDefaults(),
      buttonDefaults(),
    ]),
    objectField("Keyfacts section", "keyfacts_section", [
      ...titleWithSubtitleDefaults(),
      listField("Keyfacts", "keyfacts", [
        stringField("Title", "title", true),
        textField("Text", "text"),
        stringField("Icon", "icon", true),
      ]),
    ]),
  ],
};

`cms/config/fields.js`

The basic building blocks of the configuration file. Creating functions that return JS objects allows us to keep the code DRY by passing the necessary parameters when needed.

export const textField = (label = "Text", name = "text", required = false) => ({
  label,
  name,
  widget: "text",
  required,
})

export const stringField = (
  label = "String",
  name = "string",
  required = false
) => ({
  label,
  name,
  widget: "string",
  required,
})

export const objectField = (
  label = "Object",
  name = "object",
  fields = [],
  required = true
) => ({
  label,
  name,
  widget: "object",
  fields,
  required,
})`

`cms/config/patterns.js`

Sometimes, patterns in the configuration of pages and collections emerge. This file groups fields together and exports these patterns.

import { stringField, textField, objectField, hiddenField } from "./fields";

export const collectionDefaults = (label, name) => ({
  label,
  name,
  editor: {
    preview: false,
  },
});

export const pageDefaults = [
  stringField("Menu title", "title", true),
  hiddenField("Menu", "menu"),
  objectField("SEO", "seo", [
    stringField("SEO title", "title"),
    textField("SEO description", "description"),
  ]),
];

export const multiColorTitleDefaults = objectField("Title", "title", [
  stringField("Text part 1", "text_part_1"),
  stringField("Text part 2", "text_part_2"),
]);

export const buttonDefaults = (label = "Button", name = "button") =>
  objectField(label, name, [
    stringField("Text", "text", true),
    stringField("URL", "url", true),
  ]);

export const titleWithSubtitleDefaults = (subtitleIsMarkdown = false) => [
  multiColorTitleDefaults,
  subtitleIsMarkdown
    ? markdownField("Subtitle", "subtitle")
    : textField("Subtitle", "subtitle"),
];

Conclusion

The above setup helped me reduce the total lines of code from around 2000 to just 900. It has also been proven that making updates to the configuration of each page has become a piece of cake 🍰 (navigating to the dedicated file is very easy by typing for example “cms about” into the search bar of my editor to reach the configuration of the about page).

Other resources

Configuring NetlicyCMS manual initialization in Gatsby

Embedding YouTube videos in Gatsby blog posts using NetlifyCMS

nop33.eth — Thu, 03 Jun 2021 00:00:00 +0000

In one of the websites I have built, I needed to be able to embed YouTube videos in the markdown content of the blog posts. I am using Gatsby together with NetlifyCMS.

Two are the things that I had to figure out:

How do I represent the YouTube video in markdown so that the gatsby-transformer-remark plugin (which is responsible for converting markdown to HTML) can render it? Bonus: How do I make sure that the iframe of the embedded videos is responsive and looks good on mobile devices?
How do I extend NetlifyCMS’ markdown widget to support adding YouTube links in the content, without forcing the user to switch to the markdown view?

The Gatbsy part

Thankfully, Gatsby’s ecosystem is huge! From Gatsby’s Working with Video guide, I discovered the gatsby-remark-embed-video plugin. This allows me to represent a YouTube video in markdown as a simple code block:

`youtube: https://www.youtube.com/watch?v=dQw4w9WgXcQ`

Simply install the plugin and include it in the list of plugins in gatsby-config.js:

yarn add gatsby-remark-embed-video

To ensure that the video will be responsive, use the gatsby-remark-responsive-iframe plugin and place it after the gatsby-remark-embed-video one, as recommended by the plugin’s author:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-embed-video`,
          `gatsby-remark-images`,
          `gatsby-remark-responsive-iframe`,
        ],
      },
    },
  ],
}

You can now add a YouTube video in your markdown file and Gatsby will know how to render it. Your markdown file should look something like this:

---
title: "Here is a blog post with a YouTube video"
date: "2020-06-03"
---

## This is my fav song of all times

Don't cha think?

`youtube: https://www.youtube.com/watch?v=dQw4w9WgXcQ`

The NetlifyCMS part

Great, now all we need is to figure out how to extend NetlifyCMS’ markdown widget to be able to add code blocks like the above to our markdown content. Checking out the official documentation of the markdown widget I discovered the guide about Creating Custom Widgets and specifically the registerEditorComponent method. And hey, what luck, there is an actual example of registering an editor component for adding YouTube videos! Today is a good day.

The question now is, where do I add the code to call this method? I am simply using the gatsby-plugin-netlify-cms plugin in my gatsby-config.js like so:

module.exports = {
  plugins: [`gatsby-plugin-netlify-cms`],
}

Diving into the documentation of the plugin, I discovered the modulePath option which lets me specify a path to a file where I can import the CMS object. Sweet!

Update your configuration to:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms.js`,
      },
    },
  ],
}

and create the cms.js file in the /src directory (feel free to place it wherever you want as long as you link it properly in the gatsby-config.js file):

import CMS from "netlify-cms-app"

CMS.registerEditorComponent({
  id: "youtube",
  label: "YouTube",
  fields: [
    {
      name: "url",
      label: "Youtube video URL",
      widget: "string",
    },
  ],
  pattern: /^`youtube:\s(.*)`$/,
  fromBlock: function (match) {
    return {
      url: match[1],
    }
  },
  toBlock: function (obj) {
    return "`youtube: " + obj.url + "`"
  },
  toPreview: function (obj) {
    return obj.url
  },
})

To explain what's going on above:

The pattern attribute defines the regular expression that will look for the line in the markdown content that starts with the string "`youtube: " and catch anything that comes after it, which in our case is the link to the video.
The fromBlock attribute defines a function that is responsible to initialize the value of the rendered widget. In other words, it takes the link of the video from the pattern and adds it in the input field of the YouTube widget.
The toBlock function defines the representation of the YouTube video in the markdown content. To comply with the gatsby-remark-embed-video Gatsby plugin, this needs to be a line that starts with a backtick, followed by the word "youtube: ", followed by the video link, and ends with another backtick.

That’s it! You can now go to your CMS page, click the ”+” icon in the markdown editor, select “YouTube”, paste your YouTube link and save your blog post.

But what about Vimeo and VideoPress?

The gatsby-remark-embed-video plugin supports multiple video hosting services like Vimeo and VideoPress, not just YouTube (it also says it supports Twitch and Twitch live, but I couldn’t manage to make it work). Simply replace the instances of youtube with video in the cms.js file to support them!

From googling "React Native" to having a working app on my phone in 5 hours

nop33.eth — Thu, 20 May 2021 00:00:00 +0000

This morning I challenged myself to see how difficult it would be to have a running Android app installed on my phone, starting from scratch. I wanted a simple app that given a number it would calculate a random integer number between 1 and the number I provided. I wanna use it for performing a “random walk” using the train system of Switzerland to explore the country. I know, silly, but why not.

Setting up the dev environment

I started by googling “React Native”. Headed to the official website. I read through the home page, run the command to start a new project, and went on to read the basics and the getting started guide.

$ npx react-native init MyTestApp

The first thing I saw in the getting started guide is that I need to set up my dev environment. Since I am not familiar with mobile development, I decided to start with Expo CLI instead of the React Native CLI (which is what I used above to set up my first project). This SO thread describes well the differences between the 2 cli’s.

Simply following the Expo CLI Quickstart guide didn’t work. I installed the global expo-cli package, initialized a new project, started the development server, installed the Expo Go Android app on my phone, connected both my laptop and my phone on the same WiFi, but there was no QR code on my terminal to scan with the Expo Go app.

$ yarn global add expo-cli
...
success Installed "expo-cli@4.4.7" with binaries:
      - expo
      - expo-cli
✨ Done in 65.40s.

$ expo init AwesomeProject
✔ Choose a template: › minimal bare and minimal, just the essentials to get you started
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

$ cd AwesomeProject
$ yarn start
yarn run v1.22.10
$ react-native start

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######

                 Welcome to React Native!
                Learn once, write anywhere

To reload the app press "r"
To open developer menu press "d"

Next idea was to learn more about how this expo thing works. Going on Expo’s website, clicking Get Started, moving to the installation guide and finally to the Create a new app guide I found the command that displayed the QR code on my screen:

$ expo start

Scanning the QR code with the Expo Go app on my Android phone opened up the app on my phone. Editing the source code on my laptop changes quickly refreshes the app on my phone. Nice! The whole process took a bit less than 1.5h 🤦‍♂️ But whatever, we’re moving!

Coding the app

Without having much experience with React, I managed to code the simple concept of an app that I mentioned earlier by simply reading the Introduction, Core Components and Native Components, React Fundamentals and Handling Text Input React Native guides. Great, the app seems to be working on the dev environment, let’s compile it and install it on my phone, I said.

Compiling the app

Initially, I was planning on releasing the app on the Google Play Store and thus started by following the Publishing to Google Play Store guide of the React Native documentation. I installed the latest Java JDK, generated a private signing key, set up the Grandle variables, added the signing configuration to my app’s Grandle config file only to realize that the Google Play store required a $25 fee for registering. I decided to postpone it for the day that I’ll actually have a useful app I’d like to share with the world 😅

I moved on with generating the Android App Bundle with:

$ cd android
$ ./gradlew bundleRelease

but I received the error

General error during semantic analysis: Unsupported class file major version 60

The reason is that the Grandle 6.8 version that my app is using does not support the latest Java JDK (16). Someone commented literally 11 hours ago that Gradle 7.0 fully supports Java 16, so I upgraded Grandle by simply changing the version in the file android/gradle/wrapper/gradle-wrapper.properties, but now I got a new error after running the above command:

Plugin with id ‘maven’ not found

Decided to downgrade to Java 11:

$ brew install java11
$ echo 'export PATH="/usr/local/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc
$ export CPPFLAGS="-I/usr/local/opt/openjdk@11/include"
$ source ~/.zshrc

but then I got yet another error:

Could not determine the dependencies of task ':app:bundleReleaseResources'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '.../android/local.properties'.

After some googling on how to install the Android SDK (since the one I found in Homebrew is deprecated), I decided to install the Android Studio.

$ brew install --cask android-studio

I opened the application to download and install all necessary packages for Android development, including the Android SDK.

But we’re not done with errors apparently:

> Failed to install the following Android SDK packages as some licences have not been accepted.

To fix this, I installed the Android SDK command line tool:

Opened Android Studio
Went to SDK manager
Clicked on SDK tools tab
Installed Android SDK command line tool

For one last time, I run the build command and it finally worked:

$ ./gradlew bundleRelease
...
BUILD SUCCESSFUL in 3m 14s
494 actionable tasks: 494 executed

Installing the app on my Android phone

The last step of my challenge was to install the app on my phone. I figured the easiest way would be to move the output APK to my phone via USB. And so I did by installing and using the Android File Transfer app.

Conclusion

A few years back I was extremely hesitant and scared of even attempting to create a native app of my own. My impostor syndrome was hitting me hard every time I was facing a problem. An inner voice was judging me that I am not good enough and that I should not even try. If you are stuck in a similar situation, I hope that this blog post will unblock you from a potential roadblock you’re facing. Keep believing in your skill to learn. Not in your dev skills. It might have taken me 5 hours to simply set up a dev environment, code a simple app and figure out how to compile it and install it, but I did it. And so can you.

Using Ansible unarchive module with Alpine Linux

nop33.eth — Mon, 05 Apr 2021 15:18:00 +0000

If you are running Ansible on Alpine Linux and you use the unarchive builtin module you might have faced the following error message:

[Errno 2] No such file or directory: b'-T'

The reason for this is that the unzip tool in Alpine does not have a -T option. To be able to use the unarchive Ansible module with Alpine Linux, you need to install unzip:

apk add unzip

See the related GitHub issue.

Photo by Simon Fitall on Unsplash

Recording screen, mic input and audio output with one app

nop33.eth — Fri, 26 Mar 2021 00:00:00 +0000

I’ve been for years a very happy user of Kap, a free open-source app to record the screen of my MacBook.

Recently I wanted to perform some interviews during a requirements gathering process for a new project at work. I needed a way to record my screen, my voice but also the voice of the interviewee. Essentially I needed to capture:

Screen
Audio input
Audio output

So, as usual, I started with a simple Google search to see what is out there. I found many solutions that required downloading some apps (like Soundflower, LoopBack or ScreenFlow) and use some of them in combination with Quicktime Player, a native macOS app.

5 minutes had passed and I already felt overwhelmed. I thought this was gonna be easier. And then it hit me: “Why haven’t you checked if Kap can do that?”. Dah!

All I literally had to do was to go to the preferences of the app and turn 2 toggles on.

Enable Audio recording from the General tab
Enable the soundflower plugin from the Plugins tab

Finito.

Dear frontender, how do you collaborate with your designer?

nop33.eth — Fri, 19 Mar 2021 11:49:54 +0000

Dear frontend engineers,

How do you collaborate with your designers?

Every frontender's wet dream is a clearly defined design system^{1, 2} delivered in an inspectable format so that they can inspect every element of it, measure distances, paddings and margins, see colors and variants and basically every property that needs to eventually be translated in CSS.

In my career, I have worked with designers that delivered their designs:

in Sketch files, so I had to tell my boss to buy me a Sketch licence so I can inspect them
with InVision which did not require any additional software, simply the web browser
with Zeplin, which only required installing the free software, no need for a licence
sadly, I have also worked with designers that delivered their designs in PDF format...

So far I had the best experience with Zeplin and InVision cause I could inspect the typography and design system separately from the main designs (although this highly depends on the quality of the designer's work).

How do you prefer working with the designers you collaborate with? Which is your preferred tool and why? Do you have a specific process that you can share? How do you bridge the gap between designs and CSS/code?

Thank you!

Photo by Tim Mossholder on Unsplash