Создание стилей панелей прокрутки с помощью CSS

В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

В этом учебном модуле вы научитесь использовать CSS, чтобы настраивать панели прокрутки для поддержки современных браузеров

Подробнее

Свойство flex-wrap

Свойство flex-wrap указывает, должны ли гибкие элементы переноситься или нет. Это относится только к гибким элементам. Как только вы примените к своему контейнеру flex-wrap, оно станет приоритетом над сжатием.

@frontend_sovet

#css

Подборка плагинов для Sublime Text

1. Package Control - Менеджер пакетов для Sublime

2. Emmet - Преобразовывает простые аббревиатуры в полноценные блоки кода

3. GitGutter - Добавляет возможность просматривать статус файла и отслеживать изменения прямо в редакторе.

4. Sublime Linter - Проверяет код на синтаксические ошибки.

5. Tabnine - Индексирует весь ваш проект, имея эти данные, он может предсказывать длинные имена файлов.

6. Auto-save - Автоматически сохраняет текущий файл после каждой модификации

7. JSHint - Добавляет возможности отладки JavaScript

8. ColorPicker - Плагин добавит возможность выбирать и подбирать цвет из круговой палитры в hex-формате

9. Bracket Highlighter - Этот плагин делает более читаемым подсвечивание скобок и тегов

10. Git Hubinator - Позволяет увидеть выделенные строки в удаленном репозитории GitHub или BitBucket.

11. Alignment - Позволяет быстро выравнивать свой код, чтобы сделать его более удобным для чтения.

12. Terminal - оптимизирует использование функций терминала

13. Doc Blockr - Упрощает документирование кода

14. Colorsublime - Позволяет пользователям устанавливать цветовые схемы для своих редакторов и изменять подсветку синтаксиса

15. Side Bar Enhancements - Улучшает боковую панель, добавляет файлы и папки

16. SFTP - Удаленное редактирование

17. LiveReload - обновляет браузер каждый раз, когда вы вносите изменения в файл

⚠️ Frontend многолик, но если React и Vue.js для тебя не пустой звук, то нам есть, что тебе предложить. 8 нестандартных вопросов от наших лучших девелоперов - достойный вызов для гуру фронтенда вроде тебя, да? Мы уверены, что знание должно вознаграждаться, поэтому 20 апреля разыграем Yandex.Станцию среди ответивших верно на все вопросы. Уверены, ты успеешь присоединиться, ведь тебе не впервой поспевать за трендами.

‼️Участвовать в квизе

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

Процедура рендеринга массивов в React

В этой статье рассказывается о рендеринге массивов в React и о лучших практиках для рендеринга разных элементов внутри компонентов.

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

Использование циклов в отношении массивов или объектов означает, что для каждого элемента код HTML нужно писать только один раз. Более того, любые будущие изменения также потребуется вносить только один раз.

Подробнее

В чем преимущество курса?
Курс бесплатный и включает обучение не только Golang, но и работе с базами данных, брокерами сообщений, k8s/docker, новым фичам в Go, включая дженерики. По результатам обучения у тебя будет возможность попасть в команду разработки #CloudMTS, т.к. курс заточен под потребности компании.

Что такое CloudMTS?
CloudMTS – это облачный провайдер с собственными магистральными каналами связи. Команда проектирует инфраструктурные службы облака и строит биллинг. Вся разработка ведётся на Golang.

Как попасть на курс?
Кандидатам нужно наличие опыта коммерческой разработки от полугода, а также пройти отборочные на знание синтаксиса и базовых конструкций Go, основ работы с базами данных и брокерами сообщений. Подать заявку можно до 11 апреля 2022 года, обучение стартует 11 мая.

Как получить оффер?
После успешного окончания курса вас ждет собеседование с CloudMTS, к которому вы подготовитесь на курсе.
Регистрируйся на курс тут

Подборка JavaScript библиотек для построения диаграмм

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

Анимация при прокрутке, сделанная при помощи библиотеки Babel.js

https://codepen.io/ste-vg/pen/GRooLza

Создание эффекта многоуровневого скроллинга с помощью чистого кода CSS в Chrome

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

В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице.

Подробнее

Что будет выведено в консоль? 👇

Stick Hero with Canvas

Игра сделанная с использованием CSS, JavaScript и Canvas

https://codepen.io/HunorMarton/pen/xxOMQKg

Как сделать размытие изображения в css?

Сделать размытие изображения в CSS можно следующим образом:

<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="путь к картинке" />
</body>

@frontend_sovet

#css

Tilting Maze game

Игра "Лабиринт", сделанная с использованием CSS и JavaScript.

https://codepen.io/HunorMarton/pen/VwKwgxX

Parallax layers with GSAP


Вся сцена - это одна большая svg картинка, которая анимируется при прокрутке при помощи библиотеки gsap.

https://codepen.io/cassie-codes/pen/abwNoya

Как убрать лишние пробелы из строки в javascript?

Как вариант использовать регулярные выражения, пример:

var stringTest = " I am Test String ";
// IamTestString
console.log(stringTest.replace(/\s+/g, ''));


Второй вариант это разбить на массив по пробелы и потом соединить строку снова:

var stringTest = " I am Test String ";
// IamTestString
console.log(stringTest.split(' ').join(''));

#javascript

Подписывайтесь на канал 👉@coddy_academy