CodeDrops codedrops-io

CodeDrops is a curated collection of useful front-end code snippets to help you build better apps, faster.

codedrops-io / vue.config.js

Created June 18, 2020 14:30

Load SASS/SCSS globally in your Vue apps.

	module.exports = {
	css: {
	loaderOptions: {
	scss: {
	prependData: `
	@import '~@/scss-directory/file.scss';
	@import '@/scss-directory/another-file.scss';
	`
	}
	}

codedrops-io / git-user-config.sh

Last active June 25, 2020 08:59

Configure your Git user.

	git config --global user.name "your user name"
	git config --global user.email "your@user.email"

codedrops-io / index.html

Created June 18, 2020 14:50

Simple HTML5 boilerplate.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<title></title>
	</head>
	<body>

codedrops-io / slow-loading-checker.js

Created June 18, 2020 14:51

Check if a feature of your project is loading slow.

	setTimeout(() => {
	if (!HAS_LOADED_CONDITION) {
	// This should be sent to your error tracking system
	console.error('⚠️ Slow connection!')
	}
	}, 10000)

codedrops-io / debounce.js

Created June 18, 2020 14:52

Debounce function.

	function debounce (func, wait = 100, immediate) {
	let timeout

	return function () {
	const context = this
	const args = arguments

	const later = function () {
	timeout = null
	if (!immediate) func.apply(context, args)

codedrops-io / shuffle-array.js

Created June 18, 2020 14:53

Shuffle array function.

	function shuffleArray (array) {
	let currentIndex = array.length
	let temporaryValue
	let randomIndex

	// While there remain elements to shuffle.
	while (currentIndex !== 0) {
	// Pick a remaining element
	randomIndex = Math.floor(Math.random() * currentIndex)
	currentIndex -= 1

codedrops-io / ellipsis.css

Created June 18, 2020 14:55

Add ellipsis to a text.

codedrops-io / initialize-body.scss

Created June 18, 2020 14:56

Initialize the body of your document.

	body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	* {
	box-sizing: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

codedrops-io / grayscale-anti-aliasing.css

Created June 18, 2020 14:58

Grayscale anti-aliasing.

	* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

codedrops-io / button-reset.css

Created June 18, 2020 14:59

Reset your buttons.