​Инструменты DevOps: интерфейс Docketeer для Docker Desktop

Docketeer — это удобная платформа и графический интерфейс для приложения Docker Desktop. Docketeer стремится вывести опыт пользования Docker на новый уровень.

Статья пригодится как разработчикам, уже работавшим с инструментом, так и желающим прочитать краткий обзор технологии. Здесь также будут рассмотрены изменения, внесённые в каждую из основных версий, прежде чем перейти к подробному разбору самой новой версии Docketeer 5.0:

https://nuancesprog.ru/p/14638/

#devops

CSS скейтбордист

Анимация выполнена с помощью HTML и CSS-препроцессоров. JavaScript участия не принимал. Примечательно насколько мало надо строк в HTML, используя препроцессор Pug. Убедитесь сами:

https://codepen.io/deren2525/pen/dyvyLev

#codepen

​Библиотека Clipboard.js

Это простая библиотека, которая практически ничего не весит, но даёт возможность просто использовать буфер обмена. Буквально две строки в HTML, а всё остальное сделает за вас библиотека.

Подробнее:

https://github.com/zenorocha/clipboard.js

#библиотека #javascript

Надо было гридами делать

​Делаем селфи с помощью браузера

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

Подробнее:

https://habr.com/ru/company/timeweb/blog/650233/

#javascript

​Худшие практики в Javascript

Все говорят о «лучших практиках», которых следует придерживаться в отношении различных технологий. Однако как насчёт того, что мы делаем и даже не осознаём, что это не только неправильно, но и ужасно?

В этой статье вы узнаете 5 худших вещей, которые вы можете сделать со своим кодом в JavaScript:

https://webdevblog.ru/hudshie-praktiki-v-javascript/

#javascript

​Как выиграть $30 000 за 13 килобайт кода на JS

Нашли забавный конкурс, который проходит ежегодно в августе. Согласно правилам, участники должны написать мини-игру на HTML5 и JavaScript, а код должен весить не больше 13 килобайт.

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

https://tproger.ru/articles/vyigrat-30-000-za-13-kilobajt-koda-js13kgames/

​Создание вкладок на чистом JavaScript

В этом видео вы узнаете, как написать вкладки на JavaScript, не используя при этом никаких библиотек. Кроме того, это будет универсальный JS-код, в который вы сможете добавлять любое количество вкладок и при этом не менять JS:

https://youtu.be/kEos2KoW_rc

#видео #javascript

Не от мира сего

​Как работает currentColor в CSS

Ключевое слово currentColor можно использовать в качестве значения для CSS-свойства. Тогда браузер сам подставит нужный цвет. Несколько примеров использования и объяснение принципа работы тут:

https://doka.guide/css/currentcolor/

#css

​Новый выпуск веб-стандартов

В этом выпуске подкаста Вадим Макеев, Андрей Мелихов и другие обсудили Chrome, :has, MathML, Defensive CSS, карточки-ссылки, дизайн-токены, ES2022 и GitHub Copilot. Заходите послушать:

https://youtu.be/emrNwETMzro

#подкаст

Как сделать змейку на чекбоксах и не только

Разработчик Брайан Браун решил развлечься во время пандемии и создал библиотеку Checkboxland, которая способна отображать текст и анимацию на сетке чекбоксов.

В этой статье вы рассмотрите как работает эта библиотека, как создать с помощью неё анимацию и даже змейку:

https://habr.com/ru/company/skillfactory/blog/581924/

#javascript

Анимация смещения фона с помощью режимов наложения CSS

Вариант создания анимации смещения фона при скроллинге страницы, созданный с использованием режима наложения CSS и многослойной анимации:

https://tympanus.net/codrops/2022/01/26/background-shift-animation-with-css-blend-modes/?ref=heydesigner

#фронтенд #css

​Как работает метод bind? 30 вопросов собеседования JavaScript

Метод bind применяется сегодня не так часто, как раньше, но его всё ещё можно встретить. В этом видео разбирается, что именно он делает и как на практическом примере:

https://youtu.be/nBeUtwXcjp0

#видео #javascript

​Поиск проблемных промисов в JavaScript

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

Эта статья как раз посвящена вопросу поиска подобных проблем:

https://habr.com/ru/company/ruvds/blog/589373/

#javascript

​PureMVC фреймворк

Это крутой фреймворк, основная цель которого состоит в разделении интересов создаваемого кода. Суть кроется в названии, MVC — Model, View и Controller. А подробности кроются здесь:

https://puremvc.org/

#фреймворк

​Что такое «Разделение ответственности» в коде

«Разделение ответственности» — ключевой фактор грамотной организации кода. Но что это значит и как правильно применять это? Если кратко, то это правильное разделение кода не только по функциям, но и по файловой структуре. Подробнее:

https://habr.com/ru/company/piter/blog/672522/

​Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

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

https://tproger.ru/articles/podgotovka-okruzhenija-react-prilozhenija-vscode-prettier-eslint-stylelint-husky/

#react

​Улучшенная прокрутка с помощью современного CSS

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

https://blog.mayank.co/better-scrolling-through-modern-css

#css #фронтенд

​Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом

Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом. Она позволяет анимировать DOM, WebGL, а также любую переменную JavaScript. 2D, 3D, анимация клавиш, создание ховеров и прочее.

Протестируйте и попробуйте сами:

https://www.theatrejs.com/

#библиотека #фронтенд