/ Gists

Gists

On gists

Call a Child Component’s Method from Parent

Vue.js

component.vue #

// Parent.vue
<template>
  <ChildComponent ref="child" />
</template>


// In Parent.vue's methods
this.$refs.child.methodName()
On gists

Refresh (Reload) a Specific Component Dynamically

Vue.js

component.vue #

<template>
  <component-to-re-render :key="reloadMe" />
</template>

<script>
export default { 
  data() { 
    return { 
      reloadMe: 0, 
    }
  }; 
    
  methods: { 
    forceRerender() { this.reloadMe += 1; } 
  } 
}
</script>
On gists

Flex with gap

CSS CSS trick

demo1.css #

/* https://coryrylan.com/blog/css-gap-space-with-flexbox */


.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}
On gists

Config - prettier, editorconfig

Config files

.prettierrc #

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 120
}
On gists

Parent - child - overlay - increase parent by child

CSS CSS trick

index.html #

<!-- DEMO: http://kod.djpw.cz/ilcd -->

<div class="row">
    <div class="content">
        obsah row <br> 

    </div>
    <div class="overlay">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>

    </div>
</div>

<div class="row">
    <div class="content">
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
    </div>
    <div class="overlay">
        <div>1</div>
    </div>
</div>
On gists

PHP Diacritics regexp

PHP

dia.php #

<?php

if (preg_match('/[áčďéěíňóřšűőťúůýž]+/iu', $string)) {
    // obsahuje diakritiku
}
On gists

native js + trigger event

JavaScript

event.js #

const e = new Event('change')
const element = document.querySelector('#' + this.fakeFileId)
element.dispatchEvent(e)
On gists

Přihlášení backend usera do frontu a obráceně

Nette Nette-Tricks

backend-frontend-user.php #

<?php

// https://forum.nette.org/cs/34290-prihlaseni-admina-jako-uzivatel
// bez přepisování $user proměné 
public function handleKlientLogin($hash)
{
	overim hash a nactu data klienta

	$user = $this->getUser();
	$user->getStorage()->setNamespace('frontend');
	$user->login(new Identity($user->id, $user->role, ['username' => $user->username]));
	$this->redirect(....);
}
On gists

fluid-images.css

fluid-images.css #

_
On gists

Fluid images

CSS CSS trick

fluid-images.css #

/* https://www.zachleat.com/web/fluid-images/ */

img {
  max-width: 100%;
}
img[width] {
  width: auto; /* Defer to max-width */
}
img[width][height] {
  height: auto; /* Preserve aspect ratio */
}

/* Let SVG scale without boundaries */
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}