/ Gists

Gists

On gists

How to write loops for promise with JavaScript?

JavaScript

loop.js #

const sayHi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Hi");
      resolve();
    }, 3000);
  });
};

const asyncArray = [sayHi, sayHi, sayHi];

const hi = async () => {
  for (const func of asyncArray) {
    console.log(await func());
  }
};
On gists

Google map aka Husinec

Gmaps

map.js #

// GMAP - CUSTOM STYLE
/* https://vanguardprague.psn.cz/  */
$mapStyle = [
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {"saturation": "-100"},
            {"lightness": "25"},
            {"gamma": "1"}
        ]
    }
];

// GMAP - SETTINGS
var mapCenter = {lat: 50.0163867, lng: 14.4035964};

function initialize() {
    var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: 0,
        streetViewControl: 0,
        sensor: 'true',
        scrollwheel: false,
        styles: $mapStyle
    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, myOptions);

    // REZIDENCE
    rezidence = new google.maps.Marker({
        position: mapCenter,
        map: map,
        title: 'VANGUARD',
        icon: '/img/icons/pin.png'
    });

    // PSN
    psn = new google.maps.Marker({
        position: {lat: 50.0853655, lng: 14.4406618},
        map: map,
        title: 'PSN',
        icon: '/img/icons/map-psn.png'
    });

    var iconBase = '/img/icons/';
    var markers = []
    var markerGroups = {
        "culture": [],
        "gastronomy": [],
        "nightlife": [],
        "shopping": [],
    };

    var filterMarkers = function (category, state) {
        console.log(category);
        console.log(state);

        for (i = 0; i < markerGroups[category].length; i++) {
            var marker = markerGroups[category][i];
            marker.setVisible(state);
        }
    }

    $('.mapFilter').change(function () {
        filterMarkers($(this).data('category'), $(this).prop('checked'));
    });

    $.getJSON('/cz/poi', function (data) {
        $.each(data, function (i, value) {
            category = value.category

            var myLatlng = {lat: value.lat, lng: value.lng};
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: iconBase + value.icon,
                title: value.title.replace('<br>', ','),
                url: value.url,
                category: category = value.category,
                thumbnail: value.thumbnailUrl,
                popis: value.popis
            });
            // infowindow obsah
            var contentString = '<div class="gg-content">' +
                '<h3>' + marker.title + '</h3>' +
                '<p>' + marker.popis + '</p>' +
                '</div>';
            infowindow = new google.maps.InfoWindow({
                //content: marker.title
                content: contentString,
                maxWidth: 225
            });

            // marker + infowindow handler
            marker.addListener('click', function () {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 225
                });
                infowindow.open(map, marker);
                map.panToOffset(marker.position, 0, -200);
            });

            markers.push(marker);
            markerGroups[category].push(marker);

        });
    });
}

/* ------ */
On gists

Props to css styles

Vue.js

component.vue #

 <HelloWorld color="red" bg="green" />

<template>
  <div :style="cssProps">KUK</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['color', 'bg'],
  computed: {
    cssProps() {
      return {
        '--color': this.color,
        '--bg': this.bg,
      };
    },
  },
};
</script>

<style scoped>
div {
  color: var(--color);
  background: var(--bg);
}
</style>
On gists

How to pass props as initial data

Vue.js

app.js #

<script>
export default {
  //...
  props: {
    record: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      recordLocal: { ...this.record },
    };
  },
  //...
};
</script>
On gists

How to reset a component’s initial data

Vue.js

app.vue #

<script>
const initialState = () => {
  return {
    modalBodyDisplay: "getUserInput",
    submitButtonText: "Lookup",
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location: {
      name: null,
    },
  };
};

export default {
  data() {
    return initialState();
  },

  methods: {
    reset() {
      Object.assign(this.$data, initialState());
    },
  },
};
</script>
On gists

Restart CSS Animation

CSS CSS trick

restart.js #

// https://css-tricks.com/restart-css-animation/

// retrieve the element
element = document.getElementById("logo");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("run-animation");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("run-animation");
}, false);


// other solution
var elem = this;
elem.className = '';
setTimeout(function () {
  elem.className = 'run-animation';
}, 0);
On gists

Simple rating (odometer)

JavaScript CSS CSS trick

example.html #

	<section>
	<button id="minus">-</button>
	<div>
		<span style="--state: -10">- 9-8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9</span>
	</div>
	<button id="plus">+</button>
		</section>
On gists

Simple odometer

CSS CSS trick

example.html #

<!-- https://jsbin.com/pazamoremo/3/edit?html,css,output -->

	<div>
		<span>0 1 2 3 4 5 6 7 8 9 10 0</span>
	</div>
On gists

Function called only once

JavaScript

example.js #

const myFunc = () => {
  if (myFunc.fired) {
    return;
  }
  myFunc.fired = true;
  //...
};
On gists

Non-Rectangular Headers (Tilt / Trapezoidal)

•
Popular ⭐ CSS CSS trick

demo1.html #

<!--
  SVG
  https://codepen.io/erikdkennedy/pen/ygpwZg?editors=1100
-->
<header>
  <h1>Header Content</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="red" points="0,100 100,0 100,100"/>
  </svg>
</header>

<section>
  <h1>Section Content</h1>
</section>