Кроссбраузерная библиотека для CSS-анимаций: https://github.com/daneden/animate.css

Просто скачивайте css-файл, добавляйте его в свой проект и используйте разнообразные анимации. Примеры использования в коде можно посмореть на гитхабе, а сами анимации — на демо-сайте: https://daneden.github.io/animate.css/

#css

Чтобы изучить ООП, в основном приходится искать кучу разрозненных статей по всему интернету или читать фундаментальные книги. Статьи при этом часто либо слишком академические, либо слишком простые. А книги в основном толстые и заумные. Хочется, чтобы всё было удобно, в одном месте и написано понятным языком.

Два неравнодушных фронтендера перелопатили кучу источников и написали Солидбук. Весь код написан на TypeScript, в каждой главе есть паттерны и антипаттерны, примеры из идеального мира и реальной жизни, а также интерактивные тесты для самопроверки: https://ota-solid.now.sh/

#typescript #ооп #solid

⁠Open source проекты на React

Как правило, когда программист достигает определённого дзена в разработке, у него появляется желание применить знания вне основной работы. Например, в open source проектах. Это полезно и для профессионального развития, и для разработчиков вокруг.

В этой статье автор рассказывает, как выбрать хороший open source проект, в который можно контрибьютить и не бояться потратить свои силы впустую.

Также он рассказывает про лучшие проекты с открытыми исходниками, основанные на React. Можно выбрать инструменты для разработки, а можно какие-нибудь компоненты для вёрстки: https://flatlogic.com/blog/best-react-open-source-projects/

#javascript #react

Нововведения Postgres 12

Этой весной на конференции HighLoad++ Олег Бартунов, разработчик Postgres, генеральный директор Postgres Professional, рассказал про Postgres 12, который оказался очень богатым на фичи: https://www.youtube.com/watch?v=uhvqly8MtoI

Их простое перечисление выглядело бы очень уныло, поэтому он выбрал некоторые из них, о которых и рассказал более подробно. Например, в 12 версии ожидаются поддержка KNN для SP-GiST и B-tree (для тех, кто не знает или не помнит, что такое SP-GiST и KNN, спикер рассказывает).

#базыданных #postgresql

Разработка веб-серверов на Go

При помощи стандартных компонентов языка можно разрабатывать серверные приложения. В статье рассказываем, как это сделать, начиная с «Hello World!»: https://tproger.ru/translations/go-web-server/

В итоге получится приложение, которое:
— использует Let’s Encrypt для HTTPS;
— выполняет маршрутизацию запросов к API;
— реализует промежуточную обработку запросов;
— раздаёт статические файлы;
— корректно завершает свою работу.

Если вам интересно посмотреть сразу на готовый код, то заходите на GitHub: https://github.com/jordan-wright/http-boilerplate

#бэкенд #go

⁠Хуки в React

В последней версии React 16.8 появились хуки, цель которых — упростить процесс разработки компонентов.

Хуки позволяют переиспользовать шаблонный код, разбить один компонент на несколько маленьких функций по их назначению, а не на основе методов жизненного цикла. Также с их помощью можно использовать больше возможностей React без написания классов.

В официальной русскоязычной документации React есть раздел, посвящённый хукам. Там есть правила и примеры использования готовых хуков, пример создания кастомных и ответы на популярные вопросы по теме: https://ru.reactjs.org/docs/hooks-faq.html#which-versions-of-react-include-hooks

А чтобы закрепить тему на настоящей практике, рекомендуем статью, в которой разрабатывается чат с использованием хуков React: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

#reactjs #pwa

Помните про файл robots.txt, который позволяет разработчикам исключать определённые страницы сайта из поисковой выдачи?

Так вот, у GitHub в этом файле есть одна интересная деталь. В секцию Disallow добавлен единственный пользовательский репозиторий — «/ekansa/Open-Context-Data»: https://github.com/robots.txt

В твиттере создатель этого репозитория рассказал, что однажды он решил использовать гитхаб в качестве публичного хранилища большого количества XML-файлов своего проекта OpenContext: https://twitter.com/ekansa/status/1137052076062650368

В итоге в этот репозиторий полились реки трафика из поиска, что, собственно, и не понравилось гитхабу. Простейшим способом решить эту проблему стало добавление всего репозитория в robots.txt.

А ещё в конце этого файла есть пасхалочка для людей, которые в душе поисковики.

Очень хочется, чтобы была такая документация, в которой можно было бы найти всё, что угодно. DevDocs определённо похожа на такую: https://devdocs.io/

Там собрано множество документаций API в структурированном виде: CSS, JS, Angular, Vue.js, Git, Docker. Возможно, проще перечислить то, чего там нет. Если вы всё же нашли что-то отсутствующее, то исходники открыты, можно добавить: https://github.com/freeCodeCamp/devdocs

А ещё в офлайне работает.

#api

Полный цикл тестирования React-приложений

Стремление уйти от ручного регрессионого тестирования — хороший повод внедрить автотесты. Вопрос, какие именно?

Разработчики интерфейсов из Яндекса рассказали, как в Авто.ру построено тестирование фронтенда на базе Jest и Puppeteer: юнит-тесты, тесты на отдельные React-компоненты, интеграционные тесты. И самое интересное из этого опыта — изолированное тестирование React-компонентов в браузере без Selenium Grid, Java и прочего.

Видео (доклад начинается на отметке 4:41:41, если вдруг не перемоталось автоматически): https://tprg.ru/oUGj

Текстовая расшифровка видеодоклада: https://tprg.ru/fFWO

#react #тестирование

⁠Fontello

Хотим рассказать вам про сервис Fontello: http://fontello.com/

Да, про тот самый, который вроде как обычный сервис для шрифтов с иконками. Оказывается, не совсем обычный.

Во-первых, там очень удобно выбрать несколько иконок, которые нужны для сайта, и назвать их так, как нужно, если стандартные имена не подходят.

Во-вторых, там можно добавить свои (!) иконки SVG-формата и при этом получить рекомендации по нормализации иконки (весит она, например, 1 КБайт, а сервис вам скажет, что можно бы и сжать до 400 байт вообще без потерь).

И всё, что сделано на сайте, сохраняется локально в браузере, т.е. переживёт перезагрузку компьютера, и ничего не потеряется. А скачать всё, что получилось, можно одной кнопкой. Мелочи, но приятно.

Посмотреть, чем хороши шрифты с иконками можно на этом демо: https://css-tricks.com/examples/IconFont

А если вы любите истории, то можете почитать статью, в которой создатель Fontello рассказал о разработке сервиса: https://css-tricks.com/fontello-past-future-icon-font..

Плюс ещё несколько альтернативных сервисов:
— Icomoon: https://icomoon.io/
— Fontastic: http://fontastic.me/

#фронтенд #дизайн #инструменты

⁠Эксплуатация cookie-based XSS

Один аналитик безопасности веб-приложений увлекается профессиональным поиском уязвимостей на платформе HackerOne.

Он выпустил новую статью, в которой рассказывает о часто встречаемой им cookie-based XSS уязвимости. Она возникает, когда значение параметра cookie рефлектится на страницу. По умолчанию такая уязвимость считается self-XSS.

В статье автор проводит подробный разбор эксплуатации cookie-based XSS уязвимости, а также приводит пример из тестирования одной компании, от которой он получил $7300 за исследование: https://tprg.ru/cookie-based-xss

#безопасность

⁠Лучшие практики Docker

Здорово было бы, если бы не нужно было отвлекать своих коллег для шаблонного code review, правда? Для некоторых ситуаций уже есть свои решения.

Для докера есть такой вот скрипт, который проверит, использовали ли вы лучшие практики для развёртывания контейнеров в продакшн: https://github.com/docker/docker-bench-security

Для удобства использования всё запаковано в один небольшой контейнер. Всё, что нужно сделать, — запустить его. В итоге получится такой отчёт, в котором вы сможете детально разобраться, где вы молодец, а где можно и лучше.

#docker #инструменты #лучшиепрактики

⁠Вознаграждение за баги в Chrome

Google увеличила вознаграждение за репорты багов безопасности Chrome. Теперь за «репорт высокого качества» можно получить $30 000. А за ошибки в Chrome OS можно получить до $150 000: https://tprg.ru/buD1

В компании составили список категорий ошибок, которые им особенно интересны, а также уточнили, что считается «репортом высокого качества»: https://tprg.ru/8rl3

А вы как-нибудь участвовали в чём-то подобном? Какое максимальное вознаграждение получали?

#безопасность #chrome

​​Нашли забавный проект на GitHub — hostyoself, с помощью которого можно хостить сайт из любого браузера. Для серьёзных проектов такой хост, конечно, не подойдёт, но для развлечения в скучный пятничный вечер — самое то.

На видео — пример того, как можно захостить сайт hostyoself.соm на самом себе. Да здравствует рекурсия.

А в статье мы рассказываем, как запустить хост с браузера или командной строки и настроить редирект. И отвечаем на вопросы по проекту: https://tproger.ru/translations/about-hostyoself/

#кек

Объединение CSS-файлов в один для WordPress

Есть много способов, которые могут помочь уменьшить время доступа к сайту. Например, можно уменьшить количество HTTP-запросов. И в этом случае перед нами много вариантов. Один из них — объединить несколько CSS-файлов в один.

Использование нескольких CSS-файлов на сайте, работающем на движке WordPress, практически неизбежно. Это происходит потому что и тема, и отдельные плагины могут использовать несколько файлов. Поэтому их объединение важно для оптимизации.

В статье рассматривается ручное объединение CSS-файлов и автоматическое: https://tprg.ru/pMA1

И аналогичная статья для JS-файлов: https://tprg.ru/QUZm

#css #javascript #wordpress

Популярный анализатор WebPageTest проверяет загрузку страниц из разных точек мира и отображение сайта в разных браузерах: https://www.webpagetest.org/

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

Напоминаем, что у нас есть подборка из 12 других сервисов для анализа сайтов. Где-то можно проверить скорость и удобство использования, где-то — SEO-оптимизацию: https://tproger.ru/digest/website-inspection-services/

#инструменты #анализ

Программирование намного проще изучать, если визуализировать теорию. Давайте посмотри на конкретный пример.

Наверняка вы сталкивались с функциями типа map, filter, reduce. И, скорее всего, вы всё равно не сможете точно ответить на некоторые вопросы о подробностях их работы. Создаётся ли копия исходного массива? А ссылка на исходный массив изменяется?

Один JavaScript-разработчик визуализировал и объяснил эти функции, после чего вопросов не остаётся: https://tprg.ru/grAG

#javascript

Видеокурс по JavaScript

41 урок, в которых вы сможете изучить JavaScript для фронтенд-разработки с самых основ.

В ходе курса вы напишите простейший калькулятор, игру про кошку и мышку и несколько других обучающих игр и приложений. В ходе этого вы также изучите основы адаптивной вёрстки, работу с DOM и много других фишечек пользовательского интерфейса.

Все уроки — в плейлисте на YouTube: https://tprg.ru/k6c7

#фронтенд #javascript

Flexbox призван спасти от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но иногда разобраться в принципах его работы бывает сложно, особенно новичкам.

У нас есть статья, в которой объясняются основные свойства CSS Flexbox с помощью наглядных гифок: https://tproger.ru/translations/how-css-flexbox-works/

#фронтенд #css

Есть ли у вас какая-нибудь идея приложения, которую вы постоянно откладываете? Возможно, вам не хватает мотивации? Тогда почитайте статью, в которой веб-разработчик рассказывает, как он за пару дней написал инструмент для форматирования кода.

Подробно описал процесс проектирования приложения, его разработку, используемые инструменты и библиотеки: https://css-tricks.com/how-i-created-a-code-beautifier-in-two-days/

А если хотите просто посмотреть на инструмент, то переходите сюда: https://www.surrealcms.com/beautify/

#фронтенд #pwa #vue

Ускоряем загрузку своего сайта

«53% пользователей покинут сайт, если он не загрузится за 3 секунды», — говорится в исследовании от Google Ad Manager.

Рассказываем, как измерить текущую производительность вашего приложения, и даём несколько советов по его оптимизации: https://tproger.ru/translations/how-to-boost-frontend

А для более тщательной проверки оптимизации советуем пройтись по Front-End Checklist.

#фронтенд