Популярный анализатор 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

«Дизайн в основном создаётся с сеткой базовых блоков. Если отступ между элементами не делится на базовую единицу сетки, то это, скорее всего, ошибка. Например, если шаг сетки — 8px, и вы видите отступ в 199px, скорее всего, подразумевалось 200px».

В статье вы найдёте ещё 9 советов, которые помогут вам стремиться к pixel perfect дизайну: https://tprg.ru/0wWu

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

13 хитростей для работы с npm

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

Краткие записи основных команд, значения по умолчанию, упрощение работы со скриптами и репозиторием — 13 хитростей, которые позволят повысить эффективность работы с npm, в этой статье: https://tprg.ru/uYlJ

Также рекомендуем эту шпаргалку по npm.

#бэкенд #nodejs #npm

Посмотрите, какой крутой фреймворк на базе Vue.js: https://quasar.dev/introduction-to-quasar

На нём можно написать одностраничник, PWA, приложения для Android и iOS, даже мультиплатформенные десктопные приложения. И для всех приложений можно использовать одну кодовую базу.

Он довольно простой и большую функциональность предоставляет «из коробки», в том числе много UI-компонентов в стиле Material Design 2.0.

На гитхабе у фреймворка уже 11k звёзд: https://github.com/quasarframework/quasar

А посмотреть около 100 примеров приложений, уже использующих этот фреймворк, можно здесь: https://github.com/quasarframework/quasar-awesome

#фронтенд #vuejs

Visual Studio Code — редактор кода для кроссплатформенной разработки. Его особенностью является то, что он очень кастомизируемый. Например, сейчас на официальном сайте есть 2 655 расширений в категории «языки программирования».

Держите подборку из 27 плагинов, которые могут вам понравиться. Например, там есть плагин для тестирования HTTP-запросов прямо из VS Code или Material-тема, у которой почти 5 миллионов скачиваний: https://tprg.ru/Lj1P

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

Руководство по выживанию с MongoDB

MongoDB — это NoSQL-решение для хранения данных. С ним легко стартовать, и для многих проблем есть решения «из коробки». Но по мере увеличения нагрузки вылезают грабли, о которых заранее никто не предупреждает.

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

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

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

Рекомендуем вам интересное интерактивное руководство «JavaScript за 14 минут»: https://jgthms.com/javascript-in-14-minutes (русскоязычная версия: https://js14min.github.io/)

В нём вы шаг за шагом будете узнавать новые особенности языка и сразу же применять знания на практике прямо в браузере.

Конечно, весь JavaScript за 14 минут вы не выучите, но это отличный способ, чтобы заинтересоваться обучением или просто вспомнить что-то уже знакомое.

От того же автора есть похожий интерактив по веб-дизайну: https://jgthms.com/web-design-in-4-minutes

#javascript #дизайн