Всем привет! Возможно уже совсем скоро разные новостные и IT-ресурсы будут подчищать информацию о способах обхода блокировок. А пока этого не случилось, запасаемся полезными гайдами и разворачиваем свои собственные VPN с защищенными от блокировок протоколами. Расскажу как это сделать, как изменилась Amnezia и как мы защитили WireGuard от блокировок.
Пользователь
Проксируем OpenVPN с помощью Cloak
Cloak — это подключаемый транспорт, который расширяет возможности традиционных прокси-инструментов, таких как OpenVPN, Shadowsocks и Tor для обхода сложной цензуры и дискриминации данных.
Руководство будет включать:
1. Предисловие
2. Описание работы Cloak
3. Настройку сервера Cloak
4. Настройку клиента Cloak на OpenWRT
5. Настройку клиента OpenVPN
Как в 4 раза увеличить время работы устройств с автономным питанием
История о том, как мы оптимизировали схему питания автономных датчиков сбора, обработки и передачи информации. Добились снижения себестоимости электроники, веса датчика и незначительно увеличили его габаритные размеры.
В статье описана эволюция схемы питания автономных датчиков сбора и обработки информации. Я постараюсь кратко рассказать о всех этапах усовершенствования схемы. Начну рассказ с разработки прототипа, соответствующего всем требованиям, кроме главного. Расскажу о попытке привести работу схемы к требованиям с минимальными усилиями, просто увеличив количество элементов питания. Опишу поиск и анализ причин несоответствия параметров схемы. В заключительной части приведу оптимизированную схему и сравнение до и после.
Надеюсь, мой опыт пригодится вам при разработке устройств с автономным питанием.
Вывод Telegram-канала на свой вебсайт
Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым.
Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.
Ох уж эти модальные окна или почему я полюбил render-функции в VueJs
Моя первая публикация прошла с неприятным осадком. Я обещал исправить это недоразумение и на ваш суд представляю свою первую статью-урок по VueJs. Надеюсь, она окажется полезной. Мыслей много, опыта тоже немало. Всю жизнь учусь по чужим статьям, урокам. Пришло время тоже делиться знаниями.А будем мы творить модальные окна. Да опять они. Но не такие простые, как описаны в первой моей (не моей) публикации.
Много уже их создано для Vue. Пользовался всякими. И видимо, когда достигаешь какого-то определенного уровня владения инструментом (в данном случае Vue), сразу хочется сделать велосипед, но конечно со своими прибамбасами, типа, чтобы круче всех и т.д. И я не стал исключением из правил.
Из всех доступных модальных компонентов, использовал в основном этот — Vuedals.
Но решил я его проапгрейдить. В принципе от основы остался только EventBus и взаимодействие событий связанных с открытием-закрытием окон. Основной компонент переписан и стал оберткой-контейнером и добавлен новый компонент — само модальное окно.
Но обо всем по порядку. И статья получится очень немаленькая, кто осилит, тот красавчик :)
30 секунд CSS
Предлагаем вашему вниманию коллекцию полезных CSS-сниппетов, в которых вы можете разобраться за 30 секунд, а то и быстрее.
Пунктирные вау-эффекты: о магии простыми словами
Продолжаем смотреть технические приемы создания различных анимаций в интерфейсах. Мы уже познакомились с частицами, масками и изменением форм различных объектов — настал черед рисовать пунктирные линии.
Перед тем, как перейти к статье, сделаю небольшое отступление. Эта серия статей предназначена для разработчиков (в первую очередь начинающих), которые хотят делать красивые вещи, но совершенно запутались в сложных инструментах. Каждый раз мы затрагиваем какой-то один прием использования того или иного инструмента и смотрим, к созданию какиих эффектов его можно применить. Комментарии о том, что “во времена флеша было лучше” или что “нужно анимации рисовать в AfterEffects” безусловно имеют право на существование, но будут вырваны из контекста и совершенно не помогут начинающим в решении их задачи.
Создание модального компонента с помощью 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-атакам.
Здесь мы используем именованные слоты, это дает возможность использовать более одного слота в одном компоненте.
Favicon сегодня: форматы, поддержка, автоматизация
Гид по верстке адаптивных писем
Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.
В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.
33 способа ускорить ваш фронтенд в 2017 году
Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.
HTTP/2: готовимся к переходу
В прошлом году в мире сетевых технологий произошло очень важное событие: была утверждена и стандартизирована новая версия протокола HTTP — HTTP/2. HTTP/2 уже поддерживается в популярных веб-серверах: Apache и Nginx. Идёт работа по внедрению HTTP/2 в IIS. Реализована поддержка и в большинстве современных браузеров.
Использование HTTP/2 за последнее время существенно расширилось.
Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG
Требования:
— Windows или Mac OSX;
— Photoshop CS5, CS6;
— Adobe Illustrator.
Загрузить скрипт PSD в SVG
Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.
Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.
Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.
С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного.
БЭМ-методология: с чего всё начиналось и зачем это всё нужно
Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Лучшие бесплатные коллекции векторных иконок
Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах:
@font-face
, SVG, EPS, AI, PSD, Sketch.В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.
Responsive Icons (100 иконок, PSD, AI, EPS, SVG)
STM32F4: GNU AS: Программирование на ассемблере (Часть 1)
Так же теперь (2021 год) я написал небольшой редактор для программ на ассемблере, начинать читать можно с Редактор ассемблера для ARM микроконтроллеров для компилятора gnu as. Старт там же можно будет и создавать проект в более удобном формате нежели описано в этой и нескольких последующих статьях. При этом рекомендую все таки ознакомится со всеми статьями по этой тематике в моих публикациях, так как не везде я повторяю прошлые материалы.
Это моя первая статья для сообщества Хабрахабр и написать ее я решил про то что сейчас волнует меня самого: написание программ для микроконтроллеров STM32 (семейство АRМ) на языке ассемблера. Я использую отладочную плату на основе микроконтроллера STM32F407 (STM32F4 Discovery, Open407I-C), но статья будет не менее полезна и для программирования других микроконтроллеров STM32.
Сбербанк делится опытом создания приложения в Material Design: стили и темы
Мы передаём слово команде разработчиков Android-приложения Сбербанка, чтобы вы услышали об опыте создания такой сложной штуки, как UI мобильного банк-клиента, из первых уст. Большую часть поста написал freeuser, так что спасибо говорите ему. ;)
Let's Encrypt выходит в публичную бету: HTTPS всюду, каждому, отныне и навсегда бесплатно
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 является совместным, неподконтрольным какой-либо конкретной организации некоммерческим проектом созданным исключительно для того, чтобы принести пользу обществу.
Air Datepicker, легкий и красивый выбор даты
Информация
- В рейтинге
- Не участвует
- Откуда
- Ростов-на-Дону, Ростовская обл., Россия
- Зарегистрирован
- Активность