Jem Space

Web - Electronic - DIY

Как работает JavaScript: обзор движка, среды выполнения и стека вызовов

Как работает JavaScript: обзор движка, среды выполнения и стека вызовов

JavaScript становится все более популярным, и команды используют его на разных уровнях своего стека - интерфейсные, серверные, гибридные приложения, встроенные устройства и многое другое. Этот пост предназначен для того, чтобы глубже изучить JavaScript и его работу: зная строительные блоки JavaScript и их взаимодействие друг с другом, вы сможете писать код

Подготовка изображения и перевод в gcode для плоттера

Подготовка изображения и перевод в gcode для плоттера

Inkscape Для того чтобы сделать из обычной картинки монохромную со штриховкой нам понадобятся: Inkscape Плагин axidraw для Inkscape - искать тут Плагин gcode tools для Inkscape (встроен) Процесс Открываем растровое изображение и векторизуем его через меню Контур - Векторизовать раст. Выбираем нужную градачию цветов чтобы получить удовлетворительное монохромное изображение для

Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API

Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API

В этом руководстве я покажу вам, как использовать API-интерфейс Fetch (ES6 +) для выполнения HTTP-запросов к REST API с некоторыми практическими кейсами, с которыми вы, скорее всего, столкнетесь. Хотите быстро просмотреть HTTP примеры? Перейдите к разделу 5. Первая часть описывает асинхронность в JavaScript. Примечание. Все примеры приведены в ES6 со стрелочными

Начните работу с Angular Grid за 5 минут

Начните работу с Angular Grid за 5 минут

Парадигма гридов данных должна быть знакома большинству разработчиков. Это компонент, используемый для отображения табличных данных в серии строк и столбцов. Возможно, наиболее распространенным примером сетки данных на десктопе является Excel. Гриды давно уже существуют на нативных платформах и недавно пробились в UI веб-приложений. Современные гриды сложны. Затраты на разработку собственных

Практический React: управляем рендерингом - производительность

Практический React: управляем рендерингом - производительность

Реальные проблемы и как их решить, за пять минут или быстрее. Проблема Вы используете Redux и решили добавить некоторые UI фичи или анимацию, но ваша производительность рендеринга оставляет желать лучшего. Все тормозит, и вы не знаете где фиксить. Предостережения: Независимо от Redux, это будет происходить по мере роста вашего приложения.

3 важных чек листа для веб-разработчиков

3 важных чек листа для веб-разработчиков

Возможно, вы слышали о «Front-End Checklist» - проекте, который я начал в октябре 2017 года на GitHub. Это началось как простой проект, который помог моей команде на Маврикии, но превратился в огромный проект с международной поддержкой, получив более 28 000 звезд на GitHub и переведенный на более чем 10 языков.

Вот почему создание массива через map не работает в JS

Вот почему создание массива через map не работает в JS

Кейс Для демонстрации предположим, что вам нужно создать массив чисел от 0 до 99. Как вы можете это сделать? Вот один из вариантов: const arr = []; for (let i = 0; i < 100; i++) { arr[i] = i; } Если вы схожи со мной, то при виде традиционного цикла for в JavaScript вас

CSS Style Guides

CSS Style Guides

Следуя CSS руководствам по стилям, вы можете писать красивый код, который сделает работу над проектом для любого разработчика приятной. Руководства позволяют создавать код, который будет гибким, легко масштабируемым и очень хорошо документированным для всех, кто переходит в команду разработки. CSS Guidelines CSS Guidelines написаны Гарри Робертсом. Это наши личные предпочтения

Уровень развития CSS: пристальный взгляд на CSS архитектуры

Уровень развития CSS: пристальный взгляд на CSS архитектуры

Мы все знаем, что организация, порядок и модульность - это ключ к успеху при работе с CSS, и поэтому CSS архитектуры становятся все более популярными. Я хотел попробовать их все, чтобы проверить плюсы и минусы, и это то, с чем я пришел. OOCSS от Nicole Sullivan означает Объектно Ориентированный CSS

CI и развертывание React приложений

CI и развертывание React приложений

Настройка среды разработки React может показаться запутанной и сложной для новичков. Вы, наверное, слышали, что разработчики говорят о необходимости различных пакетов, таких как babel, webpack и так далее (но это спорно). C ростом популярности React, есть несколько проектов с шаблонами, которые помогают разработчикам настроить подходящий энвайромент для React. create-react-app -

Повышаем скилы с помощью методов JavaScript за пару минут

Повышаем скилы с помощью методов JavaScript за пару минут

Большинство приложений, которые мы создаем сегодня, требуют преобразования колекций данных. Обработка элементов в коллекции - это частая операция, с которой вы, скорее всего, столкнетесь. Забудьте обычный способ реализации цикла for через (const i; i < value.length; i++ ). Прим. Как верно подметили читатели, код с const вообще работать не будет.

Многоликий this в JS

Многоликий this в JS

В этом посте я сделаю все возможное, чтобы объяснить одну из самых фундаментальных частей JavaScript: контекст выполнения. Если вы много используете JS-фреймворки, понимание «this» может сначала показаться приятным дополнением. Однако, если вы собираетесь серьезно относиться к программированию, понимание контекста абсолютно важно для того, чтобы быть JavaScript программистом. Мы используем this

Гибридные нейронные сети с GPU ускорением в JavaScript

Гибридные нейронные сети с GPU ускорением в JavaScript

Согласно отчету Octoverse 2017, JavaScript является самым популярным языком на Github. Измеренный по количеству пул реквестов и уровеню активности JavaScript сопоставим с Python, Java и Go. JavaScript завоевал Интернет и вторгся на сервер, мобильные телефоны, настольные и другие платформы. Между тем, использование GPU ускорения значительно расширилось за рамки компьютерной графики

Отладка Front-end: HTML/CSS

Отладка Front-end: HTML/CSS

Я представляю, что по крайней мере половина из вас прямо сейчас думает: «Это же даже не язык программирования». Тем не менее ... неумение отладки HTML/CSS вызывает серьезные проблемы при разработке веб-приложений. Не каждый разработчик знает, что у него есть мощный отладчик, прямо под его носом, который поможет ему отслеживать и

Отладка Front-end: Console

Отладка Front-end: Console

Разработчики пишут код и допускают ошибки, конечно, не намеренно, но все же. Чем старше ошибка, тем труднее ее найти и исправить. В этой серии статей я попытаюсь показать, что вы можете сделать, используя Google Chrome Devtools, плагины Chrome и WebStorm. В этой серии есть еще Как отлаживать Front-end: HTML / CSS.

Добавляем drawer насадку к EleksLaser-A3

Добавляем drawer насадку к EleksLaser-A3

К новогодним праздникам рискнул и заказал себе лазерный гравер EleksLaser-A3 Pro. Взять лазер мощностью 5 Вт меня задушила жаба, а функционал 2.5 Вт лазера мне показался достаточным. Поигравшись с выжиганием и лазерной резкой на картоне и тонких деревяшках, решил прикрутить к граверу функционал плоттера. Благо рабочее поле А3 позволяет

Инструменты, о которых мне следовало бы знать прежде, чем я стал кодить. Часть 2

Инструменты, о которых мне следовало бы знать прежде, чем я стал кодить. Часть 2

Несколько дней назад я написал статью для freeCodeCamp, которая с тех пор была прочитана больше раз, чем я мог себе представить. Реакция сообщества была подавляющей, унижающей и вдохновляющей. С целью максимального распространения этой статьи, я отправил ее в r/learnprogramming, думая, что она окажется полезной для некоторых начинающих программистов. Пост

План изучения JavaScript на 2018

План изучения JavaScript на 2018

Вы уже несколько лет работаете в сфере технологий, вы знаете HTML и CSS внутри и снаружи, и вы нормально зарабатываете. Но ваш внутренний голос продолжает шептать: «Пришло время для чего-то нового, для следующего шага в вашей карьере. Вам нужно научиться программированию». Да, прямо здесь. Я сменил много ролей в технической

Изучение CSS переменных за 5 минут

Изучение CSS переменных за 5 минут

Быстрый туториал о том, как начать работу. Пользовательские свойства CSS (также известные как переменные) - большая победа для разработчиков интерфейсов. Они привносят силу переменных в CSS, что приводит к меньшему повторению, лучшей читаемости и большей гибкости. Кроме того, в отличие от переменных препроцессоров CSS, переменные CSS фактически являются частью DOM,

Инструменты, о которых мне следовало бы знать прежде, чем я стал кодить

Инструменты, о которых мне следовало бы знать прежде, чем я стал кодить

В мире технологий есть тысячи инструментов, которые вам могут советовать другие. Откуда вам знать, с чего начать? Будучи новичком в программировании, мне было трудно отсеять эту лавину информации. Я обнаружил, что устанавливаю расширения, которые на самом деле не помогают мне в разработке, и часто даже мешают. Я никоим образом не

face-verify.js: Мониторинг пользователя, который просматривает сайт.

face-verify.js: Мониторинг пользователя, который просматривает сайт.

Во имя безопасности, конечно же. Это демо проект, показывающий, как технология Machine Box может быть интегрирована в JavaScript приложения. Facebox может взять изображение и рассказать вам, сколько лиц он видит, а также кому принадлежат эти лица, если вы ранее показали ему всего лишь 1 пример. Мы можем использовать эту возможность

Начинаем разработку с Web Bluetooth и Progressive Web Apps

Начинаем разработку с Web Bluetooth и Progressive Web Apps

Небольшое введение Web Bluetooth - это новая технология, которая соединяет Web с Интернетом Вещей. Web Bluetooth довольно молодой, он все еще перекраивается и прототипируется! Но это, конечно же, не значит, что мы не сможем с ним поиграть... По сути, Web Bluetooth позволяет вам управлять любым устройством Bluetooth Low Energy (умной

BLE & GATT или как отправить данные по Bluetooth.

BLE & GATT или как отправить данные по Bluetooth.

Разрабатывая кормушку для кота, я в итоге прикрутил к ней блютус. Конечно, можно поставить на телефон обычный Bluetooth to Serial Terminal и спокойно слать нужные команды. Но так как мы не ищем простых путей, я решил написать свое приложение (на JS + Cordova) для общения с модулем HM-10. Однако, общение оказалось

Освоение Chrome Developer Tools: техники нового уровня в разработке front end

Освоение Chrome Developer Tools: техники нового уровня в разработке front end

Возможно, вы уже знакомы с основными функциями Chrome Developer Tools: инспектором DOM, панелью стилей и консолью JavaScript. Но есть ряд менее известных функций, которые могут значительно улучшить отладку или воркфлоу разработки приложений. Темная тема Chrome оснащен встроенной темной темой для dev tools. Вы можете включить её, щелкнув значок трех точек

Progressive Web Apps — cледующий шаг в разработке веб приложений

Progressive Web Apps — cледующий шаг в разработке веб приложений

Что, если я скажу вам, что теперь веб-разработчик может легко создавать мобильные приложения? Все, что вам нужно знать это немного HTML, CSS и JavaScript, и вы готовы к бою! Не нужно проходить через боль при изучении нативных языков, таких как Java (для Android-приложений) или Objective-C и Swift (для iOS-приложений). Было