Jello Tab Bar - красивый анимированный tabbar, написанный с помощью SVG, CSS и JavaScript

https://codepen.io/oey_amir/pen/xxpZgEW

@javascriptv

Ghost Card - эффектная карточка с 3D эффектом.

https://codepen.io/pizza3/pen/pobevYW

@javascriptv

DeepScan - полезный инструмент, который проводит анализ исходного кода.

Программа отлично работает в обнаружении возможных ошибок и уязвимостей в JavaScript приложениях.

Она проводит подробное сканирование и анализ вашего кода, выявляя проблемные секции, такие как неправильное использование переменных, возможные утечки памяти и небезопасные операции с данными.

https://deepscan.io/

@javascriptv

Yotako.io — крутой инструмент дизайна в код с помощью искусственного интеллекта

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

При этом Yotako.io также обеспечивает синхронизацию между дизайном и кодом, что позволяет легко вносить изменения в процессе разработки

Стоимость: #бесплатно (но есть платные тарифы).

#дизайн #code #ии

@javascriptv

Microsoft Homepage Clone - Клон домашней страницы Microsoft. Реализована с помощью CSS и Js.

https://codepen.io/bradtraversy/pen/ZEGGNRb

@javascriptv

Сбер открыл доступ к новым нейролингвистическим моделям

Сбер выпустил модель ruGPT-3.5 13B для генерации русского текста и модель mGPT 13B для генерации текста на 61 языке.

Модель ruGPT-3.5 13B оснащена 13 миллиардов параметров и может генерировать текст на русском, английском, а также неплохо разбирается в языках программирования. Модель mGPT 13B доступна по открытой лицензии MIT и может генерировать текст на 61 языке, в том числе на языках стран СНГ и малочисленных этнических групп в России.

«Сбер как ведущая технологическая компания выступает за открытость технологий и обмен опытом с профессиональным сообществом, ведь любые разработки и исследования имеют ограниченный потенциал в замкнутой среде. Поэтому, мы уверены, что публикация обученных моделей подстегнёт работу российских исследователей и разработчиков, нуждающихся в сверхмощных языковых моделях, создавать на их базе собственные технологические продукты и решения», —следует из заявления старшего вице-президента, CTO, руководитель блока «Технологии» Сбера Андрея Белевцева.

@javascriptv

49. parallax bird - красивый параллакс, сделанный с помощью Less и библиотеки Three.js

https://codepen.io/ycw/pen/OJpPmOq

@javascriptv

Hex/RGB Auto Color Converter in Vue - конвертор цветов из HEX в RGB, выполненный с помощью SCSS и библиотеки Vue.js.

https://codepen.io/collinsworth/pen/WNXxQVP

@javascriptv

👨‍💻Как работает JavaScript Proxy

• Первый шаг в работе с JavaScript Proxy — создание прокси-объекта с помощью синтаксиса new Proxy(). Этот синтаксис позволяет определить целевой объект и объект-обработчик, содержащий ловушки — специальные методы, которые перехватывают операции с прокси и позволяют настраивать их поведение.

Например, ловушка get перехватывает доступ к свойствам прокси-объекта. Определив эту ловушку, можно настроить реакцию прокси при обращение к свойству. Аналогично, ловушка set перехватывает присвоение свойства, позволяя валидировать или изменить присвоенное значение.

• В целом, ловушки в контексте JavaScript Proxy — это специальные методы, которые действуют как посредники, перехватывая и позволяя настраивать такие действия с прокси-объектом, как доступ к свойствам и присвоение. Они предоставляют разработчикам тонкий контроль над поведением прокси, позволяя настраивать и манипулировать им по мере необходимости.

Пример:
const target = {
name: 'Hossein',
age: 26
};

const handler = {
get(target, property) {
console.log(`Getting property: ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting property: ${property} = ${value}`);
target[property] = value;
}
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Вывод: Получение свойства: name, Hossein
proxy.age = 30; // Вывод: Установка свойства: age = 26
console.log(proxy.age); // Вывод: получение свойства: age, 30

▪️Здесь ловушка set перехватывает присвоение свойства прокси-объекту и регистрирует присвоенное свойство и значение, прежде чем изменить его в целевом объекте.

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

Перехват операций с объектами с использованием прокси

• JavaScript Proxy позволяет перехватывать и настраивать различные операции с объектами. Рассмотрим несколько примеров.

Удаление свойства:
const target = {
name: 'Hossein',
age: 26
};

const handler = {
deleteProperty(target, property) {
console.log(`Deleting property: ${property}`);
delete target[property];
}
};

const proxy = new Proxy(target, handler);

delete proxy.age; // Вывод: Удаление свойства: age
console.log(proxy); // Вывод: { name: 'Hossein' }

▪️В этом примере ловушка deleteProperty перехватывает удаление свойства прокси-объекта. Можно настроить поведение так, чтобы залоггировать удаляемое свойство и затем удалить его из целевого объекта.

• Вызов функции:

const target = {
sum: (a, b) => a + b
};

const handler = {
apply(target, thisArg, argumentsList) {
console.log(`Calling function: ${target.name}`);
return target.apply(thisArg, argumentsList);
}
};

const proxy = new Proxy(target.sum, handler);

console.log(proxy(2, 3)); // Вывод: Вызов функции: sum, 5

▪️В этом случае ловушка apply перехватывает вызов функции прокси-объекта. Можно настроить поведение так, чтобы залоггировать имя функции перед ее вызовом с предоставленными аргументами.

📌Продолжение

@javascriptv

💡 Newton's Light Bulbs - изящная анимация лампочки Ньютона. Реализована с помощью CSS и Js.

https://codepen.io/jh3y/pen/abzeaWJ

@javascriptv

Expanding Button - красивая анимированная кнопка с различными ссылками на медиа. Реализована с помощью SCSS, Pug и JavaScript.

https://codepen.io/abh1nash/pen/eYjQgEN

@javascriptv

⚡ Интересное исследование производительности анимации на основе скролла страницы

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

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

#javascript #api #css #web

@javascriptv

UptimeSystem — мониторинг доступности веб-сайтов и серверов

UptimeSystem позволяет с лёгкостью отслеживать доступность ваших веб-сайтов, серверов и портов, а также контролировать выполнение ваших Cron-заданий

При этом вы можете получить мгновенные email-уведомления при изменении состояния отслеживаемых сервисов

Стоимость: #бесплатно (но есть платные тарифы)

@javascriptv

🔥 CSS Dots wave - анимированная сцена, выполненная с помощью SCSS, без использования JavaScript

https://codepen.io/amit_sheen/pen/vYpZBwP

@javascriptv

About Us Pop-Out Effect - крутые виджеты для блока "О нас" с поп-ап жффектом.

https://codepen.io/ainalem/pen/QWGNzYm

@javascriptv

Как сделать кастомный Semi Donut Chart с помощью SVG

Semi Donut Chart — это одна из форм представления отчётов в виде полукруглой диаграммы. Semi Donut Chart в том случае, когда важна не математическая точность, а наглядность.

Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.

@javascriptv