DEV Community: Ciklum CZ&SK

Creating Modern Accordion Components with CSS and HTML only

Tomas Rezac — Wed, 21 Feb 2024 09:32:11 +0000

Welcome to the first instalment of a series dedicated to crafting common components using only modern CSS and HTML.

Note: I am the author of Sugar.css, a minimalistic CSS Framework built with the latest CSS. You can explore a more advanced implementation of a similar accordion on Sugar.css.

Assignment

What are the essential features of a proper Accordion?

Toggle content on user input or programmatically
Accessibility (toggle on Enter and Space)
Disable access to accordion content (by keyboard) when the accordion is collapsed
Stacking multiple accordions after each other
Auto close other accordions in the group when one is opened

Toggling Content

Gone are the days when the only way to toggle styles permanently was through a label with a hidden checkbox. For the past few years, we've been able to use a combination of details and summary HTML elements to achieve this. The details element hides all its content by default, except for a summary element if placed as a direct child. The summary serves as a toggle button; if not present, the text details is added as a default toggle. By clicking the toggle, the rest of the hidden content is revealed. Let's observe the default behavior and design:

Accessibility

All accessibility features are built-in; the summary has a default tabindex and can be toggled by Space and Enter keys, so no additional work is needed here.

Disabling Access to Content When Collapsed

While this functionality should work out of the box, there's an exception with Safari. If the details element is collapsed and contains focusable elements like input or button, tabbing in Safari will be consumed by those hidden elements. To ensure consistent accessibility across browsers, a simple JavaScript solution is required. The content is wrapped, and the inert attribute needs to be set to the wrapper once the details is collapsed.

Styling

Let's apply some CSS to enhance the appearance. First, we'll remove the original triangle indicator. This can be done differently in various browsers, but the following CSS accomplishes this:

summary::marker,
summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style:none;
}

Next, we'll style the summary to resemble an accordion header and prepare it for a new chevron:

summary {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding-block: var(--padding);
  font-weight:bold;
}

details {
  --padding: 0.75rem;
  --border-width: 0.1rem;
  --chevron-size: 0.8rem;

  font-family: system-ui;
  font-size: 1rem;
}

To implement the new chevron for the base accordion, we'll create a rotated box with just two borders. The state of the opened accordion is selected by details[open]:

details summary:after {
  content: '';
  margin-inline-end: var(--padding);
  width: var(--chevron-size);
  height: var(--chevron-size);
  border: solid currentColor;
  border-width: 0 0 var(--border-width) var(--border-width);
  transform: rotate(-45deg) translateY(-30%);
  transition: transform 0.3s;
  flex-shrink: 0;
}

details[open] summary:after {
  transform: rotate(45deg);
}

Lastly, we'll add separators between accordions if there are more consecutive ones:

details:not(:last-of-type) {
  margin-bottom: var(--padding);
  padding-bottom: var(--padding);
  border-bottom: var(--border-width) solid gray;
}

Grouping Accordions

Another useful feature of details is its acceptance of a name attribute. All details with the same name behave as a group. When you open one, the others in the same group automatically close.

Check out the result

Additional styles like colours and spacings can make it more vivid

Conclusion

As demonstrated, details and summary are fully capable of replacing JavaScript-driven accordions. They make implementation easier and provide immediate accessibility (with the exception of Safari, which requires a workaround for a specific edge case).

However, there's one potential drawback: the lack of animation support. If animation is applied to collapsed content within details, it runs only once when opened and cannot be rerun when opened next time. This limitation may need to be considered based on the specific design and functionality requirements of your project.

Next time we will check the dialog element. See you soon.

How to Use Docker during Development

Karel Šťastný — Mon, 07 Mar 2022 15:36:11 +0000

During development, it is very advantageous to be able to develop everything locally on the developer’s own machine.

This would be very easy if the application to be developed had no external dependencies, but most systems do not live in vacuum and depend on other systems. These may be external APIs that provide us some data, data storage applications of any kind (SQL or NoSQL), message queues, distributed caches and others.

While we may not always want to simulate external APIs locally, it is very useful for each developer to have his or her own database or RabbitMQ instance that they may play with without constantly stepping on a colleague’s toes.

This may not be possible for bigger or more complex projects, but for a lot of applications it is easily doable. One way to do this is of course installing every dependency locally but this may quickly become unwieldy if you need to work on multiple projects or have to use multiple versions of a given system.

Therefore we prefer to use containers, namely Docker, for quickly spinning up these dependencies. This allows us not only to protect our computers from the software bloat but also helps unify the development environment between different developers.

In this article, I would like to show you how this can be easily done (with just a handful of shortcuts and cut corners :))

What do we want to do?

As an example, we will use a small (work in progress) application for managing users‘ book library, https://github.com/kstastny/alexandria.

We want to be able to develop everything locally and for that we need access to MariaDB database and an Adminer instance for accessing it. We want to run these two without going through the hassle of installing everything.

I will assume that you already have Docker installed and have some knowledge of what a Docker image is and how to run Docker containers. If not, just go to https://duckduckgo.com/ and search for “docker basics”. I will wait for you to get back.

Local infrastructure setup

Now, how do we actually use Docker to spin up a local copy of our external systems so we can develop our bit of a bigger system? We could, of course, run a container for each dependency but that would be a bit unwieldy if we have more than one or two.

Instead, what we’re going to use is “docker compose”. This helps us with multi-container environments (i.e setting up a system with more than one container).

Since we’re talking about local developer machines here, we really only need to spin up the supporting infrastructure and not the services that we are in fact developing.

To run the infrastructure, we need to do the following

Create a file called “docker-compose.yml” that will contain the definition of our containers. For example, it can look like this:

# format version https://docs.docker.com/compose/compose-file/compose-versioning/
version: '3.8'

# define list of services (containers) that compose our application
services:

  #identifier of database service  
  db:
    #Specify what image and version we should use; we use 10.5 due to https://jira.mariadb.org/browse/MDEV-26105
    image: mariadb:10.5
    #container restart policy https://docs.docker.com/config/containers/start-containers-automatically/
    restart: always
    #setup environment variables
    environment:
      MYSQL_ROOT_PASSWORD: mariadbexamplepassword
    #define port forwarding (host:container)
    ports:
      - 3306:3306
    #bind volume `alexandria-db` to directory `/var/lib/mysql`
    volumes:
      - alexandria-db:/var/lib/mysql

  adminer:
    image: adminer
    restart: always
    ports:
      - 8090:8080

volumes:
  alexandria-db:

Example modified from https://github.com/kstastny/alexandria/blob/master/docker-compose.infrastructure.yml

To run the infrastructure, just run “docker-compose up –d”

If all went well, we now have a running MariaDB instance and an Adminer running on http://localhost:8090/?server=db&username=root that we can use to manage MariaDB. We can now run our application and use the databasewe have on our side.

When we need to change the dependencies or upgrade the DB engine, we will just update the docker compose file and everything will be magically provided for us.

For simplicity, I have stored the DB root password in docker compose, but for production ready deployments we should be managing our secrets in a more secure way. A bit safer way would be to use an environment variable to pass the password into the docker compose (see an example below).

Even that is not enough though. To provide the password securely, we should use “docker secrets” and pass the secret file using an environment variable MARIADB_ROOT_PASSWORD_FILE. But that’s a topic that has to wait for another article 😊

Running the whole stack

Sometimes we might want to run the whole stack including our application. In that case, we can either modify our docker-compose.yml file so that it also contains the app, or we can store the definition in a separate file and combine both when needed.

  alexandria:
    build:
      # build context. Either local directory or url to git repository
      context: .
      dockerfile: Dockerfile
    #https://docs.docker.com/compose/startup-order/
    depends_on:
      - "db"
    command: ["./wait-for-it.sh", "db:3306", "--", "python", "app.py"]
    ports:
      - 8080:5000
    environment:
      DB__CONNECTIONSTRING: Server=db;Port=3306;Database=alexandria;Uid=root;Pwd=${MYSQL_ROOT_PASSWORD};SslMode=none
      ASPNETCORE_ENVIRONMENT: ${ASPNETCORE_ENVIRONMENT}

n this example, we will create a file “docker-compose.app.yml” with the content above.

This time, we are injecting the environment variable from the inside so we also need to define a file “.env” that will contain the password

MYSQL_PASSWORD=mariadbexamplepassword

To run the whole application stack including dependencies, we will use the following command:

docker-compose -f docker-compose.yml -f docker-compose.app.yml --env-file .env up --build -d

That’s it?

Yes, that’s it. I hope that you can see that using Docker to support your local development is fairly easy and worth it even if you don’t plan to deploy your application in Docker.

What is consensus in blockchain technology

Lucian Gruia — Mon, 07 Mar 2022 11:16:34 +0000

Consensus mechanisms

Sometimes a confusion appears between the blockchain type and its consensus mechanism. This is why it is important to understand what consensus is and its role in a blockchain.
The consensus mechanism makes sure all nodes are synchronised with each other and agree on which transactions are legitimate and added to the blockchain. It makes sure that everyone in the network uses the same blockchain.
In a centralised system, a central administrator has the authority to maintain and update the database.

Consensus assures that the protocol rules are being followed and guarantees that all transactions occur in a trustless way. There are some specific goals in the Blockchain consensus protocol, such as agreement, collaboration, cooperation, equal rights for each node, and mandatory participation of each node in the consensus process.

Types of consensus algorithms:

Proof of Work (PoW) — is a decentralised consensus mechanism that requires members of a network to expend effort solving an arbitrary mathematical puzzle to prevent anybody from gaming the system. Proof of work is used widely in cryptocurrency mining, for validating transactions and mining new tokens.
Proof of Stake (PoS) — protocols are a class of consensus mechanism for blockchains that work by selecting validators in proportion to their quantity of holdings in the associated cryptocurrency. Unlike a proof of work (PoW) protocol, PoS systems do not incentivise extreme amounts of energy consumption.
Delegated Proof of Stake (DPoS) — is a popular evolution of the PoS concept, whereby users of the network vote and elect delegates to validate the next block. Delegates are also called witnesses or block producers. Using DPoS, you can vote on delegates by pooling your tokens into a staking pool and linking those to a particular delegate. You do not physically transfer your tokens to another wallet, but instead, utilise a staking service provider to stake your tokens in a staking pool.
Proof of Importance (PoI) — is a cryptocurrency term defined as a blockchain consensus technique — essentially, proof of important works to prove the utility of nodes in a cryptocurrency system, so that they can create blocks.

Other consensus mechanisms:

Proof-of-Capacity(PoC) — PoC is another consensus algorithm used in blockchains that allows mining devices in the network to decide mining rights and validate transactions with the help of their available hard drive space.
Proof-of-Activity (PoA) — PoA is a consensus algorithm used in Blockchain technology that ensures that all transactions occurring on the network of Blockchain are genuine and authentic. PoA consensus, which is a combination of proof-of-work and proof-of-stake, ensures that all miners arrive at a consensus. In other words, PoA is an attempt to consolidate the best features of PoW and the PoS systems.

Blockchain main concepts

Lucian Gruia — Mon, 07 Mar 2022 11:11:55 +0000

Every day we hear about blockchain, and lately some convergent concepts have become buzzwords. But let’s look at their actual meanings.

Merkle tree

A Merkle tree is a fundamental concept of blockchain. It is a structure that allows secure verification and efficient content in a large body of data. It helps to verify the consistency and content of the data. [1] It summarises all the transactions in a block by creating a fingerprint of the entire set of transactions, which allows a user to verify whether a transaction is included in a block. [2]

A Merkle tree is created by repeatedly hashing pairs of notes until there is only one hash left, known as Root Hash or Merkle Root.

Using a Merkle Tree we are significantly reducing the data that a trusted authority has to store for verification purposes. It helps in verifying data consistency in an optimal way since we are not checking the real amount of data — so we are reducing the computational effort. Also, it is more optimal than creating a hash on all transactions, because the risk of collisions increases proportionally with the number of transactions. [3]

An example of a transaction is shown below. Instead of storing all hashes for all transactions, we are creating the hash of hashes and so on, till the root hash.

After we calculate a hash of the entire block, then we are taking into account the difficulty, which is set by the blockchain algorithm.

The important role of the Merkle tree is that it greatly compresses the amount of data we have to store. Otherwise, all nodes of a blockchain should keep a copy of every single transaction that has ever occurred and compare them line by line in order to validate the integrity of data.

This is actually separating the proof of data from the data itself.

Hashing

This is a function that converts an input item of any length into an output item of a fixed length. [4] The values returned by a hash function are called hash values, hash codes, digests, or simply hashes. [5]

Note that a hash function is not injective, not surjective and will return the same output every time you apply it to the same input, but using an output, you cannot know which was the original input.

Source: https://en.wikipedia.org/wiki/Hash_function

Nonce value

Miners are trying to guess the hash, based on difficulty. This can be set initially as n number of zeros a hash of a block should start with. The difficulty increases with the number of zeros. So, in this case, miners have all the transaction data, but they do not know one value, the so-called Nonce. They have to guess the specific nonce value that makes the block start with a specified number of zero. Because of the enormous volume of the number space, the only way to get the nonce value is random.

Let’s finally see what a block is

The block is the building group for any blockchain.

It has 2 main components:

Block header
Block body

The Block header has 6 sub-components:

Block version — does not matter in most cases, but it can signal which protocol decisions it supports
Merkle tree root hash — encodes the blockchain data in a secure matter. It enables nodes to quickly check the current block for integrity. [6]Simplified, it serves the same role as a hash of archive files downloaded from an internet repository.
Previous block hash — this is the hash of the previous block, without which there will be no connection between blocks and no chronology.
*nBits *— this is the encoded target threshold under which a block is considered valid. The lower the target, the greater the difficulty to generate a block. Generating a block is more like a lottery. It generates numbers between 0 and 256-bit numbers and a hash is considered valid if it is under the target. Please note, as the target decreases (so the number is smaller), the number of zeros increases, so the difficulty increases.
*Nonce *— is the variable increment for the PoW (Proof of Work).
*Timestamp *— this not only adds some randomness to the block hash, but it also makes it difficult for an adversary to manipulate the blockchain. A timestamp is considered valid if it is greater than the median timestamp of the previous 11 blocks.

So based on these components of Block Header, this is how blocks are linked:

In this scenario, if a hacker wants to attack a specific block number, they will have to alter not only preceding blocks, but also following blocks, as other miners are constantly checking hashes and the longest chain of blocks.

Wallets

A wallet is a program that allows users to buy, sell or monitor balances. This only makes sense in cases where we are storing values in the digital ledger of the blockchain. [7]

Wallets use a private-public keys pair to authenticate users.

There are 3 types of wallets, available to store/reflect the transactions on blockchain:

software — mobile, desktop or web apps
hardware — stores private keys on hardware devices, such as USB
paper — the pair of keys are generated by the software and then they are printed, to make transaction possible (by sending funds to the address on paper)

How a transaction is executed
Transactions are part of the block body and are the most important component of a blockchain. Any other components have the role of contributing to the safety of transactions.

Transactions are data structures that encode the transfer of value between participants in the blockchain system. The process of transaction verification and recording is immediate and permanent. [8] The transaction is approved through a process known as consensus.

A transaction is committed in 4 stages:

Initiation of transaction proposal. At the initial stage, the transaction is created and signed by the owner.
At this stage, the transaction is broadcasted to the network.
The transaction is verified. Once the transaction is broadcasted to the network, other authorised nodes verify it. If the transaction is valid, it is added to a Block, and if not, nodes reject the transaction. [8]
The transaction is committed. Finally, the Block is added to the Blockchain, and the transaction is committed.

Mining

This is a process of recording new transactions on the blockchain ledger. When two users make a transaction, nobody can see it until a miner puts it in a block. It is only after confirming the nonce value by the miner, which matches a valid hash (under target encoded in nbits).

For example, if the difficulty is 4, in this case, the hash will be valid.

As described below, a hash function always generates the same output for the same input. So, the miners have to change something in the content of the Block in order to find a valid hash, so that would be the nonce value. They are endlessly checking values in order to find a match that would generate the desired hash value. Also, note that the timestamp is constantly changing during the miner’s effort to find (to mine) the nonce value.

By creating a block, a miner receives a monetary reward, so they will have an interest in investing effort in this process.

The mining process is not essential for a blockchain to exist. This is a way of validating transactions especially used for public blockchains. In private blockchains, there can be customised rules to validate transactions.

Longest chain rule

For adding a new block to the blockchain, we need to use a lot of effort to generate the blocks. As a rule, nodes will always select the longer chain over the shorter one.

Adopting the longest chain rule allows every node on the network to agree on what the blockchain looks like. [9] So, they agree in this way on the same transaction history. This means that nodes that are acting independently can maintain a globally shared view of a file.

Let’s assume, there are 100 blocks on the chain and a malicious node gets corrupted on node 23. Affecting node 23 on a local node will also break the next node, so if this node tries to broadcast its blockchain to the network, the other nodes will reject it as they already have longer chains on their local nodes.

However, sometimes the longest chain rule does not necessarily mean the blockchain that requires the most energy to be created. [9] This is the case when nodes have to check 2 versions of the blockchain with multiple difficulty periods. In this case, nodes will select the one with the most cumulative chainwork (the total number of hashes that are expected to have been necessary to produce the chain).

References

[1] https://www.javatpoint.com/blockchain-merkle-tree
[2] https://medium.com/@PrinceChioma4/blocks-all-you-need-to-know-3-d32dae9a4271
[3] https://towardsdatascience.com/mechanisms-securing-blockchain-data-9e762513ae28
[4] https://www.investopedia.com/terms/h/hash.asp
[5] https://en.wikipedia.org/wiki/Hash_function
[6] https://www.investopedia.com/terms/m/merkle-root-cryptocurrency.asp
[7] https://www.investopedia.com/terms/b/blockchain-wallet.asp
[8] https://www.oreilly.com/library/view/mastering-bitcoin/9781491902639/ch05.html
[9] https://learnmeabitcoin.com/technical/longest-chain

Components of the blockchain ecosystem

Lucian Gruia — Mon, 21 Feb 2022 12:49:06 +0000

Like any other software platform, blockchain has an ecosystem where components are dependent on each other.

Projects — The Blockchain ecosystem is currently running with some major projects and more are in the pipeline. Bitcoin, Neo, Stellar are some popular names.
Users — Blockchain users are ordinary people, who make use of the blockchain or cryptocurrency to achieve some results.
Exchanges — Every Blockchain project has a robust ecosystem working under it, that includes a decentralised exchange. Exchanges are developed by the Blockchain team or the community of other developers.
Miners — Blockchain requires a large network of independent nodes around the world to maintain it continuously. In private blockchains, a central organisation has authority over every node on the network. In public blockchains, anyone can set up their computer to act as a node and these computers are called miners.
Developers — Currently there are two types of developers in the blockchain ecosystem: blockchain developers and dApps developers
Applications — Industries, developers and communities build blockchain applications to serve a specific purpose. They are called dApps and are the foundation of Web3.0

Architectural view

These are the most common layers available with every platform:

App layer — most commonly contains legacy and enterprise apps.
Integration platform — layers with different kinds of protocols, like REST, governance and API management.
Blockchain access layer — features to fetch and write data to the blockchain
Analytics — reporting, dashboard or analytics-based system

Palette generator you will ️

Tomas Rezac — Mon, 21 Feb 2022 08:47:45 +0000

You can check it straight away palette.rocks

Why I made yet another Palette generator

I have been using color generators for years. There are many great ones: Coolors, Adobe color, Color hunt, Paletton, Material color tool, Dopely, to name a few.

They have eased my color palette selection a lot. But maybe they could help me even more.

With such a tooling one would expect to generate the right palette within minutes. In reality, it is more like hours.

Maybe you know the feeling of generating super nice palette, transferring it to an accessibility checker and finding out it has too low contrast or it doesn't pass color blind test.
And once you generate a palette, which pass all the accessibility checks, it simply doesn't look well in your particular web project.

I have been thinking about how to make the color selection easier and how to save some time. How to try hundreds of palettes in my web projects in fraction of time I used to need? I decided I would create my own generator, which would be able to achieve that!

What a color palette generator should do

It needs to generate palettes easily.
It needs to give you all the accessibility feedback in real time.
It should show all the necessary data and feedback in one place (colors, their relations, accessibility report, preview, ...)
It should be easy to transfer generated palette to you project.

Most of the palette generators - mentioned in the introduction part - cover up to 2 of the above mentioned points. Mostly they don't provide any accessibility feedback. And if they do, they struggle with showing all the data at one place and in real time.

None of the palette generators make it very easy to transfer the generated palettes to your web. In better cases, they generate CSS variables for you. But you still need to copy paste them; reload your browser; remember how it looks like; generate new palette... and repeat the process until you are happy with result.

So I made my own palette generator, and tried to cover all the points.

The killer feature

Probably the most innovative palette.rocks feature is the possibility to connect it to your web and remote control its color theme in real time. Just spin the color wheel or generate random palette and see how it looks like in your web.

In order to connect your web to palette.rocks you need to fulfill following requirements:

1) Your web needs to use CSS variables for colors


:root {
  --your-color: #1ab291;
}

2) Add this script to your page, it will expose a global function mapPaletterRocks(mappingObject).

<script src="https://palette.rocks/script.js"></script>

3) Call the mapPaletterRocks(mappingObject) function with mapping object.
Keys of that object are colors in pallete.rocks.
Values are pairs of color variables used in your app.
To the first in pair, a color from palette.rocks is mapped. To the second in pair, the most contrast color (white or black) is mapped.

mapPaletterRocks({
    a:['--primary-color', '--primary-contrast'],
    b:['--secondary-color', '--secondary-contrast'],
    c:['--tertiary-color', '--tertiary-contrast'],
    d:['--quaternary-color', '--quaternary-contrast'],
    customColors:[['--custom-color-1', '--custom-color-1-contrast']]
});

4) Click the Connect YOUR WEB to live preview button in palette.rocks page. Paste your web's url into the input in top of the modal and submit.

Try it out

You can try it on my other project. Just go to palette.rocks, follow the point 4 from above and submit this url
https://fluid-grid.com/
Then click on the Desktop preview on the 'mobile phone' to see it in full size. And start changing colors ;)

More unique features:

And there are more advanced features in palette.rocks

1) Color Blender

Blender mixes all your primary colors and generates colors in between. You can then easily pick some of those as custom supplementary colors.

2) Reversed Backgrounds

This - not that well known color phenomenon - is based on something called color subtraction. I won't go for explanation, as it would require more than another article ;)
You better see it in two following examples:

As you can see, the inner squares are perceived as identical colors, until you compare them side by side.
In real world design, you would need such inner colors if you wanted to present just three colors in some kind of split color design. This tool helps to find 4 colors which are perceived as 3.
On the other hand, if you manually find a mid color between those two backgrounds and use it as the inner squares, you end up with 3 colors which will be perceived as 4 by your brain :)

Future of palette.rocks

There are definitely areas for more improvements: different color formats (LAB, CMYK) for manual inputs; locking custom colors (if you lock a custom color, it would change automatically, as you change your primary color); and there are probably more features, I don't think about now.
I'll be glad for your feedback. What are YOU missing in palette.rocks?

Types of blockchains

Lucian Gruia — Mon, 14 Feb 2022 12:30:02 +0000

When we build a blockchain solution, inevitably the decision must be made as to what type is best suited to meet the business needs. It is fairly common for there to be confusion about blockchain types, most often associated with consensus algorithms. Hence, it is important to have a clear understanding of the available choices.

Public blockchain — permissionless; anybody can access and read, write or participate without explicit permission or authorization. A public blockchain is decentralised and has no single network-controlled entity. It has more complex rules and consensus algorithms for better security. It is computationally expensive to mine and adds a new block because the computational power is distributed globally, e.g. Bitcoin, Etherum etc.

There are also other types of blockchain that play an important role in replacing some classical models of centralised networks. Private institutions are leveraging the main idea behind the blockchain and applying it to upgrade their legacy systems:

Permissioned (private) blockchain — only the members of the network can read/write/audit the blockchain. Consensus is based on a multi-party consensus algorithm. There are critics who do not consider private blockchain as “real” blockchain technology. With its centralised and exclusive nature, it defeats the purpose of the original blockchain idea. This model is faster and more cost-effective because it is hard to tamper with data and easy to validate transactions. In this model, there are permissions for nodes that can be part of the network. Also, this is less secure than a public blockchain as we make it accessible to a bigger group of users. A fine representation of a private blockchain is Linux Foundation's implementation, Hyperledger Fabric.
Federated/Consortium blockchain — this is also a private and permissioned blockchain where entities can become members of the network by prior approval or voting. This type provides all the benefits of a private blockchain but adds another major one: removing the consolidation of power to only one company. This is a good model for organisational collaboration.

Use cases of blockchain technology

Lucian Gruia — Mon, 07 Feb 2022 17:42:39 +0000

The application of Blockchain is not limited to cryptocurrencies. There are many other implementations of it, such as:

Banking and Finance — although this was the first sector to benefit from the advantages brought by the blockchain, it is somehow also the most endangered. Currently, the cryptocurrency market is constantly growing, and centralised banking systems are in a position to adopt the new technology, or to be taken over by it.
Currency — it’s not only about some cryptocurrencies, or some countries that are acting cool and adopting their “official” cryptocurrency. One day one currency may emerge as the only currency. And we do not even know if “currency” will be a proper name for that representation of value, or “that currency” may be the value itself.
Healthcare — healthcare and data privacy are becoming more and more correlated. Worldwide systems are relying on electronic systems to store data, which are vulnerable to attacks, or to data loss. A decentralised approach may even have implications in the integrity of priority lists for vaccinations, access to medication, and so on.
Data privacy — probably one of the hottest topics of the moment that is changing because of the blockchain, and this is only the beginning. There will be the increasing need to securely store data when healthcare services and processing DNA become widespread.
Records of Property Ownership and Transfer — public notary, lost or burned papers, or forged documents must become history soon, and blockchain has the capability to change all of these.
Smart Contracts — when it comes to contracts we can even think further, about laws, constitutions of sovereign states, public declarations or international agreements.
Supply Chains — humans are moving objects daily from one place to another, from country to country and keeping track of all of these may be challenging and vulnerable to many types of fraud.
Voting — although voting is the basis of democracy, there are still no bulletproof electronic systems that may prevent fraudulent voting. This is a very complex topic and probably deserves a dedicated article on its own. Fortunately, I can recommend two very well made videos discussing this: Why electronic voting is a bad idea and why electronic voting is still a bad idea.

What is blockchain?

Lucian Gruia — Mon, 07 Feb 2022 12:05:10 +0000

You will find on Google many definitions of ‘blockchain’, so many that I will only try to summarise some of them.

Blockchain is a system of recording information in a way that makes it difficult or impossible to change, hack, or cheat a system. A blockchain is essentially a digital ledger of transactions that is duplicated and distributed across an entire network of computer systems on the blockchain. (Source: euromoney.com)

(Note: this is a widely accepted definition, but “impossible” is not actually the exact word to use. Maybe we can agree the statement is true in production implementations, where there are many contexts and also, a lot of physical limitations. However, it is not necessarily mathematically impossible to cheat, there’s a good description here by J.H. White in chapter 4.3.)

You can think of the blockchain as a specific type of database. It is storing data using blocks that are chained together. New data is entered into new blocks, and once the block is filled with data, this is chained onto a previous block and this makes the data chained together in chronological order.

Simplified, is a list of data blocks that are linked together with a timestamp.

As common databases have already known data types, the most common use for blockchain so far has been as a ledger for transactions.

Decentralised blockchains are immutable, which means that the data entered is irreversible. For Bitcoin, this means that transactions are permanently recorded and viewable by anyone.

The main difference between a blockchain and a database

Actually, it depends on what you mean by “a database”. Of course, we can refer to any organised group of files linked by some logic and maybe an API, as a database; right? We can even consider an Excel document, with formulas and links between sheets, as a database as well. Technically speaking, both of these are correct. Actually, in literature, there are many opinions regarding classification models, so I can recommend this article to you, it should help you get a better idea about this.

However, in this comparison, we will focus more on the differences between a common SQL/NoSQL DBMS and a blockchain.

A key difference is in the way data are structured. A blockchain collects and groups data in blocks that have a certain capacity in terms of storage. When a block is filled, then it is linked to the previous block, using a hash of the entire previous block content.

Another key difference is that the blockchain is distributed: it does not store data in a single place and does not have a single point of failure. Of course, there are also other distributed DBMS, such as Cassandra, for example, which stores data using multiple nodes and provides a lot of support for data consistency.

But there is one more key difference; an important one that makes blockchain technology so famous and revolutionary — it makes data immutable. There is no DML that allows you to modify the data, no matter what permission levels you have. You cannot cheat, you cannot root.

And what is more fascinating is that the solution was there with us all the time and it is a mathematical one. We do not need to struggle to make systems more secure, to hide sensitive data, to use more and more powerful servers to handle security and block attacks. We actually only needed to do the reverse: to share them with everyone and to create links between blocks of data, so if anyone changed anything, all the others would know. It is security by transparency and hiding things where everyone can see them.

Some history

The history of blockchain as a popular trend started with the publication of the whitepaper Bitcoin: A Peer-to-Peer Electronic Cash System, written by someone calling themselves Satoshi Nakamoto in 2008. The bitcoin project started the cryptocurrency era being the first implementation of a peer-to-peer network as a solution to the double-spending problem. Even though this project continues to function and circulate successfully to date, Nakamoto’s ideas behind the creation of bitcoin have exceeded the original use case. Now, these ideas are known collectively and independently as the blockchain.

However, the underlying maths concepts are older than the bitcoin implementation; the P2P concept was already known and other implementations existed before blockchain, but they did not become so popular and also, did not have the same technical results in terms of benefits.

So, were there predecessors of blockchain? The answer is yes. Here were some:

DigiCash — founded in 1989 by David Chaum, an American cryptographer. It was based on the mechanism named “Blind Signature”, an innovation that eventually led to the development of blockchain technology. The whitepaper describing it was written even earlier, in 1983.
HashCash — an email PoW system designed to figure out spam emails and DoS attacks. It was developed in 1997 by Adam Back but the documentation was released 5 years later.
B-Money — an early age distributed cash system proposed by Wei Dai in 1998, who also developed Crypto++. The smallest subunit of Ether is wei named after him.
E-Gold Ltd — digital gold currency founded in 1996 by Douglas Jackson and Barry Downey. They were using precious metals as the underlying currency as these are globally acceptable.
Bitgold — although not implemented, it was proposed by Nick Szabo in 1998. It is one of the best known decentralised virtual currency projects undertaken before blockchain. Bitgold and bitcoin are so similar that at one point, people thought Nick Szabo actually was the anonymous Satoshi Nakamoto.

From UIKit to SwiftUI

Jakub Fišer — Sat, 11 Dec 2021 10:46:14 +0000

Many SwiftUI tutorials exist on the internet these days. This is not going to be one of them! Instead, today I’d like to share with you my personal story of how someone with 5-year prior development experience in UIKit (an older UI framework for iOS) learned an entirely different concept for the first time – SwiftUI (a new UI framework for all Apple platforms).

Many hands make light work

I joined CN Group this year and was assigned to a project written in SwiftUI. It was both exciting and a little scary at the same time, as SwiftUI introduced an entirely different paradigm to iOS and all my prior UIKit knowledge was of no help. Thankfully, my new and more experienced colleagues were at hand since CN Group is an early adopter of SwiftUI.

Since its introduction in June 2019, they have developed several applications of various types in SwiftUI. For example, CN Group released an application for e-commerce, requiring pixel-perfect design and tons of animation. Then there is an IoT (Internet of Things) application building upon BLE (Bluetooth Low Energy) communication with an external smart device. And last but not least there is an AR (Augmented Reality) application for construction workers that leverages a LiDAR scanner.

Lessons learned

Since SwiftUI is entirely different from UIKit, I had to start from the very beginning. A SwiftUI Views Quick Start guide [1] was recommended to me as a great starting point - and indeed, it was. I discovered lots of useful information about basic UI controls, layout components, view sizing, view modifiers and much more. Another help was All SwiftUI property wrappers explained and compared [2] that is very handy as a great overview. Here’s an example of how to use the @EnvironmentObject property wrapper to pass values down the view hierarchy.

// Pass values down
let contentView = ParentView()
            .environmentObject(theme)
            .environmentObject(PartialSheetManager())
            .environmentObject(DialogManager())

// Get values in any view down in hierarchy
struct AnyChildView: View {
    @EnvironmentObject var theme: Theme
    @EnvironmentObject var partialSheet: PartialSheetManager

    …
}

When I then started to code with SwiftUI on my own, it seemed to be quite easy. With less code required, UI development was super-fast and very intuitive. There is also a live preview feature that, most of the time, eliminates the need to run the application in a simulator. As a result, implementation time is significantly reduced, and it feels almost like magic! For example, a shape in the following figure can be implemented with just 20 lines of code! Plus, it scales, and you can set any background or border you want.

struct ProgressBarWithEndBubble: Shape {
    let scaleCircle: CGFloat = 0.5
    let scalePath: CGFloat = 12/32
    let startAngleCircle: Double = 202
    let endAngleCircle: Double = 158
    let startAnglePath: Double = 90
    let endAnglePath: Double = 270

    func path(in rect: CGRect) -> Path {
        let circleRadius = rect.height * scaleCircle
        let pathRadius = circleRadius * scalePath
        return Path { path in
            path.move(to: .init(x: pathRadius, y: rect.midY - pathRadius))
            path.addArc(center: .init(x: rect.maxX - circleRadius, y: rect.midY),
                        radius: circleRadius,
                        startAngle: .init(degrees: startAngleCircle),
                        endAngle: .init(degrees: endAngleCircle),
                        clockwise: false)
            path.addArc(center: .init(x: rect.minX + pathRadius, y: rect.midY),
                        radius: pathRadius,
                        startAngle: .init(degrees: startAnglePath),
                        endAngle: .init(degrees: endAnglePath),
                        clockwise: false)
        }
    }
}

Coming from an UIKit background, the most difficult part for me was getting used to the fact that I was no longer in control of the view hierarchy. As SwiftUI is a declarative framework, its main concept is that you define “what” should be displayed instead of “how” it should be implemented. As explained in Demystify SwiftUI [3], you still need to follow some rules in order to achieve the animations you desire. Your code is then transformed (and optimised) to the view hierarchy on your behalf. There is a downside - you will no longer get much benefit from the view hierarchy debugger.

I also struggled a bit with atomic design principles. Even though these are not directly involved in the SwiftUI framework, it helps to keep your code clean. Atomic design is a methodology that defines 5 levels of UI - atom, molecule, organism, template, screen - where each builds on lower-level components (e.g., molecules consist of atoms, etc.). In UIKit, every new UIView (the base class for viewable content) in a hierarchy could result in potential performance issue. This doesn’t apply for SwiftUI. On the contrary, you are encouraged to decompose your UI into smaller components with zero to little performance impact. This also results in improved code readability. Here is an example of such a component (two horizontally aligned buttons), that is both easy to reuse and to read:

struct AppLandingActionView: View {
    let onLogIn: Callback
    let onSignUp: Callback

    var body: some View {
        HStack(spacing: Theme.spaces.s4) {
            RoundedButton(“Log In”, .quaternary, action: onLogIn)
            RoundedButton(“Sign Up”, .primary, action: onSignUp)
        }
    }
}

Let’s be a little negative

To be honest, there is still some functionality missing from SwiftUI. This is particularly obvious if you know that something missing was available in UIKit. For example, in SwiftUI, List (equivalent to UITableView) is still quite limited, as there is no way to react to scroll events and, until recently, it was not even possible to customise separators (introduced with iOS 15 in September 2021). You also need to be cautious when it comes to GeometryReader as extensive use might result in performance issues. And even as basic a component as text inputs can give you hard times in some cases - there’s more about that in SwiftUI in production [4]. Luckily, SwiftUI and UIKit are interoperable with each other, so if you find something that really can’t be done in SwiftUI, you can always switch back to UIKit as your last option. The following figure contains such an example of using UITextField in SwiftUI, including reacting to SwiftUI environment values and using new property wrappers, which makes final usage really SwiftUI-like.

// SwiftUI wrapper for UIKit text field view
struct DynamicTextField: UIViewRepresentable {
    @Binding var text: String
    let placeholder: String
    let textField = InsetTextField()    // custom UITextField subclass

    private var textInsets: EdgeInsets = .init()
    private var isSecure: Bool
    private var onCommit: (() -> Void)? = nil

    init(text: Binding<String>, placeholder: String = "", isSecure: Bool = false) {
        self._text = text
        self.placeholder = placeholder
        self.isSecure = isSecure
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }

    func makeUIView(context: Context) -> InsetTextField {
        textField.placeholder = placeholder
        textField.autocapitalizationType = .none
        textField.delegate = context.coordinator
        return textField
    }

    func updateUIView(_ uiView: InsetTextField, context: Context) {
        uiView.text = text
        uiView.textInsets = textInsets.uiInsets
        uiView.isSecureTextEntry = isSecure
        if context.environment.disableAutocorrection == true {
            uiView.autocorrectionType = .yes
        }
    }

    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: DynamicTextField

        init(parent: DynamicTextField) {
            self.parent = parent
            super.init()
            parent.textField.addTarget(self, action: #selector(editingChanged(_:)), for: .editingChanged)
        }

        @objc func editingChanged(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }

        // MARK: - UITextFieldDelegate
        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
            parent.onCommit?()
            return true
        }
    }
}

Conclusion

To sum things up, SwiftUI can be used for any type of application, and I believe that it is much more efficient, readable, and fun, which is a win-win for both developers and businesses. Additionally, Apple’s effort to push SwiftUI forward indicates that it may become the main UI framework in the near future. With 5 months of intense experience, I personally don’t see any reason for developers to hold back.

References

Farmer, a better way to manage Azure resources

Jiří Landsman — Sat, 27 Nov 2021 17:34:34 +0000

The usual way to manage Azure resources is to open the Azure portal and click everything. Do you want a new App Service? Click and it’s there. Need a place to store uploaded images? Click ‘add new Storage Account’ and there you go. You can start uploading images to new blob. And what if you need a new SQL Server DB for your data? Just click the button, wait five to ten minutes and you are all set up J. You have your new dev environment for your awesome project. Everything is great right?

And then do the same for testing, QA, and production. And did you hear about the possibility of having a short-lived environment for each development branch? Suddenly, even this simple 3 service setup doesn’t look so cool. This is where Infrastructure as Code comes to save us. And I would like to show you one little project I particularly like – Farmer.

But first things first.
To understand what Farmer is, first you need to have a basic understanding of the nature of Azure Resource Manager.

Similar to AWS’s CloudFormation, Azure has its own Infrastructure as Code (IaC) framework named Azure Resource Manager (ARM).

ARM templates use JSON to define Azure resources in a declarative way. Within a template, you can use special template expressions that extend the capabilities of JSON. These expressions use the Resource Manager’s functions such as parameters, variables, or even user-defined functions. The deployment process then converts the template to a series of REST API calls to create final resources.

You can do everything with it on Azure, but it also has a few disadvantages.

It’s incredibly verbose. The example above is maybe as simple as possible, and it still takes over ten lines of code to define. When you start combining multiple resources, setting parameters, and so on, it rapidly gets enormous.

Another strong argument against useing ARM directly is that it is not statically checked, compiled, and contains many magic strings you need to use, like values of “type” and “location” properties in an example.

For that reason, I think it’s better to look for some solution that uses your programming language of choice. For me, that language is F#, and thankfully there is one library that is just perfect for the job.

How to makes repeatable Azure deployments easy.
Created by Compositional IT, Farmer utilises the power of F# and its computation expressions to define your Azure resources and generate ARM templates.

A template defined using Farmer is just normal F# code and can be run as an application or inside a F# script. That means that you can create complex structure of functions to generate your desired infrastructure. Names of the services, and as a matter of fact every service parameter, can be injected as parameters from a configuration. Thanks to this it is easy to create a copy of the infrastructure for the QA/production environments.

This is the same example as before but created using Farmer. Much simpler, isn’t it?

F# is a succinct language, so even the most complex infrastructure definition will most likely fit in a single file. This can be a big benefit when you are onboarding new team members, since they will be able to understand it quickly. Even our customers can read this kind of code and we can discuss the changes using a single document.

Because everything is just a F# code every value is strongly typed. The only string in the example is the name of the service. The result of such an expression is an instance of an object and when you want to define relationships and dependencies between the resources it is as easy as assigning a value to a field.

Ok you got me, but I have an existing environment. Is it a problem to integrate Farmer?
No, not at all. Just do it J. If you already have some infrastructure defined some other way there is no need to throw it all away and start over with Farmer.

In the end the result of a Farmer program is an ARM template file so you can just integrate that into you existing pipeline. And if you don’t have a pipeline at all you can create one. It’s a better way to do things anyway J

But there must be some buts, right?
Nothing is just rainbows and butterflies. Even a project as awesome as Farmer has some.

For me the main one is that it does not support all the services in Azure. But they are trying. Did I mention that the whole project is open source? So, if you are missing some service support or just some configuration value, nothing is stopping you from creating a pull request. They are fast with feedback. If pull requests are not your cup of tea, Compositional IT even provide commercial support.

The second issue is that Farmer does not support ARM parameters and variables. They have their own reasoning about that. But because the whole ARM template is just a F# program anyway it is easy to work around that and have such logic implemented outside of an ARM template.

To conclude all of this…
Even if there are much larger alternatives such as Pulumi or Terraform, there is still place for project like Farmer. It doesn’t have all the bells and whistles of its competitors. It does not support multiple cloud providers or programming languages. It’s simple, and straightforward. It does one thing and does it great. If you are just starting to experiment with Infrastructure as Code frameworks, I think Farmer is a great first step. If you are an experienced developer in this field, it is a good tool to have in your toolbelt.

Asynchronous Streams in C#

Josef Matějka — Sat, 31 Jul 2021 08:16:55 +0000

C# Asynchronous streams

I think everyone will agree that collections and data enumeration is usually bread and butter of C# programming. As a programmers we have at our disposal great tools for synchronous enumeration, we have IEnumerable and its generic variant, which can be combined with foreach expression and/or with LINQ. But until C# 8.0 the options for asynchronous enumeration were limited. Iterators were strictly synchronous, thus programmers had to come up with their own solutions - the usual aproach was to create a method returning type Task<IEnumerable<T>>. A task that will asynchronously get a part of the collection and then synchronously enumerate it, when the task succesfully finished. In this article we will explore IAsyncEnumerable<T> which provides an fast and elegant solution to asynchronous enumeration.

Motivation

As I said in some cases it is necesarry to load data asynchronously because

they are behind a blocking call (files, data send through the network),
or we have to wait before data are generated (like in case of Channel<T>), and we don't want to block a thread by waiting for the result. Obtaining part of data asynchronously and then enumerating the result works good from the perfomance perspective, but syntactically it can be a bit awkward and over-complicated considering how elegant does the enumeration look in case of synchronous code.

IAsyncEnumerable and IAsycnEnumerator

I assume the reader is already familiar with IEnumerable<T> and IEnumerator<T>, the asynchronous variant closesly mirrors the synchronous version, but there are few differences.

GetAsyncEnumerator (counterpart of GetEnumerator) accepts a CancellationToken,
MoveNextAsync (counterpart of MoveNext) returns ValueTask<T> instead of T,
and disposing is done via DisposeAsync instead of Dispose.
Reset method is missing (but for synchronous part it is usually not implemented).

As in the case of IEnumerable<T> and IEnumerator<T> programmers usually does not have to implement explicitly, but they can use iterators which will generate it. Since C# 8.0 can also generate IAsyncEnumerable<T> and IAsyncEnumerator<T> via asynchronous iterators and C# provides direct support which allows you to use asynchronous stream in similar way as their synchronous counterpart. Which is why they should feel familiar, therefore it should not be problem to embrace them.

Creating asynchronous iterator block

Rules for the creating a asynchronous iterator with yield return or yield break are again analogous to the synchronous version. Your function must be of a return type IAsyncEnumerable<T> or IAsyncEnumerator<T> it also must be async function. That means no parameter can be ref or out and it should contain an await expression. For example, consider this function:

private static async IAsyncEnumerable<int> FibonacciAsync([EnumeratorCancellation] CancellationToken token = default)
{
    var f0 = 0;
    var f1 = 1;
    yield return f0;
    yield return f1;
    while (true)
    {
        var fn = f0 + f1;
        if (fn < 1)
        {
            yield break;
        }
        yield return fn;
        await Task.Delay(TimeSpan.FromSeconds(1), token).ConfigureAwait(false);
        f0 = f1;
        f1 = fn;
    }
}

This function returns a Fibonacci sequence of all numbers that fit into an int, overflow is check by this condition if (fn < 1), we use Task.Delay for simulation of asynchronous execution, in reality the asynchronous part would be for example an database fetch or any other similar blocking operation.

Since we are talking about asynchronous execution, we have to ponder a bit about cancellation of execution. If we look at GetAsyncEnumerator it accepts an optional CancellationToken. But in our case the IAsyncEnumerable<T> is generated by compiler, how can we work with a token passed to GetAsyncEnumerator? If you put attribute EnumeratorCancellation in front of an CancellationToken argument and compiler knows that for the enumerator cancellation serves said argument.

Enumerating throught asynchronous stream

Let's continue by enumeration of first 5 Fibonacci's numbers. Seasoned C# programmer would immediatelly use Take from System.Linq. Sadly for asynchronous enumerable it is necessary to download nuget package System.Linq.Async first. It contains overloads of classic extension methods for IAsyncEnumerable<T>. We expect that in future version of C# you will not have to download this nuget package, the methods will be automatically incorporated in base framework and no additional packages will be requiered.

public static async Task Main()
{
    var source = new CancellationTokenSource();
    await foreach (var number in FibonacciAsync().Take(5).WithCancellation(source.Token).ConfigureAwait(false))
    {
        Console.WriteLine(number);
    }
}

As you can see, C# supports asynchronous version of foreach with await word in front of it, the difference is that the underneath MoveNextAsync calls are awaited and after finishing the enumerator is disposed asynchronously. If you need to pass a CancellationToken you can do that via extension method WithCancellation, which distributes the token to each internal MoveNextAsync call. This token we get in our FibonacciAsync, because we decorated our token argument with EnumeratorCancellation attribute.

Performance concerns

Like in syncrhonous case, using an async iterator means, that a state machine is generated. It is represented by a hidden class implementing these interfaces: IAsyncEnumerable<T>, IAsyncEnumerator<T>, IAsyncStateMachine, IValueTaskSource<bool>, and IValueTaskSource. The reason why one class implements both IAsyncEnumerable<T> and IAsyncEnumerator<T> is to avoid unnecessary allocations. If you have a class implementing IAsyncEnumerable<T> and another one implementing IAsyncEnumerator<T> you need to create a new instance of enumerator each enumeration. That can be avoided if one class implement both interfaces. If no one is using the object, it can be reused as an enumerator (the same principle also goes for synchronous iterators).

The main trick to keep the allocation low is to use ValueTask<T> over a Task and implementing IValueTaskSource<bool> and IValueTaskSource. As the name suggest, the ValueTask<T> has value semantics (whereas classic Task<T> is a reference type). This is important in cases when the MoveNextAsync call runs synchronously, because in that case the ValueTask<T> can be put on the stack and we can avoid heap allocation and garbage collection of this task - which hleps performance-wise. So it is expected to use async enumeration with some kind of buffering, when in asynchronous call some data are loaded and then they're returned synchronously. If you are interested in the ValueTask<T> more, I recommend reading this blog post: Understanding the Whys, Whats, and Whens of ValueTask, which explains this type and its usage in depth.

Last interface IAsyncStateMachine is only intended for compiler, the runtime and internal APIs uses this interface to perform awaits.

The number of unecessary allocations is low, the microsoft itself states this: "The compiler implementation has been designed to keep allocations incredibly low; in fact, no matter how many times an async iterator yields, the most common case is that it incurs at most two allocations of overhead."

Thread safety warning

This may be surprising to some, but in general MoveNextAsync is not thread-safe. On a given enumerator each call to MoveNextAsync must happen after the last MoveNextAsync has finished, therefore you cannot invoke enumeration concurrently. It is not a problem for a MoveNextAsync to be called from a different thread, but you must not call this function from multiple threads at the same time. The main problem is, that anything can happen. It can seem to be running correctly in some cases, in some cases an exception could be emitted. So if you want to save yourself some debugging time, stay away from enumerating IAsyncEnumerable<T> concurrently.

Conclusion

Newly added asynchronous iterators provide a great tool for dealing with reading data collections asynchronously, this can be useful when loading data from database, files, internet or it can be usefull for in-memory collections too, like in case of Channel data structure. Plus side is, there's very small performance overhead and they closely mirror their synchronous counterpart, which makes them easier to use, because most programmers have already dealt with enumerables.