Веб-разработка *

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

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

Лет 6 назад я задавался вопросом "Как правильно организовать распределенное проектирование БД?" Тогда ответа на свой вопрос я так и не получил, но за прошедшее с тех пор время я встретился с вариантом, наиболее близко подобравшимся к моему видению "прекрасного" — это декларативная схема описания данных в Magento 2.

Мне нравится философия таких программных систем, как Magento, Odoo, WordPress, Drupal — базовый функционал, расширяемый за счёт сторонних плагинов. Она значительно отличается от философии FAANG. Философия FAANG направлена на построение уникальных высокопроизводительных решений, а философия WordPress — на адаптируемость к требованиям бизнеса. Каждый из этих подходов имеет свои плюсы и минусы, но мне ближе второй и рассматривать вопрос, вынесенный в заголовок публикации, я буду именно в рамках WordPress-подхода (WP-подхода).

Я не предлагаю решение, я просто размышляю вслух на обозначенную в заголовке тему.

Подборка свежих новостей и материалов из мира PHP. Вышла третья бета PHP 8.1, Swiftmailer больше не будет поддерживаться, PHP-FIG обсуждает обновляемые стандарты PER. Для PHP 8.2 предложены два новых RFC: про удаление динамических свойств и перегрузку операторов. Также в выпуске порция полезных инструментов, статьи и видео.

Приятного чтения!

Привет, друзья!

На днях мне посчастливилось заниматься решением 2 несложных, но довольно интересных задач на чистом JavaScript (из-за React чуть не забыл, как это делается). В процессе решения этих задач никто не пострадал, напротив, все остались довольны. Поэтому я решил поделиться результатами с сообществом.

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

Введение

Итак, задачи были следующими:

• Реализовать навигацию по разделам сайта с визуальным переключением индикатора текущего местонахождения пользователя и возможностью переходить к определенному разделу по клику. Сама навигация согласно макету должна была выглядеть так:

• Реализовать "ленивую" (отложенную, lazy) загрузку медиаресурсов (изображений, аудио и видео), поскольку те же изображения даже после сжатия с помощью gulp-imagemin весили (и весят, потому что они никуда не делись) неприличные 50 Мб и загружались при запуске приложения (больше они себя так не ведут).

Недавно я в очередной раз столкнулся с типичной проблемой: для создания нового функционала фронтенд и бэкенд нужно было реализовывать параллельно. Но как делать фронт, не имея 100% рабочих эндпойнтов на бэкенде? Сегодня я расскажу о том, какие подходы применял, и разберу их плюсы и минусы.

Статья про то, как реализовать шаринг в Facebook и ВКонтакте, используя JavaScript. Мы рассказали про собственный опыт, включая все ошибки, которые вы сможете избежать.

АСНА входит в пятерку лидеров на российском аптечном рынке и задачи ставит соответствующие: сложные и масштабные.

В этой статье расскажем о большой задаче, которую мы решили для АСНА  — интеграции с сервисом Mindbox для проведения сложных рекламных кампаний, аналитики и продвижения.

Всем привет, меня зовут Иван, я – разработчик ПО в Orion Innovation. Сейчас много публикаций по фронтенд-разработке, в которых начинающему специалисту легко потеряться и упустить неочевидные вещи.

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

Привет, друзья!

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

• Using Forms in React
• React.js — формошлепство или работа с формами при помощи пользовательских хуков
• Form validation with React Hooks WITHOUT a library: The Complete Guide

Я тоже решил попробовать в этом свои силы, чему и посвящена настоящая статья. Под "этим" я подразумеваю разработку кастомного хука для работы с формами в React.

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

Для большей правдоподобности мы напишем простой express-сервер, который будет возвращать некоторые пользовательские данные (например, jwt-токен и хешированный пароль), а также некоторые типичные для процесса авторизации ошибки (например, 404 User not found или 409 Email already in use).

При разработке хука и компонентов приложения мы применим несколько продвинутых паттернов, которые, смею надеяться, покажутся вам интересными.

Песочница:

Возможно, для того, чтобы в песочнице все заработало, потребуется ввести команду yarn dev в терминале.

Хук в форме npm-пакета — simple-form-react.

В этом переводе к старту курса по Fullstack-разработке на Python напоминаем о том, насколько важно знать технологии в деталях, грамотно применять их и планировать работу в целом. Цифра 2850 в заголовке — не преувеличение: ранее занимавший две минуты запрос в базе данных компании Affinity сегодня выполняется за 42 миллисекунды. Подробности, как всегда, под катом. А если вам нужен план развития навыков с большим количеством практики, вы можете обратить внимание на наши курсы.

Один из организаторов митапов для креативных разработчиков в Бельгии Creative Front-end Belgium в двух постах на CodePen рассказывает и показывает, как шаг за шагом сделать туннель из частиц с эффектом движения в нём. К старту курса по Frontend-разработке делимся сокращённым переводом этих статей об анимации, которая, по словам автора, нравится ему больше всего; вы увидите эксперименты с параметрами анимации, поэтому легко поймёте, как адаптировать код для своих нужд, например, для эффекта на сайте или в вашей игре.

CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.

Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.

Как-то раз наши разработчики тёрли за что-то важное у кофемашины и между делом стебались, что им скоро придётся уйти из .NET, потому что язык вымирает. Шутки шутками, но мысль застряла в голове и не отпускала.

Чтобы прояснить ситуацию, мы заглянули в DotNet-сообщество, сходили  к ребятам из Microsoft, Райффайзенбанка, Контура, CUSTIS и задали несколько вопросов. Вы тоже возьмите чашечку кофе, устройтесь поудобнее, поразмышляйте о будущем .NET и поделитесь своими мыслями в комментариях.

К старту нашего флагманского курса по Data Science представляем перевод обзора JupyterLite прямо из блога его разработчиков. JupyterLite — это перезагрузка множества попыток создать полный статический выполняемый в браузере дистрибутив Jupyter, чтобы не было необходимости запускать сервер Jupyter.

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

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

Что делать, если сайт на WordPress грузится медленно? Ответ на самом деле прост – настрой кеширование. Можно ещё заниматься оптимизацией изображений, настройкой lazy loading и прочими хитростями. Но кеширование всё равно остаётся ключевым способом ускорения любого сайта на Вордпресс. Кажется, всё просто, зайди в Google, напиши "WordPress cache", найди статью, где больше всего картинок, скачай упомянутый в статье плагин и выстави настройки согласно скриншотам. При любом раскладе твой сайт сразу начнет работать в разы быстрей.

Но дьявол, как обычно, кроется в деталях. В интернете есть самые разные обзоры и сравнения плагинов кеширования. И за столько лет кто-то же должен был выдать идеальный рецепт? Но нет. Все эти обзоры сводятся к тезису: «мы сделали 10 одинаковых сайтов, установили плагины с дефолтными настройками и смотрим, где страница загрузилась быстрее». При этом все забывают, что нюансов при оптимизации кеширования вагон и маленькая тележка. Похоже, эта статья первая, которая примет во внимание реальное поведение пользователей на сайте, вместо сравнения скорости загрузки одной страницы в тепличных условиях.

Используя бестселлеры с Themeforest или, те же конструкторы, вроде Elementor, WP Backery и прочие, сайт обречен на 5-15 секунд TTFB (time for first byte, время ответа сайта) при загрузке КАЖДОЙ страницы. С одной страницы может быть несколько сотен обращений к базе данных, выполняться большое число php-функций, подключаться множество библиотек. Естественно, что такая скорость недопустима, она влечет за собой понижение в поисковой выдаче, "отказы" посетителей, сливы бюджетов на рекламу и так далее. С этим нужно что-то делать.

Проекция контента — одна из базовых возможностей Angular, о которой слышали почти все. А с недавних пор по ней появилась и хорошая официальная документация. Тем не менее в реальных задачах разработчики часто обходят ng-content стороной, прибегая к более сложным и перегруженным решениям и усложняя дальнейшее использование и поддержку компонента.

В этой статье я хотел бы показать несколько типовых кейсов для ng-content при разработке многократно используемых компонентов. А еще — рассказать о преимуществах, которые они могут нам дать.