Forem: Lourdes Suello

Create an iterative rendering utility for React

Lourdes Suello — Fri, 12 Jan 2024 22:13:13 +0000

const Component = () => {
const persons = [
{id: 1, firstName: 'John', lastName: 'Doe'},
{id: 2, firstName: 'Peter', lastName: 'Grater'}
]
return (
<div>
  <p>List of Names</p>
  <ul>
    {persons.map((item) => (
    <li>
      {item.firstName} {item.lastName}
    </li>
    ))}
  </ul>
</div>
)}

instead use the code below. Create a new file and use the code below

import {Children} from 'react';

export const Each = ({render, of}) => 
Children.toArray(of.map((item, index) => render(item, index)));

Javascript Basic

Lourdes Suello — Fri, 04 Aug 2023 02:03:45 +0000

1. Data Types

String "Any text"
Number 12345
Boolean true or false
Null null
Undefined undefined
Symbol symbol('something')
Object {key: 'value'}
- array [1,"text", false]
- function function name(){}

number 1-6 are six primitive types

2. Basic Vocabulary

var a = 7 + "2";

var = keyword/reserved word
any word that is part of the vocabulary of the programming languange is called a keyword(a.k.a reserve word).
Example: var = + if for...

a = variable
a named reference to a value is a variable

= and + = operator
operators are reserved-words that perform action on values and variables
Example: + - = * in === typeof != ...

var a = 7 + "2"; = statement
a group of words, numbers and operators that do a task is a statement

7 + "2" = expression
a reference, value or a group of reference(s) and value(s) combined with operator(s). which result in a single value.

3. Object
An object is a data type in Javascript that is used to store a combination of data in a simple key-value pair.

var user = {
   name: "Lourdes Suello",
   yearOfBirth: "1991"
   calculateAge: function(){
    // some code to calculate age
  }
}

name, yearOfBirth, calculateAge = Key
these are the keys in user object.

"Lourdes Suello", "1991", function(){} = Value
these are the values of the respective keys in user object.

function(){} = Method
if a key has a function as a value its called a method

4. Function
A function is a simple bunch of code bundled in a section. This bunch of code ONLY runs when the function is called. Functions allow for organizing code into section and code reusability.

Javascript Array Methods Atleast You Should Know

Lourdes Suello — Sun, 13 Sep 2020 13:46:16 +0000

map()

Creates a new array populated with the results of calling a provided function on every element in the calling array.

const arr = [1, 2, 3, 4, 5, 6];

// add one to every element
  const oneAdded = arr.map(num => num + 1);
  console.log(oneAdded); 
// output [2, 3, 4, 5, 6, 7]

  console.log(arr); 
// output: [1, 2, 3, 4, 5, 6]

Another Sample:

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

forEach()

Executes a provided function once for each array element.Help you to loop over array’s items.

const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(item => {
    console.log(item); 
// output: 1 2 3 4 5 6
  });

Another Sample:

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

includes()

Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const arr = [1, 2, 3, 4, 5, 6];

  arr.includes(2); // output: true
  arr.includes(7); // output: false

Another Sample:

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

filter()

Creates a new array with all elements that pass the test implemented by the provided function
Creates an array filled with all array elements that pass a test (provided as a function)

const arr = [1, 2, 3, 4, 5, 6];

  // item(s) greater than 3
  const filtered = arr.filter(num => num > 3);
  console.log(filtered); // output: [4, 5, 6]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

Another Sample:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

reduce()

Executes a reducer function (that you provide) on each element of the array, resulting in single output value.

const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); 
// 21

Another Sample:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

some()

Tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

const arr = [1, 2, 3, 4, 5, 6];

  // at least one element is greater than 4?
  const largeNum = arr.some(num => num > 4);
  console.log(largeNum); // output: true

  // at least one element is less than or equal to 0?
  const smallNum = arr.some(num => num <= 0);
  console.log(smallNum); 
// output: false

Another Sample:

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

every()

Tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. If passed, it return true otherwise false.

  const arr = [1, 2, 3, 4, 5, 6];

  // all elements are greater than 4
  const greaterFour = arr.every(num => num > 4);
  console.log(greaterFour); // output: false

  // all elements are less than 10
  const lessTen = arr.every(num => num < 10);
  console.log(lessTen); // output: true

Another Sample:

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

join()

Creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

DigitalOcean - Wordpress PHP Update Required

Lourdes Suello — Sat, 12 Sep 2020 07:20:45 +0000

1. Take a backup snapshot on your digitalocean server.

2. Back up your Websites:

Make a backup of your wordpress websites before updating PHP version. Take note that is little risk during the process, making a backup is still recommended.

3. Sign-in to your Ubuntu server using SSH

4. Check your current PHP version

php -v

5. Add a PPA for PHP 7.3 Packages

Add the ondrej/php which has PHP 7.3 package and other required PHP extensions.

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update

You can check your PHP version again to make sure the PHP has been updated on your server. php -v Then, proceed to install related modules.

sudo apt install php7.3-fpm php7.3-common php7.3-mbstring php7.3-xmlrpc php7.3-gd php7.3-xml php7.3-mysql php7.3-cli php7.3-zip php7.3-curl

6. Disable PHP5 and enable PHP7

sudo a2dismod php5
sudo a2enmod php7.3
sudo service apache2 restart

Congratulations! Your WordPress websites should be running on the newest PHP version now and you won’t see the warning again in the Dashboard. The PHP update is really important and I highly recommend you to do it immediately if you haven’t done so. It does not only make your site faster for search engines and for your visitors, but also make your website better protected against hackers.

Everything you know about JSON.parse() and JSON.stringify()

Lourdes Suello — Sun, 06 Sep 2020 08:50:40 +0000

JSON.stringify()

Transforms a Javascript object to a JSON string.
A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
Convert a JavaScript object into a string with JSON.stringify().

Example:
Imagine we have this object in JavaScript:

const student = {
    name: "Alex",
    age: 20,
    email: "alex@gmail.com"
};

const studentStr = JSON.stringify(student);
console.log(studentStr);

{ "name":"Alex", "age":20, "email":"alex@gmail.com"}

Stringify a JavaScript Array

It is also possible to stringify JavaScript arrays.

Example:
Imagine we have this object in JavaScript:

const arrName = [ "John", "Peter", "Sally", "Jane" ];

const jsonName = JSON.stringify(arrName);
console.log(jsonName);

["John","Peter","Sally","Jane"]

JSON.parse()

Takes a JSON string and transform it into a Javascript Object.

Example:
Imagine we received this text from a web server.
We will take the studentStr sample above.

const jsObject = JSON.stringify(studentStr);
console.log(jsObject);

Object { age: 20, email: "alex@gmail.com", name: "Alex" }