alizhdanov

// IF you need render from string in vue
// The beset example is a blog post, where your content are recieving from a server and you don't have control of it.

import Vue from 'vue';

import CustomComponent1 from './CustomComponent1.vue'
import CustomComponent2 from './CustomComponent1.vue'

export default {
    props: ['res'],

alizhdanov

// Regular version - unfortunately supported only by very lates browsers (chrome 60+, ff 55+, edge 16+, safari 10.1+)
el.addEventListener('eventName', fn, {once: true})

// decision - working everywhere
el.addEventListener('eventName', function cb(event) {
  // function code here
  
  event.currentTarget.removeEventListener(event.type, cb)
})

alizhdanov

import Util from './src/util'

const Default = {
    toggle : true,
    parent : ''
}

class Collapse {
    constructor(element, config) {
        this._isTransitioning = false

alizhdanov

// All credits and inspiration from this article https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9

const nodelist = document.querySelectorAll('.articles');

// Array.from method
// not supporting IE, Safari >= 9, probably will require pollyfill in your project
const array = Array.from(nodelist)

// Array.prototype.slice
// if i'm right browser support for this method even better than for HTMLColections, no pollyfils bro

alizhdanov

[...Array(N).keys()] // will generate array sequence with N length

// example
[...Array(5).keys()] // [0,1,2,3,4]

// Don't hesitate to use map if you need array started from some specific index
[...Array(5).keys()].map(i => i+1) // [1,2,3,4,5]

// Also You can create some fancy util function
const getSequnce = (n, offset=0) => {

alizhdanov

Regexp - шпаргалка

Синтаксис для создания

var regexp = new RegExp("шаблон", "флаги");
// or
var regexp = /шаблон/; // без флагов
var regexp = /шаблон/gmi; // с флагами gmi

alizhdanov

Math.random().toString(36).slice(2)

alizhdanov

 gulp.task('images-webp', function () {
     return gulp.src('./public/assets/img/**/*.{jpg,png}')
         .pipe(webp())
         .pipe(gulp.dest('./public/assets/img/'))
         .pipe(gulp.dest('./public/assets/img/'));
 });
 
 gulp.task('images-webp-posts', function () {
     return gulp.src('./public/files/post/**/*.{jpg,png}')
         .pipe(webp())

alizhdanov

// single-line solution
$('body').css('background-position', 'center ' + (-window.pageYOffset / 8) + 'px');

// more advanced solution
$('.paralax').each(function() {
        var position = (-window.pageYOffset) + $(this).offset().top

        position = -(position / 8)

        if (position >= ($(this).height() + $(this).height() / 2)) {

alizhdanov

function scrollTo(element, to, duration) {
  if (duration < 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 2;

	setTimeout(function() {
	    element.scrollTop = element.scrollTop + perTick;
	    scrollTo(element, to, duration - 2);
	}, 10);
}