Ведущий React Native разработчик
• HTML, CSS, TypeScript, React, React Native• от 200 000 до 250 000 ₽ | от 1-3 летReact Native Senior Developer
• Git, GitLab, iOS, React Native, JavaScript, TypeScript, Адаптивная верстка• от 200 000 до 300 000 ₽ | от 5 летSenior FullStack Developer (TS, React.JS, Nest.JS)
• Linux, Docker, Redis, MongoDB, React, NestJS, TypeScript• Уровень дохода не указан | от 4 летFullstack TypeScript Developer
• TypeScript, Node.js, SQL, React, Git, Docker• Уровень дохода не указан | опыт не указанPlease open Telegram to view this post
VIEW IN TELEGRAM
Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.
Читать...
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'; script-src 'self' https://apis.example.com;">
<title>Пример CSP</title>
</head>
<body>
<script src="https://apis.example.com/library.js"></script>
<script>
// Этот скрипт выполнится, так как он разрешен
console.log("Скрипт из разрешенного источника работает.");
</script>
<script>
// Этот скрипт нарушит политику CSP, так как он inline
alert("Inline скрипт заблокирован!");
</script>
</body>
</html>
🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Техлид фронтенд-разработки (React и Vue)
• TypeScript, JavaScript, React, Next.js, Vue.js, Nuxt.js• от 200 000 до 250 000 ₽ | опыт не указанTeam Lead Vue.JS/Golang (команда Promo Games)
• Vue.js, Pixi.JS, Golang, PostgreSQL, Redis• Уровень дохода не указан | от 2 летTeam Lead разработки (Angular)
• Angular 14+, Node.js (Nest.js), MongoDB (ORM mongoose), PostgreSQL (ORM sequelize)• Уровень дохода не указан | от 5 летPlease open Telegram to view this post
VIEW IN TELEGRAM
Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🧩 Держи всё в порядке
Хаос на рабочем столе, папки с проектами называются «Новая папка (2)», а задачи записаны в трёх разных местах? Такой беспорядок убивает продуктивность.
👉 Совет: выбери один инструмент для управления задачами (Trello, Notion или просто блокнот) и держи все свои проекты там. Организуй рабочий стол, придумай систему именования файлов и придерживайся её. Это может показаться мелочью, но мозг лучше работает в упорядоченной среде.
Хаос на рабочем столе, папки с проектами называются «Новая папка (2)», а задачи записаны в трёх разных местах? Такой беспорядок убивает продуктивность.
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend разработчик
Frontend-разработчик
Middle Frontend-разработчик
Front-end developer (middle)
Please open Telegram to view this post
VIEW IN TELEGRAM
Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.
Ожидаемое поведение:
• При нажатии на кнопку она становится недоступной.• На кнопке отображается обратный отсчёт времени: 5... 4... 3....• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.Решение задачи
<button id="timer-button">Нажми меня</button> #timer -button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}#timer -button:disabled {
background-color:#ccc ;
cursor: not-allowed;
}
const button = document.getElementById('timer-button');
button.addEventListener('click', () => {
let countdown = 5;
// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;
if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});
Please open Telegram to view this post
VIEW IN TELEGRAM
• Вышел TypeScript 5.7
• Обзор на Model Context Protocol (MCP) от Anthropic
• Рецепты TypeScript: типизированное преобразование объекта
• Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 2
• JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM
Please open Telegram to view this post
VIEW IN TELEGRAM
Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Напишите функцию, которая принимает строку, содержащую различные типы скобок (
(), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.Пример: Для строки
"{[()]}" функция должна вернуть true, а для строки "{[(])}" — false.Решение задачи
function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };
for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}
// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend developer (junior/middle)
Frontend Developer Vue.js / Senior
Vue 3 frontend разработчик | Junior | Middle
Junior PHP разработчик (WordPress)
Please open Telegram to view this post
VIEW IN TELEGRAM
Анимированная кнопка с эффектом при наведении. Сделана на чистом CSS.
Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
aspect-ratio в CSS и как оно используется?aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки.<div class="box"></div>
<style>
.box {
width: 300px;
aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
background: lightblue;
}
</style>
🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend Developer (Middle+)
• JavaScript (ES6+), React, TypeScript, Redux, Axios, Material UI, Ant Design, Tailwind CSS, i18n, HTML, CSS• Уровень дохода не указан | от 3 летFullstack-разработчик (.Net core, React)
• React, .Net core, Docker, Kubernetes, Redis, EntityFramework, RabbitMQ, WebAPI, S3• Уровень дохода не указан | от 3 летSenior/middle React developer
• React, TypeScript, Next.js, CSS, HTML, JavaScript, LESS, Redux, SSR, Babel, Webpack, Npm, Yarn, NodeJS• Уровень дохода не указан | от 3 летPHP developer
• PHP 7, Yii2, MySQL, MongoDB, PostgreSQL, REST, HTTP, Agile, фронтенд и бэкенд разработка• Уровень дохода не указан | от 3 летPlease open Telegram to view this post
VIEW IN TELEGRAM
Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки.
Ожидаемое поведение:
• По умолчанию значение счётчика равно 0.• Кнопка "Увеличить" увеличивает значение счётчика на 1.• Кнопка "Уменьшить" уменьшает значение счётчика на 1.• Значение счётчика никогда не становится отрицательным.Решение задачи
<div>
<button id="decreaseButton">Уменьшить</button>
<span id="counter">0</span>
<button id="increaseButton">Увеличить</button>
</div>
const counter = document.getElementById('counter');
const decreaseButton = document.getElementById('decreaseButton');
const increaseButton = document.getElementById('increaseButton');
let count = 0;
decreaseButton.addEventListener('click', () => {
if (count > 0) {
count -= 1;
counter.textContent = count;
}
});
increaseButton.addEventListener('click', () => {
count += 1;
counter.textContent = count;
});
Please open Telegram to view this post
VIEW IN TELEGRAM
Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
