Forem: Faith Morante

Dev.to articles migration to markdown files

Faith Morante — Wed, 18 Oct 2023 22:02:39 +0000

As part of my migration to TinaCMS, I also want to migrate all my dev.to articles to my new blog website. My primary goal is to consolidate all my blog posts from various platforms in my personal website.

Just create a new npm project, and add these dependencies:

"devDependencies": {
    "@types/node": "^20.8.2",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "axios": "^1.5.1",
    "ts-node": "^10.9.1"
  }

Another requirement is getting your API key from dev.to. Save it in a safe storage and we will use it in our code. You can store it in a .env variable, but we will hard-code it for simplicity.

NOTE: To follow this tutorial, try to read everything first. Each block of code in the following lines can be added in one js file.

Fetching dev.to articles, looping through each and converting to a markdown file

My starting entry point function looks like this:

async start() {
    // fetch your own dev.to published articles
    const res = await axios.get("https://dev.to/api/articles/me/published", {
      headers: { "api-key": "CSQVPaBYr6aEv8LR5os4m14K" },
    });

    const files: Article[] = res.data;

    /**
     * loop through each article which we are calling `file`
     * then convert each one to a valid markdown file
     */
    files.forEach((file) => {
      this.convert(
        // the first argument is the whole body of the markdown
        // we are concatenating the frontmatter + markdown body
        `${this.createFrontmatter(file)}${file.body_markdown}`,
        `${file.slug}.md`
      );
    });
  }

The convert function can be found below this article. It receives 2 parameters: the markdown data which is a string, and the fileName which is also a string. The markdown data has the frontmatter which is discussed right below, and also the body data which is preceded by --- characters.

Create frontmatter

Frontmatter is the metadata of a markdown, it can include any data. Also, since each value (like a title) can have a : character, we will add the value on the next line after the key. For example: ${key}: > \n ${data[key]}\n;

Here is the code:

createFrontmatter(
    data: Article,
    excluded: string[] = ["body_markdown", "user"]
  ) {
    // a frontmatter starts and ends with `---`
    // this is the start
    let frontmatter = "---\n";

    // this is the middle of the frontmatter
    // which looks like key: > \n value
    Object.keys(data).forEach((key) => {
      if (!excluded.includes(key)) {
        frontmatter += `${key}: > \n ${data[key]}\n`;
      }
    });

    // this is the end of the frontmatter
    frontmatter += `---\n`;

    return frontmatter;
  }

Dev.to provides a lot of kinds of data for us, but we will exclude body_markdown and user data.

Writing the strings to markdown file

convert(data: string, fileName: string) {
    fs.writeFile(`md/${fileName}`, data, (err) => {
      if (err) {
        console.log("Write to file has an error", err);
      } else {
        console.log("Write to file was successful");
      }
    });
  }

Also, create an Article TS type:

type Article = {
  title: string;
  description: string;
  published_at: string;
  path: string;
  url: string;
  slug: string;
  body_markdown: string;
};

After you have run this script, you can manually move the markdown files to your Tina posts folder.

Let me know if you have any questions and clarifications,
Cheers
FM

Setting up TinaCMS with Astro

Faith Morante — Thu, 12 Oct 2023 21:47:31 +0000

The realm of web development is ever-evolving, and staying updated is key. Recently, I undertook the task of migrating from Gatsby/Netlify CMS to the innovative Astro/Tina CMS duo. The reasons? Astro's compelling performance promises and its flexibility to integrate with multiple JavaScript frameworks. Tina CMS stood out with its customizable blocks and intuitive drag-and-drop features.

Step-by-Step Migration Process:

Astro Installation:
Begin by setting up Astro following the official documentation. - https://docs.astro.build/en/install/auto/#1-run-the-setup-wizard

Tina CMS Integration:
Integrate Tina CMS with your Astro project using this guide. - https://tina.io/docs/frameworks/astro/

To avoid potential port conflicts with other ongoing projects, I adjusted the dev server script to:
"dev": "tinacms dev -c 'astro dev --port 8022'",

There will be a ready-made post in content/post folder.

Configuring Tina:
Configuration is critical for seamless integration. Navigate to tina/config.tsx for the setup. A sample configuration would look like:

// tina/config.{ts,js,tsx}
import { defineConfig } from "tinacms";

export default defineConfig({
  token: "get your token from Tina Cloud", // generated on app.tina.io
  clientId: "get your clientId from Tina Cloud", // generated on app.tina.io
  build: {
    publicFolder: "public", // The public asset folder for your framework
    outputFolder: "admin", // within the public folder
  },
  // See https://tina.io/docs/reference/schema/ for more information
  schema: {
    collections: [
      {
        label: "Blog Posts",
        name: "post",
        path: "content/posts",
        format: "md",
        fields: [
          {
            type: "string",
            label: "Title",
            name: "title",
          },
          {
            type: "rich-text",
            label: "Post Body",
            name: "body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

You should be able to see your admin panel in /{server-url}/admin/index.html. The index.html ending is important, as without having it will throw a 404.

Next in this series, I will cover how I converted my dev.to articles to markdown files to prepare them for showing in my blog.

In conclusion, the migration to Astro and Tina CMS has been a noteworthy step in optimizing and enhancing our web development process. I look forward to sharing further insights and learnings from this transition.

Cheers,
FM

Nested Layouts in NextJS (App Router)

Faith Morante — Wed, 27 Sep 2023 23:43:50 +0000

Introduction

At work, we are going to create a new system and we have a scenario where we have a page that can have multiple layouts.

The whole system is still being planned out and many unknown variables remain. As far as I understand, each component in the layout can be passed in with an identifier or ID.

Here is a straightforward representation of what we want for the UI:

Problem

The main problem we are trying to solve is that this layout can be changed as the user has the ability to choose a different layout at a point in time. Let's also assume that a component may need to know a specific identifier to render its data. For example, Header might need a uuid, Body might need an id and the same for Sidebar.

Solutions

There are three approaches to this on how we will organize the URL structure:

Approach 1:

* logic: /[layout]/[header]/[body]/[sidebar]
* actual: /layout1/header2/body2/sidebar2 or /layout2/header3/body2/sidebar4

Pros:

We can pass data in the route in each layout, for example: /layout1/uuid/id/id

Approach 2:

* logic: /[layout]
* actual: /layout1 or /layout2

Pros:

Simple, clean and more scalable

Approach 3:

logic and actual: /layout1/header1/left2/right2

Pros:

Has more control than others

Let's get into coding

We have decided to go with Approach 2 at work because of our current use case but in this article, we will go with Approach 1.

I have never worked with App Router before this, so let me know if I do some things wrong or unnecessary :)

I won't go through the details of setting up the project, you can go ahead and see the docs for that. The important thing is we are going to use App Router in this article.

Let's start with the folder structure:

Observe that each folder ([layout], [sidebar]) has both a layout and a page.

Layouts

Layout is more like the root component of that folder. It can hold the UI structure and the placement of the children props.

The main idea here is the children.
There are two scenarios:

1 - Rendering the current route: Let's say you're in the [body] route which is something like /layout1/header1/body1, the children will have the [body]/page.tsx.

2 - Rendering the nested route: Now let's say you're in the [sidebar] route which is something like /layout1/header1/body1/sidebar1, the children in your [body]/layout.tsx will render the [sidebar]/page.tsx

For more context, here is the Body layout:

const BodyLayout = ({ params, children }) => {
  const { body } = params ?? {};
  return (
    <div className="w-full h-[200px] flex">
      <div className="w-full h-full w-[70%] bg-green-100 text-black">
        {body}
      </div>
      <div className="w-full h-full w-[30%] bg-blue-100 text-black">
        {children}
      </div>
    </div>
  );
};

export default BodyLayout;

and the Body page:

const Body = () => {
  return <div>Body</div>;
};

export default Body;

Pages

They call this the leaf. You can compose your UI here, fetch data as it is a Server Component and it will be outputted as children in the current route.

Conclusion

NextJS has done a great job in nested layouts and is a great matchup for the same thing with Remix.

I hope my article was clear and concise.

Cheers,
FM

Rotating a vertical rectangle image using React-cropper

Faith Morante — Wed, 20 Sep 2023 19:46:21 +0000

For those who are using react-cropper package (https://github.com/react-cropper/react-cropper/), and has issues with rotating images, you're reading the correct post.

react-cropper uses cropperjs under the hood. And cropperjs has multiple github issues regarding auto-fit issues when rotating.

Here's the modal we use with the image inside the Cropper

After rotating, the image goes out of bounds and looks cropped out. I played around with setCropBoxData and setCanvasData and nothing worked. Until I came to find out that this is more like a scaling problem.

I created a helper function to handle scaling for these types of images.

/**
   * This function scales the image when a vertical rectangle image is being rotated.
   * The goal is to auto fit the image inside the container width.
   */
  const handleScaleVerticalImg = (cropperRef) => {
    const imgData = cropperRef.current.cropper.getImageData();
    const containerData = cropperRef.current.cropper.getContainerData();
    const isVertImg = imgData?.naturalWidth < imgData?.naturalHeight;

    if (isVertImg && [90, 270, -90, -270].includes(imgData?.rotate)) {
      const height =
        imgData?.height < imgData?.naturalHeight
          ? imgData?.height
          : imgData?.naturalHeight;

      // img height is it's width after rotating
      cropperRef.current.cropper.scale(containerData.width / height);
    } else {
      cropperRef.current.cropper.scale(1);
    }
  };

Breakdown of code:

if (isVertImg && [90, 270, -90, -270].includes(imgData?.rotate)) {

This checks if the image is vertical and is rotated sideways.

const height =
        imgData?.height < imgData?.naturalHeight
          ? imgData?.height
          : imgData?.naturalHeight;

imgData?.height is the container height, and we should get the smallest from these two. This is to ensure that when it rotates, the scale is calculated correctly.

cropperRef.current.cropper.scale(containerData.width / height);

The image's width should scale down according to the container's width. In this case we are basing the image width from the height as when it rotates sideways, the height becomes the width.

After rotating, this is now what happens:

That's it, if you have any questions feel free to comment below!

Cheers,
FM

Don't get attached

Faith Morante — Tue, 29 Aug 2023 23:44:04 +0000

One of the situations you will encounter in the professional world of web development is that things won't always go your way. There will be times when you gave it your all and maybe 110% with element of rush because of a tight deadline to finish a task, and then you hear your project manager saying, we're descoping the project and focus on another one.

Your heart sinks.

But as someone who has been doing this for more than 8 years, I have developed an attitude towards code that this may not be used. Your code which you have worked on can be deprioritized, postponed or worse, may never be used.

So useful tip, don't get attached. Just think of the learnings you have gained through it, document it as much as possible, and try to move on.

Your code unpublished doesn't mean you're not a good developer. The experience you get from it matters the most.

Guide on Github deployment with MongoDB Realm

Faith Morante — Thu, 16 Dec 2021 23:50:28 +0000

Hi, me and a friend teamed up for the MongoDB hackathon. And I'm super excited for it! With our idea, it seems like Realm would be the cool features to utilize for this.

It sounds like AWS Lambdas, so I kind of have an idea how this works. And so I was looking for a way to integrate github deployment to my Realm app. Turns out they do have that option! But I hit some roadblocks:

In the docs, it says there should be an app configuration, but there were so many folders, which ones are actually required?
What's the best way? To start with an empty repo or with the app config?

I advise you guys to start with a repo with an /app and a realm_config.json inside it
Link your github account in Realm.

It should practically look like that. Make sure the directory points to /app (the docs says its on /dist, and that really confused me), and enable Automatic Deployment so that everytime you make changes in your repo, it will deploy here

Then to populate your repo, go to Environment Tab, and choose Development, hit Save

Go to History Tab, there should be a button saying: Review Draft & Deploy. Click that and deploy it, what it does is the changes merges to your repo and it populates your app directory

That should be it, let me know if this helped you,

Cheers!
FM

Debugging tip for backend programming

Faith Morante — Wed, 30 Sep 2020 00:42:26 +0000

In over 5 years of professional programming, I have to say personally most of the toughest daily tasks to do is debugging. Especially user journeys where you don't know why a certain thing happened. You try to replicate the problem, but there are times that it just seems to be a big mystery.

I know logging and audit trails can help, but I have thought something more of an easy way to do it.

On every insert and update transactions, the DB table should have two columns: file_name and function_name

file_name: this means the transaction happened in this file. This helps when your repository is huge and there are multiple transactions in same table in other parts of the codebase

function_name: this drills down which part of file the transaction happened. Line numbers doesn't have to be saved since they are mostly changed as time progresses and codes change by the team.

So that's it, it has helped me in a particular "mystery" case. What do you think about it? Have you used this? Is this helpful? What are your debugging tips?

Cheers!
FM

Contact Form and Send as Email with AWS SES, Netlify and Gatsby

Faith Morante — Tue, 25 Feb 2020 11:45:06 +0000

This tutorial assumes you have Netlify, Gatsby and AWS SES set up. SES stands for Simple Email Service.

In the page you want to create a contact form, code your UI components like so:

import React, { useState } from 'react'
import { Button, Form, Input } from 'reactstrap'
import axios from 'axios'

export default function Index() {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [message, setMessage] = useState('')

    const send = (e) => {
        e.preventDefault()

        axios.post('/.netlify/functions/ses-send-email', {
            name,
            email,
            message
        }).then((res) => {
            console.log(res)
        })
    }

    return (
        <div>
                <Form onSubmit={(e) => send(e)}>
                    Name
                    <Input type="text" required onChange={(e) => setName(e.target.value)} />
                    Email
                    <Input type="email" required onChange={(e) => setEmail(e.target.value)} />
                    Message
                    <Input type="textarea" required onChange={(e) => setMessage(e.target.value)}/>
                    <Button>Send Message</Button>
                </Form>
        </div>
    )
}

Use axios for calling your Netlify function.

In your root dir, create a file named netlify.toml with these inside:

[build]
    functions = "./functions"

Now create a folder and file accordingly

Your sending email function should look like this:

exports.handler = async event => {
  const AWS = require("aws-sdk")

  let requestParams = JSON.parse(event.body)
  let name = requestParams.name
  let email = requestParams.email
  let message = requestParams.message

    AWS.config.update({
        accessKeyId: 'your-aws-access-key-here',
        secretAccessKey: 'your-secret-access-key-here',
        region: 'aws-region-here'
    })

    const ses = new AWS.SES({ apiVersion: "2010-12-01" })
    const params = {
      Destination: {
        ToAddresses: [email] // Email address/addresses that you want to send your email
      },
    //   ConfigurationSetName: <<ConfigurationSetName>>,
      Message: {
        Body: {
          Html: {
            // HTML Format of the email
            Charset: "UTF-8",
            Data:
              `<html>
                  <body>
                    From: ${name}
                    <br />
                    Message: ${message}
                  </body>
              </html>`
          },
          Text: {
            Charset: "UTF-8",
            Data: ""
          }
        },
        Subject: {
          Charset: "UTF-8",
          Data: "From Contact Form"
        }
      },
      Source: email
    }

    return ses.sendEmail(params).promise().then(data => {
        console.log("email submitted to SES", data);
        return {
          statusCode: 200,
          body: `Message sent`,
        }
      })
      .catch(error => {
        console.log(error);
        return {
          statusCode: 500,
          body: `Message unsuccesfully sent, error: ${error}`,
        }
    })
}

And there you go, publish to Netlify or use netlify dev to replicate sending emails on your local machine.

Netlify CMS using Gitlab backend and Gatsby

Faith Morante — Sat, 07 Dec 2019 02:29:46 +0000

I have done Netlify CMS with Github before using Git-Gateway, but when I tried it with Gitlab, it doesn't seem to work; and when you hit a blocker, you gotta try another way. So this time I tried Gitlab backend.

NOTE: To continue with this tutorial, you should have a Gatsby project hosted in Netlify.

How to create a Gatsby site

Netlify CMS with Github

Once you have your Gatsby site hosted in Netlify.

1) Enable Identity in your Netlify dashboard
2) Under Identity Settings, choose Gitlab as your External Provider

3) Follow the first two steps here
Gitlab implicit auth
4) Create a folder in your repo in root.

5) Your config.yml should look something like this:

backend:
  name: gitlab
  repo:  # Path to your GitLab repository
  auth_type: implicit # Required for implicit grant
  app_id: # Application ID from your GitLab settings

media_folder: static/assets
public_folder: assets

collections:
  - name: events
    label: Events
    folder: events
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: thumbnail, label: Thumbnail, widget: image }
      - { name: tags, label: Tags, widget: list }
      - { name: body, label: Body, widget: markdown }

6) So I have an Events collection with markdown files in it. That will serve as the content under my Events. For that to work, you should have an events folder with a sample markdown file inside.
7) Also npm install/ yarn add this gatsby-transformer-remark
8) In your gatsby-config.js, add this:

`gatsby-transformer-remark`,
{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `events`,
        path: `${__dirname}/events/`,
    },
},

9) In your gatsby-node.js, add this:

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
    const { createNodeField } = boundActionCreators
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode, basePath: `pages` })
        createNodeField({
            node,
            name: `slug`,
            value: slug,
        })
    }
};

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
      query {
        allMarkdownRemark {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        title
                        path
                    }
                }
            }
        }
      }
    `)
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: path.resolve(`./src/templates/post.js`),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
        //   slug: node.fields.slug,
        },
      })
    })
}

What this does is creating pages from each markdown in your events folder.

10) In your src/templates/post.js file, add this:

import React from "react";
import { graphql } from 'gatsby'

export default ({ data }) => {
    const post = data.markdownRemark

    return (
        <div>
            <div className="content blog-content">
                <h1>{post.frontmatter.title}</h1>
                <div dangerouslySetInnerHTML={{ __html: post.html }} />
            </div>
        </div>
    );
};

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

When you go to your {domain}.netlify.com/admin/ and sign in, you should see something like this:

Cheers,
FM

Display Shopify Collections in your Gatsby Ecommerce Site

Faith Morante — Tue, 26 Nov 2019 11:20:33 +0000

GatsbyJS is used for JAMstack websites. You can create blogs and in this case, you can create ecommerce sites along with Shopify API.

You need to go through this to setup your Shopify account:
Ecommerce site with Gatsby and Shopify

I'm assuming that you have configured your gatsby-config.js for the gatsby-source-shopify plugin

Collections are equivalent to categories in Shopify. If you have followed the tutorial in the link I gave above, you will be able to list all products. What about displaying Collections?

So in your gatsby-node.js

const collections = await graphql(`
    query {
      allShopifyCollection (sort: { fields: [title] }) {
        edges {
          node {
            id
            title
            handle
            products {
              title
              images {
                originalSrc
              }
              shopifyId
              handle
              description
              availableForSale
              priceRange {
                maxVariantPrice {
                  amount
                }
                minVariantPrice {
                  amount
                }
              }
            }
          }
        }
      }
    }
  `)

  collections.data.allShopifyCollection.edges.forEach(({ node }) => {
    createPage({
      path: `/collection/${node.handle}`,
      component: path.resolve(`./src/components/Collection.js`),
      context: {
        collection: node,
        productCount: node.products.length
      },
    })
})

We are going to create pages like /collection/men for Men collections.

context: {
        collection: node,
        productCount: node.products.length
      },

Here we are passing node from graphql as collection variable and productCount from counting the products by node.products.length.

Now create your Collection component, could be Collection.js

const Collection = ({ pageContext }) => {
  const { collection, productCount } = pageContext


  ....


  return (
    { collection.products.map((product) => (
      <div key={product.shopifyId} className="col-md-4">
        <div className="card card-product-grid">
          <div className="img-wrap">
            <img src={product.images[0].originalSrc} alt={product.handle} />
          </div>
          <a href="#" className="title">{product.title}</a>
          <div className="price-wrap mt-2">
            <span className="price">${product.priceRange.minVariantPrice.amount}</span>
          </div>
        </div>
      </div>
    ))}
  )

Now you can access this collection if you have a link to it, like this:

{
   allShopifyCollection.edges.map((d, i) => 
        <DropdownItem key={i}>
            <Link to={`/collection/${d.node.handle}`} className="nav-link">{d.node.title}</Link>
        </DropdownItem>
    )
}

Hope it's helpful!

Cheers,

Weekly Retro #1 - Python, React, Express, etc

Faith Morante — Sun, 24 Nov 2019 12:28:24 +0000

I like the idea of looking back, digesting what you have learned and sharing it to people who will be able to relate to it.

I learned a lot of things this week.

1) Python - List Comprehensions

I'm a new learner of Python and so far I'm enjoying it. I'm subscribed to Trey Hunner and Python Morsels. Check it out!

So there a syntax in python for shortcuts of for loops and even nested loops, which I still find confusing, still need to get used to it. It's called list comprehensions.

So this:

doubled_odds = []
for n in numbers:
    if n % 2 == 1:
        doubled_odds.append(n * 2)

Can be translated to:

doubled_odds = [n * 2 for n in numbers if n % 2 == 1]

2) React and Express with uploading files to Google Cloud Storage

I have done uploading to AWS using AWS Amplify. So now I had a task to use GCP instead. You can check my post here about that: https://dev.to/idiglove/file-upload-with-react-express-and-google-cloud-storage-with-folder-structure-2i5j

3) Amazon coding challenges

I didn't do a good job with that. I really need to practice more.

Here's a list of some possible questions that they will ask.

https://leetcode.com/discuss/interview-question/344650/Amazon-Online-Assessment-Questions

Cheers,
FM

Custom dropdowns with React

Faith Morante — Sun, 24 Nov 2019 11:59:38 +0000

Ok if you followed my last post:
https://dev.to/idiglove/create-custom-components-from-json-with-react-1oeb

I showed there how to create custom components from a json file with React.
How about dropdowns where you need to store its values and each dropdown has its own toggle (if you're using a library like Reactstrap)?

Here's how I did it:

const [dropdowns, setDropdowns] = useState({})
const [savedDropdowns, setSavedDropdowns] = useState({})

const toggleDropdown = (i) => {
    setDropdowns({...dropdowns, [i]: !dropdowns[i]})
}

const onChangeDropdown = (value, id) => {
    setSavedDropdowns({...savedDropdowns, [id]: value})
}

Inside your function where you render your custom components:

<Dropdown 
   isOpen={dropdowns[id]} toggle={() => toggleDropdown(id)}
    >
        <DropdownToggle caret>
            {id}
        </DropdownToggle>
        <DropdownMenu>
            {options.map((o, oi) => {
                return <DropdownItem key={oi} value={o.value}
onClick={() => onChangeDropdown(o.value, id)}>{o.name}</DropdownItem>
            })}
        </DropdownMenu>
</Dropdown>

Hope you get something out of this.

Cheers,
FM