Chris Ryana chrisryana

Интересно следить 👀

Людмила Мжачих (Mail.ru) CSS: The Good Parts
Никита Дубко (Яндекс) Houdini CSS, который JavaScript
Иван Акулов (epam) блог
Артем Арутюнян (CSSSR) Styled Components
Вадим Макеев (Веб Стандарты) Чистый CSS для грязных трюков
Юрий Артюх (про анимации и Web GL) История одной анимации
Анна Тюдор (про анимации, Web GL и гудини) 3D Transforms
Бюро Горбунова (рубрика советов) Как флексить

📖Здесь собраны статьи, которые я как то прочитывала и закрывала. А потом пыталась вспомнить: "где же я об этом читала?" и тратила по полчаса на поиски. Иногда вовсе не находила

Как убрать предупреждения о безопасности в репозитории

Предупреждения об угрозе связаны с файлом package-lock.json. Можно просто добавить этот файл в .gitignore или:

1. Склонируйте репозиторий на компьютер

git clone https://github.com/username/repo.git

username – логин на гитхабе
repo – название репозитория

Мысли о "потом" и "сразу".

Тратить минуту каждый день лучше, чем тратить целый день каждый месяц

Потом никогда не наступает, его просто не существует. Всегда все нужно делать сразу. Сразу удалять скриншоты с рабочего стола, которые ты только что отправил коллеге в телеграме. Сразу сортировать по папкам нужные закладки в браузере. Это поможет быстро ориентироваться в них, когда накопится много. Сразу удалять ненужные закладки из браузера. Представь, ты открываешь список закладок чтобы открыть нужную страницу. И тут твое внимание привлекает странная иконка со странным названием. Ты открываешь эту закладку и не понимаешь, зачем она тебе нужна какую информацию ты хотел сохранить. А может наоборот это ценная информация, например статья о чистоте кода в Javascript, но ты каждый день используешь эти приемы в работе и вызубрил их наизусть.

📝Вставка изображений в Readme.md

В этом кратком руководстве вы узнаете, как создать отдельную ветку в своем репозитории для размещения скриншотов и демонстрационных картинок для использования в файле Readme.md master-ветки.

1. Клонируйте репозиторий

Чтобы предотвратить любую потерю работы, лучше всего клонировать репозиторий в отдельном месте для выполнения этой задачи.

2. Создайте новую ветку

Полезные ресурсы для Frontend-разработчика

Онлайн-конвертер видео в gif
Screentogif – сервис для записи экрана в gif со следящим курсором (пример на хабре)
ScreenStory – красиво записать экран с приближением (от Сова пишет)
Focusee – красиво записать экран с приближением
Scribe – расширение chrome для записи красивых гайдов
Google Earth Studio – имитация аэросъемки, позволяет делать ролики, снятые будто в полете над Землей или даже из космоса
Generated Photos – генератор аватарок пользователей
SlidesGo – Бесплатные Google Слайды и PowerPoint шаблоны

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

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

	// функция убирает переносы строк при копировании из блочных элементов
	// пригождалась при попытке копировать из ячейки таблицы библиотеки react-virtualized
	// и вставить в инпут поиска
	onSelection = () => {
	const selectionParams = document.getSelection();
	if (selectionParams !== null) {
	const selectionText = selectionParams.toString();
	const selectionWithoutBrakes = selectionText.replace(/\n/, ' ');
	const div = document.createElement('div');

	// Решение проблемы производительности при событиях скролла, перетаскивания, изменениях размеров окна браузера и пр.
	// Этот способ обеспечивает 60fps, т.е. одна перерисовка на 16 мс

	constructor(props) {
	super(props);
	this.lastUpdate = +new Date();
	this.updateTimer = null;
	}

	shouldComponentUpdate(nextProps, nextState) {