Pull to refresh
11
0
Ден Талалá @r3s3t

Дизайнер

Send message

Личный сервер shadowsocks за 10 минут без затрат

Reading time 3 min
Views 228K

Недавно я набрёл на интересное решение, которое позволяет развернуть личный сервер shadowsocks без каких-либо финансовых затрат. В результате получается некий аналог собственного VPN-сервера, с которым могут работать настольные компьютеры и мобильные устройства. Соединение с сервером shadowsocks защищено и устойчиво к фильтрации DPI.

Приятной особенностью такого метода развёртывания shadowsocks является то, что он не требует больших технических познаний. И настройка клиентов shadowsocks крайне проста: вся конфигурация происходит сканированием QR-кода или одной URL-строкой.

Читать далее
Total votes 14: ↑14 and ↓0 +14
Comments 64

Ant-карусель на CSS и Javascript

Reading time 6 min
Views 47K
С появлением CSS3 появилась возможность совершать анимацию без использования JS-библиотек, таких, например, как jQuery. CSS3 свойство transition позволяет плавно изменять другие свойства элемента (width, height, margin, opacity и пр.), задав в качестве параметров время и закон трансформации. Предлагаю небольшую по размерам, но достаточно функциональную карусель на чистом Javascript. Небольшую, как муравей, что гораздо меньше чем сова. Но почти с такими же возможностями.

Ant-карусель позволяет:

  • показывать один или несколько элементов;
  • элементы могут быть показаны в виде конечной или бесконечной ленты (в цикле);
  • автопрокрутка элементов;
  • навигация осуществляется стрелками, индикаторными точками или перелистыванием (для тактильных экранов);
  • автоматически подстраивается под любую ширину экрана.

Помещаем нашу карусель в файл index.html (пример файла см. ниже):

HTML
<div class="ant-carousel">
  <div class="ant-carousel-hider">
    <ul class="ant-carousel-list">
      <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p>Описание 1</p> </li>
      <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>Описание2</p> </li>
	…
      <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p>Описание N</p> </li>
    </ul>
  </div>
  <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div>
  <div class="ant-carousel-dots"></div>
</div>


Здесь использованы элементы <ul><li>, но вместо них можно использовать <div > <div >, если вам это удобнее. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками или генерацией изображения псевдо-элементами :before и :after.
Total votes 16: ↑13 and ↓3 +10
Comments 17

Принцип цикады и почему он важен для веб-дизайнеров

Reading time 6 min
Views 228K
Пару лет назад я прочитал интересные факты о жизненном цикле периодических цикад. Обычно мы не видим вокруг себя много этих насекомых, потому что бóльшую часть своей жизни они проводят под землёй и тихо сосут корни растений.

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
Читать дальше →
Total votes 696: ↑682 and ↓14 +668
Comments 119

Моё разочарование в софте

Reading time 11 min
Views 388K

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


Я занимаюсь программированием уже 15 лет. Но в последнее время при разработке не принято думать об эффективности, простоте и совершенстве: вплоть до того, что мне становится грустно за свою карьеру и за IT-отрасль в целом.

Для примера, современные автомобили работают, скажем, на 98% от того, что физически позволяет нынешняя конструкция двигателя. Современная архитектура использует точно рассчитанное количество материала, чтобы выполнять свою функцию и оставаться в безопасности в данных условиях. Все самолёты сошлись к оптимальному размеру/форме/нагрузке и в основном выглядят одинаково.

Только в программном обеспечении считается нормальным, если программа работает на уровне 1% или даже 0,01% от возможной производительности. Ни у кого вроде нет возражений.
Total votes 505: ↑474 and ↓31 +443
Comments 2474

Yargy-парсер и библиотека Natasha. Извлечения структурированной информации из текстов на русском языке

Reading time 12 min
Views 83K
В 2020 году библиотека Natasha значительно обновилась, на Хабре опубликована статья про актуальную версию. Чтобы использовать инструменты, описанные в этом тексте, установите старую версию библиотеки pip install natasha<1 yargy<0.13.

Раздел про Yargy-парсер актуален и сейчас.


Есть стандартная задача извлечения именованных сущностей из текста (NER). На входе текст, на выходе структурированные, нормализованные объекты, например, с именами, адресами, датами:



Задача старая и хорошо изученная, для английского языка существует масса коммерческих и открытых решений: Spacy, Stanford NER, OpenNLP, NLTK, MITIE, Google Natural Language API, ParallelDots, Aylien, Rosette, TextRazor. Для русского тоже есть хорошие решения, но они в основном закрытые: DaData, Pullenti, Abbyy Infoextractor, Dictum, Eureka, Promt, RCO, AOT, Ahunter. Из открытого мне известен только Томита-парсер и свежий Deepmipt NER.

Я занимаюсь анализом данных, задача обработки текстов одна из самых частых. На практике оказывается, что, например, извлечь имена из русского текста совсем непросто. Есть готовое решение в Томита-парсере, но там неудобная интеграция с Python. Недавно появилось решение от ребят из iPavlov, но там имена не приводятся к нормальной форме. Для извлечения, например, адресов («ул. 8 Марта, д.4», «Ленинский проезд, 15») открытых решений мне не известно, есть pypostal, но он чтобы парсить адреса, а не искать их в тексте. C нестандартными задачами типа извлечения ссылок на нормативные акты («ст. 11 ГК РФ», «п. 1 ст. 6 Закона № 122-ФЗ») вообще непонятно, что делать.

Год назад Дима Веселов начал проект Natasha. С тех пор код был значительно доработан. Natasha была использована в нескольких крупных проектах. Сейчас мы готовы рассказать о ней пользователям Хабра.
Natasha — это аналог Томита-парсера для Python (Yargy-парсер) плюс набор готовых правил для извлечения имён, адресов, дат, сумм денег и других сущностей.
В статье показано, как использовать готовые правила из Natasha и, самое главное, как добавлять свои с помощью Yargy-парсера.
Читать дальше →
Total votes 87: ↑86 and ↓1 +85
Comments 33

Странности CSS, о которых полезно знать

Reading time 9 min
Views 33K
В наших публикациях регулярно появляются статьи о CSS. Среди них — материал об истории CSS, рассказ о подборе имён для CSS-сущностей, статья о CSS-стилях для печати, о которых многие забывают. Мы писали о том, как работают CSS-селекторы, сравнивая происходящее с автосалоном, о сравнительно новой технологии CSS Grid Layout, и о том, что CSS — это не чёрная магия. Сегодня предлагаем вашему вниманию перевод материала, который посвящён странностям CSS, о которых, как полагает автор этого материала, мало кто знает.

image
Читать дальше →
Total votes 33: ↑31 and ↓2 +29
Comments 13

Material Design: на Луну и обратно

Reading time 11 min
Views 386K
“Это унылое диалоговое окно действительно нужно?”



В этой статье я изложил главные принципы Material Design и дал советы по их воплощению. Текст написан по следам мастер-класса для разработчиков, который мы, Роботы, устраивали совместно с российским офисом Google (Think Mobile).


Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.

При чем тут Кеннеди?
Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% — они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.

Читать дальше →
Total votes 146: ↑135 and ↓11 +124
Comments 120

Верстка email рассылок от А до Я для чайников

Reading time 9 min
Views 402K
Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.
Читать дальше →
Total votes 66: ↑62 and ↓4 +58
Comments 35

Как на самом деле работает протокол Биткоин

Reading time 28 min
Views 209K
(Замечательное объяснение принципов работы сети Bitcoin авторства Michael Nielsen. Много текста, немного картинок. Обо всех корявостях перевода — в личку, буду исправлять по мере обнаружения)

Много тысяч статей было написано для того, чтобы объяснить Биткоин — онлайн, одноранговую (p2p) валюту. Большинство из этих статей поверхностно рассказывают суть криптографического протокола, опуская многие детали. Даже те статьи, которые «копают» глубже, часто замалчивают важные моменты. Моя цель в этой публикации — объяснить основные идеи, лежащие в протоколе Биткоин в ясной, легкодоступной форме. Мы начнем с простых принципов, далее пойдем к широкому теоретическому пониманию, как работает протокол, а затем копнем глубже, рассматривая сырые (raw) данные в транзакции Биткоин.
Читать дальше →
Total votes 70: ↑64 and ↓6 +58
Comments 18

Онлайн патентование в Бюро Патентов и Торговых Марок США

Reading time 3 min
Views 5.7K
Это возможно. Может быть, для кого-то это не новость, но для меня это стало почти открытием: можно запатентовать свое изобретение в Бюро Патентов и Торговых Марок США (United States Patent and Trademark Office), сокращенно — USPTO (именно там патентуются все Гуглы и Эплы) не вставая из-за компьютера. В буквальном смысле этого слова. У меня вся процедура заняла ровно 15 минут. Спешу поделиться.

Информация к размышлению:

1. USPTO — это американский Роспатент, только с мозгами.
2. USPTO принимает заявки на патентование у жителей любых стран, в т. ч. из РФ.
3. У них есть такая замечательная штука, как временная заявка (Provisional Application) — это приоритет на изобретение в упрощенной и ускоренной форме. Своего рода анонс вашего будущего патента.
4. Provisional Application (далее Provisional Application) действует 12 месяцев, после чего ее нужно подтвердить «настоящим патентом», иначе теряет силу.
5. Временная заявка нигде не публикуется.
6. Заявка может быть написана по-русски (но перевод должен быть предоставлен не позднее 16 месяцев с момента подачи).
7. Заявка стоит от 105 долларов. Можно и больше, но это зависит только от количества информации, которую вы попытаетесь запихнуть в заявку. Мне вполне хватило 105.
8. Оформление заявки делается с помощью веб-приложения EFS-Web. Оно может: добавлять заявку в базу USPTO, проверять эту заявку, принимать пошлину за прием заявки и высылать заявителю квитанцию о приеме заявки.
9. Я не патентный поверенный, не юрист и вообще не-не-не. Просто любитель. Поэтому если надумаете получать таким образом патент — проверяйте. Хотя у меня, вроде, все получилось.
10. Услуга по оформлению Provisional Application у патентных поверенных стоит в среднем 15 000 рублей. Не считая самих пошлин.

Итак, поехали
Читать дальше →
Total votes 67: ↑62.5 and ↓4.5 +58
Comments 37

Чёрточки: только ли тире, минус и дефис?

Reading time 4 min
Views 177K
Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

Читать дальше →
Total votes 311: ↑288 and ↓23 +265
Comments 208

Всё (или почти всё) о пробеле

Reading time 13 min
Views 133K
Как следует из заголовка, речь в статье пойдёт о неотъемлемой части любого русскоязычного (и не только) текста — о пробеле. Мы затронем историю пробела, виды пробелов, вопросы употребления пробела в веб-типографике.

Вообще говоря, пробел — это любое пустое место в рукописном, печатном или отображаемом на любом другом носителе тексте. Так что пробелы бывают разные:
  • спусковые (большие вертикальные пропуски в первой полосе издания) и концевые пробелы полосы,
  • абзацные отступы и концевые пробелы абзаца,
  • межстрочные пробелы (между строками текста),
  • межсловные пробелы (между словами в одной строке),
  • межбуквенные пробелы (между буквами в слове).
Далее речь пойдёт о межсловных пробелах, разделяющих слова, и функционально принадлежащих к знакам препинания.
Читать дальше →
Total votes 134: ↑130 and ↓4 +126
Comments 132

Тонкости использования селекторов аттрибутов в CSS

Reading time 4 min
Views 34K
CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
h2[rel=friend] {
  /* woohoo! */
}

Читать дальше →
Total votes 165: ↑140 and ↓25 +115
Comments 116

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Works in
Date of birth
Registered
Activity