Логово верстальщика

🎣 Лови баги на этапе вопросов, а не дебага

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

👉 Совет: перед началом работы задавай максимум уточняющих вопросов. Даже если кажется, что всё понятно. Лучше потратить 10 минут на разговор, чем два дня на поиск, где всё пошло не так.

👩‍💻 Первые шаги в JavaScript: создание калькулятора

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

Читать...

👩‍💻 Scroll-Driven Dock

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

Открыть код...

👩‍💻 ООП на простых примерах

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

Читать...

📈 Подборка статей для вашей карьеры

• Почему любая оценка IT-шников обречена на провал?

• Карьерный рост из senior: кто такой staff-инженер?

• «Так и знала, что вы — бывший двоечник!» Самые глупые ошибки моей компьютерной молодости

• Что лучше — оценка рекрутера или подбрасывание монетки?

• Мотивационные стили в обучении: почему вам (возможно) не нужны цели или общение с одногруппниками

💳 8 приложений и сайтов, за которые стоит заплатить: UX/UI edition

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

Читать...

👩‍💻 8 советов, которые сделают JavaScript-код чище

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

Читать...

👩‍💻 Будущее CSS: новейшие возможности языка декорирования

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

Читать...

👩‍💻 Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

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

Читать...

👩‍💻 Firefly Button

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

Открыть код...

👩‍💻 Как правильно оптимизировать изображения в HTML

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

Читать...

👩‍💻 JavaScript однострочники, которые сэкономят кучу времени

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

Читать...

👩‍💻 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)

👩‍💻 Операторы равенства == и === в JavaScript

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

Читать...

🧬 Исследуй нестабильность как симптом

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

👉 Совет: нестабильность — признак глубокой проблемы. Не игнорируй, не лечи костылём. Разбирайся до конца. Часто за «редкой мелочью» скрывается архитектурный косяк или логическая дыра.

👩‍💻 Как работает JavaScript Proxy

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

Читать...

⚙️ Что такое calc() в CSS и зачем он используется?

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

➡️ Пример:

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

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

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

🖥 Подробнее тут

👩‍💻 Сбросы базовых CSS-стилей для применения в любом приложении

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

Читать...

📈 Подборка статей для вашей карьеры

• Пришёл на вакансию дизайнера, а стал питонистом: как IT-специалисты нашли свою первую работу

• На сколько денег может рассчитывать ИТ-предприниматель в разных ветках развития

• Анализ задачи с собеседования в Google: конь и телефонные кнопки

• Быстрый старт в QA Fullstack: чем вооружиться будущему стажеру в Альфа-Банке

• Как убить самоорганизацию в команде: вредные советы для лидера

👩‍💻 React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android

Виджеты - это инструменты, которые делают домашний экран более привлекательным и предоставляют полезную информацию. Рассказываем, как создавать виджеты для Android и iOS и как внедрить их в приложение на React Native.

Читать...