Hello everyone, I am cold grass 😈, a grass system code ape 🐒. Intermittent hot blood 🔥, continuous sand carving 🌟. If you like my article, you can follow ➕ to like, and grow with me ~

A prelude to 🎵

Summary of the article

For this article, you can:

• Design a birthday gift with me 🎁
• Complete the development of birthday gift 🎁 hand in hand with me
• My birthday 🎂 is coming

I hope you can read this article and experience:

• Fun on the front end
• The BASICS of CSS used to make this gift
• Get some experience or insight from my feelings

Of course, my birthday 🎂 is coming, so this article is looking forward to your birthday wishes, ha ha ha, please give me a sense of the birthday ceremony ~

Cause: I need a birthday surprise!

If you know me, I’m a programmer who likes to make some surprises with technology.

August 7 is my solar calendar birthday, no girlfriend I also want to birthday surprise 😭, but also want a sense of ceremony ah, so I have to use front-end technology to make a birthday gift 🎁 plan, is the so-called, no one gives you a surprise, you also have to learn to give yourself a surprise.

Of course, the birthday gift 🎁 I had already developed, so this article was born.

I once said that I do the front end because of the process of learning the front end, the front end has given me a very pure happiness and sense of achievement, although the front end after the work more edge became a guy to eat 🍚. I believe that there are many people who share the same idea with me (at least a few of my classmates have the same starting point as me), so I hope I can use my efforts to make more people find front-end is an interesting thing 🌹, we can use this technology to realize some of our own ideas ~

Prelude: How do I design a birthday present?

At the beginning, I was also very confused, what elements should my birthday gift have, so I had to interrogate myself, what things DO I like, and think for a long time. I have the answer to what I need for my birthday gift:

• The fireworks
• The starry sky
• The words “Happy birthday”
• Looking up at the stars

The fireworks 🎆

I think most people would like fireworks, you imagine whether animation or movie, boys and girls go hand in hand to the river, or the sea, blowing wind, summer with a burst of sound, the fireworks in the sky, the girl looked at the fireworks into the god, the boy looked at the girl out of the god, the rainbow light mapping in girls’ eyes, much like their splendid future, How romantic. Oh, I don’t have a girlfriend, why am I showing off myself… Forget it, vuvuvur, we understand the mood is good.

The stars ✨

In fact, I have always had a complex for the starry sky, when I listened to adults, when they were young, often can see the stars all over the sky, and I have not seen such a scene, looked up, is a few basic. I have also wanted to spend the night climbing mountains, or camping in the mountains, looking up at the stars. You imagine a picture, the boy holding the girl’s hand walking under the stars, yet is glittering, bow is holding hands with country road, stop to look, the sky and the boundless field connections, Milky Way stretches all the way until the end, lost god of beauty, the boy whispered: “may you accompany me to see to firn, through eternity, shelter with the stars.” Oh, I still don’t have a girlfriend. Why am I showing off? Forget it, vuvuvur, we understand the mood is good.

My stick figure: a fireworks 🎆 feast, staged under the stars 🌃

Fireworks, starry sky, happy birthday, looking up at the starry sky, I have all four elements, so I began my design journey, I first drew such a stick figure in my notebook:

I’m not good. I’m sorry if YOU’re surprised. But through this picture you can see, my birthday gift 🎁 elements have been complete, there are “happy birthday” in the sky, twinkling stars and gorgeous fireworks, on the ground looking up at the sky I ~

So I thought of the theme of this work: a feast of fireworks, will be staged under the stars

Make 🎵

Now the conception and design are quite clear, so let’s use this chapter to realize our design. The following chapters correspond to the design above:

• The words “Happy birthday”
• Looking up at the stars
• The starry sky
• The fireworks

Happy birthday, pen Walk dragon snake 🎂

I think the sky floating four words, “happy birthday”, feeling is not very cool, so I have an idea, is a stroke to write happy birthday four words, just like someone in the sky to write a birthday blessing, isn’t it very cool, very ritual sense.

Then the question arises, how can I achieve such an effect? My first reaction is to draw these words on canvas, but it is difficult to find the coordinates of the points and I find it difficult to make beautiful fonts, so I give up this idea in my struggle.

And then I consulted the handsome old ape

Later, Mr. Shuai recommended a library like hanzi-Writer to me. You can take a look at this document docs, which perfectly meets my needs.

html

<div class="happy-birthday__container">
  <div id="sheng"></div>
  <div id="ri"></div>
  <div id="kuai"></div>
  <div id="le"></div>
  <div id="ya"></div>
  <div id="site"></div>
  <div id="xiao"></div>
  <div id="han"></div>
  <div id="cao"></div>
</div>
Copy the code

js

// Text effects
const BASE_CONFIG = {
  width: 100.height: 100.padding: 5.delayBetweenStrokes: 0.strokeAnimationSpeed: 1.2.showCharacter: false.showOutline: false,}constWRITER_CONFIG = { ... BASE_CONFIG,strokeColor: '#e09037'
};

constNAME_CONFIG = { ... BASE_CONFIG,strokeColor: '#87db92'
};

const getWriterList = () = > {
  let writerList = [];
  writerList.push(HanziWriter.create('sheng'.'born', WRITER_CONFIG));
  writerList.push(HanziWriter.create('ri'.'day', WRITER_CONFIG));
  writerList.push(HanziWriter.create('kuai'.'fast', WRITER_CONFIG));
  writerList.push(HanziWriter.create('le'.'music', WRITER_CONFIG));
  writerList.push(HanziWriter.create('ya'.'matter', WRITER_CONFIG));
  writerList.push(HanziWriter.create('xiao'.'small', NAME_CONFIG));
  writerList.push(HanziWriter.create('han'.'cold', NAME_CONFIG));
  writerList.push(HanziWriter.create('cao'.'the grass', NAME_CONFIG));
  return writerList;
}

const generateAnimateWriter = async (writerList) => {
  const writerCount = writerList.length;
  for (const writer of writerList) {
    await writer.animateCharacter();
  }
  // The text is completely displayed and disappears
  document.getElementsByClassName('happy-birthday__container') [0].style.opacity = 0;
}
Copy the code

In fact, is the use of the official website, I used seven words, “happy birthday acridine, small cold grass”, happy birthday and small cold grass do segmentation, style I will not take you to write together, is a simple positioning.

The effect is as follows:

Cold grass stands, looking up at the sky 🔥

Now we are going to make a cold grass, you see my stick figure posture is not the last one I want to present, because I am particularly fond of one piece, one piece king has a classic posture.

You may be familiar with this from one Piece, but this is not what I ended up doing. I turned my raised arm into my right hand (it’s not because I haven’t seen it for too long, it’s not!!). “, the final effect I presented was like this:

Notice how simple it looks, but there are a lot of details:

• The radian of the ground
• The sky, the earth, the character color gradient
• Character shape composition
• My shadow (Yes, I have my shadow on this lonely night)

Let me describe the implementation of these details one by one.

The radian of the ground:

Dom:

<div class="land"></div>
Copy the code

css

.container {
      background: linear-gradient(#07112c.#2355d6);
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
.land {
      position: relative;
      z-index: 20;
      height: 60vh;
      margin-top: 75vh;
      width: 300%;
      background: linear-gradient(# 072945 0%.# 000 30%);
      border-radius: 50%;
      margin-left: -100vw;
    }
Copy the code

It makes sense. I triple the width of the ground, make it an ellipse by border-RADIUS 50%, center it by positioning, and finally give the Container an overflow: hidden

Color gradient:

Background: Linear gradient(#07112c, #2355d6); A linear gradient of the background color.

The composition of the characters and their shadows:

If you are not determined, look at the details first:

First look at the composition of the figure, which is actually a circle (brain), a rectangle (torso), three ellipses (two arms + the arc below the upper body), two triangles (two legs), and then through the positioning and together, the code is not shown here.

The thing to note is that my character is not actually black, however from life experience we actually know that shadows are black (so I started making colored shadows and my friend pointed them out, and I remembered, oh yeah, shadows are black!!) “, so the method is also very simple, with two “people”, a black, a color person, black people used to do reflection, and then use color people to cover the black, OK, I really is a little smart ~

In this case, we use the box-reflect property from CSS3:

.person-reflect {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0.0.0.0.6)));
}
Copy the code

Stars shine and fall into the mountains ✨

Look at the effect diagram we can find that the star ✨ effect is actually composed of two parts:

• Flicker effect
• Falling effect

Scintillation effect:

The flicker effect is actually a keyFrames animation

@keyframes star-scale {
  from {
    transform: scale(1.1);
  }

  25% {
    transform: scale(0.1.0.1);
  }

  50% {
    transform: scale(1.1);
  }

  25% {
    transform: scale(2.2);
  }

  to {
    transform: scale(1.1);
  }
}

.star {
  height: 3px;
  width: 3px;
  background-color: #faf89d;
  border-radius: 50%;
  position: absolute;
  animation: star-scale 2s;
  animation-iteration-count: infinite;
}
Copy the code

Falling effect:

Falling is also more common

// Star effect
function Star(type) {
  this.speed = 1;
  this.star = document.createElement('div');
  this.star.className = type === 'star' ? 'star' : 'moon';
  this.star.style.top = '0px';
  this.star.style.left = Math.random() * window.innerWidth + 1 + 'px';
  document.body.appendChild(this.star);
}
Star.prototype.down = function () {
  var that = this;
  function move() {
    that.star.style.top = that.star.offsetTop + that.speed + 'px';
    if (that.star.offsetTop > window.innerHeight) {
      clearInterval(timer);
      document.body.removeChild(that.star); }}var timer = setInterval(move, 25);
}
let starTimer = setInterval(() = > {
  new Star('star').down();
}, 300)
Copy the code

Hahaha, in fact, you can see the code I originally intended to add the moon, and then there is no feel particularly good effect to cancel ~

Firework gorgeous, firetree honeysuckle 🎆

Fireworks in fact is very simple (ps: after reading other people’s articles out again to show off to a really simple is not very looking for dozen, ha ha ha), here I am according to the handsome old ape article learning, everyone interested can go to see: the Chinese New Year, with JS let your web page put 🎆 fireworks

I burst a firework at a random location after the dynamic text disappears:

function fireRandom() {
  const x = (canvas.width * 0.7) * Math.random() + canvas.width * 0.2;
  const y = (canvas.height * 0.6) * Math.random() + canvas.height * 0.2;
  fire(x, y);
}
Copy the code

Although it is random, it should not be too random, or the fireworks position is too far away from the display effect is bad, so I delimited part of the canvas range ~

The complete code

<! DOCTYPEhtml>
<html lang="en">

<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">
  <title>HAPPY BIRTHDAY</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;
    }

    .container {
      background: linear-gradient(#07112c.#2355d6);
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .land {
      position: relative;
      z-index: 20;
      height: 60vh;
      margin-top: 75vh;
      width: 300%;
      background: linear-gradient(# 072945 0%.# 000 30%);
      border-radius: 50%;
      margin-left: -100vw;
    }

    .happy-birthday__container {
      position: absolute;
      top: 130px;
      display: flex;
      justify-content: center;
      width: 100%;
      opacity:.6;
      transition: all 2s;
    }

    .happy-birthday__container>div {
      height: 100px;
      width: 100px;
      margin: 0 10px;
      flex: 0 1 auto;
    }

    .person {
      position: absolute;
      z-index: 99;
      top: calc(75vh - 100px);
      left: calc(50vw - 30px);
      height: 100px;
      width: 60px;
    }

    .person-reflect {
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0.0.0.0.6)));
    }

    .head {
      position: relative;
      height: 40px;
      width: 40px;
      background-color: # 000;
      border-radius: 50%;
      margin-left: 10px;
      z-index: 99;
    }

    .body-container {
      margin-left: 15px;
      margin-top: -10px;
      width: 30px;
      position: relative;
      z-index: 20;
    }

    .body-content {
      width: 100%;
      height: 35px;
      background-color: # 000;
    }

    .body-radius {
      width: 100%;
      height: 10px;
      border-radius: 50%;
      background-color: # 000;
      margin-top: -5px;
    }

    .legs {
      margin-left: 15px;
      margin-top: -6px;
      height: 30px;
      width: 36px;
    }

    .left {
      display: inline-block;
      border-right: 7px solid transparent;
      border-left: 5px solid transparent;
      border-top: 35px solid # 000;
    }

    .right {
      display: inline-block;
      border-right: 6px solid transparent;
      border-left: 7px solid transparent;
      border-top: 35px solid # 000;
    }

    .left-hand {
      position: absolute;
      height: 35px;
      width: 10px;
      background-color: # 000;
      border-radius: 50%;
      left: 10px;
      top: 35px;
      z-index: 1;
    }

    .right-hand {
      position: absolute;
      width: 9px;
      height: 50px;
      background-color: # 000;
      left: 45px;
      top: 7px;
      border-radius: 50%;
      transform: rotate(20deg);
      z-index: 1;
    }

    .person-show>.head {
      background: linear-gradient(# 072253.rgb(20.19.65));
    }

    .person-show>.body-container>div {
      background-color: rgb(20.19.65);
    }

    .person-show>.left-hand..right-hand {
      background-color: rgb(20.19.65);
    }

    .person-show .legs>div {
      border-top-color: # 151618;
    }

    @keyframes star-scale {
      from {
        transform: scale(1.1);
      }

      25% {
        transform: scale(0.1.0.1);
      }

      50% {
        transform: scale(1.1);
      }

      25% {
        transform: scale(2.2);
      }

      to {
        transform: scale(1.1); }}.star {
      height: 3px;
      width: 3px;
      background-color: #faf89d;
      border-radius: 50%;
      position: absolute;
      animation: star-scale 2s;
      animation-iteration-count: infinite;
    }

    #my-canvas {
      position: absolute;
      width: 100%;
      height: 80vh;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="happy-birthday__container">
      <div id="sheng"></div>
      <div id="ri"></div>
      <div id="kuai"></div>
      <div id="le"></div>
      <div id="ya"></div>
      <div id="site"></div>
      <div id="xiao"></div>
      <div id="han"></div>
      <div id="cao"></div>
    </div>
    <canvas id="my-canvas"></canvas>
    <div class="person person-reflect">
      <div class="head"></div>
      <div class="left-hand"></div>
      <div class="right-hand"></div>
      <div class="body-container">
        <div class="body-content"></div>
        <div class="body-radius"></div>
      </div>
      <div class="legs">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="person person-show">
      <div class="head"></div>
      <div class="left-hand"></div>
      <div class="right-hand"></div>
      <div class="body-container">
        <div class="body-content"></div>
        <div class="body-radius"></div>
      </div>
      <div class="legs">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="land"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
  <script>
    // Firework effect
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight * 0.8;
    }

    function clearCanvas() {
      context.clearRect(0.0, canvas.width, canvas.height);
    }

    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();

    function mouseDownHandler(e) {
      var x = e.clientX;
      var y = e.clientY;
      fire(x, y);
    }
    var rid;
    function fire(x, y) {
      createFireworks(x, y);
      function tick() {
        context.globalCompositeOperation = 'destination-out';
        context.fillStyle = 'rgba(0, 0, 0,' + 20 / 100 + ') ';
        context.fillRect(0.0, canvas.width, canvas.height);
        context.globalCompositeOperation = 'lighter';
        drawFireworks();
        rid = requestAnimationFrame(tick);
      }
      cancelAnimationFrame(rid);
      tick();
    }
    var particles = [];
    function createFireworks(sx, sy) {
      clearCanvas();
      particles = [];
      var hue = Math.floor(Math.random() * 51) + 150;
      var hueVariance = 30;
      var count = 365;
      for (var i = 0; i < count; i++) {
        var p = {};
        var angle = Math.floor(Math.random() * 360);
        p.radians = angle * Math.PI / 180;
        p.x = sx;
        p.y = sy;
        p.speed = (Math.random() * 5) + 4.;
        p.radius = p.speed;
        p.size = Math.floor(Math.random() * 3) + 1;
        p.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
        p.brightness = Math.floor(Math.random() * 31) + 50;
        p.alpha = (Math.floor(Math.random() * 61) + 40) / 100; particles.push(p); }}function drawFireworks() {
      for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        var vx = Math.cos(p.radians) * p.radius;
        var vy = Math.sin(p.radians) * p.radius + 1.2;
        p.x += vx;
        p.y += vy;
        p.radius *= 1 - p.speed / 300;
        p.alpha -= 0.005;
        context.beginPath();
        context.arc(p.x, p.y, p.size, 0.Math.PI * 2.false);
        context.closePath();
        context.fillStyle = 'hsla('+p.hue+100+'and 100%,+p.brightness+'%,'+p.alpha+') '; context.fill(); }}function fireRandom() {
      const x = (canvas.width * 0.7) * Math.random() + canvas.width * 0.2;
      const y = (canvas.height * 0.6) * Math.random() + canvas.height * 0.2;
      fire(x, y);
    }

    document.addEventListener('mousedown', mouseDownHandler, false);

    // Star effect
    function Star(type) {
      this.speed = 1;
      this.star = document.createElement('div');
      this.star.className = type === 'star' ? 'star' : 'moon';
      this.star.style.top = '0px';
      this.star.style.left = Math.random() * window.innerWidth + 1 + 'px';
      document.body.appendChild(this.star);
    }
    Star.prototype.down = function () {
      var that = this;
      function move() {
        that.star.style.top = that.star.offsetTop + that.speed + 'px';
        if (that.star.offsetTop > window.innerHeight) {
          clearInterval(timer);
          document.body.removeChild(that.star); }}var timer = setInterval(move, 25);
    }
    let starTimer = setInterval(() = > {
      new Star('star').down();
    }, 300)

    // Text effects
    const BASE_CONFIG = {
      width: 100.height: 100.padding: 5.delayBetweenStrokes: 0.strokeAnimationSpeed: 1.2.showCharacter: false.showOutline: false,}constWRITER_CONFIG = { ... BASE_CONFIG,strokeColor: '#e09037'
    };

    constNAME_CONFIG = { ... BASE_CONFIG,strokeColor: '#87db92'
    };

    const getWriterList = () = > {
      let writerList = [];
      writerList.push(HanziWriter.create('sheng'.'born', WRITER_CONFIG));
      writerList.push(HanziWriter.create('ri'.'day', WRITER_CONFIG));
      writerList.push(HanziWriter.create('kuai'.'fast', WRITER_CONFIG));
      writerList.push(HanziWriter.create('le'.'music', WRITER_CONFIG));
      writerList.push(HanziWriter.create('ya'.'matter', WRITER_CONFIG));
      writerList.push(HanziWriter.create('xiao'.'small', NAME_CONFIG));
      writerList.push(HanziWriter.create('han'.'cold', NAME_CONFIG));
      writerList.push(HanziWriter.create('cao'.'the grass', NAME_CONFIG));
      return writerList;
    }

    const generateAnimateWriter = async (writerList) => {
      const writerCount = writerList.length;
      for (const writer of writerList) {
        await writer.animateCharacter();
      }
      
      document.getElementsByClassName('happy-birthday__container') [0].style.opacity = 0;
      fireRandom();
      setInterval(() = >{ fireRandom(); },2000);
    }

    const writerList = getWriterList();
    generateAnimateWriter(writerList);

  </script>
</body>

</html>
Copy the code

Tail plays 🎵

A blast to the disco of the future

On this crucial day, OF course, I will talk about my future plans. I write this article with a romantic tone in my eyes. Of course, IN this part, I hope to make my future as romantic as possible, so I plan to talk about it in several parts.

Open source

We have an organization: CodingBrotherhood that recently wanted to make a basic UI component for VuE3: Commi-UI

Thank you for your company. We can work together to make this component library good. Of course, if you want to watch our development process, you can also add my wechat HancAO97, and I will pull you into the group.

Of course, we have many other things:

• fe-file-rename
• This is my deep pit, I will fill it!
• .

Keep looking forward

writing

In the past six months, I have been exploring my writing style and what kind of things readers need. Now I have a little preliminary goal. I want to divide my articles into four categories:

Front-end Foundation:

I think my front-end foundation is not very solid, so I also want to take this opportunity to write an article to improve my front-end basic knowledge system, although my temporary goal may not be to recite the eight-part essay backwards, the interview is invincible. But the front end foundation must be the most critical and fundamental step in career development.

Of course, I already have some articles here on the basics of the front end:

• Promise from entry to the handwritten | [Promise a series]
• Promise from handwriting to extend | Promise/Generator/async | [Promise series 2]

Computer Fundamentals:

First of all, I would like to express my opinion that, as a computer practitioner, there are certain requirements for computer foundation. Of course, while it may not be intuitive, the computer fundamentals are deep in every aspect of our work: Webpack, Babel, ESLint… GRPC, HTTP… In computer networks.

I’ve already published two issues of compilation Principles:

• Front-end learning compilation principle (1) : Compilation introduction
• Grass department front hand touch hand with you to achieve regular engine, lit the summer’s most enthusiastic fireworks 🔥

Of course, this series will continue, covering the mysteries of compilation from the perspective of the front end, but I’m not going to stop there. Operating systems and computer networks will also be exposed in the future, so stay tuned.

Personal Practice:

I still like to do some practical things, such as VSCode plug-ins, Chrome plug-ins have some attempts, of course, such attempts will be more and more in the future.

• My first VS Code plugin development: Fe-file-Rename && was a bit of a ramble
• Js button Sprite – try to achieve front-end automation test (A)

Interesting demo:

In fact, I have said that the original intention of doing front end is that front end has given me pure sense of achievement and happiness. I think although I am working now, I also hope to pass this idea to more people and create more interesting things through front end.

• Pay attention to the 100th anniversary: dear friends, nuggets LOGO, please take a picture with me ~
• The treasure of the town station of gold mining: the visualization analysis of eight hundred articles of gold mining classification
• Front end ice Coke 🥤 | with 50 lines of code to become luo Zhu 🎋 lv5 upgrade the key gentleman

work

That’s ok, work hard, be creative, try to make things better, do more valuable things. The most important thing is not to be influenced by others. This has happened twice this year. Keep a normal mind.

life

I once said that I would go to many places and see many scenery after work. In the first half of this year, I also went to many places. But recently I put aside some original ideas because of work and writing, but MY heart is still there.

• Want to go to Tibet to see pure mountains and pure water
• I want to go to Chongqing to eat hot pot and see the magical mountain city

I’m always on my way

Unforgettable tonight ~ ah ~ unforgettable tonight ~

Again to this year’s birthday 🎂, I grew up one year, a few days ago has completed the achievement of the first anniversary of work, and now to complete the achievement of 24 years old, in fact, there are a lot of feelings, but my writing is difficult to very good expression.

I have been writing for half a year and working for a year. No matter in our company or in the process of writing for gold, I have met many wonderful partners and gained a lot of growth. Now I have become a front-end engineer who can independently take charge of a large module and a customized project from a budding budding who had stumbled. I think this should be just the beginning, a middle two teenager on the battlefield, the start of the quartet, I believe I will have a better future 🔥, you are also ~

Tonight, I stand with all of you under the night sky, looking at the stars 🌃, appreciate the gorgeous fireworks 🎆, the annual Spring Festival gala near midnight played unforgettable tonight.

Unforgettable tonight, ah, unforgettable tonight ~ we will see you again, partners, wish your life become more happy ~

If you enjoyed this article, please leave your birthday wishes 🍰 ~ wish you a more wonderful life ~