preface

When we open baidu or Zhihu and other websites to check the source code, we will often see the following information in the console:

Isn’t that a creative way to help companies with recruitment? On the one hand, it shows that these companies are hungry for talent, and on the other hand, it gives developers direct access to job listings, making it more efficient to find candidates who are interested in the company.

Let’s take a look at how this works.

The body of the

1. Output basic text arrangement information

Console. log, as one of javascript’s global methods, also supports the output of characters with formatting and styles. For example, we use /n for line wrapping and CSS styles to style the specified text, as follows:

if (window.console) {
    console.log('Would you like to build the world's largest Interactive Chinese q&A platform with us? \n Want to have your achievements in front of millions of users? Do you want the world to see your light? \n Join us, here is not only work, invest your time and enthusiasm, drops of sweat will eventually converge into extraordinary results. \n Looking forward to your joining us. ');
    console.log("Company engages the front-end engineer, CV % c address http://www.badu.toudi.com"."color:blue; font-weight:bold;");
    console.log("Please indicate %c in email from :console"."color:red; font-weight:bold;");
}
Copy the code

The following %c will be printed using the style specified in the second parameter of console.log. The effect is as follows:We can use these methods to achieve more creative console messages, including company posters, recruitment posters, etc.

2. Print a character drawing on the console

As shown above, we can also customize recruitment posters for our own website. For character drawing, we can type line by line in the console, of course this is not recommended, we can use the websitepatorjk.com/To generate its own character drawing and then output it to the console through code wrapping.This is the interface of the website, we just need to input the English characters that want to be converted into character painting, we can generate different styles of character painting. The following is aHIREThe different styles of character painting:Of course, this is only part of the site generation, which is a total ofHIREGenerated 314 different styles of character painting, is not very powerful? Of course, it’s not enough to just copy the characters, we also need to wrap them around and output them to the console as they are. The specific implementation code is as follows:

<script>
    Function.prototype.makeMulti = function () {
        let l = new String(this)
        l = l.substring(l.indexOf("/ *") + 3, l.lastIndexOf("* /"))
        return l
    }

    let string = function () {
      /* The character pattern you copied */
    }
    console.log(string.makeMulti());
    console.log(/* Other information */);
</script>
Copy the code

We will copy the above character drawing from the website into the string function. After executing the code, it will look like this:Of course, we can continue to extend this function, support the output of color character painting and other functions, you are interested in exploring.

The last

If you want to learn more H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join our technical group in “Interesting Talk front-end” to learn and discuss, and explore the boundary of the front-end together.

More recommended

  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
  • CMS full stack project Vue and React (part 2)
  • Develop a component library based on VUE from zero to one
  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • Hand-write 8 common custom hooks in 10 minutes
  • Master Redux: Developing a Task Management platform (1)
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • A picture shows you how to play vue-Cli3 quickly
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot