DEV Community: Alejandro Sierra

Find The commit that introduced a bug with git bisect

Alejandro Sierra — Fri, 27 Mar 2020 02:08:42 +0000

Picture yourself in this scenario

You’ve been working on a branch for the past 3 days. 30 commits later you are ready to complete your feature when all of a sudden. You realize that something is wrong with the footer of your application. As you panic, you look at your previous commits to see if anything has changed in the footer. In fact, the footer has not been touched and you have no idea what’s going on.

With git bisect you could save countless hours of trying to find the exact commit that introduced the bug, without having to go commit by commit.

git bisect will perform a binary search to help you find the exact commit you’re looking for. If you are unfamiliar with a binary search it basically means it will divide the options in half each time as you answer a simple question Does the commit that it is showing you have the bug or not.

How To use

Now, to start the process use git bisect start. After doing this nothing happens... What you then need to do is supply git with a commit that you know where the bug not present or a ‘good’ commit git bisect good ch4792h2 for example. Then enter the second commit which has a known instance of the app with the bug, in other words, a ‘bad commit’ such as git bisect bad ke37lw5

After doing this git will checkout a commit for you that you will then have to respond with git bisect good if the commit it's showing you does not have the bug or git bisect bad if it does. After answering, git will narrow the search by removing the other half of the commits, then asking you the same question. Eventually narrowing down to the commit that introduced the bug.

And that’s it! In about 4 to 5 commits you were able to find the commit that introduced the bug. Now, this might be more beneficial for checking for changes in the UI since you can clearly see when something in the app is not working like its supposed to. However, it is a nice command to remember from time to time if something ever comes up

Git Bisect Docs

Reusable components with scoped slots in vue

Alejandro Sierra — Sun, 03 Nov 2019 20:15:07 +0000

What are slots first of all?

If you are not familiar with slots in Vue I suggest looking at the slots documentation in short, slots in Vue are a way to pass markup into a component directly from the parent to child component

So, what’s a scoped slot?

Scoped slots allow us to take this one step further by allowing data in the child component to be used by the parent. In turn, allowing the content to be displayed differently

This can be helpful when creating a reusable component that shares functionality but needs different variations of UI.

Let's take a look at an example:

// photo-gallery component
<template>
<div>
    <h1>{{title}}</h1>
    <div class="photo-gallery">
        <slot v-bind:items="photos"></slot>
    </div>
</div>
</template>

imagine that this component is called photo-gallery its job is to retrieve data from a photos API and store it in a piece of local data called photos

// template for photo-gallery...
</template>

<script>
export default {
data () {
    return {
        photos: [  
            .....

we set up the outline by defining all the things we want any instances of photo-gallery to share. Such as having a title and a gallery container with custom styling.

When we use this component we have access to its photos using the items property that was defined in v-bind:items=“photos” basically saying “pass the photos as items “.

When you use this component now it looks like this

<photo-gallery>
    <template v-slot="props">
        <ul class="alt-gallery">
            <li class="alt-photo" v-for"item in props.items"></li>
        </ul>
    </template>
</photo-gallery>

We are given access to the photos by using v-slot=“items” then we loop over each photo or “item” and create a alt-photo list item.

Using this approach we can create multiple instances of the photo-gallery and can even make components for each instance like gallery-list and alt-gallery while passing the photos array into them like this

<photo-gallery>
    <template v-slot="props">
        <gallery-list
            :photos="props.items"
        />
    </template>
</photo-gallery>

Takeaways:
Using scoped slots, we delegate common functionality and markup to the scoped component. Then on each instance, we can change the way our data is represented visually.

Slots — Vue.js
cover image

Vue Event And Key Modifiers

Alejandro Sierra — Mon, 21 Oct 2019 13:30:35 +0000

What are they?

Event and Key modifiers allow you to add event functionality directly inline where you define your template. This can help you write cleaner and more accessible code to your site with minimum effort.

let's look at a quick example

<template>
  <div id="app">
      <a href="#" @click="anchorAction">Click for a free rtx 2080</a>
  </div>
</template>

Let's say you're using an anchor tag as a trigger for something on your page but you're not linking to another site or page. You know that clicking on it will instantly go to the top of the page so you need to preventDefault() behavior. Because of this, you add the usual event.preventDefault() to your anchorAction method in your <script>

methods: {
    anchorAction (event) {
        event.preventDefault()
        // other logic
    }

This is business as usual but in Vue you don't need to do this. You can just add this instead

  <a href="#" @click.prevent="anchorAction">Click for a free Rtx 2080</a>

That .prevent will add the code you just did in your anchorAction method

So this saves you the trouble of having to write event.preventDefault() in your component which might not be that big of a deal but let's look at another example of modifiers implemented in a modal.

<template>
  <div id="app">
    <div class="overlay" @click="closeModal">
        <section class="modal" @click.stop>
            modal content
        </section>
    </div>
  </div>
</template>

The @click="closeModal" line would close the modal however, we don't want to close it when we click inside of the modal so we stop propagation.
You do not even need to have a method attached to the click event to add the event. All that was added was just @click.stop and it saves you from having to write an entire method just to do this.

available modifiers

Vue has more but these are some common ones you might use

.stop

By default, clicking on an element will also click on its parent elements. using this will only click on itself and call any methods on the specific element

.prevent

prevents default behaviour in an event such as submitting a form on input click.

.capture

Will trigger any parent methods before the child or target elements method ( Capturing phase )

.once

Allows method in click to only happen once on that element ( Will reset after the element is destroyed )

Chaining modifiers

You also have the option to chain some of these events modifiers

@click.stop.prevent

will stop propagation and prevent default behaviour

key modifiers

@keydown.enter
@keyup.esc
@click.ctrl

This is where we can add these events to add extra functionality for accessibility to our sites.

For example, if you are creating a custom drop-down element that needs to have native functionality like the select element, We can add key events inline. This would remove the need for extra if statements checking for keyCodes in our logic.

<template>
  <div id="app">
    <div class="myCustomSelect" @keyup.enter="toggleSelect">
      <ul>
        <li>Item 1</li>
        <li>Item 1</li>
      </ul>
    </div>
  </div>
</template>

And just like that, you can add native functionality for your keyboard users. You could even add some more key events such as arrowup and arrowdown for going through the menu items.

Vue has tons of features to make your life as a developer easier by cleaning up your components, And if you have not done so already I highly recommend reading through the Vue documentation for more great examples.

Vue Docs
Vue Event Modifiers