👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем.

Читать...

👩‍💻 Face Toggle

Интересный дизайн переключателя. Сделаны на SCSS и JavaScript.

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

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

Senior Frontend Developer (React)
🟢TypeScript, React, Sass (CSS-modules), react-query, tRPC, WebSocket, Canvas, Chart.js, Prettier, ESLint, Vite, Yarn, Jest
🟢до 300 000 ₽ | 3–6 лет

Frontend-разработчик Senior
🟢JavaScript (ES5, ES6), Vue.js (2, 3), TypeScript, HTML, CSS (LESS, SCSS, PostCSS), Webpack, Gulp, Docker, Git, CI/CD, PHP, Symfony
🟢Уровень дохода не указан | 3–6 лет

Senior frontend-разработчик
🟢Vue.js, Tailwind.css, Node.js, Swagger, PHP, Laravel
🟢до 280 000 ₽ | 5 лет

Middle/Senior Rust Developer
🟢Rust, Wasm, WebGL, Bevy, Git, CI/CD
🟢Уровень дохода не указан | 3–6 лет

Frontend-разработчик (React)
🟢JavaScript, React, ES6, MobX/Redux, Webpack, Jest, Enzyme, NPM
🟢от 170 000 до 200 000 ₽ | 1–3 года

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

• Пришёл на вакансию дизайнера, а стал питонистом: как IT-специалисты нашли свою первую работу

• На сколько денег может рассчитывать ИТ-предприниматель в разных ветках развития

• Анализ задачи с собеседования в Google: конь и телефонные кнопки

• Быстрый старт в QA Fullstack: чем вооружиться будущему стажеру в Альфа-Банке

• Как убить самоорганизацию в команде: вредные советы для лидера

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

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

Читать...

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

Senior Frontend Developer/Tech Lead
🟢React, Webpack/vite, TypeScript/JavaScript, Redux, PrimeReact, Axios
🟢от 200 000 ₽ на руки | опыт от 3 лет

Lead Frontend (React)
🟢React, Vue (желательно), DevOps практики, PHP (желательно)
🟢Уровень дохода не указан | опыт более 6 лет

Lead Frontend Developer (TypeScript / React)
🟢TypeScript, React, Next.js, HTML, CSS, SCSS, MobX, WebSockets, Docker, Linux
🟢Уровень дохода не указан | опыт от 4 лет

Senior/Lead Frontend-разработчик
🟢TypeScript, Kotlin, React, Next.js, TailwindCSS, React Query, Redux Toolkit, eCharts, React Flow
🟢Уровень дохода не указан | опыт более 6 лет

Fullstack разработчик/Team lead
🟢React, Redux, Material UI, JavaScript, HTML5, CSS3, SCSS, GitLab, Figma, TypeScript, Node.js
🟢Уровень дохода не указан | опыт от 5 лет

👩‍💻 CSS Веерное раскрытие с grid и @property

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

Читать...

😱 Страх ошибки — худший тормоз для роста.

Сколько раз ты избегал нового только потому, что боялся облажаться? Ошибка кажется концом света, но на деле это просто этап обучения. Сидя в зоне уверенности, ты никогда не узнаешь, насколько можешь быть сильнее, умнее, опытнее.

🎯 Что делать: начни с маленьких рисков. Возьми задачу, в которой пока не уверен, или предложи идею на митинге, даже если есть сомнения. Фейлы — это не клеймо, а возможность показать, как ты умеешь справляться и двигаться дальше. Чем раньше примешь это, тем быстрее начнёшь расти.

🔎 Подборка валютных вакансий

Frontend разработчик (Angular, jQuery)
🟢JavaScript (jQuery), TypeScript, Angular 9+, HTML5 Canvas, HTML, CSS
🟢до 700 000 ₸ | 3–6 лет опыта

Full Stack React разработчик
🟢TypeScript (React, Node.js, Next.js), Python, HTML, CSS, SQL, NoSQL, PostgreSQL
🟢до 2 000 $ | 1–3 года опыта

Lead frontend developer (Angular)
🟢TypeScript, Angular 18, RxJs, Highcharts, Jest, Playwright, SaaS
🟢до 5 000 $ | 3–6 лет опыта

QA/TA engineer (JavaScript)
🟢JavaScript, Playwright, Cypress, QA
🟢до 1 500 $ | 1–3 года опыта

Website Developer/UX UI Designer (WordPress)
🟢WordPress, Elementor, SEO, HTML, CSS, JavaScript, PHP, Adobe XD, Figma, Sketch
🟢от 2 000 до 3 000 $ | 5+ лет опыта

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

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

Читать...

👩‍💻 Адаптивный блок с равными колонками

Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 1024px) колонки должны располагаться в один ряд, на планшетах (от 768px до 1023px) — в два ряда по две и одну, а на мобильных устройствах (до 767px) — каждая колонка должна занимать всю ширину.

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

• На больших экранах: три колонки в один ряд.
• На планшетах: две колонки в первом ряду, одна во втором.
• На мобильных: каждая колонка занимает всю ширину.

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

<div class="container">
<div class="column">Колонка 1</div>
<div class="column">Колонка 2</div>
<div class="column">Колонка 3</div>
</div>

.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* Отступы между колонками */
margin: 0 auto;
max-width: 1200px;
}

.column {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
flex: 1 1 calc(33.333% - 16px); /* Для больших экранов */
box-sizing: border-box;
}

/* Планшеты: две колонки в первом ряду */
@media (max-width: 1023px) {
.column {
flex: 1 1 calc(50% - 16px);
}
}

/* Мобильные устройства: одна колонка в строке */
@media (max-width: 767px) {
.column {
flex: 1 1 100%;
}
}

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

• Знакомьтесь: input, output и model. Новые функции в Angular

• Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам

• Новый этап эволюции Vue — Vapor

• Как сделать один плагин сразу для всех сборщиков фронтенда?

• Личный опыт: добавление микроразметки на сайт

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код.

Читать...

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

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

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

• Изображение занимает верхнюю часть карточки.
• Текст закреплён внизу карточки, даже если изображение маленькое.

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

<div class="card">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img">
<div class="card-text">Текст внизу карточки</div>
</div>

.card {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-img {
width: 100%;
height: auto;
max-height: 70%; /* Ограничиваем высоту изображения */
}

.card-text {
padding: 10px;
background-color: #f9f9f9;
text-align: center;
}

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

Junior Frontend разработчик (Vue)
🟢HTML5, CSS3 (SCSS), JavaScript, TypeScript, Vue 2/3, Webpack/Vite, Vuex/Pinia, Stylelint/Eslint, GitLab
🟢Уровень дохода не указан | Опыт 1–3 года

Junior frontend-разработчик (Saas, IT, Integration team)
🟢JavaScript (ES6+), DOM-API, HTML, CSS, SCSS, Vue2/Vue3 Options API, API (GET и POST методы), Git, консоль, Vue Devtools
🟢до 60 000 ₽ | Без опыта

Junior Front-end Developer
🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов
🟢до 100 000 ₽ | Опыт 1–3 года

Junior Frontend Developer
🟢JavaScript, TypeScript, React, Redux-Saga, Next.js, HTML, CSS
🟢от 35 000 до 120 000 ₽ | Без опыта

Junior Front-end Developer
🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов
🟢до 100 000 ₽ | Опыт 1–3 года

👩‍💻 Gooey SVG Filter Button

Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и 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 упрощает создание адаптивных макетов.

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

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

Верстальщик HTML
🟢HTML, CSS3, SCSS, JavaScript, jQuery, Bootstrap, Git
🟢Уровень дохода не указан | 1–3 года

Сreative Middle HTML-верстальщик (Frontend-разработчик)
🟢HTML, PUG, JavaScript, CSS, SCSS, БЭМ, кроссбраузерная вёрстка, GSAP, AnimateJs, Git
🟢Уровень дохода не указан | 3–6 лет

Frontend разработчик middle
🟢HTML, CSS, SCSS, PostCSS, JavaScript, Git, Pug, Fancybox, Swiper, Yandex Map
🟢от 140 000 до 180 000 ₽ | 3–6 лет

Middle Веб Дизайнер на Tilda
🟢Figma, Tilda, Web-дизайн, Дизайн, Веб-дизайн
🟢от 70 000 до 90 000 ₽ | 1–3 года

Дизайнер-верстальщик
🟢Adobe Illustrator, Adobe XD, Adobe InDesign, Полиграфический дизайн, Графический дизайн, Верстка, Дизайн-мышление, Верстка презентаций, Дизайн наружной рекламы
🟢от 55 000 до 65 000 ₽ | 1–3 года

👩‍💻 Фиксированная кнопка внизу экрана

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

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

• Кнопка всегда остаётся в правом нижнем углу экрана.
• При наведении на кнопку её цвет меняется на более тёмный оттенок.
• Кнопка не перекрывает содержимое страницы и выглядит гармонично.

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

<div class="content">
<p>Основное содержимое страницы...</p>
</div>
<button class="floating-button">Нажми меня</button>

/* Стили основного содержимого */
.content {
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* Фиксированная кнопка */
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 50px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

/* Эффект наведения */
.floating-button:hover {
background-color: #0056b3;
transform: scale(1.1);
}

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

• Почему я не готовлюсь к алгоритмическому интервью

• 7 популярных библиотек Vue 3 UI-компонентов, которые заслуживают внимания

• Жаркий спор по теме Masonry в CSS

• Разница между ранним и поздним связыванием

• Расширения VSCode для комфортной работы с проектами