Обновить
512K+

Веб-разработка *

Делаем веб лучше

359,38
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Время на прочтение31 мин
Охват и читатели182K


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

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.


Осциллограф в браузере

Время на прочтение4 мин
Охват и читатели18K

Отрисовка графиков в реальном времени




Одно время я работал в компании, которая разрабатывала бесконтактные датчики, как на фото. И при установке этих датчиков, надо было правильно сориентировать антенну (белая штука на фото). И выглядело это так: один человек на объекте, где-то в Сибири, на морозе крутит антенну, а другой в Питере, в офисе, не видит того человека, но видит графики на мониторе. И вот они как слепой с глухим пытаются поставить антенну, один по графикам, по телефону говорит, что надо антенну повернуть, а другой пытается понять в какую сторону её крутить. Звучит как бред, правда? Но так и было.

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

Namespaces в JavaScript (часть II, заключительная)

Время на прочтение8 мин
Охват и читатели3.6K

В своей прошлой статье я прикидывал, какие namespace'ы мне нужны для упорядочивания кода в ES6-модулях. В этой статье я описываю, какие namespace'ы у меня получились и как их использовать при порождении объектов и разрешении зависимостей (dependency injection).

Читать далее

Различные методы брутфорс атак WordPress

Время на прочтение5 мин
Охват и читатели30K


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


Содержание:


  • Предварительные требования
  • WPscan
  • Metasploit
  • Люкс Burp
  • Как обезопасить сайт от брутфорса?

Предварительные требования


  • Сайт на WordPress. Здесь мы будем использовать собственную лабораторию для пентеста, о созданию которой был посвящен наш предыдущий пост.
  • Kali Linux (WPscan). Более подробно о WPScan и его возможностях мы уже писали, а вместо Kali Linux можно использовать любую другую из ОС для белого хакинга.
  • Burp Suite (Intruder). Более подробно о данном инструменте можно узнать здесь.

WPscan


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


Здесь мы будем использовать WordPress, размещенный на локальном хосте.



Во время перебора можно использовать:


  • Собственные общие списки логинов и паролей
  • Базы логинов и паролей, которые уже есть в Kali Linux
Читать дальше →

Как и почему Яндекс переехал с собственного npm-репозитория на Verdaccio

Время на прочтение9 мин
Охват и читатели13K
Всем привет. Меня зовут Андрей Фримучков, я работаю в команде инфраструктуры разработки интерфейсов Яндекса. Последние несколько месяцев участвовал в запуске нового хранилища пакетов. Около года назад мы упёрлись в ограничения собственного решения и после череды экспериментов пришли к выводу, что дальше масштабироваться под растущие нагрузки не получится.

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

Как пакеты хранились раньше?


Хорошая практика при разработке на JS — хранить внутренние пакеты в собственном репозитории и сохранять копии внешних пакетов. Это снижает зависимость от внешнего npm и позволяет ограничить выходы во внешнюю сеть в системах сборки. Исторически Яндекс использовал своё решение для хранения внутренних пакетов. Долгое время оно всех устраивало, но компания росла. Росли нагрузки, репозиторий стало сложно масштабировать и поддерживать. Например, при регламентных работах в датацентрах приходилось вручную переключать мастер у CouchDB. Схема выглядела следующим образом:


Читать дальше →

Yaml vs. Json — что круче?

Время на прочтение4 мин
Охват и читатели58K
image

Всем привет!

Сегодня поговорим об интересном (и таинственном для фронтов) формате YAML. Он считается одним из наиболее популярных форматов для файлов конфигураций.

Файлы с расширением .yaml или .yml вы можете встретить довольно часто, например .travis.yml (для Travis Build), .gitlab-ci.yml (для git lab CI) и др.
И тогда возникают резонные вопросы: что это за формат и чем он отличается от JSON-а?

Цель этой статьи — познакомить вас со структурой YAML, помочь понимать, читать и изменять YAML-файлы. Для тех, кто уже знаком с форматом — напомнить про некоторые его особенности. И сравнить YAML с JSON.
Читать дальше →

PHP-Дайджест № 192 (2 – 16 ноября 2020)

Время на прочтение4 мин
Охват и читатели9.7K

Свежая подборка со ссылками на новости и материалы. В выпуске: Последний релиз-кандидат PHP 8.0 перед финальным релизом и свежие материалы по PHP 8, RFC и обсуждения из PHP Internals, порция полезных инструментов, стримы, подкасты, статьи.

Приятного чтения!

Читать дальше →

Современный стартовый HTML-шаблон

Время на прочтение2 мин
Охват и читатели37K


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

Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

  • Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
  • Пример использования HTML5-тегов
  • Пример использования CSS3-свойств
  • Пример использования CSS-модулей
  • Пример использования JavaScript-модулей
  • Файл «manifest.json»
  • Сервис-воркер общего назначения (сначала кэш, затем сеть)
  • Файл «robots.txt»
  • Файл «sitemap.xml»
  • Файл «browserconfig.xml»
  • Файл ".gitignore"
  • Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
  • Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
  • и многое другое

Официальный сайт: moderntemplate.site.

Код проекта находится здесь.
Читать дальше →

Создаем пентест-лабораторию для WordPress

Время на прочтение4 мин
Охват и читатели6.2K


В данной статье мы рассмотрим процесс создания собственной пентест-лаборатории для WordPress на:


  • Ubuntu 20.04
  • Docker
  • Windows с использованием XAMPP

Непосредственно тесты на проникновения можно делать с помощью WPScan, о котором мы уже писали.


WordPress в Ubuntu 20.04


Для работы WordPress необходимы:


  • Apache
  • База данных (MySQL / Mariadb)
  • PHP

Apache


Запустим службу HTTP с помощью Apache, используя учетную запись с root-правами. Для этого выполним следующую команду в терминале:


apt install apache2
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №441 (9 — 15 ноября 2020)

Время на прочтение3 мин
Охват и читатели9.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Web Security SQL Injection 2020

Время на прочтение6 мин
Охват и читатели15K

Статья расскажет, как использовать SQLmap и похожих инструментов для автоматизации решений заданий по sql injection на одном из популярных CTF ресурсов. В статье зайдем немного дальше, чем просто модификация risk-level «if you know what i mean». Задания не будут полностью разобраны для решения, флаги необходимо найти самостоятельно.

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

Читать далее

Добро пожаловать в Angular 11

Время на прочтение6 мин
Охват и читатели15K
Специально к старту нового потока курса «Fullstack веб-разработчик на JavaScript» представляем вам обзор новой версии популярного фреймворка JavaScript — Angular. 11.0.0 версия уже доступна, и в ней есть отличные обновления, которые затрагивают всю платформу, включая сам фреймворк, библиотеку компонентов и инструменты командной строки. Давайте посмотрим, что в этом релизе.


Приятного чтения!

Как мы распилили монолит. Часть 3, Frame Manager без фреймов

Время на прочтение6 мин
Охват и читатели5.1K
Привет. В прошлой статье я рассказал про Frame manager — оркестратор фронтовых приложений. Описанная реализация решает многие проблемы, но в ней есть недостатки.

Из-за того, что приложения грузятся в iframe, появляются проблемы с версткой, некорректно работают плагины, клиенты по-прежнему скачивают два бандла с Ангуляром, даже если версии Ангуляра в приложении и Frame Manager’е одинаковые. Да и использовать iframe в 2020 году кажется моветоном. А что, если отказаться от фреймов и загружать все приложения в один window?

Оказалось, это возможно, и сейчас я расскажу, как это реализовать.


Читать дальше →

Ближайшие события

Декларативный подход в Angular

Время на прочтение10 мин
Охват и читатели13K

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

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

Узнать, к чему это я

DartUP 2020: в этом году онлайн и с известными спикерами

Время на прочтение2 мин
Охват и читатели1.5K


4-5 декабря уже в четвертый раз Wrike при поддержке Google проведет DartUP — единственную в России конференцию по Dart и Flutter. Современная реальность внесла коррективы в наши планы, поэтому в этом году DartUP пройдет в онлайн-формате. Это значит, что мы не будем обращать внимание на границы, трудности с логистикой и часовые пояса и позовём самых крутых спикеров, которые поделятся новостями об экосистеме Dart и практическим опытом.

WPScan — мощный фреймворк для пентеста WordPress

Время на прочтение5 мин
Охват и читатели42K


Сегодня более половины всех сайтов работают на CMS, а согласно данным W3Techs 63,7% из них используют WordPress. Если ваш сайт один из таких, тогда в этой статье вы узнаете о том, как проверить его на прочность с помощью одного из самых мощных инструментов для пентеста Wordpress – WPScan.


Содержание:


  • Введение
  • Сканирование версии WordPress
  • Сканирование установленных тем оформления
  • Сканирование установленных плагинов
  • Сканирование пользователей
  • Сканирование тем, плагинов и пользователей одной командой
  • Брутфорс с помощью WPScan
  • Загрузка шелла с помощью Metasploit
  • Использование уязвимостей в плагинах
  • Сканирование через прокси-сервер
  • Сканирование с включенной HTTP-аутентификацией

Введение


«WPScan» – blackbox сканер уязвимостей WordPress, написанный на Ruby. Позволяет выявлять уязвимости в:


  • В версии движка.
  • Темах оформления.
  • Плагинах.

WPScan уже предустановлены в ряде ОС для белого хакинга, таких как:


  • Kali Linux
  • SamuraiWTF
  • Pentoo
  • BlackArch

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


Возможности WPScan:


  • Определяет версию установленного на данный момент WordPress.
  • Обнаруживает конфиденциальные файлы, такие как:
    • readme;
    • robots.txt;
    • файлы замены базы данных и т. Д.
  • Обнаруживает включенные функции на текущем установленном сервере WordPress, таких как file_upload.
  • Перечисляет темы оформления и плагины вместе с их версиями. Вдобавко WPScan сообщает о том, устарели они или нет.
  • Находит все доступные имена пользователей.
Читать дальше →

И целого WAF’а мало: как мы проапгрейдили сервис защиты веб-сайтов 

Время на прочтение5 мин
Охват и читатели5.3K
Привет! Меня зовут Кирилл, и в центре киберзащиты DataLine я развиваю сервис защиты веб-приложений (WAF): общаюсь со специалистами по ИБ и ИТ от клиента, выясняю их задачи, отвечаю за корректную работу сервиса. За неполный год настройки WAF я убедился: если у вас есть сайт, его будут атаковать. И не всегда так, как вы думаете.

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


Читать дальше →

T-shape во фронтенде. Опыт Sportmaster Lab

Время на прочтение7 мин
Охват и читатели3.9K
Что должен уметь фронтенд-разработчик в известной компании, которая предлагает своим покупателям широкий спектр товаров: от спортивного инвентаря и специализированной одежды до мячиков-антистресс? Знать стандартные решения и немного DevOps, использовать весь свой наработанный опыт, внимательно вести документацию. Как придумываются велосипеды в IT-подразделении «Спортмастера» во время конференции «Frontend Live 2020» рассказал фронтендер Sportmaster Lab Сергей Чумак.

image

Читать дальше →

Есть ли перспективы у монолитных web-приложений?

Время на прочтение8 мин
Охват и читатели16K

Что лучше для web-приложений - монолит или микросервисы? Многие ответят на этот вопрос, что, мол, все инструменты хороши, если их использовать по назначению. В таком случае у меня, как у человека, в силу своего возраста, довольно консервативного и неохотно воспринимающего непроверенные временем концепции, возникает другой вопрос - а чем хорош монолит? Где его ниша? Стоит ли переключаться на микросервисы или монолит ещё не изжил себя и на мой век хватит?

В фокусе моих интересов не гигантские web-приложения типа Gmail, Facebook, Twitter, а web-приложения, созданные на базе таких платформ, как Wordpress, Drupal, Joomla, Django, Magento и им подобным. Под катом мои субъективные мысли на этот счёт. Ничего нового - всё те же 33 буквы кириллицы и 26 букв латиницы вперемешку.

Читать далее

React — Используйте стандартные пропсы для потока данных

Время на прочтение8 мин
Охват и читатели8.8K


Давайте поговорим про поток данных React приложения состоящего из набора форм.

Предполагается, что читатель знаком с react, react-хуками, функциональными компонентами, мемоизацией хорошо знает javascript и не пугается spread операторов (три точки которые).
Update 1: Извините, но примеры написаны без использования Typescript и встречается Redux.

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

Узнать какие