Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

248,05
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Варианты создания интерактивной экскурсии для пользователей

Время на прочтение6 мин
Охват и читатели5.5K

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

Читать далее

Как проводить сквозное (end-to-end) тестирование вашего приложения используя Cypress.io

Время на прочтение10 мин
Охват и читатели29K

В этой статье вы узнаете:

Что такое Cypress и когда его стоит использовать.

Основы тестирования с использованием Cypress.

Расширенные команды Cypress.

Взаимодействие с элементами пользовательского интерфейса.

Лучшие практики с использованием Cypress.

Читать далее

JavaScript-классы — это не просто «синтаксический сахар»

Время на прочтение6 мин
Охват и читатели31K
После того, как я прочитал очередную статью, где говорится о том, что JS-классы — это всего лишь «синтаксический сахар» для прототипного наследования, я решил написать материал, призванный (в который раз!) прояснить вопрос о том, почему данное утверждение неверно. Тут я, надеюсь, смогу объяснить разницу между JS-классами и прототипным наследованием, и смогу рассказать о том, почему важно понимать эту разницу.


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

Продвинутые дженерики в TypeScript. Доклад Яндекса

Время на прочтение14 мин
Охват и читатели20K
Дженерики, или параметризованные типы, позволяют писать более гибкие функции и интерфейсы. Чтобы зайти дальше, чем параметризация одним типом, нужно понять лишь несколько общих принципов составления дженериков — и TypeScript раскроется перед вами, как шкатулка с секретом. AlexandrNikolaichev объяснил, как не бояться вкладывать дженерики друг в друга и использовать автоматический вывод типов в ваших проектах.

— Всем привет, меня зовут Александр Николаичев. Я работаю в Yandex.Cloud фронтенд-разработчиком, занимаюсь внутренней инфраструктурой Яндекса. Сегодня расскажу об очень полезной вещи, без которой сложно представить современное приложение, особенно большого масштаба.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)

Время на прочтение3 мин
Охват и читатели9K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Кастомный виджет Яндекс.Переводчик для сайтов

Время на прочтение6 мин
Охват и читатели21K

Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика...

Читать далее

5 React-хуков, которые пригодятся в любом проекте

Время на прочтение7 мин
Охват и читатели31K
Хочу рассказать о пяти простых React-хуках, которые пригодятся в любом проекте. Причём, полезность этих хуков не зависит от того, в каком именно приложении их будут использовать. Описывая каждый из них, я рассказываю о его реализации и привожу пример его использования в клиентском коде.


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

Оплата в телеграм боте — Платежи 2.0 — Сбербанк + Telegraf + Node.js

Время на прочтение5 мин
Охват и читатели124K

Платежи 2.0 — В мессенджере Telegram появилась возможность принимать платежи в любом чате, включая группы и каналы. Подключить свой магазин к платформе можно самостоятельно, без согласования с Telegram.



И в этом туториале мы создадим простого бота с Node.js на фреймворке Telegraf.js, который сможет принимать деньги с клиента и отправлять их на ваш счет через Сбербанк.

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

Человеко-читаемый JavaScript: история о двух экспертах

Время на прочтение7 мин
Охват и читатели8.1K


Каждый хочет быть экспертом. Но что это хотя бы означает? За годы работы мне встречалось два типа людей, именуемых «экспертами». Эксперт первого типа – это человек, который не только знает в языке каждый винтик, но и непременно все эти винтики использует, независимо от того, приносит ли это пользу. Эксперт второго типа также знает каждую синтаксическую тонкость, но разборчивее подходит к выбору инструмента для решения задачи, учитывая ряд факторов, как связанных, так и не связанных с кодом.

Давайте угадаю, эксперта какого типа вы хотели бы видеть в своей команде. Второго, верно? Это такой разработчик, который стремится выдавать удобочитаемый код, такие строки JavaScript, которые будут понятны другим специалистам, и которые легко будет поддерживать. Но характеристика «удобочитаемый» редко является определяющей – на самом деле, она обычно заключена в глазах смотрящего. Итак, к чему нас это приводит? К чему нужно стремиться, если наша цель – удобочитаемый код? Есть ли в данном случае явно верный или неверный выбор? Зависит от многого.

Очевидный выбор


Чтобы облегчить труд разработчика, TC39 в последние годы добавил множество новых возможностей в ECMAScript, в том числе, многие проверенные паттерны, заимствованные из других языков. Одним из таких нововведений, появившихся в ES2019, является метод Array.prototype.flat(). Он принимает аргумент глубины или Infinity и выравнивает массив. При отсутствии аргументов глубина массива по умолчанию равна 1.
Читать дальше →

Только 39% функций в node_modules уникальны в дефолтном Angular проекте

Время на прочтение22 мин
Охват и читатели3.8K

39% — это количество уникальных функций в папке node_modules в дефолтном Angular проекте, созданном командой ng new my-app.


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


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

Content Indexing API: страницы, доступные в offline. Доклад с RamblerFront #9

Время на прочтение8 мин
Охват и читатели4.7K

Здравствуйте, меня зовут Антонина, я работаю frontend-разработчиком в Rambler&Co, в команде Lenta.ru.

Content Indexing API — новый инструмент от Google, показывающий, какие страницы доступны в offline-режиме. Я расскажу, как работает Content Indexing API, когда его следует использовать и как его внедряла наша команда.

Читать далее

Как выдать Золушку за принца и не сойти с ума. Паттерн Декоратор

Время на прочтение6 мин
Охват и читатели7.5K

Всем привет, я Максим Кравец из Holyweb, и мы продолжаем разговор о паттернах (первую статью о Singleton можно почитать вот тут). Героя нашего сегодняшнего сюжета порой называют «wrapper» или «обертка», поскольку он оборачивает исходный код, но мне больше нравится название «декоратор» — оно точнее отражает не механику, а суть происходящего.

Читать далее

Обзор Prisma ORM: как забыть об SQL и сосредоточиться на данных

Время на прочтение14 мин
Охват и читатели28K


Это статья-обзор о Prisma ORM.

ORM (англ. Object-Relational Mapping — «объектно-реляционное отображение или преобразование») — технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных».

Работа с базами данных (моделирование данных, изменение схем, формирование запросов и т.п.) — одна из наиболее сложных задач, возникающих при разработке приложений. Prisma предлагает решение, позволяющее сосредоточиться на данных вместо SQL.

Что такое Prisma?


Как утверждают разработчики, Prisma представляет собой «открытую ORM нового поколения для Node.js и TypeScript», реализующую «новую парадигму объектно-реляционного отображения».

Поддерживаемые языки программирования:

  • JavaScript
  • TypeScript
  • Go (в разработке)
Читать дальше →

Ближайшие события

Yarn 2 — Устанавливаем и разбираемся

Время на прочтение3 мин
Охват и читатели97K

Yarn 2 (Berry) — это новый выпуск революционного и хорошо зарекомендовавшего себя менеджера пакетов Yarn!

Что такое Plug’n’Play? Куда потерялись node_modules? Как автоматически добавлять @types?

Поздороваться с Yarn

AEM Test Automation — Create Pages via HTTP Requests

Время на прочтение7 мин
Охват и читатели2.2K

"Автоматизированное тестирование AEM" или "Создание AEM страниц с помощью http запросов".

Чаще всего АЕМ тестируют с помощью моков или на страницах, взятых с продакшена.

А что если создавать AEM страницы на лету, не через UI? Создали пару страниц, пошли проверили функциональность, создали новые — проверили для новой конфигурации.

Читать далее

Библиотека next-persist: преодоление разрыва между серверным рендерингом и постоянным хранением данных на клиенте

Время на прочтение9 мин
Охват и читатели6.2K
Статья, перевод которой мы публикуем сегодня, посвящена next-persist — компактному и нетребовательному к ресурсам NPM-пакету. Цель его создания — упрощение обработки и реконсиляции данных, на постоянной основе хранящихся на клиенте и не имеющих критического значения. При этом данный пакет задуман так, чтобы его применение не ухудшило бы полезных возможностей Next.js по серверному рендерингу и генерированию статических сайтов.

Прежде чем мы поговорим о месте next-persist в экосистеме современной веб-разработки, нам нужно коснуться Next.js — передового фреймворка, созданного Vercel, позволяющего без особых сложностей создавать и развёртывать приложения, которые, при этом, отличаются высокой скоростью загрузки.



Next.js произвёл революцию в осмыслении того, как именно веб-содержимое доставляется пользователям. Произошло это за счёт объединения всего лучшего из сфер серверного и клиентского рендеринга с технологиями генерирования статических сайтов. Кроме того, применение Next.js до крайности упрощает доведение веб-проектов до рабочего состояния. Это происходит за счёт автоматизации конфигурирования вспомогательного ПО, вроде webpack и babel, и благодаря использованию CI/CD Vercel.

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

Оптимизируем производительность: JavaScript (V8) vs AssemblyScript (WebAssembly)

Время на прочтение16 мин
Охват и читатели8.1K


Чтобы повысить производительность web-приложений, используйте WebAssembly в связке с AssemblyScript, чтобы переписать критически важные для производительности компоненты web-приложения, написанные на JavaScript. «И это действительно поможет?», — спросите вы.

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

В данной статье мы проанализируем эти условия, предложим ряд решений и проверим их на нескольких тестовых примерах кода.

Кто я такой и почему занимаюсь этой темой? 


(Данный раздел можете пропустить, это несущественно для понимания дальнейшего материала).

Мне по-настоящему нравится язык AssemblyScript. Я даже в какой-то момент начал помогать разработчикам финансово. У них небольшая команда, в которой каждый серьёзно увлечён этим проектом. AssemblyScript — очень молодой язык, похожий на TypeScript и способный компилироваться в WebAssembly (Wasm). Именно в этом и заключается одно из его преимуществ. Раньше, чтобы использовать Wasm, web-разработчик должен был учить чуждые ему языки типа С, C++, C#, Go или Rust, так как в WebAssembly изначально могли компилироваться именно такие высокоуровневые языки со статической типизацией. 

Хотя AssemblyScript (ASC) и похож на TypeScript (TS), он не связан с этим языком и не  компилируется в JS. Схожесть в синтаксисе и семантике нужна, чтобы облегчить процесс «портирования» с TS на ASC. Такое портирование в основном сводится к добавлению аннотаций типов.
Читать дальше →

VueUse — обязательная библиотека для Vue 3

Время на прочтение6 мин
Охват и читатели16K

Для тех, кто незнаком с этой библиотекой, советую попробовать, так она может де-факто стать стандартом для использования в проектах на Vue 3, как, например, в свое время была библиотека lodash для почти любых проектов на js.

Остальные наверное уже успели заценить весь обширный функционал, который она предоставляет. Некоторые уже использовали ее на Vue 2, но далеко не все новые функции поддерживают старую версию. Арсенал библиотеки впечатляет, тут и простые утилиты вроде клика вне элемента, и различные интеграции с Firebase, Axios, Cookies, QR, локальным хранилищем, браузером, RxJS, анимации, геолокации, расширения для стандартных Vue-хуков, медиа-плеер и многое другое. Среди спонсоров отмечен сам Эван Ю, что как бы намекает. Библиотека регулярно получает обновления, баги закрываются, а сообщество растет. В общем у нее есть все для успеха.

Update: Исправлен баг очистки предыдущей истории изменений.
Update 2: Добавлен более актуальной код примеров.

Читать далее

Полезные JavaScript-библиотеки

Время на прочтение6 мин
Охват и читатели42K
Не стоит недооценивать силу простоты. Пожалуй, сложно представить себе, что на чистом JavaScript реализовано что-то вроде системы push-уведомлений, работающей в реальном времени, или инструмент для работы с базами данных, или полноценный текстовой редактор. Но подобные проекты существуют и позволяют решать множество актуальных задач. В этом материале речь пойдёт о нескольких весьма полезных библиотеках, которые подключаются к страницам в виде обычных JavaScript-файлов. При рассказе о каждой из них я постараюсь выделять их особенности и приводить примеры их использования.


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

Как готовить микрофронтенды в Webpack 5

Время на прочтение9 мин
Охват и читатели22K

Всем привет, меня зовут Иван и я фронтенд-разработчик из компании DexSys.

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

Начнём с того, что ребята с Хабра (@artemu78, @dfuse, @Katsuba) уже писали про Module Federation, так что, моя статья - это не что-то уникальное и прорывное. Скорее, это шишки, костыли и велосипеды, которые полезно знать тем, кто собирается использовать данную технологию.

Читать далее