Как стать автором
Обновить
Prometheus @Prometheusread⁠-⁠only

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

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

Создаем свой VPN с защищенным от блокировок протоколом AmneziaWG, или WireGuard на максималках

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


Всем привет! Возможно уже совсем скоро разные новостные и  IT-ресурсы будут подчищать информацию о способах обхода блокировок. А пока этого не случилось, запасаемся полезными гайдами и разворачиваем свои собственные VPN с защищенными от блокировок протоколами. Расскажу как это сделать, как изменилась Amnezia и как мы защитили WireGuard от блокировок.

Читать далее
Всего голосов 115: ↑113 и ↓2+111
Комментарии123

Проксируем OpenVPN с помощью Cloak

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров51K

Cloak — это подключаемый транспорт, который расширяет возможности традиционных прокси-инструментов, таких как OpenVPN, Shadowsocks и Tor для обхода сложной цензуры и дискриминации данных.

Руководство будет включать:

1. Предисловие

2. Описание работы Cloak

3. Настройку сервера Cloak

4. Настройку клиента Cloak на OpenWRT

5. Настройку клиента OpenVPN

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

Как в 4 раза увеличить время работы устройств с автономным питанием

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

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



В статье описана эволюция схемы питания автономных датчиков сбора и обработки информации. Я постараюсь кратко рассказать о всех этапах усовершенствования схемы. Начну рассказ с разработки прототипа, соответствующего всем требованиям, кроме главного. Расскажу о попытке привести работу схемы к требованиям с минимальными усилиями, просто увеличив количество элементов питания. Опишу поиск и анализ причин несоответствия параметров схемы. В заключительной части приведу оптимизированную схему и сравнение до и после.


Надеюсь, мой опыт пригодится вам при разработке устройств с автономным питанием.

Читать дальше →
Всего голосов 43: ↑37 и ↓6+31
Комментарии66

Вывод Telegram-канала на свой вебсайт

Время на прочтение3 мин
Количество просмотров37K
Забьем еще один гвоздь в крышку гроба Роскомнадзора.

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

Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.
Читать дальше →
Всего голосов 33: ↑28 и ↓5+23
Комментарии14

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Время на прочтение19 мин
Количество просмотров53K
Привет всем!
Моя первая публикация прошла с неприятным осадком. Я обещал исправить это недоразумение и на ваш суд представляю свою первую статью-урок по VueJs. Надеюсь, она окажется полезной. Мыслей много, опыта тоже немало. Всю жизнь учусь по чужим статьям, урокам. Пришло время тоже делиться знаниями.
А будем мы творить модальные окна. Да опять они. Но не такие простые, как описаны в первой моей (не моей) публикации.

Много уже их создано для Vue. Пользовался всякими. И видимо, когда достигаешь какого-то определенного уровня владения инструментом (в данном случае Vue), сразу хочется сделать велосипед, но конечно со своими прибамбасами, типа, чтобы круче всех и т.д. И я не стал исключением из правил.

Из всех доступных модальных компонентов, использовал в основном этот — Vuedals.
Но решил я его проапгрейдить. В принципе от основы остался только EventBus и взаимодействие событий связанных с открытием-закрытием окон. Основной компонент переписан и стал оберткой-контейнером и добавлен новый компонент — само модальное окно.
Но обо всем по порядку. И статья получится очень немаленькая, кто осилит, тот красавчик :)
Читать дальше →
Всего голосов 15: ↑11 и ↓4+7
Комментарии21

30 секунд CSS

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


Предлагаем вашему вниманию коллекцию полезных CSS-сниппетов, в которых вы можете разобраться за 30 секунд, а то и быстрее.

Читать дальше →
Всего голосов 64: ↑59 и ↓5+54
Комментарии52

Пунктирные вау-эффекты: о магии простыми словами

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


Продолжаем смотреть технические приемы создания различных анимаций в интерфейсах. Мы уже познакомились с частицами, масками и изменением форм различных объектов — настал черед рисовать пунктирные линии.

Перед тем, как перейти к статье, сделаю небольшое отступление. Эта серия статей предназначена для разработчиков (в первую очередь начинающих), которые хотят делать красивые вещи, но совершенно запутались в сложных инструментах. Каждый раз мы затрагиваем какой-то один прием использования того или иного инструмента и смотрим, к созданию какиих эффектов его можно применить. Комментарии о том, что “во времена флеша было лучше” или что “нужно анимации рисовать в AfterEffects” безусловно имеют право на существование, но будут вырваны из контекста и совершенно не помогут начинающим в решении их задачи.
Всего голосов 60: ↑60 и ↓0+60
Комментарии15

Создание модального компонента с помощью Vue.js

Время на прочтение6 мин
Количество просмотров31K
В этой статье вы узнаете, как с Vue.js создать переиспользуемый компонент модального окна с использованием анимированных переходов и слотов.

Определение структуры шаблона


Начнем с определения нашего шаблона. Нам понадобится div для заднего плана (тени), div для самого модального окна и некоторые элементы, для определения его структуры:

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <slot name="header">
      </slot>

      <slot name="body">
      </slot>

      <slot name="footer">
      </slot>
    </div>
  </div>
</template>

Обратите внимание на использование слотов? Мы могли бы использовать входные параметры (props) для создания заголовка (header), тела (body) и футера (footer), но использование слотов даст нам большую гибкость.

Слоты позволяют нам легко использовать одно и то же модальное окно с различными типами содержимого тела нашего компонента. Мы можем использовать модальное окно, чтобы показать простой текст, но мы можем захотеть повторно использовать то же модальное окно для вывода формы, чтобы отправить запрос. Хотя входящих параметров (props) обычно достаточно для создания компонента, предоставление HTML через входящий параметр потребует от нас использовать его через директиву v-html для рендеринга — что может привести к XSS-атакам.

Здесь мы используем именованные слоты, это дает возможность использовать более одного слота в одном компоненте.
Читать дальше →
Всего голосов 24: ↑14 и ↓10+4
Комментарии13

Favicon сегодня: форматы, поддержка, автоматизация

Время на прочтение10 мин
Количество просмотров130K
На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.



Читать дальше →
Всего голосов 53: ↑50 и ↓3+47
Комментарии24

Гид по верстке адаптивных писем

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

Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.


image


В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.

Читать дальше →
Всего голосов 19: ↑15 и ↓4+11
Комментарии5

33 способа ускорить ваш фронтенд в 2017 году

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

enter image description here


Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

Читать дальше →
Всего голосов 87: ↑84 и ↓3+81
Комментарии39

HTTP/2: готовимся к переходу

Время на прочтение9 мин
Количество просмотров147K
HTTP/2

В прошлом году в мире сетевых технологий произошло очень важное событие: была утверждена и стандартизирована новая версия протокола HTTP — HTTP/2. HTTP/2 уже поддерживается в популярных веб-серверах: Apache и Nginx. Идёт работа по внедрению HTTP/2 в IIS. Реализована поддержка и в большинстве современных браузеров.

Использование HTTP/2 за последнее время существенно расширилось.
Читать дальше →
Всего голосов 56: ↑55 и ↓1+54
Комментарии92

Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG

Время на прочтение2 мин
Количество просмотров37K
Использование готового и бесплатного скрипта, о котором пойдет речь, значительно упрощает и ускоряет процесс переноса исходников из Photoshop в Sketch. Но я думаю, скрипт может пригодится и для тех, кто с указанной программой не работает. Он экспортирует слои в формат .svg, избавляя от необходимости по одному генерировать SVG файлы.



Требования:

— Windows или Mac OSX;
— Photoshop CS5, CS6;
— Adobe Illustrator.

Загрузить скрипт PSD в SVG

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

Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?

Время на прочтение6 мин
Количество просмотров153K
От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.


Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.



С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного.
Или нет?
Всего голосов 73: ↑71 и ↓2+69
Комментарии44

БЭМ-методология: с чего всё начиналось и зачем это всё нужно

Время на прочтение13 мин
Количество просмотров230K
На Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.

image

Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Читать дальше →
Всего голосов 73: ↑58 и ↓15+43
Комментарии100

Лучшие бесплатные коллекции векторных иконок

Время на прочтение2 мин
Количество просмотров333K
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


Responsive Icons

Читать дальше →
Всего голосов 91: ↑82 и ↓9+73
Комментарии23

STM32F4: GNU AS: Программирование на ассемблере (Часть 1)

Время на прочтение15 мин
Количество просмотров69K
Обсуждение статьи после прочтения или задать вопросы можно в VK: vk.com/topic-200545792_46641834

Так же теперь (2021 год) я написал небольшой редактор для программ на ассемблере, начинать читать можно с Редактор ассемблера для ARM микроконтроллеров для компилятора gnu as. Старт там же можно будет и создавать проект в более удобном формате нежели описано в этой и нескольких последующих статьях. При этом рекомендую все таки ознакомится со всеми статьями по этой тематике в моих публикациях, так как не везде я повторяю прошлые материалы.

Это моя первая статья для сообщества Хабрахабр и написать ее я решил про то что сейчас волнует меня самого: написание программ для микроконтроллеров STM32 (семейство АRМ) на языке ассемблера. Я использую отладочную плату на основе микроконтроллера STM32F407 (STM32F4 Discovery, Open407I-C), но статья будет не менее полезна и для программирования других микроконтроллеров STM32.
Читать дальше →
Всего голосов 34: ↑32 и ↓2+30
Комментарии45

Сбербанк делится опытом создания приложения в Material Design: стили и темы

Время на прочтение20 мин
Количество просмотров52K
Привет, Хабрахабр! Не так давно мы подводили итоги конкурса по Material Design, и в комментариях нас просили показать реально популярные и красивые Material-приложения. Что же, встречайте: «Сбербанк Онлайн» в новом, современном интерфейсе. Про процесс создания приложения интереснее узнать от самих создателей.

Мы передаём слово команде разработчиков Android-приложения Сбербанка, чтобы вы услышали об опыте создания такой сложной штуки, как UI мобильного банк-клиента, из первых уст. Большую часть поста написал freeuser, так что спасибо говорите ему. ;)
Читать дальше →
Всего голосов 39: ↑31 и ↓8+23
Комментарии57

Let's Encrypt выходит в публичную бету: HTTPS всюду, каждому, отныне и навсегда бесплатно

Время на прочтение3 мин
Количество просмотров67K
Let's Encrypt

Let's Encrypt — это некоммерческая инициатива, предоставляющая бесплатный, автоматизированный и открытый CA (certificate authority — центр сертификации), созданный ISRG на благо общества:

  • бесплатно: владелец всякого доменного имени может воспользоваться Let's Encrypt и получить доверенный (читать как «признаётся любым современным браузером») TLS-сертификат (TLS — наследник SSL) совершенно бесплатно;
  • автоматизированно: Let's Encrypt предоставляет бесплатное и свободное программное обеспечение (клиент), которое, будучи настроенным на веб-сервере, может полностью автоматически запрашивать безвозмездно предоставляемые сертификаты Let’s Encrypt, автоматически конфигурировать и обновлять их;
  • безопасно: Let’s Encrypt строится как платформа для продвижения наилучших практик безопасности TLS как на стороне центра сертификации (CA), так и на стороне веб-сайтов, помогая администраторам должным образом настраивать веб-серверы;
  • прозрачно: информация о выпуске и отзыве каждого сертификата Let's Encrypt доступна вполне и публично так, что любой желающий изучить её сможет это сделать;
  • свободно: протоколы взаимодействия со CA, позволяющие автоматизировать процессы выпуска и обновления сертификатов, будут опубликованы как открытый стандарт для максимального внедрения;
  • кооперативно: как и любой протокол, лежащий в основе Интернета и Всемирной паутины, Let’s Encrypt является совместным, неподконтрольным какой-либо конкретной организации некоммерческим проектом созданным исключительно для того, чтобы принести пользу обществу.

Читать дальше →
Всего голосов 72: ↑71 и ↓1+70
Комментарии138

Air Datepicker, легкий и красивый выбор даты

Время на прочтение5 мин
Количество просмотров104K
Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.


Читать дальше →
Всего голосов 36: ↑35 и ↓1+34
Комментарии35
1
23 ...

Информация

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