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. Checkout the working code sample below See the Pen Unique array using reduce and find by Kiran (@kiranvj) on CodePen. 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. Solution Add a custom key hideHeader: false, in the columns variable. In the Material table check for this key. 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 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 Website: https://pixabay.com/ License: mostly Pixabay License…
-
File upload in Material UI
For basic file upload you can use the TextField component. The code will looks something like this. The important thing to note here is you need to set the type props to file How do you customize it? 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 Step 2 : Customize it Create a label around the input which we created in step 1Add Material UI Button or Fab based…
-
Material UI switch with icons
Check the source at my github repo
-
Generate random number using Google
Go to google.com Search random You will see this 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. How to do it: Find an emoji. eg: Go to https://emojipedia.org/ search and find a emoji. Copy it. Open you webpage which supports unicode. (Notepad++, VSCode etc) Paste the emoji you copied, in the head > title tag. Important step: Add the below meta tag inside your head tag. You code will now look like this. Thats it,…
-
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 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 The variable should be prefixed with REACT_APP_ You need to restart the server to reflect the changes in your code. You should access the variable in your code like this process.env.REACT_APP_SOME_VARIABLE No need to wrap your variable value in single or double quotes. Do…
-
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. 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 But in ES6 we can do like this. Hope this helps 🧡
-
LED series and parallel circuit generator
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.
