Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:
...

Michael Gerstmann webdesignberlin

:octocat:
...
View GitHub Profile
View typography_10.scss
/* --------------------------------
Typography
-------------------------------- */
:root {
--font-primary: sans-serif;
--font-secondary: serif;
@webdesignberlin
webdesignberlin / modifierClasses.js
Last active Apr 15, 2020
generate BEModifier for vue computed property
View modifierClasses.js
export const modifierClasses = (vm) => ((root) => {
if (vm.modifier) {
const classArray = (typeof vm.modifier === 'string')
? new Array(vm.modifier)
: [...vm.modifier];
return classArray.map((modifier) => `${root}--${modifier}`);
}
return null;
});
View lazy-in-component.vue
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 Jan 29, 2020 — forked from DawidMyslak/vue.md
Vue.js and Vuex - best practices for managing your state
View vue.md

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 Dec 3, 2019
Prevent toxic scroll behavior of ios on overflow components
View ios-fix-input-scroll.css
.ios-body-fixed {
position: fixed;
width: 100%;
height: 100%;
}
View helper.js
// 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 Jan 2, 2018
Backup old nav script - refactor or delete
View nav.js
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),
View mapsresolve.js
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 || [])
})
View flip.css
.element.collapsed {
height: 90px;
width: 100%;
}
.element.expanded {
top: 0;
bottom: 0;
left: 0;
width: 100%;
@webdesignberlin
webdesignberlin / demo.html
Created Jan 4, 2017
Move Image Focus via Device Orientation
View demo.html
<!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">
You can’t perform that action at this time.