Обновить
512K+

JavaScript *

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

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

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.4K

Большинство знает 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.8K

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


В прошлый раз, когда мы делали 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.9K
image

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

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

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

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

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

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

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

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

Расцвет эпохи программируемых калькуляторов в нашей стране пришёлся на середину 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.7K
В классической игре «крестики-нолики» существует возможность представить все вероятные ходы — и никогда не проигрывать. Эту возможность я использовал как метрику своего обучения нейронной сети игре.

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

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

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


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

Также можно ввести предобученную модель из 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 мин
Охват и читатели3K
image

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

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

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

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

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





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



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

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

TS-Serializable 2: с конвертации свойств из snake case и декоратором вместо наследования

Время на прочтение3 мин
Охват и читатели3.1K
Недавно мне повезло попасть на проект бэкенд которого написан на php. А как принято у php бекэндов json с ответом они отправляют в snake case стиле. И как следствие вся работа с данными на фронте происходила в перемешку в camel case и snake case стилях. Для решения этой проблемы была доработана библиотека сериализации ts-serializable. Теперь при получении данных из json их можно приводить к принятому в js стилю camel case, а при отправке на сервер возвращать в snake case.

ts-serializable

Так же после выхода первой версии у некоторых пользователей были пожелания по функционалу. Эти пожелания реализованы в новой версии.
Читать дальше →

Змеиный сахар или пишем свой 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
}
Читать дальше →