Pull to refresh
Prometheus @Prometheusread⁠-⁠only

User

Send message

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

Reading time4 min
Views144K


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

Читать далее
Total votes 115: ↑113 and ↓2+111
Comments123

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

Level of difficultyEasy
Reading time9 min
Views51K

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

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

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

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

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

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

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

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

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

Reading time8 min
Views21K

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



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


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

Читать дальше →
Total votes 43: ↑37 and ↓6+31
Comments66

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

Reading time3 min
Views37K
Забьем еще один гвоздь в крышку гроба Роскомнадзора.

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

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

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

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

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

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

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

Reading time7 min
Views37K


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

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

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

Reading time6 min
Views31K
В этой статье вы узнаете, как с 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-атакам.

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

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

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



Читать дальше →
Total votes 53: ↑50 and ↓3+47
Comments24

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

Reading time13 min
Views63K

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


image


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

Читать дальше →
Total votes 19: ↑15 and ↓4+11
Comments5

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

Reading time20 min
Views85K

enter image description here


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

Читать дальше →
Total votes 87: ↑84 and ↓3+81
Comments39

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

Reading time9 min
Views147K
HTTP/2

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

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

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

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



Требования:

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

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

Читать дальше →
Total votes 15: ↑13 and ↓2+11
Comments26

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

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

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


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



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

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

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

image

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

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

Reading time2 min
Views333K
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 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

Читать дальше →
Total votes 91: ↑82 and ↓9+73
Comments23

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

Reading time15 min
Views69K
Обсуждение статьи после прочтения или задать вопросы можно в VK: vk.com/topic-200545792_46641834

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

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

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

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

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

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

Reading time3 min
Views67K
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 является совместным, неподконтрольным какой-либо конкретной организации некоммерческим проектом созданным исключительно для того, чтобы принести пользу обществу.

Читать дальше →
Total votes 72: ↑71 and ↓1+70
Comments138
1
23 ...

Information

Rating
Does not participate
Location
Ростов-на-Дону, Ростовская обл., Россия
Registered
Activity