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

Работая с монорепозиторием, ты наверняка слышал о наборе инструментов Nrwl Nx. Если вкратце, то Nx ускоряет и упрощает работу с монорепой, снабжает полезными утилитами. Держи документацию.

Часто работа с Nx заканчивается на имеющихся дефолтных настройках. Все остальное остается черным ящиком. Время сборки проектов начинает расти, а причины так и остаются неизвестными. Может, есть что-то, что способно улучшить работоспособность монорепы и хотя бы частично решить проблемы?

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

Итак, что же ты мог упустить при работе с Nx:

• nx run-many
• dependency graph + nx affected
• nx-enforce-module-boundaries es-linting
• computation cache
• nx cloud
• buildable libs 

Разработчики AspNet Core (здесь и далее речь идёт об AspNet актуальных версий: 6 и 7, но может быть применимо и к более ранним версиям) хорошо знают, что механизм Dependency Injection встроен в этот фреймворк изначально и пронизывает его насквозь. И это здорово упрощает работу с зависимостями и сразу вводит разработку в идеологически правильное русло. Более того, в состав самого AspNet входит вполне приличный дефолтный DI-контейнер разработки Microsoft, что позволяет отказаться от использования сторонних решений. Во всяком случае, при отсутствии совсем уж специфичных требований.

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

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

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

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

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

Привет, меня зовут Алексей Мартынов и в IT я уже более 20 лет. В Яндекс Практикуме я — ведущий эксперт, наставник и автор контента на курсе «Фронтенд-разработчик». Успел поработать в самых разных компаниях в большинстве сфер — от логистики до финансов. Последние 10 лет развиваю собственные проекты. Параллельно работаю техническим директором в компании, специализирующейся на веб-разработке. 

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

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

В статье вы увидите бенчмарк производительности EcmaScript фич; узнаете какой из компиляторов генерирует самый производительный JavaScript код; а также можно ли добиться прироста производительности, начав собирать сайт в более поздней версии 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-сборке. Что, конечно, совершенно неприемлемо. И если поначалу увеличение временных затрат может казаться незначительным, то впоследствии это непременно ведёт к ухудшению процесса разработки и может негативно повлиять на скорость выкатки важных релизов или хотфиксов. Таким образом, в какой-то момент вопрос оптимизации и ускорения сборки приложения может стать критически важным для разработчика.