JavaScript *

JavaScript-разработчики часто жалуются на то, что их язык программирования несправедливо ругают за то, что он имеет слишком много чрезмерно усложнённых, запутанных возможностей. Многие борются с таким отношением к JS, рассказывая о том, почему критиковать этот язык за то, чем он является, неправильно. Автор материала, перевод которого мы сегодня публикуем, решил не защищать JS, обратившись, вместо этого, к тёмной стороне языка. Однако тут он не хочет говорить, например, о тех ловушках, которые JavaScript расставляет для неопытных программистов. Его интересует вопрос о том, что получится, если попытаться подтвердить плохую репутацию языка кодом, который мог бы написать тот, кто совершенно не заботится об окружающих.



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

Давайте создадим Angular компонент для создания множества checkbox из определенной логической группы. Компонент будет написан с идей повторного использования. Что это значит? Приведем пример ниже:

Представьте что перед вами задача сделать редактирование пользователей. При редактвровании обычно открывается форма со всеми полями. Пользователь может иметь одну или множество ролей из списка «Adimin», «Director», «Professor», «Student».

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

Привет, Хабр! Представляю вашему вниманию перевод статьи "Pagination in Vue.js" автора Denny Headrick.

Пагинация увеличивает UX, позволяя пользователям визуализировать данные в небольших блоках или на страницах. Вот и компонент Vue.js можно сделать с разбивкой по страницам, который позволит нам просматривать только часть наших данных за раз.

По словам автора материала, перевод которого мы публикуем сегодня, API CSS Paint — это невероятно интересная технология. Причём, речь идёт не только о её текущих возможностях, но и о представляемых ей явлениях, и о том, что её возникновение знаменует собой начало весьма примечательных изменений в мире CSS. Здесь мы поговорим об API CSS Paint и о причинах его появления, расскажем о том, как им пользоваться.

Коллеги, просьба обратить внимание, что если вы сегодня обновляли пакеты nodejs, а именно eslint-scope до версии 3.7.2, то вам нужно срочно поменять NPM-токены и проверить последние коммиты в ваши пакеты.

Сводная информация об инцидента по ссылке.

Если коротко, то получив неизвестным образом токены одного из разработчиков eslint-scope была выпущена версия пакета 3.7.2, собирающая токены из файла

npmrc=path.join(process.env.HOME||process.env.USERPROFILE,'.npmrc');

и отправляющая их злоумышленникам.

Версии eslint-scope 3.7.1 и 3.7.3 — безопасны.

Версия 3.7.2 удалена с репозитория NPM, но может еще оставаться в локальных кеширующих репозиториях.

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

Сборка react-boilerplate совсем недавно, 26.06.2018, была обновлена до версии 3.6.0. Этой сборке уже более трех лет, но, заметно выделяясь на фоне множества других (более 18 тыс. Stars GitHub), она практически никак не была замечена на Хабре. В чем же ее особенность? Если кратко — сборка предлагает разработчику «все и сразу»!

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

При разработке современных веб-сайтов интенсивно используются возможности JavaScript по работе с DOM. Скрипты позволяют отображать и скрывать элементы, из которых строятся страницы, настраивать свойства этих элементов. У объектов DOM, с которыми взаимодействуют из программ, имеются свойства и методы. О некоторых из них, по мнению автора материала, перевод которого мы сегодня публикуем, знают практически все веб-программисты. А вот некоторые, о которых он и хочет здесь рассказать, пользуются куда меньшей известностью.

Привет, Хабр! Представляю вашему вниманию перевод статьи "Equivalents in Python and JavaScript. Part 1".

Несмотря на то что Python и Javascript довольно сильно отличаются, существует много схожего, о чем должен знать любой фулстек разработчик. В этой серии из 4-х статей мы увидим что есть общего в обоих языках, и рассмотрим ряд известных проблем а также способы их решения.

Это не справочник, здесь не будет базовой информация о типах переменных, if-ах и циклах.
Но мы рассмотрим более сложные структуры данных и операции с ними используя Python и Javascript.

Также я проиллюстрирую это примерами из практики.

Эта серия будет интересна бэкендерам, использующим Django, Flask или любой другой Python-фреймворк, которые хотят получше узнать о современном Javascript'е. С другой стороны, эти статьи будут полезны фронтендерам, которые желают лучше понять как работает бэкенд, или даже написать свой сайт на Django.

Остальные статьи в этой серии:

1. Часть вторая: JSON, регулярки, ошибки-исключения
2. Часть третья: современные Python и JS: строковые шаблоны (f-строки), распаковка списков, лямбда-функции, итерации по спискам, генераторы, множества.
3. Четвертая часть — аргументы функций, создание и работа с классами, наследование, геттеры-сеттеры и свойства класса.

— Чайники, весы, игрушки, лампочки, кофемашины… В эти и другие устройства встраивают bluetooth-модули.
— Зачем?
— Чтобы дать пользователю управлять своими устройствами через приложение. К примеру, управлять освещением в комнате.
— Ой, а можно ли собрать какое-то своё простое устройство и управлять им прямо через браузер?
— Да! И эта статья как раз об этом.

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

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

Весь код написан в ES6 стиле, поэтому, что бы повторить его вам нужно использовать Babel в вашем проекте (а еще есть такие кто его не использует?).

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

Если вам интересно, то добро пожаловать под кат.

Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.

Cразу небольшой спойлер — организация состояния в mobx ничем не отличается от организации общего состояния без использования mobx на чистом реакте. Ответ на закономерный вопрос зачем тогда собственно этот mobx нужен вы найдете в конце статьи а пока статья будет посвящена вопросу организации состояния в чистом в react-приложении без каких-либо внешних библиотек.

Реакт предоставляет способ хранить и обновлять состояние компонентов используя свойство state на инстансе компонента класса и метод setState. Но тем не менее среди реакт сообщества используются куча дополнительных библиотек и подходов для работы с состоянием (flux, redux, redux-ations, effector, mobx, cerebral куча их). Но можно ли построить достаточно большое приложение с кучей бизнес-логики c большим количеством сущностей и сложными взаимосвязями данных между компонентами используя только setState? Есть ли необходимость в дополнительных библиотеках для работы с состоянием? Давайте разберемся.

Вы когда-нибудь задавались вопросом о том, как работают фреймворки? Автор материала, перевод которого мы сегодня публикуем, говорит, что когда он, много лет назад, после изучения jQuery, наткнулся на Angular.js, то, что он увидел, показалось ему очень сложным и непонятным. Потом появился Vue.js, и разбираясь с этим фреймворком, он вдохновился на написание собственной системы двусторонней привязки данных. Подобные эксперименты способствуют профессиональному росту программиста. Эта статья предназначена для тех, кто хочет расширить собственные знания в сфере технологий, на которых основаны современные JS-фреймворки. В частности, речь здесь пойдёт о том, как написать ядро собственного фреймворка, поддерживающего пользовательские атрибуты HTML-элементов, реактивность и двустороннюю привязку данных.

Общественное мнение перевело Bootstrap в категорию легендарных фреймворков прошлого, но следить за ним все ещё стоит. Bootstrap 4 — отличный навигатор по безопасной верстке, и главное, образец HTML over JS подхода к созданию веб-приложений, в полной мере раскрывает существующие возможности HTML для декларативного описания интерфейса пользователя.

И о том как развивается JavaScript код фреймворка тоже полезно иметь представление. Архитектура jQuery плагинов все еще используется но с 4ой версии это завернутые Rollup'ом в пакет классы ES6 транспиленные при помощи Babel6. jQuery вероятно скоро и не будет вовсе — об этом позже — а пока, на примере создания собственного плагина BsMultiSelect, на том же стёке что и Boostrap 4, будут раскрыты особенности развития фреймворка.

Всем привет! Наш первый поток курса «Разработчик JavaScript» выпускается уже через десять дней и мы запускаем потихоньку второй поток. Соответственно, мы снова делимся как и полезными материалами, так и проводим открытые уроки, где мы можете познакомится ближе с преподавателями и узнать что-нибудь интересное. Сегодня у нас урок по «Dependency Injection в Angular», который провёл создатель курса Александр Коржиков, где он разбирал основные понятия связанные с паттернами проектирования Dependency Injection — Dependency Injection / Service Locator / Inversion of control.



Как всегда ждём вопросы, предложения тут или может заглянуть на огонёк — на следующий открытый урок.

В этой статье я постараюсь детально охватить узкую сферу применения технологии в рамках фреймворка Angular и его уже неотъемлемого помощника — RxJs, при этом мы намеренно не будем касаться серверных реализаций, т.к. это полноценная тема для отдельной статьи.

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

Понадобилось тут отобразить данные в виде дерева, с возможностью редактировать разные поля, удалять/добавлять строки и т.д. В процессе поиска подходящих компонентов (хотелось найти под material-ui и react) стал пробовать devextreme-reactive. Ньюанс, однако, оказался в том, что devextreme-reactive хочет данные для дерева в виде плоского массива объектов, в каждом из которых указан parent_id «родителя». А GraphQL сервер у меня отдаёт дерево в виде вложенных друг в друга объектов с массивами объектов. Пришлось делать из одного другое — возможно, кому-то пригодится. А может кто-то скажет, что я заморочился не по делу и всё это делается куда проще.

Итак, в ответ на GraphQL запрос (есть тесты, в каждом есть вопросы, для каждого опроса есть несколько вариантов ответов и мы хотим получить всё сразу):