dr.Brain
2.73K subscribers
1 photo
1 file
557 links
Мир глазами разработчика: обзоры, трюки, решения задач, примеры кода - рутина и не только... Front & Back

О нас: https://drbrain.pro/about/
Купить рекламу: https://telega.in/c/drbrain4dev

По всем вопросам: @gvastahov, @Pavel_A_G
Download Telegram
Исчезающая линия

Читать

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

#frontend #css
Управление версиями npm

Читать

Семантическое управление версиями - очень важная тема, которую должен отлично понимать каждый разработчик, независимо от того, чем он занимается: Node, React или Angular. Кроме того, понимание порядка версионирования npm-пакетов, является частым предметом обсуждения при проведении собеседований.

#dev #npm
Управляем активностью кнопки на чистом CSS

Читать

В этой небольшой статье мы рассмотрим, как заблокировать кнопку отправки данных формы только в том случае, когда не заполнено одно поле ввода. Тем не менее, этот прием будет работать и для нескольких полей ввода, но при этом нужно соблюдать одно важное условие - все поля ввода должны быть прямыми потомками элемента <form>. Использование различных блоков оберток для полей ввода приведете к неизбежному краху.

#frontend #css
Осторожно. CSS grid

Читать

Найти веб-ресурс, причиной медлительности которого является CSS достаточно непросто. Тем не менее, это возможно. Данный пример касается использования вложенных элементов CSS grid.
Оказывается, количество вложенных блоков, для которых применяется сочетание CSS-свойств display: grid и height: 100%, экспоненциально влияет на время загрузки сайта.

#frontend #css
Нелогичный JavaScript

Читать

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

#frontend #js
Увеличиваем время выполнения скрипта

Читать

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

#backend #php
Обновляем и удаляем свойство объекта

Читать

В этом маленьком обзоре мы разберем, как изменить значение свойства объекта и как корректно удалить свойство объекта в JavaScript.

#frontend #js
Как развернуть строку?

Читать

Для того, чтобы развернуть строку на JavaScript, существует несколько способов. Четыре из них мы разберем в этой статье.

#frontend #js
JavaScript: является ли элемент скрытым?

Читать

Иногда необходимо определить, является ли HTML-элемент скрытым.

#frontend #js
Основные команды linux

Читать

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

#dev #bash
JavaScript: динамические поля для формы

Читать

Иногда особенности интерфейса приложения требуют, чтобы у пользователя была возможность добавить в веб-форму неограниченное количество полей ввода. Для этого мы можем добавить кнопку "Add field", которая позволит при необходимости динамически создавать новые поля.

#frontend #js
CSS каламбуры

Читать

Каскадные таблицы стилей (CSS) определяют визуальное представление элементов HTML-документа, в том числе цвет, отступы, фон, шрифт и другие свойства. В этой статье представлены свойства селекторов, которые заставят улыбаться, даже если Вы не понимаете для чего эти стили нужны.

#frontend #css
Для чего нужен Symbol()?

Читать

В этой небольшой статье мы разберем, чем может быть полезен Symbol() в JavaScript. Данные примитивного типа symbol анонимны, уникальны и неизменяемы.

#frontend #js
Ресурсы для изучения PHP

Читать

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

#backend #php
Время статики

Читать

Если Вы отвечаете за сайт, предоставляющий важную информацию или сервисы, оказывающие значительное влияние даже на малые группы пользователей, пришло время стать статичным. Я полагаю, что данная информация будет иметь значение для сервисов, связанных с оказанием медицинской помощи, проведением профилактических мероприятий и информированием населения (особенно в государственном секторе), сайтов амбулаторных и стационарных учреждений здравоохранения, сервисов сферы коммунальных услуг и организации питания. Возможно, существуют и другие направления, не охваченные мной в приведенном выше списке. Так вот, насколько это возможно, упрощайте рендеринг этих ресурсов, переводите их на статический HTML и CSS (возможно, с использованием незначительного количества JavaScript), избавляйтесь от каждого лишнего байта.

#dev
Кое-что о CSS: border-radius

Читать

Поговорим о CSS-свойстве border-radius. Вкратце, с помощью этого свойства скругляют углы HTML-элемента, но увидеть результат такого скругления можно только в том случае, когда цвет самого блока или цвет его границ отличается от цвета фона родительского элемента.

#frontend #css
Центрируем элемент с Flexbox

Читать

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

#frontend #css #flexbox
CSS :empty

Читать

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

#frontend #css
Клонируем папку

Читать

Иногда в найденном на github репозитарии нам нужна только одна папка. Как получить ее содержимое, не копируя весь проект? К счастью в git есть команда sparse-checkout. А теперь посмотрим, как это работает, на примере приведенном ниже.

#dev #git
Управление отладкой в браузере

Читать

Без лишних слов, всего одна строка кода в консоли отладки браузера:

setTimeout(() => { debugger; }, 3000);


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

#dev #frontend #debug
Bootstrap: отступы

Читать

Следует знать, что для управления свойствами margin и padding различных элементов Bootstrap 4 имеет встроенные классы.

#bootstrap #css #html