DEV Community: CP

Beware of Interview Scams!

CP — Thu, 08 May 2025 19:27:32 +0000

If you are interviewing for an engineering position, beware! Do not run any random repos without checking it!

TL;DR
There are scammers trying to steal your wallet private keys, and perhaps other hacks, too, by asking you to run arbitrary code. Do NOT run a random repo on your computer!

The Full Story

LinkedIn is a great platform if you are looking for jobs. 80% of my previous jobs are through random recruiters on LinkedIn. And for engineering jobs, technical interviews and coding tests are the norm.

A typical technical interview lasts between 30 to 60 minutes, perhaps the 10 to 15 minutes is just a short technical skill evaluation before the real interview, I thought to myself.

When I conduct technical interviews, I prefer to talk to the candidates, before any technical skill tests. Soft skills are as important as the technical skills; and context matters, too. So what happened next raised multiple red flags.

First, I check the repo and browse around the code base. In one of the API files, I notice an unusual horizontal scroll bar.

As I scroll, a block of obfuscated code reveals. This is the first red flag.

Then, I’m told that the CTO may or may not be present for the interview. This is the second red flag. How can you interview a candidate without showing up to the interview?

To confirm my suspicion, I asked AI to analyze the obfuscated code block. And here’s what it finds out:

Then I recall, one of the developers in my network shared a similar story. They were told to run a coding test repo and instructed to connect their crypto wallet during the interview. The process appears to be normal, until later the wallet was hacked and real crypto assets were lost.

The Ending

To prevent this account to scam others, I confronted the scammer directly.

And shortly after my reply, I witness the profile gets deleted.

The Takeaways

Do NOT run arbitrary code for any reason. Even if it’s coming from friendlies. Always use AI to scan the code for security threats.
Use a special purpose email and phone number for your resume/CV. You never know who is collecting your personal information.
Always be alert for any red flags — anything out of the norm — when you are dealing with strangers. Safe job-hunting!

About the Author

PAK is a hands-on engineering leader who has been building projects and teams for various startups, mostly focused in Web3, AI and gaming spaces.

He is an “organization freak” who has OCDs in keeping things organized in the most chaotic and fast-paced industries, using frameworks and playbooks.

He believes that AI will make engineers’ lives — and everyone’s lives better as many of the mundane tasks can be done by AI now, so humans can work on more interesting challenges.

How to format SD Card to APFS on Mac

CP — Fri, 10 Feb 2023 08:01:21 +0000

When I tried to format a SD card to APFS, the newer MacOS disk format, using the disk utility, I received the following error:

A GUID Partition Table (GPT) partitioning scheme is required.

Apparently, the default format (ExFAT) on the SD Card does not have a partition, and it requires a command line to fix it.

Open the terminal, and type:

diskutil partitionDisk disk6 GPT APFSX SDDRIVE 0

Note: replace disk6 with the actual disk id, and SDDRIVE is the name you use for your drive.

This will create the proper partition.

This is the available file systems. Type diskutil listFilesystems to view it on your terminal:

How to publish data on-chain with Chainlink?

CP — Tue, 07 Feb 2023 08:30:21 +0000

TL;DR:

All that you need to fetch a response from an API endpoint and publish it on-chain using Chainlink.

Recipe

How does it work?

Q. How do you read off-chain data on-chain?
A. Write it to a state variable on-chain!

Here is the workflow:

In the smart contract, you'll need to:

Specify the validator contract address, (Chainlink's) LINK token contract address, and a jobId.
Construct your API call in the Chainlink request object.
Store the data in the callback function--after the validator fetches the GET request response, it will call the smart contract's callback function with the value, and remember to save that value to a state where you can query later.

Here are the steps:

Write a Solidity smart contract that saves your data in a state variable. Here is a boilerplate smart contract you can copy from the Chainlink tutorial
Replace the API url in the following line of code:

// Set the URL to perform the GET request on
req.add(
    "get",
    "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=ETH&tsyms=USD"
);

If you need to pass in params, pass them in the function and construct the URL accordingly. Here is an example using the boilerplate code above:

function requestVolumeData(string memory _fsymbol) public returns (bytes32 requestId) {
    Chainlink.Request memory req = buildChainlinkRequest(
        jobId,
        address(this),
        this.fulfill.selector
    );

    // Set the URL to perform the GET request on
    req.add(
        "get",
        abi.encodePacked(
            "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=",
            _fsymbol,
            "&tsyms=USD"
        )
     );

    ......

If the API response returns a JSON object (most likely). Define the path of the data in the response.

req.add("path", "data,total"); // {data: {total: 123}}

There is one required param missing from the example, which you need to add before sending the request:

    req.addInt("multiply", 1);

If the Goerli testnet validator from Chainlink does not work, try to use this node validator: https://github.com/oraclelabs-link/chainlink-node-public-jobs/tree/master/ethereum-goerli
Remember, you need to send LINK tokens to the smart contract you deployed, otherwise all transactions will fail.
If you encounter other issues, go to Chainlink support Discord to get answers.

ingredients

Here are all the resources that you need:

Publishing Your API Documentations

CP — Sun, 10 Jan 2021 09:51:33 +0000

My favorite API testing tool is PAW, it's super light-weight and intuitive to use, almost zero learning curve. I've paid for my personal license and have been using it extensively ever since.

Until, when I need to publish documentations. Postman's documentation integration beats all other free tools in simplicity, integration, and look-and-feel.

For simplicity, you can quickly publish your API collections using built-in "publish to web" feature. For the APIS project, we have multiple collections: native RPC call collections, and our own Unified-Core endpoints, etc. Postman allows developers to group them under folders and it's super easy to move endpoints around.

For integration, you can set up variables for both environments or actual params. Typically, you can set up the {{hostname}} variable, so it'll be easy to toggle between localhost and your dev or production environments. The other typical use case is for auth tokens, you can set it up in a variable so all endpoints can get the value.

As for the look-and-feel, I know it differs from person to person. I prefer the Postman documentation page over the swagger-ui. Postman also allows developers to customize the documentation UI. It'd be nice if it has the light-mode and dark-mode out of the box, but maybe I'm asking too much. 😬

It almost sounds like I'm advertising for Postman. It's only fair to point out the biggest issues I have with Postman--it is built for collaboration, but the way Postman handling the free-tier collaboration is EXTREMELY APPALLING.

Postman auto archives your collections in a collaborative workspace, it won't restore it until you pay, and you need to restore it manually even after you pay. The archiving is done automatically when you are over the threshold and it's done silently! Well, it does email you on their action but it's already too late when you see the email.

The only way to fix that without paying is to export the collection, re-import them back to your personal workspace. Postman, as a company, is already so huge they can come up with more "humane" way of forcing developers to upgrade to the pay tier, in my opinion. I have become a paid user after suffering the trauma, so I guess that tactic is effective, at least on me.

Here's the quick link to the doc on publishing your API documentations:
https://learning.postman.com/docs/publishing-your-api/publishing-your-docs/

Simple Currency Input

CP — Sun, 03 Jan 2021 07:45:47 +0000

Currency input could be laborious to write up from scratch, especially if you want it to have proper formatting inside of the input box.

While you can do it the vanilla way using toLocaleString() and replace(/[^\d.]/gi, '' to clean up the strings in handleChange, I found the react-currency-input-field package that makes it super easy.

Check it out on CodeSandbox or view the source below:



import React, { useState } from "react";
import CurrencyInput from "react-currency-input-field";
// https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes
import "./styles.css";

export default function App() {
  const prefix = "$ ";
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    e.preventDefault();
    const { value = "" } = e.target;
    const parsedValue = value.replace(/[^\d.]/gi, "");
    setValue(parsedValue);
  };

  const handleOnBlur = () => setValue(Number(value).toFixed(2));

  return (
    <div className="App">
      <h1>Super Simple Currency Input</h1>
      <p>
        Using{" "}
        <a
          href="https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes"
          target="_blank"
          rel="noreferrer"
        >
          react-currency-input-field
        </a>
      </p>
      <CurrencyInput
        prefix={prefix}
        name="currencyInput"
        id="currencyInput"
        data-number-to-fixed="2"
        data-number-stepfactor="100"
        value={value}
        placeholder=""
        onChange={handleChange}
        onBlur={handleOnBlur}
        allowDecimals
        decimalsLimit="2"
        disableAbbreviations
      />
    </div>
  );
}

How-To Write a Simple Countdown with React

CP — Tue, 03 Nov 2020 02:49:34 +0000

There are tutorials for writing countdown from scratch. With momentjs, it should be a pretty simple task.

But as the name suggests, easytimer makes it easy.

First, set up the countdown variable with React useState:

  const [countdown, setCountdown] = useState(null);

Then, start the timer, and use event listeners to listen to the timer changes, update the countdown variable.

      const target = {
        minutes: 1
      };
      const timer = new Timer();
      timer.start({ countdown: true, startValues: target });
      timer.addEventListener("secondsUpdated", () =>
        setCountdown(timer.getTimeValues().toString())
      );

The target object accepts these keys: secondTenths, seconds, minutes, hours, days, or you can pass in an array in the exact order of [secondTenths, seconds, minutes, hours, days]

Lastly, remember to remove the listeners when component unmount.

      // Remove listeners on unmount
      return () => {
        timer.removeEventListener("secondsUpdated");
        timer.removeEventListener("targetAchieved");
      };

Here's the complete source code, or you can view it on codesandbox

import React, { useState, useEffect } from "react";
import Timer from "easytimer";
import "./styles.css";

const App = () => {
  const EXPIRED = "Expired";
  const [countdown, setCountdown] = useState(null);
  const isActive = countdown !== EXPIRED && countdown !== null;

  useEffect(
    () => {
      const target = {
        minutes: 1
      };

      const timer = new Timer();
      timer.start({ countdown: true, startValues: target });
      timer.addEventListener("secondsUpdated", () =>
        setCountdown(timer.getTimeValues().toString())
      );
      timer.addEventListener("targetAchieved", () => setCountdown(EXPIRED));
      // Remove listners on unmount
      return () => {
        timer.removeEventListener("secondsUpdated");
        timer.removeEventListener("targetAchieved");
      };
    },
    // Known issue with eslint warning against the run-once useEffect
    // eslint-disable-next-line
    []
  );

  return (
    <div className="App">
      <h1>Countdown Demo</h1>
      <h2>{isActive ? countdown : EXPIRED}</h2>
      <div>(refresh to reset a 1 min countdown)</div>
    </div>
  );
};

export default App;

I found it a little bit confusing that there are two npm packages named easytimer: easytimer (last updated 4 years ago) and easytimer.js (last updated 4 months ago), but they both point to the same GitHub user.

How To Get Client IP with Javascript / React

CP — Wed, 28 Oct 2020 06:16:17 +0000

With VPN and Tor, IP may not be a reliable data anymore. Still there are times when we want to log that info. To my surprise, there is no built-in ReactJS (please correct me if I'm wrong about this) method that displays the client IP address. Definitely, you can retrieve that info from the request object "manually".

After trying a few popular packages, the simplest one that does the job is public-ip, super simple, and it provides support for fallback URLs when the IP is not found in the request.

import publicIp from "public-ip";

export const getClientIp = async () => await publicIp.v4({
  fallbackUrls: [ "https://ifconfig.co/ip" ]
});

How-to Avoid Rounding "Errors" in Excel

CP — Sun, 18 Oct 2020 06:34:10 +0000

While working on a financial calculator using Excel as the "reference of truth", I've run into this rounding error -- payments are off by pennies and it ends up off by dollars over time. Instinctively, I tend to believe Excel must be correct. But after digging into the details, I noticed that there is a round off error with Excel:

While Excel displays only 2-decimals, internally, it has a higher precision. And calculations use the highest internal precisions before rounding off.

And this causes problems for financial calculators, where we assume the precision is always set to 2 decimals.

See the following calculation:

P = T - I (Principal = Total Payment - Interest Payment)

The principle (P) is off by 1-penny when using Excel, and here is why:

I = 32.93698323
T= 145.20 (fixed amount the user pays monthly)
P = 112.26535914 (calculated with Excel formula with previous round off error)

When displaying only 2 decimals, the numbers become:

I = 32.94
T = 145.20
P = 112.27
Plugging in the formula:
P = T - I and you get 112.27 = 112.26

This does not sound right, does it? Since we are dealing with money--which only has two decimals precisions--to get the correct numbers in Excel, we need to round up both T and I by using the formula =ROUND(..., 2) in Excel.

Use =ROUND(......, 2) in your formula to force a 2 decimal precision in Excel

Similarly, while programming the calculator, we have to be mindful that we always round up the result to .toFixed(2) before subjecting it to additional calculations.

This maybe something accountants learned in their Using Excel for Accounting 101 course, but it is something easily missed for non-accountants and would cause a lot of confusion when not done right.

Simple URL validation with Javascript

CP — Sat, 17 Oct 2020 01:27:05 +0000

There is a simple way to validate if an URL is valid in Javascript, no messy Regex needed.

const url = new URL(url [, base])

base is only required if you enter a relative URL.

The only catch here is that... IE does not support this. If IE support is NOT required, e.g. building an admin tool for the internal team or it will be launched under a browser instance, etc., use this!

You can use it as a standalone test:

export const isValidUrl = (url) => {
  try {
    new URL(url);
  } catch (e) {
    console.error(e);
    return false;
  }
  return true;
};

And you can integrate with a Yup schema:

const schema = yup.object().shape({
  url: yup
    .string()
    .test("is-url-valid", "URL is not valid", (value) => {
      return isValidUrl(value);
    })
});

Yup Schema Commonly Used Examples

CP — Thu, 15 Oct 2020 09:21:20 +0000

Here are two commonly used schema validations using Yup:

Phone number validation with Regex
How to compare two fields in Yup

import * as yup from "yup";

const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
const schema = yup.object().shape({
  phone: yup.string().matches(phoneRegex, "Invalid phone."),
  password: yup.string().required("Password is required"),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password")], "Mismatched passwords")
    .required("Please confirm your password")
});

export default schema;

How-to Read & Write Google Sheets with React

CP — Tue, 16 Jun 2020 07:50:06 +0000

I want to read and write Google Sheets with React to update the data for an app I built with Glideapps, a no-code app builder that uses Google Sheets as the data source.

It took me quite a while to figure out how to do that. But turns out the solution is quite straight-forward.

TL;DR:

Generate a Google service account key file, get private_key and client_email values.

Get your spreadsheet_id and sheet_id.

Share your spreadsheet with editing permission with the email address in your client_email field.

Make sure the 1st row in your spreadsheet contains the header fields. These values will be the "keys" in your data objects.

Install google-spreadsheet and use it to connect to Google Sheets. There are very good examples in the docs here, and I have included a snippet of how to append to the spreadsheet at the bottom of this post.

Here are the detailed step-by-step instructions with screenshots:

1) Go to Google's developer console:
https://console.developers.google.com/

Click on "Select a project" then click on "New project", give it a name.

Click on "Credentials" then click on "Manage service accounts", then click on "Create service account".

Add a name and description, then click "Create"

Click "Continue" on the "Service account permissions" page, as it is optional.

Click "Done" on "Grant users access to this service account" page, as it is also optional.

Click "Create key" under the Actions column.

Select the default "JSON" and Google will download a key file to your default download folder.

If you open the JSON file, there are two fields you'll need: "private_key" and "client_email"

2) Go to your Google Sheets and find the spreadsheet_id and sheet_id

3) IMPORTANT Remember to share your spreadsheet with the email address in your key file with the key client_email

You should see the "person added" message right away.

4) Make sure your 1st row contains the column names

5) There are very good examples on Googe-Spreadsheet for reading and writing to the Spreadsheet.

Here is a snippet for appending a new row to the spreadsheet I wrote:



import { GoogleSpreadsheet } from "google-spreadsheet";

// Config variables
const SPREADSHEET_ID = process.env.REACT_APP_SPREADSHEET_ID;
const SHEET_ID = process.env.REACT_APP_SHEET_ID;
const CLIENT_EMAIL = process.env.REACT_APP_GOOGLE_CLIENT_EMAIL;
const PRIVATE_KEY = process.env.REACT_APP_GOOGLE_SERVICE_PRIVATE_KEY;

const doc = new GoogleSpreadsheet(SPREADSHEET_ID);

const appendSpreadsheet = async (row) => {
  try {
    await doc.useServiceAccountAuth({
      client_email: CLIENT_EMAIL,
      private_key: PRIVATE_KEY,
    });
    // loads document properties and worksheets
    await doc.loadInfo();

    const sheet = doc.sheetsById[SHEET_ID];
    const result = await sheet.addRow(row);
  } catch (e) {
    console.error('Error: ', e);
  }
};

const newRow = { Name: "new name", Value: "new value" };

appendSpreadsheet(newRow);

React Bootstrap Outlined Tooltip Style/CSS

CP — Sun, 31 May 2020 09:28:58 +0000

Default Bootstrap Tooltip

The default Bootstrap tooltip could use some styling help.

Outlined Tooltip

Let's change it to outlined with drop-shadow and proper spacing!

Implementation details

This is implemented with reactstrap and styled-components. You can see the CSS in each styled component file in /styles/Tooltip*.js. It should be fairly easy to customize with your own design, too.