Skip to content

Instantly share code, notes, and snippets.

Looking for a job

Rinat Valiullov RinatValiullov

Looking for a job
View GitHub Profile

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.


JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

RinatValiullov /
Created Oct 21, 2017 — forked from paulirish/
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
RinatValiullov / gulpfile.js
Created Feb 5, 2018 — forked from glebcha/gulpfile.js
Gulp task sample (css and js minify+concat, compress images, watching for changes)
View gulpfile.js
// Определяем зависимости в переменных
var gulp = require('gulp'),
cache = require('gulp-cache'),
clean = require('gulp-clean'),
stream = require('event-stream'),
size = require('gulp-size'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
minifyCSS = require('gulp-minify-css'),
RinatValiullov / gulpfile.js
Created Feb 10, 2018 — forked from demisx/gulpfile.js
Gulp 4 gulpfile.js
View gulpfile.js
// Gulp 4
var gulp = require('gulp');
var using = require('gulp-using');
var grep = require('gulp-grep');
var changed = require('gulp-changed');
var del = require('del');
var coffee = require('gulp-coffee');
var less = require('gulp-less');
var coffeelint = require('gulp-coffeelint');
var sourcemaps = require('gulp-sourcemaps');
View !

Синхронизация настроек Sublime Text 3

RinatValiullov /
Created Mar 9, 2018 — forked from codedokode/
Задания на яваскрипт (простые)
View Gradient shadow in pure

Gradient shadow in pure CSS

alt text

<button>Let's Go !</button>
RinatValiullov / gist:c4c39280a95a6163a598d83b08db7644
Created Apr 21, 2018 — forked from rxaviers/gist:7360908
Complete list of github markdown emoji markup
View gist:c4c39280a95a6163a598d83b08db7644


:bowtie: :bowtie: 😄 :smile: 😆 :laughing:
😊 :blush: 😃 :smiley: ☺️ :relaxed:
😏 :smirk: 😍 :heart_eyes: 😘 :kissing_heart:
😚 :kissing_closed_eyes: 😳 :flushed: 😌 :relieved:
😆 :satisfied: 😁 :grin: 😉 :wink:
😜 :stuck_out_tongue_winking_eye: 😝 :stuck_out_tongue_closed_eyes: 😀 :grinning:
😗 :kissing: 😙 :kissing_smiling_eyes: 😛 :stuck_out_tongue:



None of the string methods modify this – they always return fresh strings.

  • charAt(pos: number): string ES1

    Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

RinatValiullov / Preload CSS - Not blocking CSS.html
Created Jul 25, 2018 — forked from thedaviddias/Preload CSS - Not blocking CSS.html
Preload CSS and don't block the DOM with your CSS file request.
View Preload CSS - Not blocking CSS.html
<link rel="preload" href="css/global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/global.min.css"></noscript>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function j(a){if(e.body)return a();setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,"only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! loadCSS rel=preload po