Webchic - frontend, backend, ci/cd

Кодинговое интервью Google с обычным инженером программистом

#interview

Youtube(eng)

Josh W. Comeau: “Это круто! Меняйте числа, чтобы создать формы, затем скопируйте css созданной формы”

“Т.к. это clip-path, это можно применить к вашим картинкам, HTML элементам, к чему угодно!

Больше не надо border-хаков для создания базовых форм”

#css

Codepen

Twitter

Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com

#web #browser

К статье(rus)

Используй Google как профессионал

— кавычки для поиска с точным соответствием: "what is javascript"
— оператор AND вернет результаты, удовлетворящие каждому условию: html AND css
— оператор OR, если нужен результат с любым из заданных слов: (javascript OR python) free course
— оператор - для исключения результатов с вхождением: javascript -css
— Подстановочный знак *, для поиска любого совпадения: "how to start * in 6 months"
— Поиск в рамках сайта:
site:freecodecamp.org
— Поиск определенного типа файла: filetype:pdf learn css
— Поиск диапазона чисел:
ecmascript 2016..2018

#google

К статье(eng)

Josh W. Comeau:”Outline важен для доступности при фокусе, но его нельзя закруглить. Это можно решить с помощью box-shadow!”

.btn {
box-shadow:
0px 0px 0px 2px #2960C5,
0px 0px 0px 3px #FFFFFF;
}

#css

Codepen

Twitter

В чём разница между узлом и элементом DOM?

#browser #html

К статье(rus)

Charlie Gerard: “Я сделала новую штуковину😃”

“Создала JS-библиотеку, которая использует отслеживание радужной оболочки глаза для прогнозирования направления взгляда пользователя.

Думая о a11y, я сделала клавиатуру, которую люди могут контролировать глазами”

#ml #tensorflow #a11y

Demo

Github

Twitter

Glassmorphism эффект при наведении мыши

#css

Codepen

К статье(eng)

Терминал Linux: шпаргалка

— ls -lah - показ спрятанных файлов + человекочитаемый формат
— which [name-of-the-program] - вывод пути к бинарному файлу программы
— history - вывод всех предыдущих команд
— cat [name-of-your-file] - вывод контента файла

и много других команд

#cli

К статье(eng)

Использование Framer Motion для анимации переходов между страницами в React

#react

К статье(eng)

Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

#angular

К статье(rus)

Интерактивная анимация загрузки

PS: и пжлст не нажимайте C

#animation

Codepen

Как отслеживать производительность веб-приложения с JavaScript и Performance API

#performance #browser

К статье(rus)

Новое свойство css aspect-ratio(соотношение сторон)

Позволяет вам устанавливать пропорции любого элемента без использования хака с padding-top!

#css

К статье(eng)

Строим систему для мониторинга качества frontend-проектов

Цели, которые преследовали разработчики проекта:

— оценивать актуальность проекта (своевременное обновление зависимостей);
— проверка на уязвимости;
— проверка легальности использования зависимостей (проверка лицензий);
— сбор статистики по размерам проекта;
— сбор статистики по таким параметрам, как Perfomance, SEO, Accessibility.

#performance #platform

К статье(rus)

Surma: “Мини-хак дня”

“Скрипт Google Analytics удален из моего блога в пользу пользовательского кода на основе sendBeacon()

Он меньше по размеру, он анонимный (я больше не слежу за пользователями), и я могу собирать основные веб-метрики.”

Twitter

Мои лучшие советы по css, опубликованные в Twitter

#css

К статье(eng)

Более 300 вопросов по React для подготовки к собеседованию.

#react

К репозиторию(rus)

5 npm трюков, которые вы возможно не знаете

— npm run - выводит доступные в package.json команды
— npm list - выводит установленные пакеты
— npm list --depth=0 - для ограничения глубины вывода
— npm home PACKAGE_NAME - открывает домашнюю страницу пакета
— npm repo PACKAGE_NAME - открывает репозиторий пакета
— npm v react versions - показывает доступные версии пакета
— npm outdated - показывает устаревшие версии пакетов, которые стоит обновить

#npm

К статье(eng)