Обновить
282.48

JavaScript *

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

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

Редактор игрового движка: визуализация файловой структуры проекта

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

Всем привет, меня зовут Александр, я frontend-разработчик. Моя карьера программиста началась относительно недавно, у меня нет специального образования и долгое время я работал совершенно в другой области. Поскольку IT сфера весьма быстро развивается, мне приходится постоянно учиться в ускоренном темпе, чтобы поспеть за своими коллегами с большим опытом за спиной. Для саморазвития, в свободное от работы время, я решил начать свой pet-проект.
Читать дальше →

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

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

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


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

Генеративное искусство: создание треугольников после 3 часов изучения p5.js

Время на прочтение6 мин
Охват и читатели4.1K
У меня небольшой опыт использования компьютера для творчества и искусства. Когда я начал изучать p5.js, я вдохновился геометрическими рисунками и решил написать код, чтобы создать что-то крутое.

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

image
Случайные треугольники

В рамках урока нас просили не останавливаться, пока не получится то, чем мы будем действительно довольны – играть с формой, размером и цветом.
Читать дальше →

useSWR – моя новая любимая библиотека React

Время на прочтение6 мин
Охват и читатели30K
Перевод статьи подготовлен в преддверии старта курса «React.js разработчик».




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

Однако мы столкнулись с проблемой. Хранилища сами по себе становятся все более и более сложными. Порой страницы требуют нескольких вызовов API, а они в свою очередь полагаются на результаты других вызовов API. Дни превращались в недели, а недели в месяцы, тем временем наши unstated хранилища становились все более и более громоздкими. Мы сталкивались со странными ошибками, поскольку наша самодельная логика кэширования изо всех сил старалась справиться с неожиданными крайними случаями.
Читать дальше →

Kurento JSON RPC через WebSocket-JS на Spring Boot

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

Большинство знает Kurento, как WebRTC медиа-сервер. Но в их репозитории на git-хабе можно найти много чего интересного. Например, библиотека работы с JSON-RPC, которая берет на себя контроль сессии и управление протоколом.

В этой статье я расскажу как использовать это решение на Java. Сделаем простейший сервер на Spring Boot и клиент на JavaScript.
Читать дальше →

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

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


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


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


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

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

Первые мысли о Deno

Время на прочтение4 мин
Охват и читатели2.2K
Перевод статьи подготовлен в преддверии старта курса «Разработчик Node.js».




В Codegram мы любим экспериментировать с новыми технологиями, а Deno вышел всего неделю назад! Прочитайте статью, если хотите узнать об этой новой среде выполнения JavaScript и о том, что думает по этому поводу Codegram.

Возможно, вы уже слышали о Deno, а возможно нет, но сейчас интернет пестрит информацией о нем и на то есть причина! Появилась новая среда выполнения JavaScript с симпатичным динозавриком в качестве логотипа (некоторые считают, что на логотипе грустный носок, но нет…). Мы даже написали твит о нем за неделю до первого релиза, но, сказать по правде, мы впервые услышали о Deno еще два года назад после просмотра этого потрясающего выступления Райана Даля.

В этой статье мы поверхностно пробежимся по Deno и поделимся своими мыслями о нем. Приступим!
Читать дальше →

Ловушки и потоки

Время на прочтение16 мин
Охват и читатели3.6K
В оригинале эта заметка называется Hooks and Streams. Этот текст — не дословный перевод оригинала, часть оригинального текста изменена, часть пропущена. Иногда вместо термина Hooks используется слово ловушки или хуки, а вместо Streamsпотоки. Тем не менее, я старался придерживаться стиля автора.

Hooks and Streams


Dan Abramov написал замечательный пост, о там как можно написать setInterval в декларативном стиле при помощи React Hooks.


Я полагаю, что Hooks хотя и не лишены недостатков, действительно интересное и технически перспективное изобретение. Если вы знаете the rules of hooks и понимаете, зачем хуки нужны, значит все в порядке. Но я надеюсь убедить вас, что существует более простое и лучшее решение.


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

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

Alpine.js – события и глобальное хранилище данных

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

обложка статьи


В прошлый раз, когда мы делали to-do на Alpine.js, меня очень сильно расстроило, что, хоть я и могу создавать вложенные компоненты, я не могу получать данные из родителя. Через какую-нибудь переменную, $parent, например.


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


Если вы подумали, что это не очень хорошо, то вы не правы. На самом деле, это ужасно.


Всё, расходимся? Нет. Я еще раз полистал документацию и вспомнил про магическое свойство $dispatch. Ну, конечно… однопоточная связь, проброс событий. Ну давайте попробуем. А потом еще переосмыслим всё с глобальным store.

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

Нативная разработка vs кросс-платформенная — нужно ли выбирать?

Время на прочтение5 мин
Охват и читатели16K
Привет, Хабр! Сегодня мне хотелось бы остановиться на вопросе выбора между нативной и кроссплатформенной разработкой для мобильных приложений. Как показала практика, это актуальная дилемма как для заказчиков, так и для начинающих разработчиков, которые хотят приобрести наиболее полезный опыт для дальнейшей карьеры. Так что делюсь под катом опытом нашего отдела и некоторыми выводами, которые мы сделали для себя.


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

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

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

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

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

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

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

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

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

Создание эффекта быстрого полета сквозь космос (или падающего снега) за 10 минут на p5.js

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

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

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

Во-первых, делать такое кодом — это красиво.

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

Ну и в-третьих, этот код потом легко интегрировать в любой веб-проект в виде скрипта на JS.

Ну что же, в бесконечность и далее…
Читать дальше →

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

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

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

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

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

Vuex – решаем старый спор новыми методами

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

Во Vuex есть одна популярная практика — не использовать mapState и mapMutations. Вообще. Вместо это мы сразу же при создании нового значения в store делаем для него геттер, а для каждой мутации – экшен.


Что-то наподобие:


export default new Vuex.Store({
  state: {
    // 1
    count: 0
  },
  getters: {
    // 1
    count: (state) => state.count
  },
  mutations: {
    // 2
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 2
    increment({ commit }) {
      commit('increment');
    }
  }
});

Холивара не избежать. Это уже доказала вот эта статья. Опять в интернете кто-то не прав, и я должен доказать почему. И я докажу.

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

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

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


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

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

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

Машинное обучение с подкреплением через соревновательные нейронные сети

Время на прочтение3 мин
Охват и читатели9.6K
В классической игре «крестики-нолики» существует возможность представить все вероятные ходы — и никогда не проигрывать. Эту возможность я использовал как метрику своего обучения нейронной сети игре.

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

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

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


Ссылки:
Запись игры обученной сети
Обучить сеть с нуля
Исходники

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

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

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



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

CRUD API на Deno и PostgreSQL: работаем с динозавром

Время на прочтение8 мин
Охват и читатели3.5K
Всем привет. В преддверии старта курса «Fullstack разработчик JavaScript», хотим поделиться интересным материалом, который прислал наш внештатный автор. Данная статья не имеет отношения к программе курса, но наверняка будет интересна, как небольшой обзор на Deno.





"-Райан, мы тут концепцию CLI команд для Deno продумываем. Сколько флагов для secure runtime добавить?"
"-Да"
"-Райан, нам надо придумать символ языка, чтобы все понимали, что мы делаем что-то прям новое. Какое животное выберем?"
"-Динозавра"
Читать дальше →

Наложение 2d-текстуры на 3d-объект с использованием p5.js (часть 2 — наложение паттерна на куб)

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

Это вторая часть проекта, в которой мы накладываем динамический 2d-паттерн на 3d-объект. Вы можете начать с первой части (Часть 1) или просто скопировать итоговый код несколькими абзацами ниже.

Некоторое время назад я создал паттерн, который генерировался при помощи нескольких строк кода в библиотеке p5.js.
p5.js — это библиотека для Javascript, созданная в 2014 году. Ее основная цель — стать окном в мир программирования для дизайнеров, художников, учителей и прочих представителей творческих профессий. Он поддерживает и анимацию, и схемы, легко переводится в веб-формат.

Сейчас я расскажу, как сделать финальную часть — наложить паттерн на 3d-объект (в данном случае — куб).
Читать дальше →