Как стать мидлом
1.57K subscribers
519 photos
28 videos
284 links
Помогаем фронтенд-разработчикам прокачать навыки и получить повышение → https://htmlacademy.ru/frontend-engineering

Смотреть шоу «Фронтенд-инженерия» → https://youtube.com/playlist?list=PLQJNT2fdCJnjUCLyAnX8nkxLxWHNSuMDo

Ещё почитать? @htmlacademy
Download Telegram
#карьерные_советы.
На этой неделе Венера Мещерова (@vmeshcherova) отвечает на вопрос «Можно ли работать на двух работах».

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

👉 Какие у вас карьерные цели и вписывается ли подработка в них?
К чему вы стремитесь, где хотите оказаться через год, какими навыками обладать, на какой позиции оказаться?

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

👉 Какие у вас жизненные планы, достаточно ли там места для второй работы?
Из каких сфер состоит ваша жизнь, сколько какой вы хотите уделять хобби, семья, друзья и путешествия? Останется ли время и силы заниматься и получать удовольствие от этих сфер.

Остальные советы читайте в карточках.
🔥4
Как стать мидлом
Про что интереснее прочитать в постах о карьере?
Победила тема «Как искать работу» и у нас уже есть идеи, о чём написать 🥳

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

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

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

Если вам нравится идея, поставьте 🔥, нам будет приятно.
🔥64
Это рубрика #пятничная_скидка, вот чему можно обучиться со скидкой на этой неделе:

До 9 апреля.
Пакет курсов «Протоколы и сети» со скидкой 30%.
Для тех, кто хочет понимать принципы передачи данных и защищать свой код от атак

До 16 апреля.
Курс «Паттерны проектирования» со скидкой 30%.
Паттерны помогут вам быстрее и эффективнее проектировать, писать и заниматься отладкой программного кода. А значит, и возможности масштабирования ваших алгоритмов значительно повысятся.

Почти ко всем нашим курсам для роста можно получить демодоступ и своими глазами убедиться в качестве материалов, ищите кнопку «Попробовать бесплатно» на страницах курсов.
👍5
Спасибо всем, что читаете нас, пишите комментарии и ставите реакции. До 30 апреля для всех подписчиков по промокоду TELEGA-MIDDLE действует скидка 10%, это наш способ выразить благодарность за вашу поддержку 🐱💜

Чтобы воспользоваться этой скидкой, просто используйте промокод при оформлении заказа на сайте. Надеемся, она сделает ваше обучение ещё более приятным.

Желаем каждому подписчику, самых лучших офферов, интересных задач и четырёхдневную рабочую неделю 🤌
18🥰5
Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin. Рассмотрим подробнее, как это делать.
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Что такое демонстрационные кейсы?

В каждом курсе есть примеры решения типовых задач, которые помогут понять, как теория превращается в практику.

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

Но словами объяснить, как выглядят такие демонстрации сложно, поэтому прикрепили пример кейса из курса «Мастер анимаций: CSS и JS-анимации». В этом примере разбирается, как сделать простую анимацию карточек товара для интернет-магазина техники.

Что думаете про такой формат учебных материалов?
👍9🔥4
Нам поступил вопрос от Евгения @webisourbread:

Может кто знает, как в вебпаке сформировать сборку, чтобы было несколько хтмлок и к каждой из них цеплялась своя страница стилей?

За помощью обратились к автору курса по Webpack, вот его ответ:

Судя по всему, вопрос про многостраничник. Как вариант, можно в entry задать своё название чанков для каждой страницы, примерно так:
entry: {
index: './src/index.js',
about: './src/about.js',
},


Далее для каждой страницы указать свой HtmlWebpackPlugin, чтобы он подключал стили и js только к этой странице и только чанки с именем страницы. Это может выглядит примерно так:

new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
chunks: ['index'],
filename: 'index.html'
}),

new HtmlWebpackPlugin({
template: 'public/about.html',
inject: 'body',
chunks: ['about'],
filename: 'about.html'
}),


Также нужно использовать MiniCssExtractPlugin
10🤔5👍1
Финальный штрих по теме Webpack на этой неделе — простой гайд по сборке проекта для новичков.

Разобрали по шагам, что нужно сделать, чтобы всё получилось.
👍6
Вы планируете искать работу за границей?
Anonymous Poll
21%
Да, в ближайшее время
44%
Когда-нибудь — да
35%
Пока нет
Тест — готовы ли вы к поиску работы за границей.
Для всех, кто планирует искать работу за границей, подготовили тест. С его помощью вы сможете проверить всё ли для этого у вас готово. В конце ждёт чек-лист действий, которые увеличат шансы на успех.

Пройти тест.
🔥4
Это рубрика #пятничная_скидка, вот чему можно обучиться со скидкой на этой неделе:


До 16 апреля.
Курс «Паттерны проектирования» со скидкой 30%.
Паттерны помогут вам быстрее и эффективнее проектировать, писать и заниматься отладкой программного кода. А значит, и возможности масштабирования ваших алгоритмов значительно повысятся.

До 23 апреля.
Пакет курсов «Разработчик интерфейсов» со скидкой 30%.
Включает 5 курсов:
- Мастер анимаций: CSS- и JS-анимации
- Дизайн-системы
- Вёрстка React-компонентов
- Подготовка вёрстки под CMS
- Шаблонизаторы HTML
Для нас доступная вёрстка сайтов — обыденность, а тем временем в мире с этим полная катастрофа.

WebAIM опубликовала ежегодный отчет о доступности. Отчет показал катастрофические результаты и призвал уделять больше внимания доступности. Чтобы улучшить доступность веб-сайта:
👉 Добавьте язык в HTML-документ с помощью атрибута lang.

👉 Включите ссылку «skip», чтобы пользователи могли перейти к основной части страницы.

👉 Убедитесь, что все поля ввода имеют описание, чтобы помочь пользователям понять, какую информацию следует вводить.

👉 Маркируйте пустые кнопки и ссылки с помощью aria-label или .visually-hidden.

👉 Добавляйте альтернативный текст к изображениям и пишите его как предложение.

👉 Улучшение HTML — это хорошая отправная точка для улучшения доступности.
👍6🔥21
Коллеги, возник вопрос. Ещё рано на шашлыки или уже пора?
Anonymous Poll
23%
Рано
64%
Пора
13%
Я уже
🔥2
Ещё одна неделя подошла к концу, делимся акциями этой недели:

Пакет курсов «Разработчик интерфейсов» со скидкой 30% до 23 апреля.
Включает 5 курсов:
- Мастер анимаций: CSS- и JS-анимации
- Дизайн-системы
- Вёрстка React-компонентов
- Подготовка вёрстки под CMS
- Шаблонизаторы HTML

Курс «Мастер анимаций: SVG-анимации» со скидкой 30% до 30 апреля.
Вы научитесь анимировать векторные изображения с помощью CSS, SMIL и JavaScript. Также освоите популярные библиотеки для создания анимаций: KUTE.js, Anime.js, Snap.svg и GSAP.

#пятничная_скидка
Подборка микроанимаций для фронтенда с codepen.

Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

В статье примеры для инидикаторов загрузки, анимации меню, карточек, наведений, кликов и переключений.
🔥3
Как настроить TypeScript-окружение для работы
Цель статьи — создать окружение для работы над проектом в TypeScript. В других ситуациях вы можете использовать инструменты Angular, Next, React, Vue и прочих популярных библиотек и фреймворков. Вам также может потребоваться создать TypeScript-окружение в рамках существующего проекта.

Сейчас, чтобы обратить внимание на наиболее значимые моменты, мы начнём с чистого листа.
2🔥2