Обновить
256K+

JavaScript *

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

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

Минëр: сапëр наоборот

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели19K
Что будет, если взять известную игру сапëр и изменить игровой процесс на обратный? Получится игра минëр


Так выглядит расклад в минëре на новичке.

Если задача в сапëре разминировать поле, то задаче в игре минëр наоборот — заминировать.
Читать дальше →

Попробуем выиграть 300 мс при загрузке Википедии

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

Вам знакомы муки, когда пытаешься добиться чего-то от тормознутого сайта, а он не реагирует на щелки мыши или пробуксовывает при прокрутке? Подобные проблемы с производительностью могут провоцировать:

Нервозное перещёлкивание (rage clicking)

Повышенный отток пользователей и снижение показателей конверсии

Потерю позиций в поисковой выдаче

Более трёх лет мобильная версия Википедии сбоила из-за фрагмента кода на JavaScript, выполнение которого могло занимать более 600 мс при загрузке страницы на маломощных устройствах. В результате работать со страницей становилось попросту невозможно.

Читать далее

Книга «JavaScript с нуля до профи»

Время на прочтение14 мин
Охват и читатели23K
imageПривет, Хаброжители!

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

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

Обучайтесь на основе проектов, дополняющих теоретические блоки и серии примеров кода, которые могут быть использованы в качестве модулей различных приложений, таких как валидаторы входных данных, игры и простые анимации. Обучение дополнено ускоренным курсом по HTML и CSS, чтобы проиллюстрировать, как компоненты JavaScript вписываются в полноценное веб-приложение.

Для кого эта книга
Для комфортного знакомства с книгой не требуется никакого опыта в JavaScript. Конечно, упражнения дадутся немного легче, если вы хотя бы немного умеете программировать. Знакомство с основами HTML и CSS будет вашим преимуществом. Если вы начинающий программист, для нас большая честь поприветствовать вас в мире программирования. Вначале он может показаться сложным, но мы проведем вас через все трудности.
Читать дальше →

Самый быстрый форматер кода

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели8.9K

Самый быстрый форматер кода

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

Читать далее

Как упростить импорт JavaScript модулей с помощью Node.js Subpath Imports

Уровень сложностиПростой
Время на прочтение14 мин
Охват и читатели22K

Существует множество библиотек для настройки алиасов в Node.js, таких как alias-hq и tsconfig-paths. Однако однажды, изучая документацию Node.js, я обнаружил возможность настройки алиасов без использования сторонних библиотек. Более того, данный подход позволяет использовать алиасы без сборки кода. Знакомо ли вам поле imports в package.json? В этой статье мы рассмотрим, что такое Node.js Subpath Imports, узнаем о тонкостях настройки и разберемся с поддержкой в актуальных инструментах разработки.

Читать далее

Разница между традиционными функциями и стрелочными функциями в JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели30K

Стрелочные функции — это относительно новая функция, реализованная в ES6 ( ECMAScript 6 ), которая, на наш взгляд, является просто более кратким и элегантным синтаксисом для объявления функциональных выражений в JavaScript. Хотя традиционные функции и функции стрелок работают схожим образом, мы должны остерегаться некоторых различий, которые могут быть незаметны.

Читать далее

Миграция на Vue 2.7

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели8.4K

Здравствуйте! В данной статье я бы хотел поделиться своим опытом обновления проекта, написанного на Vue 2.6. Помимо обновления самого vue и компонентов, я на примерах покажу как мне удалось обновить другие зависимости проекта и адаптировать их для работы с Composition API.

Читать далее

Реализация реактивности и компонуемости во фронтенд-фреймворке без зависимостей

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели9.6K

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

Как работают сервисы карт и маршрутизации

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели10K

В период моей жизни, когда я работал в Санкт-Петербурге, пришла мне интереснейшая задача — создать и интегрировать в один проект функционал карт. По ограничениям бизнес требований, карта должна работать в условиях отсутствия интернета, при этом удовлетворять требования визуального отображения и построения маршрутов. Значит не было возможности использовать готовый API Яндекса или Google, так что пришлось реализовывать механизмы самому.

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

Как работают сервисы карт и маршрутизации?

Чем хорош и чем плох Tailwind CSS, или «Допустим, у вас стартап!»

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

Привет, Хабр! Меня зовут Александр Водолазских. Я живу в Новосибирске и я работаю Frontend Domain Lead в СберМаркете. Сегодня хочу немного поговорить об опыте работы с Tailwind CSS — utility-first CSS framework. Поделюсь болью и радостью, которые возникли при его эксплуатации.

Читать далее

Кэш в JavaScript: не все Map'ы одинаково полезны

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели7.6K

При разработке приложений регулярно возникает задача кэширования каких-то данных, которые из хранилища должны читаться много чаще, чем писаться. Давайте рассмотрим на примере простого теста, когда и на каком механизме эффективнее организовать его для JavaScript-приложения - на Map или на Object.

Читать далее

taichi.js: Программируем на WebGPU без боли

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели4.8K

Привет, Хабр! Сегодня хочу предложить вашему вниманию перевод на русский язык статьи моего коллеги и хорошего приятеля Dunfan Lu. Он создал taichi.js - open-source фреймворк для программирования графики на WebGPU, и написал подробный туториал как его использовать на примере знаменитой "Игры жизни". Уверен, эта сложная и красивая работа на стыке технологий рендеринга и компиляции не оставит вас равнодушными. - пр. переводчика.

Читать далее

Архитектура и реактивное программирование

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели41K
reactivity as a pattern for low models coupling

Что такое реактивное программирование? Не Rx. И даже не Excel. Это архитектурный паттерн, позволяющий абсолютно иначе писать код. В статье мы устаканим фундаментальные знания, утвердимся в том, что React.js всё же является реактивным, и подумаем о том, как и когда нужно, а когда не нужно применять паттерны реактивного программирования.
Читать дальше →

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

Как мы решили проблему общения микрофронтендов в приложении

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели9.7K

Всем доброго дня! Меня зовут Семен, в команде я отвечаю за работу с Angular.

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

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

Читать далее

Обеспечение безопасности Frontend приложений

Уровень сложностиПростой
Время на прочтение13 мин
Охват и читатели25K

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

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

Читать далее

Рендеринг на сервере и HTMX — это будущее

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели49K

Современная ситуация с разработкой веб-приложений


Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.

Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
Читать дальше →

Из лягушек в автоматизаторы — мое решение

Уровень сложностиСредний
Время на прочтение17 мин
Охват и читатели6.9K

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

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

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

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

Читать далее

Карта, золото, «Герои»: продолжаем разбираться в технико-исторической части HeroWO.js — браузерного клона культовой игры

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели7.6K

TL;DR для тех, кому некогда читать™:




День пятый

Учимся писать сложные Typescript типы на примере роутинга в React

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели24K

Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React приложении. Данный материал будет полезен как фронтендерам, так и бекендерам.

Хочу писать типы как профессионал

Как yarn v3 и философия Zero Installs помогли нам сократить длительность ci/cd пайплайна в 3 раза

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели9.7K

Всем привет, меня зовут Фёдор — я руководитель фронтенд-разработки на проекте Smartbot Pro в компании KTS

Наш проект — конструктор ботов для социальных сетей, в котором алгоритм бота представлен в виде визуального графа. Конструктор включает большое количество интеграций. Недавно на проекте остро встал вопрос оптимизации наших ci/cd пайплайнов, потому что релиз мог занимать от 4 до 18 минут.

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

Читать далее