Pull to refresh
50
0
steinebel @steinebel

User

Send message

Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Reading time8 min
Views58K

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Читать далее
Total votes 14: ↑13 and ↓1+12
Comments3

Ультимативный гайд по дизайн-токенам

Reading time20 min
Views37K

На небе только и разговоров, что о дизайн-системах и дизайн-токенах. Но информация представленная здесь строится исключительно на собственном опыте.

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

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

Меня зовут Женя, я руководитель UX-направления в компании Usetech. На досуге веду телеграм-канал «Мамкин Дизайнер», где рассказываю о вот таких штуках.

Я сам — дизайнер, но мне важно было понять, что такое дизайн-токены, как они работают, как компилируются из JSON и как помогают в работе.

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments11

Квалифицированная электронная подпись под macOS

Reading time10 min
Views122K

FYI. Статья написана в далеком 2019 году, делайте поправку на изменения.


Каждый предприниматель и руководитель ООО пользуется электронной подписью. Помимо КЭП для ЕГАИС и облачных КЭП для сдачи отчетности, выдаваемых банками и бухгалтерскими сервисами, особый интерес представляют универсальные УКЭП на защищенных токенах. Такие сертификаты позволяют только логиниться на гос.порталы и подписывать любые документы, делая их юридически значимыми.


Благодаря сертификату КЭП на USB-токене можно удаленно заключить договор с контрагентом или дистанционным сотрудником, направить документы в суд; зарегистрировать онлайн-кассу, урегулировать задолженность по налогам и подать декларацию в личном кабинете на nalog.ru; узнать о задолженностях и предстоящих проверках на Госуслугах.


Представленный ниже мануал поможет работать с КЭП под macOS – без изучения форумов КриптоПро и установки виртуальной машины с Windows.

Читать дальше →
Total votes 26: ↑24 and ↓2+22
Comments82

Выводим первый транш с Upwork

Reading time6 min
Views18K

UW
Как человеку с образованием программиста и без юридического разобраться в тонкостях работы банков и валютного контроля и, конечно, как вывести свои деньги с Upwork на примере банка Тинькофф бизнес.

Читать дальше →
Total votes 12: ↑11 and ↓1+10
Comments25

Гугл финанс перестал транслировать данные российских акций — что делать? (UPD: починили)

Reading time4 min
Views59K

С 5 июня 2021 года сайт гугла, и самое главное гугл таблицы - перестали отдавать данные с Московской биржи. 

При попытке получить любые котировки с префиксом MCX, например для Сбербанка, формулой из гугл таблиц =GOOGLEFINANCE("MCX:SBER") теперь всегда возвращается результат #N/A.

А при поиске любой российской бумаги на сайте Google находятся любые рынки, кроме Московской биржи.

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

Google Finance давай, до свидания!
Total votes 23: ↑22 and ↓1+21
Comments31

Как с помощью js и google sheets стать соседом Билла Гейтса по гольф клубу

Reading time8 min
Views18K


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


Вот и у меня появилось свободное время, которое я посвятил анализу своих сделок в Тинькофф Инвестициях. Есть 2 типа людей: одни прекрасно строят многомерные массивы у себя в голове, пробегаясь по ним for-циклом в IPython Notebook, другим же нравится "щупать" цифры, раскладывая их по полочкам в Excel. Себя я отношу ко второй категории, поэтому все свои сделки аккуратно заносил в Google Sheets.


Под катом я расскажу, как автоматизировал свою рутину при помощи Google Apps Script и API от Тинькофф Инвестиций.

Читать дальше →
Total votes 12: ↑9 and ↓3+6
Comments8

Полное руководство по правильному использованию анимации в UX

Reading time9 min
Views45K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать дальше →
Total votes 41: ↑41 and ↓0+41
Comments31

Почему не стоит разрабатывать приложения для VK.com

Reading time4 min
Views51K
Я давно связан с этой сетью, и в свое время это было идеальное место для разработки и старта приложений:

1. Хорошая аудитория;
2. Возможности роста без больших финансовых вложений на старте;
3. Отличное API;
4. Поддержка приложений на уровне инфраструктуры;
5. Различные возможности заработка на аудитории.

За последние пару лет ситуация изменилась кардинально в худшую сторону, и с этого года я и моя команда не будет даже пробовать запускать что-то внутри ВК.
Читать дальше →
Total votes 408: ↑354 and ↓54+300
Comments129

Взлом Bitcoin по телевизору: обфускуй, не обфускуй, все равно получим QR

Reading time13 min
Views47K

История про то, как секретный ключ для Bitcoin’a в виде QR-кода восстановили из размазанной картинки


image

Мы могли бы просто назвать этот пост «Насколько хорош QR-код и как мы его восстановили практически из ничего». Но гораздо интереснее, когда QR-код является ключом к кошельку на сумму $1000 в битках.
Total votes 126: ↑122 and ↓4+118
Comments29

Вашим пользователям не нужны пароли

Reading time4 min
Views56K

Rusty lock


Зачастую, одно из первых архитектурных решений, принятых в начале разработки вашего сайта — будет использование email + password для авторизации пользователя. Эта связка прочно засела в наши головы, и мы уже на задумываемся, зачем мы заставляем людей придумывать пароль. Мы привыкли так делать.


Но давайте подумаем, возможно, вашим пользователям не нужны пароли.


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


Но как-же тогда избавиться от пароля? На этот вопрос, я и попробую ответить в статье.

Читать дальше →
Total votes 92: ↑73 and ↓19+54
Comments500

Какой ракетный двигатель самый лучший?

Reading time8 min
Views98K

Ракетные двигатели — одна из вершин технического прогресса. Работающие на пределе материалы, сотни атмосфер, тысячи градусов и сотни тонн тяги — это не может не восхищать. Но разных двигателей много, какие же из них самые лучшие? Чьи инженеры поднимутся на пьедестал почета? Пришло, наконец, время со всей прямотой ответить на этот вопрос.
Читать дальше →
Total votes 69: ↑64 and ↓5+59
Comments167

Полезное для начинающих играть в Ingress

Reading time4 min
Views248K
Ingress — игра от Google, представляющая нам мир с дополненной реальностью. Работает только на платформе android. При запущенной игре вы видите реальную карту мира вокруг нас (Ingress использует геопозиционирование), но помимо этого вы видите дополнительные объекты — порталы, резонаторы и прочее. Обычно порталы расположены на памятниках нашего мира.
На хабре уже был обзор этой игры, сейчас же я хочу рассказать несколько полезных советов для тех, кто начинает играть.
Читать дальше →
Total votes 47: ↑33 and ↓14+19
Comments116

Пишем URL, получаем бесплатную иконку

Reading time2 min
Views19K
Сервис omg-img позволяет вставлять иконки вот так:

<img src="https://png.icons8.com/search">



Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

  • home
  • sheep-on-bike
  • trump

Читать дальше →
Total votes 76: ↑72 and ↓4+68
Comments105

11 вещей которые я узнал, читая спецификацию flexbox

Reading time8 min
Views99K

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.


Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?


В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?


Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec


Вот хорошие отрывки.


Читать дальше →
Total votes 66: ↑62 and ↓4+58
Comments33

HTML5 Prefetching — Предварительная загрузка документов

Reading time2 min
Views8.1K
Аж в 2003 году Mozilla представила новый механизм для оптимизации загрузки страниц. И существует большой шанс, что технология войдет в HTML5.

Суть же метода в том, что на любой странице браузеру можно указать документы (страница, файл стилей, картинка), которые в скором времени могут понадобиться пользователю. И он заранее их закэширует.
Узнать, как использовать prefetching
Total votes 45: ↑41 and ↓4+37
Comments36

Красивые формы для приёма банковских карт с CardInfo.js

Reading time5 min
Views43K

UPD. CardInfo больше не работает. Используйте BinKing.


Гайд по использованию: https://habr.com/ru/post/527796/
Сайт сервиса: https://binkng.io

Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:



Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.


Поиграться с формой можно на демо странице. Код плагина и инструкции по установке на гитхабе.


Под катом:


  • Пара слов о плагине;
  • Про базу банков, и почему их 49, а не 50;
  • Про логотипы банков;
  • Про логотипы типов;
  • Несколько моих вопросов к читателям;
Читать дальше →
Total votes 71: ↑67 and ↓4+63
Comments48

Как в «Додо Пицца» потеряли 8 миллионов за один час из-за технической ошибки, а потом вернули

Reading time9 min
Views55K


Историю нашумевшей технической ошибки «Додо Пиццы», партнера Яндекс.Кассы, нам рассказал системный архитектор компании Андрей Моревский — сразу передаю микрофон автору.


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


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

Улыбнемся вместе
Total votes 62: ↑56 and ↓6+50
Comments72

Использование SVG для рисования набросков схем

Reading time9 min
Views19K

Введение


Эта статья о том, как набросать простенькую схемку из десятка элементов, когда под рукой нет ни Altium'а, ни Orcad'a, ни даже Visio, а Draw.io внезапно сломался.

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

Sketch of a low-power step-up converter

Читать дальше →
Total votes 67: ↑66 and ↓1+65
Comments17

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

Reading time4 min
Views43K
image
Слева – узор обоев с симметрией вращения шестого порядка вокруг каждой из коричнево-зелёных розеток. Справа – узор обоев с зеркальной симметрией относительно горизонтальных линий, проходящих через каждый эллиптический элемент орнамента витража.

На первый взгляд придумывать обои не сложнее, чем выполнять задания из детского сада. Дизайнеры могут выбрать любое сочетание цветов и форм для первоначального кусочка, и просто размножить его в двух направлениях. В зависимости от узора начального кусочка и выбора направлений могут появляться и дополнительные симметрии – к примеру, симметрия шестого порядка на первой картинке, или зеркальная на второй. Оба узора созданы математиком Фрэнком Фарисом [Frank Farris] из калифорнийского университета Санта-Клары.
Читать дальше →
Total votes 53: ↑51 and ↓2+49
Comments26

Шпаргалка по Flexbox (CSS3 Flexible Box)

Reading time1 min
Views359K
Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

Я решила создать краткую визуальную шпаргалку по Flexbox для тех случаев освежения памяти после паузы в будущем. Думаю, что у меня получилась шпаргалка, основанная на… шпаргалках.


Читать дальше →
Total votes 78: ↑75 and ↓3+72
Comments25
1
23 ...

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity