Introduction: a different north drifting programmer (working for 11 months young programmer), welcome to add wechat criticism and correction of communication technology or play together about dinner

My articles always have a preface, and this one is no exception

This article is dedicated to my fellow gold diggers, my comrades who have been working for a year, my predecessors, and myself who has been working for two years.

Hello everyone ~ I am cold grass, I am a graduate of nearly a year of front-end engineer, if you see my home page you can see that I am 2021-01-05 to join the dig, and publish the article above, I published the first article is “in-depth and simple vue.js” reading notes 1-Object change detection, although the quality of this article is general, But it was also when I started writing. Now I have many, many pits, such as these columns:

  • Front end chat computer basics
  • Cold grass babbles blind
  • The front panel
  • Browser rendering mechanism
  • Leetcode
  • Records of essays

After all, when people do a thing, they always have to set a goal first, and then everything is green and green. Of course, the same is true when I first started writing articles. For example, I set up such a flag:

  • The first 500 for stubbornness
  • Let’s focus on getting to 100 first

HHHH, look at me. I’m a loser

No matter what the goal is, the first step has been achieved, so this article can be used as both a focus on the 100th anniversary, but also as my nuggets mid year summary, the Nuggets released this activity a while ago, 2021 mid year summary, logitech mechanical keyboard and other beautiful prizes for you to win 🚩

But I’m not sure if my post will match up with the campaign, because I still have something else to talk about, like am I saving more of my summary for my birthday? After all, life needs a sense of ritual

I’d like to take a picture with you to commemorate this six-month journey

Cold grass (yes is myself ~) once said: memorial always want a souvenir

This article is intended for commemoration, but there is one problem:

Does a thing always need a souvenir?

Such as:

  • You must buy commemorative coins at the museum
  • You can’t travel without local specialties
  • Take all kinds of photos when you go to scenic spots

There is evidence, not ashamed is me ~

So, I want to commemorate, only by this article can not, but also make a souvenir!!

Half-year trip, souvenir group photo

I just want to think, think, think, how should I go to the memorial, I suddenly remembered a video, is he and his six million fans of the video. He has millions of followers and I have more than 100 like-minded followers. Given that order of magnitude, it’s almost impossible!! So IT occurred to me that I needed this souvenir:

  • The names of the 100 friends
  • Denver’s logo

So, actually, my thinking is very clear:

Make a word cloud of your name in the shape of a gold nuggets logo

Well, you might think this idea is cheesy and easy, but I think mementos, meaning comes first. Hence this word cloud:

If you are reading this, you can look for your own name

Here I show all my classmates who follow me, and I use our names to form a Nuggets logo, because I think it is the Nuggets that make us have a little bit of connection

There are actually a few names on this word cloud, not followers, but I’ve added them:

  • BBFE family
  • CodingCommunism
  • I’ve been working with you for the past year

The last one is very general, but LET me first talk about Codingbrotherhood, which is a Github group founded by me and a few friends. When we are free, we can make some small things, although there are not many things (or almost nothing), but people can pay attention to it, and maybe one day we can make a big thing. Codingbrotherhood github, manual dog head.

And BBFE, here you can have a look at the introduction of BBFE, ha ha ha, the so-called BBFE is the big Front End team I am in now, BBFE is also the acronym of “Be Better Front End”, here I met a lot of amazing, very interesting students ~

If you’re curious, I’ll just talk a little bit about the code implementation

Address of this commemorative demo project warehouse: take a photo with the friends of the gold diggers ~

No matter what the theme is, after all, we have to do the real person, although this thing is not difficult to do, I also simply share how to achieve ~

First, create a new project. This is a vue3/vite/ TS project. Vite provides many templates, so here we use vue-TS template to create a new vue3/ TS project

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

After that, our next step is to call the mining interface to get the follower information

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 in the callback interface found that limit is greater than 20 is of no effect, that is to say, a pull at most 20 followers information, so I wrote a loop, judge whether the data completely pull is complete, if there is no pull complete, so I continued to call interface scored 20 data (I’m sorry, before writing the code accidentally wrote an infinite loop, Here we have a problem with 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 // Set this property to true!}}}})Copy the code

Ok, so we have the data and it’s just a word cloud, and we use it hereecharts-wordcloudI went to the nuggets website to make an SVG of the Nuggets logo

After converting this image to Base64 format (I don’t know why, echarts word cloud image in SVG format)! Configure the word cloud image after the image is loaded

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

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

Associated with the image in the echarts word cloud map configuration is the maskImage attribute

maskImage:maskResource
Copy the code

Ok, so this souvenir is done ~ is not very easy to pinch ~

Memorial is for the better forward, I hope there are you on the road

Although not many people know me now, I will: continue to share what I have learned and experienced, continue to tread the waves with the mentality of a hot-blooded teenager… Finally, thanks for reading, may we all: love what you love, do what you do, follow your heart, no matter what, the second half of 2021 has begun, please join me: travel with a companion, grow together

The nuggets years | 2021 theme activities I grow half of the campaign is under way on the road…