Обновить
256K+

JavaScript *

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

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

Клон Doom в 13 килобайтах JavaScript

Время на прочтение14 мин
Охват и читатели43K
В прошлом году я участвовал в соревнованиях JS13K 2019, на которых людям предлагается разрабатывать игры в менее чем 13 КБ кода на JavaScript. Я участвовал с клоном Doom, который назвал… «Ещё один клон Doom» (Yet Another Doom Clone).


Поиграть в него можно здесь. Исходный код выложен сюда.

Зачем создавать клон Doom?


Зачем писать FPS на JavaScript всего в 13 КБ (с учётом сжатия)? По нескольким причинам. Но лучше всего на этот вопрос отвечает раздел FAQ соревнований JS13K «Можно ли использовать WebGL?»:

«Да, но может быть сложно уместить его в 13 килобайта, если вы планируете писать FPS».

Кроме того, в то время я как раз написал 3D-рендерер и хотел поработать над ним ещё. К тому же мне нравится создавать сильно сжатый код. (Например, много лет назад я создал язык и написал компилятор для нового языка, предназначенный специально для использования в код-гольфинге.)

Именно поэтому я выбрал FPS. Остаётся вопрос: «Почему Doom?» На него ответить проще: если вы хотите написать FPS, и чтобы он при этом был небольшим, то Doom — практически самый минималистичный вариант.

Шпаргалка по регулярным выражениям

Время на прочтение4 мин
Охват и читатели50K
Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи «Regex Cheat Sheet» автора Emma Bostian.

Регулярные выражения или «regex» используются для поиска совпадений в строке.

Ищем совпадение по шаблону

Используем метод .test()

const testString = 'My test string'
const testRegex = /string/
testRegex.test(testString) // true

Ищем совпадение по нескольким шаблонам

Используем | — альтернацию

const regex = /yes|no|maybe/

Игнорируем регистр

Используем флаг i

const caseInsensitiveRegex = /ignore case/i
const testString = 'We use the i flag to iGnOrE CasE'
caseInsensitiveRegex.test(testString) // true

Извлекаем первое совпадение в переменную

Используем метод .match()

const match = 'Hello World!'.match(/hello/i) // 'Hello'

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

Использование Grid для макетов страниц, а Flexbox — для макетов компонентов

Время на прочтение14 мин
Охват и читатели45K
Мой брат недавно отучился на компьютерщика и сейчас завершает стажировку в области фронтенд-разработки. Он узнал и о CSS Grid, и о CSS Flexbox, но в том, как он пользуется этими механизмами создания макетов, я отметил одну особенность, с которой я уже сталкивался. А именно, ему тяжело даётся принятие решений о том, когда использовать Grid, а когда — Flexbox. Например, он использовал CSS Grid для создания макета заголовка сайта. При этом он отметил, что довести проект до ума ему было нелегко, и что ему пришлось долго экспериментировать с grid-column и настраивать всё до тех пор, пока у него не получилось то, что ему было нужно.



Честно говоря, мне это не понравилось. Поэтому я решил поискать какой-нибудь ресурс, который помог бы моему брату как следует уяснить различия между Grid и Flexbox и дал бы возможность взглянуть на примеры, созданные с использованием обеих этих технологий. Но ничего подходящего мне найти не удалось. Тогда я решил написать статью, посвящённую Grid и Flexbox. Надеюсь, она получилась понятной.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №419 (8 — 14 июня 2020)

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

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

Визуализация списка женщин-лауреатов Нобелевской премии в виде кристаллов в 3d с использованием Vue, WebGL, three.js

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

Год 1 | вдохновение


В этом месяце я очень долго пыталась определиться с датасетом и идеей для его обработки. Хотя я начала думать о нем еще в мае, по факту законить удалось только через 8 месяцев (черт, я плоха), а описать проект мне удалось еще спустя месяц (оу, я чертовски плоха).

Идея проекта пришла ко мне после просмотра фильма Безумно богатые азиаты. Мне очень понравилась актриса Мишель Йео, но идея оформилась только после того, как я прочитала больше о ней и узнала, насколько она была выдающейся и крутой. Это заставило меня задуматься выдающихся женщинах, о которых я понятия не имею. И вот — возникла идея как-то это визуализировать.
Читать дальше →

Видеозапись в облако своими руками

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

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


Выход из этой ситуации очевиден: видеозапись должна вестись не в локальный файл на ваш телефон, а непосредственно на удаленный сервер. Правда, готовых программных решений для реализации этой идеи не так много (например, вот): в большинстве случаев предлагаемые приложения для мобильного телефона или платные, или работают из рук вон плохо. Экзотические рекомендации типа «в случае нападения хулиганов начните трансляцию на YouTube» я не рассматриваю, так как в реальной ситуации у вас элементарно не будет времени, чтобы запустить трансляцию. Кроме того, видео будет писаться в чьё-то чужое облако, а очень часто это не есть хорошо.


Можно, конечно, подучить Java или Kotlin (а заодно и Swift) или, на худой конец, освоить PhoneGap и написать своё приложение. Однако всё гораздо проще: под катом несложное решение этой задачи посредством HTML5 video/audio API.

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

Минифицируем приватные поля в TypeScript. Доклад Яндекса

Время на прочтение13 мин
Охват и читатели7.7K
Меня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер.

Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта.


Конспект и видео будут полезны разработчикам, которые ищут дополнительные способы оптимизации своего кода и хотят узнать, как webpack, Babel и TypeScript могут в этом помочь. В конце будут ссылки на GitHub и npm.
Читать дальше →

10 полезных приёмов для JavaScript-программистов

Время на прочтение5 мин
Охват и читатели31K
Как всем известно, JavaScript — это язык, который очень быстро развивается. В стандарте ES2020 имеется немало новых возможностей, с которыми вам, вероятно, захочется познакомиться поближе. Честно говоря, писать JS-код можно по-разному. Различные варианты кода, направленные на решение одной и той же задачи, способны дать один и тот же результат, но некоторые из этих вариантов кода могут оказаться значительно короче и чище других. Для того чтобы сделать код качественнее и понятнее, можно пользоваться всяческими полезными приёмами. О некоторых из таких приёмов речь пойдёт в материале, перевод которого мы сегодня публикуем. Надеемся, то, о чём вы сегодня узнаете, когда-нибудь вам пригодится.


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

Formidable, Busboy, Multer или Multiparty? Выбор npm-пакета для обработки файлов, выгружаемых на сервер

Время на прочтение5 мин
Охват и читатели9.4K
Существует немало npm-пакетов, предназначенных для разбора и обработки multipart/form-data-запросов на Node.js-сервере. Каждый из них спроектирован по-особенному. Некоторые предназначены для использования с Express.js, другие рассчитаны на автономное применение. Некоторые хранят промежуточные файлы на жёстком диске или в памяти, а некоторые — нет. Исследование всех этих пакетов и выбор того, который подойдёт именно вам, может занять определённое время. Материал, перевод которого мы публикуем сегодня, представляет собой руководство, воспользовавшись которым можно выбрать подходящую библиотеку для организации выгрузки файлов на сервер. Тому, кто подбирает подобную библиотеку, автор этого материала рекомендует сначала ответить на следующие вопросы:

  1. Нужен ли вам Express.js?
  2. Устроит ли вас сохранение где-либо промежуточных данных, или вы хотите использовать потоковую передачу данных?
  3. Если сохранение промежуточных данных вас устроит, предпочтёте ли вы, чтобы они хранились бы в памяти, или на жёстком диске?


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

Объясните мне, как вы для себя разобрались в моделях типизаций — они же все размыты

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


Когда я был начинающим, я мог писать простые приложения на C# и C++. Долго игрался с консольными прогами, пощупал десктопные, и в какой-то момент захотел сделать сайт. Меня ждал большой сюрприз — чтобы делать сайты, одного сишарпа мало. Надо ещё знать жс, хтмл, цсс и прочую фронтовую хрень. Я потратил около недели на эти вещи, и понял — не мое. Я мог написать какой то код на джаваскрипт, но он не содержал типов, и я никак не мог взять в толк — как к этому вообще подходить. Это какое-то игрушечное программирование. Ну и забросил к чертям.


Уже потом, работе на третьей, меня перевели в отдел, где делали веб. Я подумывал уволиться, но мне объяснили — там тайпскрипт, тайпскрипт — это такой сишарп для браузера.


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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №418 (1 — 7 июня 2020)

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

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

Как ускорить игру «Жизнь» в сто раз

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

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

Мы также улучшим алгоритм на JavaScript, ускорив его в 10 раз по сравнению с неоптимизированной версией.

В конце статьи дана ссылка на код, а также на online-реализацию игры с оптимизированным алгоритмом на JavaScript, выполняющим до двухсот итераций в секунду на поле размера 1920x1080 (Full HD), где вы можете убить время поиграть в эту замечательную игру.
Читать дальше →

МК-61: история, эмуляция, устройство

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

Расцвет эпохи программируемых калькуляторов в нашей стране пришёлся на середину 80-х годов. Потом на смену относительно сытым и благополучным временам пришла эпоха бандитского капитализма, когда стране стало не до выпуска своей высокотехнологичной продукции бытового назначения, вот уже сменились поколения, но ностальгия по тем временам, когда мы бессонными ночами пытались сократить код программы хотя бы на пару байтов, чтобы уместить задуманную функцию, выискивали всё новые и новые недокументированные возможности, придумывая способы, как их можно использовать на практике, сочиняли целые циклы рассказов в качестве фона для наших игровых программ, не даёт забыть свой МК-61 со 105 байтами программной памяти. Поэтому хочу написать заметку о том, что собой представляли и как работали эти самые программируемые калькуляторы. Даже если эта тема сегодня периодически и поднимается, то не настолько часто, чтобы приесться уважаемому читателю, так что надеюсь поведать что-то новое.

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

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

Как пройти собеседование в GitLab, попасть в команду разработчиков Vue и стать Staff-engineer

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


В конце мая в нашем инстаграм-аккаунте выступала Наталья Теплухина — Vue.js core team member, GoogleDevExpret и фронтенд-разработчица. Мы анонсировали ее как Senoir, но за неделю до прямого эфира ее повысили и она стала первым Staff Frontend Engineer в Gitlab.

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

Делимся расшифровкой и записью эфира.

Переработка архитектуры React Native в 2020 году

Время на прочтение5 мин
Охват и читатели15K
Фреймворк React Native (RN) появился в 2015 году. Он предназначен для разработки кросс-платформенных мобильных приложений с использованием библиотеки React. Эти приложения поддерживают нативные возможности платформ, для которых их создают. У исходной архитектуры React Native были определённые недостатки. Но, несмотря на это, RN получил хорошую поддержку сообщества, его популярность постепенно росла, не в последнюю очередь — благодаря громкой репутации React.



О проекте по перепроектированию архитектуры React Native заговорили в 2018 году. Этой работой занимается команда Facebook. Цель перепроектирования заключается в том, чтобы сделать фреймворк более стабильным, и в том, чтобы решить наиболее распространённые проблемы, накопившиеся в RN за годы разработки. Материал, перевод которого мы сегодня публикуем, посвящён рассмотрению того, как переработка архитектуры RN способна улучшить производительность приложений и скорость работы программистов.
Читать дальше →

Vite – ведение разработки без бандлов на Vue

Время на прочтение2 мин
Охват и читатели19K
Привет, хабровчане. В июне OTUS запускает курс «Vue.js разработчик». В преддверии старта курса мы традиционно подготовили перевод интересного материала.





Однажды Эван Ю (создатель Vue.js) решил не поспать ночью и в итоге создал Vite.



Vite позволяет вам создавать приложения на Vue с однофайловыми компонентами без шага сборки бандлов. Импорты запрашиваются браузером как нативные модули ES. Dev-сервер перехватывает запросы к файлам .vue и компилирует их на лету. И это происходит мгновенно.

Обратите внимание, что Vite – это пока экспериментальное решение, и я не знаю, что случится в будущем и насколько долго эта статья будет оставаться полезной. Относитесь к этому как к аперитиву или как просто к чему-то веселому.
Читать дальше →

Змеиный сахар или пишем свой range в JavaScript

Время на прочтение2 мин
Охват и читатели6.7K
Многие любят Python… Новички восщищаются отсутствием точек с запятой, а продвинутые радуются действительной простотой. Сегодня речь и пойдет о том, как в JavaScript реализовать подобие той самой простоты Python, а конкретно функцию range.

В Python по функции range можно итерировать или, например, преобразовать в массив — list(range(begin, end)).

Но вопрос в том, можно ли мощностями JavaScript создать что-то подобное и при этом, чтобы решение выглядело нативным и простым?

Первое, что приходит в голову — написать подобный класс:

function range(from, to, step = 1){
    this.current = from
    this.to = to
    this.step = step

    this.next = () => (this.current += step) % to
}
Читать дальше →

Обнаружение бездействующих пользователей с помощью API Idle Detection

Время на прочтение7 мин
Охват и читатели11K
Статья, перевод которой мы сегодня публикуем, посвящена новому API Idle Detection. Этот API уведомляет разработчиков при бездействии пользователя, указывая на то, что пользователь не работает с клавиатурой, мышью, экраном. API сообщает об активации хранителя экрана, о блокировке экрана, о переходе пользователя на другой экран. Разработчик при этом может настроить пороговые уровни показателей активности пользователя, достижение которых вызывает срабатывание API.


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

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

Время на прочтение6 мин
Охват и читатели9.3K
Компания Nokia выпустила обновлённую версию легендарного телефона Nokia 3310 примерно 3 года назад. Я вполне мог его себе позволить (стоил он совсем недорого), поэтому я таким телефоном обзавёлся. Он оснащён двухмегапиксельной камерой и батареей, которой хватает на 30 дней (до 22 часов разговоров). Он поддерживает 2G-сети, оборудован 16 мегабайтами памяти, в нём есть классическая игра «Змейка» и браузер.


Телефоны Nokia 3310

Как создавать сайты, которые будут хорошо работать на таком телефоне?
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №417 (25 — 31 мая 2020)

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

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