Forem: Agustinus Nathaniel

A Practical Guide to Data Standards for Seamless Collaboration and Data Integrity

Agustinus Nathaniel — Wed, 24 Sep 2025 05:00:14 +0000

Introduction

If you’ve ever worked on a product with multiple engineers across frontend and backend, you’ll know how quickly things can fall apart without shared rules for handling data. Small differences—like whether dates should be UTC or local, or if null and [] mean the same thing—can create bugs that are painful to debug but trivial to avoid. I’ve been in that situation many times, and over the years I’ve settled on a set of lightweight standards that keep things predictable. This post is about those standards: pragmatic, easy-to-adopt rules that have saved me (and my teams) countless hours.

Why Data Standards Matter

Consistency: Everyone interprets data the same way.
Interoperability: Frontend and backend don’t need to guess what a field means.
Maintainability: Less if/else spaghetti to handle edge cases.
Debugging: Issues are easier to track when the data shape is predictable.

Real-world example:

Date and Time: the backend sometimes stored dates in local time while the frontend assumed UTC. Users in different regions saw reports shift by a day.
An endpoint returned null for items, which immediately broke the UI. After we introduced clear standards, these problems disappeared.

Common Data Standards

1. Date and Time: The Timezone Trap

Always store in UTC on the server.
Use ISO 8601 format (2025-09-18T23:59:59Z).

Note: You can also store dates as Unix timestamps (milliseconds since epoch). They’re compact and avoid parsing issues across environments. ISO strings are easier to read and debug. Pick one format and apply it consistently.

Let the frontend localize for display.
For ranges, store EOD (End of Day) as 23:59:59 and define the expected timezone.
For recurring events, store timezone metadata separately.

Example JSON:

{
  "start_date": "2025-09-01T00:00:00Z",
  "end_date": "2025-09-30T23:59:59Z",
  "timezone": "Asia/Jakarta"
}

Backend (Node.js):

const endDate = new Date("2025-09-30");
endDate.setUTCHours(23, 59, 59, 999);
res.json({ end_date: endDate.toISOString() });

Frontend (React):

import dayjs from "dayjs";
const displayDate = dayjs(new Date(end_date)).format("MMM d, yyyy");

2. Boolean: When `null` Breaks Logic

Client: default to treat null as false, unless there are special cases or agreements.
If true/false isn’t enough, use enums (e.g., pending, approved, rejected).
Document when a flag means state vs. capability.

Example JSON:

{
  "is_active": false,
  "is_admin": true,
  "status": "approved"
}

Backend (Express):

const isVerified = user.isVerified ?? false;
res.json({ isVerified });

Frontend:

if (isVerified) {
  return <Dashboard />;
}
return <VerifyScreen />;

3. Arrays: Empty or Null? Pick One.

Default to return [] instead of null for empty array. Either as API response standard or the frontend always anticipate by defining fallbacks.
Keep array item types consistent (IDs, objects, not both).
Clarify whether ordering is backend or frontend responsibility.

Example JSON:

{
  "roles": ["admin", "editor"],
  "items": []
}

Backend (Node.js):

const items = (await db.getItems()) || [];
res.json({ items });

Frontend (React):

const items = fetchedItems ?? [];

{
  items.length > 0 ? (
    items.map((item) => <Item key={item.id} {...item} />)
  ) : (
    <p>No items found</p>
  );
}

In TypeScript or modern JS, you can simplify null handling with operators like ?? or ?.. For example:

const length = (array ?? []).length;
const safeValue = user?.isVerified ?? false;

Reference:

https://dorey.github.io/JavaScript-Equality-Table/

4. Numbers: Precision Matters

Store numeric values as numbers, not strings.
For money, use integers in smallest units (e.g., cents).

Important: Avoid doing critical math in the browser — floating point quirks can cause rounding errors. Always let the backend be the source of truth for final financial calculations, and use the frontend mainly for display/formatting. If you must calculate in the browser, add reverse checks (e.g., verify a * b / b === a) to detect anomalies.

For precision (e.g., FX rates), use decimal strings.
Define min/max limits (e.g., percentages 0–100).

Example JSON:

{
  "price": 4999,
  "exchange_rate": "1.2345",
  "discount_percent": 15
}

Backend:

res.json({ priceInCents: 999, userId: "123e4567-e89b-12d3-a456-426614174000" });

Frontend:

import nstr from "nstr";
const price = nstr(priceInCents / 100, { maxDecimals: 2 }); // "9.99"

5. Strings: Keep Them Clean

Trim whitespace before saving.
Normalize casing where relevant (emails always lowercase).

Trimming and lowercasing help, but watch out for homoglyphs and invisible Unicode characters (e.g., user@example.com vs uѕer@example.com with a Cyrillic “s”). For sensitive fields like emails and usernames, use String.prototype.normalize() or dedicated libraries to ensure consistency and security.

Use enums if the value should be constrained.

Example JSON:

{
  "name": "Nathan",
  "email": "nathan@example.com",
  "status": "active"
}

Backend:

const email = req.body.email.trim().toLowerCase();
await db.save({ email });

Frontend:

<input value={email} onChange={handleEmailChange} />

6. IDs and References: Don’t Mix Types

Use UUIDs or consistent numeric IDs.
Don’t mix "123" and 123.
Clarify whether IDs are internal-only or public-facing.
Prefer referencing by ID over embedding full objects unless necessary.

Example JSON:

{
  "user_id": "a12b3c4d-5678-90ef-1234-567890abcdef",
  "order_id": 1024
}

Backend:

res.json({ user_id: uuidv4() });

Frontend:

fetch(`/api/users/${user_id}`)
  .then((res) => res.json())
  .then((user) => setUser(user));

7. Error Handling: Predictable Responses

Standardize errors with:
- code: machine-readable
- message: human-readable
- details: optional per-field errors
Align with proper HTTP status codes.

Example JSON:

{
  "code": "INVALID_INPUT",
  "message": "Email is not valid",
  "details": { "email": "Invalid format" }
}

Backend (Express):

res.status(400).json({
  code: "INVALID_INPUT",
  message: "Email is not valid",
  details: { email: "Invalid format" },
});

Frontend:

if (error.code === "INVALID_INPUT") {
  showToast(error.message);
}

Putting It All Together

Adopting standards isn’t about adding complexities—it’s about saving time. A few practical tips:

Document early. Put conventions in README or API docs.
Validate automatically. Use Zod, Yup, or backend schema validators.
Enforce in code. Add type-checking and linter rules.
Review often. Check API responses during code reviews.

These standards are small investments that pay off in stability and predictability.

Conclusion

Data standards aren’t glamorous, but they are the foundation of reliable systems. Whether it’s dates in UTC, booleans defaulting to false, or defaulting array values to empty array instead of null, these rules remove ambiguity and friction. The result: faster development, fewer bugs, and happier teams.

Start small. Document the basics. Enforce them in code. Over time, it’ll feel natural—and you’ll wonder how you ever worked without them.

Force Lodash Import Scope

Agustinus Nathaniel — Fri, 30 Jun 2023 12:00:00 +0000

Importing Lodash

There are multiple ways to import lodash utilities.

// whole import
import _ from 'lodash';
// _.debounce();

// curly bracket / named import
import { debounce } from 'lodash';

// one-by-one / modules / single method import
import debounce from 'lodash/debounce';

One of the recommended way to import it is one-by-one or modules or single method import as it will produces smallest bundle size.

Enforce Lodash Import Method

How about if our project is:

maintained by multiple people, or
we have various parts in our code which utilize lodash

and we want to enforce specific way to import lodash methods?

We can use eslint and there's an eslint plugin for it: eslint-plugin-lodash. This plugin has a rule named import-scope. Here's how to configure it:

pnpm i -D eslint eslint-plugin-lodash

// .eslintrc.js
/** @type {import('eslint').Linter.Config} */
module.exports = {
  plugins: ['lodash'],
  rules: {
    'lodash/import-scope': [
      'error',
      'method' /** 'method' | 'member' | 'full' | 'method-package' */,
    ],
  },
};

With this configuration, eslint will warns us when we import lodash methods using other than the preferred import scope.

References:

Show Installed Global Node Deps

Agustinus Nathaniel — Fri, 10 Feb 2023 00:00:00 +0000

To check node dependencies which are installed globally.

pnpm

pnpm list -g --depth 0

references:

npm

npm list -g --depth=0

references: https://docs.npmjs.com/cli/v9/commands/npm-ls#global

Yarn

yarn global list

references: https://classic.yarnpkg.com/en/docs/cli/global

How to Secure Your Firebase Project

Agustinus Nathaniel — Thu, 13 May 2021 00:00:00 +0000

disclaimer: This is not by any means to be the best practice guide of using firebase in every project. Every project has its own needs and specifications. This guide may not be suitable with your needs.

Do you develop apps using Firebase? If so, we should know that our firebase configs will be exposed to the client (especially for web clients). Then what's the deal? Many possibilities can be happened and prevented. So many articles already covers on how to secure our firebase project by using security rules, authentication check, etc. I usually define my security rules using a package named @jahed/firebase-rules. But how about preventing someone from making their own client and use our exposed firebase configs to do some shady stuffs towards our realtime database?

Apply Restrictions to the API Key

Every firebase project is a GCP (Google Cloud Platform) project, so we can go to Google Cloud console to configure further our firebase project. We can restrict the API key even though it is exposed. Just follow these steps:

Go to https://console.cloud.google.com/apis,
Select the desired firebase project,
Go to Credentials menu,
Look for API Keys section, select the API key which has ...(auto created by Firebase),
You will be directed to a page called Restrict and rename API key, go to Application restrictions section, select HTTP referrers (web sites), add your production web client domain in Website restrictions section. Don't add localhost if you intend to use the firebase project for production.
Hit the save button apply changes.

Voila! Your API key already restricted!

Use Different Firebase Project for Local Development

Now that we already apply restrictions to our API key, how about our local development (localhost)? Well, we can just create a new firebase project which will be used for your local development.

Special Case: Develop Hybrid Mobile App Using Ionic

When developing hybrid app using ionic, chances are we gonna use the same firebase configs for Web and Android / iOS build (firebase web configs). Even though we made several firebase web configs, the API key will remain the same. If we apply restrictions to the API key to be only accessible for certain domain, then the API key won't be usable for the mobile build. Fortunately, there is a workaround for this. We can just create a new API key which don't have any domain restrictions just for our mobile build (the API key can't be easily accessed by the user anyway for Android / iOS build). So, we can use the same firebase configs for our web and mobile builds, but having different API key. Just go to https://console.cloud.google.com/apis/credentials (make sure you already select the corresponding project first), then just create a new API key which will be used for your mobile apps.

References

Defining Firebase security rules
- https://www.npmjs.com/package/@jahed/firebase-rules
Restrict API key
- https://medium.com/@devesu/how-to-secure-your-firebase-project-even-when-your-api-key-is-publicly-available-a462a2a58843

2020 Recap

Agustinus Nathaniel — Thu, 31 Dec 2020 00:00:00 +0000

I think most would say 2020 is a roller coaster year. Even though, 2020 is one of a hella ride and worth for me to be remembered. I've made a quick recap in 2019 before. So let's review what I've been up to in 2020.

What I Learned and Discovered Throughout the Year

Instagram Filter Creation

I love to edit photos and playing around with colors. Then I learn how to make my own Instagram filter. Turned out facebook provides a tool dedicated for that called Spark AR Studio. You can make literally almost anything starting from a color filter, games, quizzes, anything you can think of when playing around with AR. I just want to edit colors so I just go with color filter. Making a color filter is quite simple, you only have to create a LUT, import it to your Spark AR projects as a layer, export it, and upload it to Spark AR and connect it with your instagram account. Check out some filter I made here.

React Hooks and Context

React hooks been around but I've never learn or use it until I finally get my hands on it when building an app as part of my undergraduate thesis. I used to stick with Classful Components and use redux (just in desperate moments), but learning hooks and context helps me to switch fully to Functional Components.

TailwindCSS

2019 was a year where I finally get my hands on React and started to re-learn GatsbyJS (I tried to learn Gatsby before touching React at 2018 and it was a disaster idea). It was a really fun journey. But there's something I've been wanting to try but never accomplished at 2019....TailwindCSS. So, at 2020 I finally get my hands on it and it was really different than other styling frameworks I've ever used before (Bootstrap, Bulma, SemanticUI). I use it to rebuild my first personal site (agustinusnathaniel.com). But around the end of 2020 I re-write it again using Chakra-UI.

Svelte

I heard svelte often but never tried it until I stumble upon Rich Harris's video when he explain about reactivity. His explanation is really great and quite eye-opening for me who mainly develop using React. So I tried it, made some little projects with it and I like how straightforward it is. I'd recommend using svelte if you are looking for a powerful javascript libraries like react or vue (framework) but with an easier learning curve. I'd love to see Svelte's development over the next years. But not long after that I also got my hands on Next.js.

Next.js

I learn Next.js and implement it in some of my projects. I used to avoid learning and using Next.js because I haven't understand SSR properly yet. I thought Next.js is only used for SSR projects. Then I found out Next.js support both static site generation and server side rendering since version 9.3 and I got my hands on it for the first time not so long after version 9.4 released. Since then, Next.js has been my go-to react framework for most of my projects.

Chakra UI

I tried several design system or component libraries this year: Fluent UI, Carbon, Material UI, and Chakra UI. After trying out and play around with those design systems, I found out Chakra UI suits my needs the best. It's easy to be configured, easy to use, and it has color mode styling and management built in. After some time, I made a template with Next.js, Chakra UI, and TypeScript pre-configured and has been my go-to template to initiate most of my recent projects.

Projects I Worked on in 2020

most of the projects are just a little side projects for me to try implement some simple ideas or learning something.

1. Personal Site Revamp

I re-write my personal site agustinusnathaniel.com using TailwindCSS and add blog section. At the end of the year I replace the TailwindCSS usage with Chakra UI.

2. Le-Cook

An app to find food recipe, powered by RecipePuppy API

3. Covid-19 Data

Monitor Covid-19 statistics, powered by @mathdroid's Covid-19 API, @ariya's Dekontaminasi API, and @Reynaldi531's api-covid19-indonesia v2. First developed using Gatsby, then re-wrote it with Next.js and Chakra UI.

4. Advice Generator

A random advice generator powered by Advice Slip JSON API, written using Svelte.

5. Insta Profile

A simple Svelte app fetching data from Instagram.

6. sznm.dev

I make another personal site of myself dedicated for dev content, built using Next.js, composed using Chakra UI.

7. KapturaLumina

Basic Photography Learning Mobile App with Gamification. Built using Ionic, React, and Firebase. Available as PWA and android app. I built it as part of my undergraduate thesis.

8. NextChakra-Starter

A template I made to initialize Next.js projects with TypeScript and Chakra UI setup. Most of my following projects are initalized / generated using this template.

9. Add to Calendar Generator

A web app to generate Add to Calendar link (Google Calendar).

10. InstaDLD

Instagram post media downloader with multipost download supported.

11. Public APIs

An app to find public API for you next projects. Didn't thought it could be the product of the day in Product Hunt at 26 Dec 2020. Powered by api.publicapis.org.

Some other stuffs worth to mention

I graduated from college (finally) 😊😊. Really grateful for everyone who supported me until now, especially my family and friends.
I started my career as Software Engineer right after I finished my thesis.

All in all, I'm glad I can get through 2020 pretty well enough. I never imagined I'd graduate in time, especially when the pandemic situation started to happen and my thesis proposals got rejected several times. Hoping to grow more in 2021 and crafting greater stuffs. Thank you for reading and I hope you are doing well 😄.

If you're interested in another version of my review of my journey in 2020, I also published it at twitter (focused around the projects I made throughout the year).

My previous recap: 2019.

Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify

Agustinus Nathaniel — Sat, 07 Nov 2020 00:00:00 +0000

TL;DR

Want to measure and monitor your site performance from time to time and automatically? Deploy Speedlify through Netlify and use Github Actions (cron schedule) or Zapier to automatically trigger build every desired time.

You can directly visit this page if you know what to do next. But if you need some guidance, this article will help you step by step.

What will be covered in this article?

How to configure Speedlify
How to deploy Speedlify
Using Netlify build hooks and Github Actions to automatically trigger build Speedlify page every desired time.

This article won't cover...

SEO or visitor related metrics like Google Analytics. The site performance mentioned in this article is Lighthouse based performance measurement.

Measuring Site Performance

Nowadays there are so many ways to measure site performance beside running lighthouse in your local machine (Chrome Dev Tools). Even recently Vercel, PaaS for frontend deployment released a feature called Analytics. This feature can show your Next.js or Gatsby site performance automatically from time-to-time without having to configure anything (almost zero-config). But this feature is limited to be applicable for one project if your vercel account is a free version.

What if we have more than one project / site to be measured from time-to-time without spending extra cost? Well, this is where Speedlify comes in, a template for site performance monitor created by Zach Leatherman. Speedlify built using a static site generator framework called 11ty(eleventy).

I've tried to deploy my own speedlify here.

fun fact: I found Speedlify when I was just randomly exploring 11ty docs page (not really important, just intermezzo 😄)

Well, let's get our hands dirty!

How?

What is needed?

a Github account
a Netlify account

This Guide was Written with Assumtions that You:

know how to use basic Git commands
familiar with Netlify
familiar with Node.js environment (installed node and npm)

I suggest you to visit Speedlify to get some glimpse on what we will be using. There's a link to the source code repository on that page which shows you how to deploy your own Speedlify page. However, if you are having some difficulties, you can folow these steps:

#1: Clone Speedlify Repo

Import speedlify repository to your github account (https://github.com/new/import), input this URL: https://github.com/zachleat/speedlify/.

After the import process is done, clone your speedlify repo into your local machine or just run these command below in your local folder:

git clone https://github.com/[YOUR_GITHUB_USERNAME]/speedlify/

cd speedlify

Then, run npm install or npm i.

#2: Configure URLs

Open _data/sites folder. Every file you create here will represent a category. You can defined more than one URL for every category. Just delete all default files in _data/sites. Create a file [CATEGORY_NAME].js. (change [CATEGORY_NAME] with your desired category name). You can create more than one category, but you must know some limitations here: https://github.com/zachleat/speedlify/#known-limitations

// _data/sites/[CATEGORY_NAME].js
module.exports = {
    name: "Category Name", // optional, falls back to object key
    description: "Category Description",
    options: {
        frequency: 60 * 23, // 23 hours

        // Use "run" if the sites don’t share assets on the same origin
        // and we can reset chrome with each run instead of
        // each site in every run (it’s faster)
        // Use "site" if sites are all on the same origin and share assets.
        freshChrome: "run",
    },
    urls: [
        "https://[YOUR_SITE_URL]/",
        "https://[YOUR_SITE_URL]/",
        // etc
    ]
};

explanations

options
- frequency: to set minimum time needed before next measurement. If we set 60*23 (1380 minutes or 23 hours) it means we will be measuring our site performance once every 23 hours. This value will be used to avoid measurement more than once before the minimum time was passed which will affect the build time. If we set the frequency to 23 hours and trigger build every 6 hours, the measurement for this category will be skipped if the last measurement haven't passed 23 hours.

#3: Test run in local

Run npm run start. If the categories you input are shown, you can continue to the next step. You won't see any measurements. Measurements will be done at the build time when we deploy your Speedlify to Netlify. Commit your changes and run git push to apply changes to your github repository.

#4: Deploy configured Speedlify through Netlify

Open your Netlify dashboard (https://app.netlify.com/), click "New site from Git". Point it to your Speedlify repository.

Confirm the build configurations until "Deploy Site" button is shown and click that button. Netlify build will do the build and deployment process. If the build and deployment process are successful, you can preview your deployment.

The measurement page will look like this:

#5: Configure Github Actions to Automatically Trigger Build Every Desired Time

To do measurement from time-to-time, we will utilize Netlify build hooks and Github Actions. Why? Because measurement are only done on build time. It will be a hassle to trigger the build process manually. You don't have to use Github Actions if you prefer to use Zapier or similar services which support cron schedule. The same process can be achieved using Zapier with Schedule by Zapier and Webhooks by Zapier. However for the time being Webhooks by Zapier can only be enabled if you are a Zapier premium user. Therefore, in this guide I will use Github Actions as an alternative which are more friendly to our pocket.

We will need build hook link (webhooks) to trigger build in Netlify. To get that link, open your speedlify project in your Netlify dashboard, then open "Site settings". Open "Build & Deploy".

Then point to "Build hooks", click "Add build hook".

We will get the build hooks URL, copy that link.

Now we can configure Github Actions to automatically trigger build to Netlify. Go back to your speedlify local folder, add a file named .github/workflows/main.yml and paste the copied build hooks URL into this file:

# .github/workflows/main.yml

# edit according to your needs
name: Trigger Netlify Build daily on Weekday
on:
  schedule:
    # if you want to define your own build trigger schedule, just change the cron schedule value below
    # use https://crontab.guru/ if you are having some difficulties on how to define the cron values
    - cron: '0 22 * * MON-FRI'
    # every day on weekdays 22:00.
jobs:
  build:
    name: Netlify build
    runs-on: ubuntu-latest
    steps:
      - name: Curl request
        run: curl -X POST -d {} YOUR_BUILD_HOOK_URL

Commit your changes and run git push. If it's configured correctly, it will be shown in "Actions" tab at your github repository.

Now you have a dedicated page to monitor your site performance from time-to-time and automatically updated.

Limitations

It's important to note that the more URL you add to your speedlify configurations, the build time needed will be increased. The free version of Netlify have a maximum 15 minutes build time for every build process and 300 minutes build time quota for every month.

I work around it by limiting my measurement to be done maximum once every 23 hours and limiting the total URLs from all category to be around 5 until 10, and automatically trigger the build every day on weekdays only at 10PM. With those configurations, every build would spend around 4 until 7 minutes (<15 minutes), so I won't hit the monthly build time quota limit (4.5 * 5 * 7 ~= 160 minutes -> <300 minutes).

Thank You!

For reading this article. I hope you found this useful.

References

Some Alternatives

(some exhaustive list of other tools to measure your website performance)

Discussions

How important it is to measure site performance for you? How often do you measure your site performance? Which tools do you usually use?

May 2020 Quarantine Self Challenge

Agustinus Nathaniel — Sat, 02 May 2020 00:00:00 +0000

Recently I challenged myself to make a web app as soon as possible in two days. Managed to make two. One is a simple Food Recipe App and the other is COVID-19 Data App. Turned out it was so fun.

1. Le Cook

Fun food recipe catalog app powered by RecipePuppy API....

https://le-cook.now.sh/

2. COVID-19 Data

presenting COVID-19 statistics powered by @mathdroid's covid-19-api. I made a vanilla JS version of this app several days ago and I decided to re-develop it using Gatsby (React).

https://covid19data.now.sh/

Both Le Cook and COVID-19 Data app were developed using Segment's Evergreen UI. Just discovered this React UI Framework and turns out it's so convenient to implement it on these projects.

When developing COVID-19 Data app, I realized Evergreen UI have no opinionated way to construct responsive layouts. So, I decided to combine it with TailwindCSS which I already tried to use at this personal site. It worked.

I decided to deploy it using Vercel and I'm so shocked by how fast it is compared to Netlify. I'm considering to migrate to Vercel from Netlify for my previous projects, including this site.

I posted my recent projects here. You can access the project and the project's GitHub repository link from this page.

Stackbit, the Game Changer

Agustinus Nathaniel — Sun, 22 Mar 2020 05:51:32 +0000

by the time I wrote this post, Stackbit is still at Beta.

Have you ever thought of launching a landing page or a blog with the technology of your choice in just under 10 minutes? Since JAMStack is getting more popular these days, more sites are being developed this way. Building it from scratch is also not too hard. But the problem is sometimes the initialization of the project or the deployment process can spend more time than you think. Not to mention if you are someone who just want to get a little grasp of what all this about without getting your hands dirty and spending some hours just to know what are you actually trying to do. Or if you are a first-timer who needs a step-by-step guide.

Yes, this is for you if you want to get a taste of what is JAMStack site about, how does it work in general, but you don't want to build it from scratch just to know it. This is for you if you are someone who are very familiar with building JAMStack sites, having multiple and upcoming clients who requests high performance yet low-cost site. Well, this is where Stackbit plays the role for you.

You can call Stackbit as your smart-assistant who helps you to start your JAMStack site. It's very easy to use, you just need to prepare your GitHub account (GitLab and BitBucket support coming soon) and a Netlify account. The next thing is just register yourself into Stackbit (you can even register using your GitHub account so it's more convenient) and you can start to Build a Project. You gonna choose the site theme, the site generator framework, CMS, then you can deploy it.

All of it are done just by picking, doing some clicks, and voila. Yeah, all of the process involve no code. But if you want to develop and customize the project further, that's where your hands start getting dirty.

So, what are you waiting for? Don't just read this post, it won't bring you anywhere. Try it now and you will know what I'm talking about 😂.

2019 Recap

Agustinus Nathaniel — Tue, 31 Dec 2019 00:00:00 +0000

I spent most of my time in 2019 at college, trying to finish all my university courses by the end of 7th semester so I can focus on Thesis / Final Project at the final semester (8th semester). Planning to graduate in 2020. So...not really much happened in this year, but I learned so much in terms of mobile application and web development. How to build an Android App and got my hands on React framework for the first-time in this year.

What I learned in 2019

Java and XML - How to build Native Android apps using Android Studio.
REST API - How to fetch data and display it with recycler view in Android app
PHP - how to program a website with PHP, MVC.
How to setup a website using database with PHP, laragon, and MySQL
CodeIgniter - how to use CodeIgniter to build website.
How to deploy PHP sites with its database to cPanel hosting.
How to setup arcanist in Linux Ubuntu.
How to use Git for managing personal and team projects.
TypeScript - how to use it, what is the importance of strong typing, and how to compile it into JS
React - how to build an app using React with CRA.
GraphQL - what is it and how is it used
Apollo - how to implement apollo as a client for GraphQL
GatsbyJS - how to build a site with Gatsby
Ionic - how to build hybrid apps and how does it different from native apps.
Angular2+ - forced to learn this framework because learning Ionic Angular and luckily I've learned TypeScript.
Zeit - found a Netlify alternative and how to deploy site with it.

Forem: Agustinus Nathaniel

A Practical Guide to Data Standards for Seamless Collaboration and Data Integrity

Introduction

Why Data Standards Matter

Common Data Standards

1. Date and Time: The Timezone Trap

2. Boolean: When null Breaks Logic

3. Arrays: Empty or Null? Pick One.

4. Numbers: Precision Matters

5. Strings: Keep Them Clean

6. IDs and References: Don’t Mix Types

7. Error Handling: Predictable Responses

Putting It All Together

Conclusion

Force Lodash Import Scope

Importing Lodash

Enforce Lodash Import Method

References:

Show Installed Global Node Deps

pnpm

npm

Yarn

How to Secure Your Firebase Project

Apply Restrictions to the API Key

Use Different Firebase Project for Local Development

Special Case: Develop Hybrid Mobile App Using Ionic

References

2020 Recap

What I Learned and Discovered Throughout the Year

Instagram Filter Creation

React Hooks and Context

TailwindCSS

Svelte

Next.js

Chakra UI

Projects I Worked on in 2020

1. Personal Site Revamp

2. Le-Cook

3. Covid-19 Data

4. Advice Generator

5. Insta Profile

6. sznm.dev

7. KapturaLumina

8. NextChakra-Starter

9. Add to Calendar Generator

10. InstaDLD

11. Public APIs

Some other stuffs worth to mention

Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify

TL;DR

What will be covered in this article?

This article won't cover...

Measuring Site Performance

How?

What is needed?

This Guide was Written with Assumtions that You:

#1: Clone Speedlify Repo

#2: Configure URLs

explanations

#3: Test run in local

#4: Deploy configured Speedlify through Netlify

#5: Configure Github Actions to Automatically Trigger Build Every Desired Time

Limitations

Thank You!

References

Some Alternatives

Discussions

May 2020 Quarantine Self Challenge

1. Le Cook

2. COVID-19 Data

Stackbit, the Game Changer

2019 Recap

What I learned in 2019

2. Boolean: When `null` Breaks Logic