javascriptv | Unsorted

Telegram-канал javascriptv - Javascript

18174

По всем вопросам - @workakkk @itchannels_telegram -🔥лучшие ИТ-каналы @ai_machinelearning_big_data - машинное обучение @JavaScript_testit- js тесты @pythonl - 🐍 @ArtificialIntelligencedl - AI @datascienceiot - ml 📚 РКН: № 5153160945

Subscribe to a channel

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

Читать полностью…

Javascript

⚡️ UI Vs UX

@javascriptv

Читать полностью…

Javascript

🔥 Morph Three.js Particles ( Christmas🎄)

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

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

@javascriptv

Читать полностью…

Javascript

💡Совет по 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

Читать полностью…

Javascript

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

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

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

Лайк за JavaScript🔥

@javascriptv

Читать полностью…

Javascript

🔥 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

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

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

https://universaldesignguide.com

@javascriptv

Читать полностью…

Javascript

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

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

@javascriptv

Читать полностью…

Javascript

🆕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

Читать полностью…

Javascript

🌐 Переместитесь в будущее IT с YaC/e 2023!

Онлайн-конференция от Яндекса YaC/e 2023 уже доступна к просмотру, и это настоящая кладезь знаний для разработчиков и профессионалов в IT!

🔍 Что вас на ней ждет?

🌐 свежие тренды в веб-технологиях
🌐 инсайды из опыта разработчиков Яндекс, соосновательницы AI-компании прямиком из Китая и тех, кто посвятил IT всю жизнь
🌐 новые данные о влиянии ИИ и машинного обучения на веб-разработку

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

Читать полностью…

Javascript

erid: LjN8KCh5e

🚀 SolarHack 2023 приглашает технических специалистов на онлайн-хакатон. Вас ждет 2 кейса, 500 000 рублей и возможность создать инновационное решение будущего на онлайн-хакатоне от «Солар».

Над какими задачами предстоит работать:
1. Разработка системы, которая автоматизирует подготовку отчетности
2. Определение стороннего DNS-трафика и выявление его источника в ОС Linux

Для кого: участвовать можно индивидуально или в команде до 5 человек
• разработчики на Vue.js, Go (Golang), C++, C
• эксперты по информационной безопасности
• аналитики
• инженеры
• архитекторы ПО
• QA-специалисты

Когда: 8-17 декабря, онлайн

Что дает SolarHack 2023:
• Решите реальные задачи из кибербеза, добавите кейсы в резюме
• Знакомство со звездами сферы ИБ
• Поборитесь за 500 000 рублей
• Получите шанс работать в крупной компании 

👉 Регистрация до 7 декабря: https://cnrlink.com/slrhck23

Реклама. ООО "РТК ИБ". ИНН 7704356648.

Читать полностью…

Javascript

🔥 Дайджест полезных материалов из мира 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

Читать полностью…

Javascript

🖥 Сразу две кнопки - изящно анимированные кнопки с интересным интерактивом. Сделано на CSS и JavaScript.

https://codepen.io/Juxtopposed/pen/abQLxmj

@javascriptv

Читать полностью…

Javascript

Card Hover Interaction - красивые карточки с всплывающей информацией при наведении. Реализованы с помощью CSS.

https://codepen.io/dev_loop/pen/PoqLGvV

@javascriptv

Читать полностью…

Javascript

Изучайте Javascript бесплатно!

❒ Полный курс JavaScript 2023 — от новичка до профессионала / машинный перевод яндекса
https://www.youtube.com/watch?v=JEgp6AHZu9A&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz

❒ JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика
https://www.youtube.com/watch?v=maPRR_jjyOE&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz

Полный курс ❒ JavaScript за 4 часа.
http://youtu.be/ZYhGSfSfzeI

❒ Изучите JavaScript за 8 часов.
http://youtu.be/hNYzV87wocY

❒ Курс Code academy JavaScript.
http://youtu.be/_ixUdG1FFtM

❒ Полный курс JavaScript для начинающих.
http://youtu.be/EfAl9bwzVZk

❒ JavaScript Dom Crash Course.
http://youtu.be/0ik6X4DJKCc

❒ JavaScript Oops Crash Course.
http://youtu.be/vDJpGenyHaA

❒ Продвинутые учебники JavaScript.
http://youtu.be/IljVmcDDrOg

❒ JavaScript All in One Tutorials.
http://youtu.be/9M4XKi25I2M

❒ Основы JavaScript 11 часов.
http://youtu.be/2Ji-clqUYnA

@javascriptv

Читать полностью…

Javascript

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

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

@javascriptv

Читать полностью…

Javascript

🧮Первые шаги в 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

Читать полностью…

Javascript

💡Совет 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;
}

Читать полностью…

Javascript

🆕Bun 1.0.15🆕

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

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

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

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

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

@javascriptv

Читать полностью…

Javascript

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

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

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

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

#web #утилиты

@javascriptv

Читать полностью…

Javascript

🔥 Дайджест полезных материалов из мира 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

Читать полностью…

Javascript

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен.

С 6 по 12 декабря проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.

За эти 7 дней обучения ты:

1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.

👉 Проскочить на интенсив бесплатно

Читать полностью…

Javascript

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

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

@javascriptv

Читать полностью…

Javascript

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

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

@javascriptv

Читать полностью…

Javascript

Уроки по 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&amp;list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5

@javascriptv

Читать полностью…

Javascript

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

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

@javascriptv

Читать полностью…

Javascript

Компиляция TypeScript в нативный код

Static Hermes (shermes), следующая итерация JavaScript-движка hermes, добавляет поддержку компиляции TypeScript/flow в нативный код. Хотя shermes еще не выпущен, код доступен в репозитории на GitHub.

В этой статье я скомпилирую простую программу на языке TypeScript в код на языке C.

Компиляция shermes
На момент написания статьи для static hermes невозможно получить собранные двоичные файлы. Для компиляции из исходника на macos выполните следующие действия.

Получите исходник из репозитория GitHub и переключитесь на ветку static_h.

mkdir hermes_workspace
cd hermes_workspace
git clone git@github.com:facebook/hermes.git
cd hermes
git checkout static_h
cd ..


Убедитесь, что у вас есть указанные здесь зависимости для сборки. Затем в папке hermes_workspace выполните приведенные ниже команды для сборки. Обратите внимание, что эти команды выполняют сборку hermes в режиме отладки, который работает медленнее. Инструкции по сборке в режиме релиза приведены в конце статьи.

cmake -S hermes -B build -G Ninja
cmake --build ./build


Теперь в каталоге hermes_workspace/build/bin должен находиться двоичный файл shermes.

Компиляция файла TypeScript в C

📌 Читать

Читать полностью…

Javascript

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

Почитать:
Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
Путешествие JavaScript-кода через движок V8
Использование Content-Security-Policy вместе с React & Emotion
Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
Что такое деление по модулю в JavaScript?
Почему я не буду использовать Next.js
Redux-toolkit и переиспользование кода
Разработка браузерных игр с использованием Phaser3, React, Typescript
Два frontend фреймворка. Два подхода
Как не программист, вероятно, написал самую быструю библиотеку в мире
Navigating the Web with is.browser and is.not_browser in JavaScript: Your Go-To Tools for Browser Checks
Phấn Phủ Canmake
[Discussion] What's the new big thing in web dev in the past 2 years?
Delving into open source territory with Google: An Investigation
Delving into open source territory with Google: PR #3
Delving into open source territory with Google: PR #2
Delving into open source territory with Google: PR #1
Creating Chess Board SVGs, PNGs, and GIFs
The 2000 line framework challenge: How to split state when using global stores with no extra dependencies beyond Modulo.js
VueJS part 11: Sending data from component to parent

Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)

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

@javascript

Читать полностью…

Javascript

🖥 Button pushed inside style — изящная анимация иконок при наведении курсора. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/Juxtopposed/pen/jOKqXMJ

@javascriptv

Читать полностью…

Javascript

🖥 Дизайн - это непросто.

Вот мои любимые места в Интернете для вдохновения при работе над дизайном:

http://curated.design → каталог
http://land-book.com → веб-сайты
http://refero.design → исследования в области дизайна
http://mobbin.com → мобильные и веб-приложения
http://saaslandingpage.com → целевые страницы saas

@javascriptv

Читать полностью…
Subscribe to a channel