It's annoying to check every time, so I will add more and more front-end tips used in business.
It may be difficult to see because it is written down ...

Fixed under the footer

Fix the footer down when there are few main elements.

<html>
<body>
<div class="main">
	<header></header>
	<div class="main__inner"></div>
	<footer></footer>
</div>
</body>
</html>


html,body {
	min-height: 100vh;
}

.main {
	display: flex;
	min-height: 100vh;
}

.main__inner {
	margin-top: auto;
}

Phenomenon that turns blue when clicked or tapped

-webkit-tap-highlight-color:rgba(0, 0, 0, 0)

Elements are hidden in the toolbar or address bar

Set innerHeight in body.

// 読み込み時にbodyにウィンドウの高さを指定
document.body.onload = ()=>{
    document.body.style.minHeight = window.innerHeight + 'px';
}

// 横向きにした時に再度高さを指定
let timer;
window.addEventListener("resize", () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
	document.body.style.minHeight = window.innerHeight + 'px';
    }, 500);
});

Livestream comment viewer

Implemented a comment viewer for live distribution like YouTube only with CSS
* Note that scrolling is not possible
* Add li with DOM

<html>
<body>
<div class="main">
	<header></header>
	<div class="comment-viewer">
		<ul class="comment-viewer__list">
			<li class="comment-viewer__item"></li>
			<li class="comment-viewer__item"></li>
		</ul>
	</div>
	<footer></footer>
</div>
</body>
</html>


.comment-viewer {
	position: absolute;
	top: 40%;
	right: 40px;
	bottom: 24px;
	left: 16px;
	overflow: hidden;
}

.comment-viewer__list {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
}

.comment-viewer__item {
	width: 100%;
	margin-bottom: 4px;
}

How to redirect to a URL with basic authentication

<a href="https://ユーザー名:パスワード@hogehoge.jp">

Group by associative array key

var foods = [
	{'name':'Apple', 'category':'fruits'},
	{'name':'Strawberry', 'category':'fruits'},
	{'name':'Tomato', 'category':'vegetables'},
	{'name':'Carot', 'category':'vegetables'},
	{'name':'water', 'category':'drink'},
	{'name':'beer', 'category':'drink'},
];
var expected = {};
foods.map(function (i,j) {
	var cat=i["category"];
	if(typeof expected[cat]=="undefined") expected[cat]=[];
	expected[cat].push(i);
});
console.log(expected);

[Vue] Error handling: [Vue warn]: Error in render: "TypeError: Cannot read property'xxx' of undefined"

What to do if you get the following error in Vue:

[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"

Check the received data for null.

{{ (item || {}).xxx }}

Implement sorting with vue

■ Sort in reverse order

computed: {
	// 配列の要素順番を逆順にする
	reverseItems() {
		return this.items.slice().reverse()
	},
}

■ Sort by the specified key

computed: {
	// amountで並べ替え
	sortedItemsByAmount(){
		return this.items.slice().sort((a, b) => {
			return (a.amount < b.amount) ? -1 : (a.amount > b.amount) ? 1 : 0
		})
	}
}

Turn vue with v-for a specified number of times

From 1st to 3rd of the array

v-for="（item, index) in items" v-if="index > 0 && index < 4"

From 0 to 4 of the array

v-for="（item, index) in items" v-if="index >= 0 && index < 4"

AUTHOR:NEK