Разработка веб-сайтов *

Транслятор Linq-Expression'ов в GraphQL-запрос.

Реализация библиотеки для трансляции Linq-выражений в GraphQL-запрос.

Обзор и сравнение существующих решений. Создание собственного инструмента.

Привет! Меня зовут Артем Коньков, я frontend-разработчик в СберМаркете. А еще, я тот человек, который в фильмах ужасов спускается в темный подвал вопреки инстинкту самосохранения. Во-первых, потому что это интересно, а во-вторых — кто-то же должен это делать!

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

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

Hugo позволяет легко и быстро получить красивый статический веб-сайт. Однако, веб-сайт бесполезен, если его никто не видит.

В этой статье, Я расскажу о том, как разместить свой собственный статический веб-сайт в российском сервисе - Яндекс Облако. И не просто разместить вручную, Я расскажу о том, как настроить автоматический CD пайплайн в GitHub, дабы каждое изменение, сделанное в проекте сайта, автоматически развёртывалось в сети Интернет.

Статья о том, как удобно расширить пользовательские возможности при редактировании или создании контента в Joomla. Если Вы, например, захотите сделать подсчет СЕО-характеристик текста или внедрить ИИ помощник прямо в интерфейс Joomla, то эта статья расскажет как Вашему разработчику это сделать.

Как не утонуть новичку в документации nx?

Разберем основные понятия и концепции по работе с монорепозиторием под управлением nx.

А также укажу некоторые особенности о которых нужно знать, чтобы "не выстрелить себе в ногу".

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

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

Дисклеймер. Ничего из сказанного ниже не стоит воспринимать как камень в огород китайского дизайна и его создателей. Все, о чем пойдет речь в статье, просто непривычно европейцу.

Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс).

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

• запросы контейнера (container queries);
• запросы стиля (style queries);
• селектор :has();
• микросинтаксис nth-of;
• text-wrap: balance;
• initial-letter;
• динамические единицы измерения области просмотра (viewport);
• цветовые пространства с широкой гаммой;
• color-mix();
• вложенность селекторов (nesting);
• каскадные слои (cascade layers);
• стили с ограниченной областью видимости (scoped styles);
• тригонометрические функции;
• индивидуальные свойства трансформации;
• popover;
• позиционирование якоря (anchor positioning);
• selectmenu;
• дискретные свойства переходов;
• анимации, управляемые прокруткой (scroll-driven animations);
• переходы отображения (view transitions).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

QA-инженеры по-прежнему используют XPath/CSS для создания локаторов, на мой взгляд, для уникальных тестовых локаторов (аттрибутов) не нужны языки запросов, а некоторые популярные фреймворки для автоматизации поддерживают обращение к таким локаторам из коробки.

В данной статье рассказываем о новом демо-примере по работе со смыслом текста, с использованием нашей технологии Real AI – капче, требующей понимания смысла текста.

Чтобы успешно решить капчу необходимо понять полученную фразу и из представленных изображений выбрать указанные во фразе объекты. Наиболее интересной деталью этого сценария является то, что правильный ответ заранее нигде не хранится и Real AI выполняет проверку капчи используя все те же данные, что есть у пользователя.

В этом техническом "глубоком погружении" (deep dive) мы с нуля реализуем очень простую версию серверных компонентов React.

Данный туториал будет состоять из трех частей (написана пока только эта).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

Сегодня мы продолжим переписывание на $mol этой демки. Кто не читал первую часть, рекомендую сначала ознакомиться с ней BALLSORT на $mol. Часть 1

Я очень сильно уважаю отладчик (debugger) - он даёт возможность лучше понимать код, с которым ты работаешь. Даже если ты сам этот код и написал. Но отладчик - это очень низкоуровневый инструмент, зачастую хватает трассировки хода выполнения web-приложения (логирования). Самый простой способ логирования - console.log(). Он позволяет вывести сообщение на консоль браузера (DevTools по F12 в Chrome). Но что делать, если приложение отрабатывает в среде, где консоль для разработчика недоступна? Например, в мобильном устройстве клиента?

Ответ очевиден - перенаправить вывод с консоли браузера туда, где разработчик сможет видеть логи. Благо, что JavaScript позволяет это делать очень просто, достаточно вставить в HTML-файл в HEAD такой фрагмент:

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.

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

Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь.

О чём вообще речь?

Всем привет! В данной статье речь пойдёт о настраиваемых параметрах конфигурации Spring приложений. Когда я только начал изучать Spring, естественно, одним из источников знаний были готовые примеры, проекты-образцы. И меня жутко бесило, что какие-то нужные для работы приложения значения появлялись «ниоткуда». К примеру, автор какого-нибудь туториала предлагал для проверки только что созданного учебного приложения зайти на localhost по порту 8088. Откуда берётся 8088? Почему не 8089? Оказалось, что для таких настраиваемых параметров есть специальные файлы. Итак:

Какие бывают настраиваемые параметры?

Настраиваемые параметры используются самим Spring-ом, различными библиотеками и, по желанию разработчика, могут быть добавлены свои собственные. Список всех параметров Spring-а можно посмотреть здесь.

Например, за то на каком порту будет крутиться встроенный http-сервер (если мы используем Spring Web) отвечает параметр server.port. В том самом туториале из вступления в соответствующем файле server.port был равен 8088. Выглядит это (в простейшем случае) так:

server.port=8088

Имя параметра может состоять (и, как правило, состоит) из нескольких частей. Например, все «спринговые» параметры начинаются со слова «spring». Кастомные (пользовательские) параметры, введённые разработчиком конечного приложения, могут начинаться, например со слова application или любого другого. В зависимости от используемого формата файла, части разделяются по-разному (см. следующий раздел). Простейший вариант, просто точками. Пример пользовательских параметров:

По мере того, как ваше приложение растёт и развивается, растут и затраты времени на его тестирование и сборку, достигая нескольких минут при пересборке в dev-режиме и, возможно, десятков минут при «холодной» production-сборке. Что, конечно, совершенно неприемлемо. И если поначалу увеличение временных затрат может казаться незначительным, то впоследствии это непременно ведёт к ухудшению процесса разработки и может негативно повлиять на скорость выкатки важных релизов или хотфиксов. Таким образом, в какой-то момент вопрос оптимизации и ускорения сборки приложения может стать критически важным для разработчика.

Веб-дизайн — постоянно эволюционирует, адаптируясь к новым технологиям и требованиям пользователей. Одним из последних инновационных подходов, зародившихся в веб-дизайн-сообществе, является атомарный веб-дизайн (Atomic Design).

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

В середине марта 2023 года Майкрософт анонсировала релиз TypeScript версии 5.0. Разработчики ожидают от нее 10-20% прироста производительности, но так как всё зависит от кодовой базы и характеристик оборудования, они настоятельно рекомендуют опробовать эти изменения.

В этой статье мы разберём некоторые изменения в TypeScript 4.9 и 5.0 и сравним нововведения с предыдущими версиями. На примерах кода постараемся понять, для чего они были добавлены и как они упрощают нашу жизнь. Статья будет полезна опытным разработчикам, которые часто применяют TypeScript в работе, и начинающим, так как мы подробно разберем решения некоторых проблем.

Фронтенд и бекенд — прошлый век?

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

Создание сайта с нуля у опытного разработчика займет в среднем от 100 до 500 часов. Причем если нужен уникальный дизайн и множество картинок, это ещё и выльется в копеечку. Но, оказывается, люди без опыта и знаний уже делают сайты бесплатно, и за 10 минут (или 10 секунд, если используют один из сервисов). Не имея ни малейшего понятия о том, что такое PHP, Python или Java.

Разберем на примерах, как это происходит. И посмотрим на три уровня использования генеративных ИИ для создания сайтов.