Hello everyone, I am Han Cao 😈, a grass code ape 🐒 who has been working for one and a half years. If you like my article, you can follow ➕ and give a thumbs up. Please grow up with me

PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”

The New Year’s eve

This article is just released on New Year’s Eve, a special day. Now let’s invite Hancao to give you a performance:

Eldest brother sister-in-law Chinese New Year good 🌺 cold grass blessing to 🧧 is the New Year quit old year 🧨 like attention can not be less 👍 can not be less ~

I give you the performance of this section called “New Year’s song of praise”, hey hey, if you think the performance can also trouble to praise attention not lost, the following began the body.

In fact, this article is a continuation of my previous two articles:

  • Diary of a Madman at the beginning of the Year of the Ox

As I write this, I have only just started writing, and it is also the gibberish I uttered last New Year’s Eve

  • Pay attention to the 100th anniversary: dear friends, the LOGO of the Nuggets, please take a picture with me

This post is a memento of my first 100 nuggets followers

This New Year’s Eve I also carried on the integration to the content of these two articles, launched my “New Year’s speech” this year. This paper consists of three parts:

  • To open a year

Briefly said that this year’s imagination and prospects, I said that the opening of the year always think of “One Piece” the founding of the kingdom of Let and ☀️

  • With the stars

A gift to my nearly 900 Nuggets followers who are shining like stars ✨

  • I wish to

Simple message, but full of good wishes 🧧

To open a year

The New Year is coming, and as a young kid full of energy, I am certainly full of expectations, but my first wish is relatively grand (actually not much grand), there is a few difficult to achieve, that is:

Break the circle! See the picture below, is my B station and nuggets account ~

What I want is that Nuggets focuses on technology and experience sharing, and SITE B shows my personal characteristics as much as possible. Although I am not good at front-end technology and like all kinds of messing around, I still hope to share not only as a front-end engineer, but as:

A tech guy who loves life

That is, I want to share technology, life and myself. I also hope that more people like Hancao, so that we can grow up together and experience together. It must be very fulfilling ✨

Think about the blood boiling 🔥, but this desire I do not give myself to set up the number of fans of the target, after all, is not for the purpose of utilitarian, the most important is happy ~

Another wish is to travel. I really want to see more places:

  • nanjing
  • Xi ‘an
  • chengdu
  • chongqing
  • Shanghai
  • tianjin
  • Tibet
  • All kinds of mountain
  • All kinds of river

As a leisure not down of the wild child, I this year must have a good sahuager🌟

The last wish is to cure anxiety, just like my previous article “Cold grass presented” my shoulder is the wind, the wind is the twinkling stars ✨ | to face anxiety and the heart of 2021 said, I am actively fighting anxiety, although troubled, but I will win, although not necessarily 2022, but will be better and better. “This part I say a little less, after all, big New Year’s day, can’t say unhappy 🧨”

In fact, there will always be a lot of desire, such as technology to the next level, such as owning a lot of wealth, know more beauty… Well… , the last sentence when I did not say, we do not randomly guess screenshots to my group hair 💢

With the stars

All right, it’s time to dedicate the stars, shining little stars, yes, I’m talking about you, you who are reading this, you are one of the shining little stars 🌟.

Six or seven months ago, I posted a memento to mark the 100th anniversary of my gold-digging followers and made this word cloud:

After half a year, my number of followers reached nearly 900. Thanks for your support and love, SO I went to get a card:

I don’t know much about design, so I just follow my feelings and use Chinese knot to show the Elements of Chinese Spring Festival, with four characters of Tiger, Tiger and Wei, and the motto of Jilin University:

Realistic and innovative, inspirational

I also wish you a prosperous and successful Year of the Tiger, but I think it can’t be so simple, so I want to add some connotations to this card, such as:

The following year of the Tiger, we walked together ~

So, I want to write the name of each of us on this card, 895 followers plus my own cold grass, you can also look for their own name ~

Let’s implement this code together. The content is similar to my previous article: dear friends, the LOGO of the Nuggets, please take a picture with me.

This is a vue3/vite/ TS project, vite provides many templates, here we use vue3/ TS template to create a new project:

yarn create @vitejs/app my-vue-app --template vue-ts
Copy the code

After that, our next step is to call the interface of digging gold to obtain the information of followers:

const initFollowers = async() = > {let isEnd: boolean = false;
      let followers = [];
      let cursor = 0;
      while(! isEnd) {const res = await axios.get(
          `/user_api/v1/follow/followers? user_id=703340610597064&cursor=${cursor}&limit=${JUEJIN_LIMIT}`); isEnd = ! res.data.data.hasMore; cursor += JUEJIN_LIMIT; followers.push(... res.data.data.data); }return followers;
    };
Copy the code

Here, WHEN I was adjusting the interface, I found that limit greater than 20 was ineffective, that is to say, at most 20 followers were pulled at one time. So I wrote a loop to determine whether the data was completely pulled. If not, I continued to call the interface to pull down 20 pieces of data. Here we will encounter a problem that is cross-domain, so we need to go to the vite.config.ts file to do a configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  alias: {'/ @': path.resolve(__dirname, 'src')},server: {
    proxy: {
      '/user_api/v1': {
        target: 'https://api.juejin.cn/'.changeOrigin: true // This property is set to true!}}}})Copy the code

Ok, so we have the data is nothing more than the wordcloud, here and here using echarts-wordcloud, after the image load to configure the wordcloud ~

const initChart = (chartList:Array<any>) = > {
      const _chartContainer = echarts.init(containerDom.value as HTMLElement);
      const maskResource = new Image();
      maskResource.src = springImageUrl;
      maskResource.onload = function(){
        setChartOption(_chartContainer, maskResource, chartList);
      }
    }

onMounted(async() = > {const followers = await initFollowers();
  const _chartList = getChartsList(followers);
  initChart(_chartList);
});
Copy the code

The image associated with the echarts word cloud configuration is the maskImage property

maskImage:maskResource
Copy the code

But this was definitely not pretty, so I used the original image as the background of the word cloud and adjusted the opacity:

<template>
  <div class="background"></div>
  <div id="word-cloud__container" ref="containerDom"></div>
</template>
Copy the code
.background {
  position: absolute;
  height: 90vh;
  width: 60vw;
  top: 5vh;
  left:20vw;
  background-image: url('.. /assets/spring.png');
  background-size: 100% 100%;
  opacity: 0.8;
}
Copy the code

In this way, I want to achieve the effect of ~

I wish to

Finally, please accept the greetings of cold grass

✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

May the New Year:

Ahead, glory;

Behind, warm side.

Fireworks to the stars;

All wishes come true.

✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

Your likes and attention are my constant motivation, you can add my wechat: HancAO97, invite you to join the group, learn and communicate together, become a better front-end engineer ~