DEV Community: Jose Godinez

10 Tailwind CSS tips

Jose Godinez — Sat, 01 Oct 2022 15:00:43 +0000

In your Tailwind config file, set !important to true.

This option will append all the utility classes with the !important keyword.

This is especially useful when you’re dealing with third-party libraries that add style to some elements. This way, you’ll make sure that when you add a new utility class to these elements, they will always be applied.

javascript
// tailwind.config.js
module.exports = {
  important: true,
};

Now, all of Tailwind’s utility classes will be generated as !important:

css
.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* And so on... */

Tired of centering and defining the padding of your main container class?

Set some settings for your container in your configuration file and it will automatically be applied to all .container classes.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
  },
};

So, there is no need to do this:

html
<div class="container p-6 mx-auto"></div>

Now, you can just do this:

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

Don’t forget, you can still add your own utility classes

The extend property in the configuration file will automatically generate and add new classes for your project. It is convenient when you need additional classes for a given CSS property.

For instance, when it comes to max-height, you only have access to the following classes:

.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */

But, what if you need to control the max-height property with a little bit more precision with classes like: max-h-xs, max-h-sm or max-h-md?

Well, here’s how you can generate them:

javascript
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          maxHeight: {
            xs: "20rem",
            sm: "24rem",
            md: "28rem",
            lg: "32rem",
            xl: "36rem",
            "2xl": "42rem",
            "3xl": "48rem",
            "4xl": "56rem",
            "5xl": "64rem",
            "6xl": "72rem",
          },
        },
      },
    };

Always know which breakpoint is currently active
Tailwind CSS debug screen.
The TailwindCSS Debug Screens plugin will let you display the currently active screen in development mode. It does not take more than a few seconds to set up, and it will probably save you a lot of time in the long run. This is how you can Install it:

bash
npm install tailwindcss-debug-screens --save-dev
javascript
// tailwind.config.js
module.exports = {
  plugins: [require("tailwindcss-debug-screens")],
};

Add the class debug-screens to your

tag.

html
<body class="debug-screens"></body>

You can disable preflight if you need to integrate Tailwind in an existing project

From the documentation: preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

This means that preflight will remove all of the default margins, font sizes, etc., for all your elements like your headings, blockquotes, lists, and so on.

A few months ago, I needed to progressively integrate Tailwind into an existing project (which had rigorous base styles). The issue with preflight is that it was breaking all the application interfaces. It took me some time before I could find a way to disable it:

javascript
// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};

Do you need to define your own breakpoints?
If your designers are being used with breakpoints that are different from the ones provided by Tailwind, no worries! Just open your configuration file and define your own. Keep in mind that you can create breakpoints with both min-width and max-width definitions if necessary.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: { min: "640px", max: "767px" },
      md: { min: "768px", max: "1023px" },
      lg: { min: "1024px", max: "1279px" },
      xl: { min: "1280px" },
    },
  },
};

// Will equal to

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
  },
};

Do you prefer px instead of the default rem for your padding, margins, width, and height?

The spacing property in your configuration file allows you to override the default spacing/sizing scale in a snap.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      "4": "24px",
      "5": "32px",
      "6": "48px",
    },
  },
};

How to order flex-items

You are probably used to the order property if you are using flexbox. Unfortunately, Tailwind does not include it.

You will then be able to configure and generate the flexbox order classes with all of their responsive variants.

By default, here are the utility classes that are generated:

css
.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}

It is best to avoid using @apply and extract everything into components

Adam Wathan (Tailwind’s creator), said this in a tweet:

Confession: The apply feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead.

In a nutshell, this can result in maintainability issues. I built several projects, and I seldom had to rely on them. So trust me, this is possible!

If you are using a framework like Vue.js or React (where you define everything as components), it will be simple to avoid using the @apply feature. I rarely (if ever) use it.

I also have another reason for not using it much: I find it easier to debug the code when I only use the utility classes in my code. You can see which style is applied to each tag as you only have one place where your team can control the style (i.e., the classes).

So, use the @apply feature carefully so you can save yourself some time in the long run!

Clone an array in ES 6

Jose Godinez — Sun, 07 Aug 2022 23:46:49 +0000

When we need to copy an array, we often times used slice. But with ES6, you can also use the spread operator to duplicate an array. Pretty nifty, right 🤩

const sheeps = ['🐑', '🐑', '🐑'];

// Old way
const cloneSheeps = sheeps.slice();

// ES6 way
const cloneSheepsES6 = [...sheeps];

Why Can’t I Use = to Copy an Array?

Because arrays in JS are reference values, so when you try to copy it using the = it will only copy the reference to the original array and not the value of the array. To create a real copy of an array, you need to copy over the value of the array under a new value variable. That way this new array does not reference to the old array address in memory.

const sheeps = ['🐑', '🐑', '🐑'];

const fakeSheeps = sheeps;
const cloneSheeps = [...sheeps];

console.log(sheeps === fakeSheeps);
// true --> it's pointing to the same memory space

console.log(sheeps === cloneSheeps);
// false --> it's pointing to a new memory space

Problem with Reference Values

If you ever dealt with Redux or any state management framework. You will know immutability is super important. Let me briefly explain. An immutable object is an object where the state can't be modified after it is created. The problem with JavaScript is that arrays are mutable. So this can happen:

const sheeps = ['🐑', '🐑'];

const sheeps2 = sheeps;

sheeps2.push('🐺');

console.log(sheeps2);
// [ '🐑', '🐑', '🐺' ]

// Ahhh 😱 , our original sheeps have changed?!
console.log(sheeps);
// [ '🐑', '🐑', '🐺' ]

That's why we need to clone an array:

const sheeps = ['🐑', '🐑'];

const sheeps2 = [...sheeps];

// Let's change our sheeps2 array
sheeps2.push('🐺');

console.log(sheeps2);
// [ '🐑', '🐑', '🐺' ]

// ✅ Yay, our original sheeps is not affected!
console.log(sheeps);
// [ '🐑', '🐑' ]

Mutable vs Immutable Data Types

Mutable:

object
array
function
Immutable:

All primitives are immutable.

string
number
boolean
null
undefined
symbol

Shallow Copy Only

Please note spread only goes one level deep when copying an array. So if you're trying to copy a multi-dimensional arrays, you will have to use other alternatives.

const nums = [[1, 2], [10]];

const cloneNums = [...nums];

// Let's change the first item in the first nested item in our cloned array.
cloneNums[0][0] = '👻';

console.log(cloneNums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

// NOOooo, the original is also affected
console.log(nums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

Here's an interesting thing I learned. Shallow copy means the first level is copied, deeper levels are referenced.

Community Input

Array.from is Another Way to Clone Array

const sheeps = ['🐑', '🐑', '🐑'];

const cloneSheeps = Array.from(sheeps);

Using v-model with objects for custom components

Jose Godinez — Thu, 28 Jul 2022 16:20:00 +0000

Components are the most powerful feature of Vue.js. They allow you to structure an app as small, reusable units which you can use again to compose new features.

While building SimpleSell, I needed custom components that bundle a bunch of input fields. They should behave like reusable input controls, while their state is provided by an object.

Basics of v-model

Of course you know v-model, the attribute which makes most of your input elements working. But did you know that you can use v-model as an interface for own components, too?

For a better understanding let's have a look at some basics.

<input type="text" v-model="value">
v-model is nothing more than syntactical sugar for the following.

<input type="text" :value="value" @input="e => value = e.target.value">
First we have the :value binding. It supplies the value of the input field. Second there is the @input event. As soon as there is an input event fired, we update the model's data property value with the current value of the input element. You also can use the abbreviation: @input="value = $event.target.value".

Wrapping an input field in a custom component
So let's create a small CreateCustomer.vue component which is nothing more than a wrapped input element.

<template>
  <div>
    <label>Name</label>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
<script>
export default {
  props: ['value'],
}
</script>

We bind the value that we get from the parent component to the text input and for @input we emit an input event with the field's current value to the parent. The next snippet shows the usage of the component.


<template>
  <CreateCustomer v-model="name"></CreateCustomer>
</template>
<script>
import CreateCustomer from './CreateCustomer'   

export default {
  components: { CreateCustomer },
  data() {
    return {
      name: 'John Doe',
    }
  },
}
</script>

Using an object with v-model
As soon as we add more input elements and want to use an object as value for v-model, things get a bit more complicated. I found this issue on GitHub where Evan You from Vue.js provides an example how v-model is supposed to work with objects.

Basically every data update of the component has to $emit a completely new instance of the object which then replaces the object instance stored in the parent's data. Otherwise you will get pretty strange and hard to debug behavior (e.g. watchers are not working properly) because objects are passed by reference in JavaScipt.

At first glance this sounds very complicated but actually it isn't. You have to create a (deep) clone of the object, change values only on the clone and $emit that object.

Let's extend our CreateCustomer component with a second input, a select for the contact type.


<template>
  <div>
    <div>
      <label>Name</label>
      <input type="text" :value="value.name" @input="update('name', $event.target.value)">
    </div>
    <div>
      <label>Type</label>
      <select :value="value.type" @input="update('type', $event.target.value)">
        <option value="Person">Person</option>
        <option value="Company">Company</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    update(key, value) {
      this.$emit('input', { ...this.value, [key]: value })
    },
  },
}
</script>

Now that we have two fields we use an object as argument for v-model for the first time.

<CreateCustomer v-model="{ name: 'John Doe', type: 'Person' }"></CreateCustomer>
For the :value bindings just use the object's properties. For the @input I created a method which emits the input event with a shallow clone of the object and sets the new value for the given key. Remember you can use object destructuring for shallow cloning of objects since ES6.

Using an object with v-model

As soon as we add more input elements and want to use an object as value for v-model, things get a bit more complicated. I found this issue on GitHub where Evan You from Vue.js provides an example how v-model is supposed to work with objects.

At first glance this sounds very complicated but actually it isn't. You have to create a (deep) clone of the object, change values only on the clone and $emit that object.

Let's extend our CreateCustomer component with a second input, a select for the contact type.


<template>
  <div>
    <div>
      <label>Name</label>
      <input type="text" :value="value.name" @input="update('name', $event.target.value)">
    </div>
    <div>
      <label>Type</label>
      <select :value="value.type" @input="update('type', $event.target.value)">
        <option value="Person">Person</option>
        <option value="Company">Company</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    update(key, value) {
      this.$emit('input', { ...this.value, [key]: value })
    },
  },
}
</script>

Now that we have two fields we use an object as argument for v-model for the first time.

Using v-model with null

Maybe there is the case where we default the v-model value with null in our parent component because we don't know if our CreateCustomer form is actually used. If we pass null we get an error because we can't access object properties on null. In addition the consumer shouldn't know that the component only works if at least an empty object is passed to v-model.

Second, we need a default value for type. Otherwise the select shows an invalid empty option at the top.

I struggled a lot with this problem and thankfully Adam Wathan helped me out. (Check out his upcoming Advanced Vue Component Design course, I highly recommend it!)

He suggested to use computed properties. So let's refactor our component again and add a computed property local which returns the value if there is one, otherwise an object with appropriate defaults.

<template>
  <div>
    <div>
      <label>Name</label>
      <input type="text" :value="local.name" @input="update('name', $event.target.value)">
    </div>
    <div>
      <label>Type</label>
      <select :value="local.type" @input="update('type', $event.target.value)">
        <option value="Person">Person</option>
        <option value="Company">Company</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: ['value'],
  computed: {
    local() {
      return this.value ? this.value : { type: 'Person' }
    },
  },
  methods: {
    update(key, value) {
      this.$emit('input', { ...this.local, [key]: value })
    },
  },
}
</script>

Be aware that we only use this.value in our computed property local. Everywhere else we use this.local instead of this.value. So if we're getting a null value, we're working with our defaults and thus prevent weird errors.

Using a nested object with v-model
Let's take it a step further. Suppose we have a data model like the following for our CreateCustomer component.

{
  name: 'John Doe',
  type: 'Person',
  address: {
    street: 'Example Street 42',
    zip: '12345',
    city: 'Example City'
  }
}

We added a nested object address. Basically there are two options to extend our component:

Create a custom component CustomerAddress and use the patterns shown above. Then there would be one responsible component per level of nesting in the data model (which is a good recommendation anyway).
Embed it into our component.
We take the second, more complex approach so I can give you deeper insight into using nested objects with v-model.

To keep things simple, I removed some fields and only add a new input for address.street.


<template>
  <div>
    <div>
      <label>Name</label>
      <input type="text" :value="local.name" @input="update('name', $event.target.value)">
    </div>
    <!-- ... -->
    <div>
      <label>Street</label>
      <input type="text" :value="local.address.street" @input="update('address.street', $event.target.value)">
    </div>
    <!-- inputs for zip and city work the same way -->
  </div>
</template>
<script>
import { cloneDeep, tap, set } from 'lodash'

export default {
  props: ['value'],
  computed: {
    local() {
      return this.value ? this.value : { type: 'Person', address: {} }
    },
  },
  methods: {
    update(key, value) {
      this.$emit('input', tap(cloneDeep(this.local), v => set(v, key, value)))
    },
  },
}
</script>

We're dealing with a nested object, so we bind local.address.street as our input's value. Remember to add address: {} to the local computed property to prevent null pointers.

Since there is no native JavaScript function for deep cloning an object I've imported some functions from Lodash.

cloneDeep(value): Creates a deep clone of the value.
tap(value, callback): Returns value after passing it to callback. Used to create a functional expressive one-liner function ;-)
set(object, path, value): Sets a nested value on an object, specified by a path in dot notation, e.g. set({}, 'address.street', 'Example Street 42') yields { address: { street: 'Example Street 42' } }.
The update method accepts a property path as key, creates a deep clone of our local computed value and sets the new value at the right property path. Setting nested values becomes as simple as @input="update('address.street', $event.target.value)".

Working with nested arrays

Let's consider we want to store a list of contact items for every customer with the option to add and delete them.


{
  name: 'John Doe',
  type: 'Person',
  address: {
    street: 'Example Street 42',
    zip: '12345',
    city: 'Example City'
  },
  contacts: [
    { type: 'Email', value: 'john@example.com' },
    { type: 'Phone' value: '+1234567890' }
  ]
}
So we extend our component for a last time.

<template>
  <div>
    <!-- ... -->
    <div>
      <div>
        <label>Type</label>
        <select v-model="newContactType">
          <option value="Phone">Phone</option>
          <option value="Email">Email</option>
        </select>
      </div>
      <div>
        <label>Value</label>
        <input type="text" v-model="newContactValue">
      </div>
      <button type="button" @click="addContact">Add</button>
    </div>
    <div v-for="(contact, i) in local.contacts">
      {{ contact.type }} {{ contact.value }}
      <button type="button" @click="removeContact(i)">Remove</button>
    </div>
  </div>
</template>
<script>
import { cloneDeep, tap, set } from 'lodash'

export default {
  props: ['value'],
  data() {
    return {
      newContactType: 'Email',
      newContactValue: null,
    }
  },
  computed: {
    local() {
      return this.value ? this.value : { type: 'Person', address: {}, contacts: [] }
    },
  },
  methods: {
    // ...
    addContact() {
      this.$emit('input', tap(cloneDeep(this.customer), v => v.contacts.push({ 
        type: this.newContactType,
        value: this.newContactValue,
      })))
    },
    removeContact(i) {
      this.$emit('input', tap(cloneDeep(this.customer), v => v.contacts.splice(i, 1)))
    },
  },
}
</script>

For the logic needed to add a new contact item, v-model is used directly because it's only about local state in our component that shouldn't be propagated to the parent. Remember to add contacts: [] to the local computed property to use an empty array as default. Only if the add or delete button is clicked, a new input event is emitted with a deep clone of the object including the array's changes.

$emit initial state from the created hook
Of course you can use the update method in the created hook, too. Use it to set component's defaults at its instantiation and propagate them to the parent instantly. Be aware that you should only use one update or $emit and set the initial state at once to prevent unexpected executions of watchers and timing issues.

<script>
export default {
  created() {
    this.$emit('input', tap(cloneDeep(this.local), v => {
      v.type = 'Company'
      v.address.city = 'Example City'
      v.contacts.push({ type: 'Email' })
    }))
  },
}
</script>

I've explained a lot of concepts in this post. Of course you should not use those patterns for every component you build. Sometimes it's better to just decompose complex components into smaller ones which are easier to work with and to reason about.

VS Code emmet tips to make you more productive

Jose Godinez — Mon, 11 Jul 2022 02:39:48 +0000

In general, productivity is the ratio between output and input. In software engineering, programming productivity(or development productivity) can be the ratio between the quantity of the software code produced and its time cost.
In mathematical terms,

Development Productivity = Quantity of Software Code / (Number of Programmers * Time Spent to Produce the Code)

The lesser time spent to produce the code results in a significant increase in the development productivity. Let us learn about a few tips & tricks to drastically reduce the HTML/CSS source code creation time to become super productive.

VS Code and Emmet

Visual Studio Code(aka, VS Code) is one of the leading source code editors (also an IDE) and arguably one of the best today for web development. Emmet is a plug-in-based infrastructure that can produce HTML/CSS code snippets from short-hand syntaxes. VS Code supports Emmet 2.0 out of the box. It means you do not need any additional extensions to take advantage of it.

Let us see ten such usages of the emmet using VS code to help you become a more productive developer.

Feel free to open an empty HTML file in the VS Code editor and try out these tips & tricks as you read!

1. HTML Structure and Tags

One of the struggles that most web developers face is remembering the HTML Structure and syntaxes of HTML tags. What could be more exciting than a single character can create the basic HTML structure for us? Open an empty HTML file using VS code and type the ! character. You will get an option to select to create a basic HTML structure, as shown in the image below.

You can type a few initial letters of any HTML tags to create elements with the required attributes. The image below shows the possibilities to create the anchor tag with different attributes.

Here are a few more examples that are of frequent use in web development. We can link to a CSS file, load a JavaScript file, create different input tags, a disabled button, etc.

There are plenty of others you can try out by typing the initial characters of the HTML tags.

2. Add class and id

An efficient way to reduce coding time is to create HTML tags with the required class names and ids. Try this shortcut to create a ul tag with the class name, list.

ul.list

produces,

<ul class="list"></ul>

Similarly, here is the shortcut for creating a ul element with the id, list-id.

ul#list-id

produces,

<ul id="list-id"></ul>

If you want to add a class name or id to the div element, you do not even need to mention the div in the shorthand.

For class name,

.content

produces,

<div class="content"></div>

For id,

#content-id

produces,

<div id="content-id"></div>

3. Children

Creating a nested HTML structure manually can be very tedious. What if we can create the nested HTML structure by typing only a few characters? Let's create an unordered list(ul) and a list item(li) under it. Use the > symbol to create the nested child structure.

ul>li

produces,

<ul>
    <li></li>
</ul>

Lorem is another useful shortcut to create some random texts to test your web page faster. Let's create a paragraph(p) tag with the Lorem texts.

p>Lorem

produces,

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur deserunt quam voluptatum quos ipsa cupiditate ipsum qui sequi illum? Qui exercitationem accusamus totam natus ut fugit magnam modi eaque doloremque.</p>

Now, let us create an unordered list(ul) with a list item(li) under it. The list item should have a class name, list. Finally, we want to create an anchor(a) tag with a class name, link inside the li tag.
ul>li.list>a.link

produces,

<ul>
    <li class="list">
       <a href="" class="link"></a>
    </li>
</ul>

4. Multiplication

You can multiply an HTML element using the * symbol. Let's create 5 list tags(li) inside a ul tag.

ul>li*5

produces,

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

5. Siblings

Use the + symbol to create multiple elements at the same level. Let's say we want to create three div elements in the same level wrapped by another div.
.bothers>.alex+.bob+.me
produces

<div class="bothers">
    <div class="alex"></div>
    <div class="bob"></div>
    <div class="me"></div>
</div>

As you know by now, we do not need to mention the div element when creating it with class name and id.

6. Grouping

Once you know the usages of the last 5 tips & tricks, you can use them in combinations to become very productive. This is where the grouping comes in to picture. We use the ( symbol along with ) to create the group.

Let's create a ul tag and 5 groups of li and a tags.
ul>(li>a)*5

produces

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Now, let us take a bit more complex usage. Notice the grouping used in the short-hand below,

div>(header>ul>li*2>span.item)+section.content+(footer>(p>Lorem)*2)

Once you break it down, it creates the proper nested structure using the group. The image below demonstrates it.

It produces this code snippet,

<div>
    <header>
        <ul>
            <li><span class="item"></span></li>
            <li><span class="item"></span></li>
        </ul>
    </header>
    <section class="content"></section>
    <footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat iure quaerat, molestias dolore commodi sequi porro, delectus eius quos saepe recusandae veniam modi laudantium voluptatibus cumque odit similique beatae eos.</p>
        <p>Nemo sequi veniam est! Laborum rem iste id vel, harum repellendus, reiciendis labore minima eum voluptatem dicta error nesciunt fugiat! Ipsa, perferendis iste exercitationem explicabo ex consequuntur dicta iure ipsam.</p>
    </footer>
</div>

7. Numbering

We use the $ symbol to create numbering. we can use the $ symbol with the * to multiply the number of occurrences.

header>ul>li.item$*3

produces

<header>
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
</header>

8. Text

We use the flower braces({ and }) to create elements with the text within them. Let's create a span element with some text within it.

span{I am a span}
produces,

<span>I am a span</span>

Ok, how to create all the HTML heading tags(H1...H6) with the text identifying them? Here is the short-hand for it,

h$*6{I'm a Heading $}*6

produces,

<h1>I'm a Heading 1</h1>
<h2>I'm a Heading 2</h2>
<h3>I'm a Heading 3</h3>
<h4>I'm a Heading 4</h4>
<h5>I'm a Heading 5</h5>
<h6>I'm a Heading 6</h6>

9. Climb up

You may feel a need to climb back to the HTML tree when you are too deep nested down. You can use the ^ symbol to climb up a step in the hierarchy. You can use the symbol multiple times to climb up multiple steps. Let's understand with examples.

Here we are adding a div tag by climbing up once.

div>div>h3+span^div{I can climb up}
produces,

<div>
    <div>
        <h3></h3>
        <span></span>
    </div>
    <div>I can climb up</div>
</div>

Notice the placement of the div tag when we climb twice!

div>div>h3+span^^div{I can climb up}
produces,

<div>
    <div>
        <h3></h3>
        <span></span>
    </div>
</div>
<div>I can climb up</div>

CSS We have an ocean of opportunities here. You can use the short-hands in the CSS file to generate the CSS properties. Here are a few I use very often,

How to Run Ngrok to Test & Share Your Local Development

Jose Godinez — Sun, 24 Apr 2022 01:34:02 +0000

One traditional pain point in software development is the need to continuously redeploy work to a remote web server to test functionality, compatibility and share with collaborators. Maybe you need to show your team a quick demo of something you’ve been working on, or test webhook notifications with integrated third-party services. Traditional ways to make the necessary link up can be complex and time consuming - not suitable just for sharing or testing something quickly. Luckily, there is an easy plug-and-play solution available: Ngrok.

Ngrok is, in the words of its founder Alan Shreve, “a tunneling, reverse proxy that establishes secure tunnels from a public endpoint to a locally running network service while capturing all traffic for inspection and replay”. In other words, it’s a cross-platform utility that allows developers to expose a local development server to the internet with minimal fuss. This enables quick and easy testing of add-ons and webhooks directly from your local machine.

The basic function of Ngrok is to expose a local web server to the internet via a secure tunnel. The free version of the tool does this by generating a random URL hostname (like abcde123.Ngrok.com) that is connected to the internet and can route requests and notifications from third-party apps to your local machine. By default, Ngrok will forward both HTTP and HTTPS traffic to your local machine, so there are no problems when testing webhooks with third-party services that require SSL certificates, domain validation, etc.

Ngrok also provides a real-time web UI where you can track all of the HTTP traffic running over your tunnels. It has a web console for this that is easy to access in your browser by opening (http://localhost:4040). Through the console, you can inspect requests and responses, as well as replay API requests with a single click. This can help speed up iteration testing by saving you the work usually required to generate new requests.

We’ve written before about why Laravel is the go-to framework for many PHP developers. As a framework, it’s simple to use and offers a wide range of libraries, tools, and templates to help developers build complex and stable web applications. But developers usually work in teams, so they need to be able to share or present a demo of their local framework with colleagues. Enter Ngrok.

Ngrok and Laravel are a great fit for each other. As we’ve shown, Ngrok allows you to quickly create a tunnel for free and Laravel has an internal web server that can be used without configuration. As a developer, this makes it really easy to share your local Laravel framework with anyone that uses a browser.

To show you just how easy, here we explain in three steps how to run Ngrok on Mac/Windows/Linux and share your Laravel Framework Installation with anyone outside your network (Note: These steps assume you already have Laravel correctly installed on your local machine).

Download and Prepare Ngrok

First, download the Ngrok binary. Choose your OS (Mac, Windows or a Linux Distro).

Then locate the downloaded file, unzip it and move it to a place available on the PATH (you need sudo credentials). In Windows, you can unzip directly by clicking on the file.



unzip /path/to/ngrok.zip
sudo mv /path/to/ngrok /usr/local/bin/

After this, you can get Ngrok running from the command line by telling it which port to connect to. The HTTP default is 80 so the command here would be:
ngrok http 80
Though it is not required to use the basic version of Ngrok, if you register an account you can install an auth token that will grant you access to more advanced features (see below).

Additional info is available on the Ngrok website.

Serve your Laravel Installation

Open a console window. Go to your local Laravel Installation and turn on the artisan server. We will be using 127.0.0.1 instead of localhost (default).

Leave the console and the artisan server process running. This is the Webserver listening for requests.

Additional info: Laravel Framework

Share your Laravel installation!

Open an extra console window and run Ngrok:
ngrok 8000

You should see something like:



Tunnel Status                 online
Version                       1.7/1.6
Forwarding                    http://284abb77.ngrok.com -> 127.0.0.1:8000

This is the URL that you can share with anyone you want: http://284abb77.Ngrok.com. The user accessing it will see your Laravel Installation running at 127.0.0.1:8000.

And that’s it! Just remember to turn off Ngrok when you want to stop sharing.

Some Additional Ngrok Features

Ngrok is an open-source, free software tool that anyone can use. But if you register for an account and/or sign up for a paid plan you can unlock more advanced features. These include:

Customized and reserved domains:

These include the ability to reserve a specific domain name that will remain exclusive to you and your team. You can also specify a custom subdomain for your Ngrok tunnel and protect it with a password.

Multiple tunnels:

You can run multiple tunnels simultaneously through Ngrok. You can define tunnel configurations on a simple YAML configuration file and then start them just by entering the saved names as a command. You can even start all the tunnels defined in the configuration file with the following command:
ngrok start --all

Greater control and security:

Other paid-for solutions include the ability to whitelist IP access to your tunnels, thereby ensuring no unknown party can connect to your tunnel endpoints.

Tailwind CSS best practices

Jose Godinez — Thu, 14 Apr 2022 01:56:25 +0000

Utility classes

When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the lg: breakpoint and larger.
Keep in mind that, by default, all responsive utilities are set to apply at min-width. That is, the sm: prefix does not apply only to small viewports; it applies to small breakpoints and larger. So for example instead of using the longform block sm:block md:flex lg:flex xl:flex for a
element you can just write md:flex. They both have the same behavior.
Also note that, by default, the sm: breakpoint does not start at min-width: 0 as you might expect. It starts at min-width: 640px. So if you want something to apply only to the smallest of viewports (those smaller than 640px), you must first set it to apply to all breakpoints and then override it for larger breakpoints. For example, use block sm:inline if you want something to appear as block for only the smallest of screens.
Use a consistent pattern of margin classes to make it easier to reason about positioning. For example, consistently use only mt-* and ml-* utilities, which will position the current element, or consistently use only mb-* and mr-* utilities, which will position adjacent elements. In general it is easier to reason about positioning when using the former pattern because it is effectively scoped to the styled element, but keep in mind that you may need to make exceptions to your selected pattern for elements which only appear under certain conditions, as you wouldn't want to have to also add conditional margins to elements that are adjacent to the conditional element.
Remember that you can often add a wrapper
with padding instead of using margins, which may help avoid potential issues with margin collapsing. By using utility-first CSS, you don't need to invent "semantic" class names for single purpose s so there is no reason to avoid using them when they are helpful.
Component classes

Do not prematurely use @apply to abstract component classes where a proper framework/template-based component is more appropriate. However, if the string of utility classes within that component is also used in other components, then there is true duplication. In this case, the creation of a new shared CSS component class with @apply may be warranted.

Do not @apply component classes in other components. For example, maintain seperate .btn and .btn-blue classes rather than using .btn-blue { @apply btn; }

Dynamic classes

When CSS classes are selected or generated dynamically, do not use string concatination to combine fragments of the full class. Instead switch between the complete strings. For example, use this {% set width = maxPerRow == 2 ? 'sm:w-1/2' : 'sm:w-1/3' %} instead of this {% set width = 'sm:w-1/' ~ maxPerRow %}. You always want the complete string of each utility class present in the markup to make it easier to reason about and to ensure that it survives the PurgeCSS process, if it is a part of your build tools.

Test react-hook-form with react-native-testing-library

Jose Godinez — Thu, 14 Apr 2022 01:52:20 +0000

I use react-hook-form for both web and react native without a single problem. Great library. When using react-hook-form v6. I encountered an issue where the validation works perfectly in code, but in test, the errors object is always empty even for wrong value. Let’s see how to solve it. In this blog, I will demostrate how to test react-hook-form with react-native-testing-library for both iOS and Android within one test through jest-expo, and yes, we will use jest as the test runner.

1. Setup the project

I will use expo for a quick demonstration.

# select blank template, JS or TS
expo init test-rhf

cd test-rhf
yarn add react-hook-form
yarn add --dev react-native-testing-library jest-expo

jest-expo is a library from the Expo team to do universal testing here, it will run your tests for every platform you setup, here, because react-native-testing-library only supports native device, we will not use web setup, via expo‘s file extension pick up and the similarities between react-native-testing-library and @testing-library/react, share one single test file for both web and native devices should be easy, will try them later.

In package.json:

add a script: "test": "node_modules/.bin/jest"
add jest settings:

"jest": {
    "projects": [
      {
        "preset": "jest-expo/ios",
        "setupFilesAfterEnv": [
          "<rootDir>/jestAfterEnvSetup.js"
        ]
      },
      {
        "preset": "jest-expo/android",
        "setupFilesAfterEnv": [
          "<rootDir>/jestAfterEnvSetup.js"
        ]
      }
    ]
  }

If you want to rewrite any jest rules, you have to write the new rule for each platform like the above example.

create jestAfterEnvSetup.js:

global.window = {};
global.window = global;

If you are using Typescript, you might need to // @ts-ignore the above lines

2. The application to test

Change App.js to the following:

import React from "react";
import { Text, Button, TextInput, View } from "react-native";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { errors, control, handleSubmit } = useForm({
    defaultValues: { name: "" },
  });

  const errorText = errors["name"]?.message;
  const isError = Boolean(errorText);

  return (
    <View style={{ margin: 10 }}>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={{ borderColor: "black" }}
            testID="nameInput"
            onChangeText={onChange}
            onBlur={onBlur}
            value={value}
          />
        )}
        rules={{ required: "name can't be blank" }}
        name="name"
      />

      {isError && <Text testID="nameErrorText">{errorText}</Text>}

      <Button
        testID="submitButton"
        title="submit"
        onPress={handleSubmit(async ({ name }) => {
          console.log(name);
        })}
      />
    </View>
  );
}

We have a simple form here, one text input for name, and it is required, one submit button for submit the values.

expo start, you will see this ugly application, press the submit button with a blank input will lead to an error.

We extract the errorText from errors["name"]?.message, than use Boolean(errorText) to check, if there is an error text, then there is an error.

3. The test

Create the file App.test.js at the same level of App.js with the following content:

import * as React from "react";
import App from "./App";
import { render, fireEvent, act } from "react-native-testing-library";

it("should not trigger error for correct values", async () => {
  const { getByTestId, queryByTestId } = render(<App />);

  fireEvent.changeText(getByTestId("nameInput"), "ABCDEFG");

  await act(async () => {
    fireEvent.press(getByTestId("submitButton"));
  });

  expect(queryByTestId("nameErrorText")).not.toBeTruthy();
});

it("should trigger error for empty input", async () => {
  const { getByTestId, queryByTestId } = render(<App />);

  await act(async () => {
    fireEvent.press(getByTestId("submitButton"));
  });

  expect(queryByTestId("nameErrorText")).toBeTruthy();
});

We have 2 tests here, one for happy path, and one for unhappy path.
We will mimic the user’s behaviour.

For the happy path: If we have a value, the nameErrorText should not been displayed.
For the unhappy path: If we don’t have a value, then the application should show the nameErrorText.

The test should be quite easy to read. I won’t explain them here.

The interesting part is:

await act(async () => {
  fireEvent.press(getByTestId("submitButton"));
});

Why we need to await act(async()=>{}) the pressing button event? It is because the validation in react-hook-form is always async, so you have to wait until it is finished. (Which is good, because real-world validation could be costy).

If you forget to wrap the act(), you will see a red warning: Warning: An update to App inside a test was not wrapped in act(...)

4. End

Run yarn test, you will see all tests pass.

Thanks for reading! Hope it helps.

Follow me (albertgao) on twitter, if you want to hear more about my interesting ideas.

How to listen for mouse wheel events in React?

Jose Godinez — Mon, 14 Feb 2022 00:52:54 +0000

Sometimes, we want to listen for mouse wheel events in React.

In this article, we’ll look at how to listen for mouse wheel events in React.
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div style={{ height: 600, width: 300 }} onWheel={(e) => console.log(e)}>
        hello world
      </div>
    </>
  );
}

We set onWheel to a function that logs the event object.

Now when we scroll up and down with the mouse wheel, we should see the event object logged.
Conclusion
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

The advanced guide to React Context with hooks.

Jose Godinez — Mon, 14 Feb 2022 00:41:59 +0000

Hi all,

It's been almost 4 years when React team has been released hooks, the addition to React function component to use state and control the mounting of the apps via Effects lifecycle method.

In this guide you'll have a practical guide how to use hooks with Context api (the alternative of redux for small projects [my opinion]).

Our project is for authentication process, you have to think about it like separate package that you can use for your app and it will handle everything.

Let's get started....

1. Create React app:

yarn create react-app my-app --template typescript

then create a directory: src/auth

2.

we have to ask ourselves what are the things that needed for authentication for now

Wrapper to wrap our app(Provider).
Component the will inject the props that we need in components tree(Consumer).
Events can be listened from any component tree to auth module.
Couple hooks that makes our life easier 🙂.

Provider:
We start by creating context that will expose a higher order component called AuthProvider.

create file under src/auth/AuthContext.ts and fill it with:

src/auth/AuthContext.ts

import { createContext } from "react";

export interface IAuthContext {
  register: (email: string, password: string) => void;
  login: (email: string, password: string) => void;
  isAuthenticated: boolean;
}

export const AuthContext = createContext<IAuthContext | undefined>(undefined);

You can see in the interface that I have defined login, register and isAuthenticated which is the value that we will rely on our app.

And then create a file you can call it AuthProvider with this content.

src/auth/AuthProvider.tsx

import React, { ReactElement } from "react";
import { IAuthContext, AuthContext } from "./AuthContext";

interface IAuthProviderProps {
  children: ReactElement<any> | ReactElement<any>[];
}
export function AuthProvider({ children }: IAuthProviderProps) {
  return (
    <AuthContext.Provider
      value={{
        login: () => {},
        register: () => {}
        isAuthenticated: false,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

This a higher order component that can wrap our app which is the children that you pass down and it will check whenever the value is changed and it will render the children again( the normal behaviour of react).

Now in our app we could wrap like this:

App.tsx

import React from "react";
import { render } from "react-dom";
import { AuthProvider } from "./auth/AuthProvider";
import MyComponent from "./MyComponent";

const App = () => (
  <AuthProvider>
    <MyComponent />
  </AuthProvider>
);

render(<App />, document.getElementById("root"));

import React from "react";

interface Props {}

export default function MyComponent(props: Props) {
  const onSubmit = (e: any) => {};

  return (
    <div>
      <h1>Login </h1>
      <form onSubmit={onSubmit}>
        <input type="text" onChange={() => {}} name="email" />
        <input type="password" onChange={() => {}} name="password" />
      </form>
    </div>
  );
}

To handle input value with two inputs, we will create a custom hooks that handle it, and also handle onSubmit

import React, { useState } from "react";

interface Props {}

export default function MyComponent(props: Props) {
  const email = useInputValue(); //** added */
  const password = useInputValue(); //** added */

  const onSubmit = (e: any) => {
    e.preventDefault();
    const { value: emailValue } = email;
    const { value: passValue } = password;
    if (
      emailValue &&
      emailValue.trim() !== "" &&
      passValue &&
      passValue.trim() !== ""
    ) {

    } else {
      return;
    }
  };

  return (
    <div>
      <h1>Login </h1>
      <form onSubmit={onSubmit}>
        <input type="text" name="email" {...email} />
        <input type="password" name="password" {...password} />
      </form>
    </div>
  );
}
//** added */
const useInputValue = (defaultValue: string = "") => {
  const [val, setVal] = useState(defaultValue);
  const handleChange = (e: any) => setVal(e.target.value);

  return {
    value: val,
    onChange: handleChange
  };
};

In order to access login function we need to have Consumer to access the values login, register

Consumer hook:
create a file in auth/useAuthentication.ts with content:

src/auth/useAuthentication.ts

import React, { useContext } from "react";
import { AuthContext, IAuthContext } from "./AuthContext";

export default function useAuthentication(): IAuthContext | undefined {
  return useContext(AuthContext);
}

It will only expose the context to access the values in the Provider.

Now, we will use it in MyComponent like this:

src/components/MyComponent.tsx

import React, { useState } from "react";
import useAuthentication from "./auth/useAuthentication"; //** added */

interface Props {}

export default function MyComponent(props: Props) {
  const email = useInputValue();
  const password = useInputValue();
  const context = useAuthentication();//** added */

  const onSubmit = (e: any) => {
    e.preventDefault();
    const { value: emailValue } = email;
    const { value: passValue } = password;
    if (
      emailValue &&
      emailValue.trim() !== "" &&
      passValue &&
      passValue.trim() !== ""
    ) {
      //** added */
      context.login(emailValue, passValue);
    } else {
      return;
    }
  };

  return (
    <div>
      <p>Login </p>
      <form onSubmit={onSubmit}>
        <input type="text" name="email" {...email} />
        <input type="password" name="password" {...password} />
      </form>
    </div>
  );
}

const useInputValue = (defaultValue: string = "") => {
  const [val, setVal] = useState(defaultValue);
  const handleChange = (e: any) => setVal(e.target.value);

  return {
    value: val,
    onChange: handleChange
  };
};

And because now you have the context values, we rely on isAuthenticated to show the login form or authenticated page.

<div>
      {context.isAuthenticated ? (
        <div>
          <h1>You have been logged on ${email.value}</h1>
        </div>
      ) : (
        <div>
          <p>Login </p>
          <form onSubmit={onSubmit}>
            <input type="text" name="email" {...email} />
            <input type="password" name="password" {...password} />
          </form>
        </div>
      )}
    </div>

With this we have covered almost the implementation of auth module but don't we forget something, that's right! the value of isAuthenticated is always false since we didn't implement yet login function.

Implementation login
For this we can simply create a custom hook that handles it:

src/auth/AuthProvider.tsx

import React, { ReactElement, useState } from "react";
import { AuthContext } from "./AuthContext";

interface IAuthProviderProps {
  children: ReactElement<any> | ReactElement<any>[];
}
export function AuthProvider({ children }: IAuthProviderProps) {
  const contextValue = useContextChange(); //** added */

  return (
    //** Added */
    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
  );
}
//** Added */
const useContextChange = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = (email: string, password: string) => {
    // some api call.
    fetch("http://localhost/5000", {
      method: "post",
      body: JSON.stringify({
        email,
        password // don't forget to hash the password
      })
    })
      .then(res => setIsAuthenticated(true))
      .catch(error => {
        setIsAuthenticated(false);
        throw new Error("[Authenticaion] " + JSON.stringify(error));
      });
  };

  const register = (email: string, password: string) => {
    // same for register
  };

  return {
    isAuthenticated,
    login,
    register
  };
};

With that our authentication is done, is it? normally yes. But what if one of our component down in the tree needs to access login, register of isAuthenticated

in the case we will create another higher order component that can easily wrap any component and access this value:

src/auth/withAuthentication.tsx

import React, { ComponentType } from "react";
import { AuthContext, IAuthContext } from "./AuthContext";

export default function withAuthentication<T>(
  Component: ComponentType<T & IAuthContext>
) {
  return (props: T) => (
    <AuthContext.Consumer>
      {context => <Component {...props} {...context} />}
    </AuthContext.Consumer>
  );
}

Note: I have noticed that context will not be updated in case which means the component will not render regardless In this case please use useAuthContext hook in to get the last updates to render the component.

And we can use like this in any component under Provider:

AnyComponent.tsx

import React from "react";
import { IAuthContext } from "./auth/AuthContext";
import withAuthentication from "./auth/withAuthentication";

interface Props {}

function AnyComponent(props: Props & IAuthContext) {
  return (
    <div>
      <p>Yes, you can access this value {props.isAuthenticated}</p>
    </div>
  );
}

export default withAuthentication(AnyComponent);

It's done for this time :)

Thank you for reading
I hope you learned something here

Use nuxt-speedkit for Lighthouse performance optimization

Jose Godinez — Mon, 20 Sep 2021 13:12:58 +0000

Quick summary

I am going to introduce nuxt-speedkit module.
Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website. All used components and resources are loaded on demand based on the viewport.

Introduction

In order to achieve a performance score of 100/100, only the resources that are necessary in the current viewport may be loaded. Concepts already exist for the loading of javascript components and images. However, there is not yet a practicable concept for loading fonts dynamically. This module provides a holistic approach to load all necessary resources on demand, including fonts, based on the current viewport.

This module implements the lazy-hydration concept of Markus Oberlehner and embeds a modified version of nuxt/image.

Requirements

NodeJS >= 12.x.x
NuxtJS >= 2.15.0

Features

dynamic loading of viewport based page resources like fonts (subselectors, media queries), components, pictures
optional loading prevention of resources at low bandwidth or weak hardware
prevents the loading of unnecessary resources (including components) that are outside the current viewport.
optional info layer concept to inform users about a reduced UX when bandwidth or hardware is compromised.

Results

delivery of the minimum required resources based on the current viewport

Your GitHub OAuth token for github.com contains invalid characters on composer install

Jose Godinez — Wed, 01 Sep 2021 02:59:25 +0000

If you're receiving this error when trying to composer install.

Your GitHub OAuth token for github.com contains invalid characters

The solution is to update Composer to the latest version, which supports the new token format. "Composer 1.10.21 and 2.0.12 (both released April 1st) added support for the new GitHub token format."

Go to getcomposer.org/download/
Follow the instructions to download the latest phar
As of this writing, the following command will install the latest version of Composer on your machine (i.e., 2.0.13). Note that future Composer updates will break the script as shown here, as the hash check won't pass.

Edit the composer authentication configuration file ~/.composer/auth.json.

nano ~/.composer/auth.json

Then replace the following.

"github-oauth": {
"github.com": "ghp_[YOUR-PERSONAL-TOKEN]"
}
With this (basic auth):

"http-basic": {
"github.com": {
"username": "[YOUR-GITHUB-USERNAME]",
"password": "ghp_[YOUR-PERSONAL-TOKEN]"
}
}

Advantages of using Firebase for Mobile App Development

Jose Godinez — Tue, 03 Aug 2021 02:39:10 +0000

Introduction to Firebase for Mobile App

As mobile apps evolved from being simple entertainment platforms for people to more sophisticated and challenging tools for even enterprises, there was a huge need to improve its backend capabilities. By backend, we meant not just scalable storage, but also high-performance processing engines, flexible integration capabilities and much more.

Besides, today there is a huge demand for mobile apps to have analytical and artificial intelligence-based capabilities that require even more processing power in the backend. So how can app development companies or businesses that want to build a mobile app to serve customers achieve this level of power in their backend? Well, you do not have to look beyond Firebase for this.

Backed by Google, Firebase offers a suite of tools required for businesses to build powerful apps without having to worry about management of infrastructure. It is designed to support backend developers at all stages of development and helps in improving the quality of the overall app development exercise.

Why Firebase is used for mobile app development?

It provides a host of features and modules that an app developer needs, as a service thereby eliminating the need to create these from scratch.

It includes everything from a scalable database to powerful analytics libraries. Firebase is in no way a replacement for backend development activity, but it is rather a platform to help backend developers and engineers enhance the experience of the app without stressful coding and architectural planning.

Some interesting features of using firebase:-

Real-time Data
Security Built-in
Email and Password authentication
Static File Hosting
Storage fostered by Google Cloud

Now, here are 5 revolutionary advantages brought by Firebase in today’s mobile app development practices.

1) Faster time to market

This is one of the key elements that decides how successful a mobile app turns out to be. When consumers get to use your apps or its new features as early as possible, they turn out to be your biggest competitive advantage in extremely sensitive markets.

For example, imagine that you own a financial management application that consumers use to manage their personal financial expenses. When customers want to use their smartphones increasingly for making payments across their physical and digital shopping destinations, then it is imperative that you roll out the functionality in your app at the earliest or risk losing market share to competitors who do it first.

A typical back end development exercise for this capability would take months or even years to be production ready. Bring in Firebase, and you could be looking at launching the feature in a matter of weeks thanks to the huge set of processing capabilities and scalable assets it offers. Firebase offers this competitive advantage that you cannot simply ignore.

2) Reduces development time and effort

For building a backend for your mobile app, there is a requirement for servers, hosting, database, and numerous supporting backend services. You need dedicated development professionals for managing this backend activity as well as another team to work on the front-end mobile app code.

This leads to increased development efforts, integration time and project management overhead. And above all, dependencies in these two teams will push development timelines further if one team gets held up with some challenges they face.

Communication and collaboration efforts are also high in such mode of application development which ultimately increases the risk of errors that can lead to severe consequences on the final product.

Firebase comes preloaded with all such pre-requisites of backend development so that you need not re-invent the wheel for each activity. This is a huge advantage of using firebase for mobile app as a front-end developer who needs a certain backend data type or service can simply integrate his code with the Firebase suite and get the desired input.

He or his team can manage the end-to-end development for the mobile app thereby reducing overheads and dependency-based challenges to a bare minimum or even eliminate it all together for smaller projects.

This leads to a drastic reduction of time and effort needed in building mobile apps which is a boon to companies who have smaller development teams.

3) Real-Time Database Scalability

Cloud Firestore is the popular database platform within the Firebase suite of offerings. It allows development teams to quickly setup a highly scalable and flexible real time database for their mobile, web and server development activities.

Elimination of a middle synchronization layer between the application and the backend database results in direct data access through the Firebase SDK.

It ensures that data is well synchronized within the application environment irrespective of the internet connectivity it has.

It is a NoSQL database which has been proven to be more effective than relational databases for mobile application-based workloads. It can be used to store large amounts of unstructured or structured data, run powerful processing algorithms and scale on demand to support heavy spikes in data.

It allows easy storage and management of user-generated content irrespective of the volume of data that is generated. Google’s cloud storage empowers easy scalability for the data storage as well as processing systems to accommodate large volumes seamlessly.

4) Google Analytics Integration

Any kind of personalized experience that you need to provide for your mobile app consumers require insights about their behavior and usage patterns. From a traditional standpoint, you need to either build an analytical engine into your mobile apps backend to process these insights or you may need to integrate powerful 3rd party analytical solutions to get the job done.

With Firebase, you have Google’s own Google Analytics integrated into the core solution and available for you to use to create your own views about customers based on target data behavior. You can easily monitor user behavior, identify journeys across devices and do much more personalization in your mobile apps with the help of in-built Google Analytics.

It provides you data on where your app scores in terms of user engagement. This allows you to build features and capabilities that customers would want from your app and hence improve brand loyalty and customer satisfaction. It helps in placing the right content for the right audience at the right time to ensure that all your customer needs are well addressed from your mobile app.

Ultimately, analytics serves as a game-changing feature and highly advantageous in your mobile app’s journey to building a sustainable growth channel for your business powered by user feedback and interests.

5) Flexible Cost

Firebase is free to begin with and there are many subscription-based plans for various services within Firebase. Enterprises or startups that want to begin their mobile app journey can use Firebase to explore possibilities in small scales and later expand their capabilities on a pay-as-you-go basis.

This provides enough financial flexibility for small businesses to compete with established businesses in the race for building innovative mobile based business channels. From e-commerce to mobile payments, there is huge ocean of opportunities that they can explore within their limited financial capabilities and technology constraints.

The lower starting cost and on-demand pricing allows companies to monetize their mobile channels gradually and maintain low operational costs throughout its lifecycle.

Final Thoughts:-

Due to these tremendous advantages of using Firebase in Mobile apps, it has revolutionized the way mobile app backends are built today. From cost to effort, there is a huge impact it made in making app backend development more accessible and seamless for businesses of all sizes.

All that a business needs to create a productive and sustainable roadmap for their mobile app journey is a knowledgeable workforce who can use tools like Firebase to create amazing mobile app experiences for your consumers. We understand the need for you to focus on core business activities and the limit it creates for your resources.

This is why CitrusBug offers state of the art Firebase development services for mobile app development projects. Our consultants will identify the most profitable growth roadmap for your mobile app, build capabilities with using Firebase for your backend and create solid front-end mobile apps for your customers to use as well. Get in touch with us today to know more.

DEV Community: Jose Godinez

10 Tailwind CSS tips

In your Tailwind config file, set !important to true.

Tired of centering and defining the padding of your main container class?

Don’t forget, you can still add your own utility classes

You can disable preflight if you need to integrate Tailwind in an existing project

Do you prefer px instead of the default rem for your padding, margins, width, and height?

How to order flex-items

It is best to avoid using @apply and extract everything into components

Clone an array in ES 6

Why Can’t I Use = to Copy an Array?

Problem with Reference Values

Mutable vs Immutable Data Types

Shallow Copy Only

Community Input

Using v-model with objects for custom components

Basics of v-model

Using an object with v-model

Using v-model with null

Working with nested arrays

VS Code emmet tips to make you more productive

VS Code and Emmet

1. HTML Structure and Tags

2. Add class and id

3. Children

4. Multiplication

5. Siblings

6. Grouping

7. Numbering

8. Text

9. Climb up

How to Run Ngrok to Test & Share Your Local Development

Download and Prepare Ngrok

Serve your Laravel Installation

Share your Laravel installation!

Some Additional Ngrok Features

Customized and reserved domains:

Multiple tunnels:

Greater control and security:

Tailwind CSS best practices

Utility classes

Component classes

Dynamic classes

Test react-hook-form with react-native-testing-library

1. Setup the project

2. The application to test

3. The test

4. End

How to listen for mouse wheel events in React?

The advanced guide to React Context with hooks.

1. Create React app:

2.

Use nuxt-speedkit for Lighthouse performance optimization

Quick summary

Introduction

Requirements

Features

Results

Your GitHub OAuth token for github.com contains invalid characters on composer install

Advantages of using Firebase for Mobile App Development

Introduction to Firebase for Mobile App

Why Firebase is used for mobile app development?

1) Faster time to market

2) Reduces development time and effort

3) Real-Time Database Scalability

4) Google Analytics Integration

5) Flexible Cost

Final Thoughts:-