Pull to refresh
149
0
Максименко Александр @mclander

Разработчик

Send message

CSS :has() селектор

Reading time8 min
Views29K

Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.

В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.

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

Зачем на камере и видеорегистраторе нужен криптоблок и как его восстановить

Level of difficultyMedium
Reading time11 min
Views8.1K


Представьте себе ситуацию, когда на камере наблюдения испортилась флэшка с прошивкой, и камера нуждается в ремонте. Берём копеечную флэшку и меняем, а прошивку скопируем с точно такой же камеры. Пять минут рекламы, и теперь камера работает и показывает видеопоток вновь. Но есть нюанс. Дело в том, что она теперь является полной копией камеры-донора прошивки. Это и ежу понятно, они же и были одинаковыми — возразите вы. Были одинаковыми всем, кроме таких настроек, как MAC-адрес и идентификатор в облаке, куда камера сливает свой видеопоток. А теперь они совсем близнецы.

Когда распространились камеры с облачным доступом, массово решились такие проблемы, как доступ к камере без внешнего IP-адреса или с динамическим адресом. Теперь стало ненужным использовать проброс портов на роутере, VPN, динамический DNS, требующие целой инфраструктуры для доступа к камере. Запускай себе приложение, и оно получит доступ к видеопотоку или к архиву через облако. Производители камер в то время пробовали различные варианты, которые часто заканчивались печальными результатами, как с камерами Foscam, связанные с тем, что производитель выбрал путь простоты и дешевизны, а пользователи за него проголосовали рублём. Камеры становились легкодоступными, дешёвыми и, в конце концов, собой просто заполонили весь мир, проникнув в магазины, детские сады, зоопарки, аэропорты, бары, подъезды, офисы, входы, выходы, проходы, пароходы и даже в спальни с туалетами. В крупнейшем каталоге камер insecam.org тогда были сотни тысяч камер со всего мира.
Что такое криптоблок в прошивке, зачем он нужен и как его заменить
Total votes 53: ↑53 and ↓0+53
Comments29

React hooks, как не выстрелить себе в ноги. Часть 3.2: useMemo, useCallback

Reading time12 min
Views41K

Данная статья продолжение статьи про мемоизацию, в которой мы разбирали зачем нужно использовать memo и как правильно с ним работать. В этой статье разберем, как правильно использовать useMemo и useCallback, какое у них api и разберем пару трюков. В прошлой статье я писал, что в следующей будет информация про useRef, useImperativeHandle и прочее, но в итоге решил, что текущий материал можно объяснить проще. Только трюки подведут нас к использованию useRef и уже в следующей лекции мы разберемся с ним.

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

Domain fronting для чайников, и как его использовать для обхода блокировок

Level of difficultyMedium
Reading time11 min
Views39K

Давайте сразу вопрос на засыпку: может ли быть так, что клиент подключается, ну, например, к серверу www.python.org (самому настоящему, тому, к которому обращаются еще миллионы клиентов со всего мира), а потом использует его как прокси и гоняет через это подключение трафик до своего VPS для доступа в неподцензурный интернет? Если вы не уверены в ответе на этот вопрос или почему-то ответили "нет", то добро пожаловать в статью.

Я уже не раз рассказывал здесь о технологии XTLS-Reality (1, 2, 3) суть которой в том, что ваш прокси-сервер VPS может очень достоверно маскироваться под какой-нибудь популярный веб-сайт - принимать подключения, которые будут выглядит точно так же, как обращения к настоящему сайту, отвечать на них полностью аутентичным TLS-сертификатом, и в целом вести себя как тот настоящий сайт. Единственная проблема - сам IP-адрес. Немного подозрительно, когда к какому-нибудь якобы www.google.com постоянно обращается только один пользователь, а IP-адрес этого сервера на самом деле даже не относится к автономной сети Google.

Еще я рассказывал о разных вариантах проксировать трафик посредством вебсокетов и простых HTTP-туннелей через различные CDN, такие как Cloudflare и Gcore. Вероятность того, что под блокировку попадет вся CDN гораздо ниже, чем что забанят какой-то один сервер или диапазон хостера, но та схема требовала регистрацию своего домена для работы через CDN.

И наверняка многим в голову приходила идея, а нельзя ли как-нибудь совместить эти два механизма? Проксироваться через CDN, но при этом "прикрываясь" каким-нибудь чужим доменом? Ответ: да, можно, и сейчас мы посмотрим, как именно.

Читать далее
Total votes 75: ↑74 and ↓1+73
Comments45

OpenAPI/Swagger для начинающих

Level of difficultyEasy
Reading time7 min
Views47K

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

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

CSS-селектор :has() и междустрочные интервалы в длинных текстах

Reading time6 min
Views4K


Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д.

Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments3

Болгарский киберпанк: как стать компьютерной державой развитого социализма

Reading time6 min
Views17K

Страны Балканского полуострова ассоциируются много с чем. Для кого-то это «Кустурица и сливовица», для кого-то — трагические конфликты, непростая история, вампиры с Ван Хелсингом и мемы под мотивы турбофолка. Киберпанк — едва ли не последнее, с чем Балканы ассоциируются у большинства из нас, включая многих жителей юго-востока Европы.

И всё же в начале 1990-х годов болгарские хакеры и прежде всего создатели вирусов гремели на весь мир. Болгария вообще умеет удивлять при ближайшем знакомстве. Мало кто сейчас помнит, что в раннем средневековье Болгарское царство временами почти на равных оспаривало господство над регионом у Византийской империи. Болгарии мы обязаны распространением кириллического письма — а сыгравший огромную роль в просвещении восточных славян и формировании их языков церковнославянский язык по сути представляет собой вариант древнеболгарского.
Читать дальше →
Total votes 91: ↑91 and ↓0+91
Comments78

React hooks, как не выстрелить себе в ноги. Часть 2: useEffect и useLayoutEffect

Reading time10 min
Views40K

В этой статье разберем как с помощью useEffect воспроизвести методы жизненного цикла в функциональных компонентах. Поговорим как и когда использовать useEffect и useLayoutEffect. Обсудим особенности отправки запросов из useEffect. Также узнаем почему массив зависимостей необязателен и когда это может пригодиться.

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

Читать далее
Total votes 12: ↑9 and ↓3+6
Comments9

React hooks, как не выстрелить себе в ноги. Часть 1: работа с состоянием

Reading time8 min
Views39K

Статья поможет новичкам понять как работать с хуками, а также будет полезна и опытным разработчикам. Этой статьей открываю серию статей про хуки.

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

Читать далее
Total votes 18: ↑12 and ↓6+6
Comments7

Keys in React. Готовим правильно

Reading time15 min
Views77K

Сегодня поговорим об атрибуте key в React. Часто разработчики, которые только начинают использовать React, не придают большого значения атрибуту key. А зря…


image
Что говорит уточка, когда узнала, что ты не используешь key


Чтобы представить работу ключей полностью и с различными кейсами, рассмотрим план:


  1. Reconciliation
  2. Реиспользование ключей и нормализация
  3. Использование key при рендере одного элемента
  4. Работа с ключами при передаче компоненту children
Total votes 33: ↑33 and ↓0+33
Comments1

Как мы избавились от 80% своего кода, повысив скорость разработки и уменьшив количество ошибок

Reading time12 min
Views63K


Оптимизация кода и развитие микросервисной архитектуры занимает значительную часть жизни команды разработчиков МВидео-Эльдорадо. Тем любопытней изучить опыт коллег за рубежом. Предлагаем вашему вниманию очередной пост на тему: «А как там у них».
Читать дальше →
Total votes 98: ↑90 and ↓8+82
Comments101

Создаем приложение на Node.JS, Express и Typescript с Jest, Swagger, log4js и Routing-controllers

Reading time7 min
Views54K
Это пошаговая инструкция создания приложение на Node.JS, с использованием typescript и express. Новое приложение создается не часто, отсюда забываются шаги по его созданию. И я решил написать некую шпаргалку, в помощь самому себе и другим разработчикам. Помимо шагов, я так же снял небольшие видео ролики для наглядности. Существуют уже готовые фреймворки для Node.JS, которые уже содержат в себе все необходимые пакеты и можно работать с ними, но это уже другой путь. Идея была в том, чтобы не зависить целиком от какого-то фреймворка и в случае необходимости менять одни пакеты на другие.
Читать дальше →
Total votes 6: ↑4 and ↓2+2
Comments14

Миниатюрный датчик качества воздуха на батарейке с e-ink экраном

Reading time6 min
Views27K
Приветствую всех читателей Habr! В своей сегодняшней статье, хочу рассказать вам о своем новом DIY беспроводном устройстве – датчике качества воздуха. Помимо оценки качества воздуха, датчик может оценивать уровень освещенности в помещении, температуру, влажность и атмосферное давление, на основе данных атмосферного давления, устройство может предсказывать прогноз погоды. Это полностью открытый проект.

Узнать подробности
Total votes 115: ↑106 and ↓9+97
Comments56

Полное визуальное руководство/шпаргалка по CSS Grid

Reading time7 min
Views342K

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.


Что такое CSS Grid?



Грид — это макет для сайта (его схема, проект).


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


Вот простой пример макета сайта, созданного с помощью Грида.

Читать дальше →
Total votes 41: ↑40 and ↓1+39
Comments4

Микрофронтенды. Учимся на ошибках

Reading time6 min
Views12K
В этой статье я расскажу с какими проблемами удалось столкнуться при построении микрофронтендов, каким образом их можно было бы избежать, а также немного привнести полученного опыта в довольно редкоподнимаемую тему микрофронтендов.



Микрофронтенды на iframe


В одной компании взвешенным и обдуманным решением CTO было принято, что микрофронтендам наравне с микросервисами быть, причем сервировать их надо на iframe'ах.
Читать дальше →
Total votes 9: ↑9 and ↓0+9
Comments21

По зубам: гигиена, часть 1

Reading time7 min
Views17K

На это всегда не хватает времени: как вечером хочется поскорее пойти спать, а добраться до зубной щётки сродни подвигу, так и на приёме у стоматолога рассказ о гигиене зачастую ограничивается лаконичным, но явно недостаточным советом: «Купите какую-нибудь щётку средней жёсткости и какую-нибудь пасту с травами и чистите зубы 2 раза в день».



Зубной налёт (макрофото с электронного микроскопа)

Читать дальше →
Total votes 18: ↑15 and ↓3+12
Comments39

Тестирование требований: как я нахожу ошибки в бизнес-логике фичи прежде, чем их закодят

Reading time13 min
Views93K

Привет, Хабр. Меня зовут Ольга, я работаю в тестировании с 2013 года, специализируюсь на тест-анализе и тест-дизайне. Сегодня хочу рассказать, как при планировании тестирования сохранить фокус на пользователях и их потребностях.

Часто тестировщики начинают планирование тестирования с составления карты приложения. Т.е. формируют список страниц и перечисляют все контролы на странице. Это приводит к тому, что каждая страница сама по себе работает, но это не значит, что пользователь может выполнить свою задачу целиком. 

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

Под катом покажу, как с помощью одной техники Use Cases найти пробелы в бизнес-логике, протестировать требования и дизайн прежде, чем написан код, и убедиться, что пользователь сможет использовать приложение, даже если что-то пойдет не так.

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

О завершении работы Node.js-процессов

Reading time9 min
Views20K
Node.js-процессы завершают работу по разным причинам. При этом в некоторых случаях «смерть» процесса можно предотвратить. Например — в ситуации, когда причиной остановки процесса может стать необработанная ошибка. А вот иногда с остановкой процесса ничего поделать нельзя. Например — если её причина кроется в нехватке памяти. В Node.js существует глобальный объект process, являющийся экземпляром класса EventEmitter. Этот объект, при нормальном завершении процесса, генерирует событие exit. Код приложения может прослушивать это событие и, при его возникновении, выполнять, в синхронном режиме, некие операции по освобождению ресурсов.

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

Операция Пример
Ручной выход из процесса
process.exit(1)
Неперехваченная ошибка
throw new Error()
Необработанное отклонение промиса
Promise.reject()
Проигнорированное событие error
EventEmitter#emit('error')
Необработанный сигнал
$ kill <PROCESS_ID>

Многие из этих операций часто выполняются случайно, например — это касается неперехваченных ошибок и необработанных исключений. Но одна из них, с которой мы начнём разбор причин завершения Node.js-процессов, была создана с целью дать разработчику возможность вручную завершать процессы.
Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments2

Возрождаем легенду – Зоркий-4 финал

Reading time4 min
Views6.9K

Привет всем! Спасибо всем большое за интерес к моей истории. Сегодня я покажу результаты работы на камерой и снимки с первой фотопленки.

Зачем идти в сторону существующих решений? Да будет дорога под ногами идущего! Раз это самый необычный Зоркий-4, то нужно идти до конца!

Читать далее
Total votes 21: ↑20 and ↓1+19
Comments26

Как удалить «неудаляемые» приложения со смартфона

Reading time5 min
Views249K


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

Оказывается, некоторые программы невозможно удалить. Например, на отдельных моделях Samsung невозможно удалить Facebook (есть только опция 'disable'). Говорят, на Samsung S9 вдобавок предустановлены «неудаляемые» приложения Microsoft.

Эти смартфоны приведены для примера. Такая же проблема и на других моделях. На многих есть неудаляемые программы от самого производителя.

Всё это надо зачистить.
Читать дальше →
Total votes 190: ↑179 and ↓11+168
Comments203
1
23 ...

Information

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