Как добавить немного интерактивности сайту при помощи такой анимации ссылок при наведении? Читайте в статье:

https://tprg.ru/dNmC

#фронтенд #css

Большая подборка JavaScript и TypeScript инструментов

Разбиты по категориям: компиляторы, кодогенераторы, линтеры, тестирование и многое другое

https://tprg.ru/yr23

#javascript #typescript

Как управлять SSH-юзерами?

Когда приходится управлять SSH-пользователями нескольких серверов одновременно, здорово может помочь какой-нибудь подходящий для этого инструмент. Например, такой:

https://tprg.ru/oPzs

#ssh

Стэнфордский курс по веб-безопасности

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

Из курса вы узнаете про распространённые веб-атаки и способы защиты от них, модель безопасности браузеров, популярные уязвимости веб-приложений, TLS-атаки, дактилоскопирование, методы написания безопасного кода.

А в качестве практики вам предложат написать эксплойты, защитить небезопасные веб-приложения и внедрить новые веб-стандарты:

https://tprg.ru/lMu3

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

Приложение на React по конвертации чисел из двоичной системы исчисления в десятичную. Исходники тут:

https://tprg.ru/pBlM

#фронтенд #react

Репозиторий, в котором собрано 23 примера, в которых можно запросто обойтись без JavaScript:

https://tprg.ru/9ABW

#фронтенд #css

Подборка из 7 cloud-based инструментов для нагрузочных тестов

https://tprg.ru/Ks7T

#тестирование #облака

30+ инструментов браузера, о существовании которых стоит знать

Сегодня встроенными в браузеры инструментами можно решать много интересных задач. Например, можно настроить процесс оплаты чего-либо, реализовать режим Picture-in-Picture или создавать интерактивные push-уведомления.

В этом репозитории собрано ещё около 30 возможностей браузеров, о которых вы могли не знать:

https://tprg.ru/laFI

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

Полное руководство по HTML-атрибутам data-*

Атрибуты data-* в HTML — это атрибуты, которые применяются для удобного хранения в HTML-элементах различной полезной информации.

Рекомендуем вам это подробнейшее руководство по этим атрибутам, которое поможет освежить память или узнать что-то новое:

https://tprg.ru/yYvF

#фронтенд #html

​Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

Когда какое-то правило в CSS не работает, то часто возникает соблазн добавить !important и пойти заниматься другими важными задачами.

Рассказываем, почему так делать не стоит:

https://tprg.ru/9idw

А в конце статьи проходите небольшой тест, в котором проверяем ваши знания правил CSS.

#фронтенд #css

Архитектура фронтенда

Серия статей, в которой автор детально разбирается с архитектурой фронтенда. В каждой статье он слой за слоем разбирает её основные составляющие:

— большой круг: https://tprg.ru/pjCA
— средний круг: https://tprg.ru/bjtv
— малый круг: https://tprg.ru/ONPX
— автоматизированное тестирование: https://tprg.ru/4JUn
— оболочка: https://tprg.ru/zMEa
— ядро: https://tprg.ru/pB6b

#фронтенд #архитектура

Тёмная тема Stack Overflow

Тут Stack Overflow на днях тёмную тему выкатил. А теперь опубликовали статью, в которой подробно рассказали про процесс её создания и внедрения:

https://tprg.ru/WVps

#фронтенд #дизайн

Несколько годных советов по оптимизации веба. Несмотря на то, что статья от 2018 года, она всё ещё актуальна:

https://tprg.ru/yGtf

#оптимизация

Гайд по реализации футера, который будет выскальзывать из-под контента при прокрутке страницы:

https://tprg.ru/zJ1K

#фронтенд #css

CSS Viewport Units — это относительные единицы измерения, рассчитывающиеся в процентах от размеров области просмотра браузера.

Рекомендуем хороший гайд, в котором на понятных примерах показано, как их использовать:

https://tprg.ru/GeDp

#фронтенд #css

Ищем пишущего редактора к нам в команду. Не только по теме веб-разработки. Пожалуйста, поделитесь по знакомым — очень нужен хороший человек, который сможет развиваться вместе с нами.

Подробности на странице вакансии: https://tproger.ru/jobs/fullstack-editor-tproger/

Обратите внимание на все тонкости, в том числе стаж, стартовую зарплату, путь в компании и требования по скилам.

security.txt — это файл, который регламентирует общение между создателем сайта и теми, кто находит уязвимости в их приложении.

Чтобы не изобретать велосипед, можно просто открыть специальный генератор, с помощью которого вы создадите свой security.txt, а также почитаете, что с ним делать и где разместить:

https://tprg.ru/JrQZ

А в этой статье ребята из Cloudflare рассказывают о своём опыте применения security.txt:

https://tprg.ru/sRXd

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

​20 проектов для прокачки навыков в JavaScript

https://tprg.ru/FtUl

Для каждого проекта приведено описание, реализация и демо. Вот, например, игра «Виселица» из этой подборки:

#javascript

​Типичные ошибки в дизайне сайта

Пиксельное проектирование, игнорирование user-flow, использование старых шаблонов — эксперты рассказали, какие типичные ошибки допускают новички при разработке дизайна и интерфейса сайта:

https://tprg.ru/CpUo

#дизайн #ux

Что изучать веб-разработчику

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

Для каждой темы/инструмента есть список ресурсов, где можно всё это изучить. HTML, CSS, JS, PWA, фреймворки, тестирование, безопасность, архитектура, дизайн, алгоритмы, базы данных — всё есть:

https://tprg.ru/LfoT

Как починить перегруженный сервер

Если на ваш сайт неожиданно пришло большое количество пользователей, и он перестал справляться с нагрузкой, то проблема решается в 4 этапа:

1. Поиск причин отказов.
2. Быстрые фиксы, которые вернут сайт к жизни.
3. Улучшение сайта.
4. Мониторинг.

В этой статье веб-разработчик из Google подробно рассказывает про каждый из этих этапов:

https://tprg.ru/MX52

Вам, кстати, удобнее читать на английском или нужен перевод? Отвечайте в опросе. А если хотите перевести эту статью, то напишите на почту experts@tproger.ru.

#бэкенд #производительность