Как стать автором
Обновить
50
0
steinebel @steinebel

Пользователь

Отправить сообщение

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

Время на прочтение8 мин
Количество просмотров59K

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

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

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

Время на прочтение20 мин
Количество просмотров38K

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

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

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

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

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

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

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

Время на прочтение10 мин
Количество просмотров122K

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


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


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


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

Читать дальше →
Всего голосов 26: ↑24 и ↓2+22
Комментарии82

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

Время на прочтение6 мин
Количество просмотров18K

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

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

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

Время на прочтение4 мин
Количество просмотров59K

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

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

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

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

Google Finance давай, до свидания!
Всего голосов 23: ↑22 и ↓1+21
Комментарии31

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

Время на прочтение8 мин
Количество просмотров18K


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


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


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

Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Комментарии8

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

Время на прочтение9 мин
Количество просмотров46K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



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

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

Время на прочтение4 мин
Количество просмотров51K
Я давно связан с этой сетью, и в свое время это было идеальное место для разработки и старта приложений:

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

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

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

Время на прочтение13 мин
Количество просмотров47K

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


image

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

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

Время на прочтение4 мин
Количество просмотров56K

Rusty lock


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


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


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


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

Читать дальше →
Всего голосов 92: ↑73 и ↓19+54
Комментарии500

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

Время на прочтение8 мин
Количество просмотров98K

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

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

Время на прочтение4 мин
Количество просмотров248K
Ingress — игра от Google, представляющая нам мир с дополненной реальностью. Работает только на платформе android. При запущенной игре вы видите реальную карту мира вокруг нас (Ingress использует геопозиционирование), но помимо этого вы видите дополнительные объекты — порталы, резонаторы и прочее. Обычно порталы расположены на памятниках нашего мира.
На хабре уже был обзор этой игры, сейчас же я хочу рассказать несколько полезных советов для тех, кто начинает играть.
Читать дальше →
Всего голосов 47: ↑33 и ↓14+19
Комментарии116

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

Время на прочтение2 мин
Количество просмотров19K
Сервис omg-img позволяет вставлять иконки вот так:

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



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

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

  • home
  • sheep-on-bike
  • trump

Читать дальше →
Всего голосов 76: ↑72 и ↓4+68
Комментарии105

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

Время на прочтение8 мин
Количество просмотров99K

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


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


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


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


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


Читать дальше →
Всего голосов 66: ↑62 и ↓4+58
Комментарии33

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

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

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

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

Время на прочтение5 мин
Количество просмотров43K

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


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

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



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


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


Под катом:


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

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

Время на прочтение9 мин
Количество просмотров55K


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


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


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

Улыбнемся вместе
Всего голосов 62: ↑56 и ↓6+50
Комментарии72

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

Время на прочтение9 мин
Количество просмотров19K

Введение


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

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

Sketch of a low-power step-up converter

Читать дальше →
Всего голосов 67: ↑66 и ↓1+65
Комментарии17

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

Время на прочтение4 мин
Количество просмотров43K
image
Слева – узор обоев с симметрией вращения шестого порядка вокруг каждой из коричнево-зелёных розеток. Справа – узор обоев с зеркальной симметрией относительно горизонтальных линий, проходящих через каждый эллиптический элемент орнамента витража.

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

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

Время на прочтение1 мин
Количество просмотров360K
Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

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


Читать дальше →
Всего голосов 78: ↑75 и ↓3+72
Комментарии25
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Дата рождения
Зарегистрирован
Активность