HTML/CSS

Собственный VPN клиент на JavaScript. 8 часть — Electron компонент Setting

P.S.
Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать с 1 части


Setting —
Electron компонент, элемент настройки приложения.

Структура папок.

context
│
│   index.js
│
└───client // все что относится к клиенту
    │   creater-option.js
    │   index.html
    │   style.css
    │
    └───fonts
            font1.woff2
            font2.woff2
            font3.woff2
            font4.woff2
            font5.woff2
            font6.woff2
            font7.woff2

Источник

CraSSh: ломаем все современные браузеры вычислениями в CSS

Автор статьи:
Константин Сафонов

Не хочу читать эту техническую болтовню. Просто повали уже мой браузер.

Что такое CraSSh

CraSSh — это кроссбраузерная чисто декларативная DoS-атака, основанная на плохой обработке вложенных CSS-функций
var() и
calc() в современных браузерах.

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

• На движке WebKit/Blink — Chrome, Opera, Safari, даже Samsung Internet на смарт-телевизорах и холодильниках.
  
  • Android WebView, iOS UIWebView также затронуты, то есть можно обвалить любое приложение со встроенным браузером.
  
  


• На движке Gecko — Firefox и его форки, такие как Tor Browser.
  
  • Servo не запустился ни на одной из моих машин, поэтому я его не протестировал.
  
  


• На движке EdgeHTML — Edge в Windows, WebView в приложениях UWP (их вообще кто-нибудь использует?)

Браузер IE не затронут, поскольку он не поддерживает функции, на которых основана атака, но у его пользователей немало своих проблем (вероятно, этот браузер можно порушить другими способами — прим. пер.).

Источник

Собственный VPN клиент на JavaScript. 9 часть — Electron компонент Callback

P.S.
Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать с 1 части


Callback —
Electron компонент, элемент обратной связи.

Структура папок:

callback
│
│   index.js
│
└───client // Все что относится к клиенту
    │   image.jpg
    │   index.html
    │   style.css
    │
    └───fonts
            font1.woff2
            font2.woff2
            font3.woff2
            font4.woff2
            font5.woff2
            font6.woff2
            font7.woff2

Источник

Flexbox. Инфографика по технологии

Полагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.

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

Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №340 (19 — 25 ноября 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Как на самом деле работают z-index

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

Возможно, информация, которую я расскажу ниже, на самом деле тривиальна. Однако я уверен, что многие найдут её для себя полезной. Те же, кто уже о ней знал, смогут использовать данный текст как шпаргалку в трудную минуту. Итак, добро пожаловать под кат.



Источник

Фронтенд, алгоритмы и опоссум Фридрих. Разбираем задачи конкурса Яндекса

Этим постом мы завершаем серию публикаций о конкурсах Яндекс.Блиц в 2018 году. Надеемся, что вам довелось поучаствовать или хотя бы посмотреть, какие приближенные к продакшену задачи мы предлагаем. Последний контест был посвящен применению алгоритмов во фронтенде. Сегодня мы публикуем подробные разборы 12 задач: первые 6 из них предлагались в квалификационном раунде, а задачи 7–12 — в финале. Мы постарались объяснить, как формировались условия, на какие навыки мы обращали внимание. Спасибо всем участникам за проявленный интерес!



Задача 1

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

Источник

Собственный VPN клиент на JavaScript. 5 часть — Electron компонент Vpn

Vpn —
Electron компонент, основной элемент управления приложением.

Electron компонент — под этим термином я подразумеваю как раз ту организацию
Electron кода, о которой я говорил в
1 части.

Структура папок.

vpn
│
│   index.js
│
├───client // все что относится к клиенту
│       index.html
│       paper-plane.svg
│       script.js
│       style.css
│       TweenMax.min.js
│
└───icon
        blue.ico
        orange.ico
        red.ico
        yellow.ico

Источник

Разрабатываем свой браузер с нуля. Часть первая: HTML

Всем привет!

Продолжаем цикл статей по разработке браузерного движка.

В данной статье я расскажу как создать самый быстрый HTML-парсер c DOM. Мы рассмотрим HTML спецификацию и чем она плоха относительно производительности и потребления ресурсов при разборе HTML.

С данной темой я докладывался на прошедшем HighLoad++. Конференцию не каждый может посетить, плюс в статье больше деталей.

Я предполагаю, что читатель обладает базовыми знаниями об HTML: теги, ноды, элементы, пространство имён.

Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №339 (12 — 18 ноября 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Рассылай и властвуй: инструменты для создания и тестирования рассылки

Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках —
MJML и
Foundation for Emails — и моих любимых ресурсах для тестирования рассылки —
Litmus и
Email On Acid.

Источник

Меню для меню, гриды или Бутстрап, целесообразность удобства

Привет, Хабр! Давно я сюда ничего не писал, со времён моего золотого поста про переход Opera на WebKit прошло уже пять лет. Но тут появился повод: завёл себе блог на Ютубе. Чтобы понять, зачем и что это такое — смотрите пилот. Если коротко: чтобы разбирать сайты и отвечать на вопросы. А сейчас перед вами 9-й выпуск с ответами на вопросы. Под катом подробности, ссылки, почта для связи и спойлер с остальными видео. Если меня здесь не съедят живьём — буду продолжать постить сюда раз в неделю новые.

Источник

Советы по CSS, которые вы вряд ли найдете в самоучителях

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

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



Ниже изложено то, чему руководства по CSS меня не научили.

Источник

Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт
Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто
div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от
MikeRiethmuller под названием «
За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «
Большой потенциал SVG».



Я узнал две вещи, которые меня потрясли:

1. При использовании SVG вы можете отказаться от атрибута viewBox и установить новую систему координат на вложенных элементах SVG путем применения нового viewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно).


2. Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.

Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №338 (5 — 11 ноября 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник