chrisryana

// Если пользователь управляет сайтом с помощью мышки, outline скрывается
// Если начинает управлять клавиатурой, outline ставится на элементе следующем после 
// того, с которым взаимодействовал пользователь
// Обратить внимание на радио кнопки, фокус не появляется на них при управлении с клавиатуры
let lastDown, lastDownAt;

document.addEventListener('mousedown', e => {
  lastDown = e.target;
  lastDownAt = Date.now();
})

chrisryana

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

chrisryana

// Принимает целое число и массив склонений, выдает правильное числительное = (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, " ");

chrisryana

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

chrisryana

Разработка без боли

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

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

class InputWithLabel extends Component {
 constructor(props){

chrisryana

<!--
  Ползунок 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>

chrisryana

На случай если ноутбуку придет каюк *ттт* 🙊

Chrome Extensions

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

chrisryana

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);

chrisryana

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

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

chrisryana

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

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