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

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

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
👩‍💻 Как меня чуть не уволили за выбор React для корпоративного приложения

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
​​Бесплатный мастер-класс ― «Тестировщик с нуля: как им стать и найти первую работу?»

Когда: 11 июля в 19:00 (мск).

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

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего тестировщика!

Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid:LjN8KbDGk
🤔 Числа, но только римские

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

Римские числа:

I — 1
V — 5
X — 10
L — 50
C — 100
D — 500
M — 1000

Пример:

solution('XXI') => 21
solution('I') => 1
solution('IV') => 4
solution('MMVIII') => 2008
solution('MDCLXVI') => 1666


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


function romanToInt(roman) {
const romanNumerals = {
'I': 1,
'V': 5,
'X': 10,
'L': 50,
'C': 100,
'D': 500,
'M': 1000
};

let result = 0;

for (let i = 0; i < roman.length; i++) {
if (romanNumerals[roman[i]] < romanNumerals[roman[i + 1]]) {
result += romanNumerals[roman[i + 1]] - romanNumerals[roman[i]];
i++;
} else {
result += romanNumerals[roman[i]];
}
}

return result;
}
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Гайд по верстке HTML странички. Объяснение принципов, а не примеров

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Крутые расширения VSCode для React-разработчиков

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👀 Энтузиаст запустил сайт с миллионом чекбоксов, которые можно активировать или выключать онлайн.

По первым оценкам на сайте было около 500 000 игроков одновременно, ссылочка на сайт.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как работают короткие ссылки на TinyURL и Bit.ly?

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

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

Анимированный виджет погоды. Сделан на SVG, SCSS и TypeScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Angular и Wiz: вместе лучше

Visual Studio Code популярен благодаря возможности расширения функциональности с помощью плагинов. В этой статье мы рассмотрим 10 полезных расширений, которые упростят работу с кодом и повысят вашу продуктивность.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Адаптивная вёрстка: что это и как использовать

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Product Filtering UI

Интерфейс фильтрации товаров. Сделан на HTML и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Обработка событий в JavaScript: всплытие, перехват, делегирование и распространение событий

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Принципы SOLID в React: так ли все с ними гладко?

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Снова в школу

В этой задаче, необходимо найти коэффициенты квадратного уравнения, если известны два корня (x1 и x2).
Уравнение будет иметь вид: ax^2 + bx + c = 0.
Возвращаемое значение — это вектор содержащий коэффициенты уравнений в порядке (a, b, c).
Так как решений этой задачи бесконечно много, зафиксируем a = 1.

Пример

quadratic(0,1) => [1, -1, 0]
quadratic(-4,-9) => [1, 13, 36]
quadratic(-5,-4) => [1, 9, 20]
quadratic(5,-4) => [1, -1, -20]


Решить задачу
⬅️

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


function quadratic(x1, x2) {
const a = 1;
const b = -(x1 + x2);
const c = x1 * x2;
return [a, b, c];
}

// Примеры использования
console.log(quadratic(0, 1)); // [1, -1, 0]
console.log(quadratic(-4, -9)); // [1, 13, 36]
console.log(quadratic(-5, -4)); // [1, 9, 20]
console.log(quadratic(5, -4)); // [1, -1, -20]
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как с помощью JavaScript не давать экрану перейти в спящий режим

Некоторые новые возможности JavaScript не могут не радовать, и API Wake lock — одна из них. С его помощью разработчик может указать операционной системе, чтобы она не выключала экран!

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👀 Переходная анимация: практическое пособие

Рассмотрим значимость переходной анимации в дизайне и прототипировании продукта. Подробно изучим принципы для улучшения переходной анимации и как их применять.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Underwater Background #2

Анимированный фон страницы. Сделан на SVG и CSS.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 ТОП способов применять принципы SOLID в React

Давайте разберем, зачем нужны принципы SOLID и как использовать их в ваших React-приложениях.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как сделать крутой фронтенд: 8 лучших JS-библиотек для анимации

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

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