Обновить
512K+

JavaScript *

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

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

Почему пора перестать использовать JavaScript IIFE

Время на прочтение3 мин
Охват и читатели54K
Немедленно вызываемая функция (Immediately Invoked Function Expression — IIFE) в JavaScript — это конструкция, позволяющая вызывать функцию непосредственно после ее определения.

image

В этой статье мы разберемся, почему стоит отказаться от использования IIFE, несмотря на ее былые заслуги.
Читать дальше →

Intersection Observer API: примеры использования

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


Доброго времени суток, друзья!

Обзор


Intersection Observer API (IOA) позволяет приложению асинхронно наблюдать за пересечением элемента (target) с его родителем (root) или областью просмотра (viewport). Другими словами, этот API обеспечивает вызов определенной функции каждый раз при пересечении целевого элемента с root или viewport.

Примеры использования:

  • «ленивая» или отложенная загрузка изображений
  • бесконечная прокрутка страницы
  • получение информации о видимости рекламы для целей расчета стоимости показов
  • запуск процесса или анимации, находящихся в поле зрения пользователя

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

Property-based тестирование для JavaScript и UI: необычный подход к автоматизированным тестам

Время на прочтение11 мин
Охват и читатели9.8K
Elon Musk's Tesla Roadster
Falcon Heavy Demo Mission

Писать тесты скучно. А то, что скучно делать, постоянно откладывается. Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions, и в этой статье покажу вам другой, немного странный подход к автоматизированному тестированию.
Читать дальше →

Введение в 3D: основы Three.js

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

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.


Использование возможностей TypeScript в JavaScript без написания TypeScript-кода

Время на прочтение5 мин
Охват и читатели14K
Я — большой любитель TypeScript. По возможности я стараюсь использовать этот язык в своих проектах. TypeScript даёт разработчику отчёты об ошибках и проверку типов в JavaScript и TypeScript-коде. Кроме того, тот, кто пишет на TypeScript, может пользоваться удобными возможностями по автозавершению кода, может, быстро и надёжно, выполнять рефакторинг. TypeScript — это первая линия обороны от ошибок в коде. Ещё одна сильная сторона этого языка заключается в том, что он позволяет, при написании программ, пользоваться самыми свежими возможностями JavaScript. При этом то, что получается при преобразовании TypeScript-кода в JavaScript, будет поддерживаться всеми браузерами. Это очень приятно.



Правда, не все фронтенд-проекты предусматривают применение TypeScript. Что если можно было бы пользоваться возможностями TypeScript, но при этом не переводить на него весь проект (и всю команду), и не добавлять в конвейер сборки проекта новый инструмент? Это возможно благодаря VS Code и JSDoc.
Читать дальше →

CSS Houdini: практическое руководство

Время на прочтение13 мин
Охват и читатели22K
Доброго времени суток, друзья!

Что такое Houdini?


Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

  • Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
  • Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
  • Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

  • API типизированной объектной модели (Typed Object Model)
  • API пользовательских свойств и значений (Custom Properties & Values)
  • API метрик шрифта (Font Metrics)
  • Ворклеты (Worklets)
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №408 (23 — 29 марта 2020)

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

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

Quartet 9: Allegro | Производительность

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

Когда создавалась библиотека для валидации данных quartet были поставленны следующие цели-ориентиры:



В этой статье я хотел бы рассмотреть производительность quartet и её причины.


Статья на тему Краткости и простоты будет 4 апреля.


Будем исследовать этот аспект в сравнении между quartet и другой намного более популярной ajv.

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

ReactJS: быстрый старт

Время на прочтение7 мин
Охват и читатели8.4K
Совсем скоро стартует курс «React.js разработчик», поэтому в стенах OTUS состоялся очередной открытый урок. На нем рассмотрели следующие вопросы:

  • что входит в стандартный набор возможностей React.js;
  • можно ли с помощью этого построить сложное приложение;
  • композиция против наследования;
  • функциональное программирование — это легко или сложно?
  • что такое Redux, и зачем он нужен.



В конце урока разработали небольшое веб-приложение на ReactJS. Вебинар провел Никита Овчинников, инженер-программист с более чем 8-летним опытом коммерческой разработки.
Читать дальше →

Знай своего врага: создаём Node.js-бэкдор

Время на прочтение7 мин
Охват и читатели24K
Бэкдор в собственном коде, который может незаметно взаимодействовать с операционной системой, это один из самых страшных кошмаров любого разработчика. В настоящий момент в npm имеется более 1.2 миллиона общедоступных пакетов. За последние три года зависимости проектов превратились в идеальную цель для киберпреступников. Экосистема npm может оказаться на удивление хрупкой в том случае, если сообщество разработчиков не обратит пристальное внимание на безопасность. В качестве доказательств этой мысли достаточно вспомнить о тайпсквоттинге и об инциденте с npm-пакетом event-stream.



Автор статьи, перевод которой мы сегодня публикуем, хочет, в образовательных целях, рассказать о том, как создавать бэкдоры для платформы Node.js.
Читать дальше →

Обзор видеоплееров для веба

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

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



Я подумал, что кому-то ещё это могло бы оказаться полезным и решил оформить в виде статьи на Хабр.

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

Знание и состояние

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

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.


Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.


Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?


Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.


Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

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

Все дороги ведут в Fullstack

Время на прочтение4 мин
Охват и читатели7.1K
Встретились как-то три разработчика на перепутье JavaScript фреймворков. Смотрят — валун лежит, а на нем указатели: налево — React.js, направо — Node.js, прямо пойдешь — Fullstack JS станешь. Начали разработчики спорить, какой путь выбрать, и у каждого своя правда была… Сегодня вы услышите сказ о трех разных курсах по JavaScript и, быть может, узнаете себя в одном из наших героев.




Первого разработчика звали Илья. Был он опытным фронтендером, но хотел и не только на фронте, но и дома быть полезным, чтоб с простыми задачами самому справляться — там серверок настроить, тут API прикрутить. Второй, Добрыня, был профи в бэкенде — что угодно мог построить-собрать! Команда души в нем не чаяла, но нет-нет, да хотелось ему какого-нибудь подвига заметного, осязаемого: хоть кнопку какую сделать или форму интерактивную людям в пользование. Третий, Алеша, только недавно начал свой путь в разработке, но сразу загорелся стать мастером на все руки: чтоб, как говорится, и в фронт, и в бэк, и в добрые юзеры.
Читать дальше →

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

Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer

Время на прочтение5 мин
Охват и читатели61K
TypeScript позволяет автоматизировать множество задач, которые, без использования этого языка, разработчикам приходится решать самостоятельно. Но, работая с TypeScript, нет необходимости постоянно использовать аннотации типов. Дело в том, что компилятор выполняет большую работу по выводу типов, основываясь на контексте выполнения кода. Статья, перевод которой мы сегодня публикуем, посвящена достаточно сложным случаям вывода типов, в которых используется ключевое слово infer и конструкция as const.


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

Как уменьшить количество и увеличить читаемость кода в react-redux, redux-saga

Время на прочтение5 мин
Охват и читатели11K
В этой статье я хотел бы поделиться своим опытом использования связки react-redux и redux-saga, а точнее, какой «велосипед» я использую, для уменьшения количества однотипного кода и упрощению его восприятия.
Читать дальше →

3D своими руками. Часть 1: пиксели и линии

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


Этот цикл статей я хочу посвятить читателям, желающим изучить мир 3D-программирования с нуля, людям, которые хотят узнать основы создания 3D-составляющей игр и приложений. Каждую операцию мы будем реализовывать с чистого листа, чтобы понимать каждый аспект, даже если есть уже готовая функция, которая делает это быстрее. Научившись, мы будем переходить на встроенные инструменты по работе с 3D. По прочтению цикла статей вы поймете как создаются сложные трехмерные сцены со светом, тенями, текстурами и эффектами, как все это сделать без глубоких познаний в математике и многое другое. Сможете все это делать как самостоятельно, так и при помощи готовых инструментов.
Начать обучение

Методы борьбы с legacy-кодом на примере GitLab

Время на прочтение14 мин
Охват и читатели12K
Можно бесконечно холиварить о том, является ли GitLab хорошим продуктом. Лучше посмотреть на цифры: по итогам раунда инвестирования оценка GitLab составила 2,7 млрд долларов, в то время как предыдущая оценка была $1,1 млрд. Это означает бурный рост и то, что компания будет нанимать все больше и больше фронтенд-разработчиков.

Так выглядит история появления фронтенда в GitLab.



Это график количества фронтендеров в GitLab, начиная с 2016 года, когда их не было вообще, и заканчивая 2019-м, когда их стало уже несколько десятков. Но сам GitLab существует 7 лет. Значит, до 2017 года основной код на фронтенде писали бэкенд-разработчики, хуже того, бэкенд-разработчики на Ruby on Rails (ни в коем случае никого не хотим обидеть и ниже поясним, о чем идет речь).

За 7 лет любой проект, хотите вы того или нет, устаревает. В какой-то момент рефакторинг становится невозможно больше откладывать. И начинается полный приключений путь, конечный пункт которого никогда не достигнуть. О том, как это происходит в GitLab, рассказал Илья Климов.

NodeJS: быстрый старт

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


Всем привет! Совсем скоро стартует курс «Разработчик Node.js», в связи с чем мы провели традиционный открытый урок. На вебинаре рассмотрели сильные и слабые стороны Node, а также обсудили, для каких задач эта программная платформа подходит лучше всего, а для каких следует выбирать другие языки и фреймворки. И, разумеется, не обошлось без практики. Для запуска примеров и программ необходимо было установить Node.js.

Преподаватель — Александр Коржиков, Dev IT Engineer в компании ING Group (Нидерланды).



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

Информационная панель распространения Коронавируса COVID-19 (React + Chart.js + BootstrapTable)

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

Я выложил в "оупен-сорс" новую информационную панель распространения Коронавируса COVID-19, которая позволяет анализировать динамику (кривизну графика) распространения Коронавируса для разных стран.


Информационная панель распространения Коронавируса COVID-19

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

Рендеринг списков в React Native

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

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

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