
Renders an accordion menu with multiple collapsible content elements.

```css
.accordion-item.collapsed {
  display: none;
}

.accordion-item.expanded {
  display: block;
}

.accordion-button {
  display: block;
  width: 100%;
}
```

```js
const AccordionItem = ({ label, isCollapsed, handleClick, children }) => {
  return (
    <>
      <button className="accordion-button" onClick={handleClick}>
        {label}
      </button>
      <div
        className={`accordion-item ${isCollapsed ? 'collapsed' : 'expanded'}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

const Accordion = ({ defaultIndex, onItemClick, children }) => {
  const [bindIndex, setBindIndex] = React.useState(defaultIndex);

  const changeItem = itemIndex => {
    if (typeof onItemClick === 'function') onItemClick(itemIndex);
    if (itemIndex !== bindIndex) setBindIndex(itemIndex);
  };
  const items = children.filter(item => item.type.name === 'AccordionItem');

  return (
    <>
      {items.map(({ props }) => (
        <AccordionItem
          isCollapsed={bindIndex !== props.index}
          label={props.label}
          handleClick={() => changeItem(props.index)}
          children={props.children}
        />
      ))}
    </>
  );
};

ReactDOM.render(
  <Accordion defaultIndex="1" onItemClick={console.log}>
    <AccordionItem label="A" index="1">
      Lorem ipsum
    </AccordionItem>
    <AccordionItem label="B" index="2">
      Dolor sit amet
    </AccordionItem>
  </Accordion>,
  document.getElementById('root')
);
```

Renders an accordion menu with multiple collapsible content elements.

React Accordion


Calculates the date of `n` days from the given date, returning its string representation.

Use `new Date()` to create a date object from the first argument.
Use `Date.prototype.getDate()` and `Date.prototype.setDate()` to add `n` days to the given date.
Use `Date.prototype.toISOString()` to return a string in `yyyy-mm-dd` format.

```js
const addDaysToDate = (date, n) => {
  d = new Date(date);
  d.setDate(d.getDate() + n);
  return d.toISOString().split('T')[0];
};
```

```js
addDaysToDate('2020-10-15', 10); // '2020-10-25'
addDaysToDate('2020-10-15', -10); // '2020-10-05'
```


Calculates the date of `n` days from the given date.

Add Days To Date


Calculates the date after adding the ginen number of business days.

Use `Array.from()` to construct an array with `length` equal to the `count` of business days to be added.
Use `Array.prototype.reduce()` to iterate over the array, starting from `startDate` and incrementing, using `Date.prototype.getDate()` and `Date.prototype.setDate()`.
If the current `date` is on a weekend, update it again by adding either one day or two days to make it a weekday.

```js
const addWeekDays = (startDate, count) =>
  Array.from({ length: count }).reduce(date => {
    date = new Date(date.setDate(date.getDate() + 1));
    if (date.getDay() % 6 === 0)
      date = new Date(date.setDate(date.getDate() + (date.getDay() / 6 + 1)));
    return date;
  }, startDate);
```

```js
addWeekDays(new Date('Oct 09, 2020'), 5); // 'Oct 16, 2020'
addWeekDays(new Date('Oct 12, 2020'), 5); // 'Oct 19, 2020'
```


Calculates the date after adding the ginen number of business days.

Add Weeks To Days


Modify the behavior of file uploads and handle SVG files.

Add this code snippet in your functions.php:

```php
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );
```


Modify the behavior of file uploads and handle SVG files.

WP | Allow SVG through WordPress Uploader


Checks if all elements in an array are equal.

Use `Array.prototype.every()` to check if all the elements of the array are the same as the first one.
Elements in the array are compared using the strict comparison operator, which does not account for `NaN` self-inequality.

```js
const allEqual = arr => arr.every(val => val === arr[0]);
```

```js
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
```


Checks if all elements in an array are equal.

Are elements equal?


Fetch data asynchronously in a Vue component using the async and await keywords.

```html
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
```

```js
<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  async created() {
    this.items = await fetchData();
  },
};

async function fetchData() {
  // Perform asynchronous data fetching
  // Return the fetched data
}
</script>
```


Fetch data asynchronously in a Vue component using the async and await keywords.

Async fetch


Box shadow text.

```css
.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
```

Box Shadow


Capitalizes the first letter of a string.

Use array destructuring and `String.prototype.toUpperCase()` to capitalize the first letter of the string.
Use `Array.prototype.join('')` to combine the capitalized `first` with the `...rest` of the characters.
Omit the `lowerRest` argument to keep the rest of the string intact, or set it to `true` to convert to lowercase.

```js
const capitalize = ([first, ...rest], lowerRest = false) =>
  first.toUpperCase() +
  (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
```

```js
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'
```


Capitalizes the first letter of a string.

Capitalize First Letter

Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are.

```css
 @mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

```css
.parent {
  position: relative;
}
.child {
  @include centerer;
}
```

Centering Mixin


If there is an 'nvm not found error', just follow this instructions.

```bash
➜  ~ nvm --version
zsh: command not found: nvm
```

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

To open the bash file in vscode use:

```bash
code ~/.bashrc

```

To open the zsh file in vscode use:


```bash
code ~/.zshrc
```

If there is an 'nvm not found error', just follow this instructions.

Changing Node version if 'nvm not found'


Change Wordpress Logo.

```php
function custom_login_logo() {
	echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/images/logo-login.gif) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');
```


WP | Change Logo


Allow submit only when checkboxes are checked. Also add onclick event on HTML element: onclick=check()


```js
function check(element) {
  var checkbox1 = document.getElementById("id1");
  var checkbox2 = document.getElementById("id2");
  var submitButton = document.getElementById("submitForm");

  if (checkbox1.checked == true && checkbox2.checked == true) {
    submitButton.disabled = false;
 
  } else {
    submitButton.disabled = true;
  }
}
```


Enable or disable a submit button based on the state of multiple checkboxes

Allow submit only checked checkboxes

Remove untracked files:

```bash
git clean
```


Clean


Detect click outside of element and remove it (display: none):

```js
function hideOnClickOutside(element) {
  const outsideClickListener = (event) => {
    if (!element.contains(event.target) && isVisible(element)) {
      console.log("Element clicked!");
      removeClickListener();
    } else {
      console.log("Element not clicked!");
    }
  };

  const removeClickListener = () => {
    document.removeEventListener("click", outsideClickListener);
  };

  document.addEventListener("click", outsideClickListener);
}

const isVisible = (elem) =>
  !!elem &&
  !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
```


Detect click outside of element and remove it.

Click outside of element


Renders a component with collapsible content.

```css
.collapse-button {
  display: block;
  width: 100%;
}

.collapse-content.collapsed {
  display: none;
}

.collapsed-content.expanded {
  display: block;
}

```

```js
const Collapse = ({ collapsed, children }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);

  return (
    <>
      <button
        className="collapse-button"
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? 'Show' : 'Hide'} content
      </button>
      <div
        className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};
//
ReactDOM.render(
  <Collapse>
    <h1>This is a collapse</h1>
    <p>Hello world!</p>
  </Collapse>,
  document.getElementById('root')
);

```

Renders a component with collapsible content.

Collapse

Alter time, you can specify the commit date, in case you need to fill a gap or two in your commit streaks.

```bash
GIT_AUTHOR_DATE='Fri Jul 26 19:32:10 2013 -0400' GIT_COMMITTER_DATE='Fri Jul 26 19:32:10 2013 -0400' git commit

```


Alter time, you can specify the commit date.

Commit Date


Usage of React's Context API to share data between components without explicit prop passing.

```javascript
const MyContext = React.createContext();

const ParentComponent = () => {
  return (
    <MyContext.Provider value="Hello, Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {(value) => <div>{value}</div>}
    </MyContext.Consumer>
  );
};

```


Usage of React's Context API to share data between components without explicit prop passing.

Context Provider and Consumer

Creating new branch from master branch.

```bash
git checkout -b "branch name"
git add .
git commit -m "description"
git push #it will push to a new branch
```

Create new branch from master


A custom Document is commonly used to augment your application's `<html>` and `<body>` tags. This is necessary because Next.js pages skip the definition of the surrounding document's markup.

To override the default Document, create the file `./pages/_document.js` and extend the Document class as shown below:

```js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

```

A custom Document used to augment your application.

Custom Nextjs Document

Create a custom hook to share logic between components.

```javascript
import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // Perform side effects or subscriptions
    return () => {
      // Clean up side effects or subscriptions
    };
  }, []);

  return [value, setValue];
};

const MyComponent = () => {
  const [value, setValue] = useCustomHook('');

  return (
    <input value={value} onChange={(e) => setValue(e.target.value)} />
  );
};

```

Create a custom hook to share logic between components.

Custom Hook


Resets the current branch to the commit two steps before the current HEAD.

```bash
git reset --hard HEAD~2
```


Resets the current branch to the commit two steps before the current HEAD.

Undo


Disable Admin Bar.

```php

// Remove the admin bar from the front end
add_filter( 'show_admin_bar', '__return_false' );

```


WP | Disable Admin Bar


Ignore .DS_Store file in all repositories.

```bash
git rm --cached .DS_Store
echo .DS_Store >> ~/.gitignore_global
git config --global core.excludesfile ~/.gitignore_global
```

Ignore .DS_Store file in all repositories.

Ignore .DS_Store in all repositories


ACF - Retrieving a field as a variable.

```php
<?php

$variable = get_field('field_name');

// do something with $variable

?>
```


WP | ACF - Retrieving a field as a variable


To get the first image from the post, add this to functions.php:

```php
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}
```

Then use it.


```php
if ( get_the_post_thumbnail($post_id) != '' ) {

  echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
   the_post_thumbnail();
  echo '</a>';

} else {

 echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
 echo '<img src="';
 echo catch_that_image();
 echo '" alt="" />';
 echo '</a>';

}
```


WP | Get the first image from the post


Shadow along the top edge of the website.

```css

body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}
  
```

Shadow along the top edge of the website.

Add Shadow at the Website Top


Console log element that has focus.

```js
document.addEventListener('focusin', function() {
  console.log('focused: ', document.activeElement)
}, true);
```


Log element that has focus

GitHub uses this method on their site, applying system fonts on the body element.

```css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} 
```

GitHub uses this method on their site, applying system fonts on the body element.

System Fonts at Github


Just a example of a form.

```html
<form id="myForm" action="#" method="post">

  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice" id="radio-choice-1" tabindex="2" value="choice-1">

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice" id="radio-choice-2" tabindex="3" value="choice-2">
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
	
  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>
	
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox">
  </div>

  <div>
    <input type="submit" value="Submit">
  </div>

</form>
```

Form Example

Clone repo in you local directory:

```bash
git clone <https://name-of-the-repository-link>
```


Git Clone


Configure an individual repo to use a specific user / email address which overrides the global configuration. From the root of the repo, run:

```bash

git config user.name "Your Name Here"
git config user.email your@email.com

```

Or globally:

```bash

git config --global user.name "Your Name Here"
git config --global user.email your@email.com

```


Configure an individual repo to use a specific user.

Change email and username

Gradient text effect.

```css
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

Gradient Text


Determines if the current runtime environment is Node.js.


```js
const isNode = () =>
  typeof process !== 'undefined' &&
  process.versions !== null &&
  process.versions.node !== null;

isNode(); // true (Node)
isNode(); // false (browser)
```


Determines if the current runtime environment is Node.js.

Is Node?


Use .map() to convert lists of data (arrays) into lists of elements:


```js
const people = ["John", "Bob", "Fred"];
const peopleList = people.map(person => <p>{person}</p>);

```

```js
function App() {
  const people = ['John', 'Bob', 'Fred'];
  // can interpolate returned list of elements in {}
  return (
    <ul>
      {/* we're passing each array element as props */}
      {people.map(person => <Person name={person} />}
    </ul>
  );
}
//
function Person({ name }) {
  // gets 'name' prop using object destructuring
  return <p>this person's name is: {name}</p>;
}

```

Use .map() to convert lists of data (arrays) into lists of elements.

Lists and Keys


Anchor link email

Without subject:

```html
<a href="mailto:someone@yoursite.com">Email Us</a>  

```

With subject:

```html
<a href="mailto:someone@yoursite.com?subject=Mail from Our Site">Email Us</a>  

```

Mail To Link


Place this code snippet in your functions.php file to reject all malicious URL requests.

```php
global $user_ID; if($user_ID) {
    if(!current_user_can('administrator')) {
        if (strlen($_SERVER['REQUEST_URI']) > 255 ||
            stripos($_SERVER['REQUEST_URI'], "eval(") ||
            stripos($_SERVER['REQUEST_URI'], "CONCAT") ||
            stripos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
            stripos($_SERVER['REQUEST_URI'], "base64")) {
                @header("HTTP/1.1 414 Request-URI Too Long");
                @header("Status: 414 Request-URI Too Long");
                @header("Connection: Close");
                @exit;
        }
    }
}
```


WP | Reject malicious URL requests

Open Link in a New Window.

```html
<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

```

New Window


If there is an 'nvm not found error' whenever new terminal is opened, just follow this instructions.

```bash
➜  ~ nvm --version
zsh: command not found: nvm
```

Than load .bash_profile

```bash
code ~/.bash_profile
```

Than write this code inside:

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
```

If there is an 'nvm not found error' whenever new terminal is opened, just follow this instructions.

If nvm doesn't load every in terminal

Open link in a new tab.

```html
<a href="https://snippetbase.net" target="_blank" rel="noreferrer">The key is the blank!</a> 
```


Open a new tab


Put post thumbnails into rss feed.

```php


function wpfme_feed_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'wpfme_feed_post_thumbnail');
add_filter('the_content_feed', 'wpfme_feed_post_thumbnail');

```


WP | Add post thumbnails into rss feed


Remove empty paragraphs space (jQuery):

```js
$('p').each(function() {
     var $p = $(this);
     if($.trim($p.html())==='') {
        $p.remove();
     }
});
```

Remove empty paragraphs

Delete a branch:

```bash
git branch -D the_local_branch
git push origin :the_remote_branch
```


Delete a branch


Scroll into view. Add also href="scroll" on anchor link and on HTML element id="scroll" 🎉

```js
document.querySelectorAll('a[href^="#"]').forEach((elem) => {
  elem.addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(elem.getAttribute("href")).scrollIntoView({
      behavior: "smooth",
      offsetTop: 20,
    });
  });
});
```


Scroll into view

Set type vertically.

```css
.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

  
```

Set Text Vertically

Show changes between HEAD and working directory:

```bash
git diff

```


Show changes between HEAD and working directory.

Show Changes


Showcase popular posts

```php
function count_post_visits() {
    if( is_single() ) {
        global $post;
        $views = get_post_meta( $post->ID, 'my_post_viewed', true );
        if( $views == '' ) {
            update_post_meta( $post->ID, 'my_post_viewed', '1' );   
        } else {
            $views_no = intval( $views );
            update_post_meta( $post->ID, 'my_post_viewed', ++$views_no );
        }
    }
}
add_action( 'wp_head', 'count_post_visits' );
```

```php
$popular_posts_args = array(
    'posts_per_page' => 3,
    'meta_key' => 'my_post_viewed',
    'orderby' => 'meta_value_num',
    'order'=> 'DESC'
);
$popular_posts_loop = new WP_Query( $popular_posts_args );
  while( $popular_posts_loop->have_posts() ):
    $popular_posts_loop->the_post();
    // Loop continues
endwhile;
wp_reset_query();
```

WP | Show Popular Posts Without Plugins

Just a example of a common navigation.

```html
<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>
```

Standard Navigation

Check the status of working directory and staging area:

```bash
git status
```


Check the status of working directory and staging area.

Status

Renders a tree view of a JSON object or array with collapsible content.

```css
.tree-element {
  margin: 0 0 0 4px;
  position: relative;
}

.tree-element.is-child {
  margin-left: 16px;
}

div.tree-element:before {
  content: '';
  position: absolute;
  top: 24px;
  left: 1px;
  height: calc(100% - 48px);
  border-left: 1px solid gray;
}

p.tree-element {
  margin-left: 16px;
}

.toggler {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid gray;
  cursor: pointer;
}

.toggler.closed {
  transform: rotate(90deg);
}

.collapsed {
  display: none;
}

```

```js
const TreeView = ({
  data,
  toggled = true,
  name = null,
  isLast = true,
  isChildElement = false,
  isParentToggled = true
}) => {
  const [isToggled, setIsToggled] = React.useState(toggled);
  const isDataArray = Array.isArray(data);

  return (
    <div
      className={`tree-element ${isParentToggled && 'collapsed'} ${
        isChildElement && 'is-child'
      }`}
    >
      <span
        className={isToggled ? 'toggler' : 'toggler closed'}
        onClick={() => setIsToggled(!isToggled)}
      />
      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
      {isDataArray ? '[' : '{'}
      {!isToggled && '...'}
      {Object.keys(data).map((v, i, a) =>
        typeof data[v] === 'object' ? (
          <TreeView
            key={`${name}-${v}-${i}`}
            data={data[v]}
            isLast={i === a.length - 1}
            name={isDataArray ? null : v}
            isChildElement
            isParentToggled={isParentToggled && isToggled}
          />
        ) : (
          <p
            key={`${name}-${v}-${i}`}
            className={isToggled ? 'tree-element' : 'tree-element collapsed'}
          >
            {isDataArray ? '' : <strong>{v}: </strong>}
            {data[v]}
            {i === a.length - 1 ? '' : ','}
          </p>
        )
      )}
      {isDataArray ? ']' : '}'}
      {!isLast ? ',' : ''}
    </div>
  );
};
//
const data = {
  lorem: {
    ipsum: 'dolor sit',
    amet: {
      consectetur: 'adipiscing',
      elit: [
        'duis',
        'vitae',
        {
          semper: 'orci'
        },
        {
          est: 'sed ornare'
        },
        'etiam',
        ['laoreet', 'tincidunt'],
        ['vestibulum', 'ante']
      ]
    },
    ipsum: 'primis'
  }
};
ReactDOM.render(
  <TreeView data={data} name="data" />,
  document.getElementById('root')
);
```

Renders a tree view of a JSON object or array with collapsible content.

TreeView

Remove duplicates.

```js

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

// Method 1: Using a Set
const unique = [...new Set(array)];

// Method 2: Array.prototype.reduce
const unique = array.reduce((result, element) => {
  return result.includes(element) ? result : [...result, element];
}, []);

// Method 3: Array.prototype.filter
const unique = array.filter((element, index) => {
  return array.indexOf(element) === index;
});

```

Remove Duplicate from an Array


Just one way to add Typewriter effect.

```css
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
```


```html
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>
```

Typewriter Effect

Undo last commit:

```bash
git reset --hard HEAD~1
```


Undo last commit

Un-track files that have just been declared in .gitignore:

```bash
git rm -r --cached .
git add .
git commit -am "Remove ignored files"

```


Un-track files that have just been declared in .gitignore.

Untrack in .gitignore

Create a custom hook that takes a url and options.
Use the useState() hook to initialize the response and error state variables.
Use the useEffect() hook to anychronously call fetch() and update the state variables accordingly.
Return an object containting the response and error state variables.

```js
const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);

  return { response, error };
};
//
const ImageFetch = props => {
  const res = useFetch('https://dog.ceo/api/breeds/image/random', {});
  if (!res.response) {
    return <div>Loading...</div>;
  }
  const imageUrl = res.response.message;
  return (
    <div>
      <img src={imageUrl} alt="avatar" width={400} height="auto" />
    </div>
  );
};

ReactDOM.render(<ImageFetch />, document.getElementById('root'));

```

Create a custom hook that takes a url and options.

useFetch


ACF - Using conditional statements.

```php
<?php

if(get_field('field_name'))
{
	echo '<p>' . get_field('field_name') . '</p>';
}

?>
```


WP | ACF - Using conditional statements


ACF - Display field.

```php
<p><?php the_field('field_name'); ?></p>
```


WP | ACF Display field


ACF - Query posts with ACF values.

```php
<?php

$posts = get_posts(array(
	'numberposts' => -1,
	'post_type' => 'event',
	'meta_key' => 'location',
	'meta_value' => 'melbourne'
));

if($posts)
{
	echo '<ul>';

	foreach($posts as $post)
	{
		echo '<li><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></li>';
	}

	echo '</ul>';
}

?>
```


WP | ACF - Query posts with ACF values


ACF - Working with Array values.

```php
<?php

$values = get_field('field_name');
if($values)
{
	echo '<ul>';

	foreach($values as $value)
	{
		echo '<li>' . $value . '</li>';
	}

	echo '</ul>';
}

// always good to see exactly what you are working with
var_dump($values);

?>
```


WP | ACF - Working with Array values


ACF - Working with Images – URL.

```php
<img src="<?php the_field('image_test'); ?>" alt="" />

```


WP | ACF - Working with Images – URL


ACF - Working with the Repeater Field.

```php
<?php if( have_rows('repeater_field_name') ): ?>
 
    <ul>
 
    <?php while( have_rows('repeater_field_name') ): the_row(); ?>
 
        <li>sub_field_1 = <?php the_sub_field('sub_field_1'); ?>, sub_field_2 = <?php the_sub_field('sub_field_2'); ?>, etc</li>
        
        <?php 
        
        $sub_field_3 = get_sub_field('sub_field_3'); 
        
        // do something with $sub_field_3
        
        ?>
        
    <?php endwhile; ?>
 
    </ul>
 
<?php endif; ?>
```
