DEV Community: Chiamaka Ikeanyi

How to Generate Contents of a New CSV Column Using JavaScript

Chiamaka Ikeanyi — Thu, 21 Mar 2019 00:09:15 +0000

I had the need to populate data in a database table after a migration to update the production database schema. I thought of different means to achieve this. Manually populating the rows with data was not an option because the database contains thousands of records.

I considered two approaches:

Using a regex
Writing code to achieve it

After a while, I settled for the second approach because of access restrictions on running the regex.

Here is how I achieved it:

I exported the data,
Wrote the JavaScript code to generate the content of the new column
Created a temporary table and imported the newly generated CSV data
Imported the data to the actual table using an inner join

A sample data

"id", "label"
1,"Name"
2,"Age"
3,"Gender"
4,"Date of birth"

I assigned the data to a variable

var data = `"id", "label"
1, "Name"
2,"Age"
3,"Gender"
4,"Date of birth"`

Initially, I achieved the result using a nested for loop. Considering performance, I eventually refactored the code to use only one for loop

The JavaScript code to generate the content of the new column

const dataAsArray = data.split('\n');

for(let datum of dataAsArray) {
  let currentRow = datum.split(',');
  let newColumn = currentRow[1].trim().toLowerCase().split(' ').join('_');
  currentRow += `,${newColumn}`;

  console.log(currentRow);   
}

The code above generated the data I needed. Which is, the content of the second column without spaces and separated by an underscore. I saved the result in a CSV file.

Then, I created a temporary table with the columns "id","label","code" and loaded the data using the command

LOAD DATA LOCAL INFILE '/Users/Chiamaka/Desktop/query_result.csv'
INTO TABLE `testtable` 
CHARACTER SET 'utf8' FIELDS ESCAPED BY '\\' TERMINATED BY ',' ENCLOSED BY '"' LINES 
TERMINATED BY '\n'
IGNORE 1 LINES

To update the actual table with the newly generated data using backticks to ensure that reserved names are accepted as strings.

UPDATE testtable tt
inner join actualtable actb on (tt.id = actb.id)
set actb.code = tt.`code`
where tt.id = actb.id;

This yielded the desired result

"id","label","code"
1,"Name","name"
2,"Age","age"
3,"Gender","gender"
4,"Date of birth","date_of_birth"

Nevertheless, Chiamaka Ikeanyi Coded

Chiamaka Ikeanyi — Thu, 07 Mar 2019 11:23:48 +0000

I continued to code in 2019 because...

Despite starting my career as the only lady in tech at the organization I started with, I didn't let it discourage me. Retrospectively, I am no longer where I use to be. The diff is clear and it will always get better. Software engineering is my choice career.

I deserve credit for...

Having encouraged some women who read my articles and those I taught during Andela Learning Community 2.0 programme to desire to grow to help others too.

I hope to join my tech community...

In making a global impact and also craft usable solutions to human problems.

VS Code Setup to Improve Productivity

Chiamaka Ikeanyi — Thu, 14 Feb 2019 07:14:27 +0000

Code editors have evolved over the years. A few years ago, there was no Visual Studio Code (VS Code). You were probably using Sublime, Atom, Bracket, etc. But with the release of VS Code, it has become the favourite editor of most software developers.

Why VS Code?

Customizable
Easy Debugging
Emmet
Extensions
Git Integration
Integrated terminal
Intellisense
Lightweight
Theming and more...

Having seen the advantages of using VS Code and awesome things you can do with it, this article will cover VS Code setup and extensions needed when using VS Code from the lens of productivity.

Emmet

Used in many popular text editors, this greatly improves HTML & CSS workflow.
To access this, press CMD + SHIFT + P. Then, search for emmet. This shows a list of actions that can be performed using emmet.

For instance, to display five divs with the class name item, all you need is

  .item{$}*5

Then, press the Enter key. The result is

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

Font

FiraCode looks cool as a result of the support for ligatures. It makes your code readable at a glance. Download and install FiraCode, then add it to your settings.json file.

Configuration

You can configure VS Code within the settings.json file to match your preferences.

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "bounded",
    "editor.trimAutoWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],
    "javascript.validate.enable": true,
    "git.enableSmartCommit": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "gitlens.historyExplorer.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
}

Launching from the command line

Press CMD + SHIFT + P, type shell command and select Install code command in path.
Afterwards, navigate to any project from the terminal and type code . from the directory to launch the project using VS Code.

Multiple Cursors

You can modify multiple lines of code at the same time. You need to set your preferred access KEY within your settings.json file.

    "editor.multiCursorModifier": "ctrlCmd",

    or

    "editor.multiCursorModifier": "alt",

Terminal

You can set up your terminal to use iTerm2 and ZSh and have your VS Code terminal setup to use that.

Extensions

Below are useful extensions that can improve developer experience when working on a codebase.

To access these extensions,

Go to View > Extensions
Search for extensions in the marketplace
Click on Install

Add jsdoc comments

This adds comments block to the code. To use it, highlight the first line of the function, press CMD + SHIFT + P and select Add Doc Comments

Auto Import

With this extension, you don't need to manually import files. If you are working on a component-based project, just go ahead and type the component name and it will be automatically imported.

Auto Rename tag

Automatically renames paired elements

CSS Peek

As the name implies, this helps you peek on rules applied by a defined style within a codebase and it's specificity. It comes in handy when working on legacy codes.

Debugger for Chrome

This lets you debug your JavaScript code right from the Google Chrome browser

Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace

ESDoc MDN

In certain scenarios, we tend to forget how a particular thing works. This is where this extension becomes useful. You don't need to launch your web browser to find out the syntax. All you need is to type

//mdn [object].[method];

ESLint

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.
To install ESLint locally, run npm install eslint or globally using
npm install -g eslint.
You would also need to create .eslintrc configuration file.

If you installed ESLint locally, run
./node_modules/.bin/eslint --init
or eslint --init
for global installation.

GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts on the browser. To access a list of fonts, press CMD + SHIFT + P and search for Google fonts to proceed.

HTMLHint

This extension validates your HTML helping you to write standards-compliant code

Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

Live Server

This launches a local development server with live reload feature.

Peacock

This extension gives you the ability to change the workspace color of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings,
select workspace settings tab, click on {} and paste the code below.

    {
        "workbench.colorCustomizations": {
            "activityBar.background": "#e90b8d",
            "activityBar.foreground": "#fff",
            "activityBar.inactiveForeground": "#b5b5b5",
        },
        "peacock.affectedElements": [
            "activityBar",
        ]
    }

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

Prettier

Formats your code and make it readable

Polacode

As a technical writer, this comes in handy. It gives you an appealing screenshot of your code snippet.

Step 1: Press CMD + SHIFT + P
Step 2: Select Polacode 📸
Step 3: Copy some code
Step 4: Paste into Polacode view
Step 5: Click the lens-like button below the code view to save

TODO Highlight

With a lot to work on which needs to be prioritized, sometimes, you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

Feel free to drop what works for you on the comment section and share this article.