Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
3. Будет доступно управление элементами с клавиатуры и других устройств.
4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
6. Работает при выключенном javascript.

Не смотря на то, что на Хабре была уже не одна статья про IPFS.

Сразу уточню, что я не являюсь экспертом в этой области, но не раз проявлял интерес к этой технологии, но попытки поиграться с ней часто вызывало некоторую боль. Сегодня я опять взялся за эксперименты и получил кое-какие результаты, которыми хотел бы поделиться. Если коротко, то будет описан процесс установки IPFS и некоторые фишки (все выполнялось на ubuntu, на других платформах не пробовал).

Server Name Indication (SNI) — расширение компьютерного протокола TLS[1], которое позволяет клиентам сообщать имя хоста, с которым он желает соединиться во время процесса «рукопожатия».

Проблема SNI была в том что имя сайта идёт в открытом виде. И провайдер используя его может заблокировать сайт или анализировать интересы пользователей.

ESNI — тот же SNI только зашифрованный открытым ключом хостинг провайдера.

О нём уже было пара статей на хабре:

1. CloudFlare реализовала поддержку Encrypted SNI
2. Стандарт Encrypted SNI реализован в Firefox Nightly

В моей практике чаще всего в качестве шаблонизатора используется именно XSLT. Я не буду рассуждать о том, почему так происходит — о преимуществах данной технологии написано вполне достаточно. Но ещё больше написано о её недостатках. Считается, что XSLT является слишком многословным и тяжёлым для чтения, а также не самым производительным. В этой статье я постараюсь собрать несколько советов по улучшению качества XSLT-кода с точки зрения читабельности и выразительности. Некоторые из них также позволят XSLT работать несколько быстрее.

Именованные шаблоны

Многие «проблемы» XSLT связаны с тем, что мы слишком часто пытаемся писать на нём в процедурном стиле. Мы постоянно пытаемся сделать из него Smarty, но упираемся в один простой факт — XSLT является декларативным языком, как бы необычно это для нас не выглядело.
Например, мы пытаемся использовать именованные шаблоны, воспринимая их как процедуры, выводящие данные в определённом формате:

<xsl:template name="CreateItemLink">
    <xsl:param name="item"/>
    <a href="/item/?id={$item/id}">
        <xsl:value-of select="$item/name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

Наверное, многие программисты именно так написали свой первый шаблон. И он неплохо решает свою задачу. Декларативный XSLT предлагает немного другой подход:

<xsl:template match="item">
    <a href="/item/?id={id}">
        <xsl:value-of select="name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

Разница совсем не велика. Дело вкуса и стиля программирования. Давайте посмотрим, как шаблон будет использоваться в дальнейшем.

Доброго времени суток!

Введение

К своему стыду, я совсем недавно познакомился с элементом details, который по сути является виджетом для представления информации о чём-либо. По информации, которая есть у меня, его поддержка достаточна скудна, так как поддерживается он на данный момент лишь в Google Chrome, начиная с 12.0, а также в Android Browser, начиная с версии 4.0. Что же, давайте посмотрим, что это за зверь такой.

Вступительное слово

Я выступил с этим докладом на английском языке на конференции GopherCon Russia 2019 в Москве и на русском — на митапе в Нижнем Новгороде. Речь в нём идёт о bitmap-индексе — менее распространённом, чем B-tree, но не менее интересном. Делюсь записью выступления на конференции на английском и текстовой расшифровкой на русском.

Мы рассмотрим, как устроен bitmap-индекс, когда он лучше, когда — хуже других индексов и в каких случаях он значительно быстрее них; увидим, в каких популярных СУБД уже есть bitmap-индексы; попробуем написать свой на Go. А «на десерт» мы воспользуемся готовыми библиотеками, чтобы создать свою супербыструю специализированную базу данных.

Очень надеюсь, что мои труды окажутся для вас полезными и интересными. Поехали!

Узлы в блокчейн-сети анонимны и работают в условиях отсутствия доверия. В этой ситуации встает проблема верификации данных: как проверить, что в блоке записаны корректные транзакции? Для оценки каждого блока понадобится большое количество времени и вычислительных ресурсов. Решить проблему и упростить процесс помогают деревья Меркла.

Что это такое, как используется, какие существуют альтернативы — расскажем далее.

В девелоперских сборках браузеров Chrome, Firefox и Opera появилась поддержка нового элемета picture, призванного решить ряд проблем возникающих при разработке адаптивных дизайнов. Давайте рассмотрим его подробнее.

Синоптики предсказывают, что к 2016 году наступит второй ледниковый период трафик в беспроводных сетях на 10% превзойдёт трафик в проводном Ethernet. При этом от года в год частных точек доступа становится примерно на 20% больше.

При таком тренде не может не радовать то, что 80% владельцев сетей не меняют пароли доступа по умолчанию. В их число входят и сети компаний.

Этим циклом статей я хочу собрать воедино описания существующих технологии защит, их проблемы и способы обхода, таким образом, что в конце читатель сам сможет сказать, как сделать свою сеть непробиваемой, и даже наглядно продемонстрировать проблемы на примере незадачливого соседа (do not try this at home, kids). Практическая сторона взлома будет освещена с помощью Kali Linux (бывший Backtrack 5) в следующих частях.

Статья по мере написания выросла с 5 страниц до 40, поэтому я решил разбить её на части. Этот цикл — не просто инструкция, как нужно и не нужно делать, а подробное объяснение причин для этого. Ну, а кто хочет инструкций — они такие:

Используйте WPA2-PSK-CCMP с паролем от 12 символов a-z (2000+ лет перебора на ATI-кластере). Измените имя сети по умолчанию на нечто уникальное (защита от rainbow-таблиц). Отключите WPS (достаточно перебрать 10000 комбинаций PIN). Не полагайтесь на MAC-фильтрацию и скрытие SSID.

Оглавление:
1) Матчасть
2) Kali. Скрытие SSID. MAC-фильтрация. WPS
3) WPA. OpenCL/CUDA. Статистика подбора

Что такое Yggdrasil?

Yggdrasil — это распределённая Mesh сеть, которая работет в Overlay режиме, позволяя сделать интернет поверх интернета.

Причем, сеть может одновременно работать в двух режимах — через интернет и без интернета, соединяясь напрямую с физически соседними пирами (через Ethernet, Wi-Fi или Bluetooth) работая на 3-ем уровне модели OSI.

На Apple устройствах использован протокол AWDL.

Последние новости о сети cjdns датируются 2017 годом, может показатся, что сеть умерла и разработка остановлена (на самом деле — да), однако появился самозванец — Yggdrasil, который практически полностью копирует cjdns однако делает это намного лучше.

В посте рассмотрим:

• Что такое Yggdrasil
• Зачем это нужно
• Откуда он взялся
• Можно ли ему доверять
• В чем отличее от cjdns
• Почему его стоит установить прямо сейчас
• Поддержка iOS (Да!)
• Что в планах
• Как настроить

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101.
2. Эффекты фильтрации SVG. Часть 2. контурный текст при помощи feMorphology
3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer.
4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

---

Во второй части серии об SVG-фильтрах Sara Soueidan знакомит нас с фильтром feMorphology и приводит несколько примеров его использования для создания интересных эффектов.

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

Быстрое изменение состояния посреди анимации

Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

Yet another P2P Messenger

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

Обязательно для закрепления нужно создать что-то интересное, чтобы наработки можно было бы использовать в других своих задачах.

Статья ориентирована на новичков интересующихся языком go и пиринговыми сетями.
И для профессионалов, умеющих предлагать разумные идеи или конструктивно критиковать.

Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

• Фоны и рамки;
• Фигуры;
• Визуальные эффекты.

«Он снова это сделал!», — вот, что первое пришло мне в голову, когда я посмотрел на оборотную сторону флаера Pixar ^[1], полностью заполненную кодом. Скопление конструкций и выражений была подписана в правом нижнем углу не кем иным, как Эндрю Кенслером. Для тех, кто его не знает, скажу: Эндрю — это программист, придумавший в 2009 году 1337-байтный трассировщик лучей размером с визитку.

На этот раз Эндрю придумал нечто более объёмное, но с гораздо более интересным визуальным результатом. Так как я закончил писать свои Game Engine Black Books про Wolf3D и DOOM, у меня появилось время на изучение внутренностей его загадочного кода. И почти сразу меня буквально очаровали обнаруженные в нём техники. Они сильно отличались от предыдущей работы Эндрю, основанной на «стандартном» трассировщике лучей. Мне было интересно узнать о ray marching, функциях конструктивной объемной геометрии, рендеринге Монте-Карло/трассировкой пути, а также множестве других трюков, которые он использовал, чтобы ужать код в такой небольшой кусок бумаги.

TL;DR: IPFS позволяет хостить статические сайты распределённо, доступ к которым можно осуществлять через публичные кеширующие гейты (прозрачные реверс-прокси) в интернете, без необходимости устанавливать программу посетителю. Такие сайты можно раздавать без маршрутизируемого («белого») статического IP-адреса (будет работать за NAT), они остаются работоспособными при кратковременном (несколько часов) отсутствии раздающих, за счет кеша на гейтах. К гейтам по желанию можно привязать свой домен, причём добавить DNS-записи можно на несколько гейтов одновременно, для повышения надёжности и балансировки нагрузки. Сайт могут скачать другие пользователи IPFS и помочь с раздачей.
IPFS отлично подходит для статических блогов, простых сайтов, файловых архивов (в качестве замены Bittorrent), а также просто для единовременной передачи больших файлов без предварительной загрузки их на какой-либо сервис.

Что такое IPFS?

IPFS — децентрализованная пиринговая система передачи файлов, по принципу работы похожая на BitTorrent, но с возможностью доступа через HTTP, для Web. Все скачиваемые пользователем файлы временно кешируются IPFS-демоном и раздаются другим пользователям, запрашивающим их. Важные файлы можно «прикрепить» (pin) к IPFS-демону, тогда они не исчезнут из кеша.

Меня всегда удивлял JavaScript прежде всего тем, что он наверно как ни один другой широко распространенный язык поддерживает одновременно обе парадигмы: нормальные и ненормальное программирование. И если про адекватные best-практики и шаблоны прочитано почти все, то удивительный мир того, как не надо писать код но можно, остается лишь слегка приоткрытым.

В этой статье мы разберем еще одну надуманную задачу, требующую непростительных надругательств над нормальным решением.

Доброго времени прочтения, уважаемые читатели Хабра.

В продолжение темы Big Data resistance 1. Прочитав комментарии к статье от dartraiden и YourChief, задумался на тему, а впрямь ли все хорошо и достаточно ли тестов анонимности и безопасности на 2ip и Whoer или раз все хорошо, значит что-то не заметил. К тому же, ряд проблем находил по интернету или сталкивался с ними сам в момент написания статьи.

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

Так же, в данной статье, предлагаю рассмотреть простую и бесплатную настройку VPN и защищенного DNS на уровне пользователя.

Я хотел бы подарить сообществу Хабра статью, в которой стараюсь дать достаточно полное описание подходов к алгоритмам подсчёта единичных битов в переменных размером от 8 до 64 битов. Эти алгоритмы относятся к разделу так называемой «битовой магии» или «битовой алхимии», которая завораживает своей красотой и неочевидностью многих программистов. Я хочу показать, что в основах этой алхимии нет ничего сложного, и вы даже сможете разработать собственные методы подсчёта единичных битов, познакомившись с фундаментальными приёмами, составляющими подобные алгоритмы.

И снова здравствуйте! Сегодня я поведаю о фильтре Блума — структуре данных гениальной в своей простоте. По сути, этот фильтр реализует вероятностное множество всего с двумя операциями: добавление элемента к множеству и проверка принадлежности элемента множеству. Множество вероятностное потому, что последняя операция на вопрос «принадлежит ли этот элемент множеству?» даёт ответ не в форме «да/нет», а в форме «возможно/нет».