DEV Community: John Liu

How to Set Up Personal Portfolio Online (Free, No-Code)

John Liu — Fri, 14 Oct 2022 02:46:41 +0000

Introduction

If you want to set up a personal resume / portfolio online quickly, with little to no cost (depending if you want to use a custom domain), you can use Notion to do so. However, there's a difference to a plain old Notion page with bullets, to some additional tweaks to make it more professional. If this interests you, feel free to read on!

Prerequisite

Have a Notion account. If you don't have one, you can register it for free. Go here.

Step 1

Create a Notion page. Put in the necessary content. Here's some Notion specific tips to make it look more professional / nice-looking :)
- Make it easier to email you by adding subject and body defaults with the email pop up to mailto link. See CSS-Tricks for details from Chris Coyier.
- Add colored background for title (full page width, versus only the text. You can first /heading2 to get the header, and then in that same space do /blue or whatever color and you can select a colored background.
- Customize the Notion URL to be something specific to you. Go to Settings and change the domain.
- Configure the security and share settings for distribution. First, turn on Share to Web. Second, turn off the other features unless there is an explicit value-add. Note that if comments are allowed, the user would have to login, which may be an additional frustration that you don't want your audience to do (so, turn off comments).

Step 2

By now you can just share the notion raw URL, or you can customize a domain to point to the Notion page. We will use Google Domain service to do so (since my domain was hosted there).

Go to domains.google.com -> My Domains -> and select one domain to Manage -> Websites.

Then in the domain, put in the Notion address for traffic hitting your custom domain in Google to redirect to the Notion page. Note if you change the title of the Notion page, the link may be changed, and this redirect destination may need to change as well.

Conclusion

That's it! Happy job hunting and feel free to share your portfolio in the comments below!

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

John Liu — Thu, 13 Jan 2022 20:21:48 +0000

Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today.

Astronomy of the Day Gallery

In Part 1, we learned how to set up our development environment, and in Part 2, we learned how to customize the template for the Nasa Demo application. In this article, we will be going over the steps on how to deploy the application to the internet so your friends can see it too!

Bonus: Render hosting for the static site is free with less than 400 build hours per month. 😄

Register with Render Hosting Services
Deploy Application to Render

Register with Render Hosting Services

1. Sign up with Render

Go to onrender to register a new account with Render.

For this tutorial, I simply used my Github account to register with Render.

Deploy Application to Render

1. Sign in to Render

Come back to Render with your account, and you should see the dashboard.

2. Provide Github Repo

Click on the "New +" button on the top navigation bar and click on "Static Site" to create a new site.

You should see a field for your GitHub repository that contains the latest version of the Application. Copy the URL for the Github repository and paste it into this field in onrender.

3. Set Up Render Workflow

Enter the following:

Name: nasa-demo-devto
Branch: gallery
Build Command: yarn build
Publish directory: dist

Open up the Advanced toggle to add environment variable.

Name: VUE_APP_API_KEY
Value: <insert_NASA_API_key_here>

See Part 1 to find out how to get the NASA API key.

Finally click on "Create Static Site" button at the end of the form!

4. Go to Your Live Site!

The build should be successful.

Your live site should look something like this one here. 😄

Article Series

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)

John Liu — Thu, 13 Jan 2022 20:21:47 +0000

Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today.

Astronomy of the Day Gallery

If you haven't read Part 1 yet, feel free to go back there first to get the starter template Vue app that we will continue to build upon for Part 2 and 3.

Build the Components
Wire up the Components

Build The Components

1. public/index.html

No change from the default Vue template app.

The code in index.html should look like the code below.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2. src/main.js

Again no change here.

The code in main.js should look like this.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

3. src/views/Gallery.vue

Delete the Home.vue and About.vue files, since we will not be using those views.

Create Gallery.vue under the src/views/ directory.

Gallery is the view that glues the APODCard.vue components together with the NASAServices.js that you will see in the next few steps.

Gallery code below.

<template>
  <div class="gallery">
    <APODCard v-for="apod in APOD" :key="apod.url" :apod="apod" />
  </div>
</template>

<script>
// @ is an alias to /src
import APODCard from "@/components/APODCard.vue";
import NasaServices from "@/services/NasaServices.js";

export default {
  name: "Gallery",
  components: {
    APODCard,
  },
  data() {
    return {
      APOD: [],
    };
  },
  created() {
    NasaServices.getAPODList()
      .then((response) => {
        this.APOD = response.data;
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style scoped>
.gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

4. src/components/APODCard.vue

Delete the HelloWorld.vue file under the /src/components/ directory.

Create APODCard.vue file in the /src/components/ directory and paste the code below.

<template>
  <router-link
    :date="apod.date"
    :to="{ name: 'APODDetails', params: { date: apod.date } }"
  >
    <div class="card">
      <h2>{{ apod.title }}</h2>
      <img v-if="isImg()" :src="apod.url" :alt="apod.title" />
      <iframe v-else allowfullscreen :src="apod.url" :alt="apod.title"></iframe>
    </div>
  </router-link>
</template>

<script>
export default {
  name: "APODCard",
  props: {
    apod: {
      type: Object,
      required: true,
    },
  },
  methods: {
    isImg() {
      const regex = new RegExp("/image/");
      // console.log(this.apod.url);
      // console.log("regex.test(this.apod.url)" + regex.test(this.apod.url));
      if (!regex.test(this.apod.url)) {
        return false;
      }
      return true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
iframe {
  width: 20rem;
  height: 20rem;
}
img {
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}
.card {
  padding: 20px;
  width: 20rem;
  cursor: pointer;
  border: 1px solid #39495c;
  margin-bottom: 18px;
}

.card:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
}

.card-link {
  color: #2c3e50;
  text-decoration: none;
}
</style>

There are three important items to note here related to the APODCard component.

First, each APOD card loaded in Gallery is an instance of the APODCard.vue component.

Second, there is an if-else condition in the template to render different HTML depending on whether the returned apod.url is an image or a video.

The APODCard component will call the function isImg() function to return a boolean value, namely, "Is this an image or a video?" Since the NASA API will sometimes return video versus an image, we need to use this boolean to determine the correct html to display the returned data from the NASA API. Specifically, we need to make sure if the data is a video, we need to embed it in an iframe to avoid a cross origin reading block error.

     <img v-if="isImg()" :src="apod.url" :alt="apod.title" />
     <iframe v-else allowfullscreen :src="apod.url" :alt="apod.title"></iframe>

Third, there is a regex logic embedded in the isImg() function to parse the URL to return the boolean of whether this url leads to an image or a video. If the apod.url has an "/image/" text in there, return true for image. Otherwise if "/image/" is not found in the apod.url, then return false to indicate video. Note we are using the standard Regex library in the JavaScript library.

isImg() {
      const regex = new RegExp("/image/");
      console.log(this.apod.url);
      console.log("regex.test(this.apod.url)" + regex.test(this.apod.url));
      if (!regex.test(this.apod.url)) {
        return false;
      }
      return true;
    },

5. src/services/NasaServices.js

Perform a quick install of the axios and luxon library in the terminal inside of the project folder.

npm i axios
npm i luxon

Create a new services folder, like so /src/services/.

In the services directory, create a file called NasaServices.js and paste the following code in there.

import axios from "axios";
import { DateTime } from "luxon";

function getDate(offset) {
  let now = DateTime.now().minus({ days: offset });
  let dd = String(now.day).padStart(2, "0");
  let mm = String(now.month).padStart(2, "0");
  let yyyy = now.year;
  console.log("getDate(): " + `${yyyy}-${mm}-${dd}`);
  return `${yyyy}-${mm}-${dd}`;
}

let startDate = getDate(5);
let endDate = getDate(0);

export default {
  getAPOD(today) {
    return axios.get("https://api.nasa.gov/planetary/apod", {
      params: {
        api_key: process.env.VUE_APP_API_KEY,
        date: today,
      },
    });
  },
  getAPODList() {
    return axios.get("https://api.nasa.gov/planetary/apod", {
      params: {
        api_key: process.env.VUE_APP_API_KEY,
        start_date: startDate,
        end_date: endDate,
      },
    });
  },
};

Here we come upon the core logic of this Vue application. This is where we interface with the NASA API and get our raw data.

First of all, we use the axios library for calling the NASA API with a GET request. In other words, we are sending a read-only request to the NASA API to get raw data from their database.

To clarify, NasaServices.js is invoked from the Gallery view to get data. By itself, it will not get the data. It needs to be called from somewhere else to do so! 🖊️ Hint: Can you find getAPODList() in Gallery.vue in the earlier steps?

Second, the way the request is sent to the NASA API is through two parameters startDate and endDate. The two parameters are calculated values from the getDate() function that gets the local date on the server that is hosting your website, or your local computer (if you are running it locally). We use the luxon library to help do the math to identify the date (mm-dd-yyyy) that is 5 days (startDate) from today (endDate). Otherwise, this Vue application would have to be much larger to accommodate all the edge cases with dates! (And we don't want to reinvent the wheel 😏.)

Third, the getAPOD() method will require an input for today's date. Here we use the apod.date (this refers to the apod object) as an input to find the details of that card. Note, in the Gallery view, the Vue application loops through the array of days retrieved from the NASA API (i.e., total 5 days); each day will get an APODCard component. Each APODCard component will in turn take the date of that day to provide to the getAPOD() method to get the details for that day to fill in the APODCard component display.

Fourth, the request also uses an API secret key to communicate with the NASA API. Remember the prerequisites in Part 1 that ask you to get a personal NASA API key? If you want to get along quickly, you can use DEMO_KEY as the API key, but beware there is a limited number of times you can call it with the DEMO_KEY.

🖊️ Tip: For security reasons the API key should be stored in a separate file .env under the root directory of your project with the format like so.

VUE_APP_API_KEY = your_api_key_from_nasa

Make sure that .env is in the .gitignore file so you don't upload your secret key to Github by accident! It is simply adding '.env' in the file like so.

# local env files
.env

6. src/views/APODDetails.vue

Under the /src/views/ directory, create APODDetails.vue file, and paste the code below in the file.

This will be the details when the user clicks on one of the APODCard components in the Gallery view. They will be redirected by the Vue Router to come to the details for that specific APODCard date.

<template>
  <div class="details__wrapper" v-if="apod">
    <div class="details">
      <h1>{{ apod.title }}</h1>
      <p>{{ apod.date }}</p>
      <img v-if="isImg()" :src="apod.url" :alt="apod.title" />
      <iframe v-else allowfullscreen :src="apod.url" :alt="apod.title"></iframe>
      <p>{{ apod.explanation }}</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NasaServices from "@/services/NasaServices.js";

export default {
  name: "APODDetails",
  props: {
    date: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      apod: {},
    };
  },
  created() {
    NasaServices.getAPOD(this.date)
      .then((response) => {
        this.apod = response.data;
      })
      .catch((error) => console.log(error));
  },
  methods: {
    isImg() {
      const regex = new RegExp("/image/");
      console.log(this.apod.url);
      console.log("regex.test(this.apod.url)" + regex.test(this.apod.url));
      if (!regex.test(this.apod.url)) {
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
iframe {
  width: 30rem;
  height: 30rem;
}
img {
  width: 30rem;
  height: 30rem;
  object-fit: cover;
}
.details__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.details {
  max-width: 40rem;
}
</style>

Wire Up the Components

1. src/App.vue

Now it's time to wire up the components with the Vue application.

In src/App.vue, delete the original code, and paste the code below instead.

This tells the Vue application to load Gallery when the user does not type into any subdirectory for the url of the application.

<template>
  <h1>Astronomy Photo of the Day (APOD)</h1>
  <div id="nav">
    <router-link to="/">Gallery</router-link>
  </div>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

2. src/router/index.js

Next, we can go to the router configuration.

Overlay the existing code with the code below in the src/router/index.js file. We're showing where the Gallery and the APODDetails views can be found by the Vue application to load into user browser.

import { createRouter, createWebHistory } from "vue-router";
import Gallery from "../views/Gallery.vue";
import APODDetails from "@/views/APODDetails.vue";

const routes = [
  {
    path: "/",
    name: "Gallery",
    component: Gallery,
  },
  {
    path: "/apod/:date",
    name: "APODDetails",
    props: true,
    component: APODDetails,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Congratulations on making it this far! You can type npm run serve in your local terminal to see what the application looks like now on your computer (see video below).

In the next article in Part 3, we will review on how to deploy this application to the interwebs so everyone can access it online!

Article Series

Click on Part 3 to deploy the application on the internet!

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)

John Liu — Thu, 13 Jan 2022 20:21:44 +0000

Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today.

Astronomy of the Day Gallery

This website is powered by Vue.js (Vue 3) and a fun API provided by NASA. When you call the NASA API, it will return a beautiful picture of our universe, with some additional information like title and description (...and copyright - always acknowledge the source 🙄).

OK, so let's get right into it!

Prerequisites
Set Up

Prerequisites

Say to yourself, "you can do it!" 3x
Pet a dog when you see one (or cat, or small human).
Install VS Code (or any code editor of choice). And here's a really nice detail on how to set up VS Code for Vue JS development.
Install NPM
Install Vue CLI (Note: In order to use the CLI, you’ll need to have Node.js version 8.9 or above.)
Get NASA API Key. It's free!
Optional: Get a GitHub account so you can use the Github account code repository (aka 'repo') later to host your website online if you choose to do so.

Note: If you want to go straight to coding the Vue app, you can skip the rest of Part 1 (Set Up section below). But before you move on to Part 2, first clone the starter template repo to your local computer (git command below) and use the main branch.

git clone https://github.com/stoic-llama/nasa-demo-devto.git

Set Up

Create vanilla vue app from your terminal with Vue CLI. Type vue create nasa-demo-devto in the terminal and click enter.
```
vue create nasa-demo-devto
```
Follow the wizard of the Vue CLI and provide the following answers to finish the set up of the vanilla vue app.
a. Select Manually select features
b. Select Router
c. Select 3.x
d. Type in y
e. Select ESLint + Prettier
f. Select Lint on save
g. Select In package.json
h. Select n

The final configuration responses from you should be like so below.
Once you let the Vue CLI create the template vanilla vue app, you should get a success message like this. (Note the emojis 😄.)

🖊️ Tip: Somewhere in the installation process the Vue CLI may ask for you to create node_modules folder. Click yes.
Now in your terminal type
```
npm run serve
```
and it should start up the vue app!
Optional: Push your source code to Github. You can use this repository on Github later for hosting a website for your app.
a. Create a repo under your Github account and call it nasa-demo-devto.
b. Type in the follow Git commands to push your local files up to Github repository online. (You may have noticed that I added an initial commit. This was done so I could include the .gitignore file that was added as part of the set up process in prior steps.)
```
git remote add origin https://github.com/<_your_Github_account_name_>/nasa-demo-devto.git
git branch -M main
git add . 
git commit -m "Initial Setup"
git push -u origin main
```
c. Finally you should be able to see the success message that your code was pushed to Github.

Article Series

Click on Part 2 to start coding the application!

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

React Render Props

John Liu — Thu, 16 Dec 2021 21:52:17 +0000

When you are building your pet React project, sometimes you may want to reuse a component across other components to follow the DRY principle. This is where the render props pattern may shine.

According to the React documentation, render props is "a technique for sharing code between React components using a prop whose value is a function."

Let's use an example to break down this definition. We have a simple React application that will display two sassy comments depending on the random number that is provided to it. If the random number is greater than zero, then display "Whoa, Big Guy!". If random number is less than or equal to zero, then display "Nah, less than one, Nice Try!".

function App() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}


function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

If you want to play along, you can access the code in codepen.

Here we see that we have one component <App /> that contains a child component <RandomNumber />.

The child component <RandomNumber /> will manage the state of the random number, but it will not care whether <App /> is rendering the display of it or another parent component.
The parent component <App /> will manage the display of the random number and the corresponding message. It will however not maintain the state of the random number.

Now, what if we have to share the <RandomNumber /> component across three parent components? Let's see what it looks like below.

function App() {
    return (
      <>
        <ParentOne />
        <ParentTwo />
        <ParentThree />
      </>
    )
}

function ParentOne() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentTwo() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentThree() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

If you want to play along, you can access the code in codepen.

This is essentially the same code as the first one above. However, now we have three parents. Notice <RandomNumber /> child component did not have to change to accommodate each parent. It simply maintains a random number for each parent component. Each parent component, in turn, manages the rendering of the JSX separately and independent of each other.

Caveat: This is my personal notes on learning React. If you see any mistakes, would appreciate pointing it out. Thank you!

Date Created: December 16, 2021

DEV Community: John Liu

How to Set Up Personal Portfolio Online (Free, No-Code)

Introduction

Prerequisite

Step 1

Step 2

Conclusion

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

Project Debriefing

Table of Contents

Register with Render Hosting Services

1. Sign up with Render

Deploy Application to Render

1. Sign in to Render

2. Provide Github Repo

3. Set Up Render Workflow

4. Go to Your Live Site!

Article Series

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)

Project Debriefing

Table of Contents

Build The Components

1. public/index.html

2. src/main.js

3. src/views/Gallery.vue

4. src/components/APODCard.vue

5. src/services/NasaServices.js

6. src/views/APODDetails.vue

Wire Up the Components

1. src/App.vue

2. src/router/index.js

Article Series

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)

Project Debriefing

Table of Contents

Prerequisites

Set Up

Article Series

React Render Props