DEV Community: Dalibor Belic

Enhancing Business Success through a Skeptical Mindset

Dalibor Belic — Mon, 29 Apr 2024 08:06:03 +0000

Ren Descartes was known for periodically re-evaluating and questioning his opinions and beliefs.

In the context of business, it's easy to make decisions based on long-held assumptions about the market, customers, or operating environment. But how far can we go if we're not willing to sail into the unknown? Business landscapes are constantly evolving due to competition, technology, regulations, etc. Re-evaluating opinions allows us to identify shifts and pivotal moments where old ways of thinking need to be discarded for new strategies. Successful businesses (and people) can sometimes fall into the trap of hubris and overconfidence. To curb this, we need to nurture humility- acknowledge what we don't know, thus move forward. By not clinging to entrenched opinions, businesses create space for disruptive thinking and innovating beyond the status quo. Besides, many scientific breakthroughs in a specific field were made by scientists from opposite fields (e.g. Claude Shannon's pioneering work in information theory while being an electrical engineer and mathematician). Ultimately, continually stress-testing beliefs against new information and giving disconfirming evidence due consideration leads to higher quality, reality-based decision-making rather than decisions anchored to outdated certainties.

To sum it up:

Avoid blindly following assumptions
Adapt to changing conditions
Mitigates risk from hubris
Encourages innovation.
Improves decision quality

Unleashing Critical Thinking in Software Development

Dalibor Belic — Tue, 31 Jan 2023 10:39:19 +0000

Software development is an ever-evolving field that requires a careful balance of rules, principles, and values. Rules are specific guidelines that dictate the development and functionality of the software. Principles are broader concepts that guide software development, such as transparency, accountability, and privacy. Values are the ethical and moral considerations that underpin software development, such as fairness, equity, and respect for users.

Adhering solely to rules in software development can lead to a lack of critical thinking- intellectual laziness. The development process becomes too fixated on following the rules (which are tightly bound to the very context) instead of finding creative solutions to improve the software. Rules are good, don't get me wrong, but it is essential to understand their underlying principles. Good software demands critical thinking, not intellectual laziness of blindly following some rules.

The rise of artificial intelligence (AI) exacerbates this problem, as AI systems are extremely good at following rules and making decisions based on data. However, AI systems can struggle with ethical and moral considerations and most likely lead to unintended consequences if not guided by critical thinking and human values.

Therefore, software developers must embrace critical thinking and not just blindly follow the rules. They should take a step back, consider the holistic implications of their work, and think creatively about how to solve problems and improve the software.

In conclusion, while rules, principles, and values are essential for software development, try to avoid intellectual laziness and embrace critical thinking. In a world where AI systems are becoming increasingly prevalent, software developers need to use their critical thinking skills to ensure that the software they develop is guided by human values and principles, not just by rules and data.

On naming things

Dalibor Belic — Thu, 22 Dec 2022 09:49:41 +0000

How do you name things?

Naming things is one of the most challenging aspects of our work. Not only do good names make our code more readable and maintainable , but they also help us to better understand and reason about the problem we are trying to solve.

There are only two hard things in Computer Science: cache invalidation and naming things.

-- Phil Karlton

In the domain of developer experience, naming things is especially important because it can significantly impact the usability and accessibility of the code. Good names make it easier for other developers (including ourselves in the future) to understand and work with the code, and they can also help to reduce confusion and frustration.

Its a matter of fact that by choosing descriptive, meaningful, and consistent names, appropriate for the code, developers can create better software faster!

Overall, taking the time to carefully choose names for our code is a crucial part of the development process, and it's something that requires a lot of thought and consideration.

Agile as a fake exhaust

Dalibor Belic — Wed, 14 Dec 2022 18:53:57 +0000

The IT industry, you will agree, is quite famous for its buzzwords, and most definitely, agile is one of many.

More often than not, these buzzwords are, in a nutshell- fake exhausts (an analogy from the auto industry). The real exhausts are somewhere underneath, hidden. And in the case of Agile, what is hidden is Waterfall.

All great product teams focus on solving problems, not building features- outcome vs output.

However, if the solving problem looks like this: a PM defines requirements and then gives them to a designer who creates workflows, who then gives them to engineers- well, you are practising Waterfall. The longer you wait to introduce a product idea to engineers, the greater the chance of failure.

Instead, we should prompt cross-functional collaboration (PM/PO + Engineers + Designers) sooner.

Solving problems within given constraints is what engineering is all about. Therefore, leave feature roadmaps aside for a bit and hear your engineers. Your engineers are the single best source of innovation!

Finally, one more analogy I like- there are two types of engineering teams, the team of mercenaries and the team of missionaries. 10/10 times Id choose to be a part of the latter.

What comes next is enhancing engineering teams with tools like CI/CD, TDD, and other mechanisms that create better software faster. Those will be the topics for my future rants.

React & keys 🔑🔑🔑

Dalibor Belic — Wed, 08 Sep 2021 11:09:18 +0000

Well, the answer lies in efficiency and performance.

Let me explain...

I assume you prefer fast websites rather than slow ones. Who doesn't...

In terms of modern JavaScript frameworks, a significant factor for websites' performance is how efficient DOM updating is. In the case of React, we have something called Virtual DOM that addresses this problem.

Example: You have a list of 5 items. Let's say it's a list of todos. After you finish a task, and you'll check it off from the list. Now, most JavaScript frameworks would rebuild the entire list to show the updated one. And that’s 5 times more work than needed! Imagine you have a table with 1000 instances. You get the point...

Let's dive deeper...

DOM & Virtual DOM

As you probably know, DOM (Document Object Model) is the data representation of the objects that comprise the structure and content of a document on the web. It represents the page (as nodes and objects) so that programs (in our case, JavaScript) can change the document structure, style, and content. In React, for every DOM object, there is an equal virtual DOM object- like a lightweight copy.

Diffing

Let's get back to our example but analyse it from the React perspective: After you finish a to-do and check off the item from the list, the lightweight copy- virtual DOM- will completely update (which doesn't plunder the performance because updating virtual DOM is super fast). After the virtual DOM update, React compares the new one with the pre-updated one to determine precisely which element or more have changed in a process called diffing. And in the case of lists, as shown below, keys are the key (ba dum tss)!

Updating

Let's say we walked the dog. That todo has the id, therefore the key of 'id2' (because it's the second item in the todoList array). After diffing completes, React will know that only the HTML tag of 'li' with the key of 'id2' needs to be updated on the DOM. Without the key attribute, React couldn't know that, and it would update the entire list, which damages the performance, as we explained above.

And that pretty much sums it up. I hope you liked it. Feel free to reach out in the comment section below!

Till next time 👋🏻

Dalibor

Custom React + TailwindCSS Calendar Component

Dalibor Belic — Fri, 30 Jul 2021 10:25:00 +0000

Hey there,

If you need a custom calendar for your React app, that's light (built without any external code), you came across the right blog post! Check out the custom calendar I coded with React and TailwindCSS.

Live demo

GH repo. P.S. If you like it, give it a star :)

Happy coding,

Dalibor

Building Backend | Node, Postgres, GraphQL

Dalibor Belic — Mon, 07 Jun 2021 20:19:07 +0000

Hi there 👋

Every application, you'll agree, needs a back-end. And there are many languages and tools that can accomplish that. But, in this quick tutorial, I'll show you how to set up the GraphQL backend server with Node, and PostgreSQL- a quite common stack for building robust back-ends that operate with large amounts of data. Be that as it may, I'm assuming you did your research, hence you decided on this tool combination.

Structure and packages

First, let's define the structure of the server.

▶ Paste this into terminal: npm init -y and create the required files and folders

Now, do install all the packages we'll need: npm i apollo-server graphql graphql-tag pg

INDEX.JS

In the index.js, the entry point of our project, we paste this:

const { ApolloServer } = require("apollo-server");
const typeDefs = require("./graphql/typeDefs");
const resolvers = require("./graphql/resolvers");

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => {
    return { req };
  },
});

const PORT = process.env.PORT || 4000;

server.listen({ port: PORT });
console.log("Server up and running on port: " + PORT);

✅ The server is up and running!

Postgres

I'll assume you have Postgres installed. So, open your terminal and log into Postgres. In my case: psql -U postgres + password. After logging in create a new database that we'll use in this tutorial: CREATE DATABASE dogdb

Now in db.js file, we'll prepare the connection to our database. Through pool we'll be communicating with it.

const Pool = require("pg").Pool;

const pool = new Pool({
  user: "postgres",
  password: "postgres",
  host: "localhost",
  port: 5432,
  database: "dogdb",
});

module.exports = pool;

Back in the terminal, we'll create a new table (in tables we store data). But before that, we'll install the 'uuid-ossp' extension that will later generate unique ids for each instance in our db.

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";


CREATE TABLE dog(
    uid UUID NOT NULL PRIMARY KEY,
    name VARCHAR(20) NOT NULL,
    breed VARCHAR(40) NOT NULL
);

✅ DB is ready!

GraphQL

In typeDefs, we define types, queries and mutations. In other words, we describe the data and the manipulations of the data that we'll utilize later.

const gql = require('graphql-tag');

module.exports = gql`
  type Dog{
      uid: ID!
      name: String!
      breed: String!
    }

  type Query {
      getDogs: [Dog]
  }

  type Mutation{
      addDog(name: String!, breed: String!): Dog!
      editDog(name: String!, breed: String!): Dog!
      deleteDog(uid: ID!): String!
  }
`

Now, create a new file in the resolvers folder, next to the index.js, and call it dogs.js. There, in that file, we'll write CRUD operations for type Dog. Before that, let's first import dogs.js to index.js (the entry point for resolvers).

const dogsResolvers = require('./dogs');

module.exports = {
  Query: {
    ...dogsResolvers .Query,
  },
  Mutation: {
    ...dogsResolvers .Mutation,
  },
};

Later, if you decide to have cats (or even badgers). You'll do the same. Create cats.js in the resolvers folder and import it in index.js.

Now, let's do CRUD!

const pool = require('../../db')

module.exports = {
  Query: {
    async getDogs() {
      try {
        const dogs = await pool.query('SELECT * FROM dogs')
        return dogs.rows;
      } catch (error) {
        throw new Error(error);
      }
    },
  },
Mutation: {
    async addDog(_, { name, breed }) {
      try {
        const query = {
          text: 'INSERT INTO dog(uid, name, breed) VALUES(uuid_generate_v4(), $1, $2) 
                   RETURNING *',
          values: [name, breed]
        }
        const dog = await pool.query(query);
        return dog.rows[0];
      } catch (error) {
        throw new Error(error);
      }
    },
    async editDog(_, { uid, name, breed }) {
      try {
        const query = {
          text: 'UPDATE dog SET name=$1, breed=$2 WHERE uid=$3 RETURNING *',
          values: [name, breed, uid]
        }
        const dog = await pool.query(query);
        return dog.rows[0];
      } catch (error) {
        throw new Error(error);
      }
    },
    async deleteDog(_, { uid }) {
      try {
        const query = {
          text: 'DELETE FROM dog WHERE uid=$1',
          values: [uid]
        }
        await pool.query(query)
        return 'Dog deleted'
      } catch (error) {
        throw new Error(error);
      }
    }
  }
}

✅✅✅ Congrats! You build the server!!! 🥳🚀

Let's try it out!

Open your browser and go to this URL: http://localhost:4000/ We'll check if our server works!

addDog

getDogs

editDog

deleteDog

Amazing, isn't it?

Bravo! You reached the end of this post! Thanks for following through, I hope you found this quick tutorial useful! Your feedback is welcome :)

Till next time,

Dalibor

3 ways to centre a div + life advice

Dalibor Belic — Thu, 20 May 2021 15:04:02 +0000

A few years ago, when I was a beginner developer such a task, to centre a div, would be easy and hard at the same time. It's super comprehensible yet you're not sure how to do it (although you probably saw it many times while following a boot camp). And then when googling starts and we all know how it goes.

What I want you to know is that this is totally fine! Not knowing something is okay, no matter how simple (or hard) it may look. On the other, what needs to be stressed out is the ability to find the answer (it is also a skill, treat it that way). That is the key! Now, when I'm googling, I kinda feel where (or if) the answer lies on a certain page. You'll get there, keep it up!

Now, let's centre this DIV:

<section>
    <div class='centre'>
        test
    </div>
</section>

The Traditional Approach

.centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

And then flexbox came

.centre {
    display: flex;
    justify-content: center;
    align-items: center;
}

With Grid 🔥

.centre {
    display: grid;
    place-items: center;
}

Till next time,
Dalibor

Cool syntax #1 | Optional chaining

Dalibor Belic — Sat, 08 May 2021 10:12:36 +0000

Welcome to the first post of the Cool Syntax series! I intend to publish a post, from time to time, on how to write clean JavaScript code like a pro!

The first text is about optional chaining. A syntactic sugar that makes reading content of an object much shorter and simpler. Let me show it to you.

Take a look at this array of objects.

const art = [
    {
        type: "paining",
        about: {
            name: "The starry night",
            author: "Vincent van Gogh",
            year: "1889",
            medium: "Oil on canvas",
        },
        dimensions: {
            width: "92.1",
            height: "73.7",
        },
    },
    {
        type: "sculpture",
        about: {
            name: "David",
            author: "Michelangelo",
        },
        dimensions: {
            width: "517",
            height: "199",
        },
    },
    {
        type: "photography",
        about: {
            name: "Pillars of Creation (Eagle Nebula)",
            author: "Hubble Space Telescope",
        },
    },
];

Imagine we fetched some data, and now we have the art array of objects. Then, let's say we want to log type of each object in the art array.

art.forEach(artPiece => {
    console.log(artPiece.type);
})

Now, let's log each height.

art.forEach(artPiece => {
    console.log(artPiece.dimensions.height);
})

And... Yes, it will display the error message -> TypeError: Cannot read property 'height' of undefined. It's because we don't have the dimensions (on each object), and we're trying to get a property from it.

SOLUTION 1 - && operator

art.forEach(artPiece => {
    console.log(artPiece.dimensions && artPiece.dimensions.height);
})

SOLUTION 2 - optional chaining

art.forEach(artPiece => {
    console.log(artPiece?.dimensions?.height);
})

Imagine you have a complex object with many objects in objects...

w && w.x && w.x.y && w.x.y.z
vs
w?.x?.y?.z

I guess you see why optional chaining is the better solution (in terms of syntax)!

I hope you enjoyed this short syntax-related post! Check out my previous posts and stay tuned for more cool JavaScript stuff!

Cheers,
Dalibor

JavaScript Promises 101

Dalibor Belic — Sun, 25 Apr 2021 10:44:06 +0000

Hey there! Are you new to JavaScript? Well, this post is right for you! Mastering promises is a must if you want to become a JavaScript developer!

A Promise represents a value that's unknown now that may become known in the future; in other words an asynchronous value.

A Promise is always in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

Now, let's imagine you're hungry (I am now actually) and you're about to order food using a delivery app. You open the app. You find what you want and click order. At that moment, the restaurant/app makes a Promise that they will deliver you food. While you're waiting, the delivery is pending. In the future, if everything goes according to plan the restaurant/app will resolve to deliver you food at which point your order has been fulfilled. But in some cases, the restaurant/app might reject your order in which case you'll have to order something else. Either way, the original request is finally settled.

More technical explanation

Now, let's explain it in a more technical language. As a developer, you create a Promise to represent an asynchronous value. But, what you'll actually do more often is consuming promises to use the result of an asynchronous operation in your code.

Let's create a Promise.

const food = new Promise((resolve, reject) => {
                               //☝️*
  if (delivered) {
    resolve("food delivered 🥘");
    // resolve fulfills promise with passed value
  } else {
    reject("you're still starving... 😭");
    // reject triggers when operation fails
  }
});

*👉 executor, f-on that resolves a value or rejects (error)

Now let's consume the Promise.

food
  .then(value => {
    console.log(value); // food delivered 🥘
  })
  .catch(error => {
    console.log(error); // you're still starving... 😭
  })
  .finally(() => {
    console.log("all settled!");
  });

then is a function that handles fulfilment. catch handles rejection; catches the error. And finally, finally is there if you want to run some code no matter what.

I hope this helped you get the basic knowledge, an overview of JavaScript Promises :)

As always, any feedback is greatly appreciated!

Have a great one,
Dalibor

What is GraphQL?

Dalibor Belic — Sat, 10 Apr 2021 10:09:19 +0000

GraphQL is a query language for reading and mutating data in APIs

By the end of this, you'll understand what GraphQL is, how it works and how's it different from REST. I will also provide some resources for further research. I'll try to be concise...

Let's start by explaining how REST works. And if you're familiar, you can jump to this section,

REST

REST, or Representational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. In other words, with REST, as with GraphQL, we are consuming an API. In the case of RESTful API, data entities live on various URLs on a server. When a request is received the API responds with the full data payload of that entity. Hence, there are two possible drawbacks here. First, we may need multiple entities at the same time in which case each request is under-fetching the data we want. Second, we may only want a small subset of a larger data entity in which case we need to over-fetch from the API.

GraphQL

So, we said that GraphQL is a query language for reading and mutating data in APIs. While in a RESTful API, data lives on multiple URLs on a server. In the case of GraphQL, the API has a single entry point (/graphql).

Now, let's imagine we have a team of 2, one Front End dev and one Back End dev. They are building a Koala managing website. In terms of GraphQL the perspective of the two devs, in a nutshell, looks like this:

Front End Dev: Explores and requests the exact data they need (not like in the case of RESTful API)
Back End Dev: Writes code to resolve that request

Back End work

Define a schema with all details needed about a Koala:

type Koala {
  id: ID!
  name: String!
  limbs: Int!
  diet: [Plant]
  fluffy: Boolean!
}
type Plant {
  id: ID!
  name: String!
  calories: Int!
}

! - means this is required. Koala is a custom object name. ID, String, Int, Boolean are data types. We can have a custom type as well, like Plant. If we write a type inside [ ], then it's an array.

Evey GraphQL API has a Query type. It's a main entry point for a consumer of the API. getKoalas returns all Koalas, while getKoala returns a single one.

type Query {
  getKoalas: [Koala]
  getKoala(koalaId: ID!): Koala
}

To mutate data, implement the Mutation type.

type Mutation {
  createKoala(name: String!, limbs: Int!, fluffy: Boolean!, 
    plant: { name: String!, calories: Int!}): Koala
  deleteKoala(koalaId: ID!): String
}

Afterwards, define the code to resolve getKoalas, createKoala and others in any programming language.

Front End work

Query (fetch) data by describing it with a syntax that mirrors its return shape in JSON. Often, with React, you'd be using something like React Query or Apollo GraphQL.

In the case of Apollo GraphQL, it will look something like this:

//...

 const { data: { getKoala } = {} } = useQuery(FETCH_KOALA_QUERY, {
    variables: {
      koalaId,
    },
  });

//...

Where FETCH_KOALA_QUERY:

import gql from 'graphql-tag';

const FETCH_POST_QUERY = gql`
  query($koalaId: ID!) {
    getKoala(koalaId: $koalaId) {
      id
      name
      diet {
        name
      }
    }
  }
`;

//...

And this is the pattern that you'll use for the rest of the fetching part of the code.

Resources

As I tried to be concise, I'll leave you with some resource for further research. Have fun, GraphQL is awesome!

Additionally, you can check out my MERNG stack side project w/ Apollo GraphQL and TailWindCSS:
-server
-client

Thank You!

I hope you find this post useful! Any feedback is greatly appreciated!

Cheers,
Dalibor

5 neat JavaScript tips

Dalibor Belic — Sun, 21 Mar 2021 14:37:39 +0000

In this post, I'll show you 5 neat JavaScript tips that will help you become a better developer. Although this post requires some knowledge of JavaScript, I encourage everyone to read through it.

List of neat tips:

Destructuring
Console tips
Dynamic key names
Set as a data structure
Callback-based APIs -> Promises

Destructuring

What a better way to explain something than through an example. Let's imagine we have an object with some tiger data and we need a function that will tell if the tiger is endangered.

const tiger = {
  specific: 'Bengal',
  latin: 'Panthera tigris tigris',
  endangered: true,
  weight: 325,
  diet: 'fox',
  legs: 4
}

// Bad code 💩
function isEndangered(tiger){
  if (tiger.endangered) {
    return `${tiger.specific} tiger (${tiger.latin}) is endangered!`
  } else {
    return `${tiger.specific} tiger (${tiger.latin}) is not 
      endangered.`
  }  
}

// Good code 👍
function isEndangered({endangered, specific, latin}){
  if (endangered) {
    return `${specific} tiger (${latin}) is endangered!`;
  } else {
    return `${specific} tiger (${latin}) is not 
      endangered.`;
  }  
}
// or 
function isEndangered(tiger) {
  const {endangered, specific, latin} = tiger;
  // the rest is the same

Console tips

Code execution time ⏲️

Use console.time and console.timeEnd to determine how fast (or slow) your code is?

Here's an example:

console.time('TEST')

//some random code to be tested

console.timeEnd('TEST')

Loggin with style 😎

To have a custom output, we'll add %c like below and then have the actual CSS as the second argument.

console.log('%c AWESOME', 'color: indigo; font-size:100px')

Tables

When you want to log an array of objects console.table will come in handy.

// x,y,z are objects
console.table([x, y, z])

Stack trace logs

If you want to get the stack trace of where a function is being called you can use console.trace

function foo(){
  function bar(){
    console.trace('test')
  }
  bar();
}

foo();

Dynamic key names

A super useful tip!

const key = 'dynamic'

const obj = {
  dynamic: 'hey',
  [key]: 'howdy'
}

obj.dynamic // hey
obj[key] // howdy
obj['dynamic'] //hey
obj.key // howdy

To see the most often use case of the dynamic-keys concept, check out my previous post.

Set as a data structure

If I'd ask you to remove the duplicates from an array of numbers. How would you do it?

Use Set as a data structure to improve the functionality and performance of your app. Here's an example where I'll remove duplicates from an array of numbers using Set object.

const arr = [1, 2, 2, 3]
const newArr = new Set(arr)
const unique = [...newArr]

// unique - [1, 2, 3]

Callback-based APIs -> Promises

To make things cleaner and more efficient you can transform the callback (ourCallbackFn) into a promise being a function.

// we start with this 
async function foo() {
  const x = await something1()
  const y = await something2()

  ourCallbackFn(){
    // ...
  }
}

// the transformation
async function foo() {
  const x = await something1()
  const y = await something2()

  await promiseCallbackFn() //👀
}

function promiseCallbackFn() {
  return new Promise((resolve, reject) => {
    ourCallbackFn((err, data) => { //👀
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

This was a list of 5 JavaScript tips. Pretty neat, right?
I hope you find my first post useful! Any feedback is greatly appreciated!

Thank You!

Dalibor