DEV Community: Milos Protic

10 Useful and Hard-To-Remember CSS Selectors

Milos Protic — Mon, 20 Jan 2020 08:09:30 +0000

Introduction

Originally posted on devinduct

I like to say that everything (mostly related to styling) that can be done with CSS it shouldn't be done with JavaScript. I've seen in practice that people tend to use JavaScript when they are missing knowledge about CSS selectors to style, most commonly, dynamically created content on the web page. I will show you a couple of CSS selectors that can help you grab and style that type of content. Stay tuned!

Selectors

Below is the list of selectors that are suitable for our use case. Enjoy!

nth-child(odd|even|n)

This selector can help us find an element within a certain group. An important thing to mention here is that it selects the element among its siblings. Let's see it in action.

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
  <li class="list-item">List item 9</li>
  <li class="list-item">List item 10</li>
  <li class="list-item">List item 11</li>
  <li class="list-item">List item 12</li>
  <li class="list-item">List item 13</li>
  <li class="list-item">List item 14</li>
</ul>

Now, if we wanted to select every second (even elements) list item within the list, we could do it in one of the following ways:

ul.list > li:nth-child(even) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n) {
  color: orange;
}

On the other hand, what if we want to select every second element, but starting from the first one (odd elements)? We also have two ways of doing this:

ul.list > li:nth-child(odd) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n+1) {
  color: orange;
}

2n+1 selector tells the engine to take every second element starting from the first one. But, as you guessed, this can be modified to cover more scenarios, for example, pick every third element starting from the fifth. Pretty neat, right? The selector for this example looks as follows:

ul.list > li:nth-child(3n+5) {
  color: orange;
}

article + p

This selector gives us the ability to select each paragraph placed immediately after the article element. Of course, it can be modified to select any element after any element (element + element). I've used article and p for the example's sake.

Html

<section>
  <article>Article 1</article>
  <p>Paragraph 1</p> <!-- this will be selected -->
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p>
  <article>Article 4</article>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

Css

article + p {
  color: orange;
}

article ~ p

This selector is similar to the previous, the difference is that this one selects each paragraph placed after the article element. The position does not matter, what matters is that the paragraph has article elements placed somewhere before itself.

Html

<section>
  <p>Paragraph 1</p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this will be selected -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

Css

article ~ p {
  color: orange;
}

[attribute^=value]

The attribute selectors are quite powerful. This one enables us to select any element with a certain attribute which value starts with the given value. Let's see it in action.

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="disabled-list-item">List item 3</li> <!-- this will be selected -->
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="disabled-list-item">List item 6</li> <!-- this will be selected -->
  <li class="list-item">List item 7</li>
  <li class="disabled-list-item">List item 8</li> <!-- this will be selected -->
</ul>

Css

ul.list > li[class^="disabled"] {
  color:orange
}

[attribute$=value]

This selector does the same as the previous one, with a difference that the attribute value must end with the given value within the selector.

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item-disabled">List item 2</li> <!-- this will be selected -->
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item-disabled">List item 5</li> <!-- this will be selected -->
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
</ul>

Css

ul.list > li[class$="disabled"] {
  color:orange
}

[attribute*=value]

This attribute selector gives us the ability to select each element with the given attribute which value contains the given string in the selector. The position of the string within the attribute value is not important, as long as it contains it, the owner element will be selected. An example will make it easier to understand, as always.

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item-disabled">List item 3</li> <!-- this will be selected -->
  <li class="list-item-disabled">List item 4</li> <!-- this will be selected -->
  <li class="list-item">List item 5</li>
  <li class="list-item-bold">List item 6</li>
</ul>

Css

ul.list > li[class*="item-disabled"] {
  color: orange
}

p::first-line

This pseudo-class gives us the ability to select the first line of each paragraph, in our example. The selector can be modified to handle different elements. Useful when we want to highlight the beginning of the text written inside without wrapping it in another element.

Html

<section>
  <p>
    Paragraph 1 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 1 Second Line
  </p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this line will be highlighted -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>
    Paragraph 3 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 3 Second Line
  </p>
</section>

Css

section > p::first-line {
  color: orange
}

input:in-range

Before explaining it, I should mention that this selector can be applied to inputs only. It selects the inputs with value within the given range. Go look at the demo and try to type a value outside of the given range. The green border should not be applied.

Html

<input type="number" min="7" max="12" value="8" />

Css

input:in-range {
  border: 2px solid green
}

input:out-of-range

The pseudo-class that enables us to select all input elements with value out of the given range. Each number input can have its min and max properties set thus defining the numeric range. Useful for pages with calculations or some financial operations on it.

Html

<input type="number" min="7" max="12" value="8" />

Css

input:out-of-range {
  border: 2px solid red
}

:target

Last, but not least, a really cool selector that enables us to pick the currently active element after clicking on the anchor tag where URL is pointing to the page element. In short, when href attribute contains a target element id, that element will be selected by this selector after clicking the corresponding anchor tag.

Html

<a href="#home">Home</a>
<a href="#about">About</a>

<section id="home">Home</section>
<section id="about">About</section>

Css

:target {
  color: #fff;
  font-weight: bold;
  background-color: orange
}

Demo

Conclusion

CSS is and always has been very powerful. In many cases, the CSS possibilities are neglect by the developers, therefore, losing the simplicity of their web site. I mean, just compare what JavaScript code would be required to achieve the same result as provided via these selectors and you will find that learning CSS is a well worth time investment.

If you like what you see, do share it. Feel free to subscribe on devinduct, or follow me on twitter to keep up with the updates.

Thank you for reading and see you in the next article.

Vue GridMultiSelect Tutorial and Quick Guide

Milos Protic — Tue, 17 Dec 2019 14:11:28 +0000

Originally posted on devinduct

What is vue-gridmultiselect
Basic Usage
Labeling
Grouping
Slots and Row Details
Menu Position
Live Demo
Conclusion and Further Reading

What is Vue GridMultiselect

It's a simple component that gives you the ability to select items and display them in a table-like UI. Like a dropdown list but a little different. It requires minimal setup (single module installation) supporting the V-model and Vuex out of the box.

The component can be easily customized and turned from a simple read-only list into a grid with custom header and footer, clickable rows with details showing the data from a groupable and searchable data source...and more. Stay tuned.

Core Features and Characteristics:

No dependencies
Searching
Grouping
Disabling Items
Row Details
Easily configurable
Custom slots
Menu Positioning
V-model support
Vuex support

Useful links:

Basic Usage

Step 1 - Installation

npm install vue-gridmultiselect --save

Step 2 - Register a component with GridMultiSelect in the template

HTML

<template>
  <GridMultiSelect 
    :items="items" 
    item-key="id" 
    item-label="name" 
    v-model="selectedItems" 
  />
</template>

import GridMultiSelect from 'vue-gridmultiselect';
import 'vue-gridmultiselect/dist/vue-gridmultiselect.css';

export default {
  name: "example",
  components: { GridMultiSelect },
  data() {
    return {
      selectedItems: null,
      items: [
        { id: 1, name: "San Francisco", state: "USA", info: "San Francisco information" },
        { id: 2, name: "Las Vegas", state: "USA", info: "Las Vegas information" },
        { id: 3, name: "Washington", state: "USA", info: "Washington information" },
        { id: 4, name: "Munich", state: "Germany", info: "Munich information" }
      ]
    };
  }
};

And you are set! The component is ready. See here how to register and install via CDN.

Item key and item label are required properties. Item key is passed on to the Vue framework (:key directive) and it must be unique because based on that value the framework will handle the component updates. Item label represents the value we want to be displayed as text within each item in the list/s. Item label can be a String or an Array. See docs for more information.

Ok, now when we know what is the minimum configuration we can spice it up a little bit.

Labeling

Each item label is customizable, both in items and the selected items list by using the item-label property. This property accepts a String or an Array. With an array, we can control the labels of both lists in the component. Each item in the given array can hold the property names combination, for example, name|state.

Also, we can set the component title label by using the title property.

Let's update our example component template to reflect this.

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']"
  v-model="selectedItems" 
  title="Cities" 
/>

To read more about labeling, see official documentation.

Grouping

The items list can contain groups. To enable grouping you need to provide one additional property which will tell the component by what value to group the data source collection. The property name is group-by

Do note that at this point, you cannot group the selected items list

Let's update the component template.

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']" 
  v-model="selectedItems" 
  title="Cities"
  group-by="state"
/>

Now, as shown in the demo, our side list is grouped by the state item property. To read more about grouping, see official documentation.

Slots and Row Details

Selected items can be shown together with a certain amount of details. To achieve this, the component property item-details should be set. This property should hold the key from the items collection and by setting it up we are saying to the component from where to read each item details. This property accepts a String and it can hold the key combinations, just like the item-label prop. Let's update our template.

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']" 
  v-model="selectedItems" 
  title="Cities"
  group-by="state"
  item-details="info"
/>

Now, our grid becomes accordion and we can expand each row as shown in the demo. For example, if we expand the first row, we should see San Francisco information text in the details section.

Ok, now we need some buttons at the bottom of the grid. We can easily achieve this by using the selected-items-footer slot as follows:

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']" 
  v-model="selectedItems" 
  title="Cities"
  group-by="state"
  item-details="info"
>
  <template v-slot:selected-items-footer>
    <div class="buttons">
      <button @click="save">Save</button>
      <button @click="cancel">Cancel</button>
    </div>
  </template>
</GridMultiSelect>

Menu Position

By default, the component menu is docked to the right. This can be adjusted with the menu-position property. The value can be dock which is the default, or float. The updated and final demo template looks like this:

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']" 
  v-model="selectedItems" 
  title="Cities"
  group-by="state"
  item-details="info"
  menu-position="float"
>
  <template v-slot:selected-items-footer>
    <div class="buttons">
      <button @click="save">Save</button>
      <button @click="cancel">Cancel</button>
    </div>
  </template>
</GridMultiSelect>

Demo

Conclusion and Further Reading

This was a quick introduction to the Vue GridMultiselect component. If you like what you see please give it a star on GitHub. For more in-depth explanations, visit the official documentation website.

To stay tuned do subscribe on devinduct, or follow me on twitter.

Thank you for reading and see you in the next article.

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI

Milos Protic — Fri, 06 Dec 2019 08:21:03 +0000

Lately, I've been working on a Vue component called Vue GridMultiselect. It's a simple component and it gives you the ability to select items and display them in a table-like UI. Like a dropdown list but a little different.

Core Features and Characteristics

No dependencies
Searching
Grouping
Disabling Items
Row Details
Easily configurable
Custom slots
Menu Positioning
V-model support
Vuex support

Example usage:

HTML

<template>
  <GridMultiSelect 
    :items="items" 
    item-key="id" 
    item-label="name" 
    v-model="selectedItems" 
  />
</template>

import GridMultiSelect from 'vue-gridmultiselect';
import 'vue-gridmultiselect/dist/vue-gridmultiselect.css';

export default {
  name: "example",
  components: { GridMultiSelect },
  data() {
    return {
      selectedItems: null,
      items: [
        { id: 1, name: "San Francisco" },
        { id: 2, name: "Las Vegas" },
        { id: 3, name: "Washington" },
        { id: 4, name: "Munich" },
        { id: 5, name: "Berlin" },
        { id: 6, name: "Rome" }
      ]
    };
  }
};

It's still a work in progress, and by publishing this post, I'm providing access to the alpha version.

I've published a pre-release, and you can find the source code here, and the documentation here.

Looking forward to your feedback. If you find it useful show your love by starring the repo :).

7 Quick JavaScript Pop Quizzes With Explanations

Milos Protic — Thu, 31 Oct 2019 08:08:40 +0000

originally published on devinduct

Introduction

I believe that learning new things and evaluating the things we know is useful to keep us on track, thus avoiding the situation where we feel outdated. In this article, we will go through some basics of JavaScript. Enjoy!

1. Declarations

Think about the following code, and try to answer what gets logged (and why) without reading the explanation below.

// situation 1
console.log(person);
var person = 'John';

// situation 2
console.log(person);
let person = 'Phill';

// situation 3
console.log(person);
const person = 'Frank';

// situation 4
const person = 'Vanessa';
console.log(person);
person = 'Mike';
console.log(person);

// situation 5
var person = 'John';
let person = 'Mike';
console.log(person);

// situation 6
var person = 'John';
if (person) {
  let person = 'Mike';
  console.log(person);
}
console.log(person);

Explanation

Situation 1: The expected result here would be to see the text John written in the console, but surprisingly, we see undefined gets logged instead. Wonder why?

Well, here we can see the classic JavaScript in action. This behavior is called hoisting. Under the hood, the language splits the variable declaration and value assignment into two pieces. The variables are moved to the top, declared with the value set to undefined (hoisted), regardlessly of where they were initially declared by a developer. It looks something like this:

var person;
console.log(person);
person = 'John';

Situation 2: Here, the result will be a reference error.

Uncaught ReferenceError: Cannot access 'person' before initialization

The error text speaks for itself. Because we used the keyword let, our variable is hoisted but remained uninitialized, and the error gets thrown informing us that we are trying to access an uninitialized variable. The let keyword was introduced in ES6 enabling us to use block-scoped variables thus helping us prevent unintended behavior.

Situation 3: Here, we have the same error as in the Situation 2.

The difference is that we've used the keyword const, thus preventing re-assigning our variable after initialization. This keyword was also introduced in ES6.

Situation 4: In this case, we can see how the keyword const is useful and how it can save us from unintentionally re-assigning our variable. In our example, first, we will see Vanessa written in the console, and then a type error.

Uncaught TypeError: Assignment to constant variable

The usefulness of const variables grows exponentially with our codebase.

Situation 5: If a variable has already been defined inside a certain scope with the keyword var, trying to declare it again with the keyword let inside the same scope throws an error.

So, in our example, nothing will be logged and we will see a syntax error.

Uncaught SyntaxError: Identifier 'person' has already been declared

Situation 6: We have a function-scoped variable first and block-scoped variable second. In this case, it doesn't matter if they have the same name/identifier.

In the console, we should see Mike and John getting logged, in that order. Why?

Because the keyword let gives us the block-scoped variables, meaning that they only exist within the scope they are created, in this case within the if...else statement. The inner variable takes primate over the outer variable and this is the reason why we can use the same identifier.

2. Inheritance

Consider the following classes and try to answer what gets logged and why.

class Person {
  constructor() {
    this.sayHello = () => {
      return 'Hello';
    }
  }

  sayBye() {
    return 'Bye';
  }
}

class Student extends Person {
  sayHello() {
    return 'Hello from Student';
  }
}

const student = new Student();
console.log(student.sayHello());

Explanation

If you said Hello you were right!

Why: Each time we create a new Student instance, we set the sayHello property to it to be a function returning the string Hello. This is happening in the parent (Person) class constructor.

Classes are syntactical sugar in JavaScript, and under the hood, in our example, the sayHello method in the Student class is defined on the prototype chain. Considering that each time we create an instance of the Student class we set the sayHello property to that instance to be a function returning the string Hello, we never get to use the function defined on the prototype chain thus we will never see the message Hello from Student being logged.

3. Object Mutability

Consider the following situations and think of each section output:

// situation 1
const user = {
  name: 'John',
  surname: 'Doe'
}

user = {
  name: 'Mike'
}

console.log(user);

// situation 2
const user = {
  name: 'John',
  surname: 'Doe'
}

user.name = 'Mike';
console.log(user.name);

// situation 3
const user = {
  name: 'John',
  surname: 'Doe'
}

const anotherUser = user;
anotherUser.name = 'Mike';
console.log(user.name);

// situation 4
const user = {
  name: 'John',
  surname: 'Doe',
  address: {
    street: 'My Street'
  }
}

Object.freeze(user);

user.name = 'Mike';
user.address.street = 'My Different Street';
console.log(user.name);
console.log(user.address.street);

Explanation

Situation 1: Here, as we learned in the previous section, we are trying to re-assign a const variable that is not permitted, therefore, we will get a type error

The result in our console will be the following text:

Uncaught TypeError: Assignment to constant variable

Situation 2: In this scenario, we have different behavior even though we are modifying the variable declared with the keyword const. The difference is that we are changing the object property and not its reference, and this is allowed on const object variables.

The result in the console should be the word Mike.

Situation 3: By assigning the user to anotherUser variable we are sharing the reference, or memory location if you like, between them. In other words, both of them will point to the same object in memory, therefore, changing the property on one object will reflect the change on the other.

The result in the console should be Mike.

Situation 4: Here, we are using Object.freeze method to provide the functionality that was lacking in the previous scenario (situation 3). By using this method, we can freeze our object thus not allowing for its property values to change. But there is a catch. It will only do a shallow freeze, meaning that it will not protect the deep property updates. This is the reason why we are able to mutate the street property while the name property will remain unchanged.

The output in the console should be the words John and My Different Street, in that order.

4. Arrow Function

What will be logged and why after running the following snippet:

const student = {
  school: 'My School',
  fullName: 'John Doe',
  printName: () => {
    console.log(this.fullName);
  },
  printSchool: function () {
    console.log(this.school);
  }
};

student.printName();
student.printSchool();

Explanation

The output in our console will be undefined and My School, in that order.

If you are coming from the old school, you will probably be familiar with the following syntax:

var me = this;
// or
var self = this;

// ...
// ...
// somewhere deep...
// me.doSomething();

You can think of me or self variable as the parent scope accessible for every nested function created within.

When using arrow functions, this is done for us and we no longer need to store the this reference in order to have access to it somewhere deeper in our code. Arrow functions do not bind their own this, instead, they inherit the one from the parent scope and this is the reason why we have undefined logged after invoking the printName function.

5. Destructuring

Check out the destructuring below and think about what will be logged. Is the given syntax allowed or an error will be thrown?

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: 'john@doe.com',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
}

let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user);
console.log(userDetails);

Explanation

Although a bit out of the box, the syntax above is allowed and it doesn't throw an error! Pretty neat, right?

Most of us are not accustomed to the right side of expression looking like that...I mean, only the left side should contain dot syntax...or not? :)

All jokes to the side, the syntax above is powerful and enables us to easily split any object into two more specific ones as shown in the example above.

The console output is:

// {name: "John", surname: "Doe"}
// {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}

6. Async/Await

What will be logged after the following immediate function gets invoked?

(async () => {
  let result = 'Some Data';

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Some data retrieved from the server'), 2000);
  });

  result = await promise;
  console.log(result);
})();

Explanation

If you said Some data retrieved from the server after 2 seconds, you were right!

The code is paused until the promise gets resolved. After two seconds, it continues and logs the given text. This means that the JavaScript engine will literally wait until the asynchronous operation is completed. The async/await approach is, let's say, syntactic sugar to get the promise result. Some might say, a more readable way than promise.then.

7. The Return Statement

const multiplyByTwo = (x) => {
    return
    {
        result: x * 2
    };
}
console.log(multiplyByTwo(2));

Explanation

If you said {result: 4}, well, you were wrong. The output is undefined. But don't be so harsh on yourself, it bugged me too, considering that I write C# as well and this is not a problem there.

The code above will return undefined due to Automatic Semicolon Insertion which says that no line terminator is allowed between the return keyword and the expression

The solution would be to fix our function and write it in one of the following ways:

const multiplyByTwo = (x) => {
    return {
        result: x * 2
    };
}

const multiplyByTwo = (x) => {
  return (
    {
      result: x * 2
    }
  );
}

Conclusion

That's it for this session. I hope you liked it and if so, follow me on twitter, or subscribe to devinduct to stay tuned.

Is div still a div?

Milos Protic — Mon, 16 Sep 2019 08:26:41 +0000

Is it just me, or does anyone else dislike the fact that we are close to the point where div is not a div anymore? What are your thoughts about where web development is heading?

Pure CSS Text Animation

Milos Protic — Mon, 02 Sep 2019 07:54:03 +0000

Originally posted on devinduct.com

Quick Introduction

Back in the days, before the CSS3 and its power were unleashed, web animations were heavily dependant on the JavaScript and without it, developers were limited to simple things like color and border "animations" without the smooth transitions between the two states on the animated element. The most common CSS effect was, and possibly still is, the situation where we change the element background color when the user hovers over it. This was made possible by the :hover pseudo-class. As soon as we needed something more complex, like fade or slide effect, we were required to use JavaScript.

Further on, things like text animations were impossible to do by using pure CSS, but luckily, we have reached the point where the industry has evolved and by doing so enriched the CSS with a lot of new cool and useful features. In this article, we will animate our text by using CSS only. To be more precise, we will use transition and transform properties.

Transitions enable us to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active

This is very useful. When we change the element width, for example, we can set the way how the width will be changed in terms of duration, timing, and delay.

The transform CSS property lets us rotate, scale, skew or translate an element

In our example, we will use the scale option because we need to handle the size of an element (lines "moving" from top left corner), and believe it or not, these two properties are all we need for it. Everything else is standard CSS like width, position, opacity...etc. The difference is that we can animate them and set the transition between the states, as described above.

Ok, I think we are ready to dive into the implementation. Feel free to copy & paste the code and change it to fit your needs. Enjoy!

HTML

<div class="box">
    <span class="l-top"></span>
    <span class="l-left"></span>
    <div class="box-inner">
      <span class="hover-me">Hover me!</span>
      <span class="hi">Hi!</span>
      <span class="message">Welcome to the No JS Text Animation</span>
    </div>
    <span class="l-right"></span>
    <span class="l-bottom"></span>
</div>
<div class="box box-next">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

In our HTML, each span element within the first box, and the entire second box is going to be animated. In the first box, the text will slide from left to the right and fade in during the process. The text will be surrounded by animated lines forming a box originating from the top left corner. Each line will have its animation duration and direction. Pretty neat, right?

The second box will slide down with an arrow pointing towards it from the original text. And all this WITHOUT a single JavaScript line of code.

The entire CSS implementation looks like this:

CSS

.box {
    margin: 0 auto;
    position: relative;
    color: #feb090;
    width: 570px;
    height: 50px;
    font-size: 2rem;
    box-sizing: border-box;
}

.box-inner {
    position: relative;
}

.box-next {
    opacity: 0;
    transition: all 1s ease;
    font-size: inherit
}

.box > div > span, .box > span {
    display: block;
    transition: all 1s ease;
    position: absolute;
    top:0px;
    left: 0;
    width: 100%;
    height: 100%;
}

.box > div > span {
    top:7px;
}

.box > div > span:not(:first-child) {
    opacity: 0;
}

.box > div > span.hover-me {
    transition-duration: .1s;
}

.box > span.l-top, .box > span.l-bottom {
    border-top: 2px solid #b17b64;
    transform: scale(0, 1);
    transform-origin: left;
    transition-duration: .2s
}

.box > span.l-left, .box > span.l-right {
    border-left: 2px solid #b17b64;
    transform: scale(1, 0);
    transform-origin: top;
    transition-duration: .3s
}

.box > span.l-bottom {
    top: 48px;
    transition-delay: .5s
}

.box > span.l-right {
    left: 568px;
    transition-delay: .5s
}

.box:hover > span.l-top, .box:hover > span.l-left, 
.box:hover > span.l-bottom, .box:hover > span.l-right {
    opacity: 1;
    transform: scale(1, 1);
}

.box:hover > div > span.hover-me {
    left: -150px;
    opacity: 0;
}

.box:hover > div > span.hi {
    opacity: 1;
    left: 14px;
}

.box:hover > div > span.message {
    opacity: 1;
    left: 65px;
    transition-delay: .25s;
    transition-duration: .2s;
}

body > div.box:first-child:after {
    content: '\25bc';
    position:absolute;
    left: 47%;
    top: 50px;
    opacity: 0;
    transition: all .2s ease;
}

body > div.box:first-child:hover:after {
    opacity: 1;
}

.box:hover + div.box-next {
    opacity: 1;
    margin-top: 32px
}

Fiddle

That's all I have for this CSS episode. If you like what you see, do share it. Also, feel free to subscribe on devinduct.com, or follow me on twitter to keep up with the updates.

Thank you for reading and see you in the next article.

Introducing the Flexbox builder tool! Build a Layout and Learn at the Same Time

Milos Protic — Wed, 03 Jul 2019 07:39:09 +0000

Introducing a simple Flexbox builder tool, built with Vue!

Build your layout with a couple of simple clicks
Real-time output changes
Changeable HTML output (div, section, ul)
Copy & Paste the HTML/CSS for further styling
Setup the flexbox container and each item independently
Share the CSS between the flexbox items
Learn as you play with it by visualizing the changes

Check it out here: Flexbox Builder Tool

Tips and Tricks for Better JavaScript Conditionals and Match Criteria

Milos Protic — Tue, 25 Jun 2019 08:03:08 +0000

Originally posted on devinduct.com

Introduction

If you enjoy seeing the clean code, like me, you will try to write yours with as little conditional statements as possible. In general, object-oriented programming enables us to avoid conditionals and to replace them with polymorphism and inheritance. I believe we should follow these principles as much as we can.

As I mentioned in a different article, JavaScript Clean Code Best Practices, you are not writing the code just for the machine, you are writing it for the "future self" and for the "other guy".

On the other hand, due to various reasons, we might end up with conditionals in our code. Maybe we had a tight deadline to fix a bug, or not using a conditional statement would be too much of a change to our code base, etc. This article is written to get you through those cases and to help you organize the conditional statements you use.

Tips

Below are the tips about how you can structure the if...else statements and how you can write less to achieve more. Enjoy!

1. First Things First, Trivial, but NOT Trivial

Don't use negative conditionals (they can be confusing) and use conditional shorthands for boolean variables. I cannot stress this enough, especially the part about the negative conditionals. It's an unnatural way of doing things.

Bad

const isEmailNotVerified = (email) => {
  // implementation
}

if (!isEmailNotVerified(email)) {
  // do something...
}

if (isVerified === true) {
  // do something...
}

Good

const isEmailVerified = (email) => {
  // implementation
}

if (isEmailVerified(email)) {
  // do something...
}

if (isVerified) {
  // do something...
}

Now, when we have the above things clear, we can start.

2. For Multiple Conditions, use `Array.includes`

Let's say that we want to check if the car model is renault or peugeot in our function. The code might look something like this:

const checkCarModel = (model) => {
  if(model === 'renault' || model === 'peugeot') { 
    console.log('model valid');
  }
}

checkCarModel('renault'); // outputs 'model valid'

Considering that we have only two models, it might look acceptable to do it like that, but what if we want to do a check against another model? Or a couple of them more? If we add more or statements the code will be harder to maintain and not that clean. In order to make it cleaner, we can rewrite the function to look like this:

const checkCarModel = (model) => {
  if(['peugeot', 'renault'].includes(model)) { 
    console.log('model valid');
  }
}

checkCarModel('renault'); // outputs 'model valid'

The code above looks nicer already. In order to make it even better, we can create a variable to hold the car models:

const checkCarModel = (model) => {
  const models = ['peugeot', 'renault'];

  if(models.includes(model)) { 
    console.log('model valid');
  }
}

checkCarModel('renault'); // outputs 'model valid'

Now, if we want to do a check against more models, all we need to do is add a new array item. Also, if it was something important, we could declare the models variable somewhere out of the scope of the function and reuse it wherever we need it. That way we centralize it and make maintenance a breeze, considering that we only need to change that one place in our code.

3. For Matching All Criteria use `Array.every` or `Array.find`

In this example, we want to check if every car model is the one passed to our function. To achieve this in more imperative manner, we would do something like this:

const cars = [
  { model: 'renault', year: 1956 },
  { model: 'peugeot', year: 1968 },
  { model: 'ford', year: 1977 }
];

const checkEveryModel = (model) => {
  let isValid = true;

  for (let car of cars) {
    if (!isValid) {
      break;
    }
    isValid = car.model === model;
  }

  return isValid;
}

console.log(checkEveryModel('renault')); // outputs false

If you prefer the imperative way of doing things, the code above might be fine. On the other hand, if you don't care what's going on under the hood, you can rewrite the function above and use Array.every or Array.find to achieve the same result.

const checkEveryModel = (model) => {
  return cars.every(car => car.model === model);
}

console.log(checkEveryModel('renault')); // outputs false

By using Array.find, with a little tweak we can achieve the same result, and the performance should be the same because both functions execute callback for each element in the array and return false immediately if a falsy item is found.

const checkEveryModel = (model) => {
  return cars.find(car => car.model !== model) === undefined;
}

console.log(checkEveryModel('renault')); // outputs false

4. For Matching Partial Criteria use `Array.some`

Like Array.every does for all criteria, this method makes checking if our array contains one or more items pretty easy. To do it, we need to provide a callback and return a boolean value based on the criteria.

We could achieve the same result by writing a similar for...loop statement like the one written above, but luckily we have cool JavaScript functions doing things for us.

const cars = [
  { model: 'renault', year: 1956 },
  { model: 'peugeot', year: 1968 },
  { model: 'ford', year: 1977 }
];

const checkForAnyModel = (model) => {
  return cars.some(car => car.model === model);
}

console.log(checkForAnyModel('renault')); // outputs true

5. Return Early Instead of `if...else` Branching

When I was a student, I was taught that a function should have only one return statement and that it should return from a single location only. This is not a bad approach if handled with care, meaning that we should recognize the situation when it would lead to conditional nesting hell. Multiple branches and if...else nesting can be a pain if it goes out of control.

On the other hand, if the code base is big, and contains a lot of lines, a return statement somewhere in the deep would be a problem. Nowadays we practice separation of concerns and SOLID principles, therefore, a large number of code lines should be a rare occasion.

Let's create an example to illustrate this, and say that we want to display the model and manufacturing year of the given car.

const checkModel = (car) => {
  let result; // first, we need to define a result value

  // check if car exists
  if(car) {

    // check if car model exists
    if (car.model) {

      // check if car year exists
      if(car.year) {
        result = `Car model: ${car.model}; Manufacturing year: ${car.year};`;
      } else {
        result = 'No car year';
      }

    } else {
      result = 'No car model'
    }   

  } else {
    result = 'No car';
  }

  return result; // our single return statement
}

console.log(checkModel()); // outputs 'No car'
console.log(checkModel({ year: 1988 })); // outputs 'No car model'
console.log(checkModel({ model: 'ford' })); // outputs 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // outputs 'Car model: ford; Manufacturing year: 1988;'

As you can see, the code above is pretty long even for this simple problem of ours. Imagine what would happen if we had more complex logic. A lot of if...else statements.

We could refactor the function above in more steps making it better in each one. For example, use ternary operators, include && conditions, etc, but I will skip right to the very end and show you how, by using the modern JavaScript features and multiple return statements, it can be extremely simplified.

const checkModel = ({model, year} = {}) => {
  if(!model && !year) return 'No car';
  if(!model) return 'No car model';
  if(!year) return 'No car year';

  // here we are free to do whatever we want with the model or year
  // we made sure that they exist
  // no more checks required

  // doSomething(model);
  // doSomethingElse(year);

  return `Car model: ${model}; Manufacturing year: ${year};`;
}

console.log(checkModel()); // outputs 'No car'
console.log(checkModel({ year: 1988 })); // outputs 'No car model'
console.log(checkModel({ model: 'ford' })); // outputs 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // outputs 'Car model: ford; Manufacturing year: 1988;'

In the refactored version, we included destructuring and default parameters. The default parameter will ensure that we have a value to destruct if we pass undefined. Note that if we pass a null value the function will throw an error and this is the advantage of the previous approach, because in that case, when null is passed the output will be 'No car'.

Object destructuring will ensure that the function gets only what it needs. For example, if we include additional property in the given car object it will not be available inside our function.

Depending on the preference, developers will follow one of these paths. The practice has shown me that, usually, the code is written somewhere in-between these two approaches. Many people consider if...else statements easier to understand, which helps them to follow the program flow with less struggle.

6. Use Indexing or Maps Instead of `switch` Statement

Let's say that we want to get car models based on the given state.

const getCarsByState = (state) => {
  switch (state) {
    case 'usa':
      return ['Ford', 'Dodge'];
    case 'france':
      return ['Renault', 'Peugeot'];
    case 'italy':
      return ['Fiat'];
    default:
      return [];
  }
}

console.log(getCarsByState()); // outputs []
console.log(getCarsByState('usa')); // outputs ['Ford', 'Dodge']
console.log(getCarsByState('italy')); // outputs ['Fiat']

The code above can be refactored to exclude the switch statement totally.

const cars = new Map()
  .set('usa', ['Ford', 'Dodge'])
  .set('france', ['Renault', 'Peugeot'])
  .set('italy', ['Fiat']);

const getCarsByState = (state) => {
  return cars.get(state) || [];
}

console.log(getCarsByState()); // outputs []
console.log(getCarsByState('usa')); //outputs ['Ford', 'Dodge']
console.log(getCarsByState('italy')); // outputs ['Fiat']

Alternatively, we could create a class for each state with a list of available cars and use it when needed, but that is a topic for another post. This post is about conditionals. A more appropriate change would be to use an object literal.

const carState = {
  usa: ['Ford', 'Dodge'],
  france: ['Renault', 'Peugeot'],
  italy: ['Fiat']
};

const getCarsByState = (state) => {
  return carState[state] || [];
}

console.log(getCarsByState()); // outputs []
console.log(getCarsByState('usa')); // outputs ['Ford', 'Dodge']
console.log(getCarsByState('france')); // outputs ['Renault', 'Peugeot']

7. Use Optional Chaining and Nullish Coalescing

This section I can start by saying, "Finally". In my opinion, these two functionalities are a very useful addition to the JavaScript language. As a person coming from the C# world, I can say that I use these quite often.

At the moment of writing this, these options were not fully supported, and you needed to use Babel to compile the code written in such a manner. You can check the optional chaining here and the nullish coalescing here.

Optional chaining enables us to handle tree-like structures without explicitly checking if the intermediate nodes exist, and nullish coalescing works great in combination with optional chaining and it's used to ensure the default value for an unexisting one.

Let's back up the statements above with some examples, and start with the old way of doing things.

const car = {
  model: 'Fiesta',
  manufacturer: {
    name: 'Ford',
    address: {
      street: 'Some Street Name',
      number: '5555',
      state: 'USA'
    }
  }
}

// to get the car model
const model = car && car.model || 'default model';
// to get the manufacturer street
const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || 'default street';
// request an un-existing property
const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber;

console.log(model) // outputs 'Fiesta'
console.log(street) // outputs 'Some Street Name'
console.log(phoneNumber) // outputs undefined

So, if we wanted to print out if the car manufacturer is from the USA, the code would look something like this:

const checkCarManufacturerState = () => {
  if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') {
    console.log('Is from USA');
  }
}

checkCarManufacturerState() // outputs 'Is from USA'

I don't need to tell you how messy this can become in case of a more complex object structure. Many libraries, like lodash, for example, have their own functions as workarounds, but we don't want that, we want to be able to do it in vanilla js. Let's see a new way of doing things.

// to get the car model
const model = car?.model ?? 'default model';
// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? 'default street';

// to check if the car manufacturer is from the USA
const checkCarManufacturerState = () => {
  if(car?.manufacturer?.address?.state === 'USA') {
    console.log('Is from USA');
  }
}

This look a lot prettier and shorter, and to me, very logical. If you're wondering why should you use ?? instead of ||, just think of what values can evaluate as true or false, and you will have a possible unintended output.

And one thing off topic, which is very neat. Optional chaining also supports the DOM API, which is very cool, meaning that you can do something like this:

const value = document.querySelector('input#user-name')?.value;

Conclusion

Ok, that's it what I have for now. If you liked the article, subscribe on devinduct.com (there is a small form at the end of each post :)) or follow me on twitter to stay tuned.

Thank you for reading and see you in the next article.

Vue and Recursive Components

Milos Protic — Tue, 18 Jun 2019 12:07:54 +0000

Originally posted on devinduct.com

Quick Introduction

Some people say that recursion is hard to digest. In terms of software development, I don't feel like it is. A simple definition would be that recursive function is a self-invoking function, meaning that it will invoke itself at a certain point of its execution.

A more theoretical definition would be that recursion is a behavior requiring two properties:

A base case - the case which will stop the recursion
A set of rules responsible for reducing all cases towards the base case

I cannot decide which one is more important. Without the base case, the recursion will become an infinite loop and yet without the reducing cases towards it, we cannot achieve the desired behavior. Anyway, you need both in order to make it function properly.

Recursion and Vue Components

In Vue, recursion is very much possible and quite useful. I mean, not only in Vue, we can follow the rules above to implement recursive behavior in any framework. So, based on the given definition, we can say that a recursive component is a component invoking itself.

When is this useful? Well, whenever you need to use the same template structure, but with hierarchical input data, you can use recursion. Examples are components like tree views for displaying folder structure, comments on your website, nested menus...everything where the parent and the child have the same structure.

Ok, let us build an example to show all of this in practice.

The Problem

Imagine this, you came to work like any other day, made yourself a nice cup of coffee and started reading your favorite blog. Suddenly, your boss comes and says that you need to implement a new page where you will display all folders, subfolders, and files without knowing how many of them will exist. It can show 10, 5 or 100 folders. You start scratching your head thinking about how to solve this, and of course, you think of recursion.

Minimal number of components to solve this is 1, but in our example, we will create two of them:

The root component
The folder component

But first, we need to create sample data.

The Data

As mentioned earlier, a recursion comes in handy when we have hierarchically organized data where the child has the same structure as its parent. Here is the data reflecting this:

const root = {
  text: 'Root Folder',
  leaf: false,
  expanded: true,
  children: [{
    text: 'Sub Folder 1',
    leaf: false,
    expanded: false,
    children: [{
      text: 'Sub Sub Folder 1',
      leaf: false,
      expanded: false,
      children: [{
        text: 'SomeFile1.js',
        leaf: true
      }]
    }, {
      text: 'Sub Sub Folder 2',
      leaf: false,
      expanded: false,
      children: []
    }, {
      text: 'SomeFile.txt',
      leaf: true
    }]
  }]
}

By having the data above, we are ready to create our components.

The Root Component

This component will be the starting point of our folder tree. It will initiate the rendering of all children, but it can also display some independent information if required since it will not be a part of the recursion itself.

It will contain one property, called folder for example, to which we will bind our root data object. This property will be passed on to the child component, which will recursively create the folder tree structure based on it.

Template

<template>
  <ul class="folders">
    <li>Folders</li>
    <folder v-bind:folder="folder"></folder>
  </ul>
</template>

The Code

import Folder from './Folder.vue';

export default {
  name: 'root',
  props: {
    folder: Object
  },
  components: {
    Folder
  }
};

The Styling

ul.folders {
  padding: 1rem;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  list-style: none
}
ul.folders > li:first-child {
  padding: 1rem 1rem 1rem 0
}

It's as simple as that.

The Folder component

This component is responsible for rendering each folder in our tree. It will display the information about the current folder and render its children if any. Also, the folders are clickable, and by clicking on one, the component will display its subfolders and files.

Template

<template>
  <li class="folder" v-bind:class="[folder.leaf ? 'is-leaf' : 'is-folder']">
    <span v-on:click="expand()">{{ folder.text }}</span>

    <ul class="sub-folders" v-if="folder.children && folder.children.length > 0" v-show="folder.expanded">
      <folder v-for="child in folder.children" v-bind:folder="child"></folder>
    </ul>
    <div class="folder-empty" v-else v-show="!folder.leaf && folder.expanded">No Data</div>
  </li>
</template>

The Code

export default {
  name: "folder",
  props: {
    folder: Object
  },
  methods: {
    expand() {
      if (this.folder.leaf) {
        return;
      }

      this.folder.expanded = !this.folder.expanded;
    }
  }
};

The Styling

li.is-folder {
  padding: 1rem;
  border-left: 1px solid #d3d3d3;
  margin-bottom: 0.5rem
}
li.is-folder > span {
  padding: 0.5rem;
  border: 1px solid #d3d3d3;
  cursor: pointer;
  display:inline-block
}
li.is-leaf {
  padding: 0 0 0 1rem;
  color: #000;
}
ul.sub-folders {
  padding: 1rem 1rem 0 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  list-style: none
}
div.folder-empty {
  padding: 1rem 1rem 0 1rem;
  color: #000;
  opacity: 0.5
}

Example Usage

In order to use the component you've just created, all you need to do is to import the root component where this functionality is required and pass in the data structure. For example, on the page your boss requested. The App.vue component would look something like this:

Template

<template>
    <div class="vue-app">
        <root v-bind:folder="root"></root>
    </div>
</template>

The Code

import Root from './Root.vue';

export default {
  name: 'app',
  data: function () {
    return {
      root: {
        text: 'Root Folder',
        leaf: false,
        expanded: true,
        children: [{
          text: 'Sub Folder 1',
          leaf: false,
          expanded: false,
          children: [{
            text: 'Sub Sub Folder 1',
            leaf: false,
            expanded: false,
            children: [{
              text: 'SomeFile1.js',
              leaf: true
            }]
          }, {
            text: 'Sub Sub Folder 2',
            leaf: false,
            expanded: false,
            children: []
          }, {
            text: 'SomeFile.txt',
            leaf: true
          }]
         }]
        }
      }
    },
    components: {
      Root
    }
};

And that's it! Your page is ready to display as many folders as it receives. Check out the live example on codepen here.

Wrapping Up

Recursion is not that hard as it looks. It's simple execution of the same code block over and over again with different input parameters until it reaches the base case.

I hope this article will provide a better understanding of recursion and how to create a recursive component with Vue.

Thank you for reading and see you in the next post.

My Blog is Evolving...Into Something Else

Milos Protic — Wed, 05 Jun 2019 08:30:11 +0000

Introduction

Not that long ago, I began my journey as a user on dev.to. The experience was and still is, a great one. The variety of discussions is vast, thus I was intrigued and wanted to be a part of it.

As a developer, I always strained towards practical knowledge, and my main focus was on the continuous improvement of the code I write. I started writing my articles in a more practical manner, with code samples in focus, providing fully working code at the end which turned out useful for developers.

The Changes

This led me to an idea to write even more code-oriented articles, and I added a cheat sheet section on my blog. You can check it out here later. At this point, it shows cheat sheets created by the site admins, but the plan is to add a search page for all publicly (because users can create a private one) accessible cheat sheets.

If you think about it, we are always googling for code samples, and it's not that rare the situation when we keep googling for the same thing over and over again because our brain cannot remember it.

I started thinking, what if we could keep it all in one place? What if we could write a code snippet somewhere, in our own coding style, and save it for the future reference? Not just that, we could store links found after hours of searching and googling on the web, links toward useful articles and much more...

I didn't want a repository, I didn't want an article, or anything too complicated, I just wanted to place a small helper function that I know it will be used again later.

The whole idea is to reduce the repetition we do on a daily basis and to have a personal knowledge database that can be shared with others or kept private.

A future plan is to create team sheets, cheat sheets for teams to be managed and shared between the team members (if the cheat sheets prove as a useful feature of course).

At the same time, I've written a couple of articles that provided great value to the readers considering that one of them was read more than 25000 times and issued in the JavaScript weekly newsletter.

Newsletter link. It's the last one, JavaScript Clean Code: Some Best Practices
Article link

This led to users signing in and using the site, which made me feel great, because, in my opinion, there is nothing better than readers finding your writings valuable.

I was caught a bit off guard considering that I don't have features like comments section implemented, but it's coming up. In the end, I'm just an engineer wanting to help others and be a part of the ecosystem.

To keep this article code-oriented, as always, here is a Git commands sample cheat sheet:

Initialization

git init
Creates an empty Git repository in the given directory. If it doesn't exist, the directory will be created.

git init <project-name>

git clone
Clones a repository located at the given URL onto the local machine.

git clone <project-url>

git config
Gets or sets the options for the current repository, or globally depending on the command.

# set up the credentials on a global level, meaning that every commit from the current machine will use the given user
git config --global user.name "John"
git config --global user.email "john@john.com"

# omit the --global option to set the configuration for the current repository only
git config user.name "John"
git config user.email "john@john.com"

# get local user name
git config user.name

# get global user name
git config --global user.name

Files

git add
Updates the index using the current content found in the working tree, to prepare the content staged for the next commit. Depending on the options provided different actions will take place.

# adds the specified file to the index, where <file> is the file you want to add
git add <file>

# stages the specified files under the given directory, including files from the subdirectories
git add <directory>/\*.<extension>
git add pages/\*.html

# adds all new files to the index, ignoring modifications and deletions
git add .

# stages all changes in the working tree
git add -A
# or
git add --all

# stages modifications and deletions without adding new files found in the working tree
git add -u
# or
git add --update

git commit
Commits the staged changes.

# commits the changes with the given message
git commit -m "Super cool commit"

# replaces the last commit with the combination of the staged changes the changes from the last commit.
# if nothing is staged, this command can be used to update the last commit message.
git commit --amend -m "New super cool commit message"

# same as above except it doesn't change the commit message
git commit --amend --no-edit

git clean
Shows which files would be removed from the working directory or removes them, depending on the given option.

# show what would be removed
git clean -n

# do the cleaning forcefully
git clean -f

Branches

git checkout
Changes your current branch to the one provided.

# switches to the given branch
git checkout <branch-name>

# creates a new branch and then switches to it
git checkout -b <branch-name>

# creates a new branch if it doesn't exist, otherwise resets it and then switches to it
git checkout -B <branch-name>

# copies the old branch and creates a new one with the same state
git checkout -b <branch-name> <old-branch-name>

git push
It applies the local changes to the remote branch.

git push origin <branch-name>

git pull
It applies the remote changes to the local branch.

git pull

git fetch
Retrieves the changes and branches committed by other team members.

git fetch origin

git merge
Merges two or more branches together.

# merges the <branch-name> into the branch you are currently working on
git merge <branch-name>

# to merge into a specific branch use checkout first
git checkout <branch-to-merge-to>
git merge <branch-name>

git branch
Used to list, create, or delete branches

# list all branches
# current branch will be highlighted with an asterisk
git branch --list

# list all merged branches
git branch -a --merged

# delete a branch
git branch -d <branch-name>

# delete a branch forcefully
git branch -d --force <branch-name>
# a shorthand
git branch -D <branch-name>

Revisions

git show
Shows the information about the git repository. It can be used to show the information about commits, tags, trees, and blobs.

git show HEAD

git status
Shows the working tree current status. For example, if you want to see the currently staged files use this command.

# shows the current status
git status

# shows the current status in the short format
git status -s

git log
Shows the history of changes. The result includes data like commit id, date, and author.

# show the history
git log

# show the history by author
git log --author="Name"

# show the history by the commit message
git log --grep="Some Message"

git diff
Shows the difference between the working tree and the given branch.

git diff <branch-name>

Reset and Revert

git reset
Reset the current branch to the specified state.

# this will undo/rollback the last commit.
# the commit is lost after this
git reset --hard HEAD~1

# to keep the changes use the --soft option
git reset --soft HEAD~1

git revert
Reverts the existing commits.

# this will open the system editor and prompts you to edit the commit message prior to committing the revert
# this is the default option
git revert

# in this case, the revert command will not open the editor
git revert --no-edit

An example regex cheat sheet can be found here.
Check out the full list here.

I encourage you to go and create your first cheat sheet. Of course, you can write it in markdown. Let me know what you think in the comments below.

Thank you for reading and see you in the next article.

ECMAScript Classes - Keeping Things Private

Milos Protic — Fri, 24 May 2019 11:57:54 +0000

Originally posted on devinduct

Introduction

As usual, we will start with a few theoretical explanations. ES Classes are the new syntactic sugar in JavaScript. They provide a neat way of writing and achieving the same thing as if we used a prototype chain. The only difference is that it looks better and, if you came from the C# or Java world, feels more natural. One might say that they are not meant for JavaScript, but for me, I don't have a problem using classes or ES5 prototype standards.

They provide an easier way of encapsulation and creation of a fixed set of methods operating on that entity with the valid internal state. Basically, we can write less to achieve more, which is the whole point. With them, JavaScript is moving towards Object-Oriented way of doing things and by using them we are splitting the application into objects instead of into functions. Don't get me wrong, splitting the application into functions is not a bad thing, actually, it's a great thing and it can provide certain benefits over classes, but that is a topic for another article.

In a more practical way, we could say that whenever we want to describe a model from the real world within our application we would use a class to do it. For example, a building, a car, a motorcycle...etc. They represent a real-world entity.

The Scope

In server-side languages, we have something called access modifiers or levels of visibility such as public, private, protected, internal, package...Unfortunately, only the first two, in their own way, are supported in JavaScript. We do not write access modifiers (public or private) to declare our fields and JavaScript, in a way, assumes you to have everything scoped public which is the reason why I'm writing this post.

Note that we have a way of declaring a private and public field on our class, but these field declarations are an experimental feature and therefore not safe to be used yet.

class SimCard {
  number; // public field
  type; // public field
  #pinCode; // private field
}

The field declarations like the ones above are not supported without a compiler like, for example, Babel.

Keeping Things Private - The Encapsulation

Encapsulation is the term used in programming when we want to say that something is protected or hidden from the outer world. By keeping the data private and visible only to the owner entity we are encapsulating it. In this article, we will use a couple of ways to encapsulate our data. Let's dive into it.

1. By Convention

This is nothing else but faking the private state of our data or variables. In reality, they are public and accessible to everyone. The two most common conventions for keeping things private that I've encountered are the $ and _ prefixes. If something is prefixed with one of these signs (usually only one is used across the application) then it should be handled as a non-public property of that specific object.

class SimCard {
  constructor(number, type, pinCode) {
    this.number = number;
    this.type = type;

    // this property is intended to be a private one
    this._pinCode = pinCode;
  }
}

const card = new SimCard("444-555-666", "Micro SIM", 1515);

// here we would have access to the private _pinCode property which is not the desired behavior
console.log(card._pinCode); // outputs 1515

2. Privacy with Closures

Closures are extremely useful when it comes to keeping a variable scope. They go a long way back and were used by JavaScript developers for decades. This approach gives us the real privacy and the data is not accessible to the outside world. It can be managed only by the owner entity. What we will do here is create local variables within the class constructor and capture them with closures. To make it work, the methods must be attached to the instance, not defined on the prototype chain.

class SimCard {
  constructor(number, type, pinCode) {
    this.number = number;
    this.type = type;

    let _pinCode = pinCode;
    // this property is intended to be a private one
    this.getPinCode = () => {
        return _pinCode;
    };
  }
}

const card = new SimCard("444-555-666", "Nano SIM", 1515);
console.log(card._pinCode); // outputs undefined
console.log(card.getPinCode()); // outputs 1515

3. Privacy with Symbols and Getters

Symbol is a new primitive data type in JavaScript. It was introduced in ECMAScript version 6. Every value returned by the Symbol() call is a unique one, and the main purpose of this type is to be used as an object property identifier.

Since our intention is to create symbols outside of the class definition and yet not global a module has been introduced. By doing this, we are able to create our private fields on the module level, attach them to the class object within the constructor and return the symbol key from the class getter. Note that instead of getter we could use standard methods created on the prototype chain. I've chosen the approach with a getter due to the fact that we do not need to invoke the function to retrieve the value.

const SimCard = (() => {
  const _pinCode = Symbol('PinCode');

  class SimCard {
    constructor(number, type, pinCode) {
      this.number = number;
      this.type = type;
      this[_pinCode] = pinCode;
    }

    get pinCode() {
       return this[_pinCode];
    }
  }

  return SimCard;
})();

const card = new SimCard("444-555-666", "Nano SIM", 1515);
console.log(card._pinCode); // outputs undefined
console.log(card.pinCode); // outputs 1515

One thing to point out here is the Object.getOwnPropertySymbols method. This method can be used to access the fields we intended to keep private. The _pinCode value from our class can be retrieved like this:

const card = new SimCard("444-555-666", "Nano SIM", 1515);
console.log(card[Object.getOwnPropertySymbols(card)[0]]); // outputs 1515

4. Privacy with WeakMap and Getters

Map and WeakMap were also introduced in ECMAScript version 6. They store data in a key/value pair format, which makes them a good fit for storing our private variables. In our example, a WeakMap is defined on a module level for each property and in the class constructor, each private key is set. The value is retrieved by the class getter, and again, it has been chosen due to the fact that we do not need to invoke the function to retrieve the value.

const SimCard = (() => {
  const _pinCode = new WeakMap();
  const _pukCode = new WeakMap();

  class SimCard {
    constructor(number, type, pinCode, pukCode) {
      this.number = number;
      this.type = type;
      _pinCode.set(this, pinCode);
      _pukCode.set(this, pukCode);
    }

    get pinCode() {
       return _pinCode.get(this);
    }

    get pukCode() {
       return _pukCode.get(this);
    }
  }

  return SimCard;
})();

const card = new SimCard("444-555-666", "Nano SIM", 1515, 45874589);
console.log(card.pinCode); // outputs 1515
console.log(card.pukCode); // outputs 45874589
console.log(card._pinCode); // outputs undefined
console.log(card._pukCode); // outputs undefined

Conclusion and Further Reading

Hopefully, you will find these examples useful and they will find a place somewhere in your workflow. If that is the case, and you liked what you've read, do share it.

For further reading, I would recommend the post about JavaScript Clean Code - Best Practices.

Thank you for reading and see you in the next post.

Handling Array Duplicates Can Be Tricky

Milos Protic — Sat, 11 May 2019 20:45:51 +0000

Originally posted on my-blog. Check it out for more up to date content

Let's begin by defining a simple array:

const cars = [
    'Mazda', 
    'Ford', 
    'Renault', 
    'Opel', 
    'Mazda'
]

As you can see, the first and the last item are the same. Finding this duplicate is straightforward considering that we have an array of items that are a primitive type. To achieve this, we can simply use the method filter along with the indexOf method within the provided callback.

const unique = cars.filter((car, idx) => cars.indexOf(car) === idx);
console.log(unique); // outputs ['Mazda', 'Ford', 'Renault', 'Opel']

Note that the indexOf method will return the first occurrence of an item within the array. This is why we can compare the index returned by the indexOf method with the current index in each iteration to see if the current item is a duplicate.

Finding Object Duplicates

This is the tricky part. Objects are compared via reference rather than the value or structure. This means that if we compare two objects that are exactly the same they won't match. We cannot simply do something like obj1 === obj2 because of the way they are compared.

const obj1 = {
   name: 'John',
   surname: 'Doe'
}

const obj2 = {
   name: 'John',
   surname: 'Doe'
}

const match = obj1 === obj2;
console.log(match) // outputs false

Now, what if we have an array of object duplicates? How are we going to filter out those? Considering what we've just read, it's not possible to use something simple like indexOf.

Example array:

const names = [{
   name: 'John',
   surname: 'Doe'
}, {
   name: 'Muhamed',
   surname: 'Ali'
}, {
   name: 'Mike',
   surname: 'Tyson'
}, {
   name: 'John',
   surname: 'Doe'
}, {
   name: 'John',
   surname: 'Doe'
}, {
   name: 'Mike',
   surname: 'Tyson'
}, {
   name: 'Mike',
   surname: 'Tyson'
}];

As you can see, we have a couple of duplicate items. Let's implement the function that will find the duplicates.

The Longer Version

In this approach, we will manually loop through the source array (forEach method) and check if each item exists in the resulting array by using the find method.
Considering that we have an array of objects, we must compare each property of the current object in order to make sure that the items are the same. Broken down into steps the process looks like this:

Get the object properties
Define the resulting arrays (unique and duplicates)
Loop through the source array
Try to locate the current item within the unique array
If the item is found, push it into the duplicates otherwise into the unique array

const findDuplicates = (source) => {
    const keys = Object.keys(source[0]);
    let unique = [], duplicates = [];

    source.forEach((item, idx) => {

        if(idx == 0) {
            unique.push(item);
            return;
        };

        const resultItem = unique.find(resultItem => {
            let notFound = true;

            keys.forEach(key => {
                notFound = notFound && 
                    item[key] != resultItem[key];
            });

            return !notFound;
        });

        (!resultItem ? unique : duplicates).push(item);

    });

    return { unique: unique, duplicates: duplicates };
};

const result = findDuplicates(names);
console.log(result.unique, result.duplicates);

// expected output

// unique items

// 0: {name: "John", surname: "Doe"}
// 1: {name: "Muhamed", surname: "Ali"}
// 2: {name: "Mike", surname: "Tyson"}

// duplicate items

// 0: {name: "John", surname: "Doe"}
// 1: {name: "John", surname: "Doe"}
// 2: {name: "Mike", surname: "Tyson"}
// 3: {name: "Mike", surname: "Tyson"}

A Bit Shorter Version

We could use the reduce method in order to achieve the same thing. This is a very powerful method and it can be used to transform the array into the desired result. It accepts a callback as a parameter which is executed for each item in the array. The return value of the callback is the given accumulator modified within each iteration. Considering that this is not an article about the reduce method, check out the official MDN documentation

Ok, back to our code. The modified version of the findDuplicates method looks like this:

const findDuplicates = (source) => {
    const keys = Object.keys(source[0]);
    return source.reduce((acc, item) => {
        const resultItem = acc.unique.find(x => {
            let notFound = true;

            keys.forEach(key => {
                notFound = notFound && 
                    item[key] != x[key];
            });

            return !notFound;
        });

        (!resultItem ? acc.unique : acc.duplicates).push(item);
        return acc;
    }, {
        unique: [],
        duplicates: []
    })
};

The modified version should return the same resulting arrays as it did before.

// unique items

// 0: {name: "John", surname: "Doe"}
// 1: {name: "Muhamed", surname: "Ali"}
// 2: {name: "Mike", surname: "Tyson"}

// duplicate items

// 0: {name: "John", surname: "Doe"}
// 1: {name: "John", surname: "Doe"}
// 2: {name: "Mike", surname: "Tyson"}
// 3: {name: "Mike", surname: "Tyson"}

That's it. Thank you for reading and see you in the next article.

DEV Community: Milos Protic

10 Useful and Hard-To-Remember CSS Selectors

Introduction

Selectors

Demo

Conclusion

Vue GridMultiSelect Tutorial and Quick Guide

Table of Contents

What is Vue GridMultiselect

Basic Usage

Labeling

Grouping

Slots and Row Details

Menu Position

Demo

Conclusion and Further Reading

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI

7 Quick JavaScript Pop Quizzes With Explanations

Introduction

1. Declarations

2. Inheritance

3. Object Mutability

4. Arrow Function

5. Destructuring

6. Async/Await

7. The Return Statement

Conclusion

Is div still a div?

Pure CSS Text Animation

Quick Introduction

HTML

CSS

Fiddle

Introducing the Flexbox builder tool! Build a Layout and Learn at the Same Time

Tips and Tricks for Better JavaScript Conditionals and Match Criteria

Introduction

Tips

1. First Things First, Trivial, but NOT Trivial

2. For Multiple Conditions, use Array.includes

3. For Matching All Criteria use Array.every or Array.find

4. For Matching Partial Criteria use Array.some

5. Return Early Instead of if...else Branching

6. Use Indexing or Maps Instead of switch Statement

7. Use Optional Chaining and Nullish Coalescing

Conclusion

Vue and Recursive Components

Quick Introduction

Recursion and Vue Components

The Problem

The Data

The Root Component

Template

The Code

The Styling

The Folder component

Template

The Code

The Styling

Example Usage

Template

The Code

Wrapping Up

My Blog is Evolving...Into Something Else

Introduction

The Changes

Initialization

Files

Branches

Revisions

Reset and Revert

ECMAScript Classes - Keeping Things Private

Introduction

The Scope

Keeping Things Private - The Encapsulation

1. By Convention

2. Privacy with Closures

3. Privacy with Symbols and Getters

4. Privacy with WeakMap and Getters

Conclusion and Further Reading

Handling Array Duplicates Can Be Tricky

2. For Multiple Conditions, use `Array.includes`

3. For Matching All Criteria use `Array.every` or `Array.find`

4. For Matching Partial Criteria use `Array.some`

5. Return Early Instead of `if...else` Branching

6. Use Indexing or Maps Instead of `switch` Statement