Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
Пользователь
Ультимативный гайд по дизайн-токенам
На небе только и разговоров, что о дизайн-системах и дизайн-токенах. Но информация представленная здесь строится исключительно на собственном опыте.
Поводом для написания такого гайда стала практика и упорядочивание всей этой информации в голове. Когда я начинал этот путь, то в русскоязычном сегменте было минимум информации и приходилось по крупицам собирать общие практики.
Сегодня я подвожу итог этой темы и суммирую добытые знания, попробовав составить ультимативный гайд по теме. Хотя бы для общего понимания процесса и наводки, в какую сторону копать для таких же жаждущих знаний.
Меня зовут Женя, я руководитель UX-направления в компании Usetech. На досуге веду телеграм-канал «Мамкин Дизайнер», где рассказываю о вот таких штуках.
Я сам — дизайнер, но мне важно было понять, что такое дизайн-токены, как они работают, как компилируются из JSON и как помогают в работе.
Квалифицированная электронная подпись под macOS
FYI. Статья написана в далеком 2019 году, делайте поправку на изменения.
Каждый предприниматель и руководитель ООО пользуется электронной подписью. Помимо КЭП для ЕГАИС и облачных КЭП для сдачи отчетности, выдаваемых банками и бухгалтерскими сервисами, особый интерес представляют универсальные УКЭП на защищенных токенах. Такие сертификаты позволяют только логиниться на гос.порталы и подписывать любые документы, делая их юридически значимыми.
Благодаря сертификату КЭП на USB-токене можно удаленно заключить договор с контрагентом или дистанционным сотрудником, направить документы в суд; зарегистрировать онлайн-кассу, урегулировать задолженность по налогам и подать декларацию в личном кабинете на nalog.ru; узнать о задолженностях и предстоящих проверках на Госуслугах.
Представленный ниже мануал поможет работать с КЭП под macOS – без изучения форумов КриптоПро и установки виртуальной машины с Windows.
Выводим первый транш с Upwork
Как человеку с образованием программиста и без юридического разобраться в тонкостях работы банков и валютного контроля и, конечно, как вывести свои деньги с Upwork на примере банка Тинькофф бизнес.
Гугл финанс перестал транслировать данные российских акций — что делать? (UPD: починили)
С 5 июня 2021 года сайт гугла, и самое главное гугл таблицы - перестали отдавать данные с Московской биржи.
При попытке получить любые котировки с префиксом MCX, например для Сбербанка, формулой из гугл таблиц =GOOGLEFINANCE("MCX:SBER")
теперь всегда возвращается результат #N/A
.
А при поиске любой российской бумаги на сайте Google находятся любые рынки, кроме Московской биржи.
В этой статье я рассказываю как получать в гугл таблицу биржевые данные с помощью API Московской биржи.
Как с помощью js и google sheets стать соседом Билла Гейтса по гольф клубу
В последнее время на хабре стали появляться статьи, начинающиеся с рассказов про свободное время на самоизоляции и, как итог, появившихся троллейбусов из буханки. Возможно, администрации стоит задуматься о добавлении нового хаба — Самоизоляция..
Вот и у меня появилось свободное время, которое я посвятил анализу своих сделок в Тинькофф Инвестициях. Есть 2 типа людей: одни прекрасно строят многомерные массивы у себя в голове, пробегаясь по ним for-циклом в IPython Notebook, другим же нравится "щупать" цифры, раскладывая их по полочкам в Excel. Себя я отношу ко второй категории, поэтому все свои сделки аккуратно заносил в Google Sheets.
Под катом я расскажу, как автоматизировал свою рутину при помощи Google Apps Script и API от Тинькофф Инвестиций.
Полное руководство по правильному использованию анимации в UX
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.
В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Почему не стоит разрабатывать приложения для VK.com
1. Хорошая аудитория;
2. Возможности роста без больших финансовых вложений на старте;
3. Отличное API;
4. Поддержка приложений на уровне инфраструктуры;
5. Различные возможности заработка на аудитории.
За последние пару лет ситуация изменилась кардинально в худшую сторону, и с этого года я и моя команда не будет даже пробовать запускать что-то внутри ВК.
Взлом Bitcoin по телевизору: обфускуй, не обфускуй, все равно получим QR
История про то, как секретный ключ для Bitcoin’a в виде QR-кода восстановили из размазанной картинки
Мы могли бы просто назвать этот пост «Насколько хорош QR-код и как мы его восстановили практически из ничего». Но гораздо интереснее, когда QR-код является ключом к кошельку на сумму $1000 в битках.
Вашим пользователям не нужны пароли
Зачастую, одно из первых архитектурных решений, принятых в начале разработки вашего сайта — будет использование email + password для авторизации пользователя. Эта связка прочно засела в наши головы, и мы уже на задумываемся, зачем мы заставляем людей придумывать пароль. Мы привыкли так делать.
Но давайте подумаем, возможно, вашим пользователям не нужны пароли.
Одно из возможных решений, это использовать OAuth 2.0, но не у всех пользователей может быть аккаунт в социальной сети и желание его использовать на вашем ресурсе.
Но как-же тогда избавиться от пароля? На этот вопрос, я и попробую ответить в статье.
Какой ракетный двигатель самый лучший?
Ракетные двигатели — одна из вершин технического прогресса. Работающие на пределе материалы, сотни атмосфер, тысячи градусов и сотни тонн тяги — это не может не восхищать. Но разных двигателей много, какие же из них самые лучшие? Чьи инженеры поднимутся на пьедестал почета? Пришло, наконец, время со всей прямотой ответить на этот вопрос.
Полезное для начинающих играть в Ingress
На хабре уже был обзор этой игры, сейчас же я хочу рассказать несколько полезных советов для тех, кто начинает играть.
Пишем URL, получаем бесплатную иконку
<img src="https://png.icons8.com/search">
Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.
Вместо search можно написать любое название иконки:
- home
- sheep-on-bike
- trump
11 вещей которые я узнал, читая спецификацию flexbox
Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.
Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?
В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?
Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec
Вот хорошие отрывки.
HTML5 Prefetching — Предварительная загрузка документов
Суть же метода в том, что на любой странице браузеру можно указать документы (страница, файл стилей, картинка), которые в скором времени могут понадобиться пользователю. И он заранее их закэширует.
Красивые формы для приёма банковских карт с CardInfo.js
UPD. CardInfo больше не работает. Используйте BinKing.
Гайд по использованию: https://habr.com/ru/post/527796/
Сайт сервиса: https://binkng.io
Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:
Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.
Поиграться с формой можно на демо странице. Код плагина и инструкции по установке на гитхабе.
Под катом:
- Пара слов о плагине;
- Про базу банков, и почему их 49, а не 50;
- Про логотипы банков;
- Про логотипы типов;
- Несколько моих вопросов к читателям;
Как в «Додо Пицца» потеряли 8 миллионов за один час из-за технической ошибки, а потом вернули
Историю нашумевшей технической ошибки «Додо Пиццы», партнера Яндекс.Кассы, нам рассказал системный архитектор компании Андрей Моревский — сразу передаю микрофон автору.
Еду я в «Сапсане» на открытие первой в Санкт-Петербурге пиццерии «Додо», как вдруг получаю оповещение о множественных отменах оплаченных заказов. И не просто множественных — наша система за час умудрилась откатить якобы оплаченные заказы на 8 миллионов рублей!
Сейчас эта история вызывает только улыбку, но в то утро было совсем не смешно. Поэтому хочу поделиться некоторыми техническими подробностями инцидента и сделанными выводами, а заодно немного рассказать про систему обработки заказов «Додо Пиццы».
Использование SVG для рисования набросков схем
Введение
Эта статья о том, как набросать простенькую схемку из десятка элементов, когда под рукой нет ни Altium'а, ни Orcad'a, ни даже Visio, а Draw.io внезапно сломался.
Это совсем не сложно: современные браузеры поддерживают язык разметки SVG, с помощью которого в обычном текстовом редакторе можно легко и быстро нарисовать небольшую схему типа:
Как сделать невозможные обои: история запрещённых симметрий
Слева – узор обоев с симметрией вращения шестого порядка вокруг каждой из коричнево-зелёных розеток. Справа – узор обоев с зеркальной симметрией относительно горизонтальных линий, проходящих через каждый эллиптический элемент орнамента витража.
На первый взгляд придумывать обои не сложнее, чем выполнять задания из детского сада. Дизайнеры могут выбрать любое сочетание цветов и форм для первоначального кусочка, и просто размножить его в двух направлениях. В зависимости от узора начального кусочка и выбора направлений могут появляться и дополнительные симметрии – к примеру, симметрия шестого порядка на первой картинке, или зеркальная на второй. Оба узора созданы математиком Фрэнком Фарисом [Frank Farris] из калифорнийского университета Санта-Клары.
Шпаргалка по Flexbox (CSS3 Flexible Box)
Я решила создать краткую визуальную шпаргалку по Flexbox для тех случаев освежения памяти после паузы в будущем. Думаю, что у меня получилась шпаргалка, основанная на… шпаргалках.
Информация
- В рейтинге
- Не участвует
- Откуда
- Санкт-Петербург, Санкт-Петербург и область, Россия
- Дата рождения
- Зарегистрирован
- Активность