Как стать автором
Обновить
190.53

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

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Как сделать редизайн сервиса: рассказываем на примере средневекового замка

Время на прочтение 4 мин
Количество просмотров 483
Блог компании AGIMA Веб-дизайн *Разработка веб-сайтов *Графический дизайн *Дизайн
Туториал

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

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 1

Новости

Неразрешимые проблемы разработки

Время на прочтение 3 мин
Количество просмотров 2.7K
Разработка веб-сайтов *Программирование *Управление проектами *Управление продуктом *Управление персоналом *


Сроки


В разработке ПО существует неразрешимое противоречие — это оценка сроков.


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


С другой стороны, разработка порою в душе не е... вообще не знает, сколько надо времени, особенно если


  • новая функциональность нетипична
  • есть зависимости на другие команды
  • будет задействована новая технология
  • ТЗ надо сильно уточнять
  • надо разобраться в логике легаси-кода

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

Читать дальше →
Всего голосов 33: ↑30 и ↓3 +27
Комментарии 73

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Уровень сложности Средний
Время на прочтение 14 мин
Количество просмотров 1.8K
Блог компании Яндекс Практикум Разработка веб-сайтов *CSS *HTML *Учебный процесс в IT
Туториал

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума. 

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 0

Онбординг пользователей, революция у аналитиков, веб-доступность: как сотрудники МТС Банка идеи до прода довели

Уровень сложности Простой
Время на прочтение 15 мин
Количество просмотров 1.5K
Разработка веб-сайтов *Анализ и проектирование систем *Управление проектами *Управление персоналом *Дизайн
Спецпроект

Очень часто крутые идеи рождаются не у продактов или руководителей, а у линейных сотрудников. Среди разработчиков нередко встречаются интроверты, особенно когда речь идет о новых участниках команд — именно они вынашивают свежие идеи, но не высказывают их. И если эти идеи развивать, то, например, простая задача с уровня «А давайте-ка зашьем на бэк несколько экранов для онбординга пользователей» переедет на гораздо более системный «Давайте сразу запилим полноценную платформу».

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

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

Читать далее
Всего голосов 12: ↑11 и ↓1 +10
Комментарии 2

Истории

Сервис для обнаружения типа устройства пользователя на TypeScript и Vue 3

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 1.3K
Разработка веб-сайтов *VueJS *TypeScript *
Туториал

Так-с, уважаемые читатели, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал:

обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно

обнаруживать какая ориентация на данный момент у пользователя

обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone

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

Читать статью
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 11

Черт тебя возьми, CSS

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 8.7K
Блог компании RUVDS.com Разработка веб-сайтов *CSS *Программирование *
Туториал

У CSS много моментов, которые сбивают с толку. Разработчики плюются от него. А мне нравится CSS, несмотря на мои потраченные нервы. Подумав, как помочь другим меньше мучаться, я собрал ряд неочевидных моментов. Они сбивали с толку меня и моих знакомых. Надеюсь, вам будет полезно.

Читать дальше →
Всего голосов 45: ↑44 и ↓1 +43
Комментарии 51

Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV

Время на прочтение 7 мин
Количество просмотров 15K
Блог компании Яндекс Разработка веб-сайтов *CSS *JavaScript *Разработка под Tizen *

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

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

Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.

Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).

Читать далее
Всего голосов 59: ↑59 и ↓0 +59
Комментарии 72

Разработка веб-приложений с помощью Nim

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 1.9K
Разработка веб-сайтов *Open source *Программирование *
Из песочницы

В этой статье я постараюсь ознакомить вас с возможностями веб разработки на языке программирования Nim.

На данный момент в Nim можно выделить 2 основных веб-фреймворка: Jester и Karax. Однако Jester используется только для серверной разработки, а Karax для клиентской. Поэтому рассказывать о них я не стану, однако я расскажу о другом замечательном фреймворке - HappyX.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 8

Решение проблемы N+1 запроса с помощью группировки вызовов

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 2K
Разработка веб-сайтов *PHP *SQL *
Кейс

Проблема N+1 запросов

Проблема N + 1 возникает, когда фреймворк доступа к данным выполняет N дополнительных SQL-запросов для получения тех же данных, которые можно получить при выполнении одного SQL-запроса.

Обычно это решается с помощью ленивой загрузки. В статье разбирается вариант с асинхронной группировкой вызовов.

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Комментарии 10

Оптимизация изображений для пользователей с медленным интернетом с помощью Network Information API

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 2.8K
Разработка веб-сайтов *JavaScript *Программирование *Клиентская оптимизация *VueJS *
Туториал

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

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

Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.

В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue.

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 6

Мультиплатформенное управление контентом с помощью Directus

Уровень сложности Простой
Время на прочтение 14 мин
Количество просмотров 751
CMS *Разработка веб-сайтов *Контент и копирайтинг *
Из песочницы

Задача публикации нового контента вызывает у вас боль и неприятные ощущения? Вы чувствуете мозоли на пальцах от бесконечного перепечатывания материала для его размещения на разных платформах?

Решение есть...
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 2

Зачем нужно внедрение зависимостей в JS

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 2.8K
Разработка веб-сайтов *JavaScript *

Этот пост является ещё одной попыткой сформулировать идею, зачем нужно внедрение зависимостей в ванильном JavaScript (именно в ES6+, а не в TS).

Основная сложность в том, что шаблон «внедрение зависимостей» (DI) есть следствие применение на практике «принципа инверсии зависимостей» (DIP). Классическая формулировка этого принципа выглядит так:

A. Модули верхних уровней не должны зависеть от модулей нижних уровней. Оба типа модулей должны зависеть от абстракций.

B. Абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.

Для JS‑программиста данная формулировка представляет определённую сложность в силу того, что в JS нет классических абстракций (в виде «интерфейсов» из других ЯП). В JS вообще нет абстракций, тут всё очень конкретно: вот объекты, вот примитивы — комбинируй.

Тем не менее, если спуститься с уровня теории на уровень практики, внедрение зависимостей вполне успешно может применяться даже в таком «конкретном» языке.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 16

Учимся разрабатывать REST API на Go на примере сокращателя ссылок

Уровень сложности Средний
Время на прочтение 30 мин
Количество просмотров 8.5K
Блог компании Selectel Разработка веб-сайтов *Программирование *Go *
Туториал

В этой статье мы напишем полноценный REST API сервис — URL Shortener — и задеплоим его на виртуальный сервер с помощью GitHub Actions.

Говоря «полноценный», я имею в виду, что это будет не игрушечный проект, а готовый к использованию:

  • мы выберем для него актуальный http-роутер,
  • позаботимся о логах,
  • напишем тесты: unit-тесты, тесты хэндлеров и функциональные,
  • настроим автоматический деплой через GitHub Actions и др.

Но важно понимать, что «готовый к продакшену» != «энтерпрайз».

Кратко обо мне: меня зовут Николай Тузов, я много лет занимаюсь разработкой на Go, очень люблю этот язык. Также веду свой YouTube-канал, на котором есть видеоверсия текущего гайда, с более подробными объяснениями.
Читать дальше →
Всего голосов 48: ↑47 и ↓1 +46
Комментарии 27

Управление заголовками HTTP в Joomla 4 (часть 2)

Время на прочтение 20 мин
Количество просмотров 534
CMS *Информационная безопасность *Разработка веб-сайтов *PHP *Joomla *
Туториал
Перевод

Эта статья - вторая часть перевода статьи Joomla’s New HTTP Headers Plugin For J4 из майского номера (2022) Joomla Community Magazine. Эта часть перевода посвящена тонкостям настройки  Content Security Policy, HSTS в Joomla 4, тому как избежать атак на Ваш сайт.

Читать далее
Всего голосов 3: ↑2 и ↓1 +1
Комментарии 4

Появится ли в браузере менеджер пакетов?

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 1.1K
Разработка веб-сайтов *Браузеры
Мнение

Введение менеджера пакетов в веб-браузеры является интересной идеей, и на самом деле такой функционал уже существует в некоторых формах. Однако, на данный момент он не является стандартной функцией браузеров.” (с) da Vinci, text-002, OpenAI

Чуть-чуть про идею...
Всего голосов 5: ↑1 и ↓4 -3
Комментарии 18

Динамический импорт remote компонента Module Federation на Vue 3

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 1.9K
Разработка веб-сайтов *JavaScript *Системы сборки *VueJS *
Из песочницы


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

Узнать о Module Federation
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 1

Мои любимые вопросы о CSS с ответами. Версия 2023 года

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 9.5K
Блог компании RUVDS.com Разработка веб-сайтов *CSS *
Обзор

В 2020 году я поделился списком моих любимых вопросов о CSS, который стал довольно популярным, судя по просмотрам. Спустя 3 года CSS изменился, и я решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства.

Работая над вопросами, мне хотелось помочь вам в изучении новых возможностей CSS и тех моментов, которые многие разработчики упускают, судя по моей практике. Также вы можете использовать их, если проводите интервью. Я буду только рад этому. А теперь давайте начнём.
Читать дальше →
Всего голосов 50: ↑49 и ↓1 +48
Комментарии 18

Манипулируй DOM правильно

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 5.4K
Блог компании Мир Plat.Form (НСПК) Разработка веб-сайтов *JavaScript *HTML *Angular *
Туториал

Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее  представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.

Подробнее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 0

AbortController для отмены запросов при смене страницы (SPA)

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 3.2K
Разработка веб-сайтов *JavaScript *Программирование *Клиентская оптимизация *VueJS *
Туториал

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

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

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

Когда я столкнулся с этой проблемой, то первой мыслью было использовать AbortController для отмены таких “висящих” запросов, и я решил загуглить как это правильно сделать, но сразу же был крайне удивлен тем, что советы на stackoverflow или различные статьи как-то очень странно и скудно освещали эту проблему, иногда предлагая абсолютно нерабочие решения, поэтому и решено было написать эту статью, чтобы показать конкретный рабочий пример.

Для тех, кто с этим не знаком, AbortController - это, простыми словами, интерфейс, который позволяет управлять отменой http запросов со стороны фронтенда.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 9

UI. Интерфейс не должен отвлекать

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 2.6K
Веб-дизайн *Разработка веб-сайтов *Интерфейсы *Дизайн Софт
Мнение

Dgrm.net

Стараюсь сделать хороший редактор блок-схем. Вот что получается.

Человек может одновременно держать в памяти 7 элементов: 7 цифр, 7 слов. Если в меню 7 пунктов - это удобно. Если больше - нужно разбивать на блоки. Так сделано во всех программах.

Читать далее
Всего голосов 15: ↑13 и ↓2 +11
Комментарии 23

Вклад авторов