My name is Marcelo Zarate and on my first post I stated that one of the reasons I've started this blog is to learn. So today, instead of the classic blog entry with very neat and detailed explanations of what to do here, and there, we are going to learn together. Or, if you already know the subject, you are going to watch and enjoy the experiment. I'm going to try learning Alpine.js alongside you. I have some experience with frontend frameworks, some good memories with jQuery. After reading state of Js 2021 I've decided to give Alpine a go, at least for small projects.

The mission

Let's build a simple app just by using

• Alpine.js
• JSON Placeholder Fake API

The conditions

I've never used any of the above. If you also haven't, then this post is probably be more interesting for you. Conditions actually are:

• No cheating. I will start from Alpine.js documentation, and try to work it out from there.
• No googling. Or at least, being honest if I get stuck and I need to search something.

Let's start

Introduction

Ok, first we go to Alpine.js homepage and the first screen is an example of usage

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

    <span x-show="open">
      Content...
    </span>
</div>

We just try it out locally, and it works!

So, deducting from the example it seems that x-show attachs some visibility attribute to the block. x-data defines the (data/model?) and @click really looks like Vue v-on, triggering the assignment open = true when the button is clicked.

Fetching data

Ok, from the homepage example, we are going to preserve only the "importing"

<script src="//unpkg.com/alpinejs" defer></script>

We need to fetch the data from the Fake API, following its guide

I found this service after reading Roger Camargo's blog article 3 ways to mock an API in JAvascript. Great article if you have any interest in that topic!

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));

So, it seems that our main div is going to be

<div x-data="{ users: [] }"
    x-init="fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(data => users = data)">
</div>

Now, since we are populating x-data with the information from the fetch, and users is an array, we need a frontend sintax to loop through that array, looking down in alpine documentation we can find the x-for directive that states "Repeat a block of HTML based on a data set". Fits perfectly.

<template x-for="user in users">
    <h2 x-text="user.name"></h2>
    <span x-text="user.username"></span> - <span x-text="user.email"></span>
</template>

Seems to kinda work? I suspect something here, but we better go to the x-for documenation (remember, I've never used Alpine)

Documentation says:

There are two rules worth noting about x-for:

• x-for MUST be declared on a element
• That element MUST have only one root element

Ok, so confirmed, we need to wrap our tags with one root element. I'll be using a div tag, should be something more meaningful, I don't know if the fragment concept from React is available in Alpine, but let's keep it simple for now:

<template x-for="user in users">
    <div>
        <h2 x-text="user.name"></h2>
        <span x-text="user.username"></span> - <span x-text="user.email"></span>
    </div>
</template>

And the result:

Deleting

Ok, so what if we want to delete one user? Fake API allow us to simulate a delete request, quoting the guide

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});

Then we might need to add a button like this

<button x-on:click="fetch('https://jsonplaceholder.typicode.com/users/'+user.id, {
    method: 'DELETE',
});">
    Delete user
</button>

Editing

Well, instead of editing in another page, we want to actually toggle editing in the same page, so we probably need something to hide or display inputs. Quickly scrapping we can see x-show and x-if there, they don't look too much different so we are going with the first one that doesn't use the template tag.

<div x-show="open">
  ...
</div>

And we will need to populate and probably sync the data, seems that x-model is going to serve us well.

<div x-data="{ search: '' }">
  <input type="text" x-model="search">

  Searching for: <span x-text="search"></span>
</div>

So we are thinking of something like (we will allow to edit only the name for now, we could just extend the behaviour for other parameters)

<div x-show="editUser">
    <input type="text" x-model="user.name">
</div>

And declaring the boolean editUser in x-data. But that variable is going to be shared with all users, so, if I program a button to edit some user, all the users are going to show their edit inputs (I tried at first, but didn't liked it). So, we are going to need a way to identify in the frontend WHICH user are we currently editing.

We will change the initial x-data

<!-- BEFORE -->
<div x-data="{ users: [] }" ...>
<!-- AFTER -->
<div x-data="{ users: [], editingUser: 0}" ...>

and we will set editingUser with the id of the current user to edit.

<button x-on:click="editingUser = user.id;">Edit Records</button>

Now, in the x-show, if the user.id matches the editingUser, show the edit box

<div x-show="user.id === editingUser">
    <input type="text" x-model="user.name">
</div>

Now, inside that block, we will also need some buttons to actually save the edit, and another one to cancel the edition

<button x-on:click="console.log('saving user: '+user.id);">Save</button><button x-on:click="editingUser = null;">Cancel</button>

purists will come after us for that editingUser = null

Now, an extra, hitting on cancel would be nice to make the value as the original one, but since x-model syncs the input with the actual value, we will need to store the original name in case the user hits cancel and wants it back

So our div becomes

<div x-data="{ users: [], editingUser: 0, originalName: ''}" ...>

And the cancel button

<button x-on:click="editingUser = null; user.name = originalName;">Cancel</button>

Updating

Here, we have two options, to send a PUT request or PATCH request. We are going with the latter

According to the guide on JSON Placeholder:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Now our "save" button on editing changes from this

<button x-on:click="console.log('saving user: '+user.id);">Save</button><button x-on:click="editingUser = null;">Cancel</button>

to this:

<button x-on:click="fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PATCH',
    body: JSON.stringify({
      name: 'Test',
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
    })
    .then((response) => response.json())
    .then((json) => console.log(json));">
    Save
</button>

It works, well, kind of. If we inspect the network tab in developer tools we can see that the endpoint is called correctly, but, in the case of creating/updating/deleting, according to the JSON Placeholder guide:

Important: resource will not be really updated on the server but it will be faked as if.

Finishing touches

So well. This is our final "functional" CRUD with Alpine.js and JSON Placeholder.

Looks pretty boring. Let's spend no more than 5 minutes with style touches using Tailwind CSS classes and DaisyUI default themes.

The code

See you around!

Have you ever been in a position where you have not to validate a strict format, but to try to get the number provided even if it has spaces or different separator?

Chances are, if you work in a country where the dot is used to distinguish between the integer and decimal part, you probably didn't need to, as most coding languages and computational number representations use this style (e.g.: 123.45, 0.99).

In this article, I'm going to share a bit about this subject and how I overcame these differences with some python code.

Numbers format (Imperial vs European)

This article by Raluca Cristina Neagu: Number formatting in Europe vs. the US is a piece of gold in a subject. Not only because of the references included, but the way the author describes the subject as a short, clear story. I know I probably got your attention for maybe one extra minute or so. The quote below is for you, then:

Why are there different number formats? It appears that the comma separator was introduced to avoid confusion with the dot being used as operator, bringing chaos to these days.

So who to blame? Haven't read all the material about it, but it seems that decimal point popularity comes from Napier usage, and decimal comma popularity comes from Leibniz. You probably hate them both if you had the chance to learn from their work.

Ok, so what's the standard, who wins? Well, The International System of Units (SI) calls it a draw. You can use comma, or dot, and it is valid. The real losers here are the separators, they must be a space, or nothing at all. No dots, no commas. 9,999,999.99 is not valid, neither 9.999.999,99 it should be 9 999 999.99 or 9 999 999,99.

Dealing with conversion

This is a tiny list of some of the formats I've found while automatic processing probably a hundred of documents. Numbers are fictional, formats are not.

You get the idea, so we first need to remove the $ and white spaces

Now, only the first one won't raise any errors if we try to parse with python's useful float method. We need to remove the three-digit separators.

• Imperial format: We remove the , and we are good, as the decimal separator . would match the computational representation.

• European format: If we remove the , first, we would lose reference of what is the integer, and what is the decimal part. So we need to first remove any . digit separator (step 1), and then, replace the , by a . (step 2)

If you think like a machine, you probably noticed that we can't apply both indistinctly, that we need first to find out if we are dealing with one type of number format or another.

Don’t do the natural thing, the impulsive thing. - Dale Carnegie

Well, luckily, Dale Carnegie know nothing about programming, so we're going full impulsive here.

for i in range(-1, -len(text), -1):
        if text[i] == "." or text[i] == ",":
            foundSeparator = text[i]
            break

We traverse the number string in reverse order until we find the decimal separator, then, we find our number format. No more questions, your honor.

Where's the full code?

I'll leave below the code with one giant warning. DO NOT RELY ON THIS FOR CRITICAL APPLICATIONS. Even when I wrote this in a work environment, the outcomes of this algorithm can be somewhat verified, and no lives or jobs depend on the accurateness of it (except, maybe mine).

I added some basic testing as well, so you can check when it fails.

import math
def getNumberWithAnySeparator(text):
    text = str(text).replace(" ", "")
    text = text.replace("$", "")
    foundSeparator = ""
    for i in range(-1, -len(text), -1):
        if text[i] == "." or text[i] == ",":
            foundSeparator = text[i]
            break
    if foundSeparator == ".": # Imperial format xxx,xxx.xx
        text = text.replace(",", "")
    if foundSeparator == ",": # European format xxx.xxx,xx
        text = text.replace(".", "")
        text = text.replace(",", ".")
    return tryFloat(text)

def tryFloat(text):
    try:
        auxValue = float(text)
    except ValueError:
        return None
    if not math.isnan(auxValue):
        return auxValue
    else:
        return None

import unittest

class TestConversion(unittest.TestCase):
    def test_zero(self):
        """
        Test that 0 converts to 0
        """
        text = "0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)
        text = "0,0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)
        text = "$0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)
        text = "$ 0,0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)
        text = "-0.0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)
        text = "0000000000000000.0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 0)

    def test_alpha(self):
        """
        Test that alphanumeric converts to None
        """
        text = "a0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)
        text = "zero"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)
        text = "l2"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)
        text = "OOO"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)
        text = "0z"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)

    def test_positive(self):
        """
        Test that some positive numbers convert to their value
        """
        text = "123"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 123)
        text = "+99"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 99)
        text = "$159195.533"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 159195.533)
        text = "$ 155, 132, 158.0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 155132158)
        text = "32 913 646"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 32913646)
        text = "12.529,52"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 12529.52)

    def test_negative(self):
        """
        Test that some negative numbers convert to their value
        """
        text = "-123"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -123)
        text = "-99"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -99)
        text = "-$159195.533"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -159195.533)
        text = "-$ 155, 132, 158.0"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -155132158)
        text = "-32 913 646"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -32913646)
        text = "-12.529,52"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -12529.52)

    def test_mix_cases(self):
        """
        Test cases where there is mix of patterns
        """
        text = "-123.4124.2,521.2"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, None)
        text = "-$99,125 242 5"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, -99.1252425)
        text = ",15.9195533"
        result = getNumberWithAnySeparator(text)
        self.assertEqual(result, 15.9195533)

if __name__ == '__main__':
    unittest.main()

See you around!

Portrait picture has been designed used "VS" image created by jcomp - www.freepik.es

YouTube's bottom navigation

Are you familiar with TailwindCSS? Let's use it to make a similar one that changes to a traditional sidebar when viewport is bigger

Don't know TailwindCSS? You probably first want to read Chris Bongers and his honest opinion on Tailwind CSS and then head straight to its great documentation

UX and motivation

A while ago I read this article The thumb zone - designing for mobile users, and it brought to me a lot of concerns about UX. Sometimes we are so used to a particular type of navigation or components, that we don't take the time to ask the following question

Are we delivering a comfort navigation and a smooth user experience?

Having this in mind, for my next app (a PWA, actually) I wanted a sticky navigation bar like showed before, but changing to a more classical sidebar type when the viewport was medium or larger. Widescreens are getting wider every day, and this kind of navigation will definitively be ugly and uncomfortable with big resolutions.

Approach

Tailwind uses a mobile first breakpoint approach, this means every class we use is applied to the minimum size and larger, and every breakpoint we specify will be applied to that one and larger. That means if we try to add CSS for small screens, we usually don't use breakpoints at all.

For example:

<span class="hidden md:block text-xs pt-1">Add</span>

This will apply the following styles:

• hidden (display: hidden; - This will not be visible on mobile)
• md:block (display:block; - on medium viewport and larger, this will be visible as block)
• text-xs (font-size: 0.75rem; line-height: 1rem; - small text on every viewport)
• pt-1 (padding-top: 0.25rem; - padding top)

Coding

With JIT mode, Tailwind allows a whole different experience when playing around with designs. But, for this small component, it's just great to use Tailwind Play.

Bad news

This article is not about how to use the CSS framework, or a how to tutorial, just a simple introduction to the problem and the Why.

Good news

Full code is available here, of course you can improve and modify it as you need. Click the HTML button to see the layout change.

That's it! Hope you find it useful. And if not, thanks for reading anyway.

See you around!

So, this is what we are going to achieve in this article:

Objective

The goal is to have an option to display an alert in PyQt by issuing

r = showMessageBox("Title", "All the body text", "Question", True, ["Confirm", "No way!"], returnTrue)

An experienced PyQt user might be wondering why not using the default constructor? Well, although some options are available in it, like setting the buttons text, title and icon, there are limited options regarding customization of the buttons and actions triggered by them. So we are building our own simple PyQt alert dialog.

Coding of the PyQt simple dialog

We will define some fixed strings for the available icons ["NoIcon", "Information", "Warning", "Critical", "Question"] and an option to allow for two button or single button mode. We are going to add the possibility for a callback to be executed whenever the uses clicks on OK button.

from PyQt5.QtWidgets import QMessageBox

def showMessageBox(title, text, icon="NoIcon", buttons=False, buttonsText=[], callback=None):
    qmb = QMessageBox()
    qmb.setText(text)
    qmb.setWindowTitle(title)
    if icon == "NoIcon":
        qmb.setIcon(QMessageBox.NoIcon)
    if icon == "Information":
        qmb.setIcon(QMessageBox.Information)
    if icon == "Warning":
        qmb.setIcon(QMessageBox.Warning)
    if icon == "Critical":
        qmb.setIcon(QMessageBox.Critical)
    if icon == "Question":
        qmb.setIcon(QMessageBox.Question)

    if buttons == True:
        qmb.setStandardButtons(QMessageBox.Ok | QMessageBox.Cancel)
        if len(buttonsText) == 2:
            qmb.button(QMessageBox.Ok).setText(buttonsText[0])
            qmb.button(QMessageBox.Cancel).setText(buttonsText[1])
    else:
        if len(buttonsText) == 1:
            qmb.setStandardButtons(QMessageBox.Ok)
            qmb.button(QMessageBox.Ok).setText(buttonsText[0])

    if qmb.exec() == QMessageBox.Ok:
        if callback:
            return callback()
        else:
            return None
    else:
        return None

PyQt simple message box examples

Minimal alert box

showMessageBox("Hey!", "How you doin'?")

Show error dialog

showMessageBox("Danger", "A critical error just happened", "Critical")

Confirmation dialog with default buttons

showMessageBox("Confirm action", "Are you comfortable with this action?", "Warning", True)

Confirmation dialog with custom text buttons and callback

returnedStuff = showMessageBox("Erasing records", "Are you absolutely sure you want to erase the selected records? This operation is not reversible", "Warning", True, ["Yes, erase them", "No, don't do it"], eraseSelected)

Full code

In case you just want to try it out, saving this code and running it with python simplealertdialog.py

Wrapping up

That's it! Simple, yet kind of useful. If you have any suggestions or improvements, I beg you to do it directly in the comments. As I mentioned, I'm almost a trainee in PyQt, but I wanted to share this with you.

See you around!

Clarence Seedorf running with the UEFA Champions League trophy

The problem

For the most part of the world, a game in a league can have three outcomes: win, draw or loss. A winning team gets 3 points, a losing team gets 0, and a draw awards each team with 1 point. We will create a simple script using JavaScript that will process a set of matches and will provide as output a nifty table like this

Reference

• PL: Played (matches)
• W: Wins
• D: Draws
• L: Losses
• GF: Goals for
• GA: Goals against
• GD: Goal difference (GF - GA)
• P: Points

Dynamically generating an HTML table

With aid from the HTMLTableElement interface, you can follow this tutorial from Valentino Gagliardi to grasp an idea of how are we going to modify the DOM dynamically using JavaScript. The main purpose of this article is not how to introduce the data, but how to process and get the needed information for the sports objective.

Storing the data

We are going to store the matches in an array of objects. Each object will contain the basic information about the match the simplest way possible

{
  home: "Home Team Name",
  away: "Away Team Name",
  result: "1-2"
}

Input for the table

We will provide the insertTableBody and insertTableHead function with the data, with the following format example.

{NAME: "River Plate" , PL: 14, W: 7, D: 6, L: 1, GF: 19, GA: 9, GD: 10, P: 27}

Processing the input

So, we must build an array with that information, but how do we convert an array of matches to that? We are going to use two functions, one to prepare the info and get the participating teams, and another one to calculate the amounts of every property. The basic pseudocode is

data = []
getDataFromMatches(matches)
    foreach match from matches
        getHomeTeam of match
        getAwayTeam of match
        getHomeGoals of match
        getAwayGoals of match
        if homeTeam is not in data
            add homeTeam to data with empty scores
        if awayTeam is not in data
            add awayTeam to data with empty scores
        processMatchResult(data, homeTeam, awayTeam, homeGoals, awayGoals)
    sort data by points, if equal, by goal difference, if equal, by goals for

In the above function, we only get the data from the object, and we initialize the scores with the team names. Then, it's all up to processMatchResult to fill the scores for every match. In this case, the winning, draw, lose, and points depend on the comparison of the scores, but the played, goals for, goals against, and goal difference only represent simple additions.

processMatchResult(data, homeTeam, awayTeam, homeGoals, awayGoals)
    homeTeam.PLAYED = homeTeam.PLAYED + 1
    awayTeam.PLAYED = awayTeam.PLAYED + 1
    homeTeam.GF = homeTeam.GF + homeGoals
    awayTeam.GF = awayTeam.GF + awayGoals
    homeTeam.GA = homeTeam.GA + awayGoals
    awayTeam.GA = awayTeam.GA + homeGoals
    homeTeam.GD = homeTeam.GF - homeTeam.GA
    awayTeam.GD = awayTeam.GF - awayTeam.GA

    if homeGoals == awayGoals
        homeTeam.D = homeTeam.D + 1
        homeTeam.P = homeTeam.P + 1
        awayTeam.D = awayTeam.D + 1
        awayTeam.P = awayTeam.P + 1
    if homeGoals > awayGoals
        homeTeam.W = homeTeam.W + 1
        homeTeam.P = homeTeam.P + 3
        awayTeam.L = awayTeam.L + 1
        awayTeam.P = awayTeam.P + 0
    if homeGoals < awayGoals
        awayTeam.W = awayTeam.W + 1
        awayTeam.P = awayTeam.P + 3
        homeTeam.L = homeTeam.L + 1
        homeTeam.P = homeTeam.P + 0

JavaScript code

Now let's just write those functions in JavaScript.

let data = [];

function getDataFromMatches(matches) {    
  matches.forEach((match) => {
    let homeTeam = match.home;
    let awayTeam = match.away;
    let homeGoals = match.result.split("-")[0];
    let awayGoals = match.result.split("-")[1];
    let index = data.findIndex(team => team.NAME === homeTeam);
    // Home team non-existant in array, let's create it with default scores
    if (index === -1) {
      data.push({NAME: homeTeam, PL: 0, W: 0, D: 0, L: 0, GF: 0, GA: 0, GD: 0, P: 0});
    }
    index = data.findIndex(team => team.NAME === awayTeam);
    // Away team non-existant in array, let's create it with default scores
    if (index === -1) {
      data.push({NAME: awayTeam, PL: 0, W: 0, D: 0, L: 0, GF: 0, GA: 0, GD: 0, P: 0});
    }
    // parseInt is neccesary because goals are strings at this point
    processMatchResult(data, homeTeam, awayTeam, parseInt(homeGoals, 10), parseInt(awayGoals, 10));
  });
  // data is filled, let's sort it by points, goal difference, goals for.
  data.sort((teamA,teamB)=>(teamA.P - teamB.P || teamA.GD - teamB.GD || teamA.GF - teamB.GF));
  // sort gets ascending order, we need to reverse it for a normal league table
  data.reverse();
}

function processMatchResult(data, homeTeam, awayTeam, homeGoals, awayGoals) {
  // We get the reference to each team object
  let indexHT = data.findIndex(team => team.NAME === homeTeam);
  let indexAT = data.findIndex(team => team.NAME === awayTeam);
  // Common data (home) - plus one played and registering the goals
  data[indexHT].PL += 1;
  data[indexHT].GF += homeGoals;
  data[indexHT].GA += awayGoals;
  data[indexHT].GD = data[indexHT].GF - data[indexHT].GA;
  // Common data (away) - plus one played and registering the goals
  data[indexAT].PL += 1;
  data[indexAT].GF += awayGoals;
  data[indexAT].GA += homeGoals;
  data[indexAT].GD = data[indexAT].GF - data[indexAT].GA;

  // Draw
  if (homeGoals === awayGoals) {
    // Home team register a draw
    data[indexHT].D += 1;
    data[indexHT].P += 1;
    // Away team register a draw
    data[indexAT].D += 1;
    data[indexAT].P += 1;
  }
  // Home win
  if (homeGoals > awayGoals) {
    // Home team register a win
    data[indexHT].W += 1;
    data[indexHT].P += 3;
    // Away team register a loss
    data[indexAT].L += 1;
  }
  // Away win
  if (homeGoals < awayGoals) {
    // Away team register a win
    data[indexAT].W += 1;
    data[indexAT].P += 3;
    // Home team register a loss
    data[indexHT].L += 1;
  }
}

Now, we just need to add the data to the table, and we're done!

Note: I added some tailwind classes to make it look better,

Play around with the code snippet, modifying the matches, you will see instant changes in the table without further actions. Sweet!

See you around!

Deploying 📤

Whenever it comes to deploying, the bigger the project, the bigger the fear. Even if you are the author of every line of the code, tested it, reviewed it, there will be at some point fear of "what if x breaks", especially if people are dependant on your product.

Responsable for a project 📊

No matter if you work solo, in a startup, or a big team. Being responsible for a project gives great opportunities, but also raises some questions: What happens if this fails? If someone else screws this, I'm the one who will be taking the blame. Chills.

Bad bosses 🧛

If you never had a bad boss, lucky you! Having a boss that doesn't know the area, or that is excessively self-centered, is an instant card for losing motivation, doing stuff that you don't like, and having to answer and lose time to what his highness thinks is the best.

Impostor syndrome 👽

Well, this one has been over-debated here. Not being able to deliver, having lots of thoughts about your real capabilities, thinking you are a fraud and others deserve more than you. I'm pretty positive every one of you, in small or big amounts, have experienced this.

Hackathons 👩‍💻

Hackathons are fun! For the organizers, maybe. This kind of event puts a lot of stress on you, and even if you won't get killed for losing, you probably will be sleeping little, eating too much, and counting minutes to finally deliver a poorly customized fork that wins the first prize.

Poor management of time 📅

Kind of related to the above, but dealing with deadlines is the closest thing to having a zombie chasing you. Slow, but steady, it's gonna get you. Oooooh, it is.

Coding challenges 🧮

I'm talking about the ones that recruiters and companies owners seem to like most. Inversion of binary trees, fizzbuzz stuff, working with date and time with no libraries, converting an array of dictionary arrays to another structure, you name it. This kind of challenge has nothing to do with the final work you are going (and are qualified) to do. Yet, you will be struggling with these algorithms and having the fear it keeps you out of your real ideal job. Unless you are applying for a coding challenges site developer. Never thought of that.

Writing documentation 📄

This is really odd, because if you work on your own, probably you deal with this fear by postponing it. Be aware that by doing that you are only increasing the problem by having to deal with a big amount of documentation later on. Good luck with that.

Social interactions 🤼

Oh, well, from having to speak to an audience, to talking to a colleague to let him/her know they did something wrong, social interactions fears may vary, but they are of the same kind and affect relations equally. If you are in the dev industry, you probably got a "socially awkward" tattoo on your forehead. Let's gradually change that, please.

Fear to change 🎢

Guilty! to be honest. It's in human nature, the need to stick to what comforts us, makes us feel in a safe place, reducing the uncertainty and the bad surprises. Stop! Sometimes you need to start from scratch, redo all previous month's work, or refactor everything into a library that better suits your needs. Overcome that instinct and it will be like a superhero power, I promise.

Being forced to work with tech you don't like 📠

Related to the above, having to change, learn a new tech or framework, even another language, makes us feel insecure. Sometimes we are forced to work with something we are good at, but that we don't like. Admit it, you experienced those feelings at least once.

Getting asked to fix computers 👨‍🔧

If you have never been asked to fix a computer raise your hand. No one? Really? Well, I guess you all had nice moments when you get asked what do you do for a living. There is nothing less than horror in our faces when your mother's neighbor wants to bring you his 2GB Atom PC for fixing because is too slow. Or after everything stopped working after the latest Windows 10 update. I use arch btw.

Losing an entire project 🗑️

I will always remember when my web partner at the University accidentally rm -rf on the project a week before the deadline. That should be scarier than any Halloween costume, come on! I've seen posts offering impressive rewards to get back that stolen laptop/PC, just for the information inside. Luckily we all have to the cloud now, but there is always a chance you relax for your personal stuff.

Hope I scared you enough! Happy Hallodev!

See you around!

Introduction

Removing elements from an array might sound like a trivial task in many languages. However, in Javascript, there are multiple ways to achieve this desired result, depending on knowing the index of the item, or just knowing its value. Some options are more performant than others, some are easier to read, be sure to check them all out and use what best suits your needs.

You can remove an element or elements group of an array using:

• length change: chop the end of the array.
• shift: removes an element from the start of the array.
• splice: removes elements from a specific array index.
• pop: removes an element from the end of the array.
• custom code: writing custom lines/functions to achieve the removal.
• libraries: using javascript libraries to remove items.
• filter: filter elements by value and return the desired ones.

Note: Filter will be kind of an exception here because every option presented mutates the original array. And filter does not. Still, it is advisable to use it if you don't need the original reference to the array.

Let's get there folks! We'll see 15 ways to remove items from an array!

Index of methods

• Removing by index
  • Removing from the end
    • 1) With arr.pop()
    • 2) Changing length
    • 3) With splice
  • Removing from the beginning
    • 4) Using shift
    • 5) Using splice
  • Removing from anywhere
    • 6) Splicing
    • 7) Custom DIY solution
    • 8) Using delete
    • 9) Using lodash
• Removing by value
  • 10) With findIndex and splice
  • 11) The good ol' working way
  • 12) Using lodash to remove by predicate
  • 13) Using lodash to remove by value
• Other removal methods
  • 14) Just remove everything
  • 15) Bonus: using filter to create new array with removed items

Remember, all the methods presented mutate the original array. If you are interested in keeping the removed elements, look for the options that set the "removed" variable

Removing by index

Removing from the end

With arr.pop()

This will just remove the last element. Simple, powerful, universal.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = arr.pop();
console.log(arr);
// [object Array] (8)
// [1,2,3,4,5,6,7,8]

Changing length

You can truncate an array setting its length. Be warned, if you set it to a greater value than the current one, last element will be a non-iterable empty slot.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.length = 3;
console.log(arr);
// [object Array] (3)
// [1,2,3]

With splice

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let howmany = 7;
let removed = [];
if (howmany <= arr.length) {
    removed = arr.splice(arr.length - howmany, howmany);
} else {
    removed = arr.splice(0, arr.length);
}
console.log(arr);
// [object Array] (2)
// [1,2]

Removing from the beginning

Using shift

Removing only one element

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = arr.shift();
console.log(arr);
// [object Array] (8)
// [2,3,4,5,6,7,8,9]

Using splice

Removing multiple elements

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let howmany = 3;
let removed = arr.splice(0, howmany);
console.log(arr);
// [object Array] (6)
// [4,5,6,7,8,9]

Removing from anywhere

Splicing

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let from = 1;
let to = 3;
let removed = arr.splice(from, to);
console.log(arr);
// [object Array] (6)
// [1,5,6,7,8,9]

Custom DIY solution

This ones assumes 'from' <= 'to'

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let from = 2;
let to = 5;

for (let i = from; i < arr.length - (to - from); i++) {
    arr[i] = arr[i + (to - from)];
}
arr.length = arr.length - (to - from);

console.log(arr);
// [object Array] (6)
// [1,2,6,7,8,9]

Using delete

Note: This one will leave undefined or empty spaces in the corresponding positions, the array size will not be changed.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
delete arr[0];
delete arr[4];
console.log(arr);
// [object Array] (9)
// [,2,3,4,,6,7,8,9]

Using lodash

You need to install lodash in order to use this

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.pullAt(arr, [0, 1, 8]);
console.log(arr);
// [object Array] (6)
// [3,4,5,6,7,8]

Removing by value

With findIndex and splice

let people = [{
    id: 15,
    first_name: 'John',
    last_name: 'Doe'
}, {
    id: 16,
    first_name: 'Jane',
    last_name: 'Doe'
}, {
    id: 20,
    first_name: 'Guy',
    last_name: 'Incognito'
}];

let indexToRemove = people.findIndex(elem => elem.first_name === 'John');
if (indexToRemove !== -1) {
    people.splice(indexToRemove, 1);
}
console.log(people);
// [object Array] (2)
// [{
//    id: 16,
//    first_name: 'Jane',
//    last_name: 'Doe'
// }, {
//    id: 20,
//    first_name: 'Guy',
//    last_name: 'Incognito'
// }]

The good ol' working way

let people = [{
    id: 15,
    first_name: 'John',
    last_name: 'Doe'
}, {
    id: 16,
    first_name: 'Jane',
    last_name: 'Doe'
}, {
    id: 20,
    first_name: 'Guy',
    last_name: 'Incognito'
}];

for (let i = people.length - 1; i >= 0; i--) {
    if (people[i].last_name === 'Doe') {
        people.splice(i, 1);
    }
}
console.log(people);
// [object Array] (1)
// [{
//    id: 20,
//    first_name: 'Guy',
//    last_name: 'Incognito'
// }]

Using lodash to remove by predicate

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.remove(arr, (item) => item > 3);
console.log(arr);
// [object Array] (3)
// [1,2,3]

Using lodash to remove by value

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let removed = _.pull(arr, 6, 7, 8);
console.log(arr);
// [object Array] (6)
// [1,2,3,4,5,9]

Other removal methods

Just remove everything

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.length = 0;
console.log(arr);
// [object Array] (0)
// []

Bonus: using filter to create new array with removed items

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const newArr = words.filter(word => word != 'elite');
console.log(newArr);
// [object Array] (5)
// ["spray", "limit", "exuberant", "destruction", "present"]

Final thoughts

Phew! This article took more time than I estimated. Remember to use whatever fits your needs. Hope you find it useful!

See you around!

Today I want to show you how easily you can build an authenticated API using the power of Laravel and Sanctum.

So, buckle up, aaand it's lights out and away we go!

Max Verstappen - Formula 1 driver

Laravel8 REST API

For this tutorial, you'll only need:

• Basic knowledge of Laravel framework.
• Simple usage of a REST API Client (i.e.: Insomnia , Postman , Hoppscotch)
• Vague idea of what a REST API is.

Don't you know exactly what a REST API is? A deep look into RESTful APIs by Victoria Lo got you covered in few lines

What is Sanctum?

As per the official documentation

Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs. Sanctum allows each user of your application to generate multiple API tokens for their account. These tokens may be granted abilities / scopes which specify which actions the tokens are allowed to perform.

Preparing the Laravel project

We'll start with a fresh Laravel 8 API project.

composer create-project --prefer-dist laravel/laravel sanctum-api

The good news is, Sanctum is already installed and configured for you in Laravel 8!

You'll only need to setup your local database in .env file and you're good to go

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sanctum-api
DB_USERNAME=root
DB_PASSWORD=mysecretpassword

Now, we need to migrate our database data. As you probably know, doing that in Laravel is easy as:

php artisan migrate

Writing the controllers

We are going to use the User model, that comes with default Laravel. You don't need to add the HasApiTokens trait to the model, nor configure anything in RouteServiceProvider.php. This version of Laravel already addressed it for you.

Now, let's create the controller for handling the auth requests.

php artisan make:controller AuthController

Registering via API

In there we will add the register function to handle registration within the Laravel 8 API

public function register(Request $request) {
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:8',
    ]);

    $user = User::create([
        'name' => $validated['name'],
        'email' => $validated['email'],
        'password' => Hash::make($validated['password']),
    ]);

    $token = $user->createToken('auth_token')->plainTextToken;

    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
    ]);
}

What's going on here? Well, the first two parts are Laravel's basic way to validate a request and create a User with the validated data.

The juicy stuff Sanctum-wise is here:

$token = $user->createToken('auth_token')->plainTextToken;

We need the plainTextToken to pass it to the client. This is done by Sanctum. The token would be a string like 6|BNh21lDInxW8Zj00ZMUM7ZaZ9kPxV45yhIA76Tfk. We return the JSON response with the token_type as Bearer, we can use it to hit the protected Laravel 8 API endpoints right away.

Log in via Laravel 8 API

But, what happens if we forget our token? We should log in to retrieve one, so we need to write a controller function for it.

public function login(Request $request) {
    if (!Auth::attempt($request->only('email', 'password'))) {
         return response()->json(['message' => 'Incorrect e-mail or password'], 401);
    }

    $user = User::where('email', $request['email'])->firstOrFail();

    $token = $user->createToken('auth_token')->plainTextToken;

    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
    ]);
}

As you can see, the last part is identical to the previous, only this time we try to log in the user with the request data, instead of creating a new one.

Protected route handling in API

Finally, we will add a simple controller handle for the endpoint that would return the current user. These will be authenticated users only. You can add that restriction in the controller, but I believe it's cleaner to do it in the routes file.

public function whoami(Request $request) {
    return $request->user();
}

Routes for the REST API

The routes for an API shouldn't be in the usual routes\web.php. We will use the auto-generated routes\api.php one.

This brings at least two benefits:

• Separated routes from our app to the ones that are API-based.
• Auto-prefixing: The API prefix is automatically inserted in every route we code there.

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);
Route::middleware('auth:sanctum')->get('/whoami', [AuthController::class, 'whoami']);

See that middleware in the third route? That means that route will only be accessible by authorized users.

Using the Laravel 8 REST API

We are going to test our application using the php artisan serve command, which starts a Laravel development server for default at http://127.0.0.1:8000

You can use any REST client, I'm using Insomnia for this guide.

Setting up the headers

Add "Accept: application/json" to the headers so you avoid html responses from Laravel.

Register (Post / JSON)

Using data that will not validate

Registering with valid data

Logging in with invalid data

Logging in with valid data

Who am I? Not being authenticated

Who am I? Authenticated

Full code of Laravel 8 API (additions to default Laravel 8 code)

Summary

This was a simple example, yet, you can extend it for your models, and you'll already have a working token-based authentication in your project. Hope you enjoyed it!

See you around!

It's hacktoberfest time! And I want to share with you my first contribution to Open Source. If you are new to this, or never contributed to Open Source Software, I hope this can be inspiring. I will try to make it as short as it was actually doing it.

My first PR

Back in 2016, I was working on a project that implemented a dual list box, using a library called Bootstrap Dual Listbox.

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap.

And it looks like this

The thing is, I needed to make custom stuff if an item was moved, but, the default behavior was moving the item.

If I edited the code of the script, that should work. But, if an update to the plugin came around in the future, I wasn't going to be able to auto-update, otherwise I would lose my custom changes.

So I did some research and decided to try to open a Pull Request and put my changes there.

I wish I had this tutorial by atinuke oluwabamikemi kayode when I started

The actual code

Note: Feel free to move to the next part if you are not interested in the code, but in the experience of contributing to OSS.

I added 4 new options to the plugin defaults

defaults = {
  // Ommited code
  eventMoveOverride: false,                                                           // boolean, allows user to unbind default event behaviour and run their own instead
  eventMoveAllOverride: false,                                                        // boolean, allows user to unbind default event behaviour and run their own instead
  eventRemoveOverride: false,                                                         // boolean, allows user to unbind default event behaviour and run their own instead
  eventRemoveAllOverride: false                                                       // boolean, allows user to unbind default event behaviour and run their own instead
}

Then change this

dualListbox.elements.moveButton.on('click', function() {
  move(dualListbox);
});

To this

if (dualListbox.settings.eventMoveOverride === false) {
  dualListbox.elements.moveButton.on('click', function() {
    move(dualListbox);
  });
}

for every one of the 4 options.

After that, I wrote the calls to apply settings

this.setEventMoveOverride(this.settings.eventMoveOverride);
this.setEventMoveAllOverride(this.settings.eventMoveAllOverride);
this.setEventRemoveOverride(this.settings.eventRemoveOverride);
this.setEventRemoveAllOverride(this.settings.eventRemoveAllOverride);

And of course the options setter for every one of the four setters

setEventMoveOverride: function(value, refresh) {
  this.settings.eventMoveOverride = value;
  if (refresh) {
    refreshSelects(this);
  }
  return this.element;
},

And that's it! Well, actually no. Don't forget to extend the documentation if needed

<tr>
    <td><code>eventMoveOverride</code></td>
    <td><code><strong>false</strong></code>: set this to <code>true</code> to allow your own implementation of the move event.</td>
</tr>

<tr>
    <td><code>setEventMoveOverride(value, refresh)</code></td>
    <td>change the <code>eventMoveOverride</code> parameter.</td>
</tr>

PR was not merged

Looking at the Pull Requests Github page, I saw that there were a lot of PRs waiting for review or merging. So I assumed the repo owner would be inactive or busy, so, I googled and find the author's email and sent him this email

Hi Istvan!

First of all, thanks for this great plugin! I'm using it for the first time and it is just delightful. However, it could be more customizable, and I hope GitHub community will look forward to contributing to your work.

Reading through the Github page I acknowledged you don't have too much time, but, can you please take a look at the open pull requests? If you can, check out this: https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/pull/89

That would be awesome!

Cheers, Marcelo.

I received a response within half an hour, and the PR was merged.

However, I learned afterward that this kind of stalking is not a good practice and you should really consider if you are annoying someone. (I still believe I didn't in this particular case, do you think I did?)

It is merged

That was awesome! Now not only do I have the extra functionality available but, with the same amount of work, other people could benefit from it.

Want to start contributing yourself? This guide by Avneesh Agarwal gives you a great starting point.

Happy hacktoberfest!

See you around!

Before I ever started considering writing, I did some research to find out which platform would be a better fit for me. I looked into several of them. And finally opted for Hashnode, because it provides a few key features.

Three pros (most important ones)

1. CONTENT OWNERSHIP. Caps are not accidental. This includes the option to set up custom domains for your blog

2. A community that is not only welcoming to newbies but also dynamic and diverse.

3. No paywall (I'm an advocate of freedom of information)

Barney Stinson from How I met your mother (TV Series)

Three cons

Well, it's not a land of roses around here, there was something I really liked from other platforms I couldn't find in Hashnode. It was a boomer. Those three little things were the difference between a normal article, and a LEGEN-DARY one. And those three things were this

What? Yeah, those three little dots, the horizontal rule from other platforms, so simple, yet so elegant. I wanted them. And I wanted them badly. I couldn't find an already made solution for this. So I borrowed some of the code from other fronts, and decided to do my own widget. That way I could easily insert that three dots everywhere in my articles.

Don't you know how to create a widget for hashnode? Catalin Pit explains it step by step

Three dots separator (horizontal ellipsis)

To create it, I set widgetid as three-dots-separator so I could use like this in my articles

%%[three-dots-separator]

and the markup as follows

<style type="text/css">
.three-dots-separator {
 box-sizing: border-box;
 display: flex;
 justify-content: center;
 text-decoration: none solid rgba(0, 0, 0, 0.8);
 margin: 32px 0px 14px;
 padding: 24px 0px 10px;
}

.first-dot, .second-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 margin: 0px 20px 0px 0px;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}

.third-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}
</style>
<div class="three-dots-separator" role="separator">
 <span class="first-dot"></span><span class="second-dot"></span><span class="third-dot"></span>
</div>

Hope you like it, feel free to use it, improve it, and comment with any suggestions you have!

See you around!

As a programmer, I sometimes need to jump between languages, and changing not only involves a different syntax but also setting up your mind to the tricky or handy ways things are done in every one of them.

Doc from "Back to the future" (Movie)

The bug 🐞

I switched to Javascript, and I was debugging something (a Node.js API). It seemed that some part of a really long task was not working properly. Then, just before going into debug mode, I saw it. I mean, for a JS-only developer this might be an easy spot.

The simplified version of the code was:

res = await fetchDataFromDatabase(transaction);
if (res) {
  responseObject.response = res;
 // more stuff
}
// Continue from here if res is empty?

So, when res was [] (semantically an empty response), the if was evaluated to true, and the "more stuff" part was done. That is pretty different from other languages, and I will just demonstrate a few.

PHP

if ([]) {
    echo "won't get here";
} else {
    echo "empty arrays evaluate to false";
}
// Output: empty arrays evaluate to false

Python

res = []
if res:
    print ("never got here")
else:
    print ("empty arrays evaluate to false")
# Output: empty arrays evaluate to false

Java

The thing gets interesting here:

String[] res;
if(res) {
    System.out.println("ENTERED");
}

Will throw a nice incompatible types: String[] cannot be converted to boolean

C / C++

Oh, that won't even be a problem because why would you want an empty array in C.

The reason 🤙

Of course, there was an explanation for that behavior. But let me say that if you go to the console and do:

[] == false
// output is true

But if you continue in the console and try this:

if ([]) {
    "yes"
} else {
    "no"
}
// output is yes

Biff from "Back to the future part II" (Movie)

I know Biff, wasn't [] type coerced to false?

Under the hood, things happen. Consider these statements.

if (Expression) {}
while (Expression) {}

According to ECMAScript 2021 Language Specification, after an expression is evaluated, a ToBoolean function is called for that value. That function ToBoolean(argument) will return argument if it is of type Boolean (true or false) otherwise, it is going to cast it according to the following table:

The first 9 rows are known as Falsy values.

Everything else is returned as true in the ToBoolean function. Those values are known as Truthy values

What's important here ❗

So, remembering the falsies, we can be certain that every other value/object will be evaluated as true. And that includes our beloved []

See you around!

There are a lot of options when it comes to saving the data you or your app generates:

• Store it on memory: it will be lost when you close the app or reboot your machine.

• Save it to a file: Easy to write, not that easy to read from it, and keeping consistency might be challenging.

• Store it in a database: you guessed it, the way-to-go in this tutorial.

• Save it to the cloud: a wise choice, if you know a blogger who has done a tutorial on this, please write a comment.

We are going to create our own database, schema, and insert and modify data over it!

Sheldon Cooper from The Big Bang Theory (TV Series)

Introduction

I'm a person who is not a big fan of the "foo, bar, baz" examples. I believe that real knowledge strikes in when you apply a concept to a real situation. So we're going that way. It's a simplified version of a real problem I solved a few months ago. This version uses no classes, so, if you are new to this, you can follow along with no problems.

We are going to use SQLite, a popular relational database management system that does not require a lot of configuration to start using, it is rather embedded into the final program. To perform actions over that set of data, we are going to use python.

Are you absolutely new to the SQL world? You can start reading "Essential SQL for beginners" by Shreyas Kulkarni. If you also never coded a line a Python, the series in Layla's blog that starts with Python basics it's going to help you out. I'll wait here.

The problem

We are going to work with a small business that mainly needs to store its suppliers and the products they deliver.

• They need to store the supplier's name, its address is optional.
• They must store the product descriptions, and the quantity.
• Every product they have is only bought from one supplier.

The design

We can make a diagram of our database and it will look like this

Our database diagram and the relation between tables

We are going to allow the user the perform eight operations

1. List suppliers
2. List products
3. Create supplier
4. Create product
5. Change product quantity
6. Delete supplier
7. Delete product
8. Exit program

Of course, it could be less, for the sake of the tutorial I wanted to portrait all the basic CRUD operations (Create/Read/Update/Delete)

The Code

Setting up database

We need to start a connection with the SQLite database, which is nothing more than a file. We can do it directly, but we are going to get the connection from the main program calling the function create_connection that will receive db (the file path of the database) and return the connection

def create_connection(db):
    conn = None
    try:
        conn = sqlite3.connect(db)
        conn.execute("PRAGMA foreign_keys = 1")
    except sqlite3.Error as err:
        print(err)
    return conn

Now we can in the main program, call it like this

def main():
    DBFILE = "db.sqlite3" # You can choose any name you want

    conn = create_connection(DBFILE)
    with conn:
         # We perform operations to the database inside the with statement
         # It is a much readable way, and we can omit to close the connection
         # with can handle it

Creating our tables

We may need to create our tables, that would be handled by the functions createProducts and createSuppliers

def createSuppliers(conn):
    query = """CREATE TABLE IF NOT EXISTS suppliers (
        id INTEGER PRIMARY KEY NOT NULL,
        name TEXT NOT NULL,
        address TEXT
        );"""
    execute(conn, query)

def createProducts(conn):
    query = """CREATE TABLE IF NOT EXISTS products (
        id INTEGER PRIMARY KEY NOT NULL,
        description TEXT NOT NULL,
        quantity INTEGER NOT NULL,
        supplier_id INTEGER NOT NULL,
        FOREIGN KEY(supplier_id) REFERENCES suppliers(id)
        );"""
    execute(conn, query)

The "IF NOT EXISTS" will allow us to create them only if they already don't exist. That foreign key considers this part of the problem: "Every product they have is only bought from one supplier".

Now, what is that execute function at the end? We need to code that.

def execute(conn, query, args = None):
    if args:
        conn.execute(query, args)
        conn.commit()
    else:
        conn.execute(query)
        conn.commit()

Without this function we will be repeating the conn.execute and conn.commit every time we need to execute a query.

Inserting data into our database

So now to insert a supplier we will make a function like this

def insertSupplier(conn, supplier):
    query = "INSERT INTO SUPPLIERS (name, address) VALUES (?,?);"
    execute(conn, query, supplier)

The supplier argument should be a list with the value (name, address). See how tiny the function is? That's because we wrote execute and create_connection before. To insert a product you can follow along with that pattern.

Listing all the records

To read every record that is stored in a table, we will use the SQL Select statement

def selectAllProducts(conn):
    query = "SELECT * FROM products;"
    print (pd.read_sql_query(query, conn))

pd is the alias for pandas, a library that really helps when it comes to showing and manipulating data, we need to import it at the top of our python program like this import pandas as pd. The read_sql_query function returns a DataFrame corresponding to the result set of the query string. Think of the DataFrame as a table, a pretty formatted one.

Update a product

We will need to update the product's stock, so we will need a positive or negative quantity to add or subtract from the current stock.

def updateProductQuantity(conn, productId, quantity):
    query = "UPDATE products SET quantity = (quantity + ?) WHERE id = ?;"
    execute(conn, query, (quantity, productId))

Delete a record

In order to delete a record, we must call the DELETE statement with the id of the object we want to remove.

def deleteSupplier(conn, supplierId):
    query = "DELETE FROM suppliers WHERE id = ?;"
    execute(conn, query, supplierId)

Final thoughts

Yay! You got here. We performed all the basic operations for a CRUD program. You can allow the user to interact with the previous functions in different ways. The final example will show you just a basic input menu, but you can use them within a web app, a pyqt desktop, or even a Raspberry PI!

Here's the final code

See you around!

Please tell me, have you ever tried SQLite? And if you have, what was the last thing you used it for?

Two weeks ago I was talking to a colleague, who has plenty of years of PHP expertise, and he was amazed by his personal discovery of the "for each" loop. I couldn't hide my surprise at how could that knowledge be elusive to him, but after my initial reaction, that could be portrayed like this:

Kramer from Seinfeld (TV Series)

I said: "well, it's useful depending on the case". He stated that many times he needed to apply the same behaviour to every page in a set of pages. And how that structure seemed more natural for him, so he was using it as much as he could.

That got me thinking into the real concept behind the for each loop, how can it be used, abused. I also wonder, how he could go by so many years without using it and by no means being powerless in his ability to make quality code.

So, what is actually a for each? It's nothing more than a for loop, that takes into consideration every item in a set of items, and applies (hopefully) some action to it.

For each features

Disclaimer: "for each" loop may vary from language to language.

Traversing items in a collection

Yeah, yeah, you got it. I just like the word traversing and wanted to include it in some text.

It is a loop sentence

That implies two important things.

1. Behind the scenes, usually it's written with a for loop with some perks.
2. There's nothing you can do with a foreach you could not achieve with a classic for.

Doesn't keep a reference to the current index

This doesn't mean you can't get the index of the current item inside a for each. It's just that it (usually) was not designed for it. Attempting that would mean extra work. From getting an index from a callback, up to finding the current element in the collection you are already iterating. It would be smarter just to use another kind of loop.

For each usually describes

"Apply this action to every item"

Instead of another kind of loops that are meant for

"Do this x times"

or

"Do this for items numbered a,b,x..."

Performance for != foreach

It's not that easy for a generic article on this topic to make such a statement without proper benchmarks. Let me just say that if your dataset is too big, or the performance in your app is critical, you should consider this. Write in the comments if you disagree or can prove me wrong.

Code

Pseudo-code

for each item in collection
    // do this to item

Javascript

ES6 introduced the for...of

for (let book of books) {
  book.ISBN = getISBN();
}

Or the functional way

books.forEach(book => {
  book.ISBN = getISBN();
}

PHP

foreach ($posts as $post) {
    echo $post->title;
    echo $post->body;
}

Python

for beer in beers:
    print(beer.name)
    print(beer.IBU)
    print(beer.ABV)

The interesting thing about foreach in python, is that it actually is the standard for loop. If you want the classic for (int i=0; i<array.length; i++)

for i in range(0, len(array)):
    # Do whatever with i as index

See you around!

So tell me, do you find for each loop useful? In which language do you use it?

My name is Marcelo Zárate. I'm an Argentine father, spouse, and developer. I'm interested in a variety of languages and technologies. I'm always excited to discover anything new.

A few days ago I heard at a seminar that the "What for" in our daily planner should take precedence over the "Why" So I'm going to try to put this thought into practice right now.

There are mainly 3 reasons that I started this journey (What for?)

Putting my capacity to be consistent to the test 📝

Working on a non-dev job, I managed to make at least one useful commit per week for the last year. That was a real challenge but proved myself I could be consistent. Going to try the same for writing (1 article per week should do).

Learning 👨‍🏫

Being a teacher for kids in the past taught me one valuable lesson:

If you want to be certain you know something, go ahead and teach it.

You can confirm you knew the subject. You can also learn by attempting to prepare a class on a topic you thought you already knew about.

Improve my English 🗽

Being a non-native English speaker, I found it almost natural to read technical stuff in English. Writing seems to be a different level of difficulty, but I'm confident it will help me step up and reach a larger audience.

It's not easy, because writing requires research, planning, confidence, and a magic spark.

Are you planning on writing too? You can do it! Start your own blog now with Hashnode I really took time researching all the options, and I found Hashnode to be a solid platform. Shoutout to Sandeep Panda!

See you around!

Cover photo by Angelina Litvin on Unsplash