Адаптивное видео. Неплохое решение.

https://tprg.ru/7Re2

А я однажды изобрёл собственное. Если коротко, то я пихал в контейнер с видео невидимую картинку нужной пропорции, а iframe растягивал на весь контейнер. У картинки регулировал только ширину, а высоту не трогал.

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

Картинка, конечно же, генерировалась на лету. Мне оставалось только каким-то образом передать скрипту требуемое соотношение сторон.

А по ссылочке скрипт FitVid.js делает примерно то же самое через свойство padding-bottom, до которого я не додумался 😅

div.style.paddingBottom = aspectRatio * 100 + "%";

#react #book #english Возможно, когда я в достаточной мере овладею Vue, я займусь Реактом. Или Svelte. А может, вообще чем-то новым. В конце концов всего знать нельзя 🤷‍♂

The Complete Beginner’s Guide to React

Автор: Kristen Dyrr
Год издания: 2018

Скачать книгу

#React #english #beginner

#js #tips В веб-разработке, чтобы просто оставаться на одном месте, надо (как и Алисе в Стране Чудес) бежать очень быстро. Бег на месте - общеукрепляющий)

10 новых функций JavaScript в ES2020, которые вы должны знать

https://www.freecodecamp.org/news/javascript-new-features-es2020/

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

https://dou.ua/lenta/articles/css-animation/

#js #CSS #tips

Заставляем JavaScript общаться с CSS и Sass

https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

#frontend #js #tools

Я внезапно наткнулся на крутой UI-фреймворк DevExtreme.

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

Я сейчас делаю проект на Vuetify, но если бы мне подсунули DevExtreme в начала работы, я бы точно выбрал его - у него очень крутые компоненты. В общем, для следующего проекта я почти наверняка возьму именно его. Хотя Vuetify типа покрасивше местами)

https://js.devexpress.com/Demos/WidgetsGallery/

#CSS #tips

Viewport - относительные единицы измерения (vw, vh, vmin и vmax).

👉Полное руководство

#css

#tools

Коллекция ресурсов по GraphQL

https://github.com/nodkz/conf-talks/blob/master/README.md

#theory

И снова про тестирование

https://medium.com/front-end-in-regions-grodno/%D1%82%D0%B5%D1%81%D1%82%D1%8B-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D0%B4%D0%BE%D0%BB%D0%B6%D0%B5%D0%BD-%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA-a04cab35f45b

#js #tdd

​​Simple and complete #js testing utilities that encourage good testing practices.

Suitable for #vue, #react, and almost any other library.

https://testing-library.com/

#js #tips

Микро-гонки на JS. Сжатый код - 2кб. Выглядит вообще прикольно.
Попробуйте разобраться, как это работает ;)

http://pop.frontendweekly.co/HWDmzS?utm_campaign=Frontend%2BWeekly&utm_medium=email&utm_source=Frontend_Weekly_194

#js #course

Веб-разработка с нуля. 51 час.

Бесплатный доступ ещё два дня. Регаемся)

https://www.udemy.com/share/101xIw/

JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание

Автор: Кириченко А. В.
Год издания: 2020

Скачать книгу

#JavaScript #русский #middle

Professional Javascript ® for Web Developers

Автор: Matt Frisbie
Год издания: 2020

Скачать книгу

#Javascript #english #advanced

#js #typescript #book