Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.
Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
Senior Frontend Engineer
• TypeScript, Next.js, React.js, Redux, Jest, React Testing Library, D3.js, Chart.js• до 5 000 $ на руки | Более 6 летFrontend React разработчик
• React, Next.js, StoryBook, TypeScript, Jest, REST, WebSocket• от 150 000 до 250 000 ₽ на руки | 3–6 летSenior Frontend Developer VUE.js
• Vue.js, TypeScript, Nuxt.js, Pinia, Telegram API, Google Analytics• от 3 000 до 4 000 $ на руки | Более 6 летPlease open Telegram to view this post
VIEW IN TELEGRAM
• Базовое программирование, или Почему джуны не могут пройти к нам собеседование
• Я стал аналитиком, потому что не смог быть программистом
• Какие именно админы нужны на российском рынке и как получать больше разработчика
• Рецензия на книгу «MySQL. Сборник рецептов. 4-е издание»
• Чек-лист тестировщика в финансовой компании
Please open Telegram to view this post
VIEW IN TELEGRAM
В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или
<meta>.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; noscript-src 'self' https://apis.example.com;">
<noscript>Пример CSP</noscript>
</head>
<body>
<noscript src="https://apis.example.com/library.js"></noscript>
<noscript>
// Этот скрипт выполнится, так как он разрешен
console.log("Скрипт из разрешенного источника работает.");
</noscript>
<noscript>
// Этот скрипт нарушит политику CSP, так как он inline
alert("Inline скрипт заблокирован!");
</noscript>
</body>
</html>
🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
💾 6 главных технологий для хранения данных в браузереВедущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.
Читать...
Часто ждёшь часами, пока коллега ответит на простой вопрос? Это не только теряет время, но и ритм работы.
Please open Telegram to view this post
VIEW IN TELEGRAM
Laravel/VUE разработчик (Middle+)
Node.js Developer
Full Stack Developer
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска.
Читать…
Please open Telegram to view this post
VIEW IN TELEGRAM
Создайте поле ввода и кнопку, которые позволяют добавлять задачи в список. Каждая задача в списке должна иметь кнопку для её удаления.
Ожидаемое поведение:
• Введите текст задачи в поле ввода и нажмите кнопку "Добавить".• Задача появляется в списке ниже с кнопкой "Удалить" рядом с ней.• Нажатие на кнопку "Удалить" удаляет соответствующую задачу из списка.Решение задачи
<div>
<input type="text" id="taskInput" placeholder="Введите задачу">
<button id="addTaskButton">Добавить</button>
</div>
<ul id="taskList"></ul>
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return; // Не добавляем пустую задачу
const li = document.createElement('li');
li.textContent = taskText;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.style.marginLeft = '10px';
deleteButton.addEventListener('click', () => li.remove());
li.appendChild(deleteButton);
taskList.appendChild(li);
taskInput.value = ''; // Очищаем поле ввода
});
Please open Telegram to view this post
VIEW IN TELEGRAM
Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Современный веб-дизайн требует глубокого понимания возможностей CSS. Мы расскажем о 25 передовых CSS-техниках, которые помогут вам создавать стильные, функциональные и производительные веб-сайты, соответствующие последним трендам.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Напишите метод, который принимает массив последовательных букв в качестве входных данных и возвращает недостающую букву в массиве.
Вы всегда получите действительный массив. И в нем всегда будет отсутствовать ровно одна буква. Длина массива всегда будет составлять не менее 2.
Пример кода:
['a','b','c','d','f'] -> 'e'
['O','Q','R','S'] -> 'P'
Решение задачи🔽
function findMissingLetter(array) {
for (let i = 0; i < array.length - 1; i++) {
// Если разница в кодах символов между текущей и следующей буквой больше 1
if (array[i].charCodeAt(0) + 1 !== array[i + 1].charCodeAt(0)) {
// Возвращаем пропущенную букву
return String.fromCharCode(array[i].charCodeAt(0) + 1);
}
}
throw new Error("No missing letter found");
}
// Примеры использования:
console.log(findMissingLetter(['a','b','c','d','f'])); // 'e'
console.log(findMissingLetter(['O','Q','R','S'])); // 'P'
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend developer (React/crypto)
Frontend-разработчик
React Frontend-разработчик (на верстку креативных сайтов)
Please open Telegram to view this post
VIEW IN TELEGRAM
Debounce — это техника оптимизации, которая позволяет контролировать, как часто функция будет вызываться при повторяющихся событиях. Это полезно для обработки событий, таких как ввод текста или изменение размера окна, чтобы уменьшить нагрузку на производительность.
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
// Использование debounce
const handleResize = debounce(() => {
console.log('Окно изменилось!');
}, 300);
window.addEventListener('resize', handleResize);🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.
Please open Telegram to view this post
VIEW IN TELEGRAM
React разработчик
• TypeScript, WebSockets, React, Effector, Express• от 150 000 до 250 000 ₽ | 3 года опытаReact Native разработчик
• React Native, React, Redux, Flutter, PHP, Laravel, Next.js, C#, TypeScript, JavaScript• от 140 000 до 160 000 ₽ | 3 года опытаMiddle Fullstack Developer
• React, Vue.js, Webpack, TypeScript, Node.js, MongoDB• от 3 800 до 5 500 $ | 5 лет опытаPlease open Telegram to view this post
VIEW IN TELEGRAM
Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений.
Пример:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
Решение задачи
function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}
// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
Please open Telegram to view this post
VIEW IN TELEGRAM
Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM