andreas andreasvirkus

🙊

made you look

Quite the butter-fingers of code writing.

andreasvirkus / conditionalFocusStyles.js

Last active July 19, 2018 08:48

	const styleEl = document.createElement('style')
	styleEl.setAttribute('id', '_unique-id-outline-styles')
	document.head.appendChild(styleEl)

	// Inject outline preventing styles only for non-keyboard users
	document.addEventListener('mousedown', () => {
	styleEl.innerHTML = 'a,a:focus,button,button:focus,input,input:focus,textarea,textarea:focus,div:focus {outline:none}'
	})

	document.addEventListener('keydown', () => {

andreasvirkus / adorableAvatars.js

Created July 20, 2018 12:52

I'd like to take a moment and thank adorable.io for existing <3

	const randStr = Math.random().toString(36).substr(2, 5)
	export default `https://api.adorable.io/avatars/40/${randStr}@adorable`

andreasvirkus / adorableAvatars.js

Created July 20, 2018 12:52

I'd like to take a moment and thank adorable.io for existing <3 This small module uses their avatar API: http://avatars.adorable.io/

	const randStr = Math.random().toString(36).substr(2, 5)
	export default `https://api.adorable.io/avatars/40/${randStr}@adorable`

andreasvirkus / emoji-icons.scss

Created July 25, 2018 07:53

A SCSS mixin to use emojis as solid/stroked icons. See example at http://jsfiddle.net/andreasvirkus/yLebhoc7/11/

	@mixin emoji-icon($color: var(--black), $size: 1rem) {
	font-size: $size;
	color: transparent;
	text-shadow: 0 0 $color;
	}

	@mixin emoji-icon-stroke($color: var(--black), $fill: var(--white)) {
	text-shadow: 0 0 $fill,
	-1px -1px 0 $color,
	1px -1px 0 $color,

andreasvirkus / focusFix.js

Created July 26, 2018 09:11

	export default () => {
	const styleEl = document.createElement('style')
	document.head.appendChild(styleEl)

	// Inject outline preventing styles only for non-keyboard users
	document.addEventListener('mousedown', function () {
	styleEl.innerHTML = 'a,a:focus,button,button:focus,input,input:focus,textarea,textarea:focus,div:focus {outline:none}'
	})

	document.addEventListener('keydown', function () {

andreasvirkus / easingVariables.css

Created August 7, 2018 12:20

andreasvirkus / cutesyLoader.html

Created August 9, 2018 06:28

	<!-- Saving you for future ref -->
	<img class="aligncenter size-full wp-image-33949" src="https://maxcdn.icons8.com/app/uploads/2018/05/loading-animations-preloader-gifs-ui-ux-effects-18.gif" alt="" width="400" height="300">

andreasvirkus / reverseObject.js

Last active August 15, 2018 09:06

Reverse an object's (sorted!) order by mapping it into an array where the object's key is included within the new constructed object.

	const reverseObjIntoArray = obj => Object.keys(obj).sort().reverse().map(key=> ({ key, ...obj[key] }))

	reverseObjIntoArray({
	124: {
	a: 'foo',
	b: 'bar'
	},
	119: {
	a: 'foo',
	b: 'bart'

andreasvirkus / scrollBehaviour.js

Created August 17, 2018 08:49

Vue router middleware which keeps the scroll state of the former page

	import VueRouter from 'vue-router'

	export default new VueRouter({
	scrollBehavior(to, from, savedPosition) {
	if (to.hash) {
	return { selector: to.hash }
	}
	return savedPosition \|\| { x: 0, y: 0 }
	}
	})

andreasvirkus / authRouterGuard.js

Created August 17, 2018 08:51

	router.beforeEach((to, from, next) => {
	if (to.matched.some(record => record.meta.requiresAuth)) {
	// this route requires auth, check if logged in if not, redirect to login page.
	const isAuthenticated = false // TODO implement real auth check
	if (!isAuthenticated) {
	next({ path: '/login', query: { redirect: to.fullPath } })
	} else {
	next()
	}
	} else {