Если вам нужна простая библиотека для визуализации потоков на JavaScript, обратите внимание на Drawflow
В ней определена работа с узлами на панели редактора: перетаскивание, удаление, добавление связей между ними. Узлы также поддерживают множественные входы и выходы. Есть экспорт/импорт данных редактора и поддержка компонентов Vue и Nuxt.
Гитхаб проекта с подробными инструкциями и примерами: https://github.com/jerosoler/Drawflow
#javascript #инструменты
Original post link: t.me/tproger_web/4324
Forwarded and filtered by @smartfeed_bot
В ней определена работа с узлами на панели редактора: перетаскивание, удаление, добавление связей между ними. Узлы также поддерживают множественные входы и выходы. Есть экспорт/импорт данных редактора и поддержка компонентов Vue и Nuxt.
Гитхаб проекта с подробными инструкциями и примерами: https://github.com/jerosoler/Drawflow
#javascript #инструменты
Original post link: t.me/tproger_web/4324
Forwarded and filtered by @smartfeed_bot
Вопросы с собеседований: объясните, как this работает в JavaScript
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
#основы #собеседование #javascript
Original post link: t.me/tproger_web/4327
Forwarded and filtered by @smartfeed_bot
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
#основы #собеседование #javascript
Original post link: t.me/tproger_web/4327
Forwarded and filtered by @smartfeed_bot
Scattering hexagons — анимация рассеивающихся шестиугольников. Реализована с помощью CSS и JavaScript.
Исходники открытые, можно изучить или что-то подсмотреть: https://codepen.io/K-T/pen/OJLxzVq
#css #javascript #codepen
Original post link: t.me/tproger_web/4360
Forwarded and filtered by @smartfeed_bot
Исходники открытые, можно изучить или что-то подсмотреть: https://codepen.io/K-T/pen/OJLxzVq
#css #javascript #codepen
Original post link: t.me/tproger_web/4360
Forwarded and filtered by @smartfeed_bot
Какими знаниями должен обладать JavaScript-разработчик в 2024 году?
Выяснили у опытных разработчиков на JavaScript, что должны учить начинающие программисты в 2024 году, чтобы быть востребованными специалистами: https://tproger.ru/articles/znaniya--kotorymi-dolzhen-obladat-javasript-razrabotchik-v-2024-godu--eto---baza
#javascript #начинающим
Original post link: t.me/tproger_web/4381
Forwarded and filtered by @smartfeed_bot
Выяснили у опытных разработчиков на JavaScript, что должны учить начинающие программисты в 2024 году, чтобы быть востребованными специалистами: https://tproger.ru/articles/znaniya--kotorymi-dolzhen-obladat-javasript-razrabotchik-v-2024-godu--eto---baza
#javascript #начинающим
Original post link: t.me/tproger_web/4381
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Состоялся релиз Tempo — библиотеки для работы с датами в JavaScript и TypeScript
Разработчики фреймворка FormKit для создания форм на Vue опубликовали код библиотеки Tempo, предназначенной для работы с датой и временем в JavaScript и TypeScript. Команда проекта акцентировала внимание на простоте использования и минимальном размере.
При создании разработчики вдохновлялись moment.js, day.js и date-fns, но начали проект с нуля, чтобы итоговая библиотека отвечала всем требованиям команды. В коде Tempo используются возможности Intl.DateTimeFormat для извлечения сложных типов данных, к которым относятся форматы дат и смещения часовых поясов:
Библиотека реализована на языке TypeScript. Установить Tempo можно с помощью пакетных менеджеров pnpm, npm, yarn и bun, а у проекта на гитхабе уже больше 1,2 тыс. звёзд: https://github.com/formkit/tempo
#инструменты #javascript #typescript
Разработчики фреймворка FormKit для создания форм на Vue опубликовали код библиотеки Tempo, предназначенной для работы с датой и временем в JavaScript и TypeScript. Команда проекта акцентировала внимание на простоте использования и минимальном размере.
При создании разработчики вдохновлялись moment.js, day.js и date-fns, но начали проект с нуля, чтобы итоговая библиотека отвечала всем требованиям команды. В коде Tempo используются возможности Intl.DateTimeFormat для извлечения сложных типов данных, к которым относятся форматы дат и смещения часовых поясов:
import { format, parse } from "@formkit/tempo"const readable = format(new Date(), "full")// понедельник, 19 февр. 2024 г.parse(readable, "full")// Date: 2024-02-18T21:00:00.000ZБиблиотека реализована на языке TypeScript. Установить Tempo можно с помощью пакетных менеджеров pnpm, npm, yarn и bun, а у проекта на гитхабе уже больше 1,2 тыс. звёзд: https://github.com/formkit/tempo
#инструменты #javascript #typescript
Что лучше: Map или Object?
Объекты в JavaScript способны на всё. Нет, серьёзно, это просто всемогущая сущность с точки зрения языка. Но даже если объект может всё, это не значит, что его нужно использовать повсеместно.
Например, если вы собираетесь хранить пары ключ-значения, то для этого лучше использовать map и вот почему: https://www.builder.io/blog/maps
@tproger_web #javascript
Original post link: t.me/tproger_web/4413
Forwarded and filtered by @smartfeed_bot
Объекты в JavaScript способны на всё. Нет, серьёзно, это просто всемогущая сущность с точки зрения языка. Но даже если объект может всё, это не значит, что его нужно использовать повсеместно.
Например, если вы собираетесь хранить пары ключ-значения, то для этого лучше использовать map и вот почему: https://www.builder.io/blog/maps
@tproger_web #javascript
Original post link: t.me/tproger_web/4413
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Состоялся релиз Puter — браузерной среды рабочего стола
Разработчики выпустили браузерную среду рабочего стола Puter, которую можно использовать для создания своих веб-проектов.
Puter представляет собой усовершенствованную и быструю среду рабочего стола, которая запускается в браузере. Решение можно кастомизировать под свои задачи.
Puter написан на JavaScript и jQuery. Разработчики не использовали фреймворки, чтобы полностью контролировать стек и избежать появления сложных абстракций. jQuery выбрали из-за того, что Puter взаимодействует напрямую с DOM, а jQuery предоставляет «элегантное, но мощное API для этих задач».
Разработчики развернули демоверсию Puter: https://puter.com/
В ней есть файловый менеджер, терминал, блокнот, графический редактор, камера, диктофон и даже VS Code. Окна можно перемещать по рабочему столу, изменить их размер, сворачивать и открывать на полный экран.
Код проекта есть на GitHub: https://github.com/HeyPuter/puter
@tproger_web #javascript #инструменты
Разработчики выпустили браузерную среду рабочего стола Puter, которую можно использовать для создания своих веб-проектов.
Puter представляет собой усовершенствованную и быструю среду рабочего стола, которая запускается в браузере. Решение можно кастомизировать под свои задачи.
Puter написан на JavaScript и jQuery. Разработчики не использовали фреймворки, чтобы полностью контролировать стек и избежать появления сложных абстракций. jQuery выбрали из-за того, что Puter взаимодействует напрямую с DOM, а jQuery предоставляет «элегантное, но мощное API для этих задач».
Разработчики развернули демоверсию Puter: https://puter.com/
В ней есть файловый менеджер, терминал, блокнот, графический редактор, камера, диктофон и даже VS Code. Окна можно перемещать по рабочему столу, изменить их размер, сворачивать и открывать на полный экран.
Код проекта есть на GitHub: https://github.com/HeyPuter/puter
@tproger_web #javascript #инструменты
Forwarded from Веб-страница
Состоялся релиз WinterJS — самой быстрой среды выполнения JavaScript
Разработчики Wasmer представили среду выполнения JavaScript-кода WinterJS 1.0. Проект поддерживает компоненты React Server и работу с Cloudflare API.
WinterJS анонсировали в октябре 2023 года, а уже сейчас проект поддерживает обработку базовых HTTP-запросов и цикл событий JavaScript. Среду выполнения можно полностью скомпилировать в WebAssembly, что делает её первой поддерживающей полную совместимость с Wasmer Edge. Код WinterJS написан на JavaScript и Rust.
Из приятных особенностей WinterJS:
— обработка 150 тыс. запросов в секунду, что делает среду выполнения самой быстрой из доступных.
— совместимость с Cloudflare API;
— поддержка веб-фреймворков Next.js, Hono, Astro, SvelteKit, компонентов React Server, Nuxt, Gatsby и Remix.run.
Код среды выполнения WinterJS открыт и опубликован на GitHub: https://github.com/wasmerio/winterjs
@tproger_web #javascript
Разработчики Wasmer представили среду выполнения JavaScript-кода WinterJS 1.0. Проект поддерживает компоненты React Server и работу с Cloudflare API.
WinterJS анонсировали в октябре 2023 года, а уже сейчас проект поддерживает обработку базовых HTTP-запросов и цикл событий JavaScript. Среду выполнения можно полностью скомпилировать в WebAssembly, что делает её первой поддерживающей полную совместимость с Wasmer Edge. Код WinterJS написан на JavaScript и Rust.
Из приятных особенностей WinterJS:
— обработка 150 тыс. запросов в секунду, что делает среду выполнения самой быстрой из доступных.
— совместимость с Cloudflare API;
— поддержка веб-фреймворков Next.js, Hono, Astro, SvelteKit, компонентов React Server, Nuxt, Gatsby и Remix.run.
Код среды выполнения WinterJS открыт и опубликован на GitHub: https://github.com/wasmerio/winterjs
@tproger_web #javascript
Насколько потолстел JavaScript к 2024 году?
Интересная статистика по популярным сайтам и их отношению к оптимизации JS-бандлов: https://habr.com/ru/companies/ruvds/articles/796595/
@tproger_web #javascript
Original post link: t.me/tproger_web/4467
Forwarded and filtered by @smartfeed_bot
Интересная статистика по популярным сайтам и их отношению к оптимизации JS-бандлов: https://habr.com/ru/companies/ruvds/articles/796595/
@tproger_web #javascript
Original post link: t.me/tproger_web/4467
Forwarded and filtered by @smartfeed_bot
Создаём портфолио в формате 2D-игры на JavaScript
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
Original post link: t.me/tproger_web/4482
Forwarded and filtered by @smartfeed_bot
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
Original post link: t.me/tproger_web/4482
Forwarded and filtered by @smartfeed_bot
Полезная библиотека для понимания работы JS
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
@tproger_web #javascript #инструменты
Original post link: t.me/tproger_web/4495
Forwarded and filtered by @smartfeed_bot
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
@tproger_web #javascript #инструменты
Original post link: t.me/tproger_web/4495
Forwarded and filtered by @smartfeed_bot
Какие JS-библиотеки использовать для анимаций на сайте?
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Собрали и попробовали самые актуальные библиотеки для разработки анимации, такие как Anime.js, Popmotion, Vivus.js, Mo.js и другие.
Делимся обзором на лучшие из них с вами: https://tproger.ru/articles/kakie-js-biblioteki-ispolzovat-dlya-animacij-na-sajte-v-2024-godu
#javascript
Original post link: t.me/tproger_web/4587
Forwarded and filtered by @smartfeed_bot
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Собрали и попробовали самые актуальные библиотеки для разработки анимации, такие как Anime.js, Popmotion, Vivus.js, Mo.js и другие.
Делимся обзором на лучшие из них с вами: https://tproger.ru/articles/kakie-js-biblioteki-ispolzovat-dlya-animacij-na-sajte-v-2024-godu
#javascript
Original post link: t.me/tproger_web/4587
Forwarded and filtered by @smartfeed_bot
Все ещё пишете сложные, непроизводительные и «жирные» сайты? Тогда HTMX идёт к вам!
HTMX — библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. И вот небольшое демо, как она работает: https://htmx.org/examples/click-to-edit/#demo
Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода. HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA.
В статье рассказали про Карсона Гросса, создателя HTMX, и про HTMX — красивую альтернативу клиентскому рендерингу на JavaScript: https://habr.com/ru/companies/ruvds/articles/814193/
#javascript
Original post link: t.me/tproger_web/4588
Forwarded and filtered by @smartfeed_bot
HTMX — библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. И вот небольшое демо, как она работает: https://htmx.org/examples/click-to-edit/#demo
Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода. HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA.
В статье рассказали про Карсона Гросса, создателя HTMX, и про HTMX — красивую альтернативу клиентскому рендерингу на JavaScript: https://habr.com/ru/companies/ruvds/articles/814193/
#javascript
Original post link: t.me/tproger_web/4588
Forwarded and filtered by @smartfeed_bot
Web API, которые функционально приближают веб-приложения к нативным
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
Лучшие способы вызова API на JavaScript
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
