Логово верстальщика – 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
👩‍💻 6 современных возможностей JavaScript, о которых не знает большинство разработчиков

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
1👎1
👩‍💻 Стек вызовов JavaScript: объяснение с помощью иллюстраций

Как выполняются функции в Javanoscript? Каков порядок их выполнения? Что такое контекст выполнения? Отвечаем на эти вопросы с иллюстрациями.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
13 библиотек для создания крутых анимаций на CSS

CSS-анимации проще в использовании и работают быстрее, чем на JavaScript. В этом материале собрали 13 полезных библиотек, которые помогут вам без заморочек создавать крутые анимационные эффекты.


Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
🪄 25 CSS-трюков, которые должен знать каждый разработчик

Современный веб-дизайн требует глубокого понимания возможностей CSS. Мы расскажем о 25 передовых CSS-техниках, которые помогут вам создавать стильные, функциональные и производительные веб-сайты, соответствующие последним трендам.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
📈 Делай заметки во время дебага, а не после

Расследуешь баг, находишь кучу деталей — а через час всё смешивается в голове и приходится начинать заново.

👉 Совет: веди короткие заметки прямо в процессе отладки: какие гипотезы проверил, какой был результат. Даже пара строчек после каждого шага помогут быстро собрать полную картину и не упустить важное.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
В CSS появилось удобное центрирование объектов одной строкой кода через align-content

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

Читать...
👍3
👩‍💻 4 крутых хука React, которые нужны каждому девелоперу

Добавь в свою коллекцию 4 полезных пользовательских хука для React. Они помогут сделать код чище, масштабируемее и упростят работу над проектами.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Код гласных

Напишите функцию с именем encode() для замены всех строчных гласных в заданной строке числами в соответствии со следующим шаблоном:

a => 1
e => 2
i => 3
o => 4
u => 5


Пример кода:

encode("hello") => "h2ll4"


Создайте функцию с именем decode(), чтобы преобразовать числа обратно в гласные в соответствии с тем же шаблоном, который показан выше.

decode("h3 th2r2") => "hi there"


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

function encode(str) {
// Создаем объект для соответствия гласных и чисел
const vowelsToNum = { 'a': '1', 'e': '2', 'i': '3', 'o': '4', 'u': '5' };
// Заменяем каждую гласную в строке соответствующим числом
return str.replace(/[aeiou]/g, match => vowelsToNum[match]);
}

function decode(str) {
// Создаем объект для соответствия чисел гласным
const numToVowels = { '1': 'a', '2': 'e', '3': 'i', '4': 'o', '5': 'u' };
// Заменяем каждую цифру в строке соответствующей гласной
return str.replace(/[1-5]/g, match => numToVowels[match]);
}

// Тестирование функций
console.log(encode("hello")); // должно вывести "h2ll4"
console.log(decode("h3 th2r2")); // должно вывести "hi there"
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31👎1
👩‍💻 ТОП-5 вопросов и ответов по JavaScript на Stack Overflow за все время

Ответы на пять вопросов, ставящих в тупик каждого второго фронтендера.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1
👩‍💻 Распространенные алгоритмы и структуры данных в JavaScript: стеки, очереди и связные списки

Рассмотрим другие (массивоподобные) структуры – стеки, очереди и связные списки.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1
👩‍💻 Получение размера окна на чистом CSS

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👀 Как использовать Redis для кэширования и очередей в веб-приложениях

Для ускорения веб-приложений есть множество инструментов и паттернов. Один из них — key-value система Redis. Рассказываем, как ее установить и настроить для повышения производительности и надежности.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Как выбрать IDE, если вы начинающий веб-разработчик

Начинающие веб-разработчики часто сталкиваются с трудностями при выборе интегрированной среды разработки (IDE). Рассказываем, как не прогадать и не усложнить себе жизнь.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👩‍💻 7 методов оптимизации производительности React

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🖥 ТОП-5 популярных технологий для создания сайтов: просто и понятно для новичков

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🧩 Учись работать с незнакомым кодом, как с лабиринтом

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

👉 Совет: начни с поиска контрольных точек: основного файла, точки входа, главной функции. Построй ментальную карту проекта: как данные проходят через код, как устроена архитектура. Так ты быстрее поймёшь суть и будешь увереннее править баги.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52
👩‍💻 21 хорошая практика для очень хороших React проектов

Несколько практических советов для улучшения качества кода.

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