Javascript js frontend

Winter papercut

Зимняя сценка с анимированным снегом.

#js

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

Ответ

Как снизить затраты на разработку UI? / Как масштабировать изменения в UI без лишних затрат? / Как экономить на разработке UI без потери качества?

Узнайте 18 декабря на бесплатном вебинаре СберТеха «UI-выгорание, или что не так с бренд-дизайном приложений».

Эксперты СберТеха поделятся опытом собственных проектов и расскажут, как создали решение, которое в разы ускоряет разработку и масштабирование изменений UI.

Platform V One UI — библиотека UI-компонентов с трехуровневой дизайн-токен системой, а также low-code инструментами стилизации и генерации UI-форм и сценариев.

Также на вебинаре узнаете, какие инструменты Platform V One UI доступны в open source, и увидите демо продукта.

Регистрируйтесь и приходите!

Countdown

Счетчик времени до Нового года.

#js

❓ Хотите создать свою первую веб-страницу с нуля? Без магии и кодерских заклинаний — только HTML, CSS и ваши идеи!

👉 На открытом вебинаре «Создаем свою первую страницу: HTML и CSS» вы узнаете, как работают основные элементы веб-разработки: от структуры HTML до современной стилизации с CSS.

Мы разберем шаги, которые помогают создать не просто страницу, а основу для вашего портфолио или будущего сайта!

💪 Это ваш шанс научиться веб-разработке, используя простой и мощный инструментарий. Уже на вебинаре вы создадите свою первую веб-страницу — с текстом, картинками и уникальным дизайном!

⏰ Регистрируйтесь на открытый урок 3 декабря в 19:00 мск! Урок проходит в преддверии старта курса «Fullstack Developer», участники вебинара получат скидку на обучение.

👉 Для участия зарегистрируйтесь

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

​Каскад и специфичность в CSS - это просто

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

#ru

Новый уровень продуктивной разработки: добро пожаловать на платформу GitVerse

На платформе для работы с исходным кодом GitVerse можно легко и удобно организовать разработку любых проектов: писать и проверять код, автоматизировать CI/CD-процессы, общаться с единомышленниками и стать частью open source сообщества.

Что еще могут пользователи GitVerse:
– переносить проекты с других git-площадок в один клик;
– размещать открытые и приватные репозитории, работать самостоятельно и в командах;
– управлять проектами с помощью удобных досок и карточек, назначать роли, ревьюеров и делать все процессы прозрачными;
– делегировать рутинные задачи AI-ассистенту GigaCode, чтобы посвятить время по-настоящему интересным задачам!

Регистрируйтесь на платформе GitVerse и повышайте эффективность разработки!

Credit Card Checkout

Верстка формы на HTML и SCSS. Значения в карточке устанавливаются в JS.

#js

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

Ответ

Parallax Star background in CSS

Создано без использования JS. Вместо него автор использует возможности препроцессоров Haml и Sass.

#css

​20 функций JavaScript, которые вы, вероятно, никогда не использовали

В этой статье мы на примерах рассмотрим некоторые скрытые возможности JavaScript. Их использование поможет вам писать более чистый и эффективный код и легко справляться со сложными задачами.

#ru

Sibling Gallery

Галлерея фотографий при наведение на одну из фото, она показывается крупнее. Написана на чистом CSS.

#css

Airplane Mode Animation

Самолет анимируется в CSS. Дым за самолетом генерируется и анимируется на JS.

#css #js

Приглашаем на вебинар курса Fullstack Developer!

📅 Дата: 20 ноября 2024 года

🕗 Время: 20:00 (мск)

📍 Тема: Базовое использование системы контроля версий Git

## Что будет на вебинаре?

- Введение в систему контроля версий, основные команды и концепции (репозитории, коммиты, ветки).

- Как клонировать репозиторий, выполнять слияния и разрешать конфликты при работе в команде.

- Рекомендации по эффективному использованию Git и обзор популярных инструментов для удобства работы (например, GitHub, GitLab).

## Что узнают участники?

- Основные команды и концепции Git: как использовать команды git init, git add, git commit, git branch и другие. Эти знания помогут создать и управлять своими проектами, отслеживая изменения в коде и организуя свою работу более эффективно.

- Работа с удалёнными репозиториями: научатся клонировать репозитории, отправлять свои изменения и синхронизировать локальные изменения с удалёнными. Эти навыки будут полезны для совместной работы над проектами в командах и использования платформ, таких как GitHub или GitLab.

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

Не упустите возможность улучшить свои навыки и стать более уверенным разработчиком! Присоединяйтесь к нашему вебинару и узнайте все секреты работы с Git.

🔗 Зарегистрироваться на вебинар

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

​Неизвестно полезный CSS

В этой статье:

- как перестать вредить пользователям свойствами justify-content и align-items
- недавно появившиеся возможности разделять CSS на части и управлять их приоритетом
- неизвестный нюанс применения псевдокласса :nth-child.

#ru

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

Ответ

Tab Bar Menu

Переход между элементами реализован при помощи CSS transform.

#css

Single div CSS - Window

Окно с открывающейся ставней. В HTML - один блок div, все остальное - CSS.

#css

​Тестирование кода HTML при помощи CSS

Давным-давно я написал довольно популярный фрагмент открытого исходного кода под названием REVENGE.CSS. В двух словах, цель REVENGE.CSS - расстановка визуальных пояснений к HTML элементам, нарушающим шаблон. Он делает так, чтобы плохой HTML элемент выглядел плохо, оформляя его в болезненно-розовом цвете и непопулярным шрифтом Comic Sans MS.

Селекторы, устанавливавшие "мстительный" стиль, широко используют отрицающий псевдокласс :not, который был уже доступен на протяжении 11 лет.

#ru

Logo animation

Вся сцена состоит из svg-картинки, которая анимируется библиотекой anime.js

#js

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

Ответ

Fit Text

Подгонка текста по ширине окна просмотра, реализованная с помощью переменных CSS и JavaScript.

#js

​Как сопоставлять скобки с помощью JavaScript и без использования Regex

Разбираем, как с помощью JS определять, совпадают ли пары открывающих и закрывающих символов (), [] и {} внутри строки типа «[foo () {bar}]».

#ru

Neon Effect Arrow

Анимация стрелки с неоновым эффектом Pure, реализована с помощью CSS.

#css

Typing Effect

Эффект последовательного ввода букв, реализованный в JS.

#js

Хотите узнать, как создать чат-приложение с использованием React и WebSockets?

На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).

Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.

После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).

Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!

Регистрируйтесь на открытый вебинар прямо сейчас! 👇

https://vk.cc/cDMkK8

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

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

Ответ

Live data

Демонстрация работы графика с автоматическим обновлением данных. Создано с использованием библиотеки amCharts.

#js

​Основные принципы хорошего нейминга

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

#ru

Menu Animation

Анимация кнопки меню, реализованная с помощью CSS и JavaScript.

#js

Project Management Dashboard UI

Пользовательский интерфейс панели управления проектами, реализован с помощью CSS и JS.

#css #js

JavaScript. Задача

Ищем блок поврежденных пикселей.

Дана матрица пикселей, где '0' представляет рабочий пиксель, а '1' - поврежденный.

Поврежденные пиксели связаны (т.е. есть только одна поврежденная область на матрице). Пиксели соединены по горизонтали и вертикали.

Также даны два целых числа - x и y - представляющие расположение одного из поврежденных пикселей.

Необходимо найти площадь наименьшего (выровненного по оси) прямоугольника, охватывающего все поврежденные пиксели.

Входные данные:
- Стороны матрицы имеют размер от 1 до 100 пикселей включительно
- Элементы матрицы - символы '0', '1'.

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

Пример:

matrix = [
['0','0','1','0'],
['0','1','1','0'],
['0','1','0','0']
].
x = 0, y = 2
Output: 6

Ответ

Temperature displays

Индикаторы - это svg-картинки, параметры которых задаются в JS.

#js

Rating

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

#js

Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?

➡️Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:

✔️архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️как создавать маршруты, контроллеры и использовать middleware;
✔️как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️методы тестирования и отладки приложений Nest.Js.

Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.

Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие


Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Masked Circle Slider

Сверстано на HTML и SCSS. Логика переключения слайдов реализована в JS.

#js

Ocean card, perspective shift on hover

Смена перспективы при наведении мыши на карточку. Сделано с помощью SCSS и JS (Babel).

#js

@frontquizes - тесты по фронтенд технологиям, преимущественно Javascript/React/HTML/CSS

Quickchat UI Themes

Адаптивная панель управления с темой пользовательского интерфейса Quickchat. Реализована с помощью JavaScript.

#css

Neon Cursor

Реализовано при помощи Three.js. Настройки анимации задаются в JS.

#js

London Tube Map - Navigation Bar Concept

Концепция панели навигации в виде схемы лондонского метро.

#js

Хотите освоить передовые инструменты для создания масштабируемых решений и прокачаться в разработке?

➡️➡️➡️Присоединяйтесь к открытому вебинару «Создание RestFull API с NestJs» 24 сентября в 20:00 мск, где мы разберем:

- общие принципы построения REST;
- как создать RestFull API с помощью NestJS;
- как использовать современные фреймворки для разработки масштабируемых API.

Спикер Николай Лапшин — опытный архитектор, тимлид и разработчик на Javascript, Typescript, Golang, C.

Встречаемся в преддверии старта курса «JavaScript Developer. Professional».
Все участники вебинара получат специальную цену на обучение!
➡️➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие

Positive Negative

Слайдер температуры с положительным и отрицательным значениями. Реализован с помощью Vue.

#js

JavaScript. Свойства объекта

Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

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

Некоторые люди не знают этого и заканчивают это использованием eval(), что по-настоящему плохая идея. Так код сложнее читать, сложнее находить ошибки (невозможно использование jslint), он медленнее выполняется и может привести к XSS.