Forem: Phong Duong

Create gradient text

Phong Duong — Fri, 25 Dec 2020 13:41:57 +0000

You can create text with a single color or combine multiple colors to create gradient text with CSS. In this tutorial, I will show you how to create gradient text using background-clip CSS property.

background-clip sets an element's background extends underneath its border box, padding box, content box or within the foreground text. You will use text value for this property in this tutorial.

You create a paragraph first.

p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The paragraph needs a background with a gradient color. You set the background-clip property to text value. It is the main point of this tutorial.

p {
  background-image: repeating-linear-gradient(#01fd69 2rem, tomato 3rem);
  background-clip: text;
}

You won't see the color of the text changes because you only set the background and the paragraph is still using the default color. To change it, you set the color of the paragraph to transparent value.

p {
    background-image: repeating-linear-gradient(#01fd69 2rem, tomato 3rem);
    background-clip: text;
    color: transparent;
}

Now you can see the text with two colors: green and tomato. There is an interesting thing that you can create gradient text for a specific element of the text like the first line or the first letter with CSS pseudo-element

To create gradient text for the first line of the text you change the CSS code above

p::first-line {

}

For the first letter

p::first-letter {

}

This is full code of the project. I create three paragraphs for three examples.

Custom link underline with CSS box-shadow

Phong Duong — Wed, 16 Dec 2020 07:29:16 +0000

When you create a website, you can customize the text color with color property. It will change the color of your text as well as the link underline color. But what if you want to set the link underline a different color from the text's color? There are various ways to do that. In this tutorial, I will show you how to use box-shadow property to customize the link underline.

To start, you create an anchor element.

a(href="/") This is a link

In CSS, you disable the text-decoration property with none value. The reason we set the text color black is that it won't change after the link is activated. You use tomato color for the underline. We need to create space between the text and the underline. We set the padding of the link 4px.

a {
    text-decoration: none;
    color: black;
    padding: 4px;
    box-shadow: 0 3px tomato;
}

You can see that your link underline has a new color. But it doesn't give the user any feedback when they hover over the link. We will make it responds to when the user interacts with the link.

a {
    text-decoration: none;
    color: black;
    padding: 4px;
    box-shadow: 0 3px tomato;

    &:hover {
        background: tomato;
        color: white;
        box-shadow: 0px 10px 10px 0px gray;
    }
}

The link will be white with tomato background. It also had a gray shadow under when you hover the link. But it's quite lagging. To make it smoother, we will use transition property.

a {
  transition: background 0.1s, box-shadow 0.3s, color 0.1s;
}

The text color and the background will change in 0.1s while the box-shadow is in 0.3s. It is smoother now. You can change the transition duration to any value you want.

Full code

caret-color CSS property

Phong Duong — Fri, 11 Dec 2020 15:11:53 +0000

Caret is a cursor in the input, textarea elements. It shows where the next typed character will be inserted. caret-color property sets the color of the caret. It can also be used for the elements with contenteditable attribute. The default value of this attribute is auto. It will take currentcolor and usually black.

input

input {
    color: red;
}

When you type the text in the input, the text color is red. caret-color will take the value of color property.

textarea(rows="5")

textarea {
    caret-color: transparent;
}

caret-color can take transparent value but it is hard to see where the cursor is especially when you are inserting in between the text.

p(contenteditable="true") Please click this text and edit it

p[contenteditable="true"] {
    background: black;
    color: yellowgreen;
    caret-color: tomato;
}

Although caret-color takes the value of color property by default, you can set a different value to ensure good visibility.

Here is the full example

Motivate myself everyday

Phong Duong — Fri, 04 Dec 2020 12:29:44 +0000

Every day I get up, I find it hard to keep up the momentum. Things don't happen as I expected. When I publish a piece of content, I expect many people would consume it. But it doesn't. Although it's fun to create content and express my creativity, I'm sometimes frustrated because it doesn't get any engagement.

I have to motivate myself to keep going. I have watched an anime series recently. It's Run with the Wind. The series is about a group of 10 college students who are trying to take part in a marathon contest. They don't have any experience in running and have to run 5km in 16 minutes to meet the qualification. After all, they meet the qualification and take part in the contest. They get in the top 10.

There are many inspiring quotes in the series. I rewatch it 3 times and will watch one more time. These quotes help to motivate me. I find myself in the series. I am doing what I like and happy with it. But I can't be happy all the time. My process is not always linear.

To motivate myself, I choose to consume other creator's content. I read blogs and books, watch videos and anime. While consuming content, I can have new ideas for my content. It also inspires me to keep going because if they can, me too.

Perfection is a process, not the result

Phong Duong — Thu, 03 Dec 2020 04:33:24 +0000

For me, perfection is that I don't want to have any errors in what I do. It's hard and exhausted to keep everything perfect. When I publish a piece of content, I want it to be perfect. But I always feel something was wrong and afraid someone would point out the error. After all, I just make a little modification and leave it behind because it's wasting time.

I have so much content I want to create. I don't want to stick with a piece of content for too long. When I start creating another piece of content, I try to avoid previous mistakes. I also try something new in it. The joy of creating content is you can try something new and see if it works.

This is the issue that makes me hesitate to create content. I want my content to be useful to my audiences. I also want to create as much content as possible. After trying some ways, I think I should prioritize the quantity rather than quality. Because I can improve my content by creating more.

Now, perfection for me is not the result of a piece of content. It's a process in which I try, modify, and improve pieces by pieces. If I satisfy with a blog post or video, I just publish it and create another. When I find a mistake, I will fix it.

Custom outline style with CSS

Phong Duong — Fri, 27 Nov 2020 03:40:25 +0000

You can custom the outline of the component when you focus on it. CSS allows you to custom these properties:

outline-color
outline-style
outline-width

The order of these properties doesn't matter. You can use just one, two, or all three of them.

For example:

button {
  background: tomato;
  color: white;
  border: none;
}

button:focus {
  outline: blue dotted 5px;
}

When you click the button, you will see the blue dotted outline around the button.

The outline doesn't take up space. It won't affect the layout when it shows up.

Tips for creating content

Phong Duong — Thu, 26 Nov 2020 11:05:54 +0000

Creating content is the best way to build your online presence, share knowledge, and promote your product. There are many formats of content: videos, blog posts, images, stories, streams, you name it.

When I started creating content, I usually asked myself what format I should create and what type of content people would like. I kept asking myself and didn't create anything.

But it had changed when I watched this video. Gary's idea was so brilliant: you document your life. You do what you like and share it with the world instead of creating something new from the void. I liked this idea so much.

It's been 4 months since I started creating content. In this post, I am going to share some tips I use to create content on some popular platforms. I write blogs, make videos on Youtube, stream on Twitch, and publish a weekly newsletter.

You are a unique piece of content

Your knowledge, experience, and thought are also unique pieces of content. They are valuable to someone out there. They can help people around you. You can create notes of what you are learning and doing. This is also a good way to learn and build in public. Communities like #100DaysOfCode, Dev.to, and Indie Hackers are the best places to share your progress. If you are reading a useful blog post or watching an interesting video, please share it with people. If it can help you, it also helps people.

Bundle and unbundle

Creating content is like playing Lego. You can assemble small pieces into a big piece. You can also break the big piece into small pieces. When you make notes, you can turn them into a blog post later. You can also take quotes from a blog and post it to platforms. I think this is the most amazing aspect of creating content.

Consume other's content

If you want to create more content, you should consume more content. The process is continuous. You can have new ideas for your content from what you consumed. If you give the creator a compliment, it is also counted as a piece of content. You can create a newsletter by bundling all the content you consumed in the week.

There is no right or wrong answer

There is no one size fits all tip in creating content. That's the truth. My tips work for me but may not work for you. Because you have your own content that's you feel comfortable to create and share. You shouldn't blindly follow any advice or tips you receive. This is when the last tip comes into play.

Your creativity

The only way to know what content works best for you is to keep consuming, creating, and trying. Don't be afraid of failure. You will find out your way.

The last tip

If people don't consume your content, that's fine. Don't get frustrated. At least they still see you. The most important thing is that you like what you create and enjoy it. That's enough.

Add the pagination on Gridsome site

Phong Duong — Fri, 20 Nov 2020 13:54:52 +0000

To add the pagination for the site, you use @paginate in your GraphQL query. The query will receive a $page: Int parameter. The default number of nodes per page is 25.

<page-query>
query ($page: Int) {
  allPost(page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    ...
  }
}
</page-query>

Gridsome provides a Pager component for pagination. You import the component from gridsome and place it in your template. It requires a page's info property. This property is an object that 2 properties: totalPages and currentPage. You can get these 2 properties from pageInfo of your query.

<template>
  <Layout>
    <Pager 
      :info="$page.allPost.pageInfo" 
      :showNavigation="false" 
      range="10"
      linkClass="pager-link"
     />
  </Layout>
</template>

<script>
import { Pager } from 'gridsome'

export default {
  components: {
    Pager
  }
}
</script>

<page-query>
query ($page: Int) {
  allPost(page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    ...
  }
}
</page-query>

You can also customize the Pager component's properties like show links and navigation, the number of links to show, or the custom class of links for styling.

When life gives you lemons, make lemonade and plant lemon trees

Phong Duong — Thu, 19 Nov 2020 06:53:17 +0000

Sometimes everything doesn't happen as you expected. You may get stuck in difficult situations. You may lose your job, your house, or your family. You would get hurt and frustrated but don't give up. But you can improve your situation and make it better.

More, you can make use of difficult situations as a source of growth. They will teach you invaluable lessons.

You can view every situation as a lemon and its seeds as lessons. When life gives you one lemon, you make lemonade. You improve the situation.

But what about its seeds? After you have the seeds, you can take them to plant new lemon trees. You will harvest your own lemons. This is when you apply your lessons in difficult situations in the future. You are going to know how to solve the problem and improve it.

The more trees you plant, the large your lemon garden is. You will learn more lessons and become a better person.

You don't need to be scared of difficult situations, just love and make use of them.

Get the current position of the cursor on the page

Phong Duong — Wed, 18 Nov 2020 14:41:58 +0000

To get the current position of the cursor on the page, you retrieve pageX and pageY property of the MouseEvent interface. These properties are the X and Y coordinates of the event on the document. They are in pixels and relative to the left and top edges of the document.

document.addEventListener("mousemove", ({ pageX, pageY }) => {
   console.log(pageX, pageY)
});

These positions can change if you scroll the page. For example: if you scroll the page down 800px and move the cursor to 200px from the top edge of the document, pageY returns 1000.

Embed social media in Gridsome site with remark plugin

Phong Duong — Thu, 12 Nov 2020 07:08:37 +0000

When you write your blog, you may want to embed your social media like a tweet, a Facebook post, a Codepen pen, or a Youtube video. They not only make your post more understandable but reduce the needed work especially you write programming tutorials.

But Gridsome's transformer plugin doesn't transform social media links into the embed code. When you paste your link into the Markdown file, it will stay still and be transformed into a paragraph instead of an embed code.

In this tutorial, I will show you how to transform your social media links into the embed code with gridsome-plugin-remark-embed plugin. This plugin transforms popular providers embed like Youtube, Facebook, Codepen, Codesanbox, etc...

Installation

yarn add -D @noxify/gridsome-plugin-remark-embed

Set up

In the plugins configuration of Remark, you add the embed plugin

{
  remark: {
    [
      "@noxify/gridsome-plugin-remark-embed",
      {
        enabledProviders: ["Youtube", "Twitter", "Codepen"],
      },
    ];
  }
}

In this configuration, I enable Youtube, Twitter, and Codepen embed providers. I use the provider's default configuration.

Add the URL

When you add the URL to your Markdown file, make sure it is in a new paragraph. If you place it in the paragraph with text, the plugin can't transform the link.

Run the site

After setting up and adding the URL, you run your site and check the transformation. Different providers may be transformed in different ways. You can see the provider's configuration and customize it to suit your site.

References

Remark embed document

Check if a file exists with Nodejs

Phong Duong — Wed, 11 Nov 2020 13:49:42 +0000

If you need to check if a file exists without opening or modifying with Nodejs, you use fs.access() method.

const fs = require("fs")

fs.access("file.txt", (err) => { 
    console.log(err ? 'not exist' : 'exist');
  }
)

The callback's argument is an Error object if the check fails.