DEV Community: ekr990011

Web Components: Fulfilling React’s Promise

ekr990011 — Tue, 13 Sep 2022 17:58:02 +0000

React has become one of the top frameworks (I mean libraries) based on the following promises. React is fast, it allows developers to create reusable components, it is not opinionated, and it is fun and easy according to its creators.

See the videos Rethinking Best Practices
https://www.youtube.com/watch?v=x7cQ3mrcKaY&ab_channel=JSConf and
https://www.youtube.com/watch?v=DgVS-zXgMTk. This sounds great, sign me up.

The reality is that React failed to live up to any of these promises. The virtual DOM takes a lot of memory and the diffing process requires 2 virtual DOMs which is a huge memory hog. It also is slow to load and if you open multiple instances of the same website, which many people commonly do, you have to download the whole React app for each tab.

Numerous studies have shown that web pages built in web components significantly out perform the same page built using React. Part of the reason this is the case is that web components do not use a virtual DOM. They interact with the DOM directly and they are built into the W3C specification so they work natively with browsers. Web components are fast, unlike React.

React promises that it has reusable components. This sounds great, but the reality is that React components can only be reused in other React applications. Not only that, but even reusing React components requires a lot of rewiring. At the least you have to reset up the passing of props and functions for the new app.

Web components are reusable just like any other web component, such as the

tag or a or. So web components can be used in React apps, Angular, Vue, Rails, or in an app that is not using any framework.

React has consistently claimed that it is not opinionated. But anyone who has tried to build anything real with React knows this is a blatant lie. The only sense in which this statement is true, is that you can probably use any backend database technology with React. However, React completely takes over every thing else. Examples of this can be found in numerous questions on Stackoverflow. The answer is almost always to rewrite a solution from another technology.

Web components can be used with any backend or frontend technology including React.

The last big claim is that React is fun and easy. This is complete marketing hype. React has its own DSL (Domain Specific Language), it is wordy (not DRY), and is not intuitive. React is like a child who only a mother could love. I cannot say you will find Web Components as fun and easy, but it works the same way browsers work. So it is the opposite of a DSL and very useful to learn.

React failed to live up to any of its initial promises, however Web Components do.

Exporting CSV File (spreadsheet) with JavaScript

ekr990011 — Mon, 12 Sep 2022 16:35:54 +0000

I was working on a project where I needed to export a CSV (Comma Separated Values) file using JavaScript. I was feeling lazy and I thought I could find a nice Node package that would do most of the work for me. All the Node packages I found seemed very powerful, with lots of options, however it also appeared that they would be hard to figure out.

The problem with using a Node package or say a gem in ruby that is very powerful is that if they do not do exactly what you want, then you can spend hours if not days trying to figure out how to make them work for you. As a result, I made up my mind that it would be easier to just write the code myself.

I had data that looked like this on my web app:

(No these are not my Bitcoin address – lol, this from a list of the richest Bitcoin address)

And I wanted it to put out something that looked like this, when open by a spreadsheet:

(Screenshots from my app CryptoChecker – https://www.1337ipjbp7u9mi9cdlngl3g5napum7twzm.com)

In my case, I had the data I wanted to put out to a CSV file in an Array of Objects. Because the app is javascript, if the user closes the app all the data is lost. The public addresses are quite long and can be a pain to put into the app, so the user may want to store this information.

I had written similar code in React, Jquery and had done some CSV work in Ruby. So I put my nose to the grindstone and dug into writing the code. I quickly realized that the file management tool was going to be the key issue. In Ruby there are some excellent file management tools, however this is less true in Java Script.

Despite this I found a nice Node module, FileSaver.js (click here for FileSaver npm page), that would save the output file as a CSV and allows the user to name their file easily. After installing the FileSaver node module and importing it, the key line of code is:

var blob = new Blob([csv], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "yourcsv.csv");

A Blob is just a chunk of data and the name comes from SQL databases and means “Binary Large Object”. As you can see you can name the file (yourcsv.csv) and determine the file type. Once I got this working, then I just need to get my Array of Objects into the right format.

I rewrote my actual code to make this post more clear for the reader. I start with a simple Array of Objects:

const arrayOfObjects = [{column1: "1", column2: "2", column3: "3"},{column1: 4, column2: 5, column3: 6}]

From here the code is fairly straight forward to convert the arrayOfObjects to a csv:

arrayOfObjects.map((row) => {
csv += `\r\n ${row.column1}, ${row.column2}, ${row.column3}`
})

Note the \r\n is a carriage return + line feed. This starts a new row. If you console log the csv, you get (if you add the keys as the headers).

column1, column2, column3, 
1, 2, 3
4, 5, 6

`
This is exactly what I wanted.

FileSaver.js worked perfectly and downloaded the file yourcsv.csv.

Here is the github gist (https://gist.github.com/1337ipJbP7U9mi9cdLngL3g5Napum7tWzM/fd9b8aafbba79dc76971e892c2c82ec0) of the code.

In order to provide you the code in a format you could easily play with, I had the bright idea to just put this example code in some script tags inside a web page and then to run it locally in Chrome browser (note ctr O allows you to open a local file). Unfortunately, this made it hard to work with the FileSaver.js Node module. You cannot use “Import” inside of script tags.

As a result, I had to go to the github page for FileSaver.js (https://github.com/eligrey/FileSaver.js), copy the “FileSaver.js” file in the “dist” folder and paste it into a new file in the same directory as my code. The FileSaver.js is then imported using a “script src=” tag on line 6, as seen below

<script src="./filesaver.js"></script>

You will need to do this also if you want to play with the code.

There may be a better way to put out a CSV file, however it is good enough for an Indie Hacker. If you know a better way, let me know in the comments.

Importing a CSV (spreadsheet) File with JavaScript

ekr990011 — Sat, 10 Sep 2022 16:36:14 +0000

This is a simple example of how to import a CSV (spreadsheet) file and place it into an array of arrays or an array of objects with JavaScript using the FileReader object. The complete code can be found at https://gist.github.com/1337ipJbP7U9mi9cdLngL3g5Napum7tWzM/00dda4ccc5eee8da2a0200fc9708abe7. I put the code in a script tag within an HTML page, so that you can run the code in browser. If you are using Chrome, cntl-O will allow you to open the file with the code. Use the inspect tool to see the console logs.

I had a project where I needed to import a CSV (Comma, Separated, Files) and place the data into an array of objects. There a number of Node packages that work with CSV files, but they all seemed too complicated for my needs. ‘

I had data that looked like:

and I wanted it in format like this

[{column1: “1”, column2: “2”, column3: “3”}, 
    {column1: “4”, column2: “5”, column3: “6”}]

The key issue was how to import the CSV file. This is where the FileReader object in JavaScript comes in. According to Webopedia FileReader is:

“JavaScript FileReader is an object that reads data from BLOBs and files on the client side. Using JavaScript FileReader lets users read files from their own computer system using a web browser (that is, the client) instead of using the server. Software developers use JavaScript FileReader to reduce the processing burden on servers. This helps prevent websites or applications from running slowly.”
.
.
.
“Another use case for Javascript FileReader is to parse data from a plain text file, like a comma-separated values (CSV) file. This is useful for preparing to upload large amounts of data to a database.”

https://www.webopedia.com/TERM/J/javascript-filereader.html

Before I explain how I used FileReader, let me show you the overall structure of the code

As you can see the code contains four functions. The first function is openFile, which uses the FileReader object and imports the CSV as a text file. The next function is processData, which converts the CSV into an array or arrays. The arrayToObjects function converts the array of arrays to an array of Objects. The tableCreate function creates a simple HTML table with the CSV data.

The first step was to create a button that allows the user to select a CSV file on their computer. The code that does this is:

This is a pretty standard HTML input button that looks like this on the screen:

When clicked this button opens a window that allows the user to select a file.

Note that when the button is clicked the ‘openFile’ function is called. The code for this function is:

var openFile = function(event) {
      var reader = new FileReader();
      reader.onload = (event) => {
        this.processData(event.target.result)
      }
        reader.onerror = this.errorHandler;
        // Read file into memory as UTF-8
        // console.log(reader.onload)
        reader.readAsText(event.target.files[0]);
    };

An instance of the FileReader object is created and set equal to the variable “reader”. Then “reader.onlooad” creates an event handler that calls “processData” function.

The code for the processData function that converts the CSV data to an arrays is:

  var processData = function(csv) {
        var allTextLines = csv.split(/\r\n|\n/);
        var lines = [];
        while (allTextLines.length) {
            lines.push(allTextLines.shift().split(','));
        }
        console.log(lines);
        this.arraysToObjects(lines);
        this.tableCreate(lines);
      }

This function first processes the csv by splitting it with a regex expression that matches the line breaks. Then each line is put into the array “lines”. I know the code works but I am not exactly clear how the shift and split function do this. Next the arraysToObjects and the tableCreate functions are called.

In my project I had a specific reason why I needed the data in an array of objects, which is what the arraysToObjects function does.

var arraysToObjects = function(lines) {
        obj = {};
        var i
        var j
        outputArray = []
        for (j=1; j < lines.length; j ++) {
          obj = {};
          for (i = 0; i < lines[0].length; i++) {
            obj[lines[0][i]] = lines[j][i];
          }
        outputArray.push(obj)
        }
      console.log(outputArray)
    };

The key issue here is that the first line of the array is the table headers (Column1, Column2, Column3) and I need to make these the keys for my objects. The line that does this is:

obj[lines[0][i]] = lines[j][i];

So the object key is the left side and the value is the right side.

The key value pairs for each element in one array are put into an object (obj), then this object is pushed onto the outputArray. The outputArray is console logged so you can see the array of objects.

I also decided to create an HTML table of the csv data. The code that does this is:

  function tableCreate(lines) {
    //body reference
    var body = document.getElementsByTagName("body")[0];

    // create elements <table> and a <tbody>
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // cells creation
    // Object.keys(outputArray[0]).length
    for (var rows = 0; rows < lines.length; rows++) {
      // table row creation
      var row = document.createElement("tr");

      for (var col = 0; col < lines[0].length; col++) {
        // create element <td> and text node
        //Make text node the contents of <td> element
        // put <td> at end of the table row
        var cell = document.createElement("td");

        var cellText = document.createTextNode(lines[rows][col]);

        cell.appendChild(cellText);
        row.appendChild(cell);
      }

      //row added to end of table body
      tblBody.appendChild(row);
    }

    // append the <tbody> inside the <table>
    tbl.appendChild(tblBody);
    // put <table> in the <body>
    body.appendChild(tbl);
    // tbl border attribute to
    tbl.setAttribute("border", "2");
  }

Since putting out a table of the data was not the point of this post, I will not explain this code.

I know there are a number of potential issues with this code, but as an indie hacker it did the job I needed. It may not be exactly what you need, but it gives you an idea of how to start if you need to import a csv file.

Web3 vs Web 3.0

ekr990011 — Fri, 09 Sep 2022 17:22:52 +0000

Jack Dorsey and Elon Musk are critical of Web3. Their complaint is that Web3 promises to give users control over their own data, but is failing to do so. They suggest that the reality of Web3 is that it is owned by VC’s and their limited partners.

However there seems to be some confusion between Web3 and Web 3.0. Web3 is a term created by Polkadot founder Gavin Wood, while Web 3.0 or the semantic web was coined by Tim Berners-Lee, who is one of the inventors of the world wide web.

The Web3 foundation was created to promote the ideas of Web3, but even they confuse the terms Web3 and Web 3.0 using both on their website. It might be helpful to understand what Web 1.0 and Web 2.0 are to better understand what Web3 is. Web 1.0 is known as the read-only web that contained read-only websites connected by hyperlinks. Web 2.0 is known as the read-write web and includes all the well known social media sites, such as facebook and twitter.

The major tenents of Web3 and Web 3.0 are listed below:

Four key features of Web 3.0:

Ubiquity
Semantic Web
Artificial Intelligence
3D Graphics

Berners-Lee described the goal as:

“I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A "Semantic Web", which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The "intelligent agents" people have touted for ages will finally materialize.”

Web3 Beliefs

Users own their own data, not corporations
Global digital transactions are secure
Online exchanges of information and value are decentralized

The Foundation describes Web3 goals as:

“Our mission is to nurture cutting-edge applications for decentralized web software protocols.
Our passion is delivering Web 3.0, a decentralized and fair internet where users control their own data, identity and destiny.”

As you can see Web3 is completely different than Web 3.0. Web 3.0 sounds like dystopian nightmare that the NSA and the CCP would love and are actively working towards. I am not saying that was Berners-Lee’s goal. Web3 is trying to do the exact opposite and giving back control of the web to users, which is a goal I can support.