⁠Fontello

Хотим рассказать вам про сервис Fontello: https://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: https://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.

#фронтенд

Насколько хорошо вы знаете JavaScript?

Давайте проверим.

Какой результат получится при конвертации массива строк в целые числа с помощью map и parseInt? Отвечайте на вопрос в посте, а правильный ответ и его объяснение ищите в статье: https://tprg.ru/Kdrc

#javascript

Если вы устали от скучной вёрстки, то предлагаем вам немного повеселиться. Как насчёт того, чтобы сверстать на чистом CSS знакомых персонажей? Например, Симпсонов: https://vk.cc/1YC0we

Или кого-нибудь ещё:
— Спанч Боба: https://vk.cc/4dumkT
— Миньонов: https://vk.cc/5tLWbO
— Шагоход AT-AT: https://vk.cc/7AMN97
— Людей Икс: https://vk.cc/6n7Rxk

#фронтенд #css

Vue.js и server-side рендерингом

«Свой новый проект я решил попробовать сделать на Vue.js. Мне нужен был серверный рендеринг (SSR), CSS-модули, code-splitting и прочие прелести. Разумеется, для повышения производительности разработки нужна была горячая перезагрузка (HMR).

Я не хотел использовать готовые решения типа Nuxt.js, т.к. при разрастании проекта важно иметь возможность кастомизации. А любые высокоуровневые решения, как правило, не дают этого делать или дают, но с большими усилиями.

Основная проблема локальной разработки при использовании серверного рендеринга и горячей перезагрузки состояла в том, что мало запустить один webpack-dev-server. Мы должны также что-то сделать с исходниками, которые запускает Node.js, иначе при следующей перезагрузке страницы мы получим код, который не был обновлен на сервере, но обновился на клиенте.

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

В статье читайте, как её автор сделал удобной разработку на Vue.js с server-side рендерингом: https://tprg.ru/mCXr

#javascript #nodejs #vuejs

Сайт, на котором собрано 60 инструментов для PHP. Для анализа кода, управления зависимостями, написания тестов: https://phpqa.io/

А в этом репозитории ещё 80 линтеров, форматтеров и статических анализаторов: https://github.com/exakat/php-static-analysis-tools

#php #инструменты

Яндекс опубликовал наглядную статистику использования сайтами HTTPS. В России объём зашифрованного трафика за год вырос с 77 до почти 90%. А в 2016 году он составлял чуть больше половины всего трафика: https://tprg.ru/tfcR

За актуальным графиком распространения HTTPS в России и других странах можно следить на Яндекс.Радаре: https://radar.yandex.ru/https

#https

Шпаргалки по командам и лучшим практикам Git

Всего 6 файлов: 4 PNG и 2 PDF. Где-то команды повторяются, поэтому можно выбрать несколько понравившихся шпаргалок, распечатать, положить себе на рабочий стол и обращаться к ним при необходимости: https://tprg.ru/Yk0b

#git #шпаргалки

Курс для разработчиков бэкенда с использованием PostgreSQL 9.6

Для прохождения курса нужно понимать основы SQL и Unix. А в курсе речь пойдёт об общем устройстве PostgreSQL, использовании основных типов данных и объектов, программировании на стороне сервера и взаимодействии с клиенсткой частью приложения.

19 уроков и ссылки на все необходимые к ним материалы: https://postgrespro.ru/education/courses/DEV1

В дополнение к этому курсу есть ещё один небольшой текстовый курс. Про поиск проблемных запросов и их оптимизацию: https://postgrespro.ru/education/courses/QPT

А ещё есть видеолекции по администрированию PostgreSQL 10: https://t.iss.one/tproger_web/59

#бэкенд #базыданных #postgresql

С помощью Docker можно создавать микросервисы, которые позволят разрабатывать облачные приложения и системы. Чтобы выжать из него максимум через терминал, вам пригодятся эти 10 команд: https://tproger.ru/translations/top-10-docker-commands

Ещё больше команд для Docker вы можете найти в официальной документации: https://tprg.ru/docker-commands

#бэкенд #docker

JavaScript — динамически типизированный язык программирования, поэтому ситуация, когда переменная, содержащая значение типа string, в ходе выполнения программы становится ссылкой на значение типа object — это норма.

Для написания предсказуемых JavaScript-программ существует проверка типов. Для этого используется простой оператор typeof. Однако и он может вводить в заблуждение неопытных разработчиков.

В статье читайте про несколько способов реализации предсказуемой проверки типов для некоторых типов данных: https://tprg.ru/sgFV

#javascript