💭 Скорость — не главный показатель успеха. Гораздо важнее — чёткое понимание, куда ты идёшь.

Многие тратят кучу энергии, чтобы везде поспеть: освоить новое, прокачать скиллы, закрыть дедлайны. Но часто за спешкой скрывается отсутствие направления. И пока ты гонишься за всем сразу, фокус на том, что действительно важно, ускользает.

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

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

Frontend React Developer
🟢React, TypeScript, Web3 (viem, tonweb, connectkit, wagmi), tanstack, Tailwind, Vite
🟢до 1 800 $ | 3–6 лет

Senior Fullstack Software Engineer (.NET React)
🟢.NET, C#, Entity Framework, React
🟢от 24 000 000 до 38 000 000 so'm | 3–6 лет

Senior Frontend developer
🟢TypeScript, React, Next.js, JavaScript, CSS, TailwindCSS, Material UI, Headless CMS (Storyblok, Contentful, Strapi)
🟢до 3 000 $ | 3–6 лет

Backend Разработчик (JavaScript)
🟢JavaScript, Node.js, TypeScript, PostgreSQL, web3, blockchain
🟢от 4 000 $ | более 6 лет

Senior Front-End (React) разработчик
🟢React.js, Redux, CSS, REST
🟢от 4 000 до 5 000 $ | более 6 лет

👩‍💻 Создание CLI-приложения с Laravel и Docker

Хотя Laravel традиционно используется для создания веб-приложений, некоторые приложения нуждаются в надёжных командах CLI, запускаемых через Docker в продакшн-среде. Узнайте, как настроить образ Docker для запуска Artisan CLI, благодаря чему вы получите основу для распределения CLI-приложений на PHP.

Читать...

👩‍💻 Стилизация кнопки с эффектом наведения

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

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

• Основной цвет фона кнопки — синий (#007BFF).
• При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается.

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

<button class="styled-button">Нажми меня</button>

.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

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

• Отладка и мониторинг в MobX: trace, introspection и spy

• Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

• PHP и Laravel дайджест новостей за октябрь 2024 года

• Битва титанов: натив, кроссплатформа и PWA – ищем плюсы и минусы на каждом этапе разработки

• Внедрение методики решения проблем 8D на производственном предприятии в виде SRM/ERP-систем/Часть 1

👩‍💻 Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

Читать...

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

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

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

• Изображение находится в верхней части карточки.
• Под изображением — заголовок и краткое описание.
• Карточка при наведении увеличивается и добавляет лёгкую тень.

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

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


.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-img {
width: 100%;
height: auto;
}

.card-title {
margin: 16px;
font-size: 1.2em;
}

.card-description {
margin: 0 16px 16px;
font-size: 0.9em;
color: #555;
}

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

Frontend-разработчик (junior/junior+)
🟢React, Mobx, SCSS, Tailwind, TypeScript, GIT (git flow)
🟢от 40 000 до 60 000 ₽ | Без опыта

Junior Frontend Developer
🟢HTML5, CSS3, JavaScript (ES6/ES7), React/Angular/Vue.js, jQuery, Bootstrap/Foundation/Bulma/Tailwind, Webpack/Parcel/Rollup, SASS/LESS/PostCSS/Stylus
🟢Уровень дохода не указан | Без опыта

Junior Frontend разработчик
🟢HTML, CSS, JavaScript, React, TypeScript, Redux toolkit
🟢от 40 000 до 70 000 ₽ | 1–3 года

Junior Frontend-разработчик
🟢React, Next.js, Tailwind CSS, React Query
🟢от 35 000 ₽ | 1–3 года

Junior Frontend (React) developer
🟢React, JavaScript, TypeScript, HTML, CSS, .NET (C#), Git
🟢Уровень дохода не указан | Без опыта

👩‍💻 Dropdown Menu Effects

Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.

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

👩‍💻 В чем разница между em и rem в CSS?

В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования.

➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

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

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

Frontend-разработчик (junior+ / middle)
🟢JavaScript, Nuxt 2/3, TypeScript, ES20+, Git (GitLab), Docker
🟢до 150 000 ₽ | 1–3 года

Middle frontend JS / React developer
🟢React, JavaScript, TypeScript, HTML5, CSS3, Git, React Native, Angular, Vue.js, Docker
🟢от 120 000 ₽ | 1–3 года

Frontend-разработчик (Middle)
🟢React 18, TypeScript, Axios, Material UI, Redux, Redux Toolkit, HTML, CSS, Git
🟢от 105 000 ₽ | 1–3 года

Frontend-разработчик Middle
🟢JavaScript, HTML5, React.js, TypeScript, Next.js, SCSS, LESS, ant-design, storybook, material-ui, react-bootstrap, Selenium, Cypress, Puppeteer, Git
🟢от 140 000 до 170 000 ₽ | 1–3 года

Frontend-разработчик (React, Next)
🟢JavaScript, React, Next.js, Ant Design, Next UI, Zustand, HTML, CSS
🟢от 200 000 до 350 000 ₽ | 3–6 лет

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание

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

Читать...

👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px.

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

• Круглый элемент с текстом по центру.
• Размер круга меняется в зависимости от ширины экрана.

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

<div class="circle">Текст</div>

.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #4CAF50;
color: white;
border-radius: 50%;
text-align: center;
font-size: 1.2em;
}

/* Размер для больших экранов */
@media (min-width: 1024px) {
.circle {
width: 200px;
height: 200px;
}
}

/* Размер для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
.circle {
width: 150px;
height: 150px;
}
}

/* Размер для мобильных устройств */
@media (max-width: 767px) {
.circle {
width: 100px;
height: 100px;
}
}

👩‍💻 Шорткаты 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, мы избавляемся от лишней работы по позиционированию.

Читать...