- Pure JavaScript Functions as a Replacement for Lodash (Apr, 2019)
- Gatsby: Querying data
- Writing Resilient Components (Mar, 2019)
- Intro to React hooks
function getWorkshopIdFromUrl(url) { | |
return url.split('id=')[1]; | |
}; | |
function getNodeType(node) { | |
return node.getAttribute('data-type') | |
}; | |
function getNodeDataValue(node) { | |
switch(getNodeType(node)) { |
const createRange = (start, amount) => | |
Array.from(Array(amount), (_, idx) => start + idx); | |
/** | |
* @param {array} array | |
*/ | |
const uniqueArray = array => [...new Set(array)]; | |
/** | |
* @param {array} array |
Document for the best design choices you can make for your software.
Terminology
components
containing all component files.File Structure
Structuring applications is hard, here are a few resources to help.
// Функция взята из интернета и доработана | |
// Источник - https://www.freecodecamp.org/news/javascript-debounce-example | |
function debounce (callback, timeoutDelay = 500) { | |
// Используем замыкания, чтобы id таймаута у нас навсегда приклеился | |
// к возвращаемой функции с setTimeout, тогда мы его сможем перезаписывать | |
let timeoutId; | |
return (...rest) => { | |
// Перед каждым новым вызовом удаляем предыдущий таймаут, |
document.addEventListener(`keydown`, (evt) => { | |
const keyCodeF = 70; | |
const isEnterAndCtrl = evt.keyCode === keyCodeF && evt.ctrlKey; | |
if (isEnterAndCtrl) { | |
evt.preventDefault(); | |
console.log(evt.keyCode); | |
} | |
}); |
const getParameterByName = (name) => { | |
const utmName = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
const regex = new RegExp("[\\?&]" + utmName + "=([^&#]*)"); | |
const result = regex.exec(location.search); | |
return result === null ? "" : decodeURIComponent(result[1].replace(/\+/g, " ")); | |
} | |
getParameterByName('utm_term'); |
const convertTime = { | |
part: 60, | |
convert(inSec) { | |
const inMin = Math.floor(inSec / this.part); | |
const hour = Math.floor(inMin / this.part); | |
const min = Math.round((inMin / this.part - Math.floor(inMin / this.part)) * this.part); | |
const sec = Math.round((inSec / this.part - inMin) * this.part); | |
return `${this.checkZero(hour)}:${this.checkZero(min)}:${this.checkZero(sec)}`; | |
}, |
const carsSale = [ | |
{ | |
brand: `KIA`, | |
model: `Ceed`, | |
miles: 32080, | |
}, { | |
brand: `TESLA`, | |
model: `MODEL X`, | |
miles: 2080, | |
}, { |
<script> | |
alert( 'Hello, world!' ); | |
</script> |