Если вы рассматриваете запросы на исправление или создаете программное обеспечение в команде, пользовательские правила eslint могут сэкономить вам много времени. Вот как это делается.
destream @lestatbbk
Пользователь
One UI своими руками в домашних условиях
16 мин
Туториал
Встречайте, Siesta 1.0 - аналог One UI на любом Android девайсе!
One UI существует уже как 3 года (с 2018), а уроков по тому, как сделать похожий дизайн, в мире android, я так и не нашёл. Не порядок… Сегодня же, мы начнём прокладывать этот тяжёлый и тернистый путь.
Эффективный поиск XSS-уязвимостей
21 мин
Про XSS-уязвимости известно давным-давно — казалось бы, нужен ли миру ещё один материал о них? Но когда Иван Румак, занимающийся тестированием безопасности, поделился методологией их поиска на нашей конференции Heisenbug, реакция зрителей оказалась очень положительной.
И спустя два года у этого доклада по-прежнему растут просмотры и лайки, это один из самых востребованных материалов Heisenbug. Поэтому теперь мы решили, что многим будет полезна текстовая версия, и сделали ее для Хабра.
Под катом — и текст, и видео. Далее повествование идет от лица Ивана.
Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно
6 мин
Мы используем TypeScript, потому что это делает разработку безопаснее и быстрее.
Но, на мой взгляд, TypeScript из коробки содержит слишком много послаблений. Они помогают сэкономить немного времени JavaScript-разработчикам при переходе на TS, но съедают очень много времени в долгосрочной перспективе.
Я собрал ряд настроек и принципов для более строгого использования TypeScript. К ним нужно привыкнуть один раз — и они сэкономят массу времени в будущем.
Хранилище для Веба
6 мин
Доброго времени суток, друзья.
Представляю вашему вниманию перевод статьи «Storage for the Web» автора Pete LePage.
Существует несколько технологий для хранения данных в браузере. Какая из них лучше?
Интернет-соединение может быть плохим или вовсе отсутствовать в определенных местах. Поэтому поддержка оффлайн-режима является одной из ключевых особенностей прогрессивных веб-приложений. Даже при наличии высокоскоростного подключения разумно применять кэширование и другие техники для улучшения пользовательского опыта. Существует несколько способов сохранения файлов (HTML, JavaScript, CSS, изображения и т.д.) и данных (пользовательские данные, новостные статьи и др.). Но какое решение лучше выбрать? И как обеспечить его долговечность?
Лучшее из мира Angular за неделю — Дайджест №1 (18 января - 25 января)
4 мин
Свежая подборка со ссылками на новости и материалы.
Приятного чтения!
Angular и SEO: как их подружить?
3 мин
Несмотря на заявления Google и Яндекс о поддержке поисковыми ботами парсинга сайтов SPA, надеяться на нормальную индексацию не стоит — у поисковых ботов мало ресурсов, ваше приложение должно максимально быстро отрабатывать, иначе, вам либо порежут рейтинг, либо не спарсят страницу, так же бот может не дождаться отработки всех ваших скриптов…
(исследование Google bot)
Мой маленький проект для исследования технологий — изменение посещаемости, после перехода на Server Side Rendering (SSR)
Как настроить Angular и готовые примеры ниже подкатом.
CSS Grid — швейцарский армейский нож для макетов сайтов и приложений
9 мин
Перевод
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.
Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:
В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный
Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:
В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный
div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Всё, что нужно знать о выравнивании во Flexbox
7 мин
Перевод
Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.
Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.
В первой статье этого цикла я рассказала, что происходит при объявлении свойства
За всю историю CSS правильное выравнивание по обеим осям казалось самой сложной проблемой. Появление этой функции во Flexbox для многих стало главным преимуществом этой технологии. Выравнивание свелось к двум строчкам CSS.
Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.
В первой статье этого цикла я рассказала, что происходит при объявлении свойства display: flex для элемента. Сейчас рассмотрим свойства выравнивания и как они работают с Flexbox. Если вы когда-либо приходили в замешательство, применить align или justify, надеюсь, эта статья многое прояснит!История выравнивания во Flexbox
За всю историю CSS правильное выравнивание по обеим осям казалось самой сложной проблемой. Появление этой функции во Flexbox для многих стало главным преимуществом этой технологии. Выравнивание свелось к двум строчкам CSS.
Отзывчивые изображения: CSS-приёмы, которые помогают экономить время
3 мин
Перевод
Если вы занимаетесь веб-разработкой, то высока вероятность того, что вам знакомы два чудовища, о которых пойдёт речь в статье, перевод которой мы сегодня публикуем. Речь идёт об изображениях и о дедлайнах. Иногда, по каким-то причинам, картинки никак не хотят помещаться в те места макетов страниц, которые для них предназначены, а вы не можете потратить несколько часов на то, чтобы с этим разобраться.
Автор этого материала говорит, что он часто сталкивался с подобной проблемой, и эти столкновения кое-чему его научили. Здесь он хочет рассказать о пяти подходах к управлению размерами изображений, которые нравятся ему больше всего.
Автор этого материала говорит, что он часто сталкивался с подобной проблемой, и эти столкновения кое-чему его научили. Здесь он хочет рассказать о пяти подходах к управлению размерами изображений, которые нравятся ему больше всего.
Разбираемся с объектами в JavaScript
7 мин
Перевод
В этом материале автор — фронтенд-разработчик — сделал обзор основных способов создания, изменения и сравнения объектов JavaScript.
Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj['a']).
Помните, что скобки следует использовать, если ключ:
Одно из свойств, которое объекты в JS получают при создании, называется Prototype, и это очень важное понятие.
Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект
Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj['a']).
Помните, что скобки следует использовать, если ключ:
- не является допустимым JavaScript-идентификатором (в нем есть пробел, тире, начинается с цифры...)
- является переменной.
Одно из свойств, которое объекты в JS получают при создании, называется Prototype, и это очень важное понятие.
WebSockets в Angular: cоздаем Angular Service для работы с вебсокетами
9 мин
Туториал
В этой статье я постараюсь детально охватить узкую сферу применения технологии в рамках фреймворка Angular и его уже неотъемлемого помощника — RxJs, при этом мы намеренно не будем касаться серверных реализаций, т.к. это полноценная тема для отдельной статьи.
Данный текст будет полезен тем, кто уже знаком с Angular, но хочет углубить свои знания непосредственно по теме.
Установка, настройка системы и управления для камер
7 мин
Итак, приступим, будем использовать:
Айпишники, которые будут использоваться в нашем how-to:
192.168.110.151 – адрес нашего самого видеорегистратора;
192.168.107.103 – адрес айпишной камеры.
- Систему: Ubuntu Server 12.04;
- Видеорегистратор: Zoneminder;
- Камеры: аналоговые и айпишные dlink;
- Плата видеозахвата: PCI bridge: Hint Corp HiNT HB4 PCI-PCI Bridge (PCI6150)
- Основное требование: поднять сервер видеонаблюдения для производства
Айпишники, которые будут использоваться в нашем how-to:
192.168.110.151 – адрес нашего самого видеорегистратора;
192.168.107.103 – адрес айпишной камеры.
Как я автоматизировал дачу на 90%
9 мин
Дачная электрика – известная проблема, отношение к ней в большинстве случаев наплевательское, если не сказать хуже. Если есть возможность подключить что-то не так и не туда — это, конечно, будет сделано.
Когда мы с женой начинали строить новую дачу вместо старой (где электрика прокладывалась многими поколениями и представляла собой жуткую мешанину из проводов и распаячных коробок), то прежде всего решили, что электрика будет грамотной, а дача – умной.
16 инструментов React, которые пригодятся разработчикам интерфейсов
3 мин
Для создания пользовательских интерфейсов существует большое количество инструментов (ваш К.О., не благодарите). Один из наиболее эффективных — React. Наверное, на Хабре нет нужды рассказывать о том, что это такое и зачем.
Сегодня мы решили опубликовать подборку классных вспомогательных элементов для разработчиков, которые используют React. Вероятно, подборка не исчерпывающая, но зато позволит дополнить инструментарий. Если вы используете еще что-то, чего нет в подборке, делитесь в комментариях, а мы скажем дружно спасибо и добавим классные предложения в подборку. Предупреждение — под катом довольно много гифок, у кого платный трафик — осторожнее, ребята.
Нам нужно больше рюкзаков: Bobby XL от XD Design
4 мин
Где-то в голландской студии XD Design работает яростный фанат Старкрафта. Только вместо пилонов он делает… «антиугонные» рюкзаки. Всего их шесть: первый такой рюкзак под названием Bobby появился в 2016 году. Последний, который доехал до Madrobots — особенно большой и просторный. Он называется Bobby XL, и в него наконец-то можно положить ноутбук серьезных размеров.
Кросс-браузерное веб-расширение для пользовательских скриптов Ч.2
5 мин
В этой статье я продолжаю цикл публикаций, в котором я хочу рассказать о своём опыте написания веб-расширения для браузеров. У меня уже был опыт создания веб-расширения, которое установили около 100 000 пользователей Chrome, которое работало автономно, но в данном цикле статей я решил углубиться в процесс разработки веб-расширения тесно интегрировав его с серверной частью.
Angular 5: Unit тесты
10 мин
Туториал
С помощью unit тестов мы можем удостовериться, что отдельные части приложения работают именно так, как мы от них ожидаем.Это в некоторой степени спасает от поломок существующий код, помогает прояснить — как он будет работать в тех или иных случаях. И, в конце концов, позволяет посмотреть на код, так скажем, со стороны, чтобы увидеть его слабые стороны.
Даже существует мнение, что сложно тестируемый код — претендент на переписывание.
Цель данной статьи — помочь в написании unit тестов для Angular 5+ приложения. Пусть это будет увлекательный процесс, а не головная боль.
Кольцевые столбчатые диаграммы в ассортименте
6 мин
Туториал
Эволюционный подход в решении задач как нельзя кстати подходит для визуализации данных. Дивжение от простого к сложному, от одномерных данных к многомерным итерация за итерацией. В этой статье рассмотрим различные варианты круговых диаграмм, от самой простой одномерной до нестандартной самодельной многомерной. В качестве инструмента будем использовать D3.js. Всех заинтересованных прошу под кат.