Skip to content

Instantly share code, notes, and snippets.

View webdesignberlin's full-sized avatar
:octocat:
...

Michael Raguse webdesignberlin

:octocat:
...
55 followers · 157 following
View GitHub Profile
@webdesignberlin
webdesignberlin / lazy-in-component.vue
Created March 19, 2020 14:06
Vue Lazy Loading
components: {
AsyncComponent: () => import('./AsyncComponent'),
/**
With named export, use Object Destructuring on the returned Promise.
*/
AsyncComponent2: () => import('AsyncComponentLib').then(({ AsyncComponent2 }) => AsyncComponent2),
},
@webdesignberlin
webdesignberlin / vue.md
Created January 29, 2020 12:00 — forked from DawidMyslak/vue.md
Vue.js and Vuex - best practices for managing your state

Vue.js and Vuex - best practices for managing your state

Modyfing state object

Example

If you have to extend an existing object with additional property, always prefer Vue.set() over Object.assign() (or spread operator).

Example below explains implications for different implementations.

@webdesignberlin
webdesignberlin / ios-fix-input-scroll.css
Created December 3, 2019 08:41
Prevent toxic scroll behavior of ios on overflow components
.ios-body-fixed {
position: fixed;
width: 100%;
height: 100%;
}
@webdesignberlin
webdesignberlin / helper.js
Created August 16, 2018 07:36
Find z-index
// Find max used z-index
[...document.querySelectorAll('*')].map(e => ~~getComputedStyle(e,null).getPropertyValue('z-index'))
// Find elements with z-index
[...document.querySelectorAll('*')].filter(e => getComputedStyle(e,null).getPropertyValue('z-index') > 0)
@webdesignberlin
webdesignberlin / nav.js
Created January 2, 2018 07:58
Backup old nav script - refactor or delete
function initNavigation(){
//var docElement = document.documentElement;
console.log('init navigation');
var currId,
idTarget,
navCurrent,
buttonOpen = document.querySelectorAll('.js-open-nav'),
topBar = document.querySelectorAll('.top-bar'),
topBarNavButton = topBar.querySelectorAll(buttonOpen),
@webdesignberlin
webdesignberlin / mapsresolve.js
Created September 6, 2017 14:53
mapsresolve
export const getSuggestions = (input) => {
return new Promise((resolve, reject) => {
const empty = input.length < 3 || !window || !window.google || !window.google.maps
if (empty) resolve([])
try {
const service = new window.google.maps.places.AutocompleteService()
service.getQueryPredictions({ input }, (suggestions) => {
resolve(suggestions || [])
})
@webdesignberlin
webdesignberlin / flip.css
Created February 24, 2017 21:06 — forked from JoseRosarioOS/flip.css
FLIP_CSS
.element.collapsed {
height: 90px;
width: 100%;
}
.element.expanded {
top: 0;
bottom: 0;
left: 0;
width: 100%;
@webdesignberlin
webdesignberlin / demo.html
Created January 4, 2017 10:38
Move Image Focus via Device Orientation
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Panorama</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="image-wrapper">
<img class="image" src="http://lorempixel.com/1920/200" alt="Just a Placeholder Image">
@webdesignberlin
webdesignberlin / awaitIdle.js
Created December 16, 2016 14:24 — forked from potch/awaitIdle.js
Rather rough sketch of using requestIdleCallback to break up JS execution
function idle(action) {
return new Promise((resolve, reject) => {
requestIdleCallback(timing => resolve(action(timing)));
});
}
async function init() {
criticalPath();
await idle(lessImportant);
await idle(nonCritical);
@webdesignberlin
webdesignberlin / accessible-menu.css
Last active December 15, 2016 13:14
accessible menu. playground @ http://codepen.io/webdesignberlin/pen/ZBmxRG
.nav__trigger[aria-expanded="false"] + .nav__menu {
/* u-visually-hidden */
border: none !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;