Менеджмент зависимостей в JavaScript — управляем хаосом
Любой JavaScript-проект начинается с желания использовать как можно меньше npm-пакетов в разработке. Но рано или поздно пакеты начинают скапливаться, строк в package.json становится всё больше, а пул-реквесты приобретают все более устрашающий вид.
В статье разбираемся в принципах работы этой магии, чтобы сделать установку более эффективной и не создавать проблем коллегам: https://tprg.ru/fqpu
#javascript
Любой JavaScript-проект начинается с желания использовать как можно меньше npm-пакетов в разработке. Но рано или поздно пакеты начинают скапливаться, строк в package.json становится всё больше, а пул-реквесты приобретают все более устрашающий вид.
В статье разбираемся в принципах работы этой магии, чтобы сделать установку более эффективной и не создавать проблем коллегам: https://tprg.ru/fqpu
#javascript
Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объём кода?
Есть такая библиотека htmx. Она позволяет создавать сложные веб-приложения на HTML и выступает как альтернатива клиентскому рендерингу на Javascript. htmx помогает переиспользовать элементы на сервере, сократить объём кода на Javascript и отказаться от сборки.
Страница проекта
Небольшой вводный гайд по работе с htmx
#инструменты #css #javascript #html #веб
Есть такая библиотека htmx. Она позволяет создавать сложные веб-приложения на HTML и выступает как альтернатива клиентскому рендерингу на Javascript. htmx помогает переиспользовать элементы на сервере, сократить объём кода на Javascript и отказаться от сборки.
Страница проекта
Небольшой вводный гайд по работе с htmx
#инструменты #css #javascript #html #веб
Тестирование UI в JavaScript: лучшие практики
Представьте, что вы сделали крутой компонент для сайта. Будет ли он выполнять свою роль и не положит ли весь проект? Эти моменты лучше проверить заранее — для этого нужны тесты.
В этом руководстве вы найдёте лучшие практики тестирования UI на JavaScript: от разработки через поведение (BDD)и соглашений об именовании до того, какие именно операции браузер должен выполнять во время тестов.
#qa #фронтенд #javascript
Представьте, что вы сделали крутой компонент для сайта. Будет ли он выполнять свою роль и не положит ли весь проект? Эти моменты лучше проверить заранее — для этого нужны тесты.
В этом руководстве вы найдёте лучшие практики тестирования UI на JavaScript: от разработки через поведение (BDD)и соглашений об именовании до того, какие именно операции браузер должен выполнять во время тестов.
#qa #фронтенд #javascript
Обзор Vue 3.3. Что изменилось и при чём тут TypeScript?
Команда Vue сообщила о выпуске версии 3.3 — «Rurouni Kenshin». В новой версии разработчики постарались улучшить опыт разработки. К примеру, было улучшено взаимодействие с SFC <script setup> на TypeScript. Также были решены многие давние проблемы с использованием Vue и TypeScript.
Рассказываем подробнее про эти и другие изменения новой версии фреймворка
#javascript #веб
Команда Vue сообщила о выпуске версии 3.3 — «Rurouni Kenshin». В новой версии разработчики постарались улучшить опыт разработки. К примеру, было улучшено взаимодействие с SFC <script setup> на TypeScript. Также были решены многие давние проблемы с использованием Vue и TypeScript.
Рассказываем подробнее про эти и другие изменения новой версии фреймворка
#javascript #веб
Изучаем все алгоритмы и структуры данных на JavaScript
В этом репозитории содержатся все базовые JavaScript-примеры многих популярных алгоритмов и структур данных.
У репозитория больше 170 тысяч звёзд, а для каждого из них есть свой файл README с пояснениями, ресурсами и видео, где их можно изучить глубже.
#javascript #веб
В этом репозитории содержатся все базовые JavaScript-примеры многих популярных алгоритмов и структур данных.
У репозитория больше 170 тысяч звёзд, а для каждого из них есть свой файл README с пояснениями, ресурсами и видео, где их можно изучить глубже.
#javascript #веб
Что новенького в ECMAScript?
ECMAScript — это стандарт JavaScript (и некоторых других языков), который устанавливает правила, синтаксис и другие критерии создания кода. Его ежегодно дополняет сообщество разработчиков.
Если не до конца понимаете суть ECMAScript, у нас есть целая статья, где подробно рассказали, что это за зверь.
Самые последние обновления ECMAScript включают в себя новые функции и методы, которые помогают разработчикам писать более гибкий и мощный код.
И вот, какие функции были добавлены в ECMAScript в 2023 году
#javascript #веб
ECMAScript — это стандарт JavaScript (и некоторых других языков), который устанавливает правила, синтаксис и другие критерии создания кода. Его ежегодно дополняет сообщество разработчиков.
Если не до конца понимаете суть ECMAScript, у нас есть целая статья, где подробно рассказали, что это за зверь.
Самые последние обновления ECMAScript включают в себя новые функции и методы, которые помогают разработчикам писать более гибкий и мощный код.
И вот, какие функции были добавлены в ECMAScript в 2023 году
#javascript #веб
Готовимся к собеседованию на фронтенд-разработчика: подборка лучших ресурсов
— Разбор 30 самых популярных вопросов с собеседованиий.
— Серия роликов, в которых разбираются вопросы с собеседований на должность Junior- или Middle-разработчика. Эдакая шпаргалка, которая поможет подтянуть знания и зарыть пробелы. Всего 28 видео в среднем по 15 минут.
— Вопросы по HTML и смежным темам с ответами. Оригинальный репозиторий на гитхабе с 35k+ звёзд и перевод на русский.
— Репозиторий с 43k+ звезд, который отлично подойдёт для проверки знаний по JavaScript и подготовки к собеседованию. В нём собрано огромное количество тестовых вопросов по JS с вариантами ответов и подробными объяснениями.
#фронтенд #собеседование #javascript #html #веб
— Разбор 30 самых популярных вопросов с собеседованиий.
— Серия роликов, в которых разбираются вопросы с собеседований на должность Junior- или Middle-разработчика. Эдакая шпаргалка, которая поможет подтянуть знания и зарыть пробелы. Всего 28 видео в среднем по 15 минут.
— Вопросы по HTML и смежным темам с ответами. Оригинальный репозиторий на гитхабе с 35k+ звёзд и перевод на русский.
— Репозиторий с 43k+ звезд, который отлично подойдёт для проверки знаний по JavaScript и подготовки к собеседованию. В нём собрано огромное количество тестовых вопросов по JS с вариантами ответов и подробными объяснениями.
#фронтенд #собеседование #javascript #html #веб
Нашли для вас 5 сборщиков модулей приложений для Node.js
Они позволяют вам эффективно управлять зависимостями и упростят развертывание ваших приложений: https://tproger.ru/articles/5-razlichnyh-instrumentov-dlya-obedineniya-prilozhenij-node-js/
#javascript #web
Они позволяют вам эффективно управлять зависимостями и упростят развертывание ваших приложений: https://tproger.ru/articles/5-razlichnyh-instrumentov-dlya-obedineniya-prilozhenij-node-js/
#javascript #web
Код, написанный на JavaScript, обрабатывается движком. Но как именно это происходит «под капотом» и какие процессы в этом задействованы?
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
Возможности JavaScript и TypeScript, о которых многие не знают
Принесли вам годную статью, которую вы могли пропустить.
В ней рассматриваются почти все изменения и новые фичи в JavaScript и TypeScript за последние 3 года. Не все из них будут актуальны именно для вашего проекта, но знать про их существование полезно.
#javascript #веб
Принесли вам годную статью, которую вы могли пропустить.
В ней рассматриваются почти все изменения и новые фичи в JavaScript и TypeScript за последние 3 года. Не все из них будут актуальны именно для вашего проекта, но знать про их существование полезно.
#javascript #веб
JavaScript localStorage: полное руководство
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage
#javascript #веб
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage
#javascript #веб
Реально ли сделать движок для игры от первого лица за 265 строк Javascript?
В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.
Вот демка
Вот статья
#gamedev #история #javascript #веб
В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.
Вот демка
Вот статья
#gamedev #история #javascript #веб
Асинхронность в JS: как выполнять долгие сетевые запросы и не блокировать основной поток
В статье простым языком и с примерами кода объяснили, как в синхронном JavaScript вынести операции за рамки единого потока, чтобы не блокировать действие кода после тяжёлых операций: https://habr.com/ru/articles/748660/
#javascript #асинхронность
В статье простым языком и с примерами кода объяснили, как в синхронном JavaScript вынести операции за рамки единого потока, чтобы не блокировать действие кода после тяжёлых операций: https://habr.com/ru/articles/748660/
#javascript #асинхронность
Изучение Vue.js в 2023 году: дорожная карта разработчика
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра и маршрутизатор, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов.
А дорожная карта для поможет выбрать, что и зачем учить в 2023 году: https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/
#javascript #веб
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра и маршрутизатор, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов.
А дорожная карта для поможет выбрать, что и зачем учить в 2023 году: https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/
#javascript #веб
11 проектов на JavaScript, которые иллюстрируют паттерны проектирования
Принятие правильных решений во время написания кода для веб-приложений — задача не всегда простая. Справиться с премудростями программирования позволяют шаблоны проектирования — готовые решения для сложных задач.
В статье разобрали 11 паттернов проектирования в JavaScript. Разбор поверхностный, но самое ценное — примеры реализации из реальных проектов: https://nuancesprog.ru/p/15565/
#javascript #паттерны
Принятие правильных решений во время написания кода для веб-приложений — задача не всегда простая. Справиться с премудростями программирования позволяют шаблоны проектирования — готовые решения для сложных задач.
В статье разобрали 11 паттернов проектирования в JavaScript. Разбор поверхностный, но самое ценное — примеры реализации из реальных проектов: https://nuancesprog.ru/p/15565/
#javascript #паттерны
За что ненавидят JavaScript?
Среди веб-разработчиков принято шутить над PHP и хоронить язык каждый год, а среди разработчиков в целом принято шутить над JavaScript.
Изучили споры между фанатами и хейтерами JavaScript и разобрались, чем JS заслужил нелюбовь кодеров и справедливы ли нападки: https://tproger.ru/articles/za-chto-nenavidyat-yazyk-programmirovaniya-javascript
#javascript
Среди веб-разработчиков принято шутить над PHP и хоронить язык каждый год, а среди разработчиков в целом принято шутить над JavaScript.
Изучили споры между фанатами и хейтерами JavaScript и разобрались, чем JS заслужил нелюбовь кодеров и справедливы ли нападки: https://tproger.ru/articles/za-chto-nenavidyat-yazyk-programmirovaniya-javascript
#javascript
Разработчики Node.js сообщили о выпуске версии 21
Что нового, вкратце:
— обновили JavaScript-движок V8 до 11.8,
— включили стабильные версии fetch и WebStreams,
— в конце октября Node.js 20 перейдёт в LTS,
— 21 версия будет поддерживаться следующие шесть месяцев.
Основные нововведения:
— fetch и WebStreams получили статус стабильных после недавнего обновления.
— Добавили экспериментальную имплементацию WebSocket, активируется флагом --experimental-websocket.
— Включили JavaScript-движок V8, который поддерживает новые функции и улучшенную производительность.
— Во время запуска тестов теперь можно использовать glob-выражения в параметрах --test.
— Новый экспериментальный флаг --experimental-default-type позволяет изменить систему модулей по умолчанию.
— Если передать флаг --experimental-wasm-modules, то файлы без расширений будут восприниматься как WebAssembly, если они начинаются на \0asm.
— Удалили поддержку globalPreload, вместо этого рекомендуется initialize для установки связи между потоками и register для отправки данных из потока приложения.
Подробнее о нововведениях: https://nodejs.org/en/blog/announcements/v21-release-announce
#javascript #веб #nodejs
Что нового, вкратце:
— обновили JavaScript-движок V8 до 11.8,
— включили стабильные версии fetch и WebStreams,
— в конце октября Node.js 20 перейдёт в LTS,
— 21 версия будет поддерживаться следующие шесть месяцев.
Основные нововведения:
— fetch и WebStreams получили статус стабильных после недавнего обновления.
— Добавили экспериментальную имплементацию WebSocket, активируется флагом --experimental-websocket.
— Включили JavaScript-движок V8, который поддерживает новые функции и улучшенную производительность.
— Во время запуска тестов теперь можно использовать glob-выражения в параметрах --test.
— Новый экспериментальный флаг --experimental-default-type позволяет изменить систему модулей по умолчанию.
— Если передать флаг --experimental-wasm-modules, то файлы без расширений будут восприниматься как WebAssembly, если они начинаются на \0asm.
— Удалили поддержку globalPreload, вместо этого рекомендуется initialize для установки связи между потоками и register для отправки данных из потока приложения.
Подробнее о нововведениях: https://nodejs.org/en/blog/announcements/v21-release-announce
#javascript #веб #nodejs
Как переписать библиотеку с JavaScript на Rust
Существуют ситуации, в которых библиотека с тысячами строк кода, не справляется с вычислениями, делая приложение медленным и неудобным для использования. В таких случаях можно прибегнуть к переводу вычислений на другой инструмент.
Именно так и поступил автор статьи и получил программу с производительностью, сравнимой с С++, а типизацией лучше, чем в Java. Тут он рассказал, как у него и его команды получилось ускорить программу в три раза, с какими трудностями они столкнулись во время перехода и какие решения использовали.
#javascript #react
Существуют ситуации, в которых библиотека с тысячами строк кода, не справляется с вычислениями, делая приложение медленным и неудобным для использования. В таких случаях можно прибегнуть к переводу вычислений на другой инструмент.
Именно так и поступил автор статьи и получил программу с производительностью, сравнимой с С++, а типизацией лучше, чем в Java. Тут он рассказал, как у него и его команды получилось ускорить программу в три раза, с какими трудностями они столкнулись во время перехода и какие решения использовали.
#javascript #react
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 Веб-страница
Полезная библиотека для понимания работы JS
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
@tproger_web #javascript #инструменты
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
@tproger_web #javascript #инструменты
