Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи.
Как вы думаете, многие люди используют дома холодильники и стиральные машины? Наверное практически все. А ломается эта техника? Еще как! А всегда ли ее потом чинят? Наверное кто-то чинит. А кто-то не чинит, а хочет от нее избавиться. А как проще всего избавиться? Вынести на помойку? А если вы живете на 3…5 этаже без лифта? Может быть выкинуть в окно? ;-) Нет, гораздо проще дать бесплатное объявление типа «Отдам даром старый холодильник. Морозит кое как самовынос и самовывоз». Объявление можно дать на авито или юлу. Указать свой номер телефона и всегда найдутся желающие взять технику. Что-то можно будет сдать в прием лома, что-то пустить на запчасти, а что-то может и починить, если есть навыки.
Только вот есть интересные моменты: сколько может найтись таких желающих и как быстро они найдутся?
Забегая вперед скажу: желающих может найтись много, и найдутся они очень быстро. В СПб, в среднем, холодильник в любом состоянии находит нового владельца за 1…2 минуты. Время очень короткое, неправда ли? А теперь я расскажу мою историю по порядку.
Несколько лет назад, мне по работе приходилось мотаться по городу. Причем ездил я в основном на метро и на маршрутках. Сидел и копался на сайтах объявлений в поисках чего-то интересного из компьютерных раритетов и прочих штуковин. И случайно напоролся на объявление об отдаче то ли газовой плиты, то ли еще чего-то похожего. И отдавали рядом с моим домом. Решив, разжиться на халявку этой техникой я дождался станции (чтобы не так шумно было) и позвонил, но мне ответили, что все, уже отдано. А прошло минуты 3…4. Ого-го, что-то быстро. И я стал уже целенаправленно искать подобные объявления, и да, они находились, только реально что-то взять уже не выходило. Я всегда опаздывал.
В больших бизнес-приложениях часто встречаются повторяющиеся по структуре интерфейсы, но с разными элементами внутри. Например граф, динамический список, какие-нибудь мульти-табы со сравнением сущностей, степперы с кастомной логикой, интерфейсы группировки, итд.
Все эти интерфейсы часто объединяет одно: есть некая структура данных, которую нужно отобразить определенным образом, а на нижнем уровне этой структуры могут быть сущности разного типа.
Всем привет! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.
В прошлый раз один из моих коллег рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью, могут найти её по ссылке. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI.
В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.
Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.
Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.
Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.
Технология WebRTC, предоставленная Google для всеобщего использования в 2011 году, нашла широкое применение в системах видео коммуникации, трансляции видео, для создания групповых чатов, видеоконференций, роботов телеприсутствия и роботов-промоутеров. Ее главным достоинством является реализация базовых методов и классов непосредственно в браузере, что обеспечивает широчайшую совместимость с различными ОС и аппаратными платформами. В предлагаемой статье описывается реализованный нами метод масштабирования видео для передачи средствами WebRTC, с использованием Javascript и HTML5.
Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.
В какой-то момент, после создания нескольких веб-проектов с нуля несколько раз подряд и столкнувшись с одними и теми же проблемами в разных браузерах, я выработала определенный "стиль работы", если можно так выразиться, и корректировка моего CSS-кода в разных браузерах способом "исправил - и готово" перестала меня устраивать. Тогда я решила изучить процедуру сбросов и обнаружила в них гораздо больше нюансов, чем казалось вначале.
Продолжая тему постепенного перехода от десктопного софта к аналогичным онлайн сервисам, в этой статье я хочу рассказать вам о виджете, который способен потягаться с его величеством "Excel". Речь пойдет о весьма необычном JavaScript решении для полноценной работы с электронными таблицами, которое гибко настраивается и легко интегрируется в любое окружение. Давайте разбираться что же представляет собой SpreadSheet и так ли он хорош на самом деле.
Во время разработки своего приложения в качестве проекта внутри компании, поступил запрос на постройку графика по некоторой выборке данных, чтобы по команде Slash Command происходила постройка графика и его публикация в чат.
Первым делом я обратился к уже существующим решениям, графики через API Google, готовые гемы для Ruby. Основной минус в том, что не было возможности убрать или добавить легенду в том формате, который мне нужен, сложно кастомизировать внешний вид этих графиков и, к примеру, нет возможностей строить график по значению timestamp, а выводить уже значения в формате DateTime.
Имея на вооружении тот метод, который освещает эта статья, любой сможет строить какую угодно страницу полностью на сервере, получать фото этой страницы и использовать её в коде. В будущем можно приспособить этот подход для, например, для предпоказа тем на своем движке, генерации каких-то изображений с подвязкой к внешнему API и заключении всего в html документ. В целом, применений реально много, собственно поэтому и решил поделится solution'ом.
Поэтому предлагаю вам скорее ознакомится с материалом, мы научимся сначала делать график с использованием своего js скрипта, а потом поймём как его рендерить в коде.
Представляю содержание.
Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.
Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.
Состоялся релиз web-браузера Firefox 92, сообщает Techradar. Новая версия, как сообщают разработчики, обеспечивает пользователей усиленными протоколами защиты данных, исправлены мелкие недочеты и улучшена производительность браузера, а также разработчики продлили срок поддержки версий 78.14.0 и 91.1.0.
Кроме этого, версия Firefox 93 перешла в стадию бета-тестирования, релиз которой намечен на 5 октября.
Основные нововведения Firefox 92:
- Появилась возможность автоматического проброса на HTTPS с использованием протокола HTTPS в DNS вместо HTTP-заголовка Alt-Svc (HTTP Alternate Services, RFC-7838), что позволяет серверу определять альтернативный способ обращения к сайту. При отправке DNS-запросов, помимо записей A и AAAA для определения IP-адресов, теперь также запрашивается DNS-запись HTTPS, через которую передаются дополнительные параметры установки соединения.
- Реализована поддержка корректного воспроизведения видео в полном цветовом диапазоне RGB.
Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!
А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?
В общем, давайте вместе полистаем старую книжку.
