​​Какими знаниями должен обладать 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

​​Состоялся релиз 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

​​Состоялся релиз 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

​​Насколько потолстел 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

​Создаём портфолио в формате 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

​​Полезная библиотека для понимания работы 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

​​Какие 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

​Все ещё пишете сложные, непроизводительные и «жирные» сайты? Тогда 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

​​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

​​​Лучшие способы вызова 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. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:

https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af

#javascript #алгоритмы


Original post link: t.me/tproger_web/4732
Forwarded and filtered by @smartfeed_bot

Меняем JS-библиотеку анимации на View Transitions

Теперь не нужно подтягивать тяжелые JavaScript библиотеки для анимаций в ваш проект. В Chrome и Safari появилась поддержка View Transitions API. Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS.

Как это работает вы можете увидеть здесь.

#фронтенд #css #javascript


Original post link: t.me/tproger_web/5326
Forwarded and filtered by @smartfeed_bot

Стрелочные и обычные функции в JavaScript: в чём разница?

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

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

Обычные функции пишутся с использованием ключевого слова function, а стрелочные — с помощью более компактного синтаксиса =>.

//Обычная функция
function greet(name) {
  return "Привет, " + name;
}

//Стрелочная функция
const greet = (name) => "Привет, " + name;

This. Одно из главных различий — как функции работают с контекстом this.

— В обычной функции this зависит от того, как её вызвали.
— В стрелочной функции this берётся из внешнего окружения и не меняется.
Это важно, когда вы работаете с объектами или обработчиками событий.

Аргументы. Обычные функции имеют встроенный объект arguments для доступа ко всем переданным параметрам, а стрелочные — нет (но можно использовать ...args).

Конструкторы. Обычную функцию можно использовать с new для создания объектов, стрелочную — нельзя.

Генераторы. Обычные функции поддерживают синтаксис function* для генераторов, стрелочные — нет.

Чтобы понять разницу работы с this на практике, рассмотрим пример с объектом:

const person = {
  name: "Алекс",
  sayHello: function() {
    console.log("Привет, я " + this.name);
  },
  sayHelloArrow: () => {
    console.log("Привет, я " + this.name);
  }
};

person.sayHello();       // Привет, я Алекс
person.sayHelloArrow();  // Привет, я undefined

— В методе sayHello (обычная функция) this указывает на объект person, и мы получаем доступ к свойству name.

— В методе sayHelloArrow (стрелочная функция) this берётся из внешнего контекста (например, window), где name не определён, поэтому результат — undefined.
Этот пример показывает, почему выбор типа функции важен в зависимости от задачи.

Стрелочные функции отлично подходят для коротких коллбэков (например, в map или setTimeout) и случаев, когда не нужен собственный`this`.

Обычные функции нужно использовать в методах объектов, где важен динамический this, или когда нужны конструкторы и объект arguments.

Стрелочные и обычные функции в JavaScript — это инструменты с разными сильными сторонами. Понимание их различий поможет вам выбрать правильный подход для каждой ситуации.

#простымисловами #javascript

Освойте Promises в JavaScript: пошаговое руководство

Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (pending, fulfilled, rejected) и использовать методы .then(), .catch() и .finally() для управления результатами асинхронных операций. Примеры кода и наглядные схемы помогут закрепить материал и применять его на практике.

#фронтенд #javascript #асинхронность


Original post link: t.me/tproger_web/5473
Forwarded and filtered by @smartfeed_bot

Без сборщика: подключаем JS-библиотеку напрямую

Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить Webpack или Vite. Здесь разбираются три вида файлов, которые обычно лежат в npm-дистрибутиве: модули ES, «классические» глобальные переменные и CommonJS, способы находить нужный вариант в dist, писать компактный import map и подключать сложные модули даже без Node.

В довесок — чек-лист инструментов (esm.sh, download-esm, JSPM) и подсказки, как определить тип файла за пару секунд.

#фронтенд #javascript


Original post link: t.me/tproger_web/5495
Forwarded and filtered by @smartfeed_bot

Что такое примеси (mixins) в JS

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

Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».

Как это выглядит в коде:

// 1. Описываем примесь как обычный объект с методами
const canLog = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
};

// 2. Функция-помощник, которая «подмешивает» методы
function applyMixin(targetClass, mixin) {
  Object.assign(targetClass.prototype, mixin);
}

// 3. Используем
class User {
  constructor(name) { this.name = name; }
}

applyMixin(User, canLog);

const u = new User('Анна');
u.log('Привет!'); // [Анна] Привет!

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

Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:

const TimestampMixin = (Base) => class extends Base {
  get createdAt() {
    if (!this._createdAt) this._createdAt = Date.now();
    return this._createdAt;
  }
};

class Article {}
class Comment {}

class ArticleWithTime extends TimestampMixin(Article) {}
class CommentWithTime extends TimestampMixin(Comment) {}

Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.

Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.

#простымисловами #javascript #основы

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react


Original post link: t.me/tproger_web/5503
Forwarded and filtered by @smartfeed_bot

«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»

Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.

Пишешь fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.

Библиотека safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.

#библиотека #javascript


Original post link: t.me/tproger_web/5776
Forwarded and filtered by @smartfeed_bot