📝 Подборка вакансий для сеньоров

Middle+/Senior Frontend developer (СберНПФ)
• Angular, TypeScript, JavaScript, Node.js, PostgreSQL, Apache Kafka, REST
• Уровень дохода не указан | от 3 лет опыта

Frontend-разработчик Angular (middle+/senior)
• Angular, JavaScript, HTTP, REST API, Agile, CI/CD, NGINX, Unit-тестирование
• Уровень дохода не указан | от 3 лет опыта

Fullstack Typescript Developer [Senior]
• TypeScript, Node.js, React, SQL, Kubernetes, Docker
• Уровень дохода не указан | от 4 лет опыта

📈 Подборка статей для вашей карьеры

• В какой момент профессия программиста свернула не туда?

• Офис Intel в Израиле отменил бесплатный кофе

• Войти в IT – в 37 и с дипломом филфака

• Путь к мастерству: Как стать успешным разработчиком

• Галера от HH или джуны по-дешевке

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

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

Читать...

👩‍💻 Что такое 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 упрощает создание адаптивных макетов.

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

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции

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

Читать...

✔️ Современные способы переключения контента

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

Читать...

🕵️ Знай систему на уровне зависимостей

Работаешь с проектом, где используется миллион библиотек и фреймворков? Когда что-то ломается, найти виноватого становится задачей.

👉 Совет: выдели время, чтобы разобраться в основных зависимостях проекта. Проверь, какие библиотеки действительно нужны, а какие можно заменить или убрать. Понимание связей между компонентами сделает тебя настоящим мастером проекта.

🔎 Подборка зарубежных вакансий

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 года опыта

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

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

Читать...

👩‍💻 Динамический поиск в списке

Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст.

Ожидаемое поведение:

• При вводе текста список фильтруется по введённым данным.
• Поиск нечувствителен к регистру.
• Если текстовое поле пустое, отображается весь список.

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

<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';
});
});

🔝 Самые интересные статьи за последние дни:

• DRY-фреймворк: продолжение

• Как нарисовать квадрат 3 × 3 см на веб-странице*

• Скучный Интернет и как «бесполезные сайты» могут спасти от этого

• Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем

• Как мотивировать себя на правильные вещи

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript

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

Читать...

👩‍💻 Кнопка с "волновым" эффектом

Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика.

Ожидаемое поведение:

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

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

<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());
});

🔎 Подборка вакансий для джунов

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 лет опыта

👩‍💻 Idea Form

Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript.

Открыть код...

👩‍💻 Что такое замыкания (closures) в JavaScript?

Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

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

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

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

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

📝 Подборка вакансий для мидлов

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
• Уровень дохода не указан | Требуемый опыт не указан

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

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

Читать...

👩‍💻 Создание адаптивной карточки с изображением и текстом

Создайте карточку, которая содержит изображение сверху и текст ниже. Карточка должна быть адаптивной: на больших экранах занимать 25% ширины контейнера, а на мобильных устройствах — всю ширину.

Ожидаемое поведение:

• Изображение всегда занимает всю ширину карточки.
• Текст расположен под изображением.
• Карточка адаптируется к размеру экрана.

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

<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Image" class="card-image">
<div class="card-text">
<h3>Заголовок</h3>
<p>Описание карточки. Это адаптивная карточка с текстом и изображением.</p>
</div>
</div>

/* Контейнер карточки */
.card {
display: flex;
flex-direction: column;
width: 25%; /* Для больших экранов */
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.card:hover {
transform: scale(1.05);
}

/* Изображение в карточке */
.card-image {
width: 100%;
height: auto;
display: block;
}

/* Текст карточки */
.card-text {
padding: 16px;
text-align: center;
background-color: #f9f9f9;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.card {
width: 100%; /* Занимает всю ширину на маленьких экранах */
}
}

👩‍💻 Переходите на сторону light-dark()

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

Читать...