Forem: Zernonia

Idea to Production in 2 days, thanks to...

Zernonia — Wed, 18 May 2022 02:25:36 +0000

...Nuxt 3!

If you are not familiar with Nuxt 3, it is build on top of the awesome Vue 3 + Vite (or Webpack if you like) + Typescript, which makes the process of development feels like a breeze. But before we jump right into the Nuxt awesomeness, let me show you the product I've built!

Showcase

Introducing Tweetic.io! It Convert Tweets to Static HTML, where you can embed it on your landing page, blogs or anywhere you like.

It was heavily inspired by Tweet embedded on Supabase's landing page! I looked around the internet, but couldn't find any static tweet generator, thus created this tools!!!

🚀 Features

🤩 Free
📖 Open-Source
🚀 API ready
📋 Copy/Download Static HTML

Ok, enough showcasing, let's dive in to the real deal, Nuxt3!

Nuxt Features

Auto Import

Still wasting your time and effort naming every Vue component, then importing them one by one manually into your views components? Create view and import in Vue router one by one?

Well, Nuxt auto-import components got you covered! Nuxt (even before Nuxt 3) has auto-import features that import all components in ./components folder, as well as creating routes based on your./pages folder.

Check out the ./pages/index.vue from Tweetic.io:

<script setup lang="ts">
// No need to import anything because Nuxt 3 does it automatically!!
</script>

<template>
  <div class="mt-32 flex flex-col items-center overflow-hidden xl:overflow-visible">
      // some h1, h2

    <NuxtLink to="/thank-you" class="flex flex-col items-center mt-8 text-gray-400">
      <span>thank you everyone...</span>
      <Underline class="w-16 -mt-2"></Underline>
    </NuxtLink>

    <div class="flex flex-col items-center space-y-4 md:relative mt-8 md:mt-32 w-full md:h-224">
      <div class="md:absolute flex items-center -top-20 left-10 text-gray-400">
        <Arrow class="w-12"></Arrow>
        <span>Static HTML tweets</span>
      </div>
      <Tweet
        class="md:absolute top-0 left-0"
        url="https://twitter.com/zernonia/status/1513020247690809346"
        layout="supabase"
      ></Tweet>
      // more tweets
    </div>
  </div>
</template>

But that's not all, now the latest Nuxt 3 has even more auto-import features!

TS/JS files in plugins and composables are auto-imported, so you don't need to export them, and manually import them into nuxt.config.ts, or your function script! You can look at all the plugins for Tweetic.io here.

this saves me soooooooo much time!

Server Engine (Nitro)

Nuxt 3 is running on Nitro engine, which unlocks new full-stack capabilities to Nuxt server. It generates:

server API by reading files in server/api/
server middleware from server/middleware/
server routes from server/routes

(YES everything is automatic again!!)

Creating API endpoint is ridiculously easy! You just need to return a JSON data, and done! You have an API endpoint ready to go. Of course, we are free to create node based API as well if you choose to!

Check out this super simple server/api/hello.ts:

export default defineEventHandler((event) => {
  return {
    api: 'world!'
  }
})

Now calling http://localhost:3000/api/hello will return JSON { "api": "world" } 🌎 to you 🔥

Furthermore, the smoothest experience of using this new Nitro engine is when deploying the app! Nitro has cross-platform support for Node.js, Browsers, service-workers and more. It support serverless deployment out-of-the-box too!

Tweetic.io is deployed on Vercel with zero configuration! Nitro will auto-detect the platform, and generate the appropriate output for you. Here are the list of supported hosting providers!

No need to mess with deployment, this is SMOOTH!

Fully Typed!!

Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding. If you are Typescript fans like me, you will be in love with coding once again!

Nuxt 3 generates type-ready Vue components, so you can refers to props and emits easily without inspecting the components, or worried that you might be passing the wrong props into the components.

Other than that, the response from useFetch/useAsyncData provided by Nuxt 3 is also fully typed! You can use the response immediately without having to type cast it like using fetch.

The one thing that literally blew my mind, is this....

... did you spot it?

Is that Nuxt will auto suggest what Server API route is available to be called 🤯!!!

This is super DX in it's finest!

Super fast load time

Last but not least, the lightning fast Vite load time! Vite has been well-known for it's blazing fast initial load time, as well as it's build time. Nuxt 3 uses Vite to bundle the application.

For my tiny apps, it took 1401 milliseconds to start the dev server. That is blazingly fast compared to Nuxt 2 with webpack.

`npx nuxi init <your-app>`

Nuxt 3 really boosted my productivity, and my developing experience! I couldn't express enough how good the experience is, you just have to taste it on your own! 🍇

So what are you waiting for? As Nuxt 3 is currently in the release candidate 3, I'm hopeful that the Nuxt environment will get richer with more awesome plugins and modules!

While discussing a feature request for Nuxt 3 with my friend on Twitter, @Sébastien Chopin (CEO of NuxtLab) dropped by and take note of the thread that we were discussing! This indicates how proactive the team is, and how eager they are to build a product that will be loved by many!

Sébastien Chopin

@atinux

@zernonia @chrisbbreuer @nuxt_js I really like this thread

21:17 PM - 17 May 2022

If you haven't tried out Nuxt 3, now is a good time! Give yourself a taste of Super DX (made possible by Nuxt teams and the communities!) and share with me 1 thing you like the most about Nuxt 3 in the comment section down below!

Thank you for your attention! 💛 May God bless you!

I Design, You Build! - Frontend Challenge #4 (Supabase version)

Zernonia — Sat, 16 Apr 2022 01:50:24 +0000

Appreciation ❤️

I'm loving every submission here on Dev.to from the previous challenges! Really thank you everyone that participated, or bookmarked it!

New Challenge (Supabase version)

Let's step up from the plain 1 pager, and static data! It's time for fetch challenge! Challenger (you) would need to fetch data from API, then display the dynamic content! 🤩

But why is it called Supabase version? Because we are going to leverage Supabase's super powerful auto generated REST API/Graphql endpoint to query data. Not only simple query, you can even apply pagination/filters into the query without writing a single backend code!

Do not worry 😉! I created a tool, called SupaDB that allow user to access all the data provided for FREE! Just simply sign up to obtain the Authorization key, and initiate Supabase client and you are ready!

Target:

🎯 Target : Fetch from provided API
🎯 Target : Search games by name
🎯 Target : Sort games by "Price", "Name"
🎯 Target : Carousel item
🎯 Target : Responsive design
🎯 Target : External link to game's page on Steam

Extra:

🌟 Extra : Loading state (loader/skeleton)
🌟 Extra : Hover animation

Resources:

📃 Supabase : https://supabase.com/docs/reference/javascript/select
📃 Icon : https://icones.js.org/collection/all
📃 Hosting : https://vercel.com/

⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!

Prizes!

As the title mentioned, this is the Supabase version of "I Design, You Build" challenge, so there will be AWESOME SWAG prizes to rewards 5 winners that has the best submission (I will be the judge 😉)

~~The judging period will be 1 month time from the today!~~
Dateline for submission will be 7 May 2022
Submission ended! I will start the judging process 😊

This is the first prizes giveaway for "I Design, You Build" series, and definitely not the last! There will be more prizes in the future! So stay tuned, remember to bookmark this challenge, and follow me on Dev.to and Twitter to stay up to date!

Start Coding!

If you are ready to take on the challenge, then

Help 💖 this design on Dribbble, and follow me! Please... 😳
Bookmark this post so that you can submit it easier.
Right-click here and open Open link in a New Tab to see the Figma Design.
Enjoy coding! 🤩
Come back to submit!

All the images and assets are free to use, and can be exported from the Figma Design.

Submission

Once you've completed, come back to this post, and submit your solution using the following template in the comment section. You are encouraged to comment and upvotes other's answer!

Thank you!💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*🎨 file.

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on Dev.to and Twitter 😄

Also, check out my own Website!

Thank you for your time and attention! Hope you'll enjoy!

I Design, You Build! - Frontend Challenge #3

Zernonia — Thu, 14 Oct 2021 02:18:13 +0000

Appreciation

What an overwhelming response from the first two challenges! I know I said it before, but I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to join us in this fun challenge! 🤩✨

I know everyone is in different level of HTML/CSS/Javascript, but don't worry, I will try to mix in different difficulties in the coming challenge, so stay tuned! 🔔

Challenge

There's a few 1 pager (or should I say 1 section 😆) design previously, how about let's make a Homepage for a Modern Interior Furniture Store?

So, in this challenge, we will be creating a minimalistic E-commerce Website with the touch of modern UI. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

🎯 Target : User can see the similar design
🎯 Target : Responsive design
🎯 Target : Filter products
🎯 Target : Multiple showcase (use arrow button to navigate)
🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)
🎯 Target : On mobile, I can slide the products to left-right.

Extra:

🌟 Extra : Add animation to the filtering
🌟 Extra : Add animation when scrolling down the page

Resources:

📃 Icon : https://icones.js.org/collection/all
📃 Hosting: https://vercel.com/

⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!

Start Coding!

If you are ready to take on the challenge, then

Help 💖 this design on Dribbble, and follow me! Please... 😳
Bookmark this post so that you can submit it easier.
Right-click here and open Open link in a New Tab to see the Figma Design.
Enjoy coding! 🤩
Come back to submit!

All the images and assets are free to use, and can be exported from the Figma Design.

Submission

Once you've completed, come back to this post, and submit your solution using the following template in the comment section. You are encouraged to comment and upvotes other's answer!

Thank you!💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*🎨 file.

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on Dev.to and Twitter 😄

Also, check out my own Website!

Thank you for your time and attention! Hope you'll enjoy!

Supabase Hacktoberfest Hackathon

Zernonia — Fri, 01 Oct 2021 16:39:55 +0000

It's the time of the year, where we Developer cave in to our Coding Dent and start coding again - Hacktoberfest!

As all developer are scavenging through tons and tons of Github repo just to find somewhere they belong, but sometimes to no avail.

But fear not! Supabase is here to the rescue! Introducing....

Supabase Hacktoberfest Hackathon !

This is the second Hackathon hosted by Supabase, hosted alongside with the Hacktoberfest event!

If you'd missed out the first one, you can check all the submission here. Of course, you might be wondering who were the winners, and what was the prize for the first Hackathon? Here's the official blogpost for the Medal Ceremony. I'm sure you wish you knew this earlier, right? 😆

Why does it matter?

You might be thinking, why Supabase Hacktoberfest is hosted alongside with Hacktoberfest? It's because instead of having to code twice, each separately for each event, you can just -- Kill two birds with One stone. (I'm sorry bird lover for using this idiom 😣)

http://thejoysofjodi.com/kill-two-birds-with-one-stone-idioms-part-ii/

How it works?

For Supabase Hacktoberfest Hackathon submission to be counted as valid, you need to build a New Open-Source project with Supabase in the next 10 days.

It can be whatever you want - a project, mobile app, tool, library, anything 😱!!! , as long as you are using Supabase in some way. You can either enter as an individual, or as a team of up to 5 people.

You can check out the Official Post from Supabase here

⚡ Do take note!
Submission deadline is Sunday Oct 10th at 11:59pm PT

But in order to kill two birds with one stone, you need to first set up your Hackathon repo, then make at least 4 PR on that Hackathon project.

That's it! Simple and easy steps that could possibly earn you Hacktoberfest T-Shirt and Supabase Swag with only one effort!

If you are not planning (or too late) to participate in the Supabase Hacktoberfest Hackathon, you can also contribute to one of our Supabase community projects that have the hacktoberfest topic and earn yourself Hacktoberfest PR count.

Made with Supabase

Here's a collection of projects that Made with Supabase! It was built by myself, and contributed by tons of Supabase lovers that wish to showcase their lovely project with the world!🌎

And the most mind blowing fact is that, the Made with Supabase is made with Supabase!

Join us now!

So what are you waiting for? Join us on Discord, Hackathon channel to have fun, find your team, and start Coding!

If you have any questions, feel free to ask me on the comment section below! 💚

Happy Coding!

I Design, You Build! - Frontend Challenge #2

Zernonia — Thu, 30 Sep 2021 18:01:40 +0000

Appreciation

What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to join us in this fun challenge! 🤩✨

I know everyone is in different level of HTML/CSS/Javascript, but don't worry, I will try to mix in different difficulties in the coming challenge, so stay tuned! 🔔

Challenge

I have a confession to make, I'm kinda obsessed with Gradient Blob recently. If you check out my website, you will know what I meant.

So, in this challenge, we will be creating an awesome Gradient Blob and Text Website for a web application. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

🎯 Target : User can see the similar design
🎯 Target : Responsive design
🎯 Target : Gradient text
🎯 Target : Gradient background (gradient blob)
🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)

Extra:

🌟 Extra : Add animation to the Gradient blob
🌟 Extra : Add animation to the image

Resources:

📃 Icon : https://icones.js.org/collection/all
📃 Hosting: https://vercel.com/

⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!

Start Coding!

If you are ready to take on the challenge, then

Help 💖 this design on Dribbble, and follow me! Please... 😳
Bookmark this post so that you can submit it easier.
Right-click here and open Open link in a New Tab to see the Figma Design.
Enjoy coding! 🤩
Come back to submit!

All the images and assets are free to use, and can be exported from the Figma Design.

Submission

Once you've completed, come back to this post, and submit your solution using the following template in the comment section. You are encouraged to comment and upvotes other's answer!

Thank you!💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*🎨 file.

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on Dev.to and Twitter 😄

Thank you for your time and attention! Hope you'll enjoy!

I Design, You Build! - Frontend Challenge #1

Zernonia — Sat, 25 Sep 2021 07:03:59 +0000

Challenge

Awesome Gradient, 3D Space design with different kind of Design Flavor. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

🎯 Target : User can see the similar design
🎯 Target : Responsive design
🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation

Extra:

🌟 Extra : Background blur tips: backdrop-filter: blur();
🌟 Extra : Animation, hover animation

Resources:

📃 Icon : https://icones.js.org/collection/all
📃 Hosting: https://vercel.com/

⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!

Start Coding!

If you are ready to take on the challenge, then

Love 💖 this design on Dribbble and follow me!
Bookmark this post so that you can submit it easier.
Right-click here and open Open link in a New Tab to see the Figma Design.
Enjoy coding! 🤩
Come back to submit!

All the images and assets are free to use, and can be exported from the Figma Design.

Submission

Once you've completed, come back to this post, and submit your solution using the following template in the comment section. You are encouraged to comment and upvotes other's answer!

Thank you!💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*🎨 file.

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on Dev.to and Twitter 😄

// Detect dark theme var iframe = document.getElementById('tweet-1441770639606439940-920'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1441770639606439940&theme=dark" }

Thank you for your time and attention!

Supabase/Postgres SQL Cheatsheet - Curated List of SQL

Zernonia — Tue, 21 Sep 2021 14:48:36 +0000

Hey!

If you are a PostgreSQL user, you are missing out on Big Thing!!! You could spin up a Backend Server, with PostgreSQL as Database in just 2 minutes! How? That is using Supabase. Supabase has raised 30 million as an Open Source Backend-as-a-Service (BaaS) startup. Mind blown!!!! 🤯

Built on Top, problem?

Supabase is indeed build on top of Postgres, and thus enabled developers to utilize all the awesome and stable extension/scripts that has been around the industry for years! You agree with me... right? 😂

Because of the continuous updates by Postgres (and I heard v14 is drawing near!), many of the scripts on Stackoverflow has outdated, and causes Supabase users, including myself (which switch from Firebase - NoSQL) to encounter some problem when running SQL query. Thus, we need Postgres expert like you to give Supabase a try, and join the Supabase community, Discord and most importantly make Open Source better!

Solution - Cheatsheets

Due to the reason mentioned previously, I've curated some of the SQL scripts, to aid Supabase users, or Postgres users in finding the relevant, up-to-date, and tested SQL scripts.

Where's the list, here it is!!!! -> Supabase SQL 🎉🙌

If you - find it useful, please spare a 🌟 at the Github Repo
If you - found any issue/bug, create issues is much appreciated.
If you - wanted to contribute the SQL scripts, PR is even more welcomed!

That's it

That's all the good news I wanna share with you today. If you are a Supabase user, hope you'll like it. If you are a Postgres user, I hope you'll give Supabase a try. If you are none of the above, then you are really missing out on GREAT things!

Until next time, bye! 👋

Follow me

🐤 Bird app - @zernonia

// Detect dark theme var iframe = document.getElementById('tweet-1438767175515271176-531'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1438767175515271176&theme=dark" }

Supabase Storage CDN and Transformation with Serverless function (Unofficial)

Zernonia — Sat, 11 Sep 2021 02:47:45 +0000

This tutorial is just a temporary alternative, while Supabase team is working hard to ship more and more features, where Storage CDN and Transformation is in their pipeline.

source: https://supabase.io/storage

⭐🎉🎊

On that note, congratulations Supabase team on raising $30M as an open source backend-as-a-service startup!!

Get started!

Take note ⚠:

We will be using Vercel Serverless function to make this magic happens, the code might be different but the logic is the same.
We will be serving and transforming Public bucket only. If you wish to see how to implement these magic with Supabase Auth for RLS, remember to follow me for more tutorial.

With that said, we will go through just a few simple steps to implement this magic on
our Supabase Storage's images.

1. Getting Image bucket & name

We will be using bucket_name and file_name variable to call the serverless function, instead of the full public url. If not, your image link would be super-duper long, and unneccessary.

Here are some of the way you could prepare the bucket_name and/or file_name.

1.If you are allowing your users to upload static content to Public bucket, then take note of the bucket_name and file_name users keyed-in.

const bucket_name = 'static'    // your bucket name
const file_name = 'avatar.png'    // name for the file

const avatarFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload(`${ bucket_name }/${ file_name }`, avatarFile, {
    cacheControl: '3600',
    upsert: false
  })

2.You can get use from.list() to retrieve the images you want in a bucket.

In this case, I will simply just list everything in my bucket_name bucket.

const { data, error } = await supabase.storage.from(bucket_name).list()
const file_names = data.map(item => item.names)

3.If you already have the public URL fetch together in another query, with link such as https://asdasaeipbvsvnr.supabase.co/storage/v1/object/public/static/avatar.png, then you can quickly get the bucket_name and file_name using

let link = 'https://asdasaeipbvsvnr.supabase.co/storage/v1/object/public/static/avatar.png'
let [ bucket_name, file_name ] = link.split('public/')[1].split('/')

Alright, now we have our appropriate variable, we can start construct our new link to slot into <img> tag! 🙌

2. Construct new link

Because we are using Vercel serverless function, we need to wrap our img url around the api route.

If you are using Vercel for your current project, you can simply use the following code to generate new link for your <img>

const params = new URLSearchParams({
    f: file_name,
    b: bucket_name,
    // params we haven't mentioned...
})
const new_link =  window.location.origin + "/api/resize?" + params.toString()

If you are not using, Vercel as deployment, you can easily forked this repo that I created for this tutorial. You just have to follow the steps and setup your .env on Vercel. If you wanted to learn more on how this function works, continue follow along!

Serverless function

This part is where the magic happens, let's create a new file in your project root, named api/resize.ts (be default Vercel will convert all files in api folder into serverless function).

Then, you have to install a few packages

I'm using yarn and typescript, you can use npm, and plain Javascript if you like

yarn add sharp axios
yarn add -D @vercel/node @types/sharp

Next, create a basic function as such:

import { VercelRequest, VercelResponse } from "@vercel/node"
import sharp from "sharp"
import axios from "axios"

export default async (req: VercelRequest, res: VercelResponse) => {
  res.end("Hi")
}

To quickly test out the api, run vercel dev to spin up Vercel Development Server.
Then visit http://localhost:3000/api/resize, it should response with 'Hi'.

After that , replace the function with this:

export default async (req: VercelRequest, res: VercelResponse) => {
  const {
    query: { w, h, f, b, q },
  } = req

  // this tricks to deconstruct all the nested query into it's own variable.
  // parameters
  //   w: width   (pixel)
  //   h: height   (pixel)
  //   f: file_name
  //   b: bucket_name
  //   q: quality  (0 to 100)

  res.end("Hi")
}

Remember we have created a new link for the image just now?? Now we have to construct it back to original url, then convert it to Buffer. Thankfully, axios make this job so easy.

export default async (req: VercelRequest, res: VercelResponse) => {
   ...

  // check if `bucket_name` and `file_name` are available, else return error
  if (f && b) {
    const url = `${ process.env.SUPABASE_URL }/storage/v1/object/public/${ b }/${ f }`
    const buffer = (await axios({ url, responseType: "arraybuffer" })).data as Buffer

     res.statusCode = 200
     res.setHeader("Content-Type", "image/png")
     res.end(buffer)
  } else {
    res.statusCode = 500
    res.setHeader("Content-Type", "text/html")
    res.end("<h1>Internal Error</h1><p>Sorry, there was a problem</p>")
  }
}

You can now test this api endpoint as such http://localhost:3000/api/resize?f=avatar.png&b=static (Of course you need to have the image in your bucket) to see if your image is generated. If it works, let continue on the longest script in this tutorial, where we use sharp to transfrom our image to the desire width, height or quality.

export default async (req: VercelRequest, res: VercelResponse) => {
   ...

  if (f && b) {
     ...

   // here we create a new_params object to convert string to number, and also set default value
    const new_params  = {
      w: +w || 800,  // set default 800px
      h: +h || null,    // set to null if not provided, so that Sharp automatically keep the aspect ratio
      q: +q || 80      // set default 80% quality
    }

    // here's where the Transformation happens
    sharp(buffer)
      .resize(new_params.w, new_params.h)
      .jpeg({quality: new_params.q})     // change to .webp() if you want to serve as webp
      .toBuffer()
      .then((data) => {
        // here's where set the cache
        // I set to cache the media for 1 week, 60seconds * 60minutes * 24hours * 7days
        // remove setHeader('Cache-Control') if you wish not to cache it
        res.statusCode = 200
        res.setHeader("Cache-Control", `public, immutable, no-transform, s-maxage=604800, max-age=604800`)  
        res.setHeader("Content-Type", "image/jpeg")
        res.end(data)
      })

  } else {
    res.statusCode = 500
    res.setHeader("Content-Type", "text/html")
    res.end("<h1>Internal Error</h1><p>Sorry, there was a problem</p>")
  }
}

That's it! Just a few line of codes and you have your own CDN and Transformation for Supabase Storage ready to go!!!! But! Don't forget the new_link we created at our frontend.

Lastly!

This is the last step for this tutorial, we generated new_link previously, but now it is ready to add more parameter.

// Set a few width so that cache is more efficient, and need not to create so many cache when different browser visit your website.
let windowWidth = 0
if(window.innerWidth >= 1200) {
  windowWidth = 1000
} else if (window.innerWidth >= 800) {
  windowWidth = 800
} else {
  windowWidth = 600
}

const params = new URLSearchParams({
    f: file_name,
    b: bucket_name,
    w: windowWidth,
    h: null,    // set to null to keep image's aspect ratio
    q: 0.8      
})

const new_link =  window.location.origin + "/api/resize?" + params.toString()

// set the src to new link
document.getElementById("myImg").src = new_link;

And we are DONE!!!
All source code for this tutorial can be found here!

Showcase

Check out Made With Supabase, and inspect the <img>, you will see the similar code there, with slight minor change.

What is Made With Supabase? It is a collection of projects that made with Supabase! Feel free to submit your Supabase project, share the awesome-ness of Supabase with the world!

Before you go

If you find this tutorial helpful, and wish to lean more, then follow me here, and follow my Twitter!

// Detect dark theme var iframe = document.getElementById('tweet-1428379387863306241-609'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1428379387863306241&theme=dark" }

10 Amazing og:image Inspiration 🎨✨

Zernonia — Tue, 07 Sep 2021 10:05:14 +0000

Designing an eye-capturing og:image can be easy, and can be difficult.
That's why, let's look at some of the awesome design that I've curated here. But before that, just in case you don't know what is og:*, here's a small preview of what og can do to display your website beautifully on Facebook.

So, what is og? Well, we will leave it for another article.

10 list of `og:image` inspiration

SaaS

1. Calendly

As a popular software, Calendly no doubt has one of the most simple and beautiful og:image. Just a simple screenshot of your landing page is sufficed. If you are building a Software-as-a-Service, this approach is highly encouraged!

2. Billi

Billi is another software that has a beautiful preview link when shared on social media.(Facebook, Twitter, Discord, etc.). The emphasis on Mobile Device as shown in the og already provides the visitors that this is a mobile apps before landing on their websites.

3. Notion

Notion, is well-known for its minimalistic design, and flexible integrations with a tons of software. The monotone art, with white background style really distinguished them from the other SaaS.

Portfolio (Agency/Personal)

4. Unshift

For a agency/personal website, first impression is always the key to client's heart. When you share your website on social media. Unshift has a very unique design, which intrigued the client/visitor to find out who is the awesome designer behind that banner.

5. Ali Ali

AliAli, as a commercials director showcase their masterpiece straight from their og:image. Check it out!

6. Julia Johnson

Another awesome screenshot of landing page as og:image, who says that style only applicable to SaaS? 😉

Blog

7. How Many Plants

How Many Plants, if you are a plant lover, are you intrigued to click on it? I'm sure you do!

8. Dev.to

Dev.to is a Developer focused community.
This is not the normal og:image, this is the dynamic image that auto-generated for every blogpost that has no cover photo.

9. IndieHackers

Indiehackers, let developers and entrepreneur to share they strategies and revenue, thus og:image design is so awesome in attracting anyone scrolling through social media.

10. Daily Dev

Lastly, another dynamic og:image that showcase the blog easily. Check out Daily Dev to see the awesome design.

That's it!

If you are interested to see more information regarding og:* (Open Graph Protocol), follow me!!!

See ya! Cheers!

NextConf Clone (Supabase Realtime) - Introduction

Zernonia — Sat, 19 Jun 2021 05:34:17 +0000

Next Conf Realtime Playground

Have you seen the awesome Realtime Playground for Next Conf? I believe most of you did. I thought this is just a fun playground for React/Next Dev to play around when they are claiming their tickets, but it turns out to be something much BIGGER! ⚠ Risk of jaw dropping

Then, the Frontend Dev in me started to wonder how they implement such features. I Right Click -> Inspect and started to dig and study how the magic works.

Realtime sync (Replicache)

It turns out their magic is backed by the Backstage assistant, Replicache. Replicache makes it easy to add realtime collaboration, lag-free UI, and offline support to web apps. Most importantly, it works with any backend stack 🤯.

If you are planning to add Realtime Collaboration into your project/products, be sure to check it out

Too Complicated?

But, if you find it too complicated 😫 and involves too many steps just to add Realtime Collaboration into your project, then the following guide and series will definitely help you.

We won't dig too deep into Replicache, but trying to replicate similar features by using Supabase⚡

Be sure to Bookmark🔖 and follow my steps in this Series

Preview

If you are intrigued and want to know where this series will bring you to, you check it out Here

If you just wanna read codes and ignore the rest of the post, no worry, here's the Github Repo

zernonia / supabase-realtime-playground

Supabase Realtime Playground

Fun & Simple Supabase Realtime Demo.
Realtime Play Button • Realtime Chat

View Demo · Report Bug · Request Feature

⚠️ Archived

This repo has been archive in favor of the new Multiplayer features that is coming soon on Supabase. Read more about it here

🚀 Features

🐤 Twitter Auth
🎉 Play around with other user across the internet
⌚ Realtime update Cursor and Button Count
⛅ Realtime chat

📇 About The Project

TLDR - NextConf Realtime Clone using Supabase Realtime

I was heavily inspired by Next Conf realtime ⌚ functionalities, and take some time on learning how Next implement it. Seems like they are using Replicache to implement the Push/Pull realtime functionalities.

Then I look around the internet and couldn't find any similar example, thus inspired me to take on the challenge, and utilizing Supabase Realtime ⚡ to replicate similar effect.

After long hour of studying…

View on GitHub

Ready ❓

In the next post, I will start sharing about How Supabase Realtime can achieve this features, Why I decided to use Supabase, and etc.

Feel free to follow my Twitter:
@zernonia

Supabase Schema Visualizer - No installation/login

Zernonia — Mon, 10 May 2021 03:45:51 +0000

The Idea and Inspiration 💡

Recently, I got addicted to Supabase ⚡ as an Open-Source Firebase Alternative, and I'm having so much fun with it. It has such wonderful UI, and well-written documentation, that allows me to spin up a project easily.

Because of that, I've started to learn PostgreSQL, which Supabase built on top of. I quickly realized that how great would it be if I can easily visualize all my tables, and the relationship with one another (since PostgreSQL is a relational DB), and there's when I found out about Database Schema🔥.

😥 Unfortunately I found many Database Schema Visualizer online which either requires me to install database software, or login with email, which I do not want to . Thus, this gave me the idea to code it myself, since I'm a Web Developer💻.

Showcase 🌟

If you are Supabase user, or interested in using the visualizer, here's the link to it: Supabase Schema Visualizer

zernonia / supabase-schema

Secured & Simple Supabase Schema Visualizer

Supabase Schema

Secured & Simple Supabase Schema Visualizer.
No installations • No Database password required

View Demo · Report Bug · Request Feature

🚀 Features

🔨 No installations
🔒 Persistent State in LocalStorage
🚪 Login-less
👀 No Sensitive info required
🤚 Moveable Schema for own design

📇 About The Project

I look around the internet and found many Database Schema Visualizers that require me to either download the software, or login to view my Database Schema. I feel like there's too many unneccessary steps, just to view the schema.

Thus, I've decided to take this opportunity to build this Open Source, Free, Login-less and Secured Supabase Schema Visualizer 🔥

🔨 Built With

🐾 Instructions

Go to Supabase App
Select your Project
Go to Settings
In Settings tab, Go to API
Under Config, copy URL
Under API Keys, copy anon public
Paste both value into…

View on GitHub

If you find this useful, remember to 🌟 it on Github

Lend me a Hand ✋

When you navigate through the App, you might notice some bugs or possible improvement, feel free to contribute to this project.💘

Ultimate Hope 🔮

My Vision for this project is hopefully that it might be absorbed into official Supabase App, where developer can quickly manage their project's schema visually without leaving the app. So if you find it helpful and wish to have this features, a star on Github would be very much appreciated.

Follow me 🐤

// Detect dark theme var iframe = document.getElementById('tweet-1391430752462508042-696'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1391430752462508042&theme=dark" }

Forem: Zernonia

Idea to Production in 2 days, thanks to...

...Nuxt 3!

Showcase

🚀 Features

Nuxt Features

Auto Import

Server Engine (Nitro)

Fully Typed!!

Super fast load time

npx nuxi init <your-app>

I Design, You Build! - Frontend Challenge #4 (Supabase version)

Appreciation ❤️

New Challenge (Supabase version)

Prizes!

Start Coding!

Submission

Why?

Thank you for your time and attention! Hope you'll enjoy!

I Design, You Build! - Frontend Challenge #3

Appreciation

Challenge

Start Coding!

Submission

Why?

Thank you for your time and attention! Hope you'll enjoy!

Supabase Hacktoberfest Hackathon

Supabase Hacktoberfest Hackathon !

Why does it matter?

How it works?

Made with Supabase

Join us now!

I Design, You Build! - Frontend Challenge #2

Appreciation

Challenge

Start Coding!

Submission

Why?

Thank you for your time and attention! Hope you'll enjoy!

I Design, You Build! - Frontend Challenge #1

Challenge

Start Coding!

Submission

Why?

Thank you for your time and attention!

Supabase/Postgres SQL Cheatsheet - Curated List of SQL

Hey!

Built on Top, problem?

Solution - Cheatsheets

That's it

Follow me

Supabase Storage CDN and Transformation with Serverless function (Unofficial)

⭐🎉🎊

Get started!

Take note ⚠:

1. Getting Image bucket & name

2. Construct new link

Serverless function

Lastly!

Showcase

Before you go

10 Amazing og:image Inspiration 🎨✨

10 list of og:image inspiration

SaaS

1. Calendly

2. Billi

3. Notion

Portfolio (Agency/Personal)

4. Unshift

5. Ali Ali

6. Julia Johnson

Blog

7. How Many Plants

8. Dev.to

9. IndieHackers

10. Daily Dev

That's it!

NextConf Clone (Supabase Realtime) - Introduction

Next Conf Realtime Playground

Realtime sync (Replicache)

`npx nuxi init <your-app>`

10 list of `og:image` inspiration