<![CDATA[sozonome | hashnode]]>https://hashnode.sznm.devRSS for NodeWed, 15 Apr 2026 08:30:30 GMT60<![CDATA[How to Secure Your Firebase Project]]>https://hashnode.sznm.dev/how-to-secure-your-firebase-projecthttps://hashnode.sznm.dev/how-to-secure-your-firebase-projectThu, 13 May 2021 00:00:00 GMToriginally posted here

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:

  1. Go to https://console.cloud.google.com/apis, Credentials Tab
  2. Select the desired firebase project,
  3. Go to Credentials menu,
  4. Look for API Keys section, select the API key which has ...(auto created by Firebase), API Key Restrictions Tab
  5. 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.
  6. 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

]]><![CDATA[2020 Recap]]>https://hashnode.sznm.dev/2020-recaphttps://hashnode.sznm.dev/2020-recapThu, 31 Dec 2020 00:00:00 GMToriginally posted here

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.

]]><![CDATA[Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify]]>https://hashnode.sznm.dev/monitor-and-measure-site-performance-from-time-to-time-and-automatically-using-speedlifyhttps://hashnode.sznm.dev/monitor-and-measure-site-performance-from-time-to-time-and-automatically-using-speedlifySat, 07 Nov 2020 00:00:00 GMToriginally posted here

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.

Click New site from Git

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:

Measurement page

#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".

Open Build and Deploy settings

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

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

Alt Text

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?

]]><![CDATA[May 2020 Quarantine Self Challenge]]>https://hashnode.sznm.dev/may-2020-quarantine-self-challenge-1https://hashnode.sznm.dev/may-2020-quarantine-self-challenge-1Sat, 02 May 2020 00:00:00 GMToriginally posted here

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/

Le Cook (1) Le Cook (2) Le Cook (3)

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/

COVID-19 Data App (1) COVID-19 Data App (2) COVID-19 Data App (3)

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.

Evergreen UI (1) Evergreen UI (2) Evergreen UI (3) Evergreen UI (4)

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.

]]><![CDATA[Stackbit, the Game Changer]]>https://hashnode.sznm.dev/stackbit-the-game-changer-1https://hashnode.sznm.dev/stackbit-the-game-changer-1Sun, 22 Mar 2020 05:51:32 GMToriginally posted here

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. Alt Text 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 πŸ˜‚.

]]><![CDATA[2019 Recap]]>https://hashnode.sznm.dev/2019-recap-1https://hashnode.sznm.dev/2019-recap-1Tue, 31 Dec 2019 00:00:00 GMToriginally posted here

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.
]]>