DEV Community: Nisa Champagne

qrcode.react usage

Nisa Champagne — Tue, 26 Apr 2022 18:29:48 +0000

“Talk is cheap. Show me the code.”
– Linus Torvalds

Recently I have been dabbling back in React after being in Angular world for the past 2 years. Long story short is I wanted a QR code that when scanned will go to my LinkedIn page.

After looking around for a nice short and sweet approach to this ( because why invent the wheel.. obviously), I stumbled on qrcode.react. Super simple set up and usage.

Assuming you have a standard react setup already, i'll skip to the good part.

Open up the terminal and navigate to your react project and run

npm i qrcode.react

BAM all good and installed.

For this example, you'll add

import QRCode from 'qrcode.react';

to your app.js

then you'll add:

  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290} />
    </div>
  );

To actually use utilize the QR Code.

Your entire app.js file should look like this:

import React from "react";
import QRCode from "qrcode.react";

export default function App() {


  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290}  />
    </div>
  );
}

On the screen you should see the following:

AND look at that :) You can go a big deeper here if you want to with a download button to download a png/svg of your qr code or an input field to let the user set the link or value that the qr code would have. Probably a ton of other things you can do to make it even better!

Initial link that are helpful:
https://www.npmjs.com/package/qrcode.react

My codesandbox repo link:
https://codesandbox.io/s/qr-code-personal-8bdltl

Export your table data to a .csv file

Nisa Champagne — Fri, 08 Oct 2021 15:13:40 +0000

I love that my job has me learning a new thing ( or two :) ) every day. This time it was exporting table data to a .csv file that could therefore be used whichever way needed. Of course, there are many ways to go about this.

Lets set the project in view here:
-Angular 11
-Mock data being used in a table
-Task to return the table data as viewable and if desired, printable.

Now to figure out how to approach it.

As I was figuring out how I wanted to work on this, my mind was on simple and to the point as we just want to create the file client-side. I found https://www.npmjs.com/package/file-saver to which suits my needs. Now all that's left is to implement the exportCSV function.

In my typescript file, I added the following:

 exportFile(data: any) {
    const replacer = (key, value) => value === null ? '' : value;
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var blob = new Blob([csvArray], {type: 'text/csv' });
    saveAs(blob, "ClaimPayments.csv");
  }

to which all I would need now is to add a button in the corresponding html file:

<button (click)="exportFile(this.data)">Export as CSV</button>

where this.data is:

  data: Object[] = [
    { "Policy Number": "922874", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'Bob', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" }
  ];

https://quick-csv-file-from-data.stackblitz.io

Google Apps Script + Simple Form RSVP Setup

Nisa Champagne — Mon, 01 Feb 2021 12:18:00 +0000

What is Google Apps Script? (In reference to Google Sheets)

Apps Script includes special APIs to let you programmatically create, read, and edit Google Sheets. Apps Script can interact with Google Sheets in two broad ways: any script can create or modify a spreadsheet if the script's user has appropriate permissions for the spreadsheet, and a script can also be bound to a spreadsheet, which gives the script special abilities to alter the user interface or respond when the spreadsheet is opened.

Let's use this idea in creating a RSVP form that sends an email to you when someone RSVPs to your event.

To start, youll have to create your Google Sheet:

Name your spreadsheet something relevant to your project.
Youll create your column names that will be used in your form.
For example, for my RSVP form I will have a email, name, extras, and a invite code.

For your own sanity, I'd suggest adding a timestamp

Okay now that your spreadsheet is set up to your liking and you saved it, we will work in the script editor :)

To get to the script editor you'll navigate to Tools -> script editor. This is what you should see :)

Next is the fun part! ^_^ Getting it to work haha

Here is some example code to use within the script editor:

let To_Email = "PUTYOUREMAILHERE@yahoo.com"; // email to send the form data to

/**
 * This fn is the entry point.
 */
function postData(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger

    let emailData = e.parameters; // just create a slightly nicer variable name for the data

    if (emailData.invite_code != "123456") { // validate invite code before saving data
      Logger.log("Incorrect Invite Code");
      return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "message": "Sorry, your invite code (" + emailData.invite_code + ") is incorrect."}))
          .setMimeType(ContentService.MimeType.JSON);
    }

    record_data(e);

    MailApp.sendEmail({
      to: To_Email,
      subject: "A new guest RSVP'd for your wedding",
      replyTo: String(emailData.email), // This is optional and reliant on your form actually collecting a field named `email`
      htmlBody: formatMailBody(emailData)
    });

    return ContentService    // return json success results
          .createTextOutput(JSON.stringify({"result":"success","data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "message": "Sorry, there is an issue with the server."}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}


/**
 * This fn inserts the data received from the html form submission
 * into the sheet. e is the data received from the POST
 */
function recordData(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    let doc     = SpreadsheetApp.getActiveSpreadsheet();
    let sheet   = doc.getSheetByName('responses'); // select the responses sheet
    let headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    let nextRow = sheet.getLastRow()+1; // get next row
    let row     = [ new Date().toUTCString() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (let i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(error);
    Logger.log(e);
    throw error;
  }
  finally {
    return;
  }
}


/**
 * This method is just to prettify the email.
 */
function formatEmailBody(obj) { // function to spit out all the keys/values from the form in HTML
  let result = "";
  for (let key in obj) { // loop over the object passed to the function
    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";
    // for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value, 
    // and append it to the `result` string created at the start.
  }
  return result; // once the looping is done, `result` will be one long string to put in the email body
}

Obviously this can be modified to whatever your projects needs are.

GETTING YOUR SCRIPT UP AND RUNNING

Once youre satisfied with your script code, publish the changes by:
File -> manage version -> enter in what changed -> click save new version -> click ok to close
Click publish -> deploy as web app
Change your project version to the newest
-execute the app as [Me (youremailhere@yahoo.com)]
-make sure the who has access to your app is set to anyone, even anonymous
-COPY THE CURRENT WEB APP URL AS YOULL USE THAT IN YOUR FORM (will set it equal to action within your form)
Click update

BOOM you're up and running, ready to take on all the forms!

SETTING UP YOUR FORM

In this example, I'm following the column names I set up in my spreadsheet to dictate what fields I will need to collect via my form. I'm developing my form within an angular component. You will need to change up the form to follow your spreadsheet!

FORM CODE:

<form class="gform pure-form pure-form-stacked"
method="POST" 
data-email="example@email.net"
action="https://script.google.com/macros/s/AKfycbx1AQpIsZzuNX3VWwLCucruNuLytoTbFpWMZ4ndpfxfRztHMn8/exec"> 
<!-- change the form action to your script editor published url -->
<h2 class="content-head is-center">The Kirk Wedding</h2>
<aside>
<p>
We would <em>love</em> to have you at our wedding! </p>
<p>Please use the <b><em>RSVP form</em></b>
to let us know you'll be there.
</p>
</aside>
<div class="input-container">
<div class="col-md-6 col-sm-6">
<div class="form-input-group">
<i class="fa fa-envelope"></i>
<label>Email: </label>
<input type="email" name="email" class="" placeholder="Your email" required>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-input-group">
<i class="fa fa-user"></i>
<label>Full Name: </label>
<input name="name" class="" placeholder="Your name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-input-group">
<i class="fa fa-users"></i>
<label>Husband/Wife or kids: </label>
<input type="number" name="extras" class="" min="0" max="4" placeholder="" required>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-input-group">
<i class="fa fa-key"></i>
<label>Invite Code: </label>
<input type="number" name="invite_code" id="invite_code" class="" min="0" placeholder="Invite code" required>
</div>
</div>
<div class="form-input-group">
<button class="button-success pure-button button-xlarge">
<i class="fa fa-paper-plane"></i>&nbsp;Send</button>
</div>
</div>
</div>
</form>

NOW ideally you should be able to spin up your app once you have replaced everything with your spreadsheet specific needs. Remember you set up an invite_code in your script so make sure to use that invite_code within your form. Once all required fields are filled in, you should be able to successfully submit the form data. You will see the following:
{
"result": "success",
"data": "{\"extras\":[\"4\"], \"invite_code\":[\"271117\"],
\"email\":[\"nisa@nisa.com\"], \"name\":[\"Nisa\"]}"
}
You'll probably want to hide this with a Thank You page :)

Here is what you should get in your email once someone would RSVP to your event:

AND there you have it! :) I hope this will be informative. I had a lot of fun learning about Google Script while creating my wedding RSVP.

Managing your ADD/ADHD and coding

Nisa Champagne — Tue, 15 Sep 2020 14:55:13 +0000

Just curious on how you may manage your ADD/ADHD while coding. Does it hinder your work? Does it keep you jumping from project to project?

IntelliJ vs Eclipse vs VSCode

Nisa Champagne — Tue, 15 Sep 2020 11:54:37 +0000

When I started out learning Java at Lambda, we could have used VSCode or used our student pack for a free year of IntelliJ IDEA. I gave VSCode all of one day to get it set up for Java usage but Lambdas curriculum showed examples using IntelliJ. My choice was obvious at the time as I really didn't want to be stuck behind. IntelliJ impressed me far more than I thought it would haha!

Fast forward to May of this year with the new job and here I have become comfortable with Eclipse. I have been back and forth using Eclipse and finally setting up VSCode for Java development. I like to change it up occasionally at work and get experience.

ANYWAYS

What a long round-a-bout to get to the point of this post! Now that I have experience using all three code editors for Java development, I think I can give my opinion on learning curves and etc like that!

keep in mind this is a very small list from my point of view*

Eclipse

runs on anything that supports JVM
very basic hardware demands
immense ecosystem of plugins
bigger learning curve
commonly used IDE
more frequent software updates
free

IntelliJ

beginner friendly
code completion
smaller learning curve
preferred IDE by new and experienced Java devs
two editions depending on your needs
version control to manage branches, browse changes, and merge conflicts
indexes the entire project when you start up (speeds up search process )

VSCode

good for working on single file or smaller things
many extensions to turn it into a full fledged IDE
not as preferred as IntelliJ
debugger not as good as IntelliJ
no extensions installed upon use
live share functionality
built on top of an Electron platform where as IntelliJ is running on an older JVM
ease of multiple windows when coding

Obviously there are many more points to touch on with each code editor but probably would take a bit more than a post to get to every point...

All in all, my personal preference will always be IntelliJ. I encourage devs (especially newer devs) to give each a go to see what suits their needs.

Useful extensions for VSCode

Nisa Champagne — Mon, 14 Sep 2020 20:06:27 +0000

If you're like me, VSCode is just your go to code editor. I've personally used it since the beginning of my web development journey. Some extensions just enhance your experience. So here I will list a couple that are just :chefkiss: perfection!

1) Peacock

This extension is super nice to color code your open VSCode windows. (As long as you remember what color goes to what) You can easily fish through and pull up the right window, saving time and probably your patience haha!

2) Gremlins tracker

This extension reveals invisible whitespace and other annoying characters. A gremlin icon is shown in the gutter for every line that contains at least one of these characters

3) Bracket Pair Colorizer

(new version is available but if it's not broke... well you know the phrase haha!)

This is just lovely to have open and closing brackets that are identifiable by color. Probably has saved me a little bit of time (possible understatement... )

4) Better Comments

Seems to be a trend in my suggestions.... colors help me organize my code more efficently. Better Comments just helps make your comments more human friendly and easy to spot.

This post was just to name a few that I personally have found useful and use in my day to day life. Hopefully whom ever reads this finds a nifty new extension to use!