background

Recently, there are not many projects in the company, which is quite idle. I have been dabbling in various major technology blog platforms, and suddenly I have acquired a lot of front-end skills, some of which are skills, and some of which are cold knowledge I have never heard of. I can’t digest it for a while, and I can’t help but sigh!

The front end is really extensive and profound

So whim, is now sorted out to share with you, but also added some usual accumulation and expansion of some content, as the saying goes, lele alone is not as lele, we come to accept the baptism of the front end!!

On the broken front end

HTML report

The browser address bar runs JavaScript code

As many of you probably know, you can run JavaScript code directly from the browser address bar, starting with JavaScript: followed by the statement to be executed. Such as:

javascript:alert('hello from address bar :)');
Copy the code

Post the above code to the browser address bar and press Enter. After the alert is executed normally, a pop-up god appears.

Note that if you copy paste code to the address bar of the browser, IE and Chrome will automatically remove the javascript: at the beginning of the code, so you need to manually add it to the address bar. Firefox does not automatically remove javascript:, but it does not support running JAVASCRIPT code in the address bar. sigh~

The browser address bar runs the HTML code

If the above tip is well known, this tip is a little less well known. You can run YOUR HTML code directly from the address bar of a non-IE browser!

For example, enter the following code in the address bar and press Enter to run, the specified page content will appear.

data:text/html,<h1>Hello, everybody! </h1>Copy the code

Browser seconds to editor

Copy and paste the following code into the browser’s address bar. When it runs, the browser becomes a primitive and simple editor, similar to the Notepad that came with Windows.

data:text/html, <html contenteditable>
Copy the code

After all, thanks to HTML5’s new contenteditable property, the content of an element becomes editable when specified.

Similarly, executing the following code from the console makes the entire page editable.

document.body.contentEditable='true';
Copy the code

Real-time writing style input box

Similarly, it takes advantage of the contenteditable property in HTML5 to add an editable style tag to the body.

<body>
  <style style="display:block; position: fixed;" contentEditable>
    body { background: red; }
  </style>
</body>
Copy the code

Parse the URL using the A tag

Most of the time, we have to extract the domain name from a URL, query keywords, variable parameter values, etc., but processing URL string is more troublesome, you can use a tag to automatically resolve the URL.

The main method is to create an A tag in JS, and then assign the URL to the href attribute of the newly created A tag, and then get what we want.

var a = document.createElement('a');
a.href = 'https://juejin.cn/user/2796746682939054/posts';
console.log(a.host);
Copy the code

Using this method and a little wrapping, you can get a very useful utility function. Here is an example of wrapping that is common on the web.

function urlParse(url, key) { var a = document.createElement('a') a.href = url var result = { href: url, protocol: a.protocol.replace(':', ''), port: a.port, query: a.search, params: (function(){ var ret = {}, centArr, seg = a.search.replace(/^\? /, '').replace(/^\? /,'').split('&') for (i = 0, len = seg.length; i < len; i ++) { if (! seg[i]) { continue } centArr = seg[i].split('=') ret[centArr[0]] = centArr[1] } return ret }()), hash: a.hash, file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1], path: a.pathname.replace(/^([^\/])/, '/$1'), relative: (a.href.match(/tps? :\/\/[^\/]+(.+)/) || [, ''])[1], segments: a.pathname.replace(/^\//, '').split('/') } a = null return key ? result[key] : result }Copy the code

H5 has a new API URL that can also handle a link quickly

var url = new URL('https://www.baidu.com/')
url.hash
...
Copy the code

An element with an Id attribute creates a global variable

In an HTML page, all elements with ID attributes create global variables in the JavaScript execution environment, which means document.getelementById is as redundant as human wisdom teeth. But in a real project, it’s better to just write it the way it’s supposed to be written, because there’s much less chance that regular code will screw up.

<div id="test"></div>
<script>
    console.log(test)
</script>
Copy the code

The script tag holds arbitrary information

We can store any information in the script tag by setting the type attribute to ‘text’, and then get the information in JS very easily.

<script type="text" id="template">Copy the code
var text = document.getElementById('template').innerHTML
Copy the code

CSS article

Text blur effect

Just add the following two lines of code to obfuscate the text.

color: transparent;
text-shadow: #111 0 0 5px;
Copy the code

Normal text VS fuzzy text, isn’t that cool, hahaha.

Frosted glass effect

In fact, the fuzzy effect of frosted glass is relatively simple technically, just using the BLUR attribute in CSS filter. But to make a good frosted glass effect, you need to pay attention to a lot of details. Here is a simple example:

.blur {
    display: block;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    filter: blur(10px);
}

<img src="./img/test.png" class="blur" alt="">

Copy the code

Photo: One lovely blue fat one item (●’◡’●)

Multiple frames

In CSS, we can repeatedly specify box-shadow to achieve the effect of multiple borders.

/*CSS Border with Box-Shadow Example*/ div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0, 0) 0.2); height: 200px; margin: 50px auto; width: 400px }Copy the code

You can also do simple calculations in CSS

In daily development, we often encounter requirements such as:

The left or right width is fixed, and the rest fills up automatically.

Flex :1; Flex :1; Make it auto-fill, of course, this is also correct, but there is an easier way, that is to use CSS calc function, example code is as follows:

.container{
	width: calc(100% - 50px);
}

Copy the code

The calc() function is used to dynamically calculate the length value.

  • Leave a space before and after the operator, for example: width: calc(100%-10px);
  • Any length value can be computed using the calc() function;
  • The calc() function supports “+”, “-“, “*”, “/”;
  • The calc() function uses standard mathematical precedence rules;

JS article

Interchange of values of two variables

When two variables are exchanged, the first thing you might think of is an intermediate variable, but there is a faster way to write this:

var a=1, b=2
a=[b, b=a][0]
Copy the code

Floating-point numbers are quickly rounded down

There is no concept of integers in JavaScript, but bitwise operators make it easy to handle and efficient.

| 0 ~ ~ is a good example, and use the two floating point can be converted to an integer and efficiency than the same kind of parseInt, Math. Round faster. Useful when working with effects such as pixels and animation shifts.

(12.4/4.13) | 0 / / = > 3 ~ ~ / / = > 3 (12.4/4.13)Copy the code

Generating random strings

To generate random strings, the first thing that comes to mind is probably to define an array of strings and then concatenate them into a string of random length by randomly taking characters from the array.

But there is an even simpler method, which looks like this:

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}
Copy the code

It takes advantage of the toString() method

When does a === = a – 1

At first glance, this whole equation is false in every way, but it makes sense for everything to exist. Now, let’s see when this whole equation is true.

The first case is Infinity, or you could say plus or minus Infinity.

👉🏻 In JavaScript, Infinity is a literal of type Number, representing Infinity. When a value of type Number exceeds the maximum value that can be represented during an operation, infinity occurs.

let a = Infinity;

console.log(a === a - 1); // true

let b = -Infinity;

console.log(b === b - 1);  // true
Copy the code

Is there any other case where this is true? Or a is equal to a is equal to a minus 1? Welcome to join the discussion in the comments section below.

A spoof articles

CSS spoof

Can you guess what happens if you add a style to your code?

{ cursor: none ! important; }Copy the code

(Pictures from the network, if there is infringement, please contact me to delete)

console.logA spoof

Chrome console.log supports styling text and even log images. You can override the default log method and apply the text you want to log to the CSS blur effect so that when someone tries to call console.log(), the text will be blurred. It was cold, AND I didn’t smile.

var _log = console.log; console.log = function() { _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent; The text - shadow: 0 0 2 px rgba (0, 0,. 5); '); }; Console. log(' Are you funny? ')Copy the code

I am Monkeysoft, your “three lines” is the biggest power of monkeysoft creation, if this article has any mistakes and suggestions, welcome to leave a comment!

Reference:

1, What are the most interesting HTML/JS/DOM/CSS hacks that most Web developers don’t know about?

2. 45 Useful JavaScript Tips, Tricks and Best Practices

3, 10 Small Things You May Not Know About Javascript

4, W3school

Front end unknown side – front end cold knowledge collection