Pull to refresh
70
28.2
Send message

Разработка документации на VuePress

Reading time13 min
Views8.7K

VuePress представляет собой минималистичный генератор статичных сайтов, оптимизированный для написания технической документации.

Изначальной целью VuePress, была поддержка фреймворка Vue.js и сопутствующей инфраструктуры. Для примера, можно посмотреть любую документацию по Vue: Vue.jsVue RouterVuex, где применяется единый стиль, заложенный в основе VuePress.

В ходе статьи мы разберем архитектуру VuePress, разработаем базовое приложение и выложим на GitHub Pages.

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

Как предоставить доступ для всех устройств из локальной сети к VPN

Reading time7 min
Views36K

Наверное, ни для кого уже не секрет, что использование технологии Virtual Private Network (VPN) становится повседневной необходимостью. На рынке присутствует много решений – платных и бесплатных.

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

Читать далее
Total votes 17: ↑13 and ↓4+10
Comments52

Лучшие практики модальных окон. Компоненты дизайн системы

Reading time10 min
Views21K

Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн.
В этой статье я описываю работу модального окна для десктоп-версии сайтов.

Читать далее
Total votes 9: ↑8 and ↓1+7
Comments12

JavaScript: малоизвестные, но полезные API

Reading time10 min
Views18K


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, посвященной 4 малоизвестным API, которые в некоторых ситуациях могут оказаться весьма полезными:



Код примеров на GitHub.

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

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 3

Reading time20 min
Views15K


Как и обещал продолжаем.


В этой части:


  • создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
  • создадим иконку корзины с количеством товаров
  • подключим модальное окно с товарами в корзине
  • перепишем всю логику store
Читать дальше →
Total votes 4: ↑4 and ↓0+4
Comments2

JavaScript: полное руководство по классам

Reading time10 min
Views93K
Доброго времени суток, друзья!

В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.

Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.

Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.

В данной статье мы научимся работать с классами: определять классы, их частные (приватные) и открытые (публичные) поля и методы, а также создавать экземпляры.
Читать дальше →
Total votes 8: ↑5 and ↓3+4
Comments6

Стили заголовков в CSS: картинки, тени, анимации

Reading time6 min
Views17K

Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек. 

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

Веб-приложение на Node и Vue, часть 2: компоненты, формы, маршруты

Reading time13 min
Views48K
Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.

image
Читать дальше →
Total votes 22: ↑21 and ↓1+20
Comments9

Frontend в условиях полной редактируемости

Reading time4 min
Views7.4K

В этой статье мы расскажем подробно про систему поблочной сборки и подводные “камни” реализации подобной системы под «1С-Битрикс» для frontend-разработчиков.

Блочная редактируемость

Нам требовалось разработать сайт на базе CMS «1С-Битрикс: Управление сайтом» и при этом предоставить контент-менеджерам полную власть над страницами и их содержимым. Контент-менеджеры \читай не разработчики\ должны иметь возможность собирать страницы из заранее созданных блоков, определять порядок этих блоков на странице, управлять настройками дополнительного визуального оформления для каждого из блоков и редактировать контент в рамках поддерживаемых типов данных. И всё это управляется через визуальный редактор Битрикса без необходимости вручную создавать новый инфоблок для каждого блока на странице. Такую систему можно назвать “Блочная редактируемость”.

Читать далее
Total votes 7: ↑3 and ↓4+3
Comments8

Валидация форм во Vue.js

Reading time11 min
Views79K
Привет, Хабр!

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

Vue.js содержит много интересных и необычных подходов к валидации, которые помогут решить ваши проблемы. Обзор под катом!

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

Свой AR. Основы векторной алгебры

Reading time10 min
Views19K


В настоящий момент появилось достаточно большое количество библиотек дополненной реальности с богатым функционалом (ARCore, ARKit, Vuforia). Тем не менее я решил начать свой открытый проект, попутно описывая как это работает изнутри. Если повезет, то позже получится добавить какой-то особый интересный функционал, которого нет в других библиотеках. В качестве целевых платформ пока возьмем Windows и Android. Библиотека пишется на C++, и сторонние библиотеки будут задействованы по минимуму, т.е. преимущественно не будет использовано ничего готового. Фокус в статьях будет направлен на алгоритмы и математику, которые постараюсь описать максимально доступно и подробно. В этой статье пойдет речь про основы векторной алгебры.

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

Стыкуем UserGate c зарубежными FW: боевой инструктаж

Reading time8 min
Views9.1K

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

В профильных чатах то и дело спрашивают про настройки IPsec между UserGate и FortiGate, между UserGate и CheckPoint. Приготовили для вас горячие пирожки — полноценные инструкции настройки VPN-туннелей между UserGate и CheckPoint, FortiGate, NSX Edge, MikroTik и Cisco. Граблей мы пособирали достаточно и теперь готовы поделиться опытом с теми, кто только начинает разбираться в возможностях настройки IPsec.

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

Улучшение производительности vue приложения

Reading time8 min
Views18K

У нас в TeamHood есть wiki. Там собралась коллекция рекомендаций, в том числе, по улучшению производительности тяжелого фронтенда на vue.js. Улучшать производительность понадобилось, потому что в силу специфики наши основные экраны не имеют пагинации. Есть клиенты, у которых на одной kanban/gantt доске больше тысячи вот таких вот карточек, все это должно работать без лагов.

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

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

Vue.js и слоистая архитектура: вынесение бизнес-логики в сервисы

Reading time8 min
Views28K

Когда нужно сделать код в проекте гибким и удобным, на помощь приходит разделение архитектуры на несколько слоев. Рассмотрим подробнее этот подход и альтернативы, а также поделимся рекомендациями, которые могут быть полезны как начинающим, так и опытным разработчикам Vue.js, React.js, Angular. 

В старые времена, когда JQuery только появился, а о фреймворках для серверных языков лишь читали в редких новостях, веб-приложения реализовывали целиком на серверных языках. Зачастую для этого использовали модель MVC (Model-View-Controller): контроллер (controller) принимал запросы, отвечал за бизнес-логику и модели (model) и передавал данные в представление (view), которое рисовало HTML. 

Объектно-ориентированное программирование (ООП) на тот момент только начинало формироваться, поэтому разработчики зачастую интуитивно решали, где и какой код надо писать. Таким образом, в мире разработки зародилось такое понятие, как «Божественные объекты», которые первоначально отвечали практически за всю работу отдельных частей системы. Например, если в системе была сущность «Пользователь», то разработчику следовало создать класс User и в нем писать всю логику, так или иначе связанную с пользователями. Без разбиения на какие-то ещё файлы. И если приложение было большим, то такой класс мог содержать тысячи строк кода.

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

Требования ГОСТ на автоматизированные системы в ИБ-проектах. Что изменилось и как это применять?

Reading time17 min
Views103K

Традиционно разработчики документации на автоматизированные системы при создании и обеспечении защиты этих систем применяли ГОСТы 34-й серии. С 2022 года наконец-то произошло обновление старых стандартов в рамках новой серии национальных и межгосударственных стандартов на автоматизированные системы (далее — ГОСТ на автоматизированные системы).

В этой статье мы проясним основные особенности применения ГОСТ на автоматизированные системы, а также разберемся в изменениях, которые произошли в 2022 году.

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

Модульность во Vue.js и Vuex

Reading time3 min
Views13K

image


При написании больших фронтенд-приложений управление состоянием может стать довольно сложной и утомительной задачей.


image


Для Vue.js был разработан плагин Vuex, предназначенный для управления состоянием. По умолчанию в нем выстроена следующая структура папок:


image
Структура папок в хранилище Vuex


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

Читать дальше →
Total votes 2: ↑1 and ↓10
Comments13

Docker: собираем веб сервер

Reading time9 min
Views55K

Готовый набор окружения веб сервера на базе контейнеров Docker. Включает в себя MySQL, PHP, NGINX, composer, SSL сертификаты и механизм резервного копирования в облако.

Читать далее
Total votes 18: ↑8 and ↓10-1
Comments21

Управление энергоснабжением: 8 способов избежать незапланированного простоя оборудования

Reading time5 min
Views1.4K

Несколько лет назад авиакомпания Delta Air Lines потеряла 25–50 млн $ прибыли из-за отключения электроснабжения в крупнейшем в мире аэропорту — Международном аэропорту Хартсфилд-Джексон Атланта — ей пришлось отменить около 1400 рейсов. На восстановление обычного графика полетов потребовалось несколько дней. Этот пример демонстрирует риски и убытки, которые может повлечь незапланированный простой, причем не только в авиации, но и в других отраслях. По оценкам компании Interbit Data, в больницах средний объем расходов в связи с простоем составляет 8662 $ в минуту, а по данным ITIC, такие расходы для 98 % организаций составляют более 100 000 $ в час.

Функционирование крупных зданий и критически важных объектов в значительной степени зависит от надежности энергоснабжения, однако сбои в электросистемах происходят все чаще. На это есть много причин. В последние годы наблюдается все больше опасных метеорологических явлений, распределительная сеть изнашивается и с добавлением новых инженерных систем становится все менее централизованной. В связи с этим растет количество сбоев сетей энергоснабжения на объектах, при этом сложность их внутренних электрических сетей увеличивается. Растущее количество устройств силовой электроники (например, приводов и ПЛК) становится источником «загрязнения» систем электропитания и может снижать надежность работы оборудования.

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

Парадигма резервного копирования NetApp

Reading time6 min
Views15K
В этом посте я хотелбы рассмотреть подход к резервному копирования данных на СХД NetApp серии FAS.


Архитектура резервного копирования

WAFL


И начну я издали — со снепшотов. Технология снепшотов впервые была изобретена (и запатентирована) в 1993 году компанией NetApp, а само слово Snapshot™ является её торговой маркой. Технология снепшотирования логически проистекала из механизмов работы файловой структуры WAFL. Почему WAFL не файловая система смотрите здесь. Дело в том, что WAFL всегда пишет новые данные «в новое место» и просто переставляет указатель на содержимое новых данных в новое место, а старые данные не удаляются, эти блоки данных, на которые нет указателей, считаются высвобожденными для новых записей. Благодаря этой особенности записи, «всегда в новое место», механизм снепшотирования был легко интегрирован в WAFL, из-за чего такие снепшоты называют Redirect on Write (RoW). Подробнее про WAFL.
Читать дальше →
Total votes 5: ↑4 and ↓1+3
Comments41

Information

Rating
203-rd
Registered
Activity