Как стать автором
Обновить
172.16

JavaScript *

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

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

Движок для игры от первого лица в 265 строках Javascript

Уровень сложности Сложный
Время на прочтение 6 мин
Количество просмотров 2.5K
Блог компании Timeweb Cloud JavaScript *Разработка игр *Математика *Игры и игровые консоли
Туториал
Перевод
image

Сегодня окунёмся в мир, который можно потрогать. В этой статье мы исследуем, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица. Для этого мы воспользуемся приёмом под названием «бросание лучей» (raycasting). Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D, а из более свежего – в статьях из «ludum dare» от Нотча Перссона. Что ж, для Нотча это неплохо, но не для меня! Вот демка (управление стрелками и тачпадом) [источник].
Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Комментарии 7

Новости

Скрепинг данных с Chat GPT

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 1.2K
JavaScript *Открытые данные *
Из песочницы

Всем привет! 

Хочу поделиться своим опытом программирования с помощью чат GTP. У меня была коммерческая задача - нужно было собрать контактную информация с сайта yelp.com по выборке рестораны и бары. Это была часть процесса лидогенерации. Парсер должен был состоять из двух частей: Первый — собрать URL-адреса всех компаний, которые появляются в результатах поиска. 

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

Скажу сразу, я не разработчик, писать парсеры и скреперы не умею. Прошла базовый курс JavaScript, но честно говоря, мой 12-летний сын, знает об этом больше, чем я :) 

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

Но сейчас я решила попробовать что-то новое. Я посмотрела кучу видеороликов на YouTube о парсинге веб-страниц и по рекомендации решила попробовать двух поставщиков готовых платформенных решений:

Читать далее
Всего голосов 9: ↑3 и ↓6 -3
Комментарии 1

React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 3.1K
CSS *JavaScript *HTML *ReactJS *TypeScript *
Туториал

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 8

Как делать full-stack с одного устройства без СМС и регистрации

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 3.7K
Python *JavaScript *ReactJS *DevOps *
Туториал
Из песочницы

Как крутить 2 сервера с белыми IP одного компа, и попутно разрабатывать Telegram Web Apps  на Bot API 6.7. Фронт + бэк на примере веб приложения внутри телеграм React + Fast-api.

Читать далее
Всего голосов 9: ↑4 и ↓5 -1
Комментарии 5

Истории

Debouncer: практический пример использования замыкания

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 4.5K
JavaScript *ReactJS *
Из песочницы

Что такое дебаунсер?

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

Практическое применение

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

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

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

Читать далее
Всего голосов 8: ↑5 и ↓3 +2
Комментарии 15

Путешествие в царство легаси. Как маленькая задача привела к большому рефакторингу

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 4.3K
Блог компании СберМаркет Разработка веб-сайтов *JavaScript *Проектирование и рефакторинг *Микросервисы *
Кейс

Привет! Меня зовут Артем Коньков, я frontend-разработчик в СберМаркете. А еще, я тот человек, который в фильмах ужасов спускается в темный подвал вопреки инстинкту самосохранения. Во-первых, потому что это интересно, а во-вторых — кто-то же должен это делать!

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

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 8

Как тестировать не-REST-бекэнд. Часть первая, GraphQL

Уровень сложности Средний
Время на прочтение 13 мин
Количество просмотров 1.8K
Блог компании QIWI JavaScript *Программирование *Тестирование веб-сервисов *
Туториал

Привет! Меня зовут Сергей, я более 11 лет в тестировании, и успел за это время перепробовать множество разных подходов в QA — начинал простым тестировщиком, затем строил и развивал всевозможные отделы тестирования и автоматизации, а сейчас работаю в QIWI.

В этой серии постов я хочу поговорить с вами про тестирование трех популярных так называемых не-REST-бэкендов. Самое главное для начала — определиться с терминами, договоримся, что везде в тексте, где я упоминаю REST — речь идет именно о REST HTTP-бэкенде. Наверняка многие из вас с ним работали и вообще неплохо знакомы.

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

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

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 1

ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения

Уровень сложности Средний
Время на прочтение 13 мин
Количество просмотров 3.3K
Блог компании Домклик JavaScript *ReactJS *
Туториал

Всем привет! Меня зовут Анастасия Щедрина, я технический лидер по фронтенду проекта размещения объявлений в компании Домклик. Сегодня я расскажу вам немного о том, как устроены правила в ESLint, и покажу на примере, как можно разработать собственные.

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

Читать далее
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 0

Maskito – новая коллекция библиотек для маскирования текстовых полей

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 5.1K
Блог компании TINKOFF JavaScript *Angular *ReactJS *TypeScript *
Обзор

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

Maskito содержит разные библиотеки: основная написана на TypeScript без зависимостей, есть опциональный пакет с набором готовых конфигурируемых масок, а еще есть библиотеки для удобного использования Maskito в проектах на React, Angular или Vue. Рассказываю обо всем подробнее.

Читать далее
Всего голосов 45: ↑43 и ↓2 +41
Комментарии 13

В поисках лучшей версии EcmaScript для сборки сайта

Уровень сложности Средний
Время на прочтение 14 мин
Количество просмотров 3.2K
Разработка веб-сайтов *JavaScript *HTML *ReactJS *TypeScript *
Аналитика

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

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

Читать далее
Всего голосов 24: ↑24 и ↓0 +24
Комментарии 18

Какого черта мы нанимаем, или осмысленность собеседований в IT

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 19K
JavaScript *Управление персоналом *Карьера в IT-индустрии
Из песочницы

Привет, Хабр, меня зовут Герман, и я лид разработки, вышедший из фронтов. Сегодня я хочу обсудить тему культуры собеседований, а точнее, тот хаос что творится на этом поприще. А заодно — узнать, что об этом думает комьюнити in situ.

Читать далее
Всего голосов 47: ↑44 и ↓3 +41
Комментарии 93

Какой язык программирования выбрать? Часть 3. JavaScript

Время на прочтение 6 мин
Количество просмотров 2.8K
Блог компании Криптонит CSS *JavaScript *Программирование *HTML *

Если вы никогда раньше не работали с JavaScript и читаете этот текст из десктопной версии одного из современных браузеров, то вы можете прямо сейчас написать свой первый HelloWorld-скрипт. Нужно нажать клавишу F12 (открыть инспектор), перейти на вкладку «Console», ввести alert("Hello, World!"); и нажать клавишу «Enter».

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

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 6

Книга «React. Быстрый старт, 2-е изд.»

Время на прочтение 7 мин
Количество просмотров 3.6K
Блог компании Издательский дом «Питер» JavaScript *Разработка мобильных приложений *Профессиональная литература *ReactJS *
image Привет, Хаброжители!

Незаменимая книга по React — технологии с открытым исходным кодом для быстрого создания многофункциональных веб-приложений. Второе издание, обновленное с учетом последней версии React, показывает, как создавать компоненты React и организовывать их в удобные для сопровождения крупномасштабные приложения. Если вы знаете синтаксис JavaScript, то сразу можете приступать к работе.

По ходу чтения разработчики и программисты создадут полноценное приложение. Вы быстро поймете, почему многие выбирают React для разработки веб-приложений.
Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 6

Создание плагина кнопки редактора в Joomla 4

Уровень сложности Сложный
Время на прочтение 23 мин
Количество просмотров 591
Разработка веб-сайтов *Open source *PHP *JavaScript *Joomla *
Туториал

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 5

Cмарт-контракт. Solidity + Ganache

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 934
JavaScript *Программирование *Solidity *Криптовалюты
Туториал

В данной статье мы познакомимся с тем, как задеплоить очень простой смарт-контракт на локальный блокчейн Ganache. После развёртывания смарт-контракта, мы научимся взаимодействовать с ним путём отправки транзакций в его адрес. Для простоты я буду использовать фреймворк Truffle, так как он облегчает деплой и взаимодействие со смарт-контрактом.

Читать далее
Всего голосов 3: ↑1 и ↓2 -1
Комментарии 0

RSC с нуля. Часть 1: серверные компоненты

Уровень сложности Сложный
Время на прочтение 32 мин
Количество просмотров 2.9K
Разработка веб-сайтов *JavaScript *Node.JS *ReactJS *
Туториал
Перевод


В этом техническом "глубоком погружении" (deep dive) мы с нуля реализуем очень простую версию серверных компонентов React.


Данный туториал будет состоять из трех частей (написана пока только эта).


Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 5

Учим PixiJS на играх

Уровень сложности Простой
Время на прочтение 60 мин
Количество просмотров 6.3K
JavaScript *Разработка игр *TypeScript *

В статье описал разработку 13-ти игр на PixiJS. Около 70% текста - это описание механики игр, остальное - реализация на PixiJS. Получилось много текста, т.к. описывать советы для PixiJS интереснее с примером из игр.
Самая последняя игра будет самой сложной и интересной.

Читать далее
Всего голосов 24: ↑23 и ↓1 +22
Комментарии 6

Новые возможности ECMAScript 2021-2023

Уровень сложности Сложный
Время на прочтение 13 мин
Количество просмотров 4.8K
JavaScript *IT-стандарты *История IT
FAQ

ECMAScript — это стандарт, на котором основан JavaScript, его часто называют ES.

Традиционно обновления ECMAScript публикуются в июне. Буквально недавно версия стандарта 2023 года перешла в статус freezed, что означает, что никакие изменения в нее уже вноситься не будут.

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

Обсудим почему JavaScript и ECMAScript не одно и тоже;

Разберем краткую историческую справку о стандартах ES;

Узнаем что интересного и полезного вышло в стандарте за последние пару лет и что нас ждет в этом году.

Для лучшего понимания исторической последовательности развития стандартов JavaScript до 2021 года можете также почитать мою статью ECMAScript 2015, 2016, 2017, 2018, 2019, 2020, 2021

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 3

Как я создал игру совместно с Chat GPT: история игры Чубрики

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 4.6K
JavaScript *Разработка игр *Монетизация мобильных приложений *Монетизация игр *Дизайн игр *
Из песочницы

Вот уже прошла неделя с момента публикации моей игры, и я получил 7 500+ установок за первые семь дней. Ранее я не публиковал игры, так что это мой первый опыт в качестве разработчика игр, хоть и только одной. Но, как говорят, с чего-то нужно начинать. Все началось с того, что я стал активно использовать Chat GPT в своей работе веб-разработчика, в частности, для создания простых функций, таких как генерация паролей и других подобных задач. У меня сложилось некоторое впечатление о работе с Chat GPT. Я лично считаю, что это эффективный инструмент для уже известных практик и методов программирования, но не для генерации чего-то нового, как все говорят. Поэтому я был настроен скептически относительно полной замены разработчика. Тем не менее, я решил попробовать и передать проект нейросети.

Читать далее
Всего голосов 12: ↑6 и ↓6 0
Комментарии 9

Какие уроки я извлёк из создания расширения VSCode с помощью GPT-4

Уровень сложности Средний
Время на прочтение 14 мин
Количество просмотров 7.3K
Блог компании RUVDS.com JavaScript *Программирование *TypeScript *Искусственный интеллект
Туториал
Перевод

В последнее время я много экспериментировал с написанием кода при помощи LLM (Large Language Model, большая языковая модель). На мой взгляд, эти инструменты отлично справляются с генерацией небольших самодостаточных фрагментов. К сожалению, что-то большее уже требует человеческого участия для оценки результата LLM и предоставления дальнейших инструкций.

В большинстве случаев, когда кто-то утверждает, что «GPT написал X», человек выступает для LLM в роли своеобразного REPL (Read-Eval-Print Loop, цикл чтение-оценка-вывод), внимательно подводя модель к функциональному результату. Я нисколько не хочу принизить ценность этого процесса – очень здорово, что он работает. Но можем ли мы шагнуть дальше? Можем ли использовать LLM для генерации ВСЕГО кода сложной программы за раз без человеческого вмешательства?
Читать дальше →
Всего голосов 47: ↑46 и ↓1 +45
Комментарии 11

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

Работа