/ Gists

Gists

On gists

toRefs (props, reaktivita)

•
Vue.js

FooComponen.vue #

  const props = defineProps({
    category: String,
    data: Array,
  })
  
  // kvuli reaktivite, destructions neni reaktivni ...
  const { data, category } = toRefs(props)
On gists

Pure css paralax

CSS CSS trick

index.html #

<!-- https://codepen.io/keithclark/pen/ndEygj -->

<div id="title" class="slide header">
  <h1>Pure CSS Parallax</h1>
</div>

<div id="slide1" class="slide">
  <div class="title">
    <h1>Slide 1</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

<div id="slide2" class="slide">
  <div class="title">
    <h1>Slide 2</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
  <img src="https://picsum.photos/980/600">
  <img src="https://picsum.photos/960/600"> 
</div>

<div id="slide3" class="slide">
  <div class="title">
    <h1>Slide 3</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

<div id="slide4" class="slide header">
    <h1>The End</h1>
</div>
On gists

CSS - animated gradient background

CSS CSS trick

index.html #

<!-- https://codepen.io/mitchobert/pen/ogYBLo -->

<div id="gradient">
  <div class="headline">
    <h1>GRADIENT</h1>
  </div>
</div>
On gists

Detect click outside or inside

Vue.js

foo.js #

window.addEventListener('mousedown', e => {
  // Get the element that was clicked
  const clickedEl = e.target;

  // `el` is the element you're detecting clicks outside of
  if (el.contains(clickedEl)) {
    // Clicked inside of `el`
  } else {
    // Clicked outside of `el`
  }
});
On gists

Ignore platform

composer

terminal #

composer install --ignore-platform-req=php
On gists

Nette find template file if not exists

Nette Nette-Controls

findTemplate.php #

<?php

 if (!$this->template->getFile()) {
		$files = $this->formatTemplateFiles();
		foreach ($files as $file) {
			if (is_file($file)) {
				$this->template->setFile($file);
				break;
			}
		}
 }
On gists

Infinity loading

JavaScript ES 6

Infinity loading.js #

/* OLD */
let currentPage = 1;
let totalPages = 5;

window.addEventListener('scroll', function() {
  // Check if the user has reached the bottom of the page
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // Check if there are more pages to load
    if (currentPage < totalPages) {
      // Fetch the data
      await fetch('url')
      currentPage++
    }
  }
});


/* NEW */
/* https://javascript.plainenglish.io/you-dont-need-using-scroll-event-to-load-data-infinite-b893c46a84ea */
let isVisible = false;
// the element visible / unvisble will trigger the function.
const observer = new IntersectionObserver(entries => {
  isVisible = entries[0].isIntersecting
  if (entries[0].isIntersecting) {
      // load new content
      loadData().then(() => {
         setTimeout(() => {
           // if the loading element still visible means the list height is less than container
           // so try to load more
           isVisible && loadData()
         }, 100)
      })
   }
});

observer.observe(document.querySelector('.more')
On gists

useElementSize - own composable

Vue.js

useElementSize.js #

import { ref, watch } from 'vue';

function useElementSize(element) {
  const width = ref(0);
  const height = ref(0);

  let observer = null;
   
  function disconnect() {
    if (observer !== null) {
      observer.disconnect();
      observer = null;
    }
  }

  function connect(element) {
    disconnect();
    observer = new ResizeObserver((entries) => {
      const rect = entries[0]?.contentRect;
      if (rect) {
        width.value = rect.width;
        height.value = rect.height;
      }
    });

    observer.observe(element);
  }

  watch(
    element,
    (el) => {
      if (el) connect(el);
      else disconnect();
    }
  )
  
  return {
    width,
    height,
  };
}
On gists

Access Control (cross origin allow for all) - API

PHP Web Api

api.php #

<?php

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$films = [
    [
        'id' => 1628,
        'name' => 'Sám doma',
        'url' => 'https://www.csfd.cz/film/1628-sam-doma/prehled/',
    ],
    [
        'id' => 1629,
        'name' => 'Sám doma 2',
        'url' => 'https://www.csfd.cz/film/1629-sam-doma-2-ztracen-v-new-yorku/prehled/',
    ]
];

echo json_encode($films);
On gists

Fast images via API fetch

JavaScript

fetch.js #

fetch("https://dog.ceo/api/breeds/image/random/10")
 .then((response) => response.json())
 .then((data) => data.message)
 .then(arrayOfLinks => console.log(arrayOfLinks))