JavaScript заметки

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

Работа с датами и временем: использование объекта Date и библиотек для работы с датами Работа с датами и временем является неотъемлемой частью разработки веб-приложений, особенно при работе с расписаниями, сроками и другими временными данными. Для работы с датами в JavaScript мы можем использовать встроенный объект Date, который предоставляет функциональность для работы с датами и временем. В данном примере мы создаем объект Date с помощью конструктора new Date(), который инициализирует его текущей датой и временем. Затем мы используем различные методы объекта Date, такие как getFullYear(), getMonth(), getDate(), getHours(), getMinutes() и getSeconds(), чтобы получить текущие значения года, месяца, дня, часа, минуты и секунды. Мы также форматируем дату и время, используя шаблон строки и значения, полученные от объекта Date. В данном примере мы форматируем дату в формате "день.месяц.год" и время в формате "часы:минуты:секунды". #полезное

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний? Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте?  #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Не знаешь каким крутым проектом пополнить портфолио? @Figma2html — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. 👉 Бесконечный источник для твоего портфолио

Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных Работа с графикой является важной частью разработки веб-приложений, особенно при рисовании и визуализации данных. Для этого разработчики часто используют библиотеку Canvas, которая предоставляет мощные инструменты для создания интерактивных и красочных графических элементов. Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое. В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста. Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font). #полезное

Пристальный взгляд на отладку JavaScript приложений Я делаю на JS/TS много разного в «Лаборатории Касперского»: фронт, облачные сервисы (Node.js), штуки для коробочной поставки (OnPrem), платформенные компоненты и библиотеки. И, конечно же, Open Source. Сегодня хотел бы затронуть тему отладки веб-приложений на JavaScript. Итак, как отлаживаться? Как-как? console.log(1) #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

codepen.js — канал с крутыми и полезными фичами для вашего сайта: готовый код на CSS и JavaScript, который можно вставить в проект. Подписывайся, выкладываем свежие исходники каждый день!💡

Работа с анимацией: использование CSS и JavaScript для создания анимированных эффектов Работа с анимацией является важной частью разработки веб-приложений, которая позволяет создавать привлекательные и интерактивные пользовательские интерфейсы. CSS предоставляет мощные возможности для создания анимаций с помощью свойства animation. С помощью CSS можно определить ключевые кадры, продолжительность, задержку, тип анимации и другие параметры. Преимущество использования CSS для анимации заключается в том, что браузеры могут оптимизировать и ускорить процесс воспроизведения анимации. В данном примере мы определяем анимацию slide-in, которая перемещает элемент из-за пределов экрана внутрь с помощью свойства transform: translateX(). Анимация начинается с -100% смещения по оси X и заканчивается с 0 смещением. Затем мы применяем анимацию к элементу с классом .element с помощью свойства animation. Мы указываем имя анимации slide-in, продолжительность 1s и функцию плавности ease-in-out. #полезное

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов В этой статье я хотел бы рассказать вам, как можно сократить рутинную работу написания кода, используя шаблоны для создания файлов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

​​Сделайте уверенный шаг к карьере веб-разработчика на мини-курсе Skillbox и научитесь зарабатывать на фрилансе! Вы с нуля создадите 3 проекта — сайт, приложение и сервис — и пройдёте основы самых востребованных технологий. Научитесь разрабатывать frontend — видимую часть сайтов, и backend — внутреннюю структуру, а также сможете разместить свои проекты в интернете. Регистрация: https://epic.st/fZz-dl На мини-курсе вы научитесь: — создавать веб-страницы, используя язык разметки HTML и технологию CSS; — реализовывать серверную часть (backend) веб-приложений на языке PHP; — работать с базой данных MySQL при помощи языка запросов SQL; — создавать приложения на языке программирования JavaScript; — автоматически получать информацию с других сайтов; — размещать сайты в интернете. Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Каждый участник получит подборку полезных материалов, а также подарки от Skillbox! Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Обычный вторник) #юмор 🫡 Накидайте реакций, если нравится формат

Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов Манипуляция с элементами страницы - это важная часть разработки веб-приложений, которая позволяет создавать, удалять и изменять HTML-элементы динамически с помощью JavaScript. Это особенно полезно при обновлении содержимого страницы без перезагрузки. В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor. Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа. Таким образом, манипуляция с элементами страницы позволяет нам динамически создавать, изменять и удалять HTML-элементы, что открывает широкие возможности для создания интерактивных и динамических веб-приложений. #полезное

React + Three.js. Создаём собственный 3D шутер В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Любите async?) #юмор 🫡 Накидайте реакций, если понравился формат

🇺🇸Раздумываете об эмиграции? IT специалисты востребованы во всем мире, особенно в США. Специально для таких людей в США есть виза О1 - виза талантливых людей. Ребята объединились в чат-сообщество и подробно разбирают тонкости получения виз. В чате много других ребят которые в процессе или уже переехали. Присоединяйся чтобы узнать подробности. Это все бесплатно.

Работа с JSON: сериализация и десериализация данных в JavaScript Работа с JSON является неотъемлемой частью разработки веб-приложений на JavaScript. JSON представляет собой формат обмена данными, основанный на тексте, который легко читается и создаётся как человеком, так и компьютером. Сериализация и десериализация данных в JSON являются ключевыми процессами при работе с данными в JavaScript. Сериализация - это процесс преобразования объекта или структуры данных в строку JSON, чтобы его можно было передать или сохранить. Десериализация, в свою очередь, выполняет обратную операцию - преобразует строку JSON обратно в объект или структуру данных. В данном примере мы создаем объект person, содержащий информацию о человеке. Затем мы используем метод JSON.stringify() для сериализации объекта в строку JSON. Результат выводится в консоль. Затем мы используем метод JSON.parse() для десериализации строки JSON обратно в объект. Результат также выводится в консоль. #полезное

Подружим Sentry и Mattermost быстро и просто через адаптер Когда я столкнулся с проблемой, я начал искать готовые решения или хотя бы туториалы по интеграции этих инструментов, но не нашел ничего и решил это исправить, написав гайд и возможно, сэкономив кому-то пару часов, а может и дней жизни. Код сервиса будет максимально простой, главная идея статьи - показать один из способов решения проблемы и направить в какую сторону копать, надеюсь кому-то пригодится. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование классов для создания карусели Здесь класс Carousel используется для создания простой карусели изображений. #классы

Создание мини игр и анимации в Online редакторе Collagen_2 Collagen позволяет создавать тестовую анимацию управляемую с клавиатуры, имеется редактор уровней который позволяет создавать слои, перемещать камеру вида а также управлять анимацией персонажа. Также вы его можете использовать для создания чатов в игровом формате или мини социальных игр в связке с node.js и sokcet.io #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование классов для моделирования геометрических фигур Здесь класс Shape представляет базовую геометрическую фигуру, а класс Circle наследует его и добавляет функциональность для работы с кругами. #классы