🖥 Факт дня — метод String.fromCharCode() в JS

⏩Статический метод String.fromCharCode() возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16.

Синтаксис

String.fromCharCode(num1[, ...[, numN]]

num1, ..., numN
— Последовательность чисел, являющихся значениями единиц кода UTF-16. Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится.

Метод String.fromCharCode() возвращает примитивную строку, а не объект String.

Поскольку метод fromCharCode() является статическим методом объекта String, вы всегда должны использовать его как String.fromCharCode(), а не как метод созданного вами экземпляра String.


⏩Пример использования метода fromCharCode().

String.fromCharCode(65, 66, 67);  // "ABC"

📎 Полная таблица UTF-16


⏩Как заставить его работать с большими значениями

Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод fromCharCode() может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со всеми допустимыми значениями Юникода (занимающими до 21 бита) одного метода fromCharCode() недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод String.fromCodePoint() (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы.

@javascriptv

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

🖥 3D Scrolling Gallery/Timeline - 3D-прокрутка, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/creativeocean/pen/gOvYEgq

@javascriptv

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

🖥 Выполнение JavaScript кода, хранящегося в строке: методы

▶️Итак, если коротко, то для того чтобы выполнить JavaScript-код, записанный в виде строки, можно воспользоваться функцией eval():

eval("alert('Выполнено!');"); 

В результате появится всплывающее окно с текстом "Выполнено!".

Но будьте осторожны: функция eval() может выполнить любой скрипт, который ей будет предоставлен.

Функция eval() обладает большими рисками для безопасности. Важно убедиться в том, что JavaScript-строка правильно обработана перед ее использованием в eval(), так как инъекции кода могут иметь серьезные последствия.


Альтернативы для запуска строк JavaScript

▶️Использование функции конструктора `Function`

let func = new Function("return 'Привет, мир!';");
func(); // Привет, мир!

Этот метод умеет обходить внешний контекст.

▶️Модуль `vm` в Node.js
В Node.js существует модуль vm, который предоставляет отдельный контекст для выполнения JavaScript-строк.

const vm = require('vm');
const script = new vm.Script("console.log('Привет из VM');");
script.runInThisContext(); // Привет из VM

▶️Безопасное выполнение с помощью `vm2` в Node.js
vm2 предоставляет ограниченное окружение для запуска ненадежного кода.

const { VM } = require('vm2');
const vm = new VM();
vm.run("console.log('Выполнение в песочнице');"); // Выполнение в песочнице

Не забудьте следить за обновлениями в части безопасности и обратите внимание на устаревшие API в vm2, чтобы избежать проблем.

▶️Запуск скриптов с помощью jQuery
Ни одна замена не сможет заменить добрые старые теги <script>, которые можно использовать для запуска JavaScript-строк с помощью jQuery.

let code = "$('body').append('<p>Привет от jQuery!</p>');";
$('<script>').attr('type', 'text/javascript').text(code).appendTo('body'); // Привет от jQuery!

@javascriptv

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

🖥 Релиз Restate 0.8

🌟 Состоялся релиз системы для создания отказоустойчивых рабочих процессов Restate 0.8. Код проекта опубликован на GitHub под лицензией Put Restate under Business Source License от Restate Software.

Согласно пояснению разработчиков проекта, Restate отлично подходит для создания:
⏩рабочих процессов типа Lambda как код (Lambda Workflows as Code)
⏩транзакционных обработчиков RPC
⏩обработки событий с помощью Kafka

В версии Restate 0.8 разработчики уделили большое внимание доработке API, учтя отзывы пользователей, чтобы уменьшить трудности при создании сервисов Restate. Также там добавлены комбинаторы промисов (Promise combinators), которые позволяют детерминированно комбинировать промисы. Например, если вы хотите дождаться вызова службы A или вызова службы B, то Restate позаботится о записи того, какой из промисов был выполнен первым, и в конечном итоге воспроизведёт этот выбор, когда это необходимо. В новой версии проекта доступны все комбинаторы стандартной библиотеки JavaScript.

Всё это звучит многообещающе, посмотрим)

🖥 GitHub

@javascriptv

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

SCSS Washing machine

Стиральная машинка на HTML и SCSS.

https://codepen.io/Arkellys/pen/YoYNve

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

🖥 Truthy и Falsy в JavaScript

В JavaScript, truthy – это всё, что в логическом контексте считается истиной. Если что-то не является явно ложным (например, 0 или пустая строка ""), то это truthy.

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

▶️Допустим, вы пишете веб-приложение на JavaScript, и хотите проверить, заполнил ли пользователь поле с именем, прежде чем отправить форму. Вот где в игру вступают понятия truthy и falsy.

В JavaScript, если строка не пустая, она считается truthy, а пустая строка — это falsy. Это значит, что вы можете использовать простую проверку, чтобы узнать, заполнено ли поле:

let userName = form.userName.value; // значение, введённое пользователем

if (userName) {
  // Если userName truthy 
  console.log("Спасибо за заполнение имени, " + userName + "!");
} else {
  // Если userName falsy 
  console.log("Пожалуйста, заполните поле с именем.");
}

Этот пример показывает, как использование понятий truthy и falsy может сделать ваш код более кратким и читаемым. Вместо того чтобы писать сложные условия для проверки, не является ли строка пустой, не равна ли она null или undefined, вы можете просто проверить, truthy ли значение переменной.

Примеры falsy значений включают:
🟡0 и -0
🟡"" (пустая строка)
🟡null
🟡undefined
🟡NaN

Всё остальное в JavaScript считается truthy, включая:
🟡"0" (строка, содержащая символ нуля)
🟡"false" (строка, содержащая текст false)
🟡Пустые объекты {} и массивы []

@javascriptv

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

VK — не только соцсеть, но еще и крутое IT-комьюнити. Сейчас они строят суперапп Почты Mail.ru и ищут коллегу, готового улучшать пользовательский опыт.

В команде VK вы будете:
— работать над умной организацией рассылок;
— решать проблемы нежелательной почты;
— создавать способы для отслеживания онлайн-заказов;
— поддерживать платежные системы и ещё много всего.

Ты тоже можешь стать частью команды VK и развивать технологичную, современную и безопасную среду. Оффер ждет тебя тут > https://vk.cc/cveMSm

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

💻 7 приложений и сайтов, которые облегчат работу UX/UI дизайнера

Никто не будет спорить, что Figma круто изменила работу для UX/UI дизайнера, делая все проще и объединяя все необходимое в одном месте. Однако даже со всеми потрясающими возможностями и плагинами в Figma существуют и другие приложения и сайты, которыми дизайнеры пользуются каждый день и которые Figma заменить не может. Каждое из них выполняет особую задачу, которая выходит за пределы возможностей Figma. Поэтому хочется поделиться 7 приложениями и сайтами, которые можно использовать вместе с Figma. Этот список покажет, что иногда для достижения лучших результатов нужно использовать несколько инструментов.

1. Mobbin

Для исследования: Lyssna, Maze

2. Lyssna

3. Maze

4. Сбор данных: Typeform

Визуализация и UI: Fonts in Use, Designstripe, Palettemaker

5. Fonts in Use

6. Designstripe

7. PaletteMaker

@javascriptv

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

Kippo Hover Card Effect

Эффект раскрытия карточек при наведении, реализованный с помощью CSS и JavaScript.

#css #js

https://codepen.io/Hyperplexed/pen/zYWdYoo

@javascriptv

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

💥 Представляем вам оболочку Bun Shell

Кроссплатформенный язык оболочки и интерпретатор для создания cкриптов с использованием JavaScript.

https://bun.sh/blog/the-bun-shell

@javascriptv

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

🖥 30-Days-Of-JavaScript

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

В курсе вы используете JavaScript для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр, и в настоящее время JavaScript можно использовать для машинного обучения и AI.

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

🖥 Инструкци

@javascriptv

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

🔖 Вот 3 инструмента, которые можно использовать для эффективного поиска конфиденциальной информации в JS-файлах:

1. Hakrawler.
Извлечение файлов JavaScript.
🔗 Ссылка : https://github.com/hakluke/hakrawler

2. LinkFinder
Поиск конечных точек в файлах JS.
🔗Link : https://github.com/GerbenJavado/LinkFinder

3. jsluice
Извлечение URL, путей, секретов и других интересных данных из исходного кода JavaScript.
🔗Link : https://github.com/BishopFox/jsluice

⚠️ Информация предоставлена исключительно с целью ознакомления. И побуждает обратить внимание на проблемы в безопасности.

@javascriptv

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

💻 Sparkly Stars - Анимация при наведении, сделанная с помощью Pug и библиотеки Babel.js

https://codepen.io/Alca/pen/XWgGbKm

@javascriptv

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

🖥 Build LLM Apps with LangChain.js

GitHub недавно сообщили, что JavaScript снова стал самым популярным языком программирования в мире. Чтобы поддержать веб-разработчиков, изучающих и разрабатывающих генеративный ИИ, deeplearning_ai только что запустили новый краткий курс по JavaScript.

В курсе Build LLM Apps with LangChain.js вы познакомитесь с элементами, характерными для разработки ИИ, включая:

(i) использование парсеров данных для получения данных из распространенных источников
(ii) промпты, которые используются для создания контекста LLM
(iii) Модули для поддержки RAG, такие как разделители текста и интеграция с векторными хранилищами
(iv) Работа с различными моделями для написания ИИ-приложений
(v) парсеры, которые извлекают и форматируют выходные данные для обработки последующим кодом.

Вы также будете работать с языком LangChain, который позволяет легко составлять последовательности (также называемые цепочками) модулей для выполнения сложных задач с помощью LLM.

Собрав все это воедино, вы поработаете над разговорным LLM-приложением для ответов на вопросы, способным использовать внешние данные в качестве контекста.

📌 Курс

@javascriptv

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

⚡️ "Page Replica" - это универсальный инструмент для скраппинга и кэширования веб-страниц, созданный на основе Node.js, Express и Puppeteer.

Он помогает пререндерить страницы веб-приложений (React, Angular, Vue,...), которые можно обслуживать через Nginx для SEO или других целей.

git clone https://github.com/html5-ninja/page-replica.git
cd page-replica

▪ Github

@javascriptv

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

🖥 Немного о замыканиях в Javascript

⏩Замыкание — это функция, которая имеет доступ к переменным, присутствующим в ее цепочке областей видимости, даже если внешняя функция перестает существовать.

Чтобы понять суть замыканий, мы сначала рассмотрим их характеристики:
— Даже если внешняя функция перестает существовать, замыкание по-прежнему имеет доступ к ее переменным.
— Замыкания не имеют доступа к параметру args своей внешней функции.

Давайте разберем подробнее первый пункт. Это основная функциональность любого замыкания. В этом сама суть замыканий и принцип работы.

Чтобы увидеть это в действии, мы выполним вот эту функцию buttonProps:

let buttonProps = (borderRadius) => {
  const createVariantButtonProps = (variant, color) => {
    const newProps = {
      borderRadius,
      variant,
      color
    };
    return newProps;
  }
  return createVariantButtonProps;
}

let primaryButton = buttonProps("1rem"); 

Вызов функции buttonProps вернет нам другую функцию, которая является нашим замыканием.

Теперь давайте выполним это замыкание:

const primaryButtonProps = primaryButton("primary", "red");

В результате выполнения замыкание возвращает следующий объект:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

⏩Итак, почему замыкания по-прежнему имеют доступ к переменным, которые определены вне их области видимости, даже если внешняя функция перестает существовать (например, borderRadius)?

⏩Ответ прост: замыкания не хранят статические значения. Вместо этого они хранят ссылки на переменные, находящиеся внутри цепочки областей видимости. Таким образом, даже если внешняя функция умирает, внутренняя функция, то есть замыкание, по-прежнему имеет доступ к родительским переменным.

📎 Читать подробнее

@javascriptv

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

🖥 Асинхронные итераторы в JavaScript

▶️Итак, кейс.
Мы работаем с Node.js, и нам нужно прочитать файл, строка за строкой. В Node есть API для такого типа функций, который называется readLine (полную документацию можно найти здесь).

Это API событий, которые вы можете прослушивать следующим образом:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./file.txt'),
  crlfDelay: Infinity
})

reader.on('line', (line) => console.log(line))

И допустим, у нас есть простой файл:

line 1
line 2
line 3

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


▶️Решение
В дополнение к API событий readline также предоставляет асинхронный итератор. Это означает, что вместо чтения строки через слушателей в событии line мы будем читать строку при помощи нового способа использования ключевого слова for.

Представим, что у нас есть интерфейс, который всегда возвращает промис, разрешенный для нашей строки рассматриваемого файла. Чтобы разрешить эти промисы по порядку, нам нужно сделать примерно следующее:

async function readLine (files) {
  for (const file of files) {
    const line = await readFile(file) // Imagine readFile is our cursor
    console.log(line)
  }
}

Однако благодаря асинхронным итерациям (например, readline) мы можем сделать так:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./xpto.txt'),
  crlfDelay: Infinity
})

async function read () {
  for await (const line of reader) {
    console.log(line)
  }
}

read()

Обратите внимание, что теперь мы используем новое определение for — for await (const x of y).

📎 Читать подробнее

@javascriptv

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

It's just CSS

Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript.

https://codepen.io/tiffachoo/pen/wvyXRzL

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

⚡️ Создание анимированной боковой панели с помощью HTML, CSS и JavaScript

Github

@javascriptv

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

🖥 JavaScript однопоточный или многопоточный? Ставим точку

Полезная статья для лучшего понимания JavaScript.
В ней описывается:
— внутреннее устройство host-среды
— расширяемость и встраиваемость
— асинхронность
— инструменты организации многопоточности
— и ещё много всего

📎 Статья
📎 Вот ещё годное видео в тему, доказательство мультипоточности JS

@javascriptv

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

🖥 Подборка из интересных 20 мини-проектов на чистом Javascript

Никаких фреймворков или библиотек, только JS, HTML5 и CSS

Среди проектов:
*️⃣форма для заполнения
*️⃣бронирование мест в кинотеатре
*️⃣видеоплеер
*️⃣карточки мемори
*️⃣конвертер между валютами
*️⃣счётчик до НГ

Самое то, чтобы прокачать понимание JS, отточить работу с событиями, потренировать разные техники
Just JS it 🔥

https://javascript-mini-projects.netlify.app/

@javascriptv

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

🚗Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

Вы когда-нибудь мечтали о беспилотном автомобиле?

Теперь это уже не причудливая фантазия. Представьте, что едете по дороге, не держа руки на руле, а строчки кода ведут вас по дороге. Звучит безумно, но еще безумнее то, что этот код заставляет автомобиль не только двигаться, но и уклоняться от препятствий. А если ситуация становится сложной, машина сама нажимает на тормоза.

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

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

Как проводник, JavaScript взаимодействует с электронным блоком управления (ЭБУ) автомобиля, отвечающим за приводную систему, рулевые механизмы и педали ускорения. С помощью тщательно продуманных алгоритмов он преобразует абстрактные инструкции в реальное движение, позволяя автомобилю автономно перемещаться по дороге. По сути, JavaScript наделяет автомобиль интеллектом для принятия решений в доли секунды, превращая строки кода в динамичное управление автомобилем.

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

@javascriptv

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

🖥JavaScript нужен не везде!

Возможно, вы думаете: "везде, где я использую JS - это единственный верный вариант". Возможно, это и так, но полезно знать, что и разработчики браузеров, и авторы спецификаций переносят на CSS и HTML многие функции, для которых еще несколько лет назад требовался JS. Именно об этом и пойдет речь в этой статье.

https://www.htmhell.dev/adventcalendar/2023/2/

#html #css #javascript

@javascriptv

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

Закрутилось завертелось и все готово

@javascriptv

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

🔥Подборка лучших обучающих каналов для программистов.

➡️Делитесь с коллегами и Сохраняйте себе, чтобы не потерять

🔥 DevOPs
Devops для программистов
Книги Devops

🌟 Docker/Kubernets
Docker
Kubernets

🏆 Golang
Golang - подробные гайды, разбор кода, лучшие практики, заметки
Golang собеседование
Golang вакансии
Golang книги
Golang задачи и тесты
Golang чат
Golang news - новости go

#️⃣C#

С# академия
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа

⚡Машинное обучение

Machine Learning - полезные статьи новости гайды и разбор кода
Ml Собеседование - подготовка к собеседовению мл, алгоритмам, кодингу
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат

🚀 Data Science

Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data

🐍 Python

Python/django
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги

☕ Java

Java академия
Java вакансии
Java чат
Java вопросы с собеседований
Java книги

💻 C++

C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии

💥 Хакинг Kali Linux

Kali linux
linux_kal - kali чат
Информационная безопасность

🐧 Linux

Linux academy

🦀 Rust
Rust программирование
Rust чат

🛢Базы данных
Sql базы данных
Библиотека баз данных
SQL чат

📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки

🖥 Javascript/React/PHP
Javascript академия
React программирование
PHP
Книги frontend
Задачи frontend

🇬🇧 Английский для программистов

🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence

😂 IT мемы

📓 Книги
Библиотеки Книг для программситов

💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#

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

☑ Вышел Angular 17.1

https://github.com/angular/angular/releases/tag/17.1.0

@javascriptv

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

🖥 Loading — красивая загрузка в виде анимированного шара. Реализована с помощью CSS и JavaScript

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

https://codepen.io/ma77os/pen/JjMRmLP

@javascriptv

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

⚡️ Metrognome - Гном-метроном, реализованный с помощью CSS и библиотеки GSAP.js.

https://codepen.io/hexagoncircle/pen/JjOaabp

@react_tg

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

✨Волшебство веб-разработки: создаем цифровую страну чудес

Вы тот, кто только начинает погружаться в огромный и захватывающий мир веб-разработки? Мечтаете создать собственную цифровую площадку, где идеи воплощаются в жизнь и пользователи по всему миру могут взаимодействовать с вашими творениями? Отправимся вместе в это увлекательное приключение.

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

Компоненты веб-разработки
1. HTML (Hypertext Markup Language, язык гипертекстовой разметки)
Это фундамент цифрового дома. Он структурирует контент веб-страницы, определяя, что является заголовком, абзацем, изображением или ссылкой.

Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple introduction to web development.</p>
<img src="hello.jpg" alt="Greetings Image">
<a href="https://example.com">Explore More</a>
</body>
</html>

2. CSS (Cascading Style Sheets, каскадные таблицы стилей)
Это краски и декор для дома. CSS стилизует HTML-элементы, придает веб-странице визуально привлекательный вид.

Пример:
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
text-align: center;
}

h1 {
color: #333;
}

p {
color: #666;
}

img {
width: 300px;
border-radius: 10px;
}

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

Пример:
function greetUser() {
alert("Hello, dear visitor! Welcome to our webpage.");
}

Инструменты веб-разработки
🔵Редакторы кода. Для написания и организации кода используются такие редакторы, как Visual Studio Code, Sublime Text и Atom.
🔵Браузеры. Chrome, Firefox, Safari — это испытательные полигоны разработчика, отображающие код. Вы часто будете переключаться между ними для обеспечения совместимости.
🔵Система контроля версий (Git). Git помогает отслеживать изменения в коде и упрощает совместную работу и управление проектом.

Начало работы над первой веб-страницей
1. Создание папки. Создайте папку для проекта. Это похоже на подготовку строительной площадки.
2. Написание HTML. Откройте редактор кода и создайте HTML-файл. Добавьте в него основную структуру страницы.
3. Добавление CSS. Задействуйте для страницы стили, используя CSS. Экспериментируйте с цветами, шрифтами и макетами.
4. Внесение JavaScript (опционально). Если вам нужна интерактивность, добавьте в проект JavaScript.
5. Предварительный просмотр в браузере. Откройте HTML-файл в браузере, чтобы увидеть свое творение.

Веб-разработка — это цифровое творчество. Погружаясь в него, помните: каждая веб-страница — это холст, который ожидает творческого прикосновения. Углубляйтесь в код, экспериментируйте и дайте волю воображению.

@javascriptv

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

❄️ Snow — анимация падающего снега, реализованная на CSS.

https://codepen.io/alphardex/pen/dyPorwJ

#анимация #css

@javascript

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