Javascript

🖥 𝗧𝗵𝗲 𝘀𝘁𝗮𝘁𝗲 𝗼𝗳 𝗼𝗽𝗲𝗻 𝘀𝗼𝘂𝗿𝗰𝗲 𝗶𝗻 𝟮𝟬𝟮𝟯 by GitHub

GitHub только что опубликовал свой последний отчет о состоянии открых проектов. Авторы отметили тренд на использование разработчиками технологий искусственного интеллекта и тренд на создание приложений на основе искусственного интеллекта.

Они выделили основные тенденции:

🔹 Разработчики все чаще используют генеративный ИИ: Все больше разработчиков работают с моделями OpenAI ( 92% ) и с моделями других ИИ-компаний; в 2023 году проекты генеративного ИИ с открытым исходным кодом входят в десятку самых популярных проектов по количеству контрибьюторов.

🔹 Наблюдается тренд на работу с облачными приложениями:
Развертывание облаков становится стандартом; резко возросло количество использования разработчиками Docker контейнеров, IaC и других облачных нативных технологий.

🔹 В 2023 году на GitHub было создано 98 млн новых проектов (за 2022 год - 85.7 млн, за 2021 - 61 млн, за 2020 - 60 млн). Общее число проектов достигло отметки в 420 млн (+27%), а число публично доступных репозиториев - 284 млн (+22%).

🔸 За год добавлено около 65 тысяч новых проектов, связанных с машинным обучением, это на 248% больше, чем в прошлом году. Число AI-проектов за год выросло на 148%.

🔸 Аудитория GitHub за год выросла на 20.2 млн пользователей (+26%) и теперь достигает 114 млн (в прошлом году было 20.5 млн, позапрошлом - 73 млн, три года назад - 56 млн). На первом месте по числу разработчиков находится США, на втором - Индия, на третьем - Китай, на четвёртом Бразилия, на пятом - Великобритания, на шестом - РФ, на седьмом Германия. К 2027 году Индия обгонит США как крупнейшее сообщество разработчиков на GitHub

🔸Javascript остается самым популярным язком. Второе место сохраняет за собой Python.Популярность TypeScript выросла на 37 %. и он вытеснил на четвёртое место язык Java. 5, 6 и 7 места удержали за собой языки С#, C++ и PHP. На восьмое место поднялся язык С, который вытеснил на девятое место Shell. Десятое место занял Go.

🔸 𝗥𝘂𝘀𝘁 растет быстрее всех остальных языков в этом году (рост на 40 % по сравнению с предыдущим годом).

🔸 𝟰.𝟯 миллиона открытых и приватных репозиториев используют 𝗗𝗼𝗰𝗸𝗲𝗿𝗳𝗶𝗹𝗲𝘀. Это является следcтвием роста использования Terraform и других облачных нативных технологий, который мы наблюдали в течение последних нескольких лет.

🔸 Сингапур занял первое место по количеству новых разработчиков на душу населения.

📌 Полный отчет
📌 Видео

ai_machinelearning_big_data

⚡️ CSS Spinners. - 3 разных анимации загрузки для сайта.

https://codepen.io/timhilton/pen/ZEVzRgG

@javascriptv

⚡️ UI Vs UX

@javascriptv

🧮Первые шаги в JavaScript: создание калькулятора

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

Настройка среды разработки
Чтобы начать работу с JavaScript, не нужна специальная среда разработки. Понадобится лишь веб-браузер и текстовый редактор.

В данном случае будем использовать простую HTML-страницу для демонстрации возможностей JavaScript.

Вот базовая HTML-структура для калькулятора:

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<! - Calculator content goes here →
</body>
</html>

Написание JavaScript-кода: сложение двух чисел
Теперь приступим к добавлению JavaScript-кода на HTML-страницу. JavaScript-код можно разместить в HTML-документе между тегами <script>. Будем создавать функции для обработки пользовательского ввода и выполнения вычислений. Вот простой пример функции JavaScript, которая складывает два числа:

📌 Читать

@javascriptv

🔥 Morph Three.js Particles ( Christmas🎄)

Бесплатный шаблон для создания крутых проектов для портфолио для креативных разработчиков.

Live - https://christmas.misterprada.com
Код - https://github.com/MisterPrada/morph-particles

@javascriptv

💡Совет CSS и JS💡

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе?

@ keyframes fade {
  to { opacity: 0; filter: blur(2rem); }
}
h2 {
  animation: fade;
  animation-timeline: view();
  animation-range: cover 40% cover 85%;
}

Как насчет круглой формы на прокрутке? Это анимированный клип-патч

@ keyframes unclip {
  to { clip-path: ellipse(220% 200% at 50% 175%); }
}

Создайте клип-пат с большим размером, смещенный по вертикали. При прокрутке анимируйте его

.content {
  clip-path: ellipse(220% 200% at 50% 300%);
  animation: unclip both linear;
  animation-timeline: --article;
  animation-range: entry;
}

Вторая секция сочетает в себе открепление и одновременное уменьшение масштаба изображения

@ keyframes scale-down {
  0% { scale: 5; }
}
img {
  animation: scale-down;
  animation-timeline: --article; 
  animation-range: entry;
}

💡Совет по CSS💡

Вы можете создавать управляемые прокруткой микровзаимодействия с помощью animation-timeline и пользовательских свойств 🔥

.search {
  animation: shrink;
  animation-timeline: scroll();
  animation-range: 0 calc(var(--header-height) * 0.5);
}
@ keyframes shrink {
  to { width: calc(100% - var(--button-size); }
}

Параметр --header-height используется для определения высоты контейнера для заголовка. Вы можете использовать его для диапазона анимации, используемого в различных анимациях прокрутки.

Для другого примера, вы можете анимировать раскрытие бокс-тени на заголовке после того, как поиск завершился

header {
  animation: shadow;
  animation-timeline: scroll();
  animation-range:
    var(--header-height)
    calc(var(--header-height) * 1.5);
}
@ keyframes shadow {
  to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все работает с помощью анимации-таймлайна scroll(), которая подключается к прокрутке страницы. А затем с помощью параметра --header-height в разных диапазонах анимации

@javascriptv

🆕Bun 1.0.15🆕

Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:

▪️быстрый запуск
▪️высокая производительность
▪️самодостаточность

В Bun 1.0.15 осуществились такие нововведения:

- tsc запускается в 2 раза быстрее
- Стабильный клиент WebSocket
- Подсветка синтаксических ошибок
- Более чистые стеки
- expect.extend()
- TensorFlow.js

📌Читать далее

@javascriptv

🎉🎉🎉 JavaScript был создан за 10 дней, а объявлен миру 28 лет назад 🥳.

С днем рождения, JavaScript!

Пусть ты никогда не перестанешь удивлять нас 🥹.

Лайк за JavaScript🔥

@javascriptv

Shotcut WebTools — универсальные инструменты для веб разработчиков и не только

Этот полезный набор инструментов и утилит, предназначенных для упрощения вашей повседневной работы в Интернете, предлагает такие решения, как «Website Status Checker», «User Agent Finder» и т.д

Инструменты платформы позволяют упростить ряд задач, таких как проверка статуса веб-сайтов или определение user agent, что делает их незаменимыми помощниками в работе

Стоимость: #бесплатно

#web #утилиты

@javascriptv

🔥 8 красиво оформленных сайтов со световыми режимами для вашего следующего проекта:

→ http://wiza.co
→ http://cal.com
→ http://rows.com
→ http://clay.earth
→ http://alignui.com
→ http://flowbase.co
→ http://outverse.com
→ http://sequencehq.com

@javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— JSX: как разделять логику и отрисовку в разметке, сгенерированной методом map
— Topics API — как персонализированная реклама может работать без cookie
— Atomic CSS здорового человека
— Ваша емайл-рассылка нуждается в AMP-emails прямо сейчас
— Server-side rendering и практики работы с запросами
— По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps
— План «Барбаросса» от Vue.js
— «Hello world!» или путь к становлению специалистом. База JavaScript
— Как появились веб-пуши Apple в Тинькофф
— Talkvio — не капибара и не старый пикабу. Модуль серверной индексации для поисковиков для Nginx. Альтернатива Next.js
— The Case of Retro Bowl: A Study
— Code Smell 233 - Collections Count
— Challenge 1 Solution AdventJs 2023 by Midudev.
— Comparing Apples and Oranges: Rust and JavaScript in AOC 2023 Day 1
— Rust is SLOW actually? - AOC 2023 day 1 performance comparison
— Trebuchet?!
— Creating a Responsive Website Using HTML CSS and JavaScript
— Full Spectrum Mastery: Navigating Full Stack Software Engineering
— Recriando o method lodash pull() em vanilla JS
— Scope In JavaScript

Посмотреть:
🌐 Новые CSS анимации! (⏱ 11:38)
🌐 I Cannot Believe No One Knows This JavaScript String Feature (⏱ 00:52)
🌐 I Cannot Believe TypeScript Recommends You Do This! (⏱ 07:45)
🌐 Deepfake video при помощи Google Colab (⏱ 14:29)

Хорошего дня!

@javascriptv

🪄 Руководство по универсальному дизайну

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

https://universaldesignguide.com

@javascriptv

💻 Linear-style Cursor Glow - изящный эффект свечения при наведении. Реализованный с помощью SCSS и JavaScript.

https://codepen.io/davidkpiano/pen/gOoNZNe

@javascriptv

⭐️ Expanding Gallery View ( jus' flex it ) - красивая интерактивная галерея, выполненная с помощью Pug и чистого CSS, без использования JavaScript

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

@javascriptv

🆕Node v20.10.0🆕

22 ноября вышла новая версия node JS.

Вот несколько значительных изменений, которые были внесены:

▪️Флаг --experimental-default-type для изменения модульной системы по умолчанию в Node.js.
▪️Флаг --experimental-detect-module для автоматического определения синтаксиса ES модулей в "неоднозначных" JavaScript файлах.
▪️Добавлен параметр 'flush' в функции записи файлов fs.writeFile для принудительной записи данных на постоянное хранилище после успешной операции записи.
▪️Добавлен флаг --experimental-websocket, который добавляет глобальный объект WebSocket, стандартизированный WHATWG.
▪️Исправлена проблема с кэшированием компиляции V8 для vm.Script.

Это лишь малый список изменений и нововведений, подробнее вы можете изучить на официальном сайте:
📢NodeJS📢

@javascriptv

🖥 MatryoshBox (CSS) - полноценная анимированная сцена, сделанная с помощью SCSS без использования JavaScript

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

@javascriptv

⚡Уроки по JavaScript

1. DOM, События, Анимация, Библиотеки
2. Введение в JavaScript, Консоль разработчика
3. Строковый и логический тип данных
4. Шаблонные строки, Случайные числа, Округление чисел
5. Массивы на JavaScript
6. Объекты на JavaScript
7. Диалоговые окна, Условия if и switch
8. Циклы на JavaScript
9. Функции на JavaScript и решение задач
10. Дата и время на языке JavaScript

#video #js

https://www.youtube.com/watch?v=HU78HrKW9XI&list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5

@javascriptv

🎮 Interactive Super Mario - анимация Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры

https://codepen.io/merchedev/pen/BaYqyNx

@javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Latest Newsletter: Surrounded by Bears (Issue #141)
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— "Finanz Faible: Expert Finanzberater für umfassenden finanziellen Rat"
— Configuring Jest for Typescript Unit Tests
— "Pro Digital Era: Leading Advertising & Digital Marketing in Lahore, Pakistan"
— Gpen Demystified: Expert Insights from Dumpsarena
— 1. Explore basic types of typescript
— Phanatik — Multipage blog theme
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:

Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)

Хорошего дня!

#digest #js

@javascriptv