DEV Community: HoSheiMa

Convert Array, Object to Unix Tree

HoSheiMa — Tue, 01 Nov 2022 04:39:56 +0000

javascript-unix-tree

Github: https://github.com/HoSheiMa/javascript-unix-tree
Pure Javascript Unix Tree Script

// our array example
let array = [
  1,
  2,
  [3, 4, 5],
  {
    name: "Qandil",
    links: [
      "https://www.freelancer.com/u/wadielnatrontv",
      "https://www.facebook.com/qandilabdel.fadilawyan/",
    ],
    ex: [1, 2, 3, { say: "hello" }],
  },
];

Simple result


new output(
  new unix(array).output
);
/**
Output:
├── 1
├── 2
├── Array
│   ├── 3
│   ├── 4
│   └── 5
├── Object
│   ├── Qandil
│   ├── Array
│   │   ├── https://www.freelancer.com/u/wadielnatrontv
│   │   └── https://www.facebook.com/qandilabdel.fadilawyan/
│   ├── Array
│   │   ├── 1
│   │   ├── 2
│   │   ├── 3
│   │   ├── Object
│   │   │   └── hello
*/

Simple result and full Array() details


new output(
   new unix(array, {
    show_array_index: true,
    show_object_keys: false,
  }).output
);
/**
Output:
├── Array: 0
│   └── 1
├── Array: 1
│   └── 2
├── Array
│   ├── Array: 0
│   │   └── 3
│   ├── Array: 1
│   │   └── 4
│   ├── Array: 2
│   │   └── 5
├── Object
│   ├── Qandil
│   ├── Array
│   │   ├── Array: 0
│   │   │   └── https://www.freelancer.com/u/wadielnatrontv
│   │   ├── Array: 1
│   │   │   └── https://www.facebook.com/qandilabdel.fadilawyan/
│   ├── Array
│   │   ├── Array: 0
│   │   │   └── 1
│   │   ├── Array: 1
│   │   │   └── 2
│   │   ├── Array: 2
│   │   │   └── 3
│   │   ├── Object
│   │   │   └── hello
*/

Simple result and full Object details

new output(
  new unix(array, {
    show_array_index: false,
    show_object_keys: true,
  }).output
);
/**
Output:
├── 1
├── 2
├── Array
│   ├── 3
│   ├── 4
│   └── 5
├── Object
│   ├── Object: name
│   │   └── Qandil
│   ├── Array
│   │   ├── https://www.freelancer.com/u/wadielnatrontv
│   │   └── https://www.facebook.com/qandilabdel.fadilawyan/
│   ├── Array
│   │   ├── 1
│   │   ├── 2
│   │   ├── 3
│   │   ├── Object
│   │   │   ├── Object: say
│   │   │   │   └── hello
*/

Simple result, full Array() and Object details

new output(
  new unix(array, {
    show_array_index: true,
    show_object_keys: true,
  }).output
);
/**
Output:
├── Array: 0
│   └── 1
├── Array: 1
│   └── 2
├── Array
│   ├── Array: 0
│   │   └── 3
│   ├── Array: 1
│   │   └── 4
│   ├── Array: 2
│   │   └── 5
├── Object
│   ├── Object: name
│   │   └── Qandil
│   ├── Array
│   │   ├── Array: 0
│   │   │   └── https://www.freelancer.com/u/wadielnatrontv
│   │   ├── Array: 1
│   │   │   └── https://www.facebook.com/qandilabdel.fadilawyan/
│   ├── Array
│   │   ├── Array: 0
│   │   │   └── 1
│   │   ├── Array: 1
│   │   │   └── 2
│   │   ├── Array: 2
│   │   │   └── 3
│   │   ├── Object
│   │   │   ├── Object: say
│   │   │   │   └── hello
*/

Javascript Gradient Background in Brex and understand How Colors Works.

HoSheiMa — Mon, 11 Nov 2019 11:45:08 +0000

welcome in Brex World.

Today will create a Fast Example in Brex library in 3 min

learn Brex State
learn color system
learn Hacks in Javascript
Create random color in Javascript

step 1

create empty Brex File.

Brex(
  Component(function() {

    return View({})

})

step 2

add global variable With split function we split "HELLOWORLD" to array with each letter.

    var WORD = "HELLOWORLD!".split("");

step 3

create a function to create a random colors this function create random number from 0 to 255 and we mines from it a Word length * word length to make it decrease to half a 255 number, you can improve this function by your self. more info about Math.random and Math.floor

var random = () => {
      return Math.floor(Math.random() * 255 - WORD.length * WORD.length); // ? we minus word.length * 12 because don't make random over than max number(255)
    };

step 4

use a random Function to create a random red, blue, green color

    var bgred = random();

    var bggreen = random();

    var bgblue = random();

step 5

add a important custom child, this child should centering a text in body.

  var Cover = createNativeElement({
      attrs: {
        style: `
            display: flex;
            flex: 1;
            transition: 0.8s;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
          `
      }
    });

step 6

add cover child to view, and make loop in it to show each letter with some custom css,
we increase color number in each element to make linear gradient.
for more info about color visit W3

 return View({
      children: [
        Cover({
          children: [
            ...WORD.map((v, i) => {
              bgred = bgred + 12;
              bggreen = bggreen + 12;
              bgblue = bgblue + 12;

              return Child({
                text: v,
                type: "span",
                attrs: {
                  style:
                    `
                    transition: 0.6s;                    
                    background-color: 
                     rgb(${bgred}, ${bggreen}, ${bgblue});` +
                    "color: #fff;" +
                    "text-shadow: 2px 2px 8px #000;" +
                    "font-size: 46px;" +
                    "padding: 8px;"
                }
              });
            })
          ]
        })
      ]
    });

step 7

add a setTimeout to recreate each second a new color

 setTimeout(() => {
      this.setState({});
    }, 1000); // ? create loop for every one secound will change a colors

full Example

Brex(
  Component(function() {
    setTimeout(() => {
      this.setState({});
    }, 1000); // ? create loop for every one secound will change a colors

    var WORD = "HELLOWORLD!".split("");

    var random = () => {
      return Math.floor(Math.random() * 255 - WORD.length * WORD.length); // ? we minus word.length * 12 because don't make random over than max number(255)
    };

    var bgred = random();

    var bggreen = random();

    var bgblue = random();

    var Cover = createNativeElement({
      attrs: {
        style: `
            display: flex;
            flex: 1;
            transition: 0.8s;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
          `
      }
    });

    return View({
      children: [
        Cover({
          children: [
            ...WORD.map((v, i) => {
              bgred = bgred + 12;
              bggreen = bggreen + 12;
              bgblue = bgblue + 12;

              return Child({
                text: v,
                type: "span",
                attrs: {
                  style:
                    `
                    transition: 0.6s;                    
                    background-color: 
                     rgb(${bgred}, ${bggreen}, ${bgblue});` +
                    "color: #fff;" +
                    "text-shadow: 2px 2px 8px #000;" +
                    "font-size: 46px;" +
                    "padding: 8px;"
                }
              });
            })
          ]
        })
      ]
    });
  })
);

for more example visit Full example section. with lastest version.
GitHup Blex

Welcome To any One wanna join in our team,
req: good Javascript, any Framework Like (React, Flutter, Angular, etc... )
Contact me at : FB TW GT

A new JavaScript library for building user interfaces, Easy, Fast, And readable Syntax, Mix With React + Flutter Style

HoSheiMa — Sat, 09 Nov 2019 16:14:00 +0000

Hello in Brex world

A JavaScript library for building user interfaces with easy syntax system and esay controll each widget in each component and Design simple views for each state in your application.

Fast and Lite. lite library to help you to create a Complex UI with simple ways.
Tools. give you more library & methods helping you create all you want.
Easy Style. using React style component with methods & Flutter Widget style with fast readable system
Easy Control all things in component is a widget

Simple Example

Without Hooks

 Brex(Component(function() {

  this.state = {
    ...this.state,
    name: 'HoSheiMa',
  }

   return View({
     children: [
       Child({
         text: 'Hello ' + this.state.name
       })
    ]
})

With Hooks (Beta)

 Brex(Component(function() {

   [name, setName] = this.useState('HoSheiMa'); 

   return View({
     children: [
       Child({
         text: 'Hello ' + name
       })
    ]
})

Advance Example

var Main = function() {

  /**
   * // without Hooks
   * this.state = {
   *  ..this.state,
   *  x: 0,
   * }
  */

  // with Hooks
  [x, setX] = this.useState(0);

  var redText = createNativeElement({
    attrs: {
      style: "color:red;"
    }
  }); // ? Create a custom child using createNativeElement function

  return View({
    children: [
      // children :D
      redText({
        text: "Hello world x: " + x,
        events: {
          click: function() {
            /**
              * // without Hooks
              * this.setState({
              *  x: x + 1,
              * })
            */

            // with Hooks
            setX(x + 1); 
          }
        }
      })
    ]
  });
};

Brex(Component(Main)); // init main point to start from it.

for more example visit Full example section. with lastest version.
GitHup Link : https://github.com/HoSheiMa/Brex