Обновить
234.9

JavaScript *

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

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

React + Three.js. Создаём собственный 3D шутер. Часть 2

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

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

В статье вы познакомитесь с библиотекой React Three Fiber и научитесь создавать интерактивные 3D-игры.

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

Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере

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

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

Как подготовить для этого данные я детально описывал в "Где 15 минут пешком от дома до метро в Москве" "Где в Москве жить «неплохо»". В публикации "Жилье в 500м от сетевых продуктовых магазинов в Москве." я столкнулся со специфичным трафиком с желтушных публикаций и сообщество OSMеров предложило мне отличный вариант, когда визуализация не требует чтения исходной статьи.

Карта теперь доступна на сайте и использует DuckDB Wasm для запросов к данным прямо из браузера!

Читать далее

Добавление WebAuthn в веб-приложение

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

Привет! В этой статье мы научимся добавлять WebAuthn в веб‑приложения со стороны frontend‑разработчика. WebAuthn представляет собой новый метод аутентификации, который обеспечивает более высокий уровень безопасности, заменяя устаревшие пароли и SMS‑подтверждения на аутентификацию на основе публичных ключей.

Читать далее

Уроки рисования красных квадратов

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

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

Читать далее

Интерактивный парсер web страниц

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

Всем привет. Меня зовут Влад и по профессии я Java Backend.

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

Читать далее

Webpack vs esbuild — уже можно использовать в production?

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

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

Читать далее

Парадокс Монти Холла глазами JavaScript

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

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

Читать далее

Смерть third-party cookies. Что ждет нас в 2024?

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

В большинстве браузеров уже есть те или иные механизмы блокировки third-party кук. В одних браузерах это ограничивается тем, что third-party куки разрешено отправлять только на посещенные пользователем сайты. В других браузерах внедряют различные "enhanced" и "intellegent" tracking protection, либо совсем блокируют third-paty куки. Для тех, кто захочет разобраться детально в перипетиях отдельных браузеров, есть прекрасные статьи.

В 2019 году волей сообщества дефолтное поведение кук в браузерах изменилось с SameSite=None на SameSite=Lax. Что, впрочем, привело лишь к тому, что большинство сервисов перевело свои трекеры в режим SameSite=None.

Консенсус в сообществе свелся к тому, что:
- Нужно запретить отслеживать пользователя между сайтами
- First-party - это вполне ОК. Сайт внутри себя может позволить себе любые манипуляции с пользовательскими данными
- Third-party - в целом тоже ОК, но только если ограничить third-party куки одним сайтом (следите за руками ниже)

Так какие же есть решения для того, чтобы отказаться от third-party кук и ничего не сломать?

Читать далее

Какие методы используются для сбора данных о твоем браузере? Как собирают информацию о пользователях?

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

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

Читать далее

Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация

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

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

Читать далее

Путешествие JavaScript-кода через движок V8

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

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

Читать далее

Использование Content-Security-Policy вместе с React & Emotion

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

Content-Security-Policy (CSP) - это HTTP заголовок, который улучшает безопасность веб-приложений за счет запрета небезопасных действий, таких как загрузка и отправка данных на произвольные домены, использование eval, inline-скриптов и т.д. В этой статье будет сделан фокус на директиве style-src и ее использование вместе с CSS-in-JS библиотекой emotion.

Читать далее

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

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

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

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

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

Ну что, поехали!

Читать далее

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

Что такое деление по модулю в JavaScript?

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

Всем привет, меня зовут Максим Иванов, я Frontend-разработчик, и когда-то мы с другом писали переводы на Хабрахабр. Было интересно, но в какой-то момент я прекратил эту деятельность. Спустя 5 лет я решил снова попробовать писать про мою любимую профессию. Сегодня поговорим о математическом операторе в JavaScript, который представляет из себя символ процента.

Целевая аудитория
Эта статья написана для разработчиков уровня Intern / Junior. Предполагается, что у вас есть уже некоторое знание JavaScript для понимания происходящего, но основные выводы будут полезны всем! ?

Читать далее

Почему я не буду использовать Next.js

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

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

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

С момента выхода Remix в 2020 году я использовал именно этот фреймворк. Мне он настолько понравился, что на следующий год я устроился в эту компанию, чтобы помочь с развитием сообщества, а через 10 месяцев ушёл работать в EpicWeb.dev, где теперь обучаю людей всему необходимому для создания фулстек-приложений. И Remix играет в этом значительную роль, являясь веб-фреймворком, который аналогично Next.js нацелен на решение задач, связанных с созданием веб-приложений.

Поскольку Next.js аналогичен Remix, многие спрашивают, почему для преподавания фулстек-разработки в EpicWeb.dev я предпочёл именно Remix. И текущая статья станет ответом на этот их вопрос.
Читать дальше →

Redux-toolkit и переиспользование кода

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

Привет, Хабр!

Каждый разработчик стремиться соблюсти DRY принцип, но переиспользование кода в redux-toolkit имеет свои особенности и у кого-то могут возникнуть трудности, поэтому в данной статье описаны несколько вариантов переиспользования кода при создании слайсов через createSlice, начнем с самого очевидного, и постараемся создать гибкое и расширяемое решение, и конечно же не забудем typescript.

createSlice

Разработка браузерных игр с использованием Phaser3, React, Typescript

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

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

Разработка игр это круто и весело! В данной статье разберем пошагово разработку демо небольшой браузерной игры.

Читать далее

Два frontend фреймворка. Два подхода

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

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

Читать далее

Что нового в Chrome 119?

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

Начиная с Chrome 104 для вновь созданных или обновленных файлов cookie с указанием даты истечения срока действия действует ограничение - не более 400 дней. Теперь это ограничение будет применено к уже хранящимся файлам cookie задним числом.

После первого запуска Chrome 119+ и однократного переноса базы данных срок действия этих файлов будет ограничен до 400 дней. Влияние этого изменения пользователи смогут ощутить не ранее чем через 400 дней после выхода Chrome 119, и то только для существующих файлов cookie, которые не были обновлены за это время.

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

Читать далее

Взаимодействие с Midjourney с использованием Discord API • Часть II

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

Эта статья продолжает часть I. Мы подробно рассмотрим систему модерации Midjourney, коснемся лимитов скорости (rate limits) Discord, двух самых сложных тем. В конце статьи приведен рабочий код.

Прежде чем мы начнем, убедитесь, что у вас есть учетная запись Discord с активной подпиской Midjourney. Базового плана за $10 будет достаточно.

Следуйте этим простым шагам, чтобы получить:

Читать далее

Вклад авторов