Обновить
512K+

JavaScript *

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

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

Serverless AWS инфраструктура игры Emozle

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

Всем привет! Не так давно я запустил игру Emozle, вдохновившись идеей Wordle. Посетители сайта видят лишь html, несколько js и css файлов, а я бы хотел поделиться с вами тем, что скрыто! Ну и кому может быть интересна диаграмма AWS архитектуры, если не Хабру?

Читать далее

Опыт SЕО оптимизации кода на NextJS

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

Оптимизация Сео Аудита на NextJS. Это ненастолько удачное занятие, поскольку, по моему опыту, он не дает полного контроля над event loop, который и надо приоритетно оптимизировать. Однако NextJS дает очень высокую скорость разработки, которая нужна многим продуктам, поэтому научится поднимать до 90 обязательно и в этой статье я поделюсь какие шаги мне помогли этого достичь.

Читать далее

Разработка приложений на Typescript с использованием Nx

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

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

Читать далее

React Hooks простыми словами

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

О хуках в фронтенд-разработке на Хабре писали уже не раз, и в этой статье мы не сделаем великого открытия. Наша цель другая – рассказать про React Hooks настолько подробно и просто без трудной терминологии, насколько это возможно. Чтобы после прочтения статьи каждый понял про хуки всё. Эта статья будет полезна как начинающим React-разработчикам, так и тем, кто хочет, не уходя в глубины документации, получить практическую информацию в сжатом виде. 

Читать далее

Как подружить Git с приложением на Webpack+React

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

Иногда бывает полезно отображать некоторую информацию из Git-репозитория прямо в приложении. В статье мы воспользуемся преимуществом встроенной в NodeJS функции execSync и будем показывать в приложении три версии мастер-ветки.

Читать далее

Шаринг сокет-соединения между вкладками

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

В каждом современном сервисе должны быть сториз и чат, и для начала мы решили запилить в hh.ru переписки. Меня зовут Влад Коротун, я фронтенд-разработчик. В этой статье расскажу, как неординарный подход к использованию Web Workers помог нам решить эту задачу.

Для желающих посмотреть на предмет сабжа в динамике у нас есть видеоверсия этой статьи. 

Читать далее

Прикручиваем авторизацию на основе KeyCloak к веб-приложению

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

Жизненный цикл разработки корпоративного приложения в нашей компании привел меня к, по сути, банальной задаче - “прикручиванию” пользовательской авторизации к фронту приложения. Пользователями приложения должны быть сотрудники компании, а идентификационным провайдером должен стать корпоративный Active Directory (далее AD).

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

Читать далее

Сравниваем async/await и then/catch с примерами

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

 В JavaScript есть два основных способа обработки асинхронного кода: Promise (ES6) и async / await (ES7). Эти синтаксисы дают нам равные базовые функции, но по-разному влияют на читаемость и область видимости. В этой статье мы увидим, как один синтаксис помогает, а другой отправляет нас в callback hell! Материал адаптирован на русский язык совместно с Тимофеем Тиуновым, автором курса “JavaScript” в Skillbox.

Читать далее

Темизация, часть 3. Themeizer – юный попутчик стилей

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

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

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

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

Читать далее

Как ESLint анализирует код и борется с Legacy

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

Рассказываем, как мы с фронтенд-разработчиком Дмитрием Балаевым @manmo убираем Legacy, какими Open Source конфигурациями для ESLint пользуемся и как статический анализатор кода повлиял на развитие разработчиков нашей компании.

Читать далее

Как мы собрали проект на Django и React и уважили загрузчик Webpack

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

Когда мы взялись за гибридный проект, в котором одновременно использовались Django и React, мы столкнулись с дилеммой: как интегрировать две эти части, в особенности, как разрешить шаблонам Django отображать ресурсы JavaScript, сгенерированные при клиентской сборке. Мы нашли изящный способ, позволяющий с этим справиться: использовать Webpack-загрузчик для Django с трекером бандлов Webpack, при помощи которых нам поддался этот этап работы сборочного конвейера. А в этой статье мы научим вас, как это делается.

Читать далее

React Drag & Drop: «Игра в бутылки»

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

Меня зовут Сергей, я фронтенд-разработчик отдела спецпроектов KTS. Наш отдел занимается разработкой веб-приложений для промокампаний. 

Помните, как в 1-й книге о Гарри Поттере Гермиона разгадывала логическую загадку с бутылочаками волшебных зелий? Сегодня расскажу, как мы создавали именно такую игру. 

У нас есть 5 бутылок и 2 полки. При старте игры на одной полке произвольно устанавливаются бутылки и их необходимо установить в правильном порядке на второй полке.

Мы воспользуемся react-dndstyled-componentsmobx и createPortal.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №506 (6 — 13 февраля 2022)

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

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

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

Рисуем генеративные грибы на javascript

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

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

Читать далее

Три подсказки для Wordle

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

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

Читать далее

Пишем «Hello, world!» для Zepp OS и часов Amazfit GTS 3

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


Совсем недавно Amazfit (партнёр Xiaomi) представила новое поколение умных часов, в линейку которого вошли модели GTR 3 Pro, GTR 3 и GTS 3. Эти часы официально продаются и теперь можно без проблем купить. Я бы обошёл новинку стороной, ведь есть модели и подешевле с практически теми же возможностями, например Bip S. И всё же главной изюминкой новых часов можно назвать новую операционную систему Zepp OS.
Для меня самой интересной особенностью новой ОС стала возможность запускать на часах приложения на JavaScript, чем мы сегодня и займёмся и напишем нашу самую первую программу.
Читать дальше →

4 важных нововведения в ES2022

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

ECMAScript 2022 - это новый стандарт JavaScript, который будет выпущен в июне 2022 года. Давайте посмотрим на самые важные изменения, которые, наиболее вероятно, должны появиться в новом релизе, так как они достигли уже 4-ой, последней стадии принятия новвоведений в спецификации EcmaScript (TC39).

Читать далее

Градиентный поиск коэффициентов квадратической регрессии

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

Продолжаем скрещивать javascript с матаном для развития ракетных наук. На очереди - методы численной оптимизации

Читать далее

Пишем nest.js с нуля на typescript

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

Nest.js - популярный node.js фреймворк с отличной архитектурой, основанной на Angular.

Под капотом Nest использует надежные платформы HTTP-серверов, такие как Express (по умолчанию), и при желании также может быть настроен для использования Fastify! Nest обеспечивает уровень абстракции по сравнению с этими распространенными платформами Node.js (Express/Fastify), но также предоставляет свои API-интерфейсы непосредственно разработчику. Это дает разработчикам свободу использовать множество сторонних модулей, доступных для базовой платформы.

Читать далее

Основы внутреннего устройства JavaScript

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

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

Введение


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

В этом посте мы подробно разберём эти концепции и объясним, как же работает JavaScript. Благодаря знанию этих подробностей вы сможете писать более оптимальные приложения, надлежащим образом использующие API. Если вы работаете с JavaScript относительно недавно, этот пост поможет вам понять, почему JavaScript настолько «странный» по сравнению с другими языками. А если вы опытный разработчик на JavaScript, то он позволит вам по-новому взглянуть на внутреннее устройство JavaScript Runtime, с которым вы работаете каждый день.
Читать дальше →