DEV Community: Bruno Bernard

How to center a div ? Seriously!

Bruno Bernard — Tue, 16 Jan 2024 20:52:00 +0000

Well, glad you asked !

.center {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

or tailwind way !

<div class="h-screen flex justify-center items-center">
  One does not simply center a div
</div>

Or make it even funky.

window.addEventListener('resize', centerDiv);
document.addEventListener('DOMContentLoaded', centerDiv);
function centerDiv() {
   let container = document.querySelector('.center');
   let windowHeight = window.innerHeight;
   let containerHeight = container.offsetHeight;
   let containerWidth = container.offsetWidth;

   // Calculate the position to center the div vertically
   var topPosition = (windowHeight - containerHeight) / 2;
   // Calculate the position to center the div horizontally
   var leftPosition = (containerWidth / 2);
   // Apply the margin to the div
   container.style.marginTop = topPosition + 'px';
   container.style.marginLeft = leftPosition + 'px';
}

Simplify Error Handling with "Try": A JavaScript Library Inspired by Rust and Golang

Bruno Bernard — Tue, 16 Jan 2024 18:33:00 +0000

Error handling in JavaScript has often been a source of frustration for developers. Unlike languages like Rust and Golang, where errors are explicit and treated as values, JavaScript tends to rely on implicit error handling. This can lead to difficulties in tracking down errors, especially when working with external libraries or integrating your own code.

The Problem with Implicit Errors in JavaScript

Consider the following JavaScript code:

import { fetchUser } from "./user";
import { leftpad } from "leftpad";

await fetchUser(); // Should we handle the errors?
leftpad(); // Should we handle the errors?

In this snippet, errors are not explicit. There's no clear indication of how to handle errors, and your code essentially relies on trust alone. This lack of clarity can lead to unforeseen issues, making it challenging to build robust and reliable applications.

Introducing "Try": A Solution Inspired by Rust and Golang

The "Try" library aims to address the challenges of error handling in JavaScript by borrowing concepts from Rust and Golang. It introduces a structured approach where errors are treated as values, making them explicit and easier to manage.

Error Handling in Rust:

fn main() {
    let result = File::open("hello.txt");

    let greeting_file = match result {
        Ok(file) => file,
        Err(error) => // handle errors,
    };
}

Error Handling in Golang:

f, err := os.Open("filename.ext")
if err != nil {
  // handle errors
}

Why Use "Try" in JavaScript?

Errors in JavaScript can be tricky to handle due to their implicit nature. The "Try" library serves as a wrapper for your functions, enforcing the need to handle errors. Instead of errors being thrown, they are returned as values. This approach not only makes error handling more explicit but also aims to eliminate callback hell (nested then) and the tower of doom (try-catch block).

By treating errors as values, "Try" simplifies error handling, reducing the chances of overlooking errors and making your code more robust and maintainable.

Getting Started with "Try"

To get started with the "Try" library, follow these simple steps:

Available on Github

bun add @eznix/try
yarn install @eznix/try
pnpm add @eznix/try
npm install @eznix/try

Wrapping Synchronous/Asynchronous Operations

The "Try" library provides functions for both asynchronous and synchronous operations. Here's how you can use it:

import { trySync, tryAsync } from "@eznix/try";

// `fetchUser` is an async function
const tryFetchUserAsync = await tryAsync(fetchUser);
// `fetchUser` is a sync function
const tryFetchUserSync = trySync(fetchUser);

Handling Results with "Try"

The "Try" library offers various methods to handle results effectively:

Access Successful Value

const user = await tryFetchUserAsync.getOrElse({"id": 1, "name": "jimmy"});

Inspect Error

const error = await tryFetchUserAsync.error();

Recover from Failure

const recoveredTry = await tryFetchUserAsync.recover((error) => defaultUser);

Unwrap Result (Carefully)

const result = await tryFetchUserAsync.result();
console.log(result.isOk()); // true
console.log(result.unwrap());

Examples of Using "TryAsync"

Basic Example:

// Wrapping a potentially failing asynchronous operation
const fetchUser = async (id: number): Promise<User> => {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    return user;
};

const tryFetchUser = await tryAsync(fetchUser(123));

// Handling the result:
const user = await tryFetchUser.getOrElse({"id": 1, "name": "Jimmy"});
console.log("User: ", user.name);
// User: Jimmy

Usage

Plain JavaScript

// Chaining tryAsync to avoid callback nesting

const getUser = async (id) => {
  // API call to fetch user 
};

const getFriends = async (user) => {
  // API call to get user's friends
};

const renderProfile = async (user, friends) => {
  // Render profile page
};

// Without tryAsync
getUser(1)
  .then(user => {
    return getFriends(user) 
      .then(friends => {
        renderProfile(user, friends);
      })
  })
  .catch(err => {
    // Handle error
  });

// With tryAsync
const user = await tryAsync(getUser(1))
  .recover(handleGetUserError)
  .getOrElse({id: 1}); 

const friends = await tryAsync(getFriends(user))
  .recover(handleGetFriendsError)
  .getOrElse([]);

renderProfile(user, friends);

React Example:

import React, { useState, useEffect } from 'react';
import { tryAsync } from '@eznix/try';

function MyComponent() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const user = await tryAsync(fetch('/api/user'))
        .recover(handleFetchError)
        .getOrElse(null);

      setUser(user);
    }

    fetchUser();
  }, []);

  if (!user) {
    return <p>Loading...</p>;
  }

  return <Profile user={user} />;
}

function handleFetchError(err) {
  console.error(err);
  return null;
}

Conclusion

"Try" brings the clarity of explicit error handling to JavaScript, inspired by the patterns seen in Rust and Golang. By incorporating it into your projects, you enhance code reliability and make error management more straightforward.

Contributing

The project is open for usage. Feel free to contribute and enhance it.

Quick tip

You can wrap any function with trySync or tryAsync. Making your code safer. In case you are not sure if you should handle an error or now.

You can also simplify with:

import { trySync as t, tryAsync as at} from "@eznix/try";
const {errors, data} = at(fetchUser).toPromise()

// but trySync and tryAsync is self explicit. Unfortunately
// we cannot use `try` because it is a reserved word in JS :(

Try it today or check it out on github.

Available on Github

bun add @eznix/try
yarn install @eznix/try
pnpm add @eznix/try
npm install @eznix/try

Happy coding!

Draw your mind out: Free tools for developers

Bruno Bernard — Tue, 07 Nov 2023 16:00:00 +0000

One does not simple explain by text and speech.

Convey your thinking by drawing. Here some free tools I used everyday which can help you out too:

Photo by Bich Tran: https://www.pexels.com/photo/black-graphing-paper-913116/

Blockchain Bridges: Bridging the Gap between Blockchains

Bruno Bernard — Wed, 02 Aug 2023 07:44:00 +0000

Recently, my friend approached me with an interesting question about the possibility of swapping between different blockchains using widgets or protocols. This sparked a conversation about blockchain bridges, which enable seamless transfers of assets between different blockchain networks. In this blog, we'll dive into the concept of blockchain bridges and explore their role in the decentralized finance (DeFi) ecosystem.

The Basics of Blockchain Bridges

In the world of cryptocurrencies and blockchain technology, there are various blockchain networks, each with its own unique features and capabilities. Sometimes, users may need to transfer assets from one blockchain to another. This is where blockchain bridges come into play.

I explained to my friend that there are indeed websites and protocols that allow users to swap assets between blockchains. One such protocol is the 0x protocol, which facilitates decentralized exchanges. However, the main focus of our discussion was on bridges.

A bridge, in simple terms, acts as a connector between two different blockchains. It allows users to lock their tokens on one blockchain and receive the equivalent tokens on another blockchain. For instance, if someone holds ETH on Ethereum and wants to use it on the Polygon network, they can use a bridge to transfer their ETH and receive Wrapped ETH (WETH) on Polygon, as WETH is the equivalent representation of ETH on Polygon.

The Mechanism of Blockchain Bridges

The functioning of a blockchain bridge involves smart contracts on both ends of the transaction. Users initiate the process by locking their tokens on one blockchain's smart contract, and the corresponding smart contract on the other blockchain releases the equivalent tokens. It's important to note that this process is transparent, with no hidden magic involved. It is merely a combination of servers and code working together.

My Experience with Deploying a Contract

I shared with my friend my personal experience of deploying a contract on the Scroll Alpha network using ETH bridged from the GoerliETH testnet. This experience provided me with valuable insights into the inner workings of blockchain bridges and how smart contracts facilitate the exchange of tokens between different networks.

Here is the repository: Kingdom of Ether

Finding the Right Bridges

For those interested in utilizing blockchain bridges, there are various platforms and websites that offer bridge services. I pointed my friend towards two resources to explore: Alchemy's list of Web3 bridges and DeFiLlama's bridge directory.

Alchemy list: Web3 bridges
DeFiLlama list: Web3 bridges

Types of Bridges

During our discussion, I mentioned two types of bridges: Native Bridges and Cross-Chain Bridges.

Native Bridges: These are bridges offered by the blockchain networks themselves. However, they have limitations, supporting only specific token transfers between certain blockchains. For instance, the Scroll native bridge allows token transfers only from the Goerli testnet.
Cross-Chain Bridges: These bridges are more versatile, supporting transfers from any blockchain to any other blockchain. Users can bridge their tokens across various chains, such as Mumbai, Polygon, and more. Additionally, some cross-chain bridges even allow for the bridging of real-world assets to purchase testnet tokens.

Distinguishing Characteristics

My friend and I also discussed the unique attributes of native and cross-chain bridges. Native bridges are often cheaper and non-profit centric, while cross-chain bridges tend to be more profit-oriented. I mentioned that I have personally used many native bridges on platforms like Polygon, Arbitrum, Scroll, Linea and ZKSync, along with several cross-chain bridges like Orbiter, Hop, and LayerSwap.

Personal Favorite Bridge

Out of all the bridges I've used, I shared with my friend that my personal favorite is Orbiter.finance. It has impressed me with its exceptional speed, making token transfers across blockchains a breeze.

Conclusion

In conclusion, blockchain bridges play a crucial role in enabling interoperability between different blockchain networks. They facilitate the smooth transfer of assets, bridging the gap between decentralized ecosystems. Whether using native bridges for simplicity or cross-chain bridges for versatility, users have a wide array of options to choose from when engaging with the world of blockchain bridges. So, the next time you find yourself wanting to move assets from one blockchain to another, remember that there are bridges that can make it happen seamlessly!

Be Cheap! Get Free-Tier Hosting Service For Your Apps.

Bruno Bernard — Thu, 29 Jun 2023 21:29:00 +0000

Got an app to try online, be cheap! Here some findings for hosting solutions in 2023... before they break their promise and turned to be a paid service.

(Links at the end)

There are great alternatives out there that offer free-tier plans for developers. Here are a few options worth exploring:

Render: Managed databases, static site hosting, and automatic SSL certificates.
Cyclic.sh: Deploy with Your Git.
Deta: Quickly building "personal spaces".
Fly.io: Global edge network across different locations.
PythonAnywhere: Beginner-friendly environment for Python.

Remember, choose free-tier hosting solution that fits your needs which allows you to continue testing, iterating, and growing your projects without breaking the bank.

Links:

https://render.com/pricing
https://www.cyclic.sh/pricing
https://deta.space/
https://fly.io/
https://www.pythonanywhere.com/

And bonus ...
https://freestuff.dev/tags/hosting/

The Importance of Sound Money and the Pitfalls of Fiat Currency

Bruno Bernard — Fri, 16 Jun 2023 10:00:00 +0000

Introduction

In today's ever-changing economic landscape, it is crucial to understand the concept of sound money and the drawbacks of relying solely on fiat currency. As financial systems evolve and governments continue to print money, preserving the value of one's savings becomes increasingly challenging. In this article, we will explore the idea of sound money, its benefits compared to fiat currency, and the potential alternatives individuals can consider for safeguarding their wealth.

Defining Sound Money

Sound money, also known as hard money, is a currency that retains its value over time. It is resistant to inflation and offers stability in the face of economic uncertainties. Money that holds its value well with a small rate of increase is considered sound, while money that loses value rapidly due to excessive creation of new units is often referred to as "easy money." Sound money is crucial for preserving purchasing power and ensuring the long-term stability of an individual's wealth.

The Pitfalls of Fiat Currency

Fiat currency, such as the US dollar or any other government-issued money, poses significant challenges when it comes to wealth preservation. Fiat currency is not backed by a physical asset like gold or silver; instead, its value is derived from the trust and confidence placed in the issuing government. Unfortunately, this trust can erode over time due to factors such as excessive money printing and global economic interdependencies.

The Erosion of Purchasing Power

One of the primary concerns with fiat currency is the erosion of purchasing power over time. Governments often resort to printing more money to finance their activities or stimulate the economy, which leads to an increase in the money supply. As a result, the value of each individual unit of currency decreases, leading to higher prices for goods and services. For example, what could be purchased with $1 in the past may now require $1.50 or more due to inflation.

The Global Impact of Fiat Currency

The influence of fiat currency extends beyond national borders. The United States dollar, as the global reserve currency, has a significant impact on other currencies worldwide. When the US government prints money, it not only affects the domestic economy but also creates a domino effect, impacting the value of other currencies. This interconnectedness means that currencies around the world can experience varying rates of depreciation, causing substantial fluctuations in exchange rates.

The Search for Sound Money

Given the challenges posed by fiat currency, individuals must consider alternatives for preserving their wealth. Saving accounts, although convenient, may not provide long-term value retention due to inflation. Instead, exploring options that offer a better store of value becomes essential.

Investing in Sound Money

One strategy to safeguard one's wealth is to invest in assets that retain their value over time. These assets, often considered sound or hard money, include real estate, gold, silver, and bonds. Investing in these assets can provide protection against inflation and economic volatility, helping to preserve purchasing power and generate long-term returns.

Alternative Investment Strategies

While investing in sound money assets may require substantial capital, there are alternative investment strategies available to individuals with varying financial capacities. Shareholding and lending are options that can be explored to diversify one's portfolio and potentially achieve higher returns. These strategies allow individuals to participate in the growth of businesses or earn interest on their capital.

Expert Insight

According to Robert Kiyosaki, renowned author and financial educator, keeping money in a savings account when the government is printing more currency can be detrimental. As he states, "If you keep it for years, for future investments or for the purpose of enjoyment, i.e., retirements, it is better to keep it in a better store of value than fiat money." This reinforces the need to consider alternative assets that offer stability and long-term value retention.

Conclusion

In a world where fiat currency is subject to depreciation and the erosion of purchasing power, understanding the concept of sound money becomes paramount. By diversifying one's wealth into assets that provide a better store of value, individuals can mitigate the risks associated with inflation and economic uncertainties. Whether through real estate, precious metals, or alternative investment strategies, the pursuit of sound money offers a path towards safeguarding one's wealth and securing a more prosperous financial future.

References:

"Sound Money" - Hard Money History. Retrieved from https://www.hardmoneyhistory.com

This is not a financial advice. :)

Is ChatGPT Taking Over Our Jobs? Find Out Why It's Actually Good News!

Bruno Bernard — Fri, 03 Mar 2023 12:38:00 +0000

Is chatGPT a threat to our jobs and livelihoods? This is a common question that arises when we talk about the use of artificial intelligence (AI) in our daily lives. The short answer is no, it is not a threat. In fact, chatGPT and other AI-powered tools can help us to become more productive and efficient in our work.

Let's take a quick look back in history to the time of the Industrial Revolution. During this period, many manual workers feared that they would lose their jobs due to the invention of machines. However, what actually happened was that the machines took over the repetitive and time-consuming tasks, allowing workers to focus on more creative and innovative tasks. The same is happening now with AI.

Today, we use computers and other innovative tools to perform tasks that were once done manually. For example, we used to have miners who would manually dig tunnels, but now we have machines that can do the job more efficiently. Similarly, chatGPT and other AI-powered tools are designed to take over tasks that require a lot of time and effort.

The use of AI in our daily lives does not necessarily mean the disappearance of jobs. Rather, it means a shift in the type of jobs that are available. People who once performed repetitive tasks can now be trained to master AI tools and take on more innovative and challenging roles.

AI-powered tools can help us to become more productive and efficient. For instance, chatGPT can help bloggers and educators to structure their content and reach a wider audience. With AI, we can perform complex tasks more quickly and easily, leaving us with more time to focus on creative and innovative projects.

In conclusion, AI-powered tools such as chatGPT are not a threat to our jobs. Instead, they offer an opportunity to be more productive and efficient. To stay relevant and competitive in the workforce, it is important to embrace innovation and adapt to the changing technological landscape.

PS. This blog was enhanced using chatGPT

Photo by Pavel Danilyuk: https://www.pexels.com/photo/elderly-man-thinking-while-looking-at-a-chessboard-8438918/

Setting up django should be fast and easy.

Bruno Bernard — Wed, 27 Apr 2022 06:55:31 +0000

I am a freelance developer. Lately, I've been heavily using Django to make my development process faster.

Each time I needed to create a project, it was a pain for me to copy-paste code from previous projects on and on.

Fortunately, to help myself out, I made a little script. I just run with a curl call alongside bash. And Boom! Installed! Everything I needed was there.

Hope this might help you too. You can fork it. Make it your own, and set up your own environment. It is not more repetitive.
Also, It will work with always the latest Django project. The project has no hardcoded Django version attached to it. :) + It has some goodies in it.

So, check it out!

eznix86 / django-setup-template

🐍 Sssssetup your django with one command

Django Setup Template

Like this guy, just copy and paste this command, it generate your project,

Prequesities

Python 3+
Mac/Linux

What you have inside

pytest with django (testing)
black (linting)
factory boy (fixtures)
django (obvisouly :) )
flake8
isort
mypy
rich

Goodies

It automatically setups 3 environements for you, staging, prod, dev. (Check in core/settings/ folder.)
You also have a Procfile for heroku ;)
Using rich to have pretty logging... sexy ones

What you need to Ctrl+C and Ctrl+V:

(Press the copy button too if you are a mouse guy)

curl -sSL -H "Cache-Control: no-cache" https://raw.githubusercontent.com/theArtechnology/django-setup-template/main/install.sh | bash -s

Press enter, and boom! Project ready to rock !

Want more ?

Contribute my friend ! *wink

Want it your own?

Fork !!!

View on GitHub

Why not try declarative coding for the Web

Bruno Bernard — Tue, 01 Mar 2022 20:19:31 +0000

Google and Apple, for the past few years, have been touting their frameworks: Flutter, SwiftUI, and JetPack Compose. Being a mobile developer (on occasion), I've noticed that these frameworks have something in common: doing declarative UI. And I think they might be on the right side with type of paradigm...

Either writing code for the web, or you're creating applications for phones, you'll notice that these two worlds never collide; different paradigm and approaches. That's why I tried to code declaratively on the web. I wrote a little project (WIP), it was quite interesting topic to dig into. No need to Google what it does or doesn't do. Each component is self-documented, easy to extend, no HTML and perhaps no css.

What I mean by declarative ?

For those who don't want to bother with css and html. You can expressively write components rapidly and autocompletion of your IDE will help you a lot.

Writing declaratively:

- Components already made and available for you to use.
- Extend Existing Components with its built-in styling
- Easier to read

In a case you want a list:

Just do:

Column({
    children: [
        Items(),
        Items(),
        Items(),
    ]
})

Or a row ?

Row({
    children: [
        Items(),
        Items(),
        Items(),
    ]
})

What about centering ? (Yeah my dudes, it's so easy)

Center({
    child: Items()
})

What if you want to create a scrollable/stackable/clickable elements ?

In declarative coding, everything is a sort of function you can call.

Scroll({ children: [] }), Stack({ children: [] }), Button() and so on...

How can we style a component ?

// Inside a component you will have all that you need, and it is self documented
// Your IDE will help you :)
TextSpan({
    text: "Hello",
    style: {
        fontWeight: FontWeight.Regular
    },
}),

Check out my repository and try it for yourself. And see if coding this way is nice or really bad.

https://github.com/theArtechnology/declarative-js

Do you think it's time to simplify things? Why not try declarative coding for the Web?

What is an ssh-agent ?

Bruno Bernard — Sat, 17 Jul 2021 17:43:13 +0000

Original post: https://blog.busymind101.com/posts/what-is-an-ssh-agent/

What is an ssh-agent?

Today I learned about ssh-agent and how it works, thanks to https://twitter.com/plv for that, and if you get the thumbnail of this blog, it's not about agent 47 or whatsoever.
We talk about SSH, keys, and authentication.

The problem

I had to clone (via git) a custom-built package for PHP from a private repository inside a docker container.

I end up doing some googling to know how we can achieve that. Since we could not just copy-paste our ssh keys inside a container like that, there must be some workaround.

So, I end up asking for help and knowledge to know how to do it properly.

The encounter

How it was explained by https://twitter.com/plv, the ssh-agent is a daemon that should run alongside sshd. Whenever you want to use ssh to pull something or access something remotely, it uses an unencrypted version of your ssh keys, so you don't need to type your passphrase every time you need to use ssh command.

Behind the scene

In my case, I had to access something from a private repository that only my keys allowed me to.

Basically from another machine perspective (here it's the docker container) which needs to access the same resources as I do uses the ssh-agent. The ssh-agent to be clear is a socket but let's call it a tunnel.

This tunnel is used to funnel the traffic through the ssh-agent which is accessible on my local machine. To make such thing work, in docker, we can create a volume to the socket using $SSH_AUTH_SOCK.

How to enable it?

Just run ssh-add so it loads your keys into your agent, but ensure that your ssh-agent is up and running.

Next, you will get a prompt that it's done, just check with ssh-add -l,
if there is something you are good to go.

Use cases

Whenever you want to make your remote host (VPS for example) to access the same thing as you, just add ssh -A .... and your agent will be forwarded.
When using docker, you can use the $SSH_AUTH_SOCK as such

version: '3'
services:
  app:
    container_name: yourcontainer
    environment:
      - SSH_AUTH_SOCK=/ssh-agent 
    image: yourapp
    volumes:
      - ${SSH_AUTH_SOCK}:/ssh-agent

You rename your SSH_AUTH_SOCK in the environment so your system at runtime will know it is a custom ssh-agent, here it's/ssh-agent
In the volume, you are only mapping your host SSH_AUTH_SOCK inside the container
Going inside your docker container / remote host, just do ssh -T git@github.com, they will be authenticated as you.

BEWARE

Don't use the ssh -A all the time, if your server is compromised, you might allow an attacker to use your ssh-agent socket, so they can literally access your other data which needs ssh, so to use with extreme care.

Let's talk about the obvious, using a passphrase when doing ssh-keygen is necessary, you don't want to have bare-naked keys dangling if your local pc is compromised, you are screwed.

And there you have it, know I know about ssh-agent and you do too. ;)