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 #дизайн

Смотрите, какой забавный прототип десктопного интерфейса в вебе. Написан на VanillaJS: https://codepen.io/yuvalsaraf/full/XLOOQO

Этот прототип, конечно, очень далёк от чего-то полноценного, но есть пара более серьёзных примеров операционных систем в вебе:
— OS.js: https://demo.os-js.org
— MSOS: https://msos.midspike.com

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

Перебор массива в PHP

С помощью чего быстрее всего можно перебрать массив в PHP? С помощью ключевых слов языка for, foreach, while? Или с помощью функций стандартной библиотеки array_*?

Автор этой статьи взял массив из 70k элементов, прошёлся по нему по 10 раз каждым из способов и ответил на этот вопрос: https://tprg.ru/XaG0

Не открывая статью, как думаете, какой результат он получил?

#php

GitHub и американские санкции

Пользователям из стран и регионов, в отношении которых действуют торговые санкции США (Крым, Иран, Куба, Северная Корея и Сирия), закрыли доступ к GitHub Marketplace и их приватным репозиториям: https://tproger.ru/news/github-usa-restrictions

Открыт остался лишь ряд сервисов для некоммерческого использования. Например, публичные репозитории, связанные с Open Source проектами, и GitHub Pages.

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

#github

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

Рекомендуем перевод статьи, автор которой рассказывает про:
— определение момента, когда нужно загружать изображения;
— поддержку адаптивных изображений;
— создание красивого начального состояния.

Читать: https://tprg.ru/Wksc

#фронтенд #html #css #javascript

В этом посте хотим удивить вас чатом. Вряд ли бы у нас это получилось, если бы это был какой-нибудь обычный чат. Мы хотим показать вам чат в браузерной консоли: https://console.chat

Просто открывайте сайт, заходите в JS-консоль браузера, пишите в неё cc() и вы попадёте чат, в который попадают все, кто проделал то же самое на этом же сайте.

Команды:
— username("имя") — взять себе имя в рамках чата;
— send("сообщение") — отправить сообщение в чат;
— send("сообщение", "254cf5") — отправить сообщение в чат и при этом выделить текст указанным цветом.

P.S. И лучше не писать туда никаких плохих слов, а то получите автоматический бан и без смены айпишника не сможете больше ничего писать.

#кек #javascript

⁠Все паттерны

В этом репозитории собраны все паттерны проектирования, которые только придумало человечество за время своего существования. Всего получилось 111 паттернов: https://github.com/iluwatar/java-design-patterns

Для каждого паттерна есть подробное описание и пример реализации на Java.

#паттерны #java

Тестирование ClickHouse

ClickHouse — это поколоночная СУБД, которую разрабатывают в Яндексе. В неделю в проекте создаётся около 40 пул-реквестов, что требует хорошей автоматизированной инфраструктуры тестирования кода на всех уровнях.

Один из разработчиков ClickHouse рассказывает, как устроен CI проекта и из каких компонентов состоит pipeline тестирования.

Также в докладе:
— особенности покоммитных сборок с разными конфигурациями в различных OS;
— все этапы тестирования: статический анализ кода, интеграционные тесты и тесты производительности;
— преимущества, которые даёт CI: удобство в обнаружении багов, организация двухнедельного релизного цикла и улучшение работы с контрибьюторами.

Презентация доклада: https://tprg.ru/FpRV

#бэкенд #ci #тестирование

Как работает PageSpeed Insights

Один из самых популярных инструментов для анализа веб-страницы — PageSpeed Insights от Google. Вы ему — страницу, он вам — оценку. Знаете, как он работает?

Около года назад Google полностью обновил его. Теперь на оценку сайта в первую очередь влияет реальная скорость загрузки страницы, а не какие-то технические пункты. Также теперь в приоритете при оценке сайта — его мобильная версия. Наиболее важные характеристики — через сколько времени после начала загрузки уже что-то видно, когда уже можно кликать, когда загрузится всё.

Как и раньше, есть рекомендации по улучшению. Но теперь они не связаны напрямую с оценкой, и не факт, что их воплощение улучшит ситуацию. А при бездумной реализации может и ухудшить (скорость превыше всего, помните?).

В этой статье автор разбирается, как PageSpeed Insights рассчитывает показатели скорости. Эти знания помогут более осознанно относиться к оценке и эффективно дорабатывать сайт: https://tprg.ru/how-google-pagespeed-works

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