Как разработать хорошее веб-приложение

В нашем новом материале эксперты в поделились советами на тему разработки веб-приложений: https://tproger.ru/experts/how-to-make-good-web-app/

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

#лучшиепрактики

⁠Нативная ленивая загрузка картинок в Chrome

В Chrome 76 появилась встроенная реализация ленивой загрузки картинок. Теперь не нужно писать никакого кода или использовать стороннюю JS-библиотеку. Для этого есть атрибут loading.

В статье читайте, как его использовать в тегах img и iframe, будут ли возникать проблемы, если вы уже используете какую-то стороннюю библиотеку, и как быть с поддержкой ленивой загрузки в других браузерах: https://web.dev/native-lazy-loading

#фронтенд

Создание движка для игры на чистом JavaScript

Видеоурок от нашего подписчика, в котором он показывает, как создать прототип игры на чистом JavaScript за 20 минут.

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

Исходники: https://github.com/SkanerSoft/SkanerSoft.github.io/tree/master/spin

#javascript

Подборка материалов по веб-разработке

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

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

Разработка гибридных PHP/Go-приложений с использованием RoadRunner

Программист с 12-летним опытом работы с PHP рассказал, как его команда разрабатывала собственный сервер РНР-приложений RoadRunner на Go для повышения производительности приложения.

В итоге у них получилось:
— увеличить скорость реакции точек приложения в 4 раза по сравнению с PHP-FPM;
— полностью избавиться от ошибок 502 под нагрузками;
— упростить систему деплоя и сборки проекта за счёт унификации приложения и избавления от лишней обвязки в виде nginx + PHP-FPM;
— ускорить общение между распределённой системой.

Текстовая версия доклада: https://habr.com/ru/company/oleg-bunin/blog/461827/

#бэкенд #php #go

В десктопном приложении Docker выкатили редизайн. Теперь кит на лого не улыбается.

Если для вас это принципиально, то обратите внимание на Podman. У них на лого улыбающийся тюлень: https://podman.io/

#docker #podman

⁠CSS-анимация

Для создания анимации плавного появления/исчезновения элемента часто используют jQuery. Это очень просто и удобно, но проблема в том, что это JavaScript-анимация. Хороший фронтендер знает, что самая высокая производительность — у CSS-анимации.

В этой статье рассказано, как реализовать анимацию появления с помощью CSS и решить возникающие при этом проблемы: https://tprg.ru/0nTL

Собственно, именно этот способ мы использовали для анимации меню на нашем сайте: https://tproger.ru

#фронтенд #css

5 плагинов для webpack

Если при сборке с webpack использовать плагины, то можно здорово упростить себе жизнь. Рекомендуем подборку из 5 таких плагинов. С их помощью можно:
— искать неиспользуемые модули;
— импортить модули с учётом регистра;
— решать конфликты версий библиотек;
— убирать круговые зависимости;
— анализировать скорость сборки.

Для каждого плагина — ссылка на гитхаб и npm: https://tprg.ru/YRWS

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

Создание веб-приложения с помощью Vue.js, Vuetify и Firebase

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

Содержание видеокурса и все уроки — у нас на сайте: https://tproger.ru/video/building-vuejs-app/

#фронтенд #vuejs

Типичные ошибки при работе со временем

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

В этом докладе спикер описал типичные ошибки, которые встречались ему в проектах на языках Java, C# и JavaScript. Он рассказал, как получить самую точную текущую дату, как обрабатывать асинхронные запросы и какие ошибки могут возникнуть в полночь.

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

#javascript #java

Подборка из 20 библиотек, реализующих разнообразные CSS-анимации: https://tprg.ru/bu3k

И ещё небольшой сайт, где можно найти несколько симпатичных CSS-лоадеров: https://loading.io/css/

#фронтенд #css

Материалы по React

Если вы начинаете разбираться с библиотекой React, то у нас есть для вас несколько советов, которые помогут войти в курс дела: https://tproger.ru/translations/9-useful-tips-react/

Если уже немного шарите, то изучите некоторые практики, с которыми пользоваться React станет легче: https://tproger.ru/translations/concepts-to-become-an-advanced-react-developer/

И немного практики. В этой статье рассказываем, как написать простое React-приложение, в котором можно смотреть погоду в разных городах: https://tproger.ru/translations/react-basic-weather-app/

#фронтенд #reactjs

Хотите быть в курсе последних айтишных новостей? Тогда вам в канал IT Новости. Публикуем их там сразу, как только узнали.

Подписывайтесь и узнавайте первым о релизах, исследованиях, новых дырах в безопасности и утечках данных: @tprogerlive

В течение 2020 года Google планирует прекратить поддержку протокола FTP в Chrome и Chromium: https://tprg.ru/t0qC

Начиная с версии Chrome 80 поддержка FTP будет отключена по умолчанию, но разработчики добавят флаг DisableFTP, позволяющий вернуть поддержку протокола. А в Chrome 82 выпилят весь код, связанный с FTP.

Основные причины для этого — небезопасность и непопулярность протокола. По данным Google, сейчас им пользуется 0,1% пользователей.

#chrome

Несколько шпаргалок по PHP

— популярные функции и конструкции языка:
https://tprg.ru/php-cheatsheet

— основные команды для фреймворка Laravel:
https://tprg.ru/laravel-cheatsheet

— все команды менеджера пакетов Composer:
https://tprg.ru/composer-cheatsheet

— и ещё парочка шпаргалок по синтаксису языка:
https://gofile.io/?c=HeKRl6

#php #laravel #composer #шпаргалки

Игра в иконке вкладки браузера

Чем заняться веб-разработчику, когда совсем скучно? Например, написать игру в иконке вкладки браузера.

Поиграть в игру, которую сделал автор видео, можно здесь: https://mashpoe.github.io/favicon-dino-game

А исходники лежат тут: https://github.com/Mashpoe/favicon-dino-game

#фронтенд #кек

Простой Markdown-редактор, написанный с использованием библиотек CodeMirror, Markedjs и Create-react-app: https://github.com/completejavascript/markdown-editor

Напоминаем, что вы можете делиться своими проектами (большими и не очень) с подписчиками, предлагая пост в Веб-страницу в VK или в отдельной теме для обсуждений там же: https://vk.com/topic-183460226_39347693

#фронтенд

Советы по оптимизации HTTP/2

Рекомендуем хорошую статью, в которой собраны лучшие практики по оптимизации сайта для HTTP/2 от Cloudflare: https://tprg.ru/32fQ

Сейчас достаточно провести оптимизации только для HTTP/2, потому что его поддерживают больше 95% браузеров: https://tprg.ru/h56A

#http2 #лучшиепрактики

Алгоритмы и структуры данных

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

#алгоритмы #javascript

⁠Как перейти с jQuery на чистый JavaScript

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

Автор этой статьи недавно решил отказаться от jQuery и составил это практическое руководство по самым распространенным паттернам в jQuery и тому, как написать их на чистом JavaScript: https://tprg.ru/Uptm

#фронтенд #javascript #jquery

Справочник по nginx

Ресурсов по nginx много, а хочется, чтоб был один, в котором всё есть. И, собственно, вот он: https://github.com/trimstray/nginx-admins-handbook

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

#бэкенд #nginx