diceline-chartmagnifierquestion-marktwitter-whiteTwitter_Logo_Blue

Today I Learned

How to use DocumentFragment to render large lists faster

Using DocumentFragment does the trick because it isn't part of the active document tree structure.

This means it doesn't interact with the main document until mounted.

Hence, it doesn't impact the performance when changes occur to its contents.

// Setup
const outlet = document.getElementById('#myList');
const fragment = new DocumentFragment();
const results = fetchResults(); // returns Array<Result>

We then go through each result and prepare it properly:

results.map((result, index) => {
    const li = document.createElement('li');
    li.textContent = result;
    li.classList.add('result');
    // We append to the DocumentFragment
    fragment.appendChild(li);
 });

Finally, we append the end result to the list:

outlet.appendChild(fragment);

If we were to append each item to the list outlet within the map above, it would have triggered a repaint/reflow every time we performed the action.

How to disable WordPress parent menu link

Working with WordPress menus, I wanted a top-level navigation element to act as a trigger for a drop-down menu.

It took me some time to figure out how to make this navigation element not redirect anywhere, but it was so easy.

You need to take the following steps:

  1. Insert a custom link with any link address and label that you want.

  2. Click on the 'Edit Menu Item' and delete the link that you insert previously.

  3. Create the sub-menu with the wanted links.

  4. Save.

That's all, nothing more, nothing less.

How to create pagination for custom taxonomy in WordPress

To create a pagination for the custom taxonomy archive, you must enter the following snippet in the code:

function custom_tax_query_change( $query ) {
     if ( ! is_admin() && $query->is_tax( 'example_taxonomy_name' ) ) {
          $query->set( 'posts_per_page', 10 );
     }
}
add_action( 'pre_get_posts', 'custom_tax_query_change' );

The 'post_per_page' tell us how many posts we want to display per page. If you want more or less, you can change the value as you need.

How to dynamically display different types of cards based on a pattern

Let's say you have an array of cards inside which you want add more items.

Example: [card, card, card, itemOne, card, card, itemTwo, ...]

For this we will create another empty array that we will work with:

let posts = [];

const itemsTemplate = [itemOne, itemTwo];
let items = [itemOne, itemTwo];

for (let i = 0; i < cards.length; i++) {
  posts.push(cards[i]);

  if (i !== 0) {

    //next index is multiple of 3
    if ((i + 1) % 5 === 3) {
      if (items.length === 0) {
        items = itemsTemplate;
      }
      posts.push(items.pop());
    }

    //next index is multiple of 5
    if ((i + 1) % 5 === 0) {
      if (items.length === 0) {
        items = itemsTemplate;
      }
      posts.push(items.pop());
    }
  }
}

How to display all the categories for blog posts from WordPress

To display all the categories of posts in WordPress and the active category, you need to go through the following steps:

  1. Get the current category:
<?php $current_category = get_queried_object(); ?>
  1. Get all the categories:
<?php $categories = get_categories(); ?>
  1. Use a loop to iterate all the categories:
<?php foreach ($categories as $category):
    $category_link = get_category_link($category); ?>
 <a class="blog__category <?php echo $current_category->cat_name ===
 $category->cat_name
     ? "is-active"
     : ""; ?>" 
  href="<?php echo $category_link; ?>">
  <?php echo $category->name; ?>
  </a>
<?php endforeach; ?>

Now you can see all the categories that are used on your blog posts and the current selected category.

Use a hidden iframe to submit a form via Javascript for legacy applications

To prevent the page from being redirected or refreshed, we will create a javascript iframe inside which we will create the form:

methods: {
  hiddenIframe(fields) {
    let customHiddenIframeName = 'iframeId'
    if (!document.getElementById(customHiddenIframeName)) {
      let iFrame = document.createElement('iframe')
      iFrame.id = customHiddenIframeName
      iFrame.name = customHiddenIframeName
      iFrame.src = 'about:blank'
      iFrame.style.display = 'none'
      document.body.appendChild(iFrame)
     }

     let form = document.createElement('form')
     form.method = 'POST'
     form.action =
        'https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8'
     form.setAttribute('target', customHiddenIframeName)
      
     for (let fieldName in fields) {
       let input = document.createElement('input')
       input.name = fieldName
       input.value = fields[fieldName]
       input.id = fieldName
       input.setAttribute('type', 'hidden')
       form.appendChild(input)
     }

     document.body.appendChild(form)
     form.submit()
  }
},

created() {
  this.hiddenIframe({
    email: 'example@test.com',
    name: 'John Doe',
    subject: 'Form',
    description: 'Form description'
   })
}

How to create a social media share button

If you want to share your site on social media, you can create different types of buttons that can do this:

For Facebook:

<a href="https://m.facebook.com/sharer.php?u=yourwebsite.com" title="Share on Facebook" class="social__link" target="_blank" rel="external noopener">Share on Facebook</a>

For LinkedIn:

<a href="https://www.linkedin.com/shareArticle?mini=true&url=yourwebsite.com" title="Share on LinkedIn" class="social__link" target="_blank" rel="external noopener">Share on LinkedIn</a>

For Twitter:

<a href="https://twitter.com/share?url=yourwebsite.com" title="Share on Twitter" class="social__link" target="_blank" rel="external noopener">Share on Twitter</a>

Instagram currently doesn’t allow you to share a photo or video from another website – you can only upload photos/videos directly from your mobile device. Since there is no sharing mechanism, there is no way for us to include a button that will share your content to Instagram.