Все, что вы хотели знать о TypeScript

Полноценное введение в TypeScript

🐣 для начинающих

Статическая типизация
Как указывать типы
Линтинг на лету
Работа с функциями
Интерфейсы
Enum
Абстрактные классы
Модификаторы классов

🦁 для продвинутых

Конфигурация компилятора
Дженерики
Декораторы
Пространства имен

#typescript #beginners #advanced #video

React vs Svelte

Создаем одно и то же приложение на React и на Svelte. Есть ли разница?

Сравнить: https://prglb.ru/2k9a5

#frameworks #react #svelte

«Каждый охотник желает знать»: теория цвета для веба и приложений

Рассказываем, как правильно подбирать и комбинировать цвета. Цветовой круг, модель HSL, цветовые схемы и психология, советы и правила. Показываем на примерах, как применять в CSS.

Смотреть: https://prglb.ru/19u2h

#interface #css

Секреты правильной растяжки: адаптивные графики в вебе без клиентского JavaScript

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

Узнать подробнее: https://prglb.ru/5bcel

#tools #svg #library

Parcel

Очень быстрый сборщик модулей без всяких настроек.

Умеет работать с JS, TS, Babel, процессорами CSS, Pug, Vue, React и еще некоторыми типами ассетов из коробки. Он даже необходимые модули самостоятельно скачивает!

Просто берите, подключайте - и пишите проект. Parcel позаботится о его сборке самостоятельно.

Идеальное решение для небольших/несложных проектов со стандартными технологиями.

Документация: https://ru.parceljs.org
Обновляющийся список полезных материалов: https://prglb.ru/1fd4b

#tools

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

Подписывайтесь: t.me/event_listener_bot

OTUS приглашает на Дни открытых дверей для разработчиков, администраторов, тестировщиков и IT-управленцев!

📌18.02 - вебинар онлайн-курса «Разработчик Golang»: https://otus.pw/hpZj/

📌20.02 - вебинар онлайн-курса «Team Lead 2.0»: https://otus.pw/cWde/

Ответят на все вопросы, расскажут о хардкорной программе курсов, выпускном проекте и карьерных перспективах преподаватели-практики Антон Телышев (ведущий Golang-разработчик) и Вячеслав Лапин (Lead Software Developer) .

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

Все, что вы должны знать о каркасных экранах

Каркасные экраны (Skeleton Screens) позволяют загружать данные по мере их готовности, не вызывая при этом беспокойства у пользователей.

Читать: https://prglb.ru/1lyxt

#interace

Шпаргалка по самым распространенным операциям над массивами в JavaScript

15 важнейших операций - от перебора до сортировки с наглядными примерами.

Смотреть: https://prglb.ru/3pbwq

#javascript #core #cheatsheets

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

Прекрасные новости для каждого, кто хочет вывести работу своей команды на новый уровень! GeekBrains запускает трёхдневный интенсив по методологии Agile.

В ходе интенсива вы не только познакомитесь с «гибкими» подходами, но научитесь выбирать подходящие для решения любой задачи. На практике вы разберёте реальные кейсы и научитесь внедрять и применять Agile-методы в своих проектах.

Успейте подать заявку и повысьте свою эффективность - https://prglb.ru/3ph0p

7 полезных CSS-свойств

Небольшая подборка редко используемых, но полезных свойств CSS.

👉 hyphens
Позволяет переносить  длинные слова (будет очень полезно разработчикам сайтов на немецком языке 👍)
Ссылка на MDN

👉 will-change
Указывает браузеру, какие свойства элемента могут изменяться. Очень важное свойство для улучшения оптимизации
Ссылка на MDN

👉 -webkit-line-clamp
Ограничивает многострочный текст указанным числом строк и добавляет многоточие при необходимости
Ссылка на MDN

👉 conic-gradient()
Создает красивые конические градиенты
Ссылка на MDN

👉 caret-color
Изменяет цвет мигающего курсора при вводе текста
Ссылка на MDN

👉 CSS Motion Path
Группа свойств, позволяющая указать кастомный путь для анимации
Ссылка на MDN

👉 CSS Scroll Snap
Умное управление прокруткой
Ссылка на MDN

👍 Список 300+ CSS-свойств, разбитых на группы по функциональности: https://prglb.ru/44u42

#css

Простое объяснение рекурсии и стека вызовов

Рекурсия это один из наиболее потрясающих принципов во всех языках программирования. При правильном использовании она может сделать ваш код проще и понятнее.

Подробнее: https://prglb.ru/1sljb

#javascript

​​Коллеги! Otus объявляет набор сразу на три курса, связанных с вашим любимым Javascript: https://otus.pw/Zo2a/

✔️Онлайн-курс «Fullstack разработчик JavaScript» - рассмотрим cоздание веб-приложений целиком на самых востребованных Javascript-фреймворках: Node.js, React.js, Angular.js и Vue.js, а также узнаем современные возможности Javascript.

✔️Онлайн-курс «React.js разработчик» - авторский курс по самому популярному JS-фреймворку для Frontend-разработки.

✔️Онлайн-курс «Разработчик Node.js» - научимся разрабатывать бэкенд любой сложности на Node.js с использованием Express, Passport, Jest, GtaphQL, Next.js.

Выберите интересующий именно вас курс, пройдите вступительный тест и учитесь у профессионалов с welcome-скидкой!

Полное руководство по отзывчивым изображениям

При создании веб-страницы часто требуется использовать разные изображения для экранов разного размера. В HTML и CSS существуют специальные решения для того, чтобы не грузить сразу все необходимые картинки.

Из руководства вы узнаете:

👉 что такое плотность пикселей, чем она отличается от реального размера дисплея и как ее определить
👉 как работают атрибуты srcset и sizes тега img
что умеет тег picture
👉 как проверить, поддерживает ли браузер webp-формат
👉 как определить плотность экрана с помощью CSS
👉 какие волшебные возможности даст нам когда-нибудь функция image()

Подробнее: https://prglb.ru/3tzet

#css #performance

Тестирование Vue с Jest

Пишем первый тест для Vue-проекта с помощью Jest.

Читать: https://prglb.ru/4q6m4

#testing #frameworks #vue

Введение в Web Share API

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

С WebShare API для этого вам нужна только одна кнопка!

Подробнее: https://prglb.ru/5svop

#api #web

Три подводных камня в обеспечении безопасности, о которых должен знать каждый React-разработчик

XSS-уязвимости в React-приложениях, их обнаружение и защита.

Подробнее: https://prglb.ru/q78c

#security #frameworks #react

Медиа-выражения в CSS - это не только max-width

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

Подробнее: https://prglb.ru/1s70x

#css

Пользовательские правила eslint

Из этого руководства вы узнаете

🖍 как настроить eslint, чтобы добавление правил было таким же простым, как и написание другого кода в проекте
🖍 как создать пользовательское правило линтинга

Подробнее: https://slonoed.net/ru/custom-eslint-rule/

#tools

Классы на прототипах: как работает ООП в JavaScript

Изначально ООП модель JavaScript была основана на прототипной структуре, но для удобства в нем появились классы. Посмотрим, как это работает на деле.

Читать: https://proglib.io/p/klassy-na-prototipah-kak-rabotaet-oop-v-javascript-2020-02-20

#javascript #core #beginners