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

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки. Читать...

📝 Подборка вакансий для мидлов Middle frontend developer (React) • JavaScript, React, HTML, CSS, Redux, TypeScript, Webpack • Уровень дохода не указан | Требуемый опыт не указан Middle frontend developer (Vue) • JavaScript, Vue.js, HTML, CSS • Уровень дохода не указан | Требуемый опыт не указан Frontend разработчик (React) • React, TypeScript, JavaScript, Redux, Next.js, MobX • Уровень дохода не указан | Требуемый опыт не указан

👩‍💻 Что такое замыкания (closures) в JavaScript? Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

function makeCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.

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

👩‍💻 Idea Form Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript. Открыть код...

🔎 Подборка вакансий для джунов PHP-разработчик junior/junior+ 🟢PHP 7.4+, SQL, Laravel, PostgreSQL, REST, JSON, XML 🟢от 80 000 ₽ на руки | Без опыта Frontend-разработчик 🟢React, Node.js, Webpack, Docker, Gitlab, Jest 🟢от 140 000 ₽ на руки | 1–3 года опыта Fullstack junior PHP разработчик (Symfony, Laravel; React) 🟢PHP, MySQL, Laravel, Fullstack, React.js, Symfony, Vue, React, RabbitMQ, MongoDB, Node.js, Vue.js 🟢до 130 000 ₽ на руки | 3–6 лет опыта

Как разрабу или продакту в IT запустить свой проект? Работать в корпорации - страшно, жизнь мимо проходит. Строить бизнес - страшно, а вдруг прогорит Один из вариантов - пилить свой проект по вечерам. Ведь многие успешные компании, типа Твиттер, начинались как Пет проекты Мы не говорим, что пет проект обязательно заработает миллиарды. Но заработать денег больше, чем в найме, вполне реально, а уж опыта получить точно больше можно Но есть куча проблем: - Как выбрать идею для проекта? - Что нужно знать про маркетинг? - Как запуститься и довести до первых продаж не имея бюджета? Михаил Табунов сделал про все это телеграм канал, в котором пишет для разработчиков и менеджеров про свой опыт - где брать идею, что надо знать про маркетинг, как запускать и искать первых клиентов, и многое другое Подписаться #реклама О рекламодателе

👩‍💻 Кнопка с "волновым" эффектом Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика. Ожидаемое поведение: • При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение. • Анимация должна быть плавной и не мешать повторным кликам. Решение задачи🔽

<button class="ripple-button">Нажми меня</button> .ripple-button { position: relative; overflow: hidden; padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 4px; cursor: pointer; } .ripple-button .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; background-color: rgba(255, 255, 255, 0.6); } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } document.querySelector('.ripple-button').addEventListener('click', function (event) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`; ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`; ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`; ripple.className = 'ripple'; this.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций. Читать...

Курс «Разработчик 1С» от Яндекса. За 6 месяцев освоите один из самых простых языков программирования и пройдёте стажировку Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

🔝 Самые интересные статьи за последние дни: • DRY-фреймворк: продолжение • Как нарисовать квадрат 3 × 3 см на веб-странице* • Скучный Интернет и как «бесполезные сайты» могут спасти от этого • Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем • Как мотивировать себя на правильные вещи

👩‍💻 Динамический поиск в списке Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Ожидаемое поведение: • При вводе текста список фильтруется по введённым данным. • Поиск нечувствителен к регистру. • Если текстовое поле пустое, отображается весь список. Решение задачи🔽

<input type="text" id="searchInput" placeholder="Введите текст для поиска"> <ul id="itemList"> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li> <li>Peach</li> </ul> const searchInput = document.getElementById('searchInput'); const itemList = document.getElementById('itemList'); const items = itemList.getElementsByTagName('li'); searchInput.addEventListener('input', () => { const filter = searchInput.value.toLowerCase(); Array.from(items).forEach((item) => { const text = item.textContent.toLowerCase(); item.style.display = text.includes(filter) ? '' : 'none'; }); });

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. Читать...

VisGPT — твой личный суперпомощник! 👌😊 20+ нейросетей для любых задач: Написание текстов Создание картинок Анализ данных Помощь с кодом Генерация идей 👍 Преимущества VisGPT Всё в одном приложении Без VPN и сложных настроек Удобная оплата в рублях Доступные тарифы Поддержка 24/7 💰 Специальное предложение: Годовая подписка со скидкой 20% Начни использовать прямо сейчас: Начать #реклама 16+ ai.vis.center О рекламодателе

🔎 Подборка зарубежных вакансий Tech Lead (PHP) 🟢PHP, Symfony, Laravel, микросервисная архитектура, Golang, Python 🟢Уровень дохода не указан | более 6 лет опыта Team Lead Frontend (Vue.js / Nuxt.js) 🟢Vue.js, Nuxt.js, JavaScript, PWA, Vuetify, CSS3, HTML5, SASS, SCSS, Bootstrap, RESTful API, WebSocket, TypeScript, Webpack 🟢Уровень дохода не указан | более 6 лет опыта Junior Frontend Developer 🟢Angular 14+, TypeScript, SCSS, HTML, REST APIs, Web Components, Yarn, Webpack 🟢Уровень дохода не указан | 1–3 года опыта

🕵️ Знай систему на уровне зависимостей Работаешь с проектом, где используется миллион библиотек и фреймворков? Когда что-то ломается, найти виноватого становится задачей. 👉 Совет: выдели время, чтобы разобраться в основных зависимостях проекта. Проверь, какие библиотеки действительно нужны, а какие можно заменить или убрать. Понимание связей между компонентами сделает тебя настоящим мастером проекта.

✔️ Современные способы переключения контента В статье обсуждаются современные подходы к переключению контента в вебе. Рассматриваются нативные API, их преимущества, недостатки и неожиданные особенности, включая работу с псевдоэлементами. Читать...

Профильная Flutter-конференция 21 февраля в Москве пройдёт конференция для Flutter-разработчиков. Приглашаем участников и спикеров. 1 день и 2 потока докладов от экспертов индустрии. Кейсы от ведущих агентств. Круглый стол. Активный нетворкинг. Афтепати в завершении дня. Программа и билеты на сайте. Узнать больше #реклама flutterconf.ru О рекламодателе

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода. Читать...

👩‍💻 Что такое Grid Layout в CSS и как он работает? CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов. ➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

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

👩‍💻 Всё ли ты знаешь о работе с асинхронностью? Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину. Читать...