JavaScript – Find unique array

Here I will explain how to find an unique array from an array which has duplicates.

There are different methods to find the unique elements in an array. Here lets use ES6 functions reduce and find.

function uniqueArray(array) {
  var newUniqueArray = array.reduce((accumulator, currentValue) => {
    if (!accumulator.find(arrayItem => arrayItem === currentValue)) {
      accumulator.push(currentValue);
    }
    return accumulator;
  }, []);

  return newUniqueArray;
}

Checkout the working code sample below

See the Pen Unique array using reduce and find by Kiran (@kiranvj) on CodePen.

https://static.codepen.io/assets/embed/ei.js

Happy coding…..

React Table 7.x – Hide Column Header Row

Scenario: I am using the new React Table 7x (the headless component). By default there will be a column header for the entire table columns. You can give empty string so that the Header will not be shown. By the problem is that row in html will be still rendered (see the below image). So I want to hide the entire row in html. I am using Material Table with react-table to render the table.

Row with empty contents

Solution

Add a custom key hideHeader: false, in the columns variable.

In the Material table check for this key.

<TableHead>
        {headerGroups.map((headerGroup) => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => {
              return column.hideHeader === false ? null : (
                <TableCell {...column.getHeaderProps()}>
                  {column.render('Header')}
                </TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>

This should remove the empty row from html output.

Happy coding

🌟 🎄 🎅 🦌

5 design resources for illustrations

These are the 5 design resources I mainly use.

1. humaaans

An illustration from humaaaans

Website: https://www.humaaans.com/

License : CC – Free for commercial or personal use

As the website name says, the illustrations are mostly related to humans. You can download the assets in png, svg, sketch formats

Download formats: png, svg, sketch

2. Undraw

Website : https://undraw.co/

License: Free to use for personal and commercial projects, without the need to include attribution.

Even though its free, whenever possible give credits to the designer/developer. These things needs time and effort.

Download formats: svg, png

3. Pixabay

One of the best sites for free vectors and png files

Christmas background from Pixabay

Website: https://pixabay.com/

License: mostly Pixabay License – Free for commercial use, No attribution required

Format: png, svg

4. FreeVector

This site has free as well as paid assets

from freevector.com

License: Attribution required

Format: svg, png

File upload in Material UI

For basic file upload you can use the TextField component.

File upload

The code will looks something like this.

<TextField
  name="upload-photo"
  type="file"
/>

The important thing to note here is you need to set the type props to file

How do you customize it?

Customized file input

As the basic controls are not that fancy we may need to customize it. Since we are using Material UI its straight forward.

Step 1

Create an html input with id and file properties. Use style='display:none' as we don’t want to show it.

The code will look like this

 <input  style={{ display: 'none' }} 
         id="upload-photo"  
         name="upload-photo"  
         type="file"/> 

Step 2 : Customize it

Create a label around the input which we created in step 1
Add Material UI Button or Fab based on how you want your file upload to look.

Lets try with Button first.

File upload button

Inside the label which we created add a Button component. Add the props component with value span. This is very important otherwise the button component will render using the html <button> tag, which fails our file upload.

For Button component the code will look like this. (working example at the end of post)

<label htmlFor="upload-photo">
  <input
    style={{ display: 'none' }}
    id="upload-photo"
    name="upload-photo"
    type="file"
  />

  <Button color="secondary" variant="contained" component="span">
    Upload button
  </Button>
</label>;

Now lets try a different UI

Custom file upload

We will use Material UI Fab component for this. The code is very similar to what we have in button example.

<label htmlFor="upload-photo">
  <input
    style={{ display: 'none' }}
    id="upload-photo"
    name="upload-photo"
    type="file"
  />

  <Fab
    color="secondary"
    size="small"
    component="span"
    aria-label="add"
    variant="extended"
  >
    <AddIcon /> Upload photo
  </Fab>
  <br />
  <br />

  <Fab color="primary" size="small" component="span" aria-label="add">
    <AddIcon />
  </Fab>
</label>;

https://codesandbox.io/embed/eager-euclid-mo7de?fontsize=14&hidenavigation=1&theme=dark

Hope this helps. Happy coding 🍺

Material UI switch with icons

MUI Switch

Check the source at my github repo

Generate random number using Google

Go to google.com

Search random

You will see this

Google random number generator

Set min max and click Generate, you will get a random number every time.

Not sure what algorithm Google uses but I doubt its Math.random

Show emoji in your webpage title or browser tab

You might have seen emoji in some websites’ browser title bar. I have not talking about the favicon. I am taking about emoji, thats what you see in browser tab right after favicon or anywhere in webpage.

This is what I am talking, you see the sun emoji in the browser tab.

Sun emoji in browser tab

How to do it:

1. Find an emoji. eg: Go to https://emojipedia.org/ search and find a emoji. Copy it.
2. Open you webpage which supports unicode. (Notepad++, VSCode etc)
3. Paste the emoji you copied, in the
   head > title tag.
4. Important step: Add the below meta tag inside your head tag.

<meta charset="UTF-8" />

You code will now look like this.

Thats it, save and open in browser. Your browser tab should display the emoji.

Peace ✌️

React environment variables not working or undefined

In ReactJS environment variables are fetched from .env files. If you set the variable in .env file and your variables returned undefined check the below items.

Assumption: You have used Create React App (CRA) to bootstrap your application

1. The .env file should be in the root for you application folder. That is one level above your src folder, the same place where you have your package.json
2. The variable should be prefixed with REACT_APP_
3. You need to restart the server to reflect the changes in your code.
4. You should access the variable in your code like this
   process.env.REACT_APP_SOME_VARIABLE
5. No need to wrap your variable value in single or double quotes.
6. Do not put semicolon ; or comma , at the end of each line.

Happy coding ☕

Object key as variable

Create a JavaScript object with dynamic keys, that is key name will come from variable.

I want to create an object like this.

let details = { car: "red" }

Here car is the key and red is the value, Now I need the object key car to come from a variable called item.

In ES5 we do it like this

var details = {};
var item = "car";
details [item] = "red"; // now the object will be { car : "red" }

But in ES6 we can do like this.

let item = "car";
let details = { [item] : "red" }; 
// now the details object will be { car : "red" }

Hope this helps 🧡

LED series and parallel circuit generator

Different kind of LEDs
Picture by Afrank99 – CC BY-SA 2.0

The LED series/parallel array wizard is a calculator that will help you design large arrays of LEDs.

The LED calculator was great for single LEDs — but when you have several LEDs, the below wizard will help you arrange them in a series or combined series/parallel configuration.

Wizard link

http://led.linear1.org/led.wiz

The wizard determines the current limiting resistor value for each portion of the array and calculates power consumed. All you need to know are the specs of your LEDs and how many you’d like to use.