Articles that write tips for the front end

Articles that write tips for the front end

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

Leave a Reply

Your email address will not be published.