Недавно телеграм выпустил обновление, в котором бот может открывать любое веб-приложение, что предоставляет много возможностей для разработчиков.
Я был несказанно этому рад, так как уже на тот момент разрабатывал бота, с помощью которого можно играть в игры. А теперь, с новыми возможностями — пользователя не будет перекидывать в браузер, а игры будут открываться прямо в телеграме. Красота!
Изначально Flutter был известен как фреймворк для создания кроссплатформенных мобильных приложений для Android и iOS. Но концепция Flutter не ограничивается мобильной разработкой, фреймворк позволяет создавать пользовательские интерфейсы для любого экрана с помощью кроссплатформенной разработки: разрабатывать web и desktop-приложения. Мы в Friflex работаем на Flutter с момента выхода первой версии и хорошо знаем особенности фреймворка. В этой статье Никита Улько, Flutter fullstack developer в Friflex, рассказывает об особенностях разработки Flutter для Web. Если вы хотите попробовать Flutter для web, этот гайд для вас.
Каждый из нас говорит на собственном языке. К счастью, иногда эти индивидуальные языки достаточно похожи, чтобы объединять их в большие группы. Всё, что внутри такой группы, мы условно считаем одним языком — например, русским.
Но порой неизбежно вылезают различия. «Гражданский брак» значит разное для юриста и не-юриста. Обыватель назовёт цифрой то, что математик — числом. Слово «крайний» имеет особое значение для лётчиков и парашютистов.
Дизайнер и фронтенд-разработчик — не чужие друг другу люди. Они работают в соседних кабинетах, вместе ходят в курилку (по крайней мере, так было до повсеместной ковидной удалёнки). Оба делают части одного большого дела и общаются если и не постоянно, то регулярно. И всё же их языки во многом отличаются. Да и не только языки — сами образы мышления.
Мы поговорили с сотрудниками Промсвязьбанка, чтобы составить небольшой… Нет, не разговорник. Понимайник. Возможно, кому-то он поможет общаться с коллегами по ту сторону HTML более конструктивно, эффективно, а главное — приятно.
Интерактивный видеоконтент позволяет своим зрителям взаимодействовать с контентом и влиять на дальнейшее его повествование. Это уникальное направление видеоконтента, которое активно развивается в последнее время в различных сферах.
В данной статье мы хотим поделиться опытом создания платформы для проектирования интерактивного видеоконтента.
Use-case
Для формализации функциональных требований применяются диаграммы использования (use-case). Диаграмму вариантов использования есть смысл строить во время изучения технического задания, она состоит из графической диаграммы, описывающей действующие лица и прецеденты (варианты использования - сервисы, которые наша система предоставляет акторам), а также спецификации, представляющего собой текстовое описание конкретных последовательностей действий (потока событий), которые выполняет пользователь при работе с системой.
Прецеденты нашего пользователя:
В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и его подписью. В HTML5 нам дали такую возможность с помощью элементов <figure> и <figcaption>.
Давайте для начала определимся с терминами.
alt — альтернативное описания изображения.
<figcaption> — заголовок или сводка для содержимого <figure>. Если у <figure> нет дочернего <figcaption>, то нет и заголовка.
Содержимым у <figure> может быть изображение или что угодно ещё, например, таблица или список. В<figcaption> можно указать описательную метку для фрагмента контента: таблицы, фрагмента кода, списка, цитаты, текста и изображения, но это описание не является жизненно важным для его понимания. Но почему же <figcaption> как подпись не может заменить alt?
В веб-разработке Python используется в основном на бэкенде с такими фреймворками, как Django и Flask. А сегодня, к старту курса по Fullstack-разработке на Python, расскажем о PyScript, который даёт возможность запускать Python прямо в HTML.
Дайджест новостей и полезных статей из мира фронтенд-разработки за последнюю неделю 30 мая–05 июня.
Привет, Хабр! Меня зовут Вероника, я QA-lead в одном из внутренних продуктов Самоката. Хочу поделиться, какие практики мы в команде применяли, чтобы адаптировать процесс разработки под реалии запуска нового проекта.
Когда мы начинаем с нуля делать новый IT-продукт (или проект внутри компании), часто на помощь приходит концепция MVP. Делаем хоть сколько-то готовую версию, чтобы как можно раньше получить обратную связь от пользователей и стейкхолдеров, а дальше разберёмся.
Ради этого «как можно раньше» процесс часто выглядит как яростный забег: жертвуем регламентами, документацией и другими вещами, которые «полезные, но давайте потом». Работаем в режиме «не поднимая головы». Для полноты картины добавим сюда часто меняющиеся требования — на ранних стадиях создания продуктов такое регулярно случается. Знакомо?
Что при этом происходит с командой? Переработки, стресс, демотивация, а там и до выгорания недалеко. В статье расскажу, как мы делали MVP нового внутреннего продукта, что для нас сработало (и не сработало), чтобы помочь команде работать в высоком темпе, адаптироваться к меняющимся требованиям и не терять боевой дух и мотивацию.
Angular не поддерживет возможность использования Content Projection для шаблонов (ng-template), но её можно реализовать самостоятельно.
Перевод статьи "Disabling My Favicon: How and Why"
Статья о том как и зачем я убирал фавиконку со своего сайта.
Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением.
Код на Codepen https://codepen.io/webfrontden/pen/poaOPER
Меня зовут Виктор, я разрабатываю страницу результатов поиска Яндекса. Несмотря на внешнюю простоту, поисковая выдача — сложная штука: на каждый запрос генерируется своя уникальная страница, на которой в зависимости от запроса может присутствовать блок Картинок, Карты, Переводчик, видеоплеер и многие другие компоненты. Все они должны запускаться и работать в памяти обычных бюджетных телефонов, которые использует большинство наших пользователей. Браузерам должно хватать ресурсов, чтобы пользователь не видел вот такого:
На своих серверах мы должны генерировать сотни миллионов уникальных страниц в сутки — это сложнее, чем просто отдавать одни и те же ресурсы. Генерация страницы не должна быть слишком требовательной к памяти сервера.
Разрабатывая проект на JavaScript (TypeScript, ClojureScript или каком-то другом языке, транслируемом в JavaScript), мы привыкли создавать объекты, массивы, строки и вообще писать код, как будто память бесконечна. Это не так. Я расскажу о видах проблем с памятью, о том, какие ограничения мы часто забываем и как их можно преодолеть. В ответ браузеры и пользователи скажут вам спасибо.
Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt, или альтернативный текст.
Альтернативный текст — это описание картинки на сайте словами. Оно должно помогать людям, которые не видят картинку, но читают или слышат это описание. А иначе можно вообще ничего не писать.
Давайте разбираться, почему правильное описание важно, и как его вообще-то сделать правильным. Всего есть шесть правил.
Научить ИИ разговаривать шёпотом — непростая задача даже сегодня. Но мы покажем, насколько простыми стали распознавание и транскрипция речи, по крайней мере, на поверхности. Интересно? Тогда добро пожаловать под кат.
Вёрстка помогает нам выстраивать содержимое веб-страниц по определённым правилам: например, строго в соответствии с согласованным макетом или в зависимости от пользовательского устройства.
Сегодня сайты неплохо умеют подстраивать свой контент и под различные размеры экранов, но так было не всегда.
Заголовки должны быть большими, жирными и громкими, чтобы привлекать внимание пользователя за несколько секунд. Мы перевели статью о стилях заголовков, сегодня предлагаем изучить градиенты.
Уже больше года мы в Азбуке вкуса мигрируем с jQuery на Nuxt. По мере роста, делали свою реализацию микрофронтов, чтобы хорошо организовать работу и решить ряд проблем.
В процессе наступили на пару граблей, долго думали и наконец сделали.
Приглашаем узнать о проделанной нами работе, о сложностях, с которыми мы столкнулись, и оценить итоговую реализацию.
Когда мы имеем дело с большим проектом, в репозитории которого накопились десятки тысяч строк кода, иногда единственным здравым решением кажется все переписать с нуля, а не оптимизировать. С точки зрения бизнеса может возникнуть вопрос: а почему вообще нужно оптимизировать или даже переписывать приложение, если оно работает? Дело в том, что по мере роста кодовой базы есть вероятность увеличения дублирующихся компонентов/фрагментов кода, появления устаревших участков, которые тормозят сборку, но полезной нагрузки уже не несут. Это негативно влияет на скорость работы приложения и увеличивает срок разработки.
В этом кейсе мы покажем, как улучшить имеющееся решение с точки зрения архитектуры, а также рассмотрим библиотеки и их особенности, которые помогут сделать приложение быстрее.
В данном примере мы имеем дело с довольно объемной кодовой базой, UI которой обрабатывает большие массивы данных и выводит их на экран в виде списков, таблиц, графиков. Поэтому нам важно обеспечить гибкость нашего приложения как в плане сборки бандла, так и для развертывания в разных средах. И, конечно, иметь в рукаве самые последние фичи, позволяющие делать наш код красивым, понятным и читаемым.
Статья будет полезна тимлидам и техлидам проектов, а также разработчикам, которые столкнулись с развертыванием крупных неоптимизированных React-приложений.
На первый взгляд создание доступной среды в цифровом продукте кажется простой задачей. В конце концов, что может быть проще, чем использовать нормальные кнопки вместо div? Но когда пытаешься масштабировать такой подход, все становится сложнее. В этой статье я начну с базовых компонентов (текстовые поля или попапы), а затем объясню, как сделать доступной целую платформу из множества разных приложений, которые написаны десятками разных команд.
