Export HTML table to CSV file

/in , /by

html-table-to-csv

Imagine you have an HTML table, for example something like this:

<table>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>

And you want to download it as a CSV table format.

First of all, you need to transform from HTML to CSV.

	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);

After that, you can download it using Blob and a link.

    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Launch
    downloadLink.click();

Here a real example:

Short selectors like jQuery

/in /by

Using JavaScript is some kind of annoying when you have to select DOM elements, in those cases we could miss jQuery because JavaScript is simply too long.

// Select one element
document.querySelector("#peter");
document.querySelector(".staff"); // get the first one
document.querySelector(".staff").querySelector("#age");
// Select all elements
document.querySelectorAll(".staff") // get an array

We don’t like to repeat things when we are coding, if you define the next code at the beginning of your JavaScript you will be avaliable to do it similar even better than jQuery.

function $(selector) {
    return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}

Element.prototype.$ = function(selector) {
    return this.querySelector(selector);
};

Element.prototype.$$ = function(selector) {
    return this.querySelectorAll(selector);
};

Now you can write our example shorter.

// Select one element
$("#peter");
$(".staff"); // get the first one
$(".staff").$("#age");
// Select all elements
$$(".staff") // get an array

It’s easy to keep in mind because $ behaves like jQuery with CSS selectors and $$ does the same but it allows you to select multiple elements. The first one return the element and the second one an array of elements.

Just one more thing, you cannot use jQuery with this code because jQuery use $ too, if you need it you have to change the $ in our code for another thing, ie: qS.

Looking for a string inside another string

/in /by

If you want to find a string inside another string, there are many options available, each one will depend on the result and performance you are looking for.

  • Use test if you want just to know if the string exists (true) or not (false).
  • Use exec if you want to get the string you are looking for, if the string doesn’t exist you will get nothing (null).
  • Use match if you want to get all the strings that match your string, it works like exec, if you want to get your array of string use g (global) in your regular expression.
  • Use search if you want to get the position of the string you are looking for, if the string doesn’t exist you will get -1.
  • Use indexOf if you want to get the position of the string you are looking for, it works like search but you cannot use regular expressions. indexOf is always sensitive.

Note: All methods can use regular expressions except indexOf.

Here a real example:

Learn regular expressions on: RegexOne and RegExr.

 

 

How to make a mobile app?

/in , , , /by

cordova-logo

In this tutorial I’m going to explain you step by step how I make phone apps using Cordova (Phonegap/Ionic) and Ubuntu.

1) Install Cordova

For those who don’t know anything about Cordova, it is an opensource platform for building multiple platforms applications using HTML, CSS and JavaScript. The main different between Cordova and Phonegap is that the second one gets the Cordova code and redistributes with some Adobe rights, now it’s free but maybe tomorrow who knows, my recommendation is to use Cordova that apart of this is always more updated!

So, first step you have to install Cordova, open a shell in Ubuntu and type:

$ sudo npm install -g cordova

Any problems? See the Cordova documentation.

2) Install Platform

After that you need to install a platform, in this example we are going to develop an Android app so you have to install the Android SDK.

I recommend you to install Android Studio that brings you the SDK and many extra tools in an user friendly access. Get Android Studio.

Once you download it and unzipped it, you have to run it the first time to install everything. If you set android-studio in your home folder, it will create an Android folder with the SDK.

3) Add Android SDK to your “PATH”

Make Android SDK accessible in your environment (system)

Open a shell and type:

$ nano ~/.bashrc

Then you need to add to your “PATH” variable where your SDK and Gradle are.

export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=${PATH}:~/Android/Sdk/tools:~/Android/Sdk/platform-tools:~/android-studio/gradle/gradle-5.1.1/bin

After that, reload bashrc, if not it will not have any effect.

$ source ~/.bashrc

Note: you need to set your own path and names for the Android SDK, I used my “home” folder and default Android Studio’s folders.

4) Install Text Editor / IDE

Use the one you feel more confortable, my favorites are: Atom and VSCodium.

5) Create your App

$ cordova create myApp
$ cd myApp
$ cordova platform add android
$ cordova run --debug --device

Now you can start programming! HTML, CSS and JavaScript files are in the “www” folder.

Remember you need to activate developer options in your Android phone.

If you have any access problem (EACCES)  to your android-studio folder.

$ chmod 777 -R ~/android-studio/

Enjoy 🙂

Here if you want you can download my Cordova logo and use it for free: Cordova logo

Academyth idea infographic

/in /by

Academyth-by-gengns

Infographic and idea created from scratch using Inkscape for Interfaces Hombre Máquina Avanzados.