Обновить
512K+

JavaScript *

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

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

Полное руководство по инкрементной регенерации статических сайтов с помощью Next.js

Время на прочтение10 мин
Охват и читатели23K
Год назад во фреймворке Next.js 9.3 появилась поддержка генерирования статических сайтов (Static Site Generation, SSG), что сделало его первым гибридным фреймворком. Я к тому моменту уже несколько лет с удовольствием пользовался Next.js. Но тот релиз сделал Next.js моим новым стандартным инструментом. После того, как я много и серьёзно поработал с Next.js, я присоединился к Vercel для того чтобы помогать компаниям, вроде Tripadvisor и Washington Post, в деле внедрения Next.js и расширения того, что у них получилось.

В этом материале мне хотелось бы исследовать новый виток эволюции Jamstack — механизм инкрементной регенерации статических сайтов (Incremental Static Regeneration, ISR). Здесь вы найдёте руководство по ISR, а так же — практические примеры использования этой технологии, демонстрационные проекты и рассказ о сопутствующих внедрению ISR компромиссах.



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

CS Cart или через терни к черной дыре костылей и оптимизаций

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

Совсем недавно, я стал разработчиком модулей для CS Cart. Случилось это по воле случая: меня взяли на работу в Петербургскую сеть интернет магазинов, торгующих вейпами и всякими интересными штуками для удовлетворения потребностей физического характера страждущих пар и одиночек (кто не понял - еще не дорос ). Оба интернет магазина развернуты на двух витринах с разными доменами, но одной админкой и общей базой данных. Что же с ней не так? Думаю о CMS написано много, но я добавлю свою ложку дегтя в бочку с дегтем .

Читать далее

Кросс-браузерный трекинг на основе перебора обработчика внешних протоколов

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

Два месяца назад, в процессе исследования браузера Safari, я случайно наткнулся на уязвимость, позволяющую проверять наличие конкретного приложения на компьютере пользователя прямиком из браузера с использованием JavaScript.

Проверяя список из 24 приложений на предмет присутствия в операционной системе можно создать 24-битный идентификатор. Такой идентификатор будет одинаковый во всех браузерах и позволит связывать сессии пользователей между браузерами. А если еще и обучить простую модель, то можно предсказывать профессию пользователя или страну, в которой он родился.

Читать далее

Модульные frond-end блоки — пишем свой пакет. Часть 2

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

В первой части я поделился своим взглядом на то, какими могут быть переиспользуемые front-end блоки, получил конструктивную критику, доработал пакет и теперь хотел бы поделиться с вами новой версией. Она позволит легко организовать использование модульных блоков для любого проекта с бекендом на php.

Для тех кто не знаком с первой частью я буду оставлять спойлеры из нее, которые введут в курс дела. Тем кому интересен конечный результат - демонстрационный пример и ссылки на репозитории в конце статьи.

Читать далее

DINS JS EVENING (online): параллелизм в вебе и есть ли жизнь после закрытия вкладки

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

Дмитрий Злыгин из DINS расскажет, как на фронтенде выполнять несколько задач параллельно и какие инструменты для этого нужны. Максим Сальников из Microsoft поделится возможностями API из семейства сервис-воркеров, позволяющих продлить жизнь приложения.

Участие бесплатное по предварительной регистрации. Программа и подробная информация о спикерах — под катом.

Читать далее

Битва Java-разработчиков Tech Monsters Night от «М.Видео-Эльдорадо»

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


4 июня состоится Tech Monsters Night. Специалисты уровня middle&senior Java Script, Java 15, Reactive Java, Spring Framework 5, Spring Boot 2, Kafka других и фреймворков эта битва для вас!

5 часов эпичного файта: нетривиальные задачки от лидов «М.Видео-Эльдорадо» и скиловые противники. Сразу после боя — лидерборд, вы увидите рейтинг, ники победителей и призы.

Практическое руководство по TypeScript для разработчиков

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

Представляю вашему вниманию перевод статьи "Working With TypeScript: A Practical Guide for Developers".


Что такое TypeScript?


TypeScript — это популярный статический типизатор (static type checker) или типизированное надмножество (typed superset) для JavaScript, инструмент, разработанный Microsoft и добавляющий систему типов к гибкости и динамическим возможностям JavaScript.


TypeScript развивается как проект с открытым исходным кодом, распространяется под лицензией Apache 2.0, имеет очень активное и высокопрофессиональное сообщество, а также огромное влияние на экосистему JavaScript.


Установка TypeScript


Для того, чтобы начать работу с TypeScript, нужно либо установить специальный интерфейс командной строки (command line interface, CLI), либо воспользоваться официальной онлайн-песочницей или другим похожим инструментом.

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

Трасси… что? Доклад Яндекса

Время на прочтение15 мин
Охват и читатели15K
Отладка приложения занимает бо́льшую часть нашего времени. Кто-то пользуется DevTools, кто-то обходится обычным console.log, кто-то использует профайлеры. Зачастую этих инструментов более чем достаточно. Но есть еще один, не такой известный и популярный в JavaScript-мире. О нем я и рассказал в докладе.

— Всем привет! Надеюсь, вы бодры, веселы, перекусили, заварили себе кофейку, потому что сейчас будет очень интересная и при этом доступная тема: «Трасси… что?». Правильнее было бы называть доклад «Трасси… что-о-о?!», но не будем так.

Cypress и его место в нашей тестовой пирамиде

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

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

Читать далее

Швейцарский нож отладки JavaScript

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


Кажется, что все в начале пути разработчика отлаживали код при помощи console.log(). Я уверен, что и сейчас среди читателей найдётся человек, который сможет отладить код любой сложности при помощи вывода информации в консоль.

Признаюсь честно, я и сам достаточно долго просто выводил что-то в консоль, пытаясь понять, что пошло не так. Я понимал, что использовать breakpoint быстрее и продуктивнее, даёт больше возможностей, ну и в целом выглядит солиднее, но по-прежнему пользовался консолью.
Читать дальше →

Паттерн «Импорт при взаимодействии» (часть 1)

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

Ссылка на оригинал

Паттерн заключается в отложенной загрузке ресурсов, то есть только тогда, когда пользователю нужна какая-либо часть интерфейса.

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

Этими частями интерфейса могут являться видео плееры, чаты, либо часть интерфейса, которая появляется по клику.

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

Это может негативно отразиться на таких метриках как:

Продолжение следует...

TypeScript: Раскладываем tsconfig по полочкам. Часть 2 — Всё про строгость

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

В данной статье я хочу предоставить переработанную и упорядоченную выжимку документации по настройке "флагов строгости" tsconfig.json. Статья будет полезна как тем, кто только начинает работать с TypeScript, так и тем кто уже давно работает, но при этом использует конфиг по умолчанию. Для разработчиков, которые хорошо ориентируются в вопросах строгости в TypeScript статья может открыть некоторые тонкости работы флагов и послужить шпаргалкой.

Читать далее

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

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

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

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

Современный Javascript: всё, что вы пропустили за последние 10 лет

Время на прочтение7 мин
Охват и читатели16K
JavaScript прошел долгий путь с тех пор, как я знал его как букву «D» в DHTML. Для всех, кто, как я, не хотел использовать новейший синтаксис, который может потребовать полифиллов или транспилятора, я написал эту шпаргалку, чтобы вы познакомились со всеми достоинствами, которые широко поддерживаются в современных браузерах.

Содержание

  • Array functions
  • const/let
  • Nullish coalescing ?? and Optional chaining?.. operators
  • Async/Await
  • Стрелочные функции ()=>{}
  • for...of
  • for await...of
  • Classes
  • get/set
  • function default parameters
  • function named parameters
  • function rest… parameter
  • Destructuring
  • Shorthand functions aka Methods
  • Promise.all
  • Template literals
  • Proxy
  • Module import/export
  • Читать ещё

(Исправления по качеству перевода, пожалуйста, присылайте в личку)
Читать дальше →

Паттерны отложенной инициализации свойств объектов в JavaScript

Время на прочтение6 мин
Охват и читатели13K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких JavaScript-паттернах, направленных на отложенную инициализацию свойств объектов, для выполнения которой требуется произвести вычисления, создающие серьёзную нагрузку на систему. В основе всех этих паттернов лежит использование дескрипторов доступа — свойств объектов, описываемых парой функций — геттером и сеттером.


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

Кэш или стэйт, пробуем React-query

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

Популярная библиотека для работы с состоянием веб-приложений на react-js это redux.  Однако у нее есть ряд недостатков такие как многословность(даже в связке с redux-toolkit), необходимость выбирать дополнительный слой(redux-thunk, redux-saga, redux-observable). Возникает ощущение, что как-то это все слишком сложно и уже давно появились хуки и в частности хук useContext.. Так что я попробовал другое решение.

Читать далее

Сравнение производительности CSS и CSS-in-JS в реальном мире

Время на прочтение7 мин
Охват и читатели25K
Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →

Отслеживание и визуализация положения МКС с помощью 30 строк JavaScript-кода

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


Предлагаю вашему вниманию перевод этой замечательной статьи.

В этом туториале мы создадим веб-приложение, визуализирующее положение любого спутника, например, Международной Космической Станции (далее — МКС), в режиме реального времени (ну, почти).

Мы создадим приложение с нуля и примерим на себя роль настоящего ученого в области ракетостроения.

  • Мы узнаем, где найти данные для отдельного спутника, известные как двухстрочный набор элементов (two-line element set, TLE) (далее — ДНЭ)
  • Мы используем библиотеку ”satellite-js” для предсказания орбиты спутника по ДНЭ (это часть напрямую связана с ракетостроением)
  • Мы используем библиотеку ”CesiumJS” для визуализации результата, однако, вы можете использовать любую библиотеку/движок, которые умеют работать с долготой, широтой и высотой

Превью конечного результата:


Здесь мы видим движение МКС по орбите со скоростью, увеличенной в 40 раз. Для того, чтобы увидеть текущее положение МКС, нажмите на иконку часов в верхнем левом углу панели управления.

Рассказ о том, почему в 2021 году лучше выбирать TypeScript, а не JavaScript

Время на прочтение5 мин
Охват и читатели21K
Недавно я, используя React Native, занимался разработкой мобильного приложения для медитации Atomic Meditation. Эта программа помогает тем, кто ей пользуется, выработать привычку медитировать, ежедневно уделяя этому занятию какое-то время. В ходе работы у меня появились серьёзные причины приступить к изучению TypeScript и начать пользоваться им вместо JavaScript в проектах среднего и крупного размера.

Прежде чем я начну свой рассказ, мне хотелось бы отметить, что вы сможете разобраться в этой статье, даже если никогда не пользовались React Native. Я буду всё подробно объяснять. А если вы делали какие-нибудь проекты на React, то, читая эту статью, можете считать, что React и React Native — это одно и то же.



А теперь расскажу о том, как обычный JavaScript втянул меня в неприятности.
Читать дальше →

Шпаргалка по JS-методам для работы с DOM

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

image


Основные источники



Введение


JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.


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


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


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


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

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