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

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

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

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

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

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

Желаем каждому подписчику, самых лучших офферов, интересных задач и четырёхдневную рабочую неделю 🤌

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin. Рассмотрим подробнее, как это делать.

Что такое демонстрационные кейсы?

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

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

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

Что думаете про такой формат учебных материалов?

Нам поступил вопрос от Евгения @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

Финальный штрих по теме Webpack на этой неделе — простой гайд по сборке проекта для новичков.

Разобрали по шагам, что нужно сделать, чтобы всё получилось.

Тест — готовы ли вы к поиску работы за границей.
Для всех, кто планирует искать работу за границей, подготовили тест. С его помощью вы сможете проверить всё ли для этого у вас готово. В конце ждёт чек-лист действий, которые увеличат шансы на успех.

Пройти тест.

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


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

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

Для нас доступная вёрстка сайтов — обыденность, а тем временем в мире с этим полная катастрофа.

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

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

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

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

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

👉 Улучшение HTML — это хорошая отправная точка для улучшения доступности.

Пока на на шашлыки ещё рано, можно почитать одну из пяти книг по паттернам проектирования, которые улучшат ваш код 👽

Ещё одна неделя подошла к концу, делимся акциями этой недели:

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

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

#пятничная_скидка

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

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

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

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

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

Рассказываем про скидки этой недели:

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

Пакет курсов «Мастхэв для фронтендера» со скидкой 30% до 7 мая.
Набор курсов по навыкам для эффективной работы с данными и выстраивания архитектуры.

Включает 4 курса:
- TypeScript
- Алгоритмы и структуры данных
- Протоколы и сети
- Регулярные выражения

#пятничная_скидка

SVG-графика поддаётся анимированию. В этой статье мы покажем, как анимировать отрисовку контуров.