JavaScript — TechCave

JavaScript— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.

JavaScript— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).

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

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

Стена группы

Загрузка...
Den
2 месяца назад
#

defi.js — реактивная библиотека, основанная на Object.defineProperty



defi.js

defi.js — это библиотека, включающая в себя дюжину функций, которые добавляют интересные фичи любым JavaScript объектам с помощью геттеров и сеттеров.



Гифка для привлечения внимания (3.5МБ)
Репозиторий



В качестве Hello World создадим небольшой виджет, состоящий из поля имени, фамилии и приветствия (демо).



<input class="first">
<input class="last">
<output class="greeting"></output>


// данные по умолчанию
const obj = {
  first: 'John',
  last: 'Doe'
};

// слушаем изменения в свойствах first и last
// если произошло изменение, сообщим об этом в консоли
defi.on(obj, 'change:first', () => console.log('First name is changed'));
defi.on(obj, 'change:last', () => console.log('Last name is changed'));

// автоматически генерируем приветствие (свойство greeting) каждый раз,
// когда first или last изменились
defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`);

// объявляем двусторонний байндинг между свойствами 
// и соответствующими элементами на странице
defi.bindNode(obj, {
  first: '.first',
  last: '.last',
  greeting: '.greeting'
});


В итоге, если first или last изменились, обработчики события сообщают об этом в консоли, свойство greeting автоматически обновляется, а его элемент получает новое значение (по умолчанию, «Hello, John Doe»). Это случается каждый раз, когда свойства меняются, причем не имеет значения, каким образом. Можно установить значение с помощью кода obj.first = 'Jane', либо изменив значение поля, и все остальные изменения произойдут автоматически.



Источник
Загрузка...
Загрузка...
2 месяца назад
#

Использование Babel и Webpack для настройки React-проекта с нуля



Существует немало инструментов, позволяющих подготовить среду для React-разработки. Например, в наших материалах
учебного курса по React используется средство
create-react-app, позволяющее создать шаблонный проект, содержащий всё необходимое для разработки React-приложений. Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как самостоятельно настроить окружение для разработки React-проектов с использованием Babel и Webpack. Эти инструменты используются и в проектах, создаваемых средствами create-react-app, и мы полагаем, что всем, кто изучает React-разработку, интересно будет познакомиться с ними и с методикой создания React-проектов на более глубоком уровне. А именно, речь пойдёт о том, как сконфигурировать Webpack таким образом, чтобы это средство использовало бы Babel для компиляции JSX-кода в JavaScript-код, и как настроить сервер, используемый при разработке React-проектов.



Источник
Загрузка...
2 месяца назад
#

Behaviors — конечный автомат без головной боли



Стандартный подход к описанию последовательности вводов пользователя и реакции на них (например при управлении персонажем в игре) — это конечный автомат (state machine). Он, однако, часто приводит к громоздким программам, понимание которых требует немалых усилий или даже зарисовок на бумаге. В этой статье я предлагаю небольшой сдвиг в описании, который позволяет экономить место на экране и мозговой ресурс.


image

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

Источник
Загрузка...
2 месяца назад
#

Introscope: ну очень ленивое unit-тестирование



Мы на работе пишем много часто меняющейся бизнес-логики на JS (стартап же). Даже слишком много. И всё это хочется по старой привычке тестировать, но как-нибудь побыстрее, чтобы тесты особо не мешали говнокодить, когда это нужно, и не подгонять под тесты особенно сильно структуру модулей. В какой-то момент пришла мысль, что можно это еще и автоматизировать как-то с помощью простенького babel-плагина, чтобы он для начала все приватные переменные и методы выворачивал в тестовой среде, а в продакшене не трогал. Это оказалось довольно просто и увлекательно. Так появился Introscope, которым мы теперь тестируем всё более-менее сложное.



Источник
Загрузка...
Den
2 месяца назад
#

Ленивые функции в JavaScript



Привет!



Подумал я тут рассказать вам о том, как в JavaScript с помощью библиотеки Fluture можно создавать и использовать ленивые функции. Это будет краткий обзор на то, как создавать функции, как обрабатывать ошибки и чуть-чуть про параллелизм. Функциональным программированием мозги парить не буду! Обещаю!



Источник
Загрузка...
2 месяца назад
#

Основные проблемы разработки современных интерфейсов



Привет, Хабр! Представляю вашему вниманию перевод
поста Дэна Абрамова
«The Elements of UI Engineering» о современных проблемах и задачах, которые должны быть решены в хорошем интерфейсе. Автор разбирает фундаментальные проблемы при разработке интерфейсов, осмысление и решение которых самостоятельно — без использования готовых библиотек и фреймворков — способно дать глубинное понимание существующих на рынке решений в области frontend-разработки.



Примечание переводчикаТекст написан и переведен от первого лица. Автор оригинала на английском —
Дэн Абрамов, разработчик библиотеки React для построения сложных пользовательских интерфейсов.

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

Я убежден, что вы можете начать свое познание «с места в карьер» и нет необходимости изучать технологии (технологический стек для веб-разработки — прим. переводчика) в определенном порядке. Но я так же считаю, что имеет огромное значение накопление опыта и профессиональных навыков в выбранной области. Лично я всегда испытывал наибольший интерес к созданию пользовательских интерфейсов.

И я раздумывал — в чем же я разбираюсь и что нахожу важным? Конечно, я хорошо знаком с такими технологиями, как Javascript и React. Однако, самые важные вещи, которые приходят с опытом, неуловимы и обычно ускользают при попытках точно их сформулировать. Я никогда не пытался выразить их словами. Это моя первая попытка систематизировать и описать некоторые из них.

Источник
Загрузка...
2 месяца назад
#

Бесшовный клиент-сервер



Любой клиент-серверный проект подразумевает четкое разделение кодовой базы на 2 части (иногда больше) — клиентскую и серверную. Зачастую, каждая такая часть оформляется в виде отдельного независимого проекта, поддерживаемого своей командой девелоперов.

В этой статье я предлагаю критически посмотреть на стандартное жесткое разделение кода на бакэнд и фронтэнд. И рассмотрим альтернативу, где в коде нет четкой грани между клиентом и сервером.

Источник
Загрузка...
2 месяца назад
#

Three.js — делаем controls для космосима или планетария



Разрабатывая свой проект на тему космоса, столкнулся с тем что в three.js почему-то нет готового и удобного инструмента управления камерой, подходящего под такие задачи. Конечно я допускаю что просто плохо искал… Но, довольно продолжительный поиск результатов не дал.

OrbitControls — традиционный любимец примеров three.js, не умеет переворачивать камеру вверх ногами, и много разного другого нужного, тоже не умеет.

TrackballControls — замечателен тем, что камера вращается вокруг объекта как угодно, и вверх ногами тоже, но не умеет при этом поворачиваться на оси зрения, не умеет двигаться вперед-назад не меняя масштаб, нет удобной регулировки скорости движений и поворотов.

FlyControls — напротив, позволяет делать «бочку» и менять скорость, но… куда же делось вращение камеры вокруг рассматриваемого объекта.

Можно было, конечно, выкрутиться с помощью всяческих костылей, но как-то это не комильфо. Убедившись, что готового решения для моих целей нет, я решил создать его сам. Кто заинтересовался, прошу под кат.

Источник
Загрузка...
Den
2 месяца назад
#

Очередное руководство по уменьшению бойлерплейта в Redux (NGRX)





О чем пойдет речь?

Будем о говорить о нескольких (пяти, если быть конкретным) способах, трюках, кровавых жертвах богу энтерпрайза, которые вроде как должны помочь нам писать более лаконичный и выразительный код в наших Redux (и NGRX!) приложениях. Способы выстраданы потом и кофе. Просьба сильно пинать и критиковать. Будем учиться кодить лучше вместе.



Источник
Загрузка...
Den
2 месяца назад
#

Многопоточные вычисления на Javascript, или как телефон выиграл гонку у ноутбука



Привет, Хабр!

Продолжаем битву за производительность Javascript на примере построения сводных таблиц. В
прошлый раз мы реализовали несколько оптимизаций, и оставалась последняя реальная возможность ускорить расчет — перейти на многопоточные вычисления. В Javascript уже давно существуют
воркеры, реализация которых не лишена недостатков, но заявлено, что они используют реальные потоки операционной системы — так почему бы не попробовать? Неожиданно оказалось, что для распараллеливания простого, в сущности, алгоритма пришлось переписать синтакис агрегатных формул, так как старые не обладали свойстом аддитивности (подробнее под катом), но, в конечном итоге, все получилось.

Тестировалась обработка 1 миллиона фактов на двух устройствах:

  • Нетбук Linux 4.15, 2 x Intel Celeron CPU N2830 @ 2.16 GHz

  • Телефон Android 7.0, 4 x ARM Cortex-A53 @ 1.44 GHz





Источник
Загрузка...
2 месяца назад
#

Тестирование Node.js-проектов. Часть 1. Анатомия тестов и типы тестов



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

image

В частности, речь здесь пойдёт о выборе подходящих в конкретной ситуации типов тестов, об их правильном оформлении, об оценке их эффективности, и о том, где именно в CI/CD-цепочках нужно их размещать. Некоторые из приведённых здесь примеров проиллюстрированы с использованием Jest, некоторые — с использованием Mocha. Этот материал, в основном ориентирован не на инструменты, а на методологии тестирования.


Тестирование Node.js-проектов. Часть 2. Оценка эффективности тестов, непрерывная интеграция и анализ качества кода

Источник
Загрузка...
2 месяца назад
#

Тестирование Node.js-проектов. Часть 2. Оценка эффективности тестов, непрерывная интеграция и анализ качества кода




Тестирование Node.js-проектов. Часть 1. Анатомия тестов и типы тестов

Сегодня, во второй части перевода материала, посвящённого тестированию Node.js-проектов, мы поговорим об оценке эффективности тестов и об анализе качества кода.

image

Источник
Загрузка...
2 месяца назад
#

Хакнуть Госуслуги – можно, если очень нужно



Всем привет, дорогие хабравчане!

Это небольшая история – пример применения технических навыков в обход системы в своих целях.

Модератор: Внимание! Данный текст является описанием возможности в экспериментаторских целях. Напоминаем, что повтор подобных действий может привести к нарушению законодательства.



Краткая предыстория такова – я белорус, живу в Санкт-Петербурге, и решил я заменить имеющиеся у меня российские водительские права. Узнав о скидке в 30% при замене через сайт Госуслуг, я, как алчный белорус, решил сразу этим воспользоваться.

Источник
Загрузка...
2 месяца назад
#

Учебный курс по React, часть 6: о некоторых особенностях курса, JSX и JavaScript



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

image


Часть 1: обзор курса, причины популярности React, ReactDOM и JSX


Часть 2: функциональные компоненты


Часть 3: файлы компонентов, структура проектов


Часть 4: родительские и дочерние компоненты


Часть 5: начало работы над TODO-приложением, основы стилизации


Часть 6: о некоторых особенностях курса, JSX и JavaScript


Часть 7: встроенные стили

Источник
Загрузка...
3 4 6 7

Авторизация

Пользователи

gydman
Ivan Lavkov
Андрей Подольский
Kumskov
Juan
Tutu
naikdij88
NewEXE
Георгiй Москвитинъ

GeekBrains

КАРКАМ

Нетология