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

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.

— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.

— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.

– Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.

– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.

Больше новостей и статей под катом. Хватит почитать на все майские!

Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.

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

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

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

Привет Хабр! Последняя статья про инструменты для профилирования php датируется аж  2018 годом. Но все перечисленные решения разработаны много лет назад и имеют недостатки: древний интерфейс btp (аналог pinba), оверхед xhprof и необходимость ручного запуска phpspy на stage.

Я тимлид в рекомендательном сервисе Zoon и перед моей командой стояла цель найти инструменты, которые профилируют весь код на проде 24/7 и хранят данные. Инструменты, с которыми могут работать рядовые разработчики, без доступа к проду. Инструменты, которые позволяют находить "бутылочные горлышки" за 30 секунд.

В конце 2021 года показался свет в конце туннеля, в виде системы на основе семплирующего eBFP профайлера: prodfiler. 

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

Одна из моих работ связана с отлаживанием протоколов общения теплосчётчиков для удалённого снятия показаний. Чаще всего теплосчётчик даже не мой, а находится у клиента на объекте, поэтому я подключаю его через GPRS-терминал к какой-либо своей сетевой машине, где поднят TCP сервер откуда посылаю байтики и смотрю, что мне ответит теплосчётчик. Посылать байты с консоли можно, но не очень удобно. Есть ряд приложений с которыми этот процесс упрощается, но я решил сделать себе в помощь специальный TCP сервер в виде Node-приложения с Web-интерфейсом, созданном с помощью фреймворка Malina.js.

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

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

Привет, меня зовут Виктор, я руководитель продукта сайта Спортмастер, точнее — его новой версии. Я работаю в компании с 2019 года и пришёл на проект системным аналитиком. В то время проект только стартовал. Мы выбрали архитектуру нового приложения, технологии, тактику тестирования, а также собрали команду разработки.  

На старт

Через полгода после старта работ выяснилось, что дизайны не соответствуют текущим реалиям, так что разработку заморозили на полгода. В это время команда не скучала, развивалась и реализовала небольшой проект — Web-приложение для управления электронными подарочными картами. И вот появились дизайны, появились концепция и большой файлик в Excel с примерно 800 строками. Каждая строка — это фича, которую надо реализовать на сайте. Фичи были как маленькие (отображать баннер и другой блок на сайте), так и большие (реализовать корзину).

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

Введение:

На конференции FrontedConf 2021 Андрей Старовойт показал плюсы и минусы TypeScript. Если вы сомневаетесь, стоит ли его использовать — эта статья для вас, чтобы вы смогли для себя всё решить. Если вы уже любите и используете TypeScript, то надеюсь, вам тоже будет интересно.

Все преимущества и недостатки языка описаны, конечно, через призму опыта Андрея. Несмотря на то, что последние 7 лет он работает в компании JetBrains над продуктом WebStorm на Java Kotlin, пишет он и на TypeScript. Попутно много смотрит на код других людей, пытаясь понять, что с ним можно сделать внутри WebStorm и почему типы выбились неправильно. А также — какие инспекции можно применить так, чтобы люди стали счастливы, а их код — лучше.

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022.

Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.

Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный механизм для указания состояния, описывающего поведение.

Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре.

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

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

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

Demo | GitHub

Статья про редактор текста как на рисунке. Исходный код прилагается.

Как создать расширение для браузера? Создание расширения для Google Chrome.

Сложность: Опытный

Всем привет. Месяц назад, пока бороздил просторы интернета, понял, что у меня есть проблема, я хотел проверить текущую цену Биткойна, но каждый раз заходить на сайт валюты мне было тяжело. Итак, я решил сделать расширение для Google Chrome с помощью Flutter. И хочу рассказать как я это сделал.

Расширение будет достаточно простым, будет лишь функционал проверки состояния Биткойна. Вам не понадобится дополнительная установка каких-либо плагинов. Мы напишем его с помощью встроенных средств web.

Почему Flutter использует язык Dart? Основные преимущества языка Dart.

Сложность: Новичок.

Многие лингвисты считают, что естественный язык, на котором говорит человек, влияет на то, как он думает. Применяется ли та же концепция к компьютерным языкам? Программисты, работающие с разными языками программирования, часто предлагают совершенно разные решения проблем. В качестве более радикального примера, ученые-компьютерщики убрали оператор goto, чтобы поощрять более структурированные программы (не совсем тоже самое, что тоталитарные лидеры в романе "1984", удаляющие еретические слова из естественного языка, чтобы устранить мыслепреступления, но вы поняли идею).

Какое это имеет отношение к Flutter и Dart? На самом деле совсем немного. Ранняя команда Flutter оценила более дюжины языков и выбрала Dart, потому что он соответствовал тому, как они создавали пользовательские интерфейсы.

Dart — главная причина, по которой разработчики любят Flutter.

На самом деле чуть больше ?. Все главные новости из мира Joomla с момента выхода предыдущего дайджеста 30 ноября 2021 года в одной статье. Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla. Прошлый выпуск вы можете прочитать здесь.

Конечно, да, скажете вы. Но не было бы этой статьи, если бы не было вопроса.

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

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

Проблема оказалась в поле Data json-объекта, который приходит от банка в нотификации платежа. В одних случаях оно приходит как Data, а в других DATA (в верхнем регистре).

О проблеме я сообщил в поддержку Тинькофф и тут началось интересное. Поддержка утверждает, что регистр ключей в JSON не играет никакой роли. Давайте это проверим.