Обновить
0
@Lifehack043read⁠-⁠only

Пользователь

Отправить сообщение

Задавать Height и Width для изображений снова важно

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

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим в статье, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу <img> полезным.

Читать далее

Как сделать nginx безопасным

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


TL;DR: абсолютно устойчивых систем не существует, поэтому ответ — никак. Но можно значительно упростить себе жизнь с помощью Docker-контейнера bunkerized-nginx. О том, чем он отличается от стандартного образа nginx и что интересного умеет, поговорим под катом.
Читать дальше →

Что такое XML

Время на прочтение13 мин
Охват и читатели581K
Если вы тестируете API, то должны знать про два основных формата передачи данных:

  • XML — используется в SOAP (всегда) и REST-запросах (реже);
  • JSON — используется в REST-запросах.

Сегодня я расскажу вам про XML.

XML, в переводе с англ eXtensible Markup Language — расширяемый язык разметки. Используется для хранения и передачи данных. Так что увидеть его можно не только в API, но и в коде.

Этот формат рекомендован Консорциумом Всемирной паутины (W3C), поэтому он часто используется для передачи данных по API. В SOAP API это вообще единственно возможный формат входных и выходных данных!

См также:
Что такое API — общее знакомство с API
Что такое JSON — второй популярный формат
Введение в SOAP и REST: что это и с чем едят — видео про разницу между SOAP и REST.

Так что давайте разберемся, как он выглядит, как его читать, и как ломать! Да-да, а куда же без этого? Надо ведь выяснить, как отреагирует система на кривой формат присланных данных.


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

Защита Linux-сервера. Что сделать в первую очередь

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

Habib M’henni / Wikimedia Commons, CC BY-SA

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

Настройка Webpack 5 с нуля

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


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

  • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
  • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
  • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?


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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.
Читать дальше →

Использование «глобального» await в JavaScript

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


Новая возможность, которая может изменить наш подход к написанию кода

JavaScript — очень гибкий и мощный язык, который определяет развитие современного веба. Одна из основных причин главенства JavaScript в сфере веб-разработки заключается в его стремительном развитии и постоянном совершенствовании.

Одним из предложений по улучшению JavaScript является предложение под названием «top-level await» (await верхнего уровня, «глобальный» await). Цель данного предложения состоит в превращении ES модулей в некое подобие асинхронных функций. Это позволит модулям получать готовые к использованию ресурсы и блокировать модули, импортирующие их. Модули, которые импортируют ожидаемые ресурсы, смогут запускать выполнение кода только после получения ресурсов и их предварительной подготовки к использованию.

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

Не переживайте из-за этого. Продолжайте читать. Я покажу, как можно использовать названную фичу уже сейчас.
Читать дальше →

Сетевики (не) нужны

Время на прочтение11 мин
Охват и читатели37K
На момент написания этой статьи поиск на популярном работном сайте по словосочетанию «Сетевой инженер» выдавал около трёхсот вакансий по всей России. Для сравнения, поиск по фразе «системный администратор» выдаёт почти 2.5 тысячи вакансий, а «DevOps инженер» — почти 800.

Значит ли это, что сетевики более не нужны во времена победивших облаков, докера, кубернетеса и вездесущего публичного вайфая?
Давайте разбираться (с)


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

Создание Dashboard в Kibana для мониторинга логов

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


Привет, меня зовут Евгений, я тимлид B2B-направления в Ситимобил. Одной из задач нашей команды является поддержка интеграций по заказу такси от партнеров, и для обеспечения стабильного сервиса мы всегда должны понимать, что происходит в наших микросервисах. И для этого надо постоянно следить за логами.

В Ситимобил для работы с логами мы используем ELK-стек (ElasticSearch, Logstash, Kibana), и объём приходящих туда данных огромен. Найти в этой массе запросов проблемы, которые могут появиться после деплоя нового кода, довольно сложно. И для их наглядного выявления в Kibana есть раздел Dashboard.

На Хабре есть довольно много статей с примерами, как настроить ELK-стек для получения и хранения данных, но о создании Dashboard актуальных материалов нет. Поэтому я хочу показать, как в Kibana создавать визуальное представление данных на основе приходящих логов.

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

Визуализация сложных данных с использованием D3 и React

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

Существует много возможныx вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество – мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.


Какая цель этой статьи? Я хочу рассказать вам про крутой инструмент и о том, как его максимально эффективно использовать в связке с React. Мы последовательно разберем универсальный рецепт для построения компонентов любой сложности.


Восемь интересных возможностей PostgreSQL, о которых вы, возможно, не знали

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

Привет, Хабр! Приглашаем на бесплатный Demo-урок «Параллельный кластер CockroachDB», который пройдёт в рамках курса «PostgreSQL». Также публикуем перевод статьи Тома Брауна — Principal Systems Engineer at EnterpriseDB.

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

Читать далее

10 современных раскладок в одну строку CSS-кода

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

В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.

Читать далее

Почему так сложно извлекать текст из PDF?

Время на прочтение7 мин
Охват и читатели32K
Перевод статьи с сайта компании FilingDB, составляющей базу данных из документации европейских компаний

Согласно распространённым представлениям, извлечение текста из PDF не должно быть такой уж сложной задачей. Ведь вот он, текст, прямо у нас перед глазами, и люди постоянно и с большим успехом воспринимают содержимое PDF. Откуда взяться трудностям в автоматическом извлечении текста?

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

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

Возможности Angular DI, о которых почти ничего не сказано в документации

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

Angular — это достаточно большой фреймворк. Задокументировать и написать примеры использования для каждого кейса просто невозможно. И механизм внедрения зависимостей не исключение. В этой статье я расскажу о возможностях Angular DI, о которых вы почти ничего не найдете в официальной документации.

Читать далее

Переменные CSS — курс молодого бойца

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

Переменные CSS (также известные как настраиваемые свойства) поддерживаются браузерами почти 4 года. Мне нравится применять их в зависимости от проекта или ситуации. Они очень полезны и просты в использовании, но зачастую фронтенд разработчик неправильно использует или неправильно понимает их.

Основная цель статьи: я хочу иметь место, где собрано все, что я знаю о переменных CSS, чтобы узнать и понять больше. Здесь вы прочитаете обо всем, что должны знать о переменных CSS, включая примеры применения в коде. Вы готовы? Тогда погружаемся.
Приятного чтения!

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

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

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

RubyGems Digest 2020·09

Время на прочтение5 мин
Охват и читатели2.1K
Большая подборка информации о библиотеках языка Ruby за сентябрь 2020 года. Новости, включая русскоязычные источники. А также полезные мнения и опыт разработки.


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

Эффектное программирование. Часть 1: итераторы и генераторы

Время на прочтение5 мин
Охват и читатели12K
Javascript на данный момент является самым популярным языком программирования по версиям многих площадок (например Github). Является ли при этом он самым продвинутым или самым любимым языком? В нём отсутствуют конструкции, которые для других языков являются неотъемлемыми частями: обширная стандартная библиотека, иммутабильность, макросы. Но в нём есть одна деталь, которая не получает, на мой взгляд, достаточно внимания — генераторы.

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

while (true) {
    const data = yield getNextChunk(); // вызов асинхронной логики
    const processed = processData(data);
    try {
        yield sendProcessedData(processed);
        showOkResult();
    } catch (err) {
        showError();
    }
}

Это первая, пилотная часть: Итераторы и Генераторы.
Часть 2
Читать дальше →

Лучшая практика обработки ошибок в современном JavaScript

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

Когда вы пишете код, важно учитывать ситуации, приводящие к ошибкам. Обработка ошибок — это неотъемлемая часть работы над веб-приложением. Мы посмотрим на некоторые рекомендации по обработке ошибок в JavaScript. Чтобы не тратить ваше время зря, сразу поясняем, что описанное в статье может быть не в новинку многопытным кодерам. Если вы себя таким считаете — смело пропускайте этот материал, всех остальных приглашаем под кат.
Читать дальше →

Понимание спецификации ECMAScript, часть 2

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

Привет, Хабр! Представляю вашему вниманию перевод статьи под редакцией xfides


Автор оригинала: Marja Hölttä
Перевод первой части.



Давайте еще попрактикуемся в чтении спецификации. Если вы не видели предыдущую статью, самое время сходить ее посмотреть. В первой части мы познакомились с простым методом Object.prototype.hasOwnProperty. Также, посмотрели список абстрактных операций, которые вызываются при выполнении этого метода. Еще мы узнали о специфических сокращениях «?» и «!», которые связаны с обработкой ошибок. И наконец, мы получили информацию о типах языка, типах спецификации, внутренних слотах и внутренних методах.


Готовы для второй части?

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

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

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

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?

Информация

В рейтинге
Не участвует
Работает в
Зарегистрирован
Активность