Chris Ryana chrisryana

Git-репозитории достойные внимания

30 seconds of code – коллекция коротких фрагментов кода JavaScript
ru-test-assignments – тестовые задания для самостоятельного выполнения от разных it компаний
github-readme-stats – статистика профиля GitHub для Readme

WebDeveloper – для тестирования сайта
CSS Feature Toggles – отключает/включает поддержку css фич типа flexbox, grid и тп
JSON View – форматирует json в браузере
ColorPick Eyedropper – скопировать цвет с сайта
BrowserStack – эмуляция поведения сайта в разных версиях браузеров
Font Finder – скопировать шрифт с сайта

nanoid — генерирует уникальные id, запрещено использовать в keys react (уточнить чем лучше Symbol)

import React, { Component } from 'react';
import nanoid from 'nanoid'

class InputWithLabel extends Component {
 constructor(props){

	const getData = async (pagesCount, params) => {
	const pagesData = [];
	const promises = [];
	const { limit } = params;

	for (let i = 1; i <= pagesCount; i++) {
	const promise = api.method({
	params: { ...params, offset: (i - 1) * limit },
	});
	// сначала собираем промисы в одном массиве, не дожидаемся ответа

	// Миксин реализует грид систему внутри flex-контейнера
	// $cols - количество блоков в одном ряду
	// $margin - отступ между блоками в %
	@mixin grid-element($cols, $margin) {
	margin-bottom: $margin;

	// Если больше 5 блоков в ряду, то растягивать на всю ширину
	@if($cols >= 5) {
	width: 100%;
	margin-right: 0;

	import React from 'react';
	import Spinner from '../components/Spinner';
	import ErrorMessage from '../components/ErrorMessage';
	import DataService from '../services/DataService';

	export default function(WrappedComponent) {
	class withDataForComponent extends React.Component {
	constructor(props) {
	super(props);
	this.dataService = new DataService(props.id);

	<!--
	Ползунок https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range
	Кастомизация HTML5 progress element https://habr.com/ru/post/266895/
	-->
	<p>Audio settings:</p>

	<div>
	<input type="range" id="volume" name="volume"
	min="0" max="11">
	<label for="volume">Volume</label>

	// раскладывает полученную дату на запчасти и возвращает ее в виде объекта с доп данными
	export const destructDate = masterDate => {
	const now = dayjs();
	const dayNames = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']; // тк в dayjs 0 это воскресенье
	const dayNamesShort = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
	const monthsNames = [
	'Январь',
	'Февраль',
	'Март',
	'Апрель',

	// Принимает целое число и массив склонений, выдает правильное числительное = (N, ['час', 'часа', 'часов'])
	function declOfNum(n, titles) {
	return titles[
	n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 \|\| n % 100 >= 20) ? 1 : 2
	];
	}

	// Делит целое число на разряды пробелом
	function numberWithSpaces(x) {
	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");

	/* С помощью css блок текста ограничивается указанным количеством строк */
	/* Остальное скрывается троеточиями */
	.text {
	display: -webkit-box;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	}