Логово верстальщика – Telegram
Логово верстальщика
8.05K subscribers
996 photos
48 videos
4 files
1.7K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
👩‍💻 Сбросы базовых CSS-стилей для применения в любом приложении

Устали переписывать снова и снова базовые CSS-стили? Предлагаем код со сбросами, который можно вставить в корневой CSS-набор любого проекта.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Что такое calc() в CSS и зачем он используется?

calc() — это функция в CSS, которая позволяет выполнять математические операции прямо внутри значений свойств. Она особенно полезна при адаптивной вёрстке, где нужно совмещать относительные и абсолютные единицы.

➡️ Пример:

.container {
width: calc(100% - 40px); /* Отнимаем фиксированное значение от полной ширины */
padding: 20px;
}


🗣️ В этом примере .container будет растягиваться на всю ширину родителя, но с учётом внутренних отступов. calc() позволяет легко комбинировать %, px, rem и другие единицы без необходимости дополнительных обёрток или JavaScript.


Можно использовать в width, height, margin, padding, font-size и других свойствах.

🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как работает JavaScript Proxy

Раскройте для себя возможности JavaScript Proxy, углубившись в настройку операций с объектами и контроль над ними. Используя JavaScript Proxy, вы будете создавать надежные и безопасные приложения.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🧬 Исследуй нестабильность как симптом

Что-то «иногда не работает», «по пятницам падает» или «вроде чинится само»? Это не баг — это крик системы о помощи.

👉 Совет: нестабильность — признак глубокой проблемы. Не игнорируй, не лечи костылём. Разбирайся до конца. Часто за «редкой мелочью» скрывается архитектурный косяк или логическая дыра.
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Операторы равенства == и === в JavaScript

В JavaScript есть два разных оператора равенства: == и ===. Они оба используются для сравнения значений, но между ними есть различие.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Bit Counting

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

Пример: Двоичное представление 1234 равно 10011010010, поэтому в этом случае функция должна возвращать 5

Решение задачи🔽


function countBits(n) {
return n.toString(2).split('0').join('').length;
}

// Примеры использования:
console.log(countBits(1234)); // Вывод: 5
console.log(countBits(7)); // Вывод: 3 (двоичное представление 7 равно 111)
console.log(countBits(9)); // Вывод: 2 (двоичное представление 9 равно 1001)
console.log(countBits(15)); // Вывод: 4 (двоичное представление 15 равно 1111)
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 JavaScript однострочники, которые сэкономят кучу времени

Эти короткие, но мощные строчки кода поднимут твои навыки JavaScript на новый уровень и ускорят работу в разы.


Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как правильно оптимизировать изображения в HTML

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Firefly Button

Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Овладейте искусством создания бесшовных и визуально привлекательных взаимодействий с перетаскиванием в React-приложениях с помощью библиотеки React Beautiful Dnd.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Будущее CSS: новейшие возможности языка декорирования

CSS - популярный инструмент стилизации и декорирования. В этом году в него вводятся улучшения, которые помогут улучшить опыт разработчика. О них и поговорим.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 8 советов, которые сделают JavaScript-код чище

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
💳 8 приложений и сайтов, за которые стоит заплатить: UX/UI edition

Предлагаем список полезных платных приложений и сайтов для UX/UI дизайнера и подробно рассматриваем их преимущества и особенности.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 ООП на простых примерах

Познакомимся с наследованием, инкапсуляцией, абстракцией и полиморфизмом. А также научимся создавать объекты и использовать синтаксический сахар class.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Scroll-Driven Dock

Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Первые шаги в JavaScript: создание калькулятора

Начинаете осваивать JavaScript? Создание простого калькулятора позволит вам оценить его возможности. Вы получите базовое представление о синтаксисе JavaScript и о том, как использовать его для создания интерактивных веб-приложений.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
1
🎣 Лови баги на этапе вопросов, а не дебага

Часто баги появляются из-за того, что изначально не до конца поняли задачу.

👉 Совет: перед началом работы задавай максимум уточняющих вопросов. Даже если кажется, что всё понятно. Лучше потратить 10 минут на разговор, чем два дня на поиск, где всё пошло не так.
Please open Telegram to view this post
VIEW IN TELEGRAM
➡️ Чистая архитектура фронтенда

Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM