DEV Community: AlbertoM

I created an iOS baby book tracker app with React Native

AlbertoM — Thu, 26 Mar 2026 13:17:34 +0000

Baby Book Tracker is on the App Store for iPhone and iPad.

Since before my son was born I was aware of the importance of reading to him.
While browsing online I stumbled upon the 1000 books before 5 challenge and looked for apps that would help me participate in it.

I found a couple but they didn't really satisfy my needs because many of the books that I own didn't appear when I tried scanning them and the app I was using wouldn't let me add my own.

I decided to use Notion for a while but that was not the best UX and was not very engaging.

My field of expertise is Enterprise SaaS, not really iOS development but with some help from GPT Codex and Claude Code I was able to quickly iterate and get a MVP done for my own app.

This was my first time "vibe coding" an entire app from scratch and overall it was an interesting experience.

I still had to do a lot of reading about React Native to ensure the LLMs were not doing something crazy but after a few back and forth I ended up with a product I was very satisfied with.

When setting up to create this app I wanted two things especially:

privacy
no need for an account

I wanted the user to own the data and also I wanted them to have something they could own and use forever once paid instead of being forced on a subscription plan or having to navigate through banner full of ads.

The app is pretty simple, I will now describe a bit what it does and the stack and UI.

What it does

Baby profiles: one profile per child, supports multiple kids
Book library: shared across all babies so you don't re-enter titles
Barcode scanning: point at the ISBN on any book and it auto-fills everything from an open book database
Manually add books: if you can't scan them, you can manually add them
Reading log: pick the baby, book, reader, and date. Takes about 10 seconds
Stats: streaks, total sessions, unique books, weekly activity chart
Share card: exportable image with your baby's reading stats
Privacy-first: everything stays on device by default, optional iCloud sync, no account needed

Tech stack

React Native 0.81 with New Architecture enabled
Expo SDK 54 and Expo Router v6
React 19
TypeScript
i18next for localization (EN, IT, DE, FR, ES, JP, KO)
RevenueCat for in-app purchases
CloudKit for optional iCloud sync, no backend required
Vitest for tests
EAS Build for CI/CD and App Store releases

The screens

Home

Recent sessions, today's reading summary, and a big "Log a session" button. The goal was to make logging fast enough that you'd actually do it.

Books

Your full library with cover art and read counts. Tap a book to see who read it, when, and to which baby. The barcode scanner lives here too.

History

A full log of every session, filterable by baby, book, or reader. Useful for settling the "I read more than you" debate with your partner.

Stats

Current streak, total sessions, unique books, and a chart of activity over time. Probably the screen I open most.

Baby detail and share card

A profile page per baby with a shareable image card you can save or send.

A few technical decisions

Barcode scanning was the make-or-break feature. Manually entering a book title every single time would kill the habit fast. Scanning an ISBN takes two seconds and pulls the title, author, cover, and page count automatically. Built with expo-camera.

CloudKit instead of a backend was an easy call. Sync goes through the user's own iCloud account so I never touch the data, there's nothing to maintain, and it costs nothing to run.

i18n from day one paid off. Every string goes through i18next, so adding 6 more languages later was a translation job rather than a refactor. App Store metadata is kept in the same Markdown source and exported automatically during releases.

Scripted releases mean the whole pipeline runs in one command: bump version, build IPA with EAS, export metadata, upload to App Store Connect. No Xcode, no clicking around in App Store Connect.

On vibe coding a real app

AI-assisted development works surprisingly well for a project like this. The models have clearly seen a lot of Expo and React Native code. Things like wiring up routing, integrating third-party SDKs, scripting the release pipeline, most of it came out nearly ready to use.

Where it struggled was anything with complex local state or subtle iOS UI quirks like keyboard avoidance and bottom sheet interactions with system gestures. Those needed more back-and-forth or I just wrote them myself.

The main thing I learned is that prompting for code is a skill. Being specific about your setup and pasting in the relevant existing code makes a big difference. Think of it like onboarding a strong dev who just needs good context to do good work.

I found Codex to be better at reasoning and finding weird bugs and Claude better at doing most of the work.

Try it

Baby Book Tracker is on the App Store for iPhone and iPad.

Download on the App Store

Below is a short demo video of the app, it's not the most recent build but you get the idea of how it works

Cover image from: https://unsplash.com/photos/father-and-son-reading-a-book-together-on-couch-kWFA09iZmGI

Everything new coming in ES2022

AlbertoM — Wed, 08 Sep 2021 12:14:31 +0000

Every year since 2015, JavaScript has been receiving constant yearly updates to its specification with new interesting features added.

In this article we will have a look at what's to come since many features already reached stage 4 and will be included in the specification.

For those of you who don't know, there are 4 stages in the proposal process, with the 4th one being the last one which marks the proposal as finished.

As a developer, it's important to stay updated with the new specs of a language and if you feel like you've been left behind by the many updates that JavaScript received in the past years, I can recommend you my book that covers everything from the basics of the language all the way to the latest ES2022 specs, including a little intro to TypeScript. You can read it for free on Github where you will also find links where to buy the ebook or you can check out my course on Educative

Now, let's get started with the first of the new ES2022 features:

Class Fields

Class public Instance Fields & private Instance Fields

Before ES2022 we would define properties of a class in its constructor like this:

class ButtonToggle extends HTMLElement {
    constructor(){
        super();
        // public field
        this.color = 'green'
        // private field
        this._value = true;
    }

    toggle(){
        this.value = !this.value
    }
}

const button = new ButtonToggle();
console.log(button.color);
// green - public fields are accessible from outside classes

button._value = false;
console.log(button._value);
// false - no error thrown, we can access it from outside the class

Inside of the constructor, we defined two fields. As you can see one of them is marked with an _ in front of the name which is just a JavaScript naming convention to declare the field as private meaning that it can only be accessed from inside of a class method. Of course, that's just a naming convention and not something that the language itself enforces and that's why when we tried to access it, it didn't raise any error.

In ES2022 we have an easier way to declare both public and private fields. Let's have a look at this updated example:

class ButtonToggle extends HTMLElement {

    color = 'green';
    #value = true;

    toggle(){
        this.#value = !this.#value;
    }
}
const button = new ButtonToggle();
console.log(button.color);
// green - public fields are accessible from outside classes

// SyntaxError - cannot be accessed or modified from outside the class
console.log(button.#value); 
button.#value = false;

The first thing to notice is that don't have to define them inside of the constructor. Secondly, we can also define private fields by pre-pending # to their names.

The main difference with the previous example is that this time an actual error will be thrown if we try to access or modify the field outside of the class.

Private methods and getter/setters for JavaScript classes

Similar to how we did in the previous example, we can also define private methods and getter/setters for our classes.

class ButtonToggle extends HTMLElement {

    color = 'green'
    #value = true;

    #toggle(){
        this.#value = !this.#value
    }

    set #setFalseValue(){
        this.#value = false;
    }
}
const button = new ButtonToggle();
// SyntaxError - cannot be accessed or modified from outside the class
button.#toggle();
// SyntaxError - cannot be accessed or modified from outside the class
button.#setFalseValue;

In the example above we replaced toggle() with #toggle() thus making the toggle method private and only accessible from inside of the class.

Static class fields and private static methods

A static field or method is only accessible in the prototype and not in every instance of a class and ES2022 provides us with the means to define static fields and static public/private methods by using the static keyword.

Previously we would have to define them outside of the class body such as:

class ButtonToggle extends HTMLElement {
    // ... class body
}
ButtonToggle.toggle(){
    // static method define outside of the class body
}

Now, instead, we can define them directly inside of the class body with the use of the static keyword:

class ButtonToggle extends HTMLElement {

    #value = true;

    static toggle(){
        this.#value = !this.#value
    }
}
// this will work
ButtonToggle.toggle();

// SyntaxError - private static field
const button = new ButtonToggle();
button.toggle();

As you can see in the example above, we can access toggle() directly on our ButtonToggle but we cannot do the same on a new instance of it.

We can use the static keyword in front of fields and methods (both private and public) and by combining it with the # (private) we can create a private static method only accessible from inside of our prototype class.

class ButtonToggle extends HTMLElement {

    #value = true;

    static #toggle(){
        this.#value = !this.#value
    }
}
// this will error, it's a private static method
ButtonToggle.#toggle();

Ergonomic brand checks for private Fields

As we saw in the examples above, if we try to access a private field outside of a class it will throw an exception and will not return undefined like it does with public fields.

We could try using a simple try/catch inside of the class to check if the field exists:

class ButtonToggle extends HTMLElement {

   // initialised as null
    #value = null;

    get #getValue(){
        if(!this.#value){
            throw new Error('no value');
        } 
        return this.#value
    }

    static isButtonToggle(obj){
        try {
            obj.#getValue;
            return true;
        } catch {
            // could be an error internal to the getter
            return false; 
        }
    }

}

In the example above we added a private getter that will throw an error if there is no value yet. We then created a static method to access that getter and tried to determine if it exists by checking with a try/catch. The problem lies in the fact that we don't know if the code in the catch is executed because the getter is not present or simply because it threw an error.

ES2022 provides us with an easy way to check if said field belongs to a class by using the operator in. Let's rework our example code:

class ButtonToggle extends HTMLElement {

   // initialised as null
    value = null;

    get #getValue(){
        if(!this.#value){
            throw new Error('no value');
        } 
        return this.#value;
    }

    static isButtonToggle(obj){
       return #value in obj && #getValue in obj
    }

}

Our method isButtonToggle will check if the class contains the private fields 'value' and 'getValue'.

Class Static Block

This is yet another upgrade to the static fields in ES2022 that allows us to have static blocks inside of classes. The issue this is trying to solve arises from the fact that we cannot evaluate statements such as a try/catch during initialization meaning that we would have to put that code outside of the class body:

class ButtonToggle{
    value = false;

    get getValue(){
        if(!this.#value){
            throw new Error('no value');
        } 
        return this.#value
    }
}

// this has to sit outside of the class body
try {
    const val = ButtonToggle.getValue;
    ButtonToggle.value = val
} catch {
    ButtonToggle.value = false
}

As you can see, our try/catch had to be put outside of the class body. Thankfully we can replace that with a static block like the following:

// method defined outside of the class body
let initVal;

class ButtonToggle{
    #value = false;

    get getValue(){
        if(!this.#value){
            throw new Error('no value');
        } 
        return this.#value
    }

    static {
        initVal = () => {
            this.#value = this.getValue;
        }
    }
}

initVal();

We created a static block inside of our class that defines a function that we declared outside of the context of that class. As you can see, the method will have access to '#value' which is a private field or our class. They will have access to private methods and fields, being them instance-private (meaning non static, private fields) or static-private.

RegExp Match Indices

This upgrade will allow us to use the d character to specify that we want to get the indices (starting and ending) of the matches of our RegExp.

We can use Regexp.exec or String.matchAll to find a list of matches, with the main difference between them being that Regexp.exec returns its results one by one whereas String.matchAll returns an iterator. Let's see them in practice:

const fruits = 'Fruits: mango, mangosteen, orange'
const regex = /(mango)/g;

// .exec
RegExp(regex).exec(fruits);
// [
//   'mango',
//   index: 8,
//   input: 'Fruits: mango, mangosteen, orange',
//   groups: undefined
// ]

// matchAll
const matches = [...fruits.matchAll(regex)];
matches[0];
// [
//   'mango',
//   'mango',
//   index: 8,
//   input: 'Fruits: mango, mangosteen, orange',
//   groups: undefined
// ]

Both return the index of the match, the match itself, and the initial input. What we don't know are the indices at which the string ends, something that we will now be able to do like this:

const fruits = 'Fruits: mango, mangosteen, orange'
// /gd instead of the previous /g
const regex = /(mango)/gd;

const matches = [...fruits.matchAll(regex)];
matches[0];

// [
// "mango",
// "mango",
// groups: undefined
// index: 8
// indices:[]
//  [8, 13],
//  [8, 13]
// ]
// groups: undefined

As you can see it returned [8,13] as the indices of the first occurrence of 'mango' in our string.]

Top-level await

"await operator can only be used within an async method" is probably an error you have encountered frequently. In ES2022 we will be able to use it outside of the context of an async method in our modules. For example, we could defer the execution of a module and its parent until something else is imported.

This can be useful in many scenarios, for example when we have a dynamic path for a dependency that depends on a runtime value:

// we need to get the appropriate translation keys based on the language
const translationKeys = await import(`/i18n/${navigator.language}`);

Another use could be to provide a fallback for a dependency:

let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

.at()

In JavaScript you can do arr[1] to access the value at index 1 of an Array but you cannot do arr[-1] to count backward from the ending of the Array. The reason is that the brackets syntax is used not only for arrays but also for Objects, where obj[-1] would simply refer to the property '-1' of that Object.

With the .at() method we now have an easy way to access any index, positive or negative of arrays and strings:

const arr = [10,20,30,40];

// same -> 10
arr[1];
arr.at(1);

// same -> 40
arr[arr.length -1];
arr.at(-1);

Note that a negative value simply means: 'Start counting backward from the end of the array'.

Accessible Object.prototype.hasOwnProperty

In JavaScript we already have an Object.prototype.hasOwnProperty but, as the MDN documentation also suggests, it's best to not use hasOwnProperty outside the prototype itself as it is not a protected property, meaning that an object could have its property called hasOwnProperty that has nothing to do with Object.prototype.hasOwnProperty.

For example:

const obj = {
    hasOwnProperty:()=> {
        return false
    }
}

obj.hasOwnProperty('prop'); // false

As you can see, we defined our own method hasOwnProperty that has overridden the one on the prototype, an issue that is not present with Object.hasOwn().

Object.hasOwn() takes our Object as the first argument and the property we want to check as the second:

const student = {
    name: 'Mark',
    age: 18
}

Object.hasOwn(student,'age'); // true
Object.hasOwn(student,'grade'); // false

What's the feature you are most excited to try? Leave a comment down below.

If you want to learn everything about JavaScript from the basics all the way to ES2022, please check out my book available to read for free on Github. A course is also on Educative

Black Friday Deals to learn JavaScript and more

AlbertoM — Wed, 25 Nov 2020 23:30:10 +0000

Let's cut straight to the point, it's Black Friday which means it's time for some deals.

I'm the author of the Complete Guide to Modern JavaScript book and course and if until the 30th of November you'll be able to get it for 50% off at this link https://inspiredwebdev.com/store/ -> Use the coupon code BF@2020.

If you prefer to learn via courses instead of books, I can't recommend Educative enough, there are plenty of great courses and they are running a 20%off lifetime discount on their already cheap subscription, you might wanna check out my course at this link or head straight for the homepage here.

Have a safe Black Friday, stay home, study JavaScript and please let me know if you have any feedback or question.

JavaScript Challenge 7: Multiples of 3 or 5

AlbertoM — Thu, 29 Oct 2020 15:06:45 +0000

In this article we will solve together the Multiples of 3 or 5 challenge from CodeWars, you can find it at this link. The difficulty of this challenge is easy.

Let's read the task together:

This challenge is very simple and we can achieve the expected result using the remainder operator (%).

The remainder operator

What this oparator does is is return the remainder left over when one operand is divided by a second operand.

Let's look at some examples:

6%3;
// 0
6%2;
// 0
6%4;
// 2
6%5;
// 1
6%7;
// 6

Let's go over each example:

1) 6%3 = 0 because 3 * 2 = 6 with no remainder;
2) 6%2 = 0 because 2 * 3 = 6 with no remainder;
3) 6%4 = 2 because 4 * 1 = 4 with 2 remainder;
4) 6%5 = 1 because 5 * 1 = 5 with 1 remainder;
5) 6%7 = 6 because 6 * 0 = 0 with 6 remainder;

Knowing this, we can easily determine if a number is a multiple of 3 or 5 and then perform the sum we need;

Working on the solution

function solution(number){
  let sum = 0;
  for (var i = 0; i < number; i++) {
    if (i % 3 === 0 || i % 5 === 0) {
      sum += i;
    }
  }
  return sum;
}

1) first we initialize our sum variable that will hold the total sum of numbers
2) then we iterate over all the numbers, getting only the one perfectly divisible by 3 or 5, using the % (remainder) operator that we saw above
3) lastly we return the sum of all the numbers that match our condition

There are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 6: Convert string to camel case

AlbertoM — Mon, 26 Oct 2020 23:34:37 +0000

In this article we will solve together the Convert string to camel case challenge from CodeWars, you can find it at this link. The difficulty of this challenge is easy.

Let's read the task together:

The easiest way to solve this challenge will be with RegEx and we don't even need a complicate one in this case:

Write the RegExp

/[-_]\w/ig this is all we need.

[-_] will match all the underscore and dashes
\w will match any character right after a dash or underscore
/ig will perform a global case insesitive search.

The trick that will help us complete the challenge more easily is the \w which allows us to capture the letter right after a dash or underscore, meaning we can easily make it uppercase in one go.

When you want to play around with RegEx, this is a great playground that also explains how they work regexr.com.

Now that we have the most important piece of our function, let's try and build a function around it.

function toCamelCase(str){
      const regExp = /[-_]\w/ig;
      return str.replace(regExp,(match) => {
          console.log(match);
       });
}
toCamelCase("the-stealth-warrior")
// -s
// -w

String.replace() can take not only a substring but only a RegExp as the first parameter and will pass the result in the second one.

As you can see our RexExp matched each dash and the first character after.

Completing the function

Now what we are left to do with the function is to return only the uppercase letter without the dash or underscore.

function toCamelCase(str){
      const regExp = /[-_]\w/ig;
      return str.replace(regExp,(match) => {
          return match[1].toUppercase()
       });
}
toCamelCase("the-stealth-warrior")

That's it, the last line we added will return S instead of -s and W instead of -w.

here are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 5: Pete the baker

AlbertoM — Sun, 18 Oct 2020 23:31:58 +0000

In this article we will solve together the Pete the baker challenge from CodeWars, you can find it at this link. The difficulty of this challenge is medium.

Let's read the task together:

We can solve this problem in many ways but the logic behind it is simply to iterate over the keys in our Object, calculate for how many cakes an ingredient can be used, and then simply return the lowest number we got for any ingredient.

First method - For In

Let's try to solve it using a for..in loop.

function cakes(recipe, available) {

  let maxCakes;
  for(var ingredient in recipe){

  }
}

This is the skeleton of our loop, as you can see I've initialized a variable maxCakes that will keep track of how many cakes we can make. Let's continue the loop:

function cakes(recipe, available) {

  let maxCakes;
  for(var ingredient in recipe){
     if(available[ingredient]){
         const possibleCakes = Math.floor(available[ingredient] / recipe[ingredient] || 0);
         if(!maxCakes || possibleCakes < maxCakes){
             maxCakes = possibleCakes
         } 
     } else {
         return 0
     }
  }
  return maxCakes;
}

To recap:

we iterate over each ingredient in the recipe
we first check if we have that ingredient, if we don't we return 0 as we will not be able to make any cake with a missing ingredient
if we have the ingredient we calculate how many cakes we can create and we round it down to the lowest integer with Math.floor
if maxCakes is undefined (meaning it's the first iteration we make) or if the amount of possible cakes that this ingredient can provide us is less than the amount we calculated for another ingredient we update the value of maxCakes

There you have it, this is a simple solution using a for..in loop, let's try one more time with a reduce method.

Second method - Reduce

The logic behind this solution is the same as before, just the syntax will be maybe a bit harder to read at first but more concise.

function cakes(recipe, available) {
    return Object.keys(recipe).reduce(function(val, ingredient) {
            console.log(val);
            console.log(ingredient);
            return Infinity
    }, Infinity)  
}

cakes(
    {"flour":500,"sugar":200,"eggs":1},
    {"flour":1200,"sugar":1200,"eggs":5,"milk":200}
)

In this implementation we are calling reduce on the Array of keys of our recipe Object, passing Infinity as the first value. We do that because we don't know what's gonna be the max value in any of our ingredients so we need to play safe and use that instead.

If you try running the code above you will see this output:

Infinity
flour
Infinity
sugar
Infinity
eggs

We don't want to return Infinity, what we want is to return the lowest possible number of cakes possible to make, and to do that we can change our function to look like this:

function cakes(recipe, available) {

    return Object.keys(recipe).reduce(function(val, ingredient) {
        return Math.min(Math.floor(available[ingredient] / recipe[ingredient] || 0), val)
      }, Infinity)  
  }


cakes(
    {"flour":500,"sugar":200,"eggs":1},
    {"flour":1200,"sugar":1200,"eggs":5,"milk":200}
)

What we changed is this line:

return Math.min(Math.floor(available[ingredient] / recipe[ingredient] || 0), val)

What this does is get the minimum (Math.min) between the current number of cakes that we can make with this current ingredient (Math.floor(available[ingredient] / recipe[ingredient] || 0) or the value returned by the previous iteration that we are passing via the val variable.

At the first iteration, val is Infinity so any value will override it, whether it's a positive value or just 0.

There you have it, a more concise function that does the same as the first solution we adopted.

There are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 4: Who Likes It - [ES2021]

AlbertoM — Tue, 13 Oct 2020 00:05:42 +0000

In this article we will solve together the Who Likes It challenge from CodeWars, you can find it at this link. The difficulty of this challenge is easy.

Let's read the task together:

This challenge is a bit easier than the previous one we looked at and it shouldn't take us much to solve.

First, we'll try to solve it the conventional way, then I'll show you how we can approach it with one of the new features of ES2021.

Complete the challenge using a Switch statement

For this challenge we will use a switch statement an for each case we will return the requested string.

Let's start like this:

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: return 'no one likes this'; break;
  }
}

We initialized our simple function and in the first line we ensure that names exist, otherwise, we transform it into an empty Array.

We then start our switch statement using the length of the names Array as our cases.

The first one is very straightforward, for the second one onwards we will make use of string interpolation.

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: return 'no one likes this';
    case 1: return `${names[0]} likes this`;
    case 2: return `${names[0]} and ${names[1]} like this`;
    case 3: return `${names[0]}, ${names[1]} and ${names[2]} like this`;
    default: return `${names[0]}, ${names[1]} and ${(names.length - 2)} others like this`;
  }
}

If you don't know what ${} means, you can read more about string interpolation here

Since the challenge didn't pose any surprise, we could easily access the Array values at index 0 and 1 to display their names for all cases, using names.length -2 to display how many are left for our default case which will be used for any instance where we have 4 or more names.

Try to solve it with ES2021

ES2021 will bring many new additions to JavaScript one of which we will try to use for this challenge.

If you wanna learn more about everything coming to ES2021, please check out my article at this link.

We will try using Intl.ListFormat which is a constructor that enables language-sensitive list formatting.

Basically what it can do is create a formatted list from our initial Array based on a specific language, using either conjunctions or disjunctions.

const names = ["Max", "John", "Mark"];

const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

console.log(formatter.format(names));
// Max, John, and Mark

Very cool right? Let's try to apply for our function:

function likes(names) {
  names = names || [];
  switch(names.length){
    case 0: 
        return 'no one likes this';
    case 1: 
        return 
            `${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names)} likes this`; 
    case 2:
    case 3:
        return 
            `${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names)} like this`; 
    default: 
        return `${names[0]}, ${names[1]} and ${(names.length - 2)} others like this`;
  }
}

As you can see, using Intl.ListFormat we combine case 1 to 3 into one, I had to split case 1 to use likes and like correctly but other than that the function is the same.

To see more examples, head over here.

I hope you found this useful, despite the challenge itself being very easy I wanted to show you something that many of you probably don't know yet.

There are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 3: Remove Zeroes

AlbertoM — Wed, 07 Oct 2020 00:16:13 +0000

In this article we will solve together the Remove Zeroes challenge from CodeWars, you can find it at this link. The difficulty of this challenge is medium.

Let's read the task together:

If it were not for the last point regarding temporary arrays this challenge would have been easier as we could have completed it like this:

function removeZeros(array) {
  const head = []
  const tail = []
  for (const e of array) {
    if (e === 0 || e === "0") {
      tail[tail.length] = e
    } else {
      head[head.length] = e
    }
  }
  return [...head, ...tail]
}

This solution is not mine, I took it from the challenge page. Unfortunately, it is not valid as we are not allowed to define new arrays where to store the zeroes and the non-zeroes values.

In real life coding, where everything is valid, this is a perfectly fine solution so feel free to use it if you ever encounter a similar problem.

The challenge also forbids Array.prototype or Object.prototype methods so no push,slice,forEach etc..!

The way we are going to solve it without creating new arrays is simple, we are still going to iterate over the Array but instead of storing the values in temporary arrays, grab each zero and push it at the appropriate spot.

Let' start:

let limit = array.length;
let tmp;
for (let i = 0; i < limit; i++) {
    if (array[i] === 0 || array[i] === "0") {

    }
}

Now that we are iterating over the array what we need to do is to move the zero at the end but also move all the other values a step back too.

let limit = array.length;
let tmp;
for (let i = 0; i < limit; i++) {
    if (array[i] === 0 || array[i] === "0") {
        tmp = array[i];
        // iterate again over the array
         for (let j = i--; j < array.length-1; j++) {
                array[j] = array[j+1];
            }
    }
}

The new For Loop that we added is iterating again over the Array, moving items back one position, look at this example:

// before our loop
[1,2,0,3,4,5]
// after our loop
[1,2,3,4,5,5]

As you can see, our loop will move every value back one spot and we will then put the zero back at the end, replacing the now duplicate final value.

To save the zero value we created a tmp variable because we need to know if it's an integer 0 or a string '0'.

Let's finalize the function like so:

function removeZeros(array) {
    let limit = array.length;
    let tmp;
    for (let i = 0; i < limit; i++) {
        if (array[i] === 0 || array[i] === "0") {
            tmp = array[i];
            // iterate again over the array
            for (let j = i--; j < array.length-1; j++) {
                    array[j] = array[j+1];
                }
                // replace last value with the zero
                array[array.length-1] = tmp;
                limit --;
        }
    }
    return array;
}

After we moved everything back one place we replace the last value with array[array.length-1] = tmp;

If you are wondering why are we reducing the limit variable at the end of the loop it's because we are moving zeroes at the back of the array so we are effectively reducing the portion of the array that needs to be checked by one after each iteration where zero is found.

This is an example:

let array =  [1,2,'0',3,0,4,5];
// after one iteration where a zero is found
// [1,2,3,0,4,5,'0'];
// after another iteration where a zero is found
// [1,2,3,4,5,'0',0];
// if we don't reduce the size of the iteration we end up with one more iteration like this
// [1,2,3,4,5,0,'0'];

If you see in the above example, if we don't reduce the size of the iterable array, we will end up with one more iteration where we will push the '0' at the back, resulting in a wrong result as we are not respecting the correct order.

That is why we are calling limit --.

There are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 2: Word Scrambles

AlbertoM — Sun, 04 Oct 2020 23:27:44 +0000

In this article we will solve together the Scrambles challenge from CodeWars, you can find it at this link.

Let's read the task together:

The first example we see is this one:

scramble('rkqodlw', 'world') ==> True

First Solution

My Approach for this challenge will be to iterate over the second string and create a map of how many occurrences of a character appear in it.

Let's start by doing this:

const count = {};

str2.split('').forEach((c) => {
    count[c] = count[c] ? count[c]+=1 : 1;
})

I've instantiated an empty object and then I looped over the str2 to populate it, using the letters as the keys and increasing a count to know how many times each letter appears.

We need to do this because if we didn't keep track of the count, we could end up with errors where str1 contains all the letters from str2 but only once, meaning it does not fulfill the requirement of being able to be re-arranged into str2.

Be careful, we cannot call .forEach on a string, that's why we need to first convert it into an array using .split('').

Now, taking the first example and running the code against it we will get something like this:

{ 
    w: 1,
    o: 1,
    r: 1,
    l: 1,
    d: 1 
}

What we have to do now is to iterate over the first string and for each character of it, check if it appears in this Object we created. If it does, we decrease the count by 1 every time we find it.

str1.split('').forEach((c) => {
    !!count[c] && count[c]--
});

Here we are doing the same as before, transforming the string into an Array and iterating over it. At each iteration, we check if the count has a truthy value and in that case, we reduce it by 1. We need to check first, because the second string may contain different letters altogether so it could try accessing the Object with properties that don't exist on it.

Once we have done this we need to check if every property of the count Object is now at 0.

return Object.keys(count).every((key) => count[key] === 0);

If you don't know how to use .every you can read more about in my article about find and replace in Array.

Putting everything together, it will look like this:

function scramble(str1, str2) {

    const count = {};

    str2.split('').forEach((c) => {
        count[c] = count[c] ? count[c]+=1 : 1;
    })

    str1.split('').forEach((c) => {
        count[c] && count[c]--;
    });

    return Object.keys(count).every((key) => count[key] === 0);
}

Second Solution

Let's try now with a different solution and instead of creating a count map of the letters from str2 let's do it with str1.

const count = {};

str1.split('').forEach((c) => {
    count[c] = count[c] ? count[c]+=1 : 1;
})

This is the same code as before, I just replaced str2 with str1.

Now, instead of mapping str1, reducing the count of each letter from str2 and then checking the Object if all keys are now of value 0, we can do it a bit differently.

We can loop over str2 and for each letter, we try to reduce the value in our count Object. If the action succeeds for all letters in str2 it means that str1 can be rearranged to form str2.

Let's see it in action:

return str2.split('').every((c) => {
    return count[c]--
});

What this code is doing is iterating over each letter of str2, reducing the count each time.

We don't care if the count reached 0 or not in this case because str1 may be much much longer than str2.

What we are checking here is that return count[c]-- will not return false either by not finding the corresponding match or by going to a negative value which would mean that str2 contains more occurrences of that letter than str1.

The complete solutions looks like this:

function scramble(str1, str2) {

    const count = {};

    str1.split('').forEach((c) => {
      count[c] = count[c] ? count[c]+=1 : 1;
    })

    return str2.split('').every((c) => {
        return count[c]--
    });

}

There are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

JavaScript Challenge 1: Simple Pig Latin

AlbertoM — Tue, 29 Sep 2020 23:19:46 +0000

In this article we will solve together the Simple Pig Latin challenge from CodeWars, you can find it at this link.

Let's read the task together:

The first example given to us is this one

pigIt('Pig latin is cool'); // igPay atinlay siay oolcay

Alright, after reading it one time we can already see different ways of solving this problem:

Using RegEx to remove the first character after space and to add ay at the end of each word
Splitting the string in an array and iterating over each portion

RegEx can be very powerful and allow you to do a lot in very little but they can also get very hard to read for your others and also for yourself going back to a project after several times.

Let's go with the more basic approach of using JavaScript to iterate over the string and perform our modifications.

First, let's split our string into an array:

const arr = str.split(" ");

Next, we want to iterate over the array, removing the first character and appending it at the end, followed by ay.

arr.map((word) => {
    return `${word.substr(1)}${word.substr(0,1)}ay`
})

Here we are iterating over the strings with map and at each iteration, we remove the first character with substr(1) which will return us a substring from character 1 to the end of the string, then we add the first letter and finally we append ay at the end of it.

The only problem with this implementation is that it will not skip characters such as !,? etc...
Let's use a very simple RegEx to determine if our character is a letter.

We can implement a simple check like the following:

word.match(/[A-z]/i)

This will ensure that only characters from a-z will be taken into account

Now let's put everything together:

function pigIt(str) {
    const arr = str.split(' ');
    return arr.map((word) => {
        return word.match(/[A-z]/i) ?
            `${word.substr(1)}${word.substr(0,1)}ay` : word
    }).join(' ');
}

There you have it, a simple functions that will:

iterate over each word in a string
remove the first letter of said string and add it at the end of it
append ay at the end of each word

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

Everything new coming in ES2021

AlbertoM — Tue, 28 Jul 2020 12:01:00 +0000

Every year since 2015, JavaScript has been receiving constant yearly updates to its specification with new interesting features added.

Despite the release of ES2021 still being far in the future, we can already have a look at what's to come since many features already reached stage 4 and will be included in the specification.

For those of you who don't know, there are 4 stages in the proposal process, with the 4th one being the last one which marks the proposal as finished.

As a developer, it's important to stay updated with the new specs of a language and if you feel like you've been left behind by the many updates that JavaScript received in the past years, I can recommend you my book that covers everything from the basics of the language all the way to the latest ES2020 specs, including a little intro to TypeScript. You can read it for free on Github where you will also find links where to buy the ebook or you can check out my course on Educative

Now, let's get started with the first of the new ES2021 features:

String.prototype.replaceAll

String.replace is a useful method that allows us to replace a pattern in a string with something else. The problem is that if we want to use a string as a pattern and not a RegEx, only the first occurrence will get replaced.

const str = 'I like my dog, my dog loves me';
const newStr = str.replace('dog', 'cat');
newStr;
// "I like my cat, my dog loves me"

As the name implies, String.replaceAll will do exactly what we need in this scenario, replace all the matching pattern, allowing us to easily replace all mentions of a substring, without the use of RegEx:

const str = 'I like my dog, my dog loves me';
const newStr = str.replaceAll('dog', 'cat');
newStr;
// "I like my cat, my cat loves me"

Promise.any

During the past years we've seen new methods such as Promise.all and Promise.race with ES6, Promise.allSettled last year with ES2020 and ES2021 will introduce a new one: Promise.any.

I bet you can already tell what it does from the name of the method.

Promise.any shorts-circuits once a given promise is fulfilled but will continue until all promises are rejected.

Don't get confused with Promise.race because with race, the promise short-circuits once one of the given promises resolves or rejects.

They have similar behavior for what concerns fulfillment but very different for rejection.

If all the promises inside of Promise.any fails, it will throw an AggregateError (a subclass of Error) containing the rejection reasons of all the promises.

We can use it like this:

// example taken from: https://github.com/tc39/proposal-promise-any
Promise.any(promises).then(
  (first) => {
    // Any of the promises was fulfilled.
  },
  (error) => {
    // All of the promises were rejected.
  }
);

Logical Operators and Assignment Expressions

With ES2021 we will be able to combine Logical Operators (&&, || and ??) with Assignment Expression (=) similarly to how it's already possible to do in Ruby.

If you skipped on ES2020 you may not be aware of ?? which is the nullish coalescing operator. Let's look at an example:

const a = null ?? 'test';
// 'test'
const b = 0 ?? 'test';
// 0

The nullish coalescing operator returns the right hand-side when the left-hand-side is null or undefined, otherwise it returns the left hand-side. In the first example the left-hand-side was null thus it returned the right-hand-side while on the second example it returned the left-hand-side because it was neither null nor undefined.

Moving back to ES2021 stuff, in JavaScript we already have many assignment opeartors like the following basic example:

let a = 0;
a +=2;
// 2

But with this new proposal we will be able to do the following:

a ||= b;
// equivalent to a = a || b

c &&= d;
// equivalent to c = c && d

e ??= f;
// equivalent to e = e ?? f

Let's go over each one by one:

a ||= b will return a if a is a truthy value, or b if a is falsy
c &&= d will return d if both c and d are truthy, or c otherwise
e ??= f will return f if e is null or undefined otherwise it will return e

Numeric Separators

The introduction of Numeric Separators will make it easier to read numeric values by using the _ (underscore) character to provide a separation between groups of digits.

Let's look at more examples:

x = 100_000;
// 100 thousand

dollar = 55_90;
// 55 dollar 90 cents

fraction = 0.000_1;
// 1 thousandth

WeakRefs

From MDN: A weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector.

With this new proposal for ES2021, we will be able to create weak references to objects with the WeakRef class. Please follow the link below to read a more in-depth explanation.

Intl.ListFormat

The Intl.ListFormat object is a constructor for objects that enable language-sensitive list formatting.

Looking at an example is easier than explaining it:

const list = ['Apple', 'Orange', 'Banana'];

new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);
// Apple, Orange and Banana

new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list);
// Apple, Orange or Banana

You are not limited to English, let's try with a few different languages:

const list = ['Apple', 'Orange', 'Banana'];

// Italian
console.log(new Intl.ListFormat('it', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange e Banana

// Spanish
console.log(new Intl.ListFormat('es', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange y Banana

// German
console.log(new Intl.ListFormat('de', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange und Banana

Pretty neat uh? For a more detailed look at this specification check out the link below.

dateStyle and timeStyle options for Intl.DateTimeFormat

We can use dateStyle and timeStyle to request a locale-specific date and time of a given length.

// short
new Intl.DateTimeFormat("en" , {
  timeStyle: "short"
}).format(Date.now())
// "2:45 PM"

// medium
new Intl.DateTimeFormat("en" , {
  timeStyle: "medium"
}).format(Date.now())
// "2:45:53 PM"

// long
new Intl.DateTimeFormat("en" , {
  timeStyle: "long"
}).format(Date.now())
// "2:46:05 PM GMT+7"

Now let's try with dateStyle:

// short
new Intl.DateTimeFormat("en" , {
  dateStyle: "short"
}).format(Date.now())
// "7/25/20"

// medium
new Intl.DateTimeFormat("en" , {
  dateStyle: "medium"
}).format(Date.now())
// "Jul 25, 2020"

// long
new Intl.DateTimeFormat("en" , {
  dateStyle: "long"
}).format(Date.now())
// "July 25, 2020"

You can pass whatever locale you want and you can also pass both dateStyle and timeStyle options at the same time, choosing between the three options of 'short', 'medium', and 'long' that best suit your needs.

What's the feature you are most excited to try? Leave a comment down below, for me, it's probably the combination of Logical Operators and Assignment Expressions, I love my syntax to be short and clean.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative

Find and Replace elements in Array with JavaScript

AlbertoM — Mon, 06 Jul 2020 22:54:46 +0000

Arrays are a very common data structure and it's important to know how to manipulate them by retrieving, adding, and replacing data inside of them.

In this article, we are going to learn what are the different ways to find and replace items inside of arrays.

Check that an Array contains a value

First, let's look at different ways of checking if our Array includes a certain value provided.

We can do that in different ways such as:

const arr = [1,2,3,4,5];

arr.includes(2);
// true
arr.includes(6);
// false

Array.includes is probably the easiest method to remember and it will return us true or false if our Array includes or not the value we passed.

This method can take an additional argument which defines the index from where we want to start looking, leave empty if you want to check the whole Array.

Let's continue with more methods:

const arr = [1,2,3,4,5];

!!arr.find((a) => a === 2);
// true
!!arr.find((a) => a === 6);
// false

Array.find is also another method we can use to check if our Array contains a certain value.

This method will return the value itself or undefined if no value is found so we can use the !! operator to convert the result to boolean and quickly see if there's a match or not.

It's a more powerful method compared to Array.includes as we can pass a callback to it, not just a value to check, meaning that we can do more complex checks such as:

const arr = [1,2,3,4,5];

!!arr.find((a) => a > 2 && a < 4);
// true

Being able to pass a callback to it it means that unless your check is a very straightforward one, you are most likely going to use find over includes.

You can pass a second argument to the callback function defining the starting point where to start checking, leave empty to check the whole Array.

Next up we have Array.indexOf and Array.findIndex:

const arr = [1,2,3,4,5];

arr.indexOf(1) !== -1;
// true
arr.indexOf(6) !== -1;
// false

arr.findIndex((el) => el === 1) !== -1;
// true
arr.findIndex((el) => el === 6) !== -1;
// false

Array.indexOf and Array.findIndex are similar because they both return the index of the first matching element found in our Array, returning us -1 if it's not found.

To check if an element exists, we simply need to check if the returned value is -1 or not.

These methods are useful because they can be used to both checks if an element exists in the Array while at the same time getting a reference as to where that element is positioned, which we can use to then replace that said element.

The difference between the two methods is the same as the one we saw between Array.includes and Array.find, where the first one (Array.indexOf) will accept a value to check whereas the second one (Array.findIndex) will accept a callback to perform more advanced checks.

Similarly to all the methods we previously saw, you can also define a starting index where to start check the Array.

Next up are two new metho introduced in ES6 (ES2015):

const arr = [1,2,3,4,5];

arr.some((el) => el === 2);
// true
arr.every((el) => el === 3);
// false

Array.some will check if at least one value in the array matches the condition in our callback function and Array.every will check that ALL of the elements in the Array match that condition.

Replacing an element of an Array at a specific index

Now that we know how to check if the Array includes a specific element, let's say we want to replace that element with something else.

Knowing the methods above, it couldn't be easier!

In order to replace an element we need to know its index, so let's see some examples using the methods we just learned:

const arr = [1,2,3,4,5];

const index = arr.indexOf(2);
arr[index] = 0;
arr;
// [1,0,3,4,5];

As you can see, first, we got the index of the element we wanted to change, in this case, the number 2 and then we replaced it using the brackets notation arr[index].

We can do the same using findIndex:

const arr = [1,2,3,4,5];

const index = arr.findIndex((el) => el === 2);
arr[index] = 0;
arr;
// [1,0,3,4,5];

Pretty easy right? Using findIndex we can also check scenarios like the following where we have an Array of Objects:

const arr = [
    {
        id:1,
        val: 'one'
    },
    {
        id:2,
        val: 'two'
    },
    {
        id:3,
        val: 'three'
    },
    {
        id:4,
        val: 'four'
    },
    {
        id:5,
        val: 'five'
    },
];

const index = arr.findIndex((el) => el.id === 2);
arr[index] = {
    id:0,
    val: 'zero'
};
arr;
// [
//     {
//         id:1,
//         val: 'one'
//     },
//     {
//         id:0,
//         val: 'zero'
//     },
//     {
//         id:3,
//         val: 'three'
//     },
//     {
//         id:4,
//         val: 'four'
//     },
//     {
//         id:5,
//         val: 'five'
//     },
// ];

As you can see, using findIndex we can easily find and then replace Objects in an Array of Objects.

Let's say we are not interested in replacing a value but we just want to remove it, we will now look at different ways of doing so.

&bnbsp;

Removing a value from an Array

First, let's look at the more basic methods to remove values from an Array: Array.pop and Array.shift

const arr = [1,2,3,4,5];
arr.pop();
arr;
// [1,2,3,4]

const arr2 = [1,2,3,4,5];
arr2.shift();
arr2;
// [2,3,4,5];

Array.pop will remove the last element of the Array while Array.shift will remove the first one. No additional arguments are allowed, so you can see that these methods are fairly basic.

Both methods will modify your origianl array and both return the removed element so you can do the following:

const arr = [1,2,3,4,5];
const el = arr.pop();
el;
// 1

Now we will look at a couple of ways to remove a specific element from an array.

First, let's look at Array.splice used in combination with Array.indexOf.

Array.splice allows us to remove elements from an Array starting from a specific index. We can provide a second argument to specify how many elements to delete.

const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

arr.splice(index,1);
arr;
// [1,3,4,5];

const arr2 = [1,2,3,4,5];
const index = arr2.indexOf(2);

arr2.splice(index);
arr2;
// [1]

As you can see, in the first example we specified 1 as the number of elements to remove, whereas in the second example we didn't pass any argument thus removing all items in the array from our starting index.

Array.splice will modify your original array and return the removed elements so you can do the following:

const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

const splicedArr = arr.splice(index,1);
arr;
// [1,3,4,5];

splicedArr;
// [2]

Next up, we can also remove elements from an array based on a condition and not just on an index with the use of Array.filter:

let arr = [1,2,3,4,5];
const newArr = arr.filter((el) => el >2);

newArr;
// [3,4,5]
arr;
// [1,2,3,4,5];

Differently from Array.pop, Array.shift and Array.splice , Array.filter creates a new array with all the elements that pass the condition in the callback function so your original array won't get modified as you can see from the code above.

In this case, our new Array consisted of all the elements of the original that are greater than 2.

Thank you very much for reading. Follow me on DevTo or on my blog at inspiredwebdev or on twitter. Check out Educative.io for interactive programming courses.

Disclaimer: Links to Amazon and Educative are affiliate links, purchases you make will generate extra commissions for me. Thank you

Get my ebook on Amazon and Leanpub