Pull to refresh
-5
0.1
Send message

Магия CSS на практике: советы по вёрстке от гика

Level of difficultyMedium
Reading time7 min
Views9K


Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.


Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.


Сегодня я расскажу:

  • как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
  • про свойство inset, сокращающее код на целых три строки;
  • мой сниппет для расширения интерактивной области у кнопок и ссылок;
  • стиль написания медиа-запросов, позволяющий сократить количество правил;
  • альтернативный способ центрирования элемента без свойства transform.
Читать дальше →
Total votes 28: ↑28 and ↓0+37
Comments9

Factor and Block CSS — методология CSS

Level of difficultyEasy
Reading time6 min
Views3.7K

Hello, Developers!! Сегодня я расскажу о новой методологии для CSS, которая поможет вам сэкономить время на чтение и редактирование CSS-файлов. Методологию я придумал сам, если будут какие-то идеи, как улучшить её, буду рад обсудить это с вами в комментариях. Давайте же начнем.

Читать далее
Total votes 2: ↑2 and ↓0+3
Comments13

У крупнейшего поставщика литографов, компании ASML, новые проблемы. TSMC отказывается покупать новинки

Reading time3 min
Views35K

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

Теперь возникла новая серьёзная проблема: TSMC, один из главных контрактных производителей чипов в мире, не хочет покупать новое оборудование ASML. Дело в том, что оно стоит значительно дороже, чем предыдущее поколение систем, а вот насколько эффективнее — вопрос. Подробности — под катом.

Читать далее
Total votes 34: ↑20 and ↓14+21
Comments32

Временное хранилище данных на Apache Druid: почему это эффективно сработало для загрузки табличных файлов

Level of difficultyEasy
Reading time7 min
Views1.8K

Всем привет! Меня зовут Амир, я Data Engineer в компании «ДЮК Технологии». Расскажу, как мы спроектировали и реализовали на Apache Druid хранилище разрозненных табличных данных.

В статье опишу, почему для реализации проекта мы выбрали именно Apache Druid, с какими особенностями реализации столкнулись, как сравнивали методы реализации датасорсов.

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

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Level of difficultyMedium
Reading time10 min
Views9.5K


Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display


Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.


Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.


А теперь переходим к статье.

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

Побитовые операции: для чего нужны основы информатики Solidity-разработчику

Reading time10 min
Views3.7K

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

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

В статье мы рассмотрим знаковые и беззнаковые числа, прямой, обратный и дополнительный код, логические вентили, а также базовые побитовые операции и как это применяется в написании смарт-контрактов.

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

ОбАСУчиваем дачу. От идеи к проекту

Level of difficultyEasy
Reading time8 min
Views4.5K

«Всё намного сложнее, чем кажется на первый взгляд.»

Закон Мерфи.

Дисклеймер: Автор абсолютно уверен, что все поставленные задачи можно было решить иным способом. Лучше, дешевле, умнее, креативнее… Но вышло так, как вышло. Собственно, автор придерживается точки зрения, что обАСУчивание дач — процесс творческий и субъективный: «Я художник, я так вижу». Вместе с тем автор способен также к объективному восприятию информации, а потому открыт для обмена мнениями и опытом, тем более, что творческий процесс продолжается.

Начало здесь.

Итак, «мозг» у нашей «ленивой автоматики» есть. Теперь нужно подобрать «руки и ноги», то бишь исполнительные устройства. Как уже писал выше, сначала думал о соленоидных клапанах. Очень заманчива их простота – подал напряжение, и клапан сработал, снял – вернулся в исходное состояние. Нужно всего два провода. И на первый взгляд таких клапанов на Али – море. Стоимость полдюймовых – чуть ли не от 300р. Исполнение, правда, незащищённое, но можно что-нибудь придумать. Однако почитав отзывы, пришлось отвергнуть этот вариант. Основная проблема – сильно греются. Пишут, что за 10 минут работы может нагреться до 60-70 градусов. Очевидно китайские братья сэкономили на обмотке. Для кратковременных включений оно ничего, но мне-то нужно чтобы клапан работал часами. Если клапан сгорит, а мы в отъезде, то заменить его будет некому, и дача останется без полива.

Потому пришлось переключиться на другой вариант – шаровой клапан с электродвигателем. В АСУ ТП такой называется MOV – motor operated valve. Для его работы нужно уже три провода – один на команду открытия, второй на команду закрытия, и общий. Таких тоже на Али много. Есть и двухпроводное исполнение, где обратный ход обеспечивается конденсатором. Но насколько надёжен такой конденсатор? В общем, решил не искушать судьбу, и взял трёхпроводные клапана, в защищённом исполнении. Работают от 12 вольт. Стоимость каждого - в районе 1200р. Купил три — поскольку выходов «открытый коллектор» у контроллера пять, два решил оставить про запас, в расчёте на будущие задумки и расширения. Но всё равно, хотя такой клапан и надёжен, хотелось бы контролировать – течёт через него вода или нет? Снова выручил Алиэкспресс. Там же нашлись полдюймовые дачтики потока. Стоят недорого, 130р., и отзывы, вроде, неплохие. Таким образом, стала вырисовываться общая схема – управляем насосом и тремя клапанами, расход через каждый клапан контролируем датчиком. В исходном положении все клапана открыты, по необходимости закрываем один или два.

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

Основные настройки для управления ресурсами в PostgreSQL: настройка памяти, CPU и I/O

Level of difficultyEasy
Reading time6 min
Views9.1K

Привет, Хабр!

При работе с PostgreSQL (да и в целом с любой БД) важно правильно настраивать и управлять ресурсами, такими как память, процессорное время и дисковые операции, и так далее для обеспечения лучшей производительности и стабильности работы БД.

В этой статье мы как раз и рассмотрим кратко о том, как управлять ресурсами в PostgreSQL.

Читать далее
Total votes 13: ↑12 and ↓1+14
Comments17

Полное руководство по безопасности GraphQL: Устранение 13 наиболее распространенных уязвимостей

Reading time24 min
Views1.5K

Это 2024 год, и GraphQL на подъеме, чтобы стать важным игроком в экосистеме API. Это идеальное время, чтобы поговорить о том, как сделать ваши GraphQL API безопасными и готовыми к производству.

Итак, вот мой тезис: GraphQL по своей природе небезопасен. Я докажу это в течение всей статьи и предложу решения. Одно из решений потребует некоторого радикального изменения в том, как мы думаем о GraphQL, но это принесет много преимуществ, которые выходят далеко за рамки просто безопасности.

Читать далее
Total votes 4: ↑1 and ↓30
Comments3

Красавица и HTML Injection. Почему HTMLi не только про дефейс

Level of difficultyMedium
Reading time27 min
Views5.5K

Привет, Хабр. Сегодня мы посмотрим на достаточно тривиальную тему с совсем нетривиальной стороны. Пожалуй, для каждого вебера HTML-инъекции являются темой, которой зачастую уделяют не очень много внимания. Взять даже собеседования: когда в последний раз вас спрашивали не об XSS'ках, а об HTML-инъекциях?

Сегодня я попробую рассказать про большую часть интересных векторов, которые мы можем использовать при ограничении в применении JS. Не стесняйтесь пользоваться оглавлением, потому что статья подготовлена для разного уровня читателей. Чтобы не обделять новичков, я достаточно подробно описал работу HTML, ее структуры и даже то, как HTML парсится браузером!

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

Блок питания на 5 выходов

Level of difficultyMedium
Reading time3 min
Views5.3K

Для своих электронных поделок я использую самодельный регулируемый линейный блок питания на 30V 3A. Он собран на базе конструктора с AliExpress, но я добавил несколько доработок от себя. У него неплохие характеристики в плане уровня пульсаций и шума, но всего один выход. Когда я начинал проект с операционными усилителями мне потребовалось двухполярное питание. Тогда я использовал два аккумулятора формата 6F22 "Крона", включённых последовательно со средней точкой. Это хорошее решение если вам не нужен большой ток или напряжение (у аккумуляторов формата 9F22 максимально можно получить 8.4V, а в номинале 7.4V). Ну и аккумуляторы приходится периодически заряжать.

Когда пришло время соединить аналоговую часть с цифровой, пришлось использовать ещё и регулируемый блок питания для получения +5V. Всё собиралось на беспаечных макетках и не было одного выключателя чтобы отключить все питания разом. Да и напряжение +7.4V и -7.4V с аккумуляторов бывает недостаточно для операционных усилителей. Чтобы не городить батарею из аккумуляторов 18650 я решил собрать простенький линейный блок питания на 5 фиксированных напряжений: +12V, +5V, +3.3V, -5V и -12V. Такие же напряжения выдаёт компьютерный блок питания, но там есть пульсации и шумы из-за импульсного преобразователя. Для аналоговой части это бывает критично, а фильтровать помехи сложнее нежели изначально построить линейный блок.

Читать далее
Total votes 12: ↑11 and ↓1+13
Comments43

Почему разработчики любят Kotlin

Level of difficultyEasy
Reading time3 min
Views10K

Привет, Хабр! Мы в компании Friflex запустили подкаст «Гости из IT». Вместе с экспертами из разных областей IT разбираемся в технологиях и обсуждаем, как они меняют нашу жизнь и работу. 

Сегодня размышляем про Kotlin. Почему его любят, обвиняют в сахарности и не могут заключить в рамки классического определения. Своими мыслями делятся эксперты по Kotlin: Александр Нозик, директор центра научного программирования и руководитель российской Kotlin-группы, и Александр Соколинский, популяризатор Kotlin в комьюнити разработчиков. А модерируют дискуссию блогер Алексей Гладков и Петр Чернышев из Friflex.

Читать далее
Total votes 9: ↑4 and ↓5+1
Comments22

Xiaomi Mi Thermometer 2 не только Bluetooth, но и ZigBee

Level of difficultyMedium
Reading time4 min
Views78K

TL;DR: Да, можно программно изменить датчик для работы в сети Zigbee, достаточно по воздуху перезаписать прошивку.

Многим пользователям умного дома известен квадратный датчик температуры и влажности от Xiaomi LYWSD03MMC. Его очевидные плюсы — это LCD экран, подключение к системе умного дома MiHome и конечно же цена. Его без преувеличения можно назвать если не самым, то точно одним из самых дешевых "умных" датчиков, которые имеют интерфесы для подключения к умному дому. В данном случае это популярный bluetooth, который позволяет подключиться к датчику со смартфона и увидеть показания. Поэтому он завоевал своё место в сердцах строителей умных домов как дешевое и надёжное решение.

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

Готовим микрофронтенды на чистом JS без фреймворков

Level of difficultyMedium
Reading time15 min
Views8.3K

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендов. Ведь все необходимое для разработки и работы Микрофронтендов уже встроено во все современные браузеры. Интересно? Добро пожаловать в статью.

Читать далее
Total votes 20: ↑14 and ↓6+12
Comments21

Ох уж эти CSS-переменные

Level of difficultyMedium
Reading time6 min
Views9.9K


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Total votes 56: ↑56 and ↓0+56
Comments13

Знакомимся с @scope в CSS

Level of difficultyEasy
Reading time4 min
Views7.1K

В январе 2019 года я поднял вопрос в W3C CSS GitHub под названием Please bring back scoped styles. Когда-то существовал атрибут HTML scoped, но он был устаревшим. В CSS он был заменен на @scope. Поддержка должна появиться в Chrome 117. Safari так же занимает положительную позицию по спецификации.

У @scope есть два преимущества: стилизация на основе близости и установка нижней границы для селектора.

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

Простое должно быть простым: Палки в разметку

Level of difficultyMedium
Reading time15 min
Views3K

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

А как быть тем, кто заходит в сияющий мир CSS лишь изредка - по необходимости?

(А еще под раздачу попадут React-либы MUI и AntD!)

Читать далее
Total votes 3: ↑1 and ↓2-1
Comments29

Основные принципы маскирования в CSS

Level of difficultyMedium
Reading time8 min
Views16K

В мире дизайна маскирование является популярной техникой реализации уникальных эффектов. Будучи дизайнером, я сам использовал эту технику много раз, но не очень часто в веб-среде. Думаю, что от её применения на сайтах меня удерживала недостаточная поддержка браузерами. Полноценно этот функционал поддерживается в Safari и Firefox, а вот в браузерах на движке Blink (Chrome и Edge) — лишь частично.

Радует то, что тема CSS маскирования будет частью Interop 2023, а значит, вскоре можно ожидать кросс-браузерную поддержку этой возможности (Вау!).

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

Поехали!
Читать дальше →
Total votes 44: ↑44 and ↓0+44
Comments1

6 новых возможностей CSS, которые должен знать каждый front-end разработчик в 2023 году

Level of difficultyEasy
Reading time2 min
Views26K

Мощные и стабильные CSS фичи, которые вы можете использовать уже сегодня.

Я считаю, что каждый front-end разработчик должен знать, как использовать container query, создавать привязку к прокрутке, избегать position: absolute с помощью grid, быстро создавать круг, использовать каскадные слои и достигать большего с помощью логических свойств. Эта статья — описание каждой из 6 новых возможностей CSS.

Читать далее
Total votes 17: ↑10 and ↓7+5
Comments6
1

Information

Rating
2,965-th
Registered
Activity