Today I Learned

Sometimes you may need to add a little bit of javascript inside a Laravel Blade template. The proper way to do that is to use Laravel's @stack directive:

First, you need to add a @stack on the parent page or the layout:

<script src="{{ asset('js/app.js') }}"></script>
@stack('other-scripts')

Then you need to @push the respective script on the page you need it on.

@push('other-scripts')
<script>
  console.log('do something in js')
</script>
@endpush

The problem:

<?php if ( have_rows( 'repeater_field' ) ) while ( have_rows( 'repeater_field' ) ) : the_row(); ?>
    <?php
        $name = get_sub_field( 'name' );
        $age = get_sub_field( 'age' );
    ?>
	
    <p><?php echo $name; ?></p>
    <p><?php echo $age; ?></p>
<?php endwhile; ?>

This only gets you the normal, ascending order for those repeater rows. But what if you need to reverse the order of those rows, making first the last and vice-versa?

The Advanced Custom Fields documentation gives an example, but that didn't work at the time of this writing. They instruct you to use the get_field() function for the main repeater field, but for some reason that returns null on a repeater field.

What I've found to work was to use the get_sub_field() to get the field and the krsort() php method which sorts an array by key in descending order.

<?php
    $repeater = get_sub_field('repeater_field');
    krsort($repeater);
?>
<?php foreach ($repeater as $row): ?>
    <p><?php echo $row['name']; ?></p>
    <p><?php echo $row['age']; ?></p>
<?php endforeach; ?>

One thing to note is that with this method you need to change the way you access those variables.

The filter: blur() property in css may come in handy in some situations, but you should know of a side effect it has in Safari (tested on version 15.1 as of this writing).

The issue is a nasty performance drop around the element on which the filter is used, making every other interaction extremely slow. And it happens in Safari only. In other browsers everything works well.

One solution I've found so far is to use transform: translate3d(0, 0, 0) along with filter on the same element, to force the browser use GPU acceleration for that particular element instead of the CPU.

filter: blur(200px);
transform: translate3d(0, 0, 0);

Here are 2 ways to measure the performance of a function in javascript:

console.time('function');
function();
console.timeEnd('function');

or:

const startTime = performance.now();
function();
const endTime = performance.now();
console.log(`Function took ${endTime - startTime} milliseconds`);

The default src attribute acts as fallback for a default image size for browsers that have no support for srcset:

<img src="/images/image.jpg">

The srcset attribute gives the browser a bunch of different sizes of the same image to choose from.

The name of the image doesn't matter, you could name them image-small, image-medium and so on, but the 375w part should match the real width of the image:

<img
    src="/images/image.jpg"
    srcset="/images/image-375.jpg 375w,
            /images/image-768.jpg 768w,
            /images/image-1440.jpg 1440w,
            /images/image-1920.jpg 1920w,
            /images/image-2560.jpg 2560w"
>

Adding the sizes attribute specifies what image size to choose at a specific breakpoint and above (min-width) or below (max-width) it:

<img
    src="/images/image.jpg"
    srcset="/images/image-375.jpg 375w,
            /images/image-768.jpg 768w,
            /images/image-1440.jpg 1440w,
            /images/image-1920.jpg 1920w,
            /images/image-2560.jpg 2560w"
    sizes="(min-width: 1920px) 1400px, (min-width: 1600px) 1000px, (min-width: 768px) 700px, 300px"
>

One thing to note here is that the browser will first calculate the device width and then look at the sizes attribute and choose the first matching condition.

If you set for example sizes="(max-width: 1920px) 1500px, (max-width: 768px) 600px, 300px", and the device width is 640px, the first matching condition will be max-width: 1920px, therefore it will choose the 1500px image width suggestion, rather than the 600 you most probably expected. The same can happen with the min-width if the order is not right.

Notice also that we are asking the browser to choose a 1000px wide image between 1600px and 1919px, but in the srcset sources, there's no image at 1000px. Here, the browser will choose the image with the exact size, if there is one, or the closest one if not, but higher in size than specified, in this case, 1000px. Therefore, the 1440px will be selected.

It can take a while to grasp how this works, but it's worth taking the time to understand it.

When someone deletes a git tag on a remote and creates a new one with the same name, you might get a similar error like the one below while trying to do a git command, a git fetch for example.

![rejected]           2.10.14    -> 2.10.14 (would clobber existing tag)

The solution is to update your local tags with the new remote tags. This is how:

git fetch --tags -f

If you ever need to check what php version do composer packages and their dependencies require, there's a special command just for that.

composer check-platform-reqs

The output should look something like below. Maybe without the failed steps.

ext-dom        20031129                                                success  
ext-fileinfo    7.3.19                                                  success  
ext-filter      7.3.19                                                  success  
ext-json       1.7.0                                                   success  
ext-libxml     7.3.19                                                  success  
ext-mbstring   7.3.19                                                  success  
ext-openssl    7.3.19                                                  success  
ext-pcre       7.3.19                                                  success  
ext-Phar       7.3.19                                                  success  
ext-SimpleXML  7.3.19                                                  success  
ext-tokenizer  7.3.19                                                  success  
ext-xml        7.3.19                                                  success  
ext-xmlwriter  7.3.19                                                  success  
lib-pcre       10.32                                                   success  
php            7.3.19    league/commonmark requires php (^7.4 || ^8.0) failed   
php            7.3.19    league/config requires php (^7.4 || ^8.0)      failed   

This is useful when your app fails due to unfulfilled dependency requirements.

Sometimes you need to make use of the ref attribute to access a child component in VueJs, like so:

<input ref="someRefName"></input>

this.$refs.someRefName

But what if you need to do the same thing for an html element that's still inside your app but outside of your VueJs template or component? Maybe you've tried it and this.$refs.someRefName comes in undefined.

That's when the $root instance comes in handy. Just add the ref attribute on the target element and access it in your VueJs component like this:

this.$root.$refs.someRefName

That makes VueJs look for that reference in the root instance of your app, and not only inside your component.

Just make sure you don't overuse it. Most of the times, there's a better way to do what you need to do.

At some point you might end up with a challenge like this. You've got several items (we'll take an example of 3) laid out with flexbox.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

The items have fixed width and they all fit on one row, but you want the third to jump on the second row.

Like this:

====item====item====
========item========

So how do you make them stack 2 on the first row, and the third on the second row, centered to the middle?

If you try flex-wrap: wrap, depending on the device resolution, it might do the trick or not. If all 3 fit on the same row, they won't wrap.

The solution is to force them by adding a collapsed row (height 0) which takes up the entire width of the container, making it occupy an entire row, thus pushing the 3rd item on the next row. Think of it like a <br> tag.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="break"></div>
  <div class="item"></div>
</div>

.break {
  flex-basis: 100%;
  height: 0;
}

Neat trick, right?

And it can be adapted to other situations as well, not necessarily flexbox.

Let's say you have a simple component in NuxtJS and VueJS, a static image for a blog post.

<template>
  <article class="post__image">
    <img class="image" src="~/assets/images/imageName.jpg" alt="post picture">
  </article>
</template>

Simple enough, right? But you don't want to have the same image for every blog post, so maybe you're trying to add it dynamically, getting the image name through a prop and using Vue's v-bind directive, like so:

<template>
  <article class="post__image">
    <img class="image" :src="`~/assets/images/${imageName}.jpg`" :alt="`${imageName} picture`">
  </article>
</template>

<script>
export default {
  name: 'PostImage',
  props: {
    imageName: String
  },
}
</script>

And then you notice that that doesn't work. But why? The vue syntax is correct, so what's the problem? Well, there's something else at play here.

Behind the scenes, webpack replaces the image path with a module request at build time. That's fine for static images, because their paths are known at build time, but for dynamic images it's a different story, as webpack can't know what their paths will evaluate to at run time, so that won't work.

The solution is to make a module request for the images, so that webpack can work its magic on them before loading them on the page. That's done by using require(...), with the correct image path.

So your images will have to be loaded like this:

<img 
    class="image" 
    :src="require(`~/assets/images/${this.imageName}.jpg`)" 
    :alt="`${imageName} picture`"
>

You could also clean that up a bit, and extract the require part into a computed property, for better readability:

<template>
  <article class="post__image">
    <img class="image" :src="imageSource" :alt="`${imageName} picture`">
  </article>
</template>

<script>
export default {
  name: 'PostWithImage',
  props: {
    imageName: String
  },
  computed: {
    imageSource() {
      return require(`~/assets/images/${this.imageName}.jpg`)
    },
  }
}
</script>

Ever wondered how you can loop through a list of VueJS components?

Let's say you have an array of components and you want to render them dynamically:

data() {
    return {
        components: ['ComponentOne', 'ComponentTwo', 'ComponentThree']       
    }
}

It's simple. We just need to use vue's dynamic component.

###Let's see how:

<ul>
    <li v-for="component, index in components" :key="index">
        <component :is="component"></component>
    </li>
</ul>

Just make sure to register all the used components where you need them.

For a long time I've been afraid of using the shell command chmod. That because I didn't understand how it works and I feared breaking things. Today though, I learned how easy it is actually. No, not to break things, but to use the chmod command.

A Unix system allows for multiple users with different access rights, which can be changed in the shell by using this command.

The permissions are for reading, writing and executing (rwx) and are expressed for all three types of users a file or folder has. It will come in the form of rwxrwxrwx where the first batch of three characters (rwx), belong to the owner, the second to the group, and the third to all the other users (owner/group/other).

Sure, (rwx rwx rwx) would mean that everybody has all the access rights to that particular file or folder. And we all know that's not a good idea. So, most often you'll see something like rw-r--r-- which means that only the owner has the right to read and write, while everybody else can only read that particular file.

Now onto chmod, which can be used with either a symbolic or a numeric notation for the access settings. You've probably seen somebody else type chmod 644 file_name on your computer, leaving you wondering about what that means.

That's the numeric notation.

If you think about the access rights as a series of bits, the whole thing would look like this:

rwx rwx rwx = 111 111 111
rw- r-- r-- = 110 100 100
rw- r-x --- = 110 101 000

That translates into

rwx rwx rwx = chmod 777
rw- r-- r-- = chmod 644
rw- r-x --- = chmod 650

because in binary notation:

100 = 4
101 = 5
110 = 6
111 = 7

And now you've got a simple rule on how to construct your chmod command depending on what permissions you need to set.

The rwxr--r-- access rights means chmod 744, rw-r----- is chmod 640, and so on.

Simple enough, right?

Sometimes, as a programmer, you might need to write something to a file on the local file system. And that can be a piece of cake, case in which you'll use your favorite text editor to do it manually, but other times, it needs to be something complex and dynamic and you want your JavaScript to do it for you.

Here's how:

We'll first require the fs module from Node.js into our JS file.

const fs = require('fs');

Then we'll grab our content:

const content = 'Hello World!';

And finally we'll use the writeFile function from the fs module to populate our file. We need to provide the name of our file, the data or content to populate it with, the options (optional - for encoding, modes or flags) and a callback (also optional - to show the error message should one arise).

fs.writeFile(filename, data, [options], [callback]);

Here I've given it the a+ flag - "Open file for reading and appending. The file is created if it does not exist.". The encoding defaults to 'utf8' if none is given.

fs.writeFile('file.txt', content, { flag: 'a+' }, (err) => {
  if (err) throw err;
});

No, this has nothing to do with those delicious Indian curry dishes you might be thinking about, but with a functional technique used in JavaScript.

It seems confusing at first, but currying is simple. If you've never heard of it before, it's because this concept isn't native to JS.

Basically, it allows you to transform a function like f(a, b, c) into something like f(a)(b)(c). What that means is that you can split up a function with multiple arguments into a sequence of functions with one argument each.

Let's take a basic example.

const newUser = function(name, age, skill) {
  return {
    name,
    age,
    skill
  }
}
	
newUser("John", 27, "JS")

Now to the curry part:

const newUser = function(name) {
  return function(age) {
    return function(skill) {
      return {
        name,
        age,
        skill
      }
    }
  }
}
	
newUser("John")(27)("JS")

Add in some arrow functions and voila:

const newUser = 
  name => 
    age => 
      skill =>
      {
        name,
        age,
        skill
      }

The purpose of all this you might ask?

Think about situations when you don't have the complete data available in the beginning and you still need your function to gradually pass through your app and receive its arguments step by step as more and more data is arriving, until you add the final argument and receive the output.

Used to mark specific commits on git and often used to mark product releases on Github, git tags are important. But sometimes, you just need to delete them.

Here's a simple way to do that:

• Delete all remote tags

git tag -l | xargs -n 1 git push --delete origin

• Delete local tags

git tag | xargs git tag -d

• Check if any tags are left

git tag