Обновить
256K+

JavaScript *

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

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

QEMU.js: теперь по-серьёзному и с WASM

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

Когда-то давно я смеха ради решил доказать обратимость процесса и научиться генерировать JavaScript (а точнее, Asm.js) из машинного кода. Для эксперимента был выбран QEMU, некоторое время спустя была написана статья на Хабр. В комментариях мне посоветовали переделать проект на WebAssembly, да и самому бросать почти законченный проект как-то не хотелось… Работа шла, но уж очень медленно, и вот, недавно в той статье появился комментарий на тему «Так и чем всё закончилось?». На мой развёрнутый ответ я услышал «Это тянет на статью». Ну, раз тянет, то будет статья. Может, кому пригодится. Из неё читатель узнает некоторые факты про устройство бекендов кодогенерации QEMU, а также как написать Just-in-Time компилятор для веб-приложения.

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

Пишите меньше кода

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

Хайп по Svelte после недавнего релиза 3 версии фреймворка всё-таки имеет место быть, чему свидетельствуют сильно возросшее комьюнити и огромное количество вопросов как в официальном чате, так и в нашем рускоязычном telegram-канале. Всё больше разработчиков украдкой или всерьёз присматриваются к этой технологии и задумываются о её применении в своих новых проектах. Для этих разработчиков и всех прочих интересующихся темой максимально эффективного написания кода, Rich Harris, автор и идеолог фреймворка, опубликовал статью о том, как Svelte помогает разработчику минимизировать усилия при создании современных реактивных web-приложений, перевод которой я и предлагаю ниже.

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

Ускоряем сборку веб-приложения с webpack

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

По мере того как ваше приложение развивается и растёт, увеличивается и время его сборки — от нескольких минут при пересборке в development-режиме до десятков минут при «холодной» production-сборке. Это совершенно неприемлемо. Мы, разработчики, не любим переключать контекст в ожидании готовности бандла и хотим получать фидбек от приложения как можно раньше — в идеале за то время, пока переключаемся с IDE на браузер.


Как этого достичь? Что мы можем сделать, чтобы оптимизировать время сборки?


Эта статья — обзор существующих в экосистеме webpack инструментов для ускорения сборки, опыт их применения и советы.


Оптимизации размера бандла и производительности самого приложения в этой статье не рассматриваются.

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

Создание многопользовательской веб-игры в жанре .io

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

Вышедшая в 2015 году Agar.io стала прародителем нового жанра игр .io, популярность которого с тех пор сильно возросла. Рост популярности игр .io я испытал на себе: за последние три года я создал и продал две игры этого жанра..

На случай, если вы никогда раньше не слышали о таких играх: это бесплатные многопользовательские веб-игры, в которых легко участвовать (не требуется учётная запись). Обычно они сталкивают на одной арене множество противоборствующих игроков. Другие знаменитые игры жанра .io: Slither.io и Diep.io.

В этом посте мы будем разбираться, как с нуля создать игру .io. Для этого достаточно будет только знания Javascript: вам нужно понимать такие вещи, как синтаксис ES6, ключевое слово this и Promises. Даже если вы знаете Javascript не в совершенстве, то всё равно сможете разобраться в большей части поста.
Читать дальше →

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

Время на прочтение8 мин
Охват и читатели53K
Автор материала, перевод которого мы публикуем, говорит, что в мире разработки программного обеспечения «архитектурным проектированием» можно назвать процесс конструирования приложения, в ходе которого его стремятся сделать качественным, надёжным и хорошо поддающимся поддержке. При этом паттерны (шаблоны) проектирования позволяют оперировать понятиями, представляющими собой подходы к решению распространённых проблем. Эти решения могут варьироваться от абстрактных, концептуальных, до предельно конкретных. Их знание позволяет разработчикам эффективно друг с другом общаться.

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

image

Цель этой статьи заключается в том, чтобы заинтересовать читателей чем-то вроде формального представления знаний в сфере разработки программного обеспечения, продемонстрировав им идею паттернов проектирования и описав несколько паттернов, которые интересны тем, что они нашли применение в современной JavaScript-Разработке.
Читать дальше →

«У меня только один метод обучения: просто работать» — интервью с Ryan Dahl (Node.js, Deno)

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


27 мая исполнится 10 лет с того момента, как Ryan Dahl выпустил самую первую версию Node.js. За прошедшее десятилетие проект стал более чем успешен, но сам Райан уже переключился на другие вещи. Чем он занимается теперь? Чем его новый проект может помочь JavaScript-разработчикам? Что он думает о разных языках, образовании и смене поколений?

25 мая, за два дня до круглой даты, Райан выступит в Санкт-Петербурге на нашей конференции HolyJS. А пока что участники программного комитета HolyJS Евгений bunopus Кот и Дмитрий dmitrymakhnev Махнёв расспросили его подробно обо всём перечисленном. На Medium мы опубликовали англоязычную версию интервью, а для Хабра сделали русскоязычный вариант.
Читать дальше →

Интро Newton Protocol: что можно уместить в 4 килобайта

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

Недавно я участвовал соревнованиях демосцены Revision 2019 в категории «PC 4k intro», и моё интро выиграло первое место. Я занимался кодингом и графикой, а dixan сочинял музыку. Основное правило соревнования — необходимо создать исполняемый файл или веб-сайт, имеющий размер всего 4096 байта. Это означает, что всё приходится генерировать с помощью математики и алгоритмов; никаким другим способом не получится ужать изображения, видео и аудио в такой крошечный объём памяти. В этой статье я расскажу о конвейере рендеринга своего интро Newton Protocol. Ниже можно посмотреть готовый результат, или нажать сюда, чтобы посмотреть как оно выглядело вживую на Revision, или зайти на pouet, чтобы прокомментировать и скачать участвовавшее в конкурсе интро. О работах конкурентов и об исправлениях можно прочитать здесь.

Что нового в Node 12

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

Недавно вышла Node 12 с кодовым именем Erbium, долгосрочная поддержка которой (LTS) продлится с октября 2019 по апрель 2022.


В новой версии много вкусностей и улучшений рантайма. Помимо этого, учитывая, что под капотом V8, нода также получит все улучшения движка.



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

JavaScript: 7 полезных мелочей

Время на прочтение4 мин
Охват и читатели23K
Автор заметки, перевод которой мы сегодня публикуем, говорит, что в JavaScript, как и в любом другом языке программирования, можно обнаружить множество маленьких хитростей, предназначенных для решения самых разных задач, как простых, так и довольно сложных. Некоторые из подобных приёмов широко известны, а другие, не такие распространённые, могут приятно удивить тех, кто о них не знает. Сейчас мы рассмотрим 7 полезных приёмов программирования на JavaScript.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №362 (22 — 28 апреля 2019)

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


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

Фибоначчи на собеседовании

Время на прочтение8 мин
Охват и читатели136K
Вычисление ряда Фибоначчи — это классическая алгоритмическая задача, потому её нередко дают на собеседованиях, когда хотят проверить, что кандидат в принципе хоть как-то умеет в алгоритмы. Предположим, вы тот самый кандидат. Вам дали задание: на языке JavaScript написать функцию fib(n), возвращающую энное число Фибоначчи. Считаем, что нулевое число Фибоначчи — это нуль. Проверка корректности аргумента не требуется. Какие у вас есть варианты?

image
Выбирай мудро

Нужно ли чистить строки в JavaScript?

Время на прочтение6 мин
Охват и читатели80K
Что? Строки могут быть «грязными»?

Да, могут.

//.....Какой-то код
console.log(typeof str); // string
console.log(str.length); // 15
console.log(str); // "ччччччччччччччч"

Вы думаете, в этом примере строка занимает 30 байт?

А вот и нет! Она занимает 30 мегабайт!
Читать дальше →

Deno — новый Node.js?

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

В нашем проекте, IDE для работы с API TestMace, в качестве основного языка используется TypeScript, поэтому мы активно интересуемся проектами, связанными с данным языком. Сегодня вашему вниманию представляется перевод статьи об инструменте Deno — runtime для TypeScript (но это не единственная его особенность). Приятного чтения.



Около трёх месяцев назад Райан Дал (создатель Node.js) выступил на конференции с докладом «10 вещей в Node.js, о которых я сожалею», где рассказал о некоторых своих неудачных проектных решениях для Node.js. Почти половину выступления он посвятил экспериментальному прототипу Deno, задачей которого было устранить недостатки Node.js.


Deno уже добрался до версии v0.1 (прим. переводчика — уже v0.3.8) и идёт правильной дорогой к своей цели заменить Node.js в будущем.

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

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

Использование JavaScript-консоли в браузерах

Время на прочтение4 мин
Охват и читатели48K
Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log(). Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №361 (15 — 21 апреля 2019)

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


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

Как не слить 10 миллионов бюджета вашего заказчика, играясь с Agile

Время на прочтение6 мин
Охват и читатели18K
В этом посте я расскажу о тех проблемах с которыми в течении года сталкивалась наша Scrum Front End команда при работе над приличным проектом. Мы начинали разрабатывать проект с нуля используя стек технологий React + Typescript. Оглядываясь назад я вижу многие миллионы выброшенные впустую просто из-за того, что процесс разработки не был поставлен с самого начала правильно. Но на это есть свои причины.
Читать дальше →

Оптимизация node.js приложения

Время на прочтение5 мин
Охват и читатели17K
Дано: старое http node.js приложение и возросшая нагрузка на него.

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

Давайте попробуем пойти путем оптимизации и разобраться, как можно найти и улучшить слабые места приложения. А быть может ускориться не трогая ни строчки кода :)

Всех заинтересованных добро пожаловать под кат!
Читать дальше →

Записки фрилансера: разработка первого React Native-приложения

Время на прочтение37 мин
Охват и читатели46K
Автор материала, перевод которого мы публикуем, недавно выпустил своё первое мобильное приложение, написанное на React Native. Так случилось, что это приложение стало и его первым проектом, который он создал как программист-фрилансер. Здесь он расскажет о том, с чем ему пришлось столкнуться в ходе работы — от инициализации проекта до его публикации в App Store и Google Play.


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

Учебный курс по React, часть 28: современные возможности React, идеи проектов, заключение

Время на прочтение5 мин
Охват и читатели14K
Сегодня, в заключительной части перевода курса по React, мы поговорим о современных возможностях React и обсудим идеи React-приложений, создавая которые, вы можете повторить то, чему научились, проходя этот курс, и узнать много нового.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Часть 28: современные возможности React, идеи проектов, заключение
The end!
Читать дальше →

Учебный курс по React, часть 27: курсовой проект

Время на прочтение12 мин
Охват и читатели20K
В этой части перевода учебного курса по React вам предлагается создать генератор мемов.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →