This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/merchedev/pen/BaYqyNx
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥4❤2
⚡Уроки по 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
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
👍17❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/amit_sheen/pen/WNEOPQa
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤2🔥2😱2
🆕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
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
👍17❤3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
⭐️ Expanding Gallery View ( jus' flex it ) - красивая интерактивная галерея, выполненная с помощью Pug и чистого CSS, без использования JavaScript
https://codepen.io/jh3y/pen/QWQVOZV
@javascriptv
https://codepen.io/jh3y/pen/QWQVOZV
@javascriptv
❤9👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/davidkpiano/pen/gOoNZNe
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥5👏4❤2🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
🪄 Руководство по универсальному дизайну
Коллекция методов, которые помогут вам разрабатывать инновационные продукты. Все методы сопровождаются пошаговым руководством по их использованию в процессе проектирования и видеоуроками с практическими рекомендациями.
https://universaldesignguide.com
@javascriptv
Коллекция методов, которые помогут вам разрабатывать инновационные продукты. Все методы сопровождаются пошаговым руководством по их использованию в процессе проектирования и видеоуроками с практическими рекомендациями.
https://universaldesignguide.com
@javascriptv
👍11🔥3
🔥 Дайджест полезных материалов из мира 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
Почитать:
— 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
👍7❤3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 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
→ 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
🔥8❤4👍4
Shotcut WebTools — универсальные инструменты для веб разработчиков и не только
Этот полезный набор инструментов и утилит, предназначенных для упрощения вашей повседневной работы в Интернете, предлагает такие решения, как «Website Status Checker», «User Agent Finder» и т.д
Инструменты платформы позволяют упростить ряд задач, таких как проверка статуса веб-сайтов или определение user agent, что делает их незаменимыми помощниками в работе
Стоимость: #бесплатно
#web #утилиты
@javascriptv
Этот полезный набор инструментов и утилит, предназначенных для упрощения вашей повседневной работы в Интернете, предлагает такие решения, как «Website Status Checker», «User Agent Finder» и т.д
Инструменты платформы позволяют упростить ряд задач, таких как проверка статуса веб-сайтов или определение user agent, что делает их незаменимыми помощниками в работе
Стоимость: #бесплатно
#web #утилиты
@javascriptv
🎉5👍4❤3
This media is not supported in your browser
VIEW IN TELEGRAM
С днем рождения, JavaScript!
Пусть ты никогда не перестанешь удивлять нас
Лайк за JavaScript🔥
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉92👍27🔥17🤔5❤2👎2🤩1
🆕Bun 1.0.15🆕
Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:
▪️быстрый запуск
▪️высокая производительность
▪️самодостаточность
В Bun 1.0.15 осуществились такие нововведения:
- tsc запускается в 2 раза быстрее
- Стабильный клиент WebSocket
- Подсветка синтаксических ошибок
- Более чистые стеки
- expect.extend()
- TensorFlow.js
📌Читать далее
@javascriptv
Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:
▪️быстрый запуск
▪️высокая производительность
▪️самодостаточность
В Bun 1.0.15 осуществились такие нововведения:
- tsc запускается в 2 раза быстрее
- Стабильный клиент WebSocket
- Подсветка синтаксических ошибок
- Более чистые стеки
- expect.extend()
- TensorFlow.js
📌Читать далее
@javascriptv
👍13
This media is not supported in your browser
VIEW IN TELEGRAM
💡Совет по CSS💡
Вы можете создавать управляемые прокруткой микровзаимодействия с помощью animation-timeline и пользовательских свойств 🔥
Параметр --header-height используется для определения высоты контейнера для заголовка. Вы можете использовать его для диапазона анимации, используемого в различных анимациях прокрутки.
Для другого примера, вы можете анимировать раскрытие бокс-тени на заголовке после того, как поиск завершился
Все работает с помощью анимации-таймлайна scroll(), которая подключается к прокрутке страницы. А затем с помощью параметра --header-height в разных диапазонах анимации
@javascriptv
Вы можете создавать управляемые прокруткой микровзаимодействия с помощью 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
👍32🔥11❤2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
💡Совет CSS и JS💡
Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через 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;
}👍21❤8🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Morph Three.js Particles ( Christmas🎄)
Бесплатный шаблон для создания крутых проектов для портфолио для креативных разработчиков.
Live - https://christmas.misterprada.com
Код - https://github.com/MisterPrada/morph-particles
@javascriptv
Бесплатный шаблон для создания крутых проектов для портфолио для креативных разработчиков.
Live - https://christmas.misterprada.com
Код - https://github.com/MisterPrada/morph-particles
@javascriptv
👍19🔥5😁4❤3
🧮Первые шаги в JavaScript: создание калькулятора
JavaScript — это динамически типизированный скриптовый язык высокого уровня, известный прежде всего как язык веб-разработки. Он позволяет разработчикам добавлять динамическое поведение на сайты, делая их более интерактивными и отзывчивыми. JavaScript может манипулировать HTML и CSS, обрабатывать пользовательский ввод, а также взаимодействовать с веб-серверами для получения и обновления данных.
Настройка среды разработки
Чтобы начать работу с JavaScript, не нужна специальная среда разработки. Понадобится лишь веб-браузер и текстовый редактор.
В данном случае будем использовать простую HTML-страницу для демонстрации возможностей JavaScript.
Вот базовая HTML-структура для калькулятора:
Написание JavaScript-кода: сложение двух чисел
Теперь приступим к добавлению JavaScript-кода на HTML-страницу. JavaScript-код можно разместить в HTML-документе между тегами <script>. Будем создавать функции для обработки пользовательского ввода и выполнения вычислений. Вот простой пример функции JavaScript, которая складывает два числа:
📌 Читать
@javascriptv
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
👍13❤3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/timhilton/pen/ZEVzRgG
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥3
Forwarded from Machinelearning
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
Please open Telegram to view this post
VIEW IN TELEGRAM
The GitHub Blog
Octoverse: The state of open source and rise of AI in 2023
In this year’s Octoverse report, we study how open source activity around AI, the cloud, and Git are changing the developer experience.
🎉10🔥7👍5❤1
🔥 Топ бесплатных курсов Frontend разработчика.
👉 2024. Бесплатные курсы, книги и ресурсы
👉 Лучшие бесплатные курсы React 2024
👉 Видео
@javascriptv
👉 2024. Бесплатные курсы, книги и ресурсы
👉 Лучшие бесплатные курсы React 2024
👉 Видео
@javascriptv
👍19❤3🔥2