Привет, меня зовут Костя Кислейко. Я отвечаю за дизайн в AGIMA. Клиенты часто приходят к нам за редизайном своих сервисов. И довольно часто, когда мы объясняем заказчикам, чем отличаются разные подходы и методологии, я использую метафору строительства. Кажется, это хорошее и понятное сравнение, и я решил его записать. Надеюсь, кому-то это поможет понять все риски и возможности при использовании разных подходов к редизайну.
Разработка веб-сайтов *
Делаем веб лучше
Новости
Неразрешимые проблемы разработки
Сроки
В разработке ПО существует неразрешимое противоречие — это оценка сроков.
С одной стороны, бизнесу надо знать, сколько займёт разработка фичи, причем как можно точнее. И это понятно — ведь надо как-то принимать решения, чтобы сравнить предполагаемые доходы и расходы и достать деньги в нужном количестве.
С другой стороны, разработка порою в душе не е... вообще не знает, сколько надо времени, особенно если
- новая функциональность нетипична
- есть зависимости на другие команды
- будет задействована новая технология
- ТЗ надо сильно уточнять
- надо разобраться в логике легаси-кода
Часто, для того, чтобы точно оценить сроки, нужно, собственно, сделать половину работы. Чем точнее надо оценить сроки, тем больше надо на это затратить времени, что приводит к суммарному увеличению time-to-market, причем все равно без гарантий.
Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих
Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума.
Онбординг пользователей, революция у аналитиков, веб-доступность: как сотрудники МТС Банка идеи до прода довели
Очень часто крутые идеи рождаются не у продактов или руководителей, а у линейных сотрудников. Среди разработчиков нередко встречаются интроверты, особенно когда речь идет о новых участниках команд — именно они вынашивают свежие идеи, но не высказывают их. И если эти идеи развивать, то, например, простая задача с уровня «А давайте-ка зашьем на бэк несколько экранов для онбординга пользователей» переедет на гораздо более системный «Давайте сразу запилим полноценную платформу».
Многим ребятам в IT хочется быть не абстрактным «юнитом» из какой-нибудь пошаговой стратегии с набором характеристик и конкретной «функцией», а проявлять творческий потенциал, реализовывать свои идеи. И для компании важно это учитывать. Поддерживая подобные инициативы, помогая им доходить до продажи, компания может не только получать огромный прирост к business value, но и снизить текучку кадров, потому что специалисты будут чувствовать себя оценёнными по достоинству.
Под катом — три истории от наших сотрудников: они не постеснялись высказать свои идеи и запустили крутые проекты, которые уже принесли нашим клиентам огромную пользу.
Истории
Сервис для обнаружения типа устройства пользователя на TypeScript и Vue 3
Так-с, уважаемые читатели, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал:
• обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно
• обнаруживать какая ориентация на данный момент у пользователя
• обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone
Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :)
Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV
В декабре 2021 года под новогодние праздники в приложении Кинопоиска для SmartTV появился раздел с Яндекс Музыкой. Он позволил пользователям на телевизорах открывать новые для себя треки в Моей волне, включать популярные подборки и слушать собственную коллекцию на телевизорах.
При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.
Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.
Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).
Разработка веб-приложений с помощью Nim
В этой статье я постараюсь ознакомить вас с возможностями веб разработки на языке программирования Nim.
На данный момент в Nim можно выделить 2 основных веб-фреймворка: Jester и Karax. Однако Jester используется только для серверной разработки, а Karax для клиентской. Поэтому рассказывать о них я не стану, однако я расскажу о другом замечательном фреймворке - HappyX.
Решение проблемы N+1 запроса с помощью группировки вызовов
Проблема N+1 запросов
Проблема N + 1 возникает, когда фреймворк доступа к данным выполняет N дополнительных SQL-запросов для получения тех же данных, которые можно получить при выполнении одного SQL-запроса.
Обычно это решается с помощью ленивой загрузки. В статье разбирается вариант с асинхронной группировкой вызовов.
Оптимизация изображений для пользователей с медленным интернетом с помощью Network Information API
Многие из нас привыкли к тому, что быстрый и стабильный интернет это данность в 2023 году, поэтому оптимизацией вебсайтов под этот случай особо не занимаются. Однако все еще остаются сценарии, когда это не так: например, в дороге между населенными пунктами или в некоторых помещениях, которые либо находятся под землей, либо плохо пропускают сигнал по какой-то другой причине.
Для нашего проекта combat-sport.club как раз актуальна ситуация, когда взвешивание перед проведением соревнований нередко происходит в каком-нибудь подвальном помещении с плохой связью, и тяжелый SPA с большим количеством медиа может грузиться очень долго. В свою очередь это влияет и на возможность работать с платформой и в целом на удовлетворенность пользователей.
Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.
В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue.
Мультиплатформенное управление контентом с помощью Directus
Задача публикации нового контента вызывает у вас боль и неприятные ощущения? Вы чувствуете мозоли на пальцах от бесконечного перепечатывания материала для его размещения на разных платформах?
Зачем нужно внедрение зависимостей в JS
Этот пост является ещё одной попыткой сформулировать идею, зачем нужно внедрение зависимостей в ванильном JavaScript (именно в ES6+, а не в TS).
Основная сложность в том, что шаблон «внедрение зависимостей» (DI) есть следствие применение на практике «принципа инверсии зависимостей» (DIP). Классическая формулировка этого принципа выглядит так:
• A. Модули верхних уровней не должны зависеть от модулей нижних уровней. Оба типа модулей должны зависеть от абстракций.
• B. Абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.
Для JS‑программиста данная формулировка представляет определённую сложность в силу того, что в JS нет классических абстракций (в виде «интерфейсов» из других ЯП). В JS вообще нет абстракций, тут всё очень конкретно: вот объекты, вот примитивы — комбинируй.
Тем не менее, если спуститься с уровня теории на уровень практики, внедрение зависимостей вполне успешно может применяться даже в таком «конкретном» языке.
Учимся разрабатывать REST API на Go на примере сокращателя ссылок
В этой статье мы напишем полноценный REST API сервис — URL Shortener — и задеплоим его на виртуальный сервер с помощью GitHub Actions.
Говоря «полноценный», я имею в виду, что это будет не игрушечный проект, а готовый к использованию:
- мы выберем для него актуальный http-роутер,
- позаботимся о логах,
- напишем тесты: unit-тесты, тесты хэндлеров и функциональные,
- настроим автоматический деплой через GitHub Actions и др.
Но важно понимать, что «готовый к продакшену» != «энтерпрайз».
Кратко обо мне: меня зовут Николай Тузов, я много лет занимаюсь разработкой на Go, очень люблю этот язык. Также веду свой YouTube-канал, на котором есть видеоверсия текущего гайда, с более подробными объяснениями.
Управление заголовками HTTP в Joomla 4 (часть 2)
Эта статья - вторая часть перевода статьи Joomla’s New HTTP Headers Plugin For J4 из майского номера (2022) Joomla Community Magazine. Эта часть перевода посвящена тонкостям настройки Content Security Policy, HSTS в Joomla 4, тому как избежать атак на Ваш сайт.
Появится ли в браузере менеджер пакетов?
“Введение менеджера пакетов в веб-браузеры является интересной идеей, и на самом деле такой функционал уже существует в некоторых формах. Однако, на данный момент он не является стандартной функцией браузеров.” (с) da Vinci, text-002, OpenAI
Динамический импорт remote компонента Module Federation на Vue 3
Приветствую всех читателей, что забрели на эту страницу. Вероятно, вы тоже как и я, не нашли должной информации по этой теме, поэтому наслаждайтесь, ведь тут будет вся нужная информация для корректной работы runtime импорта!
Мои любимые вопросы о CSS с ответами. Версия 2023 года
В 2020 году я поделился списком моих любимых вопросов о CSS, который стал довольно популярным, судя по просмотрам. Спустя 3 года CSS изменился, и я решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства.
Работая над вопросами, мне хотелось помочь вам в изучении новых возможностей CSS и тех моментов, которые многие разработчики упускают, судя по моей практике. Также вы можете использовать их, если проводите интервью. Я буду только рад этому. А теперь давайте начнём.
Манипулируй DOM правильно
Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.
AbortController для отмены запросов при смене страницы (SPA)
Существует довольно распространенная проблема, когда пользователь заходит на страницу, для этой страницы начинают запрашиваться различные данные, но вдруг пользователь быстро переходит на другую страницу, а запросы с предыдущей страницы продолжают выполняться, все еще используя ресурсы сети и выполняя ненужную работу.
Особенно неприятно это становится тогда, когда у пользователя медленный интернет и каждый лишний запрос еще больше замедляет работу вебсайта. К слову, про оптимизацию SPA я писал в этой статье, а эту статью можно использовать и как небольшое дополнение и еще один способ оптимизации для пользователей с плохим интернетом.
А иногда это приводит и к ошибкам. Например, у нас есть две страницы - страница соревнований и страница турниров, обе страницы имеют id в URL и данные запрашиваются по этому id. Когда пользователь быстро переходит со страницы турнира на страницу соревнования, то id турнира может подмениться на id соревнования, и тогда получится, что запрос пойдет на несуществующий для турнира id и упадет ошибка.
Когда я столкнулся с этой проблемой, то первой мыслью было использовать AbortController для отмены таких “висящих” запросов, и я решил загуглить как это правильно сделать, но сразу же был крайне удивлен тем, что советы на stackoverflow или различные статьи как-то очень странно и скудно освещали эту проблему, иногда предлагая абсолютно нерабочие решения, поэтому и решено было написать эту статью, чтобы показать конкретный рабочий пример.
Для тех, кто с этим не знаком, AbortController - это, простыми словами, интерфейс, который позволяет управлять отменой http запросов со стороны фронтенда.
UI. Интерфейс не должен отвлекать
Стараюсь сделать хороший редактор блок-схем. Вот что получается.
Человек может одновременно держать в памяти 7 элементов: 7 цифр, 7 слов. Если в меню 7 пунктов - это удобно. Если больше - нужно разбивать на блоки. Так сделано во всех программах.