DEV Community: Alex Adam

How to crop, split, remove pages from PDFs with Java and PDFBox

Alex Adam — Tue, 30 May 2023 14:53:32 +0000

Create a new Java project with Maven

Let's start by creating a new Java project, named pdf_utils, with Maven:

mvn archetype:generate \
    -DgroupId=com.pdf.pdf_utils \
    -DartifactId=pdf_utils \
    -DarchetypeArtifactId=maven-archetype-quickstart \
    -DarchetypeVersion=1.4 \
    -DinteractiveMode=false

Then, open the pdf_utils/pom.xml file and add a dependency to PDFBox, in the dependencies section:

<dependencies>
   ...
    <dependency>
      <groupId>org.apache.pdfbox</groupId>
      <artifactId>pdfbox</artifactId>
      <version>2.0.27</version>
    </dependency>
    ...
</dependencies>

Also change the target & source compiler versions:

 <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>17</source>
          <target>17</target>
        </configuration>
      </plugin>
</plugins>

Then rename the generated src/main/java/com/pdf/pdf_utils/App.java class to PDFUtils

How to crop a PDF

We will now develop a Java function that crops each page within a PDF document and saves the cropped content in a new PDF file. The cropping coordinates, specified in millimeters, will serve as inputs to the function.

Add helper functions to convert between mm <-> units
Convert mm to units
Extract the doc's file name
Crop each page
Save the result & append "-cropped" to the ouyput file's name

public String cropPDFMM(float x, float y, float width, float height, String srcFilePath) throws IOException {
    // helper functions to convert between mm <-> units
    Function<Float, Float> mmToUnits = (Float a) -> a / 0.352778f;
    Function<Float, Float> unitsToMm = (Float a) -> a * 0.352778f;

    // convert mm to units
    float xUnits = mmToUnits.apply(x);
    float yUnits = mmToUnits.apply(y);
    float widthUnits = mmToUnits.apply(width);
    float heightUnits = mmToUnits.apply(height);

    // extract the doc's file name
    File srcFile = new File(srcFilePath);
    String fileName = srcFile.getName();
    int dotIndex = fileName.lastIndexOf('.');
    String fileNameWithoutExtension =  (dotIndex == -1) ? fileName : fileName.substring(0, dotIndex);

    // crop each page
    PDDocument doc = PDDocument.load(srcFile);
    int nrOfPages = doc.getNumberOfPages();
    PDRectangle newBox = new PDRectangle(
            xUnits,
            yUnits,
            widthUnits,
            heightUnits);
    for (int i = 0; i < nrOfPages; i++) {
        doc.getPage(i).setCropBox(newBox);
    }

    // save the result & append -cropped to the file name
    File outFile = new File(fileNameWithoutExtension + "-cropped.pdf");
    doc.save(outFile);
    doc.close();
    return outFile.getCanonicalPath();
}

Let's test cropPDFMM by calling it from the main function:

public static void main( String[] args )
    {
    String srcFilePath = "/Users/user/.../file.pdf";
    PDFUtils app = new PDFUtils();

    try {
        ///// crop pdf
        float x = 18f;
        float y = 20f;
        float width = 140f;
        float height = 210f;
        String resultFilePath = app.cropPDFMM(x, y, width, height, srcFilePath);

        System.out.println( "Done!" );
    } catch (Exception e) {
        System.out.println(e);
    }
}

You should see a file named file-cropped.pdf in the current directory.

How to remove pages from a PDF

To remove specific pages from a document, we can utilize an array of integer ranges. Each range consists of a start page and an end page ([startPage1, endPage1, startPage2, endPage2, ...]). The function iterates through each page of the document and checks if the page number falls outside of any of the specified ranges in the array. If a page is not within any range, it is appended to a new document.

Add a helper function to test if a page is within a range
Test each page number -> append it to a temp. doc
Save the temp. doc. -> overwrite the input file

public void removePages(String srcFilePath, Integer[] pageRanges) throws IOException {
     // a helper function to test if a page is within a range
     BiPredicate<Integer, Integer[]> pageInInterval = (Integer page, Integer[] allPages) -> {
         for (int j = 0; j < allPages.length; j+=2) {
             int startPage = allPages[j];
             int endPage = allPages[j+1];
             if (page >= startPage-1 && page < endPage) {
                 return true;
             }
         }
         return false;
     };

     File srcFile = new File(srcFilePath);
     PDDocument pdfDocument = PDDocument.load(srcFile);
     PDDocument tmpDoc = new PDDocument();

     // test if a page is within a range
     // if not, append the page to a temp. doc.
     for (int i = 0; i < pdfDocument.getNumberOfPages(); i++) {
         if (pageInInterval.test(i, pageRanges)) {
             continue;
         }
         tmpDoc.addPage(pdfDocument.getPage(i));
     }

     // save the temporary doc.
     tmpDoc.save(new File(srcFilePath));
     tmpDoc.close();
     pdfDocument.close();
 }

Let's test it by calling removePages in the main function:

 ///// remove pages
app.removePages(resultFilePath, new Integer[] {1, 21, 376, 428});

It will overwrite the input (cropped) file.

How to split a PDF

We will now introduce a function that enables the splitting of a PDF into multiple separate PDFs, with each resulting file containing a specified number of pages. The function expects two inputs: the path to the source PDF document and the desired number of pages in each split file.

Extract source file's name
for each nrOfPages
append them to a temporary document
save the temp doc with the source file's name + index

public void splitPDF(String srcFilePath, int nrOfPages) throws IOException {
    // extract file's name
    File srcFile = new File(srcFilePath);
    String fileName = srcFile.getName();
    int dotIndex = fileName.lastIndexOf('.');
    String fileNameWithoutExtension =  (dotIndex == -1) ? fileName : fileName.substring(0, dotIndex);

    PDDocument pdfDocument = PDDocument.load(srcFile);

    // extract every nrOfPages to a temporary document
    // append an index to its name and save it
    for (int i = 1; i < pdfDocument.getNumberOfPages(); i+=nrOfPages) {
        Splitter splitter = new Splitter();

        int fromPage = i;
        int toPage = i+nrOfPages;
        splitter.setStartPage(fromPage);
        splitter.setEndPage(toPage);
        splitter.setSplitAtPage(toPage - fromPage );

        List<PDDocument> lst = splitter.split(pdfDocument);

        PDDocument pdfDocPartial = lst.get(0);
        File f = new File(fileNameWithoutExtension + "-" + i + ".pdf");
        pdfDocPartial.save(f);
        pdfDocPartial.close();
    }
    pdfDocument.close();
}

Here is the full main() function:

public static void main( String[] args ){
    String srcFilePath = "/Users/user/pdfs/file.pdf";
    PDFUtils app = new PDFUtils();

    try {
         ///// crop pdf
        float x = 18f;
        float y = 20f;
        float width = 140f;
        float height = 210f;
        String resultFilePath = app.cropPDFMM(x, y, width, height, srcFilePath);

        ///// remove pages
        app.removePages(resultFilePath, new Integer[] {1, 21, 376, 428});

        ///// split pages
        app.splitPDF(resultFilePath, 20);

        System.out.println( "Done!" );
    } catch (Exception e) {
        System.out.println(e);
    }
}

Merge 2 pages per sheet (2up)

This function is inspired from https://stackoverflow.com/questions/12093408/pdfbox-merge-2-portrait-pages-onto-a-single-side-by-side-landscape-page.

Create a temporary document
Iterate over the pages of the original doc. -> get the left & right pages
Create a new "output" page with the right dimensions
Append the left page at (0,0)
Append the right page, translated to (left page's width, 0)
Save the temp. doc -> overwrite the source file

public void mergePages(String srcFilePath) throws IOException {

    // SOURCE: https://stackoverflow.com/questions/12093408/pdfbox-merge-2-portrait-pages-onto-a-single-side-by-side-landscape-page
    File srcFile = new File(srcFilePath);
    PDDocument pdfDocument = PDDocument.load(srcFile);
    PDDocument outPdf = new PDDocument();

    for (int i = 0; i < pdfDocument.getNumberOfPages(); i+=2) {
        PDPage page1 = pdfDocument.getPage(i);
        PDPage page2 = pdfDocument.getPage(i+1);
        PDRectangle pdf1Frame = page1.getCropBox();
        PDRectangle pdf2Frame = page2.getCropBox();
        PDRectangle outPdfFrame = new PDRectangle(pdf1Frame.getWidth()+pdf2Frame.getWidth(), Math.max(pdf1Frame.getHeight(), pdf2Frame.getHeight()));

        // Create output page with calculated frame and add it to the document
        COSDictionary dict = new COSDictionary();
        dict.setItem(COSName.TYPE, COSName.PAGE);
        dict.setItem(COSName.MEDIA_BOX, outPdfFrame);
        dict.setItem(COSName.CROP_BOX, outPdfFrame);
        dict.setItem(COSName.ART_BOX, outPdfFrame);
        PDPage newP = new PDPage(dict);
        outPdf.addPage(newP);

        // Source PDF pages has to be imported as form XObjects to be able to insert them at a specific point in the output page
        LayerUtility layerUtility = new LayerUtility(outPdf);
        PDFormXObject formPdf1 = layerUtility.importPageAsForm(pdfDocument, page1);
        PDFormXObject formPdf2 = layerUtility.importPageAsForm(pdfDocument, page2);

        AffineTransform afLeft = new AffineTransform();
        layerUtility.appendFormAsLayer(newP, formPdf1, afLeft, "left" + i);
        AffineTransform afRight = AffineTransform.getTranslateInstance(pdf1Frame.getWidth(), 0.0);
        layerUtility.appendFormAsLayer(newP, formPdf2, afRight, "right" + i);
    }

    outPdf.save(srcFile);
    outPdf.close();
    pdfDocument.close();
}

Update main() to test it:

...
 ///// 2 pages per sheet
app.mergePages(resultFilePath);
...

Here is the full list of imports:

package com.pdf.pdf_utils;

import org.apache.pdfbox.cos.COSDictionary;
import org.apache.pdfbox.cos.COSName;
import org.apache.pdfbox.multipdf.LayerUtility;
import org.apache.pdfbox.multipdf.Splitter;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.pdmodel.PDPage;
import org.apache.pdfbox.pdmodel.common.PDRectangle;
import org.apache.pdfbox.pdmodel.graphics.form.PDFormXObject;

import java.awt.geom.AffineTransform;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.function.BiPredicate;
import java.util.function.Function;

The source code is available here.

Create a React project from scratch, with TypeScript and Vite

Alex Adam — Fri, 12 May 2023 15:19:45 +0000

A step by step guide on how to create a React project from scratch, with TypeScript and Vite.

You can find the full source code here: https://github.com/alexadam/project-templates/tree/master/projects/react-app-vite

Setup

Prerequisites:

node (https://nodejs.org/en/download/)
yarn (https://yarnpkg.com/getting-started/install)

Create the project's folder:

mkdir react-app
cd react-app

Generate a default package.json file with yarn:

yarn init -y

Install React, TypeScript and Vite:

yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        sass \
        typescript \
        @vitejs/plugin-react \
        vite

Add build, dev & clean scripts in the package.json file:

 ....
  },
  "scripts": {
    "clean": "rm -rf dist/*",
    "build": "vite --config vite.config.js build",
    "dev": "vite --config vite.config.js serve",
    "preview": "vite --config vite.config.js preview"
  }

Configure TypeScript by creating the file tsconfig.json with:

{
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist/",
    "rootDir": ".",
    "removeComments": true,
    "strict": true,
    "moduleResolution": "node",            
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "./node_modules",
    "./build",
    "./dist"
  ]
}

To configure Vite, make a file vite.config.js containing:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(
    {
      include: '**/*.{ts,js,tsx}',
    }
  )],
  base: '',
  root: 'src',
  build: {
    outDir: '../dist',
  },
  server: {
    port: 8080
  },
  preview: {
    port: 8080
  }
})

Example App

Create a folder named src (in the project's folder):

mkdir src
cd src

Make a simple React component, in the file numbers.tsx:

import React, {useState} from 'react';

interface INumberProps {
  initValue: number
}

const Numbers = (props: INumberProps) => {
  const [value, setValue] = useState(props.initValue)

  const onIncrement = () => {
    setValue(value + 1)
  }

  const onDecrement = () => {
    setValue(value - 1)
  }

  return (
    <div>
      Number is {value}
        <div>
          <button onClick={onIncrement}>+</button>
          <button onClick={onDecrement}>-</button>
        </div>
    </div>
  )
}
export default Numbers

Create the main React component (the entry point), in the file app.tsx:

import * as React from 'react';
import ReactDOM from "react-dom/client";
import Numbers from './numbers';
import './app.scss'

const App = () => {

  return (
    <Numbers initValue={42} />
  )
}

const root = ReactDOM.createRoot(document.getElementById("app") as HTMLElement);
root.render(<App />);

Next, add the index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React TypeScript</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="./app.tsx"></script>
</body>

</html>

Add some style in app.scss

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Then, run yarn dev and open http://localhost:8080/ in a browser.

Use this project as a template

You can save the Setup steps as a shell script:

#!/bin/sh

rm -rf node_modules
rm -rf dist
rm -rf build
rm package.json
rm yarn.lock

yarn init --yes

yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        sass \
        typescript \
        @vitejs/plugin-react \
        vite

# Remove the last line
sed -i.bak '$ d' package.json && rm package.json.bak

# append the scripts commads
cat <<EOT >> package.json
   ,"scripts": {
      "clean": "rm -rf dist/*",
      "build": "vite --config vite.config.js build",
      "dev": "vite --config vite.config.js serve",
      "preview": "vite --config vite.config.js preview"
   }
}

Delete the node-modules folder and, when you want to start a new project, you can copy the contents of react-app to the new location:

mkdir new-project
cd new-project

# copy the react-app folder content to the new project
rsync -rtv /path/to/../react-app/ .

./init.sh

Create custom VSCode shortcuts and code snippets

Alex Adam — Sat, 16 Jul 2022 10:55:11 +0000

Keyboard Shortcuts

on Linux, go to:

File -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

On Mac:

Code -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

Then add custom key bindings like this:

Ctrl+D to duplicate line / selection:

{
  "key": "ctrl+d",
  "command": "editor.action.duplicateSelection"
}

Ctrl+Shift+L to insert a console.log with the selected text:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

Or Ctrl+Shift+L to insert a console.log with the clipboard's content:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${CLIPBOARD}', ${CLIPBOARD})"
  }
}

More useful variables: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

Code Snippets

To add some React Component code snippets, on Linux, go to:

File -> Preferences -> Configure User Snippets -> search for TypescriptReact

On Mac:

Code -> Preferences -> Configure User Snippets -> search for TypescriptReact

Then paste this in the json file:

 "New React Component": {
  "prefix": ["react-component", "rc"],
  "body": ["const ${1} = () => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component"
 },
 "New React Component With Props": {
  "prefix": ["react-component-props", "rcp"],
  "body": ["interface I${1}Props {\n\t\n}\n\nconst ${1} = (props: I${1/(.*)/${1:/capitalize}/}Props) => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component With Props"
 }

To use the snippets, open a tsx file and type react or rcp -> you'll see the snippets' names in the auto-complete pop-up.

Code output example (you can edit the component's name)

const Comp1 = () => {
  return (
    <div>

    </div>
  )
}

export default Comp1

// and

interface IComp2Props {

}

const Comp2 = (props: IComp2Props) => {
  return (
    <div>

    </div>
  )
}

export default Comp2

More: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Getting started with Rust

Alex Adam — Fri, 15 Jul 2022 15:44:47 +0000

Setup

On MacOS or Linux, run this command in the terminal (then follow the instructions):
More: https://www.rust-lang.org/learn/get-started

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Get the current Rust & Cargo versions:

rustc --version
cargo --version

Update Rust:

rustup update

Cargo utils:

# create new project
cargo init

# compile & execute
cargo run

# build project
cargo build

# test project
cargo test

# build documentation
cargo doc

# add crate
cargo add <name>

Source: https://www.rust-lang.org/learn/get-started

You can also install the Rust VSCode extension from here

First Project

With Cargo

Create a new folder then setup a rust project with cargo init. This command will create Cargo.toml & src/main.rs with a Hello World example. Run the project with cargo run.

mkdir new-project

cd new-project

cargo init

cargo run

Without Cargo

Create a file named main.rs with:

fn main() {
  let hello = "Hello World";
  println!("{}", hello)
}

Compile it with rustc main.rs then run it with ./target/debug/main (.\target\debug\hello.exe on Windows)

How To Setup React Native and Create a Simple ToDo App

Alex Adam — Sat, 23 Apr 2022 09:56:44 +0000

Set up the development environment by installing Expo CLI (https://reactnative.dev/docs/environment-setup)

yarn global add expo-cli

Create a new project (app):

expo init todo-app
# select "blank (TypeScript)"

Start the development server:

cd todo-app
yarn start

# press w to open the web app

Create a To-Do app

Prerequisites

Install a checkbox component:

yarn add react-native-bouncy-checkbox

Then create the following folders & files structure:

./todo-app/
   ...
   models/
      todo.model.ts
   components/
      todo.tsx
      todo-list.tsx
      menu.tsx
   views/
      edit-todo.view.tsx
   ...

The Data Model

Define the data model in the file models/todo.model.ts:

interface ITodo {
  id: string
  done: boolean
  text: string
  color: string
}

export default ITodo

Basic components

Create the Todo component in components/todo.tsx:


import React, { useState } from "react";
import { StyleSheet, Text, View } from 'react-native';
import BouncyCheckbox from "react-native-bouncy-checkbox";
import ITodo from "../models/todo.model";

interface ITodoProps {
  data: ITodo
}

const Todo = (props: ITodoProps) => {
  const [isDone, setDone] = useState(false);

  return (
    <View style={[styles.container, {backgroundColor: props.data.color}]}>
       <BouncyCheckbox
          fillColor="black"
          unfillColor="#FFFFFF"
          iconStyle={{ borderColor: "black" }}
          isChecked={isDone}
          onPress={setDone}
          style={styles.checkbox}
        />

      <Text style={styles.text}>{props.data.text}</Text>
    </View>
  );
}

export default Todo

const styles = StyleSheet.create({
  container: {
    width: '100%', minHeight: '30px', height: 'auto',
    color: 'black',
    alignItems: 'center',
    justifyContent: 'flex-start',
    display: 'flex',
    flexDirection: 'row',
    marginBottom: 5,
    padding: 10,
    borderRadius: 5,
  },
  checkbox: {
    width: 40, 
    minWidth: 40, height: 40,
  },
  text: {
    color: 'black',
    width: '100%',
  }
});

Then, the Todo List component in components/todo-list.tsx:


import React, { useState } from "react";
import { StyleSheet, FlatList } from 'react-native';
import ITodo from "../models/todo.model";
import Todo from "./todo";

interface ITodoListProps {
  data: ITodo[]
}

const TodoList = (props: ITodoListProps) => {
  const [isDone, setDone] = useState(false);

  return (
    <FlatList 
        style={styles.container}
        data={props.data}
        renderItem={
          (item: any) => {
            return (
              <Todo data={item.item} />
            )
          }
        }
        keyExtractor={(item, index) => item.id}
      />
  );
}

export default TodoList

const styles = StyleSheet.create({
  container: {
    // height: '100%', maxHeight: '100%',
    height: 500,
    width: '100%',
    flexDirection: 'column',
    padding: 10,
    overflow: 'scroll',
  },
});

And the Main Menu in components/menu.tsx:


import React, { useState } from "react";
import { Button, StyleSheet, Text, View } from 'react-native';

interface IMenu {
  onAddTodo: () => void
}

const Menu = (props: IMenu) => {  
  return (
    <View style={styles.container}>
      <Button 
        title="+ Add ToDo" 
        onPress={() => props.onAddTodo()}/>
    </View>
  );
}

export default Menu

const styles = StyleSheet.create({
  container: {
    width: '100%', minHeight: '30px', height: 'auto',
    color: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    display: 'flex',
    flexDirection: 'row',
    padding: 20,
  },
});

Views

Create the Add/Edit View in view/edit-todo.view.tsx:


import React, { useState } from "react"
import { Modal, StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import ITodo from "../models/todo.model";

interface IEditTodoProps {
  isVisible: boolean
  onClose: () => void
  onSave: (data: any) => void
  data?: ITodo
}

const EditTodoView = (props: IEditTodoProps) => {

  const colors = ['#87D3F5', '#BDE991', '#BAAAFB']
  const [colorIndex, setColorIndex] = useState(0)

  const title = props.data ? 'Edit Todo' : 'Add Todo'
  const [text, setText] = useState(props.data?.text || '')


  const onSave = () => {
    if (text.trim().length === 0) {
      props.onClose()
      return
    }
    if (props.data) {
      const newData = {
        ...props.data,
        text
      }
      props.onSave(newData)
    } else {
      const newData = {
        id: 'id-' + Math.floor(Math.random() * 10000000),
        text,
        done: false,
        color: colors[colorIndex],
      }
      props.onSave(newData)
    }
  }

  return (
    <Modal visible={props.isVisible} style={styles.modal} 
        animationType="slide" 
        transparent={true}
        >
      <KeyboardAvoidingView style={styles.container} >
      <Text style={styles.title}>{title}</Text>

        <View style={styles.content}>
          <Text style={styles.label}>ToDo Text:</Text>
          <TextInput
            style={styles.input}
            onChangeText={setText}
            value={props.data?.text}
            multiline={true}
            numberOfLines={10}
            // keyboardType="numeric"
          />

          <Text style={styles.label}>ToDo Color:</Text>
          <View style={styles.colors} >
            <View style={[styles.color, {
              backgroundColor: colors[0],
              borderColor: 'black',
              borderWidth: colorIndex === 0 ? 4 : 0
            }]} 
              >
                 <TouchableOpacity 
                  style={{height: '100%', width:'100%'}}
                  onPress={() => setColorIndex(0)}>
                </TouchableOpacity>
              </View>
            <View style={[styles.color, {
              backgroundColor: colors[1],
              borderColor: 'black',
              borderWidth: colorIndex === 1 ? 4 : 0}]} 
              >
                <TouchableOpacity 
                  style={{height: '100%', width:'100%'}}
                  onPress={() => setColorIndex(1)}>
                </TouchableOpacity>
              </View>
            <View style={[styles.color, {
              backgroundColor: colors[2],
              borderColor: 'black',
              borderWidth: colorIndex === 2 ? 4 : 0}]} 
            >
                 <TouchableOpacity 
                  style={{height: '100%', width:'100%'}}
                  onPress={() => setColorIndex(2)}>
                </TouchableOpacity>
              </View>
          </View>
        </View>

        <View style={styles.menu} >
          <TouchableOpacity
                  style={styles.button}
                  onPress={() => props.onClose()}
                >
                  <Text style={styles.buttonText}>Cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity
                  style={styles.button}
                  onPress={onSave}
                >
                  <Text style={styles.buttonText}>Save</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  )
}

export default EditTodoView


const styles = StyleSheet.create({
  modal: {
    backgroundColor: 'rgba(0,0,0,0)',
  },
  container: {
    width: '100%', 
    height: '100%',
    paddingTop: 100,
    // backgroundColor: '#fff',
    backgroundColor: 'rgba(0,0,0,0.7)',
    flexDirection: 'column',
  },
  content: {
    backgroundColor: '#fff',
    flexDirection: 'column',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 20,
    paddingBottom: 0,
    backgroundColor: '#fff',
  },
  menu: {
    display: 'flex',
    width: '100%', height: 60,
    paddingLeft: 30,
    paddingTop: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#fff'
  },
  input: {
    height: 'auto',
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  label: {
    padding: 10,
    paddingBottom: 0,
  },
  colors: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    padding: 20,
  },
  color: {
    width: 30, height: 30,
    marginRight: 20,
    borderRadius: 3,
  },
  button: {
    height: 20,
    width: 100,
  },
  buttonText: {
    fontSize: 18,
    color: '#007fff'
  }
});

Main View

Update the file App.tsx with:

import React, { useState } from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import Menu from './components/menu';
import TodoList from './components/todo-list';
import ITodo from './models/todo.model';
import EditTodoView from './views/edit-todo.view';

export default function App() {

  const [data, setData] = useState<ITodo[]>([])
  const [isEditTodoVisible, setIsEditTodoVisible] = useState(false)

  const onAddTodo = () => {   
    setIsEditTodoVisible(true)
  }

  const onCloseEditTodo = () => {
    setIsEditTodoVisible(false)
  }

  const onSaveTodo = (data: ITodo) => {
    setData((d) => [...d, data])
    setIsEditTodoVisible(false)
  }

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>ToDo</Text>
      <TodoList data={data} />
      <Menu onAddTodo={onAddTodo}/>

      <EditTodoView isVisible={isEditTodoVisible} 
        onClose={onCloseEditTodo}
        onSave={onSaveTodo}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#fff',
    height: '100%',
    width: '100%',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 20,
    paddingBottom: 0,
  },
});

You can find the source code here

How to communicate between an iframe and the parent page

Alex Adam — Sat, 16 Apr 2022 11:27:14 +0000

From parent page -> iframe

In the parent page:

const iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('some message', '*');

In the iframe:

window.onmessage = function(e) {
  if (e.data === 'some message') {
    alert('It works!');
  }
};

From iframe -> parent page

In the parent page:

window.onmessage = function(e) {
  if (e.data === 'from iframe') {
    alert('It works!');
  }
};

In the iframe:

window.top.postMessage('from iframe', '*')

Source

Write Interactive Documentation with Templates and Parameters

Alex Adam — Fri, 28 Jan 2022 15:58:33 +0000

Let's say you want to do a local port forwarding via SSH, but you don't remember the command. You do a quick search on google and find something like this:

ssh -L 8080:localhost:80 user@10.20.30.40

But, in your case, the SSH server doesn't run on the standard port, so you have to specify the custom port. You do another quick search and assemble the full command (in your head or in a text editor that acts as a buffer):

ssh -L 8080:localhost:80 user@10.20.30.40 -p 1234

Now you have a generic example, and you have to replace the key parts in the command to make it work. So you have to replace the local port, remote port, remote user, remote ip and the SSH port.

A few copy-pastes later and you realize you forgot how it works: local_port:ip:remote_port OR remote_port:ip:local_port ? Google saves you again:

ssh -L LOCAL_PORT:DESTINATION:DESTINATION_PORT [USER@]SSH_SERVER

You just spent 10 minutes gathering or refreshing some valuable info. You also spent valuable time on editing or copy-paste parts of the command in order to customize it.

ReactiveDoc can help you write documentation with templates and parameters. Why is this useful? Because it saves you a couple of minutes next time you'll want to reuse this command.

Let's start with the basic command as a template:

Add some basic explanation from https://linux.die.net/man/1/ssh and a link to this excellent resource

Then add a Number Input, and change the label value to "Local Port", variableName to "local_port" and set 8080 as defaultValue, like this:

In the command template, replace 8080 with {{local_port}}

Now, add a Text Input for the destination IP, then replace 'localhost' in the template with the {{destination_ip}} variable:

You can extract each command's part as a parameter:

Export this document as an HTML page and, next time you want to do a SSH port forward, just open it with any browser, set the parameters, click on the 'copy' button and paste it in a terminal. 2 minutes saved!

You can also share this HTML file with your team (they don't have to install anything to run it - it works in any browser) or host it on a local server as a static page.

Try ReactiveDoc Now!

How to test a React App, with Jest and react-testing-library

Alex Adam — Sat, 15 Jan 2022 09:36:00 +0000

How to test a React App, with Jest and react-testing-library

Prerequisites: An existing React app.

You can find the full source code @ github: https://github.com/alexadam/project-templates/tree/master/projects/react-app-tests

Setup

Install Jest and react-testing-library

yarn add --dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

In the project's root folder, create a file named jest.config.js and add:

module.exports = {
  roots: ["./src"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: [
    "@testing-library/jest-dom/extend-expect"
  ],
  testRegex: "^.+\\.(test|spec)\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};

Update package.json by adding a new script entry:

"scripts": {
    ...
    "test": "jest",
    ...

Create a Test

We'll test the basic React app created from scratch here: https://alexadam.dev/blog/create-react-project.html

To test the Numbers component, create a file named numbers.test.tsx, in the src folder:

import React, { Props } from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import Numbers from "./numbers";

describe("Test <Numbers />", () => {

  test("Should display 42", async () => {
    render(<Numbers initValue={42} />);
    const text = screen.getByText("Number is 42");
    expect(text).toBeInTheDocument();
  });

  test("Should increment number", async () => {
    const { container }  = render(<Numbers initValue={42} />)

    const incButton =  screen.getByText('+')

    fireEvent(
      incButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    )

    const text = screen.getByText("Number is 43");
    expect(text).toBeInTheDocument();
  });

  test("Should decrement number", async () => {
    const { container }  = render(<Numbers initValue={42} />)

    const decButton =  screen.getByText('-')

    fireEvent.click(decButton)

    const text = screen.getByText("Number is 41");
    expect(text).toBeInTheDocument();
  });

});

Run the tests:

yarn test

See the results:

$> yarn test
yarn run v1.22.17
$ jest
 PASS  src/numbers.test.tsx
  Test <Numbers />
    ✓ Should display 42 (29 ms)
    ✓ Should increment number (14 ms)
    ✓ Should decrement number (8 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.893 s
Ran all test suites.
✨  Done in 3.88s.

How to install and run Swift on Linux

Alex Adam — Fri, 17 Dec 2021 17:14:51 +0000

How to install and run Swift on Linux

A step by step guide on how to install Swift on Ubuntu 20.04.

Setup

Download Swift from https://swift.org/download/ -> select the Toolchain archive for Ubuntu 20.04

Extract the archive, then open ~/.bashrc and append this line:

PATH="/.../<absolute-path-to-the-extracted-swift-folder>/usr/bin:$PATH"

Reload .bashrc with source ~/.bashrc

Install the required dependencies. See https://swift.org/download/#using-downloads -> Linux -> Installation -> Install required dependencies (for Ubuntu 20.04)

sudo apt-get install \
          binutils \
          git \
          gnupg2 \
          libc6-dev \
          libcurl4 \
          libedit2 \
          libgcc-9-dev \
          libpython2.7 \
          libsqlite3-0 \
          libstdc++-9-dev \
          libxml2 \
          libz3-dev \
          pkg-config \
          tzdata \
          uuid-dev \
          zlib1g-dev

Test it, in a terminal:

swift --version

# you should see something similar to
Swift version 5.5.2 (swift-5.5.2-RELEASE)
Target: x86_64-unknown-linux-gnu

Create an example app

Make a folder:

mkdir swift-app
cd swift-app

Then generate an empty project with:

swift package init --type executable

build it:

swift build

and run the executable:

.build/debug/swift-app

# or
swift run

# it should print Hello, world!

Encrypt and Decrypt in NodeJS

Alex Adam — Sat, 21 Aug 2021 10:23:13 +0000

How to encrypt text

Create a file named encdec.js and paste:

const crypto = require("crypto")

const encrypt = (plainText, password) => {
  try {
    const iv = crypto.randomBytes(16);
    const key = crypto.createHash('sha256').update(password).digest('base64').substr(0, 32);
    const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);

    let encrypted = cipher.update(plainText);
    encrypted = Buffer.concat([encrypted, cipher.final()])
    return iv.toString('hex') + ':' + encrypted.toString('hex');

  } catch (error) {
    console.log(error);
  }
}

Let's test it:

Append these lines:


const encrypt = (plainText, password) => {
  ...
}

const text = "Hello World"
const pass = "secret1234"

const encText = encrypt(text, pass)
console.log('encrypted text', encText);

Then run:

node encdec.js

# Output:
encrypted text af9efafd353a5a7e27f31262dac12d6b:eb1dd75ea6c84e25300d5a244138ab3c

How to decrypt the encrypted text

Add the decryption function:

const decrypt = (encryptedText, password) => {
  try {
    const textParts = encryptedText.split(':');
    const iv = Buffer.from(textParts.shift(), 'hex');

    const encryptedData = Buffer.from(textParts.join(':'), 'hex');
    const key = crypto.createHash('sha256').update(password).digest('base64').substr(0, 32);
    const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);

    const decrypted = decipher.update(encryptedData);
    const decryptedText = Buffer.concat([decrypted, decipher.final()]);
    return decryptedText.toString();
  } catch (error) {
    console.log(error)
  }
}

And a test:

const text = "Hello World"
const pass = "secret1234"

const encText = encrypt(text, pass)
console.log('encrypted text', encText);

const decText = decrypt(encText, pass)
console.log('decrypted text', decText);

Then run :

node encdec.js

# Output
encrypted text 71596b9f5a99532f438fc5669b845680:248f6cb24a4ebeb174bbb73953115fd5
decrypted text Hello World

Source: https://gist.github.com/vlucas/2bd40f62d20c1d49237a109d491974eb

Convert Files and Folders Structures to Bash Scripts, with NodeJS

Alex Adam — Thu, 22 Jul 2021 14:59:49 +0000

This is a simple NodeJS app that takes a source folder as input and generates a Bash script. The Bash script has all the files' content and the folders' structure in the source folder and it can recreate them when executed.

Source code available here: https://github.com/alexadam/folders-to-script

First step, iterate through all files in the source folder:

const fs = require("fs")
const path = require("path")

const listFiles = (dirPath, result) => {
 files = fs.readdirSync(dirPath)

 result = result || ['#!/bin/sh']

 for (const file of files) {
   ///...
 }

 return result
}

const allFiles = listFiles(rootPath)

fs.writeFileSync('./result.sh', allFiles.join('\n'))

If file is a directory, add an mkdir -p command:

for (const file of files) {
 if (fs.statSync(dirPath + "/" + file).isDirectory()) {
 result.push(`mkdir -p ${path.join(dirPath, "/", file).replace(rootPath, '.')}`)
 result = listFiles(dirPath + "/" + file, result)
 } 
}

Else, test if file is binary or text, based on its extension:

const textExt = ['txt', 'md', 'html', 'json', 'js', 'jsx', 'ts', 'tsx'];
const binaryExt = ['jpg', 'png', 'gif', 'pdf', 'mp3', 'mp4'];

const getFileExt = (filePath) => filePath.split('.').pop()

...
    else {
      const filePath = path.join(dirPath, "/", file);
      const fileExt = getFileExt(filePath);
      const fileContent = fs.readFileSync(filePath);

      if (textExt.includes(fileExt)) {
        result.push(`
cat > ${path.join(dirPath, "/", file).replace(rootPath, '.')} << "EOF"
${fileContent}
EOF
`)
      } else if (binaryExt.includes(fileExt)) {
        const bindata = fileContent.toString('binary');
        const hexdata = new Buffer(bindata, 'ascii').toString('hex');
        result.push(`echo '${hexdata}' | xxd -r -p > ${path.join(dirPath, "/", file).replace(rootPath, '.')}`)
      }
    }
...

Binary files are stored as hex strings.

You can add/remove file extensions in the textExt or binaryExt arrays.

This is the full NodeJS script:

const fs = require("fs")
const path = require("path")

const rootPath = process.argv[2]

const textExt = ['txt', 'md', 'html', 'json', 'js', 'jsx', 'ts', 'tsx'];
const binaryExt = ['jpg', 'png', 'gif', 'pdf', 'mp3', 'mp4'];

const getFileExt = (filePath) => filePath.split('.').pop()

const listFiles = (dirPath, result) => {
  files = fs.readdirSync(dirPath)

  result = result || ['#!/bin/sh']

  for (const file of files) {
    if (fs.statSync(dirPath + "/" + file).isDirectory()) {
      result.push(`mkdir -p ${path.join(dirPath, "/", file).replace(rootPath, '.')}`)
      result = listFiles(dirPath + "/" + file, result)
    } else {
      const filePath = path.join(dirPath, "/", file);
      const fileExt = getFileExt(filePath);
      const fileContent = fs.readFileSync(filePath);

      if (textExt.includes(fileExt)) {
        result.push(`
cat > ${path.join(dirPath, "/", file).replace(rootPath, '.')} << "EOF"
${fileContent}
EOF
`)
      } else if (binaryExt.includes(fileExt)) {
        const bindata = fileContent.toString('binary');
        const hexdata = new Buffer(bindata, 'ascii').toString('hex');
        result.push(`echo '${hexdata}' | xxd -r -p > ${path.join(dirPath, "/", file).replace(rootPath, '.')}`)
      }
    }
  }

  return result
}

const allFiles = listFiles(rootPath)

fs.writeFileSync('./result.sh', allFiles.join('\n'))

Test it with node index.js test -> it will generate a Bash script file named result.sh

Then, in an empty directory, execute the script with sh result.sh.

How to install Node, Yarn, Git and VSCode on Linux, Mac and Windows

Alex Adam — Tue, 22 Jun 2021 15:34:43 +0000

How to install Node, Yarn, Git and VSCode on Linux, Mac and Windows

On Linux (Ubuntu 20.04 LTS):

Node

Download the Node LTS archive file from https://nodejs.org/ and extract it (in this example, the archive is extracted is /home/user/Downloads/)

Open .bashrc in the home folder (/home/user./bashrc) with a text editor, and append:

PATH=$PATH:/home/user/Downloads/node-v14.17.0-linux-x64/bin

Then, in a terminal:

source .bashrc

node -v
# v14.17.0

npm -v
# 6.14.13

You may also need the development tools to build native addons:

sudo apt install gcc g++ make

Alternatively, you can install Node from a package. To install the LTS version, go to https://github.com/nodesource/distributions and

# You need to install curl if it's not already installed
sudo apt install curl

# Ubuntu
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Yarn

Install Yarn (from https://yarnpkg.com/getting-started/install)

npm install -g yarn

yarn -v
# 1.22.10

Git

sudo apt install git

VSCode

Download the .deb package from https://code.visualstudio.com/. Then, in a terminal, go to the Downloads folder, and:

sudo dpkg -i code_1.57.0-1623259737_amd64.deb

# test it
code .

On Mac

Node

Download the LTS package from https://nodejs.org and install it (double click on node-v14.17.1.pkg and follow the steps).

Then open a terminal, and:

node -v

npm -v

Yarn

Open a terminal, and:

npm install -g yarn

yarn -v

NOTE: if you get this error: “npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/yarn” run the following commands:

sudo chown -R $USER /usr/local/lib/node_modules 
sudo chown -R $USER /usr/local/bin
sudo chown -R $USER /usr/local/share/

Then try to reinstall yarn with the command above.

Git

First, install Homebrew by following the instructions here: https://brew.sh

Then, install Git with:

brew install git

VSCode

Download the package from https://code.visualstudio.com and install it.

On Windows

Node

Download Nodejs LTS from https://nodejs.org and install the package - don't forget to check "Automatically Install the Necessary Tools" in the installer.

Then, open a terminlal (Command Prompt) and:

node -v

npm -v

Yarn

npm install -g yarn

yarn -v

Git

Download the executable from here https://git-scm.com/download/win and run the installer.

Then, open a terminal and:

C:\Users\user>git --version
git version 2.32.0.windows.1

VSCode

Download VSCode from https://code.visualstudio.com/ and run the installer.

Then, to test everything, open a Command Prompt and:

git clone https://github.com/alexadam/project-templates.git

cd projects\react-app

yarn init --yes

yarn add react react-dom

yarn add --dev @types/react @types/react-dom ts-loader css-loader html-webpack-plugin node-sass sass-loader style-loader typescript webpack webpack-cli webpack-dev-server

# Open VSCode
code .

Open package.json and append these lines:

,"scripts": { "clean": "rm -rf dist/*", "build": "webpack", "dev": "webpack serve" }

Run yarn dev, open a browser and go to http://localhost:8080/