/ Gists

Gists

On gists

MySQL can't specify target table for update in FROM clause

MySql MySql tricks MySql - advanced

super-workaround.sql #

/*
  does not work!
*/

update Users set Valid = 0
where Id in (
  select Id from Users where Id < 100
)


/*
  workaround
  + one subselect more like a wrapper ;-)
*/

update Users set Valid = 0
where Id in (
  select Id from (
    select Id from Users where Id < 100
  ) as t
)
On gists

Expose Slots From a Child Component

Vue.js

ThirdPartyComponent.vue #

<template>
    <slot name="header" :header="header"> header {{ header }}</slot>
    <slot :default="default"> default {{  default }}</slot>
    <slot name="footer" :footer="footer"> footer {{ footer }}</slot>
</template>

<script>
export default {
    data() {
        return {
            header: 'Header value',
            default: 'Default value',
            footer: 'Footer value',
        };
    },
};
</script>
On gists

Watchefffect (Oldvalues & NewValues at the same time ;-))

•
Vue.js

watchEffect.js #

// onInvalidate

import { watchEffect, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect((onInvalidate) => {
      const oldValue = count.value // Store the current value as the old value
      onInvalidate(() => {
        const newValue = count.value // Get the new value when the effect is invalidated
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      })
    })

    return { count }
  }
}
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')