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

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

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

Об одной такой "штуке" и пойдёт речь в этой статье.

Здравствуйте, уважаемые читатели Хабра! Сегодня я хочу поделиться с вами информацией о XSS-уязвимости, которую я обнаружил в Telegram около двух недель назад. Также статья коснется некоторых особенностей работы программы поиска уязвимостей от Telegram. Моя цель — не только продемонстрировать вам интересный и относительно простой пример XSS, но и обозначить причины, по которым, возможно, не стоит тратить свои усилия на участие в багбаунти программе Telegram.

Рекомендую присмотреться к списку, если ваш проект вырос или планирует рост, написанный на любом интерпретируемом языке (php/ruby/python) на нескольких серверах с обычным стеком (веб-сервер/сервер приложений, субд, redis/memcahed, rabbitmq, ...).

В качестве подопытного для оптимизации был взят PHP backend - все нижеперечисленные приёмы были опробованы и применены. Наш проект почему-то задыхался на казалось бы неплохом железе и к тому же не утилизировал выданные ему аппаратные ресурсы.

Работая с монорепозиторием, ты наверняка слышал о наборе инструментов 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 исходники и две независимых версии на моле: первая и моя о ней пойдет речь.