JavaScript *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

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

Это туториал по созданию интерактивного приложения для решения задачи о ходе коня на языках processing и p5.js

Часть I

Создадим коня — прямоугольник rect(). Коня обозначим серым кругом

rect(bx, by, boxSize, boxSize);
  fill(50); // серый
  ellipse(bx+50,by+50,20,20); //  круг

Пускай конь закрашивает все клетки по которым проходит, вот как здесь.

Я начал погружение в мир IT лишь три недели назад. Серьезно, три недели назад я даже не понимал синтаксиса HTML, а знакомство с языками программирования заканчивалось школьной программой по Pascal 10-летней давности. Однако я решился поехать в IT-лагерь, для детей которого было бы неплохо сделать бота. Я решил, что это вряд ли так сложно.

С этого начался длинный путь, в рамках которого я:

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

Выглядел итоговый результат примерно так:

Возможно, кто-то из вас заметил, что Google на 1 апреля добавила в приложение Google Maps для Android и iOS интерактивную игру «Змейка».

Специалисты Check Point обычно заняты исследованием последних киберугроз, но здесь очень увлеклись этой игрой, правда, сильно расстраивались из-за проигрышей… поэтому возникла логичная мысль: почему бы её не взломать!

Представляем вам перевод статьи автора Thomas Lombart, которая была опубликована на сайте medium.freecodecamp.org. Перевод публикуется с разрешения автора.


Пример использования метода reduce для сокращения массива

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

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

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

Я начал подбирать фреймворк, предоставляющий декларативный интерфейс. В моём представлении он на входе должен получать в максимально упрощённом виде описание содержимого формы (например в формате YAML, JSON, BEMJSON, XML, или даже INF), а на выходе рисовать в браузере красивую форму с работающими элементами управления.

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

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

Когда я начал изучать JavaScript, то первым делом составил список приемов, которые помогали мне экономить время. Я подсмотрел их у других программистов, на разных сайтах и в мануалах.

В этой статье я покажу 12 отличных способов улучшить и ускорить свой JavaScript-код. В большинстве случаев они универсальны.

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.

CodeX крутые ребята, которые базируются в Университете ИТМО. На базе этого университета студенты и выпускники создают интересные и полезные проекты: Hawk.so, Capella, AR-tester и другие.

Один проект очень помог нашему бизнесу. Редактор Editor.js сохраняющий исходный код в JSON.

Каждую неделю мы получаем вопрос: "Когда уже Ivy будет готов?". Пришло время рассказать, как обстоят дела с версией 8.0, а также поделиться с вами планами по доведению до ума и релизу движка Ivy.

В восьмой версии, выходящей во втором квартале текущего года, мы хотели бы ввести возможность опционального включения предварительной версии Ivy (Ivy Preview).

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

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

Привет, друзья. В конце апреля мы запускаем новый курс «Безопасность информационных систем». И уже сейчас хотим поделиться с вами переводом статьи, которая непременно будет очень полезной для курса. С оригиналом статьи можно ознакомиться тут.

В статье описаны ключевые основы, они являются общими для всех движков JavaScript, а не только для V8, над которым работают авторы движка (Бенедикт и Матиас). Как JavaScript разработчик могу сказать, что более глубокое понимание того, как работает движок JavaScript поможет разобраться в том, как писать эффективный код.

В этой статье рассмотрим как можно быстро перевести ваш Angular проект на мультиязычный режим работы и какие есть для этого утилиты.

Чуть более недели назад, в рамках конкурса от Телеграм, пришлось окунуться в "волшебный мир" svg, математических формул, оптимизации и анимации. Конкурсным заданием было создание достаточно простого чарта на JS, но некоторые нюансы задания и акцент на производительности делали его интересным. Учитывая желание сотворить нечто с претензией на победу, погружаться необходимо было несколько глубже привычной пороговой отметки для типовых (и не очень) проектов из мира фронтэнд разработки.

С завершением конкрусной работы не сложилось, но это время не было потрачено впустую. Главным открытием, стала возможность полноценой работы с 3D графикой в SVG! Создание моделей, вращение по выбранной оси, анимации по сценарию и многое другое — все это доступно уже здесь и сейчас.

В сегодняшней части перевода учебного курса по React вам предлагается выполнить практическое задание по работе с формами.



→ Часть 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: курсовой проект

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Любой веб-разработчик, который занимается этим хотя бы несколько лет, наверняка день за днем слышит подобный вопрос:

Я действительно хочу стать веб-разработчиком, но я не знаю с чего начать. Есть какие-то предложения?

Лет 10 назад ответ был очень прост. Просто создайте index.html, добавьте туда несколько тегов, сделайте заголовок красным с помощью CSS и подключите JQuery для обработки кликов!

Ох, как же все изменилось. Теперь мы работаем с инструментами сборки, маршрутизацией на стороне клиента, специальными фреймворками с причудливым рантаймом, привязывая везде «this», шаблонными литералами, CSS-in-JS… как же выбрать то, что важнее всего?

В этом туториале мы разберем создание программы для дрона с голосовым управлением на Node.js и Web speech API. Коптер — Parrot ARDrone 2.0.

Дисклеймер

Уважаемый читатель! Если вы не имеете понятия, что такое React и Redux, читать дальше не имеет смысла, дальше технический бред. Я серьезно, понимание к чему эта записка, требует работы с указанными библиотеками — несмотря на то, что я постараюсь писать понятно, это статья не начального уровня. А еще это личный опыт и мнение, основанные на практике.

Что не так с использованием Redux?

Тут я надумал написать, а что собственно не так с использованием redux в моем проекте и тысячах других? Я же пишу приложения на react / redux эдак с апреля 2016 года(три года). Пора бы уже открыть некие интересности… А то лекции и доклады, особенно нацеленные на новичков, были, а вот какого-то взрослого взгляда назад и ретроспективы не было. А пока кто-то ставит звездочки пакетам, которые проверяют «а не 13 ли ты часом», я буду разбивать стену сложившихся стереотипов.