DEV Community: Rae Liu

Regular Expressions cheat sheet

Rae Liu — Thu, 03 Dec 2020 06:38:54 +0000

Regular expression is a powerful tool, and it can save lots of lines codes sometimes.

What is Regex

Regex(Regular Expression) describes a pattern of a certain amount of text, so it can be used for string editing.

Online tool

Not sure if your Regex works? Try Regex101, it can make your Regexes much easier.
I also recommend Regular Expression Info, it explains all details that you need to know.

Cheat Sheet

Character	Meaning	Example
^	the beginning of the string
$	the end of the string
\b	whole word only	\babc\b matches 'abc', but not 'abcc '
\B	if the pattern is fully surrounded by word	\Babc\B mathes 'aabcc', but not 'abc'
.	anything
\d	single digit in 0-9
\D	single non-digit
\w	single word character
\W	single non-word
\s	white space(space, tab, return, new line)
\S	non-whitespace
\t	tab
\r	return
\n	new line
\g	global search, which means it doesn't stop at the first match
*	zero or more of the previous	abc* matches a string that has ab followed by zero or more c
+	one or more of the previous	abc+ matches a string that has ab followed by one or more c
?	zero or one of the previous	abc? matches a string that has ab followed by zero or one c
?:	non-capturing group
X{m}	number of X === m
X{m,}	m < number of X
X{m, n}	m < number of X < n
(X \| Y)	X or Y
[...]	any of characters in the class	[abcd] matches a string that has one of the char (a, b, c, d)
-	range	[a-d] same as above

Key words from the cheat sheet

Anchor
Anchor is not a pattern, it is a position.
It matches a position before, after or between characters.
For example, ^ is the beginning of the string, and it is also a start of line anchor.

Boundaries
\b is a word boundary because \babc\b has to match the whole word abc.
\B is non-word-boundary because \Babc\B means any words that includes abc (abcc, eabc).

Quantifiers
Greedy: The optional item is included in the match if possible. ? is a typical example of greedy quantifiers. abc? can match either abc or ab.
Lazy: The optional item is excluded in the match if possible. ?? is a typical one because abc?? only matches ab.
Here is the best example from stack overflow - https://stackoverflow.com/questions/2301285/what-do-lazy-and-greedy-mean-in-the-context-of-regular-expressions

Non-capturing group
?: means the pattern doesn't capture to the group. It usually uses with .match(). So if you use ?:, then the pattern won't be included to the array.
Example from stack overflow -
https://stackoverflow.com/questions/3512471/what-is-a-non-capturing-group-in-regular-expressions

Hope this post helps ❤️

2D array peak - JS (reduce function)

Rae Liu — Sun, 25 Oct 2020 20:24:16 +0000

I have taken couple days to learn what is Reduce, UseReducer functions (JS, React) so I was thinking maybe I can find something fun to code.

No small chat, here is the question -

2-D Peak Finding

 - c - - -
 c - e - z
 - r s u x
 - r - a z

In the 2d array depicted above, a is a peak, if a >= b, a >= d, a >= e, a >= c, find the peak array.

Output should be 'a'

var arr = [ [ '', 'c', '', '',''], 
        [ 'c', '', 'e', '','z' ], 
        [ '', 'r', 's', 'u', 'b' ], 
        [ '', 'h', '', 'a','z' ] ];

1. How to compare

'a'>'b' === false , 'b' > 'a' === true

2. Loop

We split the matrix row by row, and then find the peak for each row.
We know the min is z

console.log(array.reduce(findPeak, 'z'));

//split row by row
const findPeak = (currPeak, currRow) =>{
  //currRow is still an array
  //So use reduce function again
  //currRow.reduce(findPeakPerRow, 'z')
}

const findPeakPerRow = (currPeak, currEle) =>{
  //Compare currPeak and CurrEle
}
//compare function
const getMaxValue = (currPeak, currValue) => {
  //if currValue is not an array, then find the max value
  return (currValue && currValue < currPeak ? currValue : currPeak)
}

Full Codes -

const findPeak = (currPeak, currRow) =>{
  let currValue = currRow.reduce(findPeakPerRow, 'z');
  return (getMaxValue(currPeak, currValue));
}

const findPeakPerRow = (maxValue, currValue) => {
  return (getMaxValue(maxValue, currValue));
}

const getMaxValue = (currPeak, currValue) => {
  return (currValue && currValue < currPeak ? currValue : currPeak)
}

console.log(arr.reduce(findPeak, 'z'))

3. Recursive Function?

Not sure if we can convert those to recursive functions...
Feel free to comment any ideas!

React Hooks - useState and useReducer cheat sheet - for developers who don't know Redux

Rae Liu — Sun, 11 Oct 2020 23:54:44 +0000

I was having trouble to understand useReducer because I don't have Redux background. So I wrote this article to explain it to myself, and I hope it can help you as well.

Learn `useState` first

If you know how useState works, then you can skip this section, and I am going to compare useReducer to useState.

`useState` example (reactjs.org)


  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

const [count, setCount] = useState(0);

useState(0): It passes the initial state (in this case, it is 0), and returns an array with 2 elements - count and setCount.
count: new state
setCount: the function that uses to change the state value. It is like this.setState() in class based component.

Compare to `useReducer`

useReducer is used for complicated state situation.
For example, I want to add one more button to decrease counter.

Here is the code by using useState

`useState` example (reactjs.org)

 const [count, setCount] = useState(0);

  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
      <button onClick={() => setCount(count - 1)}>
        -
      </button>
    </div>
  );
}

We are going to move count+1 and count -1 to a FUNCTION by using useReducer

const [count, setCount] = useReducer(FUNCTION, {count: 0})

In useReducer, we call count as state, setCount as dispatch, and FUNCTION is reducer

So it looks like this -

const [state, dispatch] = useReducer(reducer, {count: 0})

MDN explains pretty well what is Array.prototype.reduce() is. It may help you to understand what is the reducer funciton in useReducer.

Next, we are going to write the reducer function

reducer function passes 2 parameters

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

state: the current state
action: if I want to change state, then I call dispatch function. In this case, the first element is type, refer to action.type.

For example, I call dispatch({type: 'increment'}), then count will be + 1.

<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>

Full codes -

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  return (
      {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Hope it will help you! ❤️

How to fix - Ctrl + F doesn't work in Windows

Rae Liu — Fri, 09 Oct 2020 02:09:24 +0000

This solution is not for any single apps in PC, this is for the entire windows 10, which means Ctrl+f doesn't work in any apps...

oleacc.dll in C:\Windows\System32 may have corrupted.

So this file have to registered.

a. type cmd in startbox => right click => open as administor
b. type regsvr32 oleacc.dll, then hit enter
c. wait until a pop up window shows up - registered successfully
d. restart the computer

If re-register doesn't work...

a. open terminal as administrator (#1 a)
b. type sfc/scannow, then hit enter
c. It will scan all system files and repair them.
d. restart the computer

How to use MutationObserver.observe() instead of setTimeOut()

Rae Liu — Tue, 21 Jul 2020 01:54:20 +0000

Why not to use `setTimeOut`?

I used to use setTimeOut to wait until the entire JS codes are loaded so I can change the DOM.
But setTimeOut is unstable because JS loading time depends on browser type, internet speed and other factors. So how many seconds you should wait? It might work for your computer, but not for others...

What is `MutationObserver`

MutationObserver is a useful api that can observe DOM changes, and it also supports IE11!

Basic Syntax - observer()

Here is a sample HTML -

  <ul class='myList'>
    <li>LCD writing board</li>
    <li>Paper</li>
    <li>
       Tablet
       <ul class='tabletList'>
          <li>IPAD</li>
          <li>Samsung Galaxy Tab </li>
       </ul>
    </li>
  </ul>

//identity an element to observe
const myListObserver = document.querySelector(".myList");

//a callback that runs when the observer is triggered
const observer = new MutationObserver(function() {
    console.log('trigged');
});
//passing element to observer function, and `options`
observer.observe(myListObserver, {OPTIONS_OBJECT});

`Options` Object

Options decides when to trigger the callback -
Options List -

let Options = {
  childList: bool,
  attributes: bool,
  characterData: bool,
  subtree: bool,
  attributeFilter: array,
  attributeOldValue: bool,
  characterDataOldValue: bool,
}

Note: One of childList, attributes, and/or characterData must be true when you call observe().

1. Options - `childList`

observer.observe(myListObserver, {childList: true});

The callback is only triggered when immediate children nodes are added or removed.
In example HTML, if anything in .tabletList(nested list) is changed, then it won't trigger the callback.

2. Options - `subtree`

observer.observe(myListObserver, {childList: true, subtree: true});

The callback will be triggered when any child nodes inside .myList is added or removed.

3. Options - `attributes` and `attributeFilter`

observer.observe(myListObserver, {attribute: true});

Execute callback when any attribute is changed

observer.observe(myListObserver, {attribute: true, attributeFilter:['class', 'style']});

Execute callback when class name or style is changed.

For example, if .tabeltList changes name, then the callback will be triggered.

Here is the attributes list at w3schools.

4. Options - `characterData`

  <ul class='myList'>
    <li>LCD writing board</li>
    <li>Paper</li>
    <li>
       Tablet
       <ul class='tabletList'>
          <li>IPAD</li>
          <li>Samsung Galaxy Tab </li>
       </ul>
    </li>
  </ul>

observer.observe(myListObserver, {childList: true, subtree: false, characterData: true});

It will execute callback if I change Paper text.

observer.observe(myListObserver, {subtree: true, childList: false, characterData: true});

It will execute callback if I change IPAD text.

5. Options - `attributeOldValue`, `characterDataOldValue`

Set to true to record previous value so callback can use.
Note:attributes will be automatically set to true if attributeOldValue is true. characterData and characterDataOldValue are as same as the attribute ones.

Callback

We can loop every element in mutations

const observer = new MutationObserver(function(mutations) {
    for (let mutation of mutations) {
     case 'childList':
        break;
     case 'attributes':
        console.log(mutation.oldValue) //if attributeOldValue == true
        break;
     case: 'characterData':
        console.log(mutation.oldValue) //if characterDataOldValue == true
        break;
    }
});

Using the disconnect() method

observer.disconnect();

Stop to watch for mutations.
If we don't use disconnect(), then the watching will never stop, and might cause some memory problems.

CSS nth-child trick: get the first/last half of elements

Rae Liu — Sat, 04 Jul 2020 22:09:29 +0000

nth-child is a common way to style a specific element. For example 2n+1 is for all odd elements, and 2n is for all even ones.

But how to choose the first/last half of elements without any JavaScript? One of my projects had this wired situation, and I prefer to not use any JavaScript codes.

Negative child range and nth-last-child

:nth-child(n+2) means all elements without the first one.
:nth-child(-n+2) means all elements without the last and the second ones.
nth-last-child(n+2) will select elements from the second last one to the first one.
nth-last-child(-n+2) will select elements from the second last one to the last one.

Last half of elements

According the example image, let's assume there are 4 elements -

half or more elements



:nth-child(n+2):nth-last-child(-n+2)

half or less elements



nth-child(n+3):nth-last-child(-n+2)

last half or more elements, top to 12



first-child:last-child,

nth-child(n+2):nth-last-child(-n+2),

nth-child(n+3):nth-last-child(-n+3),

nth-child(n+4):nth-last-child(-n+4),

nth-child(n+5):nth-last-child(-n+5),

nth-child(n+6):nth-last-child(-n+6)

Converts it to SCSS

What if there are 100 elements? You have to write 50 lines in CSS...
But we can make a @mixin, then add a max number.



@mixin last-half-of-nth($maxNumber){

  &:first-child:last-child{

      color: white;

      background: darkblue;

  }

    @for $n from 2 through $maxNumber{

        &:nth-child(n+#{$n}):nth-last-child(-n+#{$n}){

            color: white;

            background: darkblue;

        }

    }

}

last half or more, top to 100



@include last-half-of-nth(50);

Limitation

You have to know the max number of the elements, otherwise it won't work. But this trick is still good for pure CSS without any JavaScript codes.

Preferences

https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child

Change Java_Home Path and restart Solr

Rae Liu — Mon, 15 Jun 2020 16:41:13 +0000

It happens quite often in Windows - when JAVA has been updated, but it doesn't update Java_Home path. It crushed my Solr everytime...

Go to edit the system environment variables => Environment Variables.

Note: my edit button was grayed out when I directly went to Environment Variables

Change the Java_Home Path to a create one.
Restart computer
Check https://localhost:8985/solr. It should work now.

Pass parameter to setTimeout inside a loop - JavaScript closure inside a loop

Rae Liu — Wed, 04 Dec 2019 00:30:06 +0000

What will be the output of this script?

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i + '- element: ' + arr[i]);
  }, 100);
}

//desired output
//1- element: 10
//1- element: 12
//1- element: 15
//1- element: 21

//actual output
//4 - element: undified
//4 - element: undified
//4 - element: undified
//4 - element: undified

There are two reasons why it doesn't work as expected -

JavaScript is a synchronous programming language
Each loop is sharing the same i variable that is outside the function

All loops are running simultaneously and the i keeps increasing until it hits arr.length - 1.

To fix the issue, we need to change i from a global variable to a local variable.

Solution 1 - use IIFE (Immediately Invoked Function Expression)

An IIFE is a JavaScript function that runs as soon as it is defined, and the variable within the expression can not be accessed from outside it(1).

for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }(), 100);
}

Note: Solution 1 will invoke function immediately regardless of time delay, which means the code above won't work on setTimeout.

You can still use IIFE in setTimeout, and here is the code below. Thanks JasperHorn!

for (var i = 0; i < arr.length; i++) {
  setTimeout(function (i) { return function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }}(i), 100);
}

Solution 2 - `for` can be replaced by `forEach` to avoid global `i`

i in forEach- The index of the current element being processed in the array(2).
Note: forEach is included in ES5

arr.forEach(function(element, i){
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + element);
  }, 100)
})

Solution 3 - change `var` to `let`

let allows to declare variables in a local scope, so each function can use its own i value.
Note: let is included in ES6

for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i + '- element: ' + arr[i]);
  }, 100);
}

References

CSS flexbox: how to use flex-shrink and flex-grow for responsive layout

Rae Liu — Sun, 24 Nov 2019 01:36:36 +0000

It took me a while to figure out flexbox, espcially flex-shrink and flex-grow.
Here is a cheat sheet that I made based on developing experience, and I hope it will help you.

Responsive for all elements

Clean and easy -

.parent{

  display: flex;
}

.child{
  flex: 1 1 PERCENTAGE;
}

All elements have fixed width

This can be used on carousel slideshow.

.parent{
  display: flex;
  flex-wrap: nowrap;
}
.fixed-elements{
  flex: 0 0 FIX_WIDTH;
}

Note
If you set code as flex: 1 1 FIX_WIDTH, and then expect fixed width elements...
It won't happen. flex-basis has lower priority than flex-grow and flex-shrink. Flexbox is going to try any possibilities to make responsive layout🤷‍♀️.

Fixed width on one element, others are still responsive

.parent{
  display: flex;
  flex-wrap: nowrap;
}
.fixed-element{
  flex: 0 0 FIX_WIDTH;
}
.other-elements{
  flex: 1 1 PERCENTAGE;
}

What does those numbers mean

Let's talk about what exact those numbers mean on flex-shrink and flex-grow.
They are all relative numbers, which means it will depend on their siblings.

flex-grow
0 - The element will give up the chance to grow if there is space available.
1 - The element will grow if there is space available.
2 or more - The element will look for other siblings flex-grow's value, and do the math.
for example, if div_1 ==1, div_2==2, then div_1 is 1/3 of the width, and div_2 is 2/3.

flex-shrink
0 - The element will give up the chance to shrink, and the content won't be wrapped either.
1 - The element will shrink if there is not enough space
2 or more - same as flex-grow, the element will sum up all siblings' flex-shrink value, and do the math.

Note
The default number in IE11 is 0 while other browsers are 1. So make sure to reset the number to 1 if your code needs to be shown on IE...

Examples

How to setup node.js application on Windows

Rae Liu — Sat, 16 Nov 2019 03:34:45 +0000

If you are a Mac user, then Homebrew is the best way to add packages.

But if you have a Windows machine, then there are two package managers that I recommend Chocolatey or Scoop.

Chocolatey (with LTS version)

Run Windows Powershell as administrator
Run command

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Reopen the Powershell
Install the LTS version

choco install nodejs-lts --version=VERSION_NUMBER

Reopen the Powershell, and run the command below to test

node -v

Scoop (with nvm)

Run Command Prompt or Windows Powershell as administrator
Run command

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

Reopen the powershell
Install nodejs package and nvm

scoop install nodejs nvm

install node version and use it

nvm install VERSION_NUMBER
nvm use VERSION_NUMBER

Repoen the Powershell, and test by using command

node -v

If you have an error to install Chocolatey or Scoop

Please check the execution policy on Powershell.

Chocolatey

Set-ExecutionPolicy AllSigned

Set-ExecutionPolicy Bypass -Scope Process

Scoop

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

How to fix elements shifting issue in bold on hover

Rae Liu — Thu, 26 Sep 2019 06:09:56 +0000

Using &:hover{ font-weight: bold } is a common sense to a FE developer. But the font shifts to right when we use bold. Sometimes it can cause line break or layout issue.

Here are two css-only solutions:

1 `text-shadow`

text-shadow: 0 0 1px black;
text-shadow: 0 0 1px black, 0 0 1px black; //bolder

value = The X-coordinate
value = The Y-coordinate
value = The blur radius
value = The color of the shadow

As an alternative solution for bold, the first and the second value can be set to 0.

Note
Safari doesn't support decimal number, which means it has to be 1px.
Firefox is very sensitive with blur radius, and 1px is too much

2 `text-stroke`

text-stroke: 1px black;
-webkit-text-stroke: 1px black; //Firefox and Edge

Note
IE doesn't support text-stoke

3 `Conclusion`

`text-stroke`

It seems to be a best solution without IE. Here is a best solution I can find to include IE.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) can detect IE hover.

@mixin m-hover-ie {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     @content;
  }
 a:hover{
        text-stroke: 1px black;
        -webkit-text-stroke: 1px black;
    }
     @include m-hover-ie{
       &:hover{
        text-shadow: 0 0 1px black; 
       }
    }
  }
}

`text-shadow`

If you really want to use text-shadow in IE...
-moz-touch-enabled can detect Firefox hover. But this is not a standard feature, and won't work for every user.
In my personal experience, it works on Firefox v60 and above.

@mixin m-hover-firefox {
    @media (-moz-touch-enabled: 0){
        @content;
    }
}
a:hover{
      text-shadow: 0 0 1px;
      @include m-hover-firefox{
        text-shadow: 0 0 .2px;
      }
}

DEV Community: Rae Liu

Regular Expressions cheat sheet

What is Regex

Online tool

Cheat Sheet

Key words from the cheat sheet

2D array peak - JS (reduce function)

1. How to compare

2. Loop

3. Recursive Function?

React Hooks - useState and useReducer cheat sheet - for developers who don't know Redux

Learn useState first

useState example (reactjs.org)

Compare to useReducer

useState example (reactjs.org)

Next, we are going to write the reducer function

How to fix - Ctrl + F doesn't work in Windows

oleacc.dll in C:\Windows\System32 may have corrupted.

If re-register doesn't work...

How to use MutationObserver.observe() instead of setTimeOut()

Why not to use setTimeOut?

What is MutationObserver

Basic Syntax - observer()

Options Object

1. Options - childList

2. Options - subtree

3. Options - attributes and attributeFilter

4. Options - characterData

5. Options - attributeOldValue, characterDataOldValue

Callback

Using the disconnect() method

CSS nth-child trick: get the first/last half of elements

Negative child range and nth-last-child

Last half of elements

half or more elements

half or less elements

last half or more elements, top to 12

Converts it to SCSS

last half or more, top to 100

Limitation

Preferences

Change Java_Home Path and restart Solr

Pass parameter to setTimeout inside a loop - JavaScript closure inside a loop

Solution 1 - use IIFE (Immediately Invoked Function Expression)

Solution 2 - for can be replaced by forEach to avoid global i

Solution 3 - change var to let

References

CSS flexbox: how to use flex-shrink and flex-grow for responsive layout

Responsive for all elements

All elements have fixed width

Fixed width on one element, others are still responsive

What does those numbers mean

Examples

How to setup node.js application on Windows

Chocolatey (with LTS version)

Scoop (with nvm)

If you have an error to install Chocolatey or Scoop

How to fix elements shifting issue in bold on hover

1 text-shadow

2 text-stroke

3 Conclusion

text-stroke

text-shadow

Learn `useState` first

`useState` example (reactjs.org)

Compare to `useReducer`

`useState` example (reactjs.org)

Why not to use `setTimeOut`?

What is `MutationObserver`

`Options` Object

1. Options - `childList`

2. Options - `subtree`

3. Options - `attributes` and `attributeFilter`

4. Options - `characterData`

5. Options - `attributeOldValue`, `characterDataOldValue`

Solution 2 - `for` can be replaced by `forEach` to avoid global `i`

Solution 3 - change `var` to `let`

1 `text-shadow`

2 `text-stroke`

3 `Conclusion`

`text-stroke`

`text-shadow`