Обновить
256K+

JavaScript *

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

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

JavaScript-прокси: и красиво, и полезно

Время на прочтение6 мин
Охват и читатели27K
В JavaScript, сравнительно недавно, появилась новая возможность, которая пока используется не особенно широко. Речь идёт о прокси-объектах. Прокси позволяют создавать обёртки для других объектов, организовывая перехват операций доступа к их свойствам и операций вызова их методов. Причём, это работает даже для несуществующих свойств и методов проксируемых объектов.

image

Представляем вашему вниманию перевод статьи программиста Альберто Химено, в которой он делится различными идеями использования объектов Proxy в JavaScript.
Читать дальше →

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

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


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

Programmer Unknown's BattleGround: открытая площадка для сражений программистов

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

Изначально проект PUBG (просим прощения у оригинальной PUBG за использование их аббревиатуры, мы всего лишь хотим использовать эту игру для развития навыков программирования и не планируем публиковать ее в Steam в будущем) был разработан как внутренний проект нашей студии для развлечения. Затем же мы подумали, что он может быть полезен другим студиям, компаниям и образовательным учреждениям, и опубликовали его под лицензией MIT.
Читать дальше →

Разработка Tic-Tac-Toe на нативном JavaScript

Время на прочтение6 мин
Охват и читатели11K
Всем привет, и доброго времени суток, Хабравчане! Будучи в отпуске, дабы отвлечься от рутинных и рабочих процессов, решил чем-нибудь развлечь себя, и написать что-нибудь эдакое.

На чём писать? Решил выбрать нативный JavaScript, дабы подтянуть свой скилл, в одном из самых неоднозначных языков программирования. Что писать? Хоть и занимаюсь веб-разработкой, но давно испытываю любовь к GameDev'у, человек я творческий, что поделаешь. Поэтому остановился на одной из самых простых игр, — крестики-нолики.
Читать дальше →

Реактивные формы (reactive forms) Angular 5 (2+). Часть 2

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


На данный момент Angular является одним из самых популярных и быстроразвивающихся фреймворков. Одна из его сильных сторон — большой встроенный инструментарий для работы с формами.

Реактивные формы — модуль, который позволяет работать с формами в реактивном стиле, создавая в компоненте дерево объектов и связывая их с шаблоном, и дает возможность подписаться из компонента на изменение в форме или отдельном контроле.

В первой части речь шла о том, как начать работать с реактивными формами. В данной статье рассмотрим валидацию форм, динамическое добавление валидации, написание собственных синхронных и ассинхронных валидаторов.

Код примеров прилагается.
Читать дальше →

[Екатеринбург, анонс] UralJS #6 — три доклада о типизации, проблемах this и оптимизации React-приложения

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

image


В четверг 8 февраля в 19:00 в коворкинге «Соль» пройдет первая в 2018 году встреча UralJS. Разберемся, почему в Контуре TypeScript победил Flow, послушаем рецепты оптимизации от Лёши Иванова — злого марсианина и члена программного комитета Fronttalks, и поспорим, что круче: функциональщина или ООП.


UralJS появился как эксперимент — группе коллег не хватало профессиональной движухи, и мы решили ее организовать. В первый раз собралось 70 разработчиков, а теперь мы закрываем регистрацию на сотне участников, потому что площадки не резиновые. Расширяется география — к нам в Екатеринбург приезжали гости из Тюмени, Челябинска и Перми.


За 2017 год мы провели 5 митапов. Обсуждали, что делать, если маленький пет-проект привлечет миллион пользователей, рассказывали, какой классный Vue и тут же бомбили по этому поводу, разбирались с интернационализацией и восхищались потокам в JS. Летом мы попробовали другие форматы. Андрей Старовойт из JetBrains сделал большой доклад о том, как разработчики WebStorm выбирают технологии для поддержки. Вместе кодили на выходных — щупали Ангуляр и решали одну и ту же задачу пять раз с разными партнерами и ограничениями.


Что будет на этот раз:

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

Может ли в JavaScript конструкция (a==1 && a==2 && a==3) оказаться равной true?

Время на прочтение4 мин
Охват и читатели42K
Недавно по Твиттеру и Реддиту гулял интересный кусок кода на JavaScript. Вопрос, связанный с ним, заключался в следующем: «Может ли выражение (a==1 && a==2 && a==3) вернуть true?». Ответ на вопрос, как ни странно, был положительным.

image

Сегодня мы разберём этот код и постараемся его понять.
Читать дальше →

Динамический анализ кода с помощью Iroh.js

Время на прочтение6 мин
Охват и читатели9.5K
Владислав Власов, инженер-программист в Developer Soft и преподаватель Нетологии, написал для блога цикл статей о EcmaScript6, в первой части которого на примерах рассмотрел динамический анализ кода в EcmaScript с помощью Iroh.js.

Статический и динамический анализ кода


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

image

В языке EcmaScript, обладающим утиной типизацией (duck-typing), часто используются средства статического анализа, позволяющие без выполнения обнаружить потенциально опасные ситуации в коде: несоответствия типов передаваемых и принимаемых аргументов, некорректные операции с переменными несоответствующих типов, невыполняемые секции кода и так далее. Наиболее популярными являются решения Typescript и Flow, основанные на расширении языка специальным синтаксисом.
Читать дальше →

Частые трудности работы с React.js

Время на прочтение8 мин
Охват и читатели30K
Привет, Хабр! Представляю вашему вниманию перевод статьи Samer Buna «React.js Frequently Faced Problems».
Не паникуйте. Вы правы: существуют мириады веб-технологий, архитектур и фреймворков, и множество разрабатывается прямо сейчас. Помните: каждый, кто стал профессиональным веб-разработчиком начинал как и вы. Они изучали языки, библиотеки по одному, раз за разом, пока не прокачали свои навыки и механизмы работы

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

На самом деле, если вы сконцентрируетесь на одной вещи, например на создании сайта на простейшем HTML/CSS/JavaScript без библиотек, а потом добавите фреймворк по типу React’а, ваш путь от новичка до профессионала пройдет гораздо удобнее и приятнее.
И правда, новичкам бывает сложно разобраться с простыми вещами, на которые опытный разработчик даже не обращает внимание. Эта статья призвана разобрать популярные ошибки и затруднения, с которыми сталкиваются большинство изучающих React.
Читать дальше →

Не вебпаком единым

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

Представляем лог доклада с OrelJS о настройке удобной среды разработки с использованием SystemJS. У сборки на основе Webpack полно недостатков, в докладе представляется альтернативный подход на основе SytemJS и JSPM.


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

Книга «Angular и TypeScript. Сайтостроение для профессионалов»

Время на прочтение12 мин
Охват и читатели19K
image Всем привет! Недавно у нас вышла новая книга, описывающая работу с непростыми и мощными инструментами веб-разработчика: Angular и TypeScript. Авторы: Яков Файн и Антон Моисеев объясняют особенности фреймворка, приводя простые примеры кода, и нескольких глав излагают, как создать одностраничное приложение для онлайн-аукционов. Ниже мы рассмотрим раздел из книги, посвященный внедрению зависимостей.

Любое Angular-приложение представляет собой коллекцию объектов, директив и классов, которые могут зависеть друг от друга. Несмотря на то, что каждый компонент может явно создавать экземпляры своих зависимостей, Angular способен выполнять эту задачу с помощью механизма внедрения зависимостей.
Читать дальше →

Советы по стилю. Как написать читаемый React-код

Время на прочтение5 мин
Охват и читатели10K
Когда разработчик проводит code review, ему редко хватает времени вникнуть в каждую строку: приходится быстро продумывать различные ситуации, в которых этот код может не работать. При анализе существует несколько моментов, на которые стоит обращать внимание, чтобы быстро понять, как именно код работает. Подсмотрели у Nirmalya Ghosh несколько приемов, как сделать javascript-код изящнее при создании компонентов с помощью библиотеки React. Хотя у нас есть свои особенности разработки в ЕФС, о которых вы можете прочитать в этой статье, некоторые из описанных под катом приемов мы находим интересными. Читаем и обсуждаем в комментариях!


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

Зачем солить HTTP-коллбэки

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

Некоторые облачные сервисы хотят двустороннего общения для нотификаций: рассказать вашему backend о завершении долгой операции, показать случившиеся ошибки, предупредить о низком балансе платных услуг — вся вот эта история. И если для общения с сервисами мы привыкли использовать HTTP-запросы, то в обратную сторону есть много вариантов: от проверок статуса раз в десять минут и до постоянного WebSocket или HTTP/2 подключения с нотификациями в реальном времени. Самый простой способ это HTTP callbacks. Вы задаете в админке URL своего бэкенда, а облачный сервис в случае интересных событий делает HTTP-запрос к этому URL с дополнительный информацией в теле запроса. Обратная сторона простоты это безопасность. Как убедиться, что запрос сделал именно облачный сервис, а не злобный хакер Вася? Несколько способов под катом.
Читать дальше →

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

Не фича, но баг

Время на прочтение3 мин
Охват и читатели14K
22 декабря 2017 года — ВКонтакте выкатила интересный апгрейд собственного iOS-приложения. Вот цитата новостного агентства, касающаяся конкретных изменений:
В новой версии «ВКонтакте» для iOS и Android появилась поддержка Accelerated Mobile Pages (AMP) — мобильного стандарта, который позволяет быстро загружать внешние статьи. Теперь страницы всех сайтов, которые настроили AMP, открываются прямо внутри приложения.
(официальная новость)

Технология AMP, разработку которой инициировал Google, призвана ускорять работу вебсайтов на всех устройствах и платформах. Это современный подход к оптимизации HTML и CSS, позволяющий ускорять загрузку на устройствах с помощью preconnect API и асинхронного выполнения Javascript.
Читать дальше →

Javascript — решение асинхронной проблемы?

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

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

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

Как я чинил интерактивный логин, или Что там в кишках у //chrome/test/ChromeDriver?

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

Эта статья возникла из-за одной моей ошибки и двух багов — по одному в Chromium Headless и ChromeDriver. В результате пришлось собрать всё это из исходников (в статье есть подробнейшая инструкция), отладить цепочку взаимодействия Selenium<->ChromeDriver<->Chromium в отладчике IntelliJ IDEA и Microsoft Visual Studio, покопаться в Java, C++ и JS.


Статья будет интересна тем, кто хочет понять, чем им грозит переход на Selenium + Headless Chrome и как с этим жить. А также всем, кто просто хочет немного поглумиться над несчастным быдлокодером.


Под катом есть пачка скриншотов (трафик!).




Кстати, всё это можно было бы сделать скринкастом — но нельзя, потому что время компиляции C++ необычайно долгое. Вместо этого тут будут скриншоты для привлечения внимания.


Вначале напомню названия участвующих продуктов. Их три штуки:


  • Chromium — это браузер. Небрендированная версия Google Chrome, без автообновлений, анальных следящих зондов, но и без несвободных компонентов типа кодеков.
  • Chromium ChromeDriver — это часть Chromium, которая отвечает за управление им с помощью внешних инструментов. Это standalone фронт-сервер (отдельный exe-файл), реализует стандарт W3C WebDriver и использует в качестве бэкенда Chrome DevTools.
  • Selenium и его Selenium Chrome Driver — эта штука предоставляет Java API для управления Хромиумом. Джава тут не принципиальна, на JavaScript и jWebDriver было бы то же самое (а на Puppeteer — возможно, нет, ибо он использует DevTools напрямую).

Всё вместе даёт нам в руки браузер, управляемый с помощью API на Java, JavaScript и так далее.


Вспомнили? Поехали дальше.

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

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

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


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

Ещё большее ускорение WebAssembly: новый потоковый и многоуровневый компилятор в Firefox

Время на прочтение6 мин
Охват и читатели15K
Оба авторе: Лин Кларк — разработчик в группе Mozilla Developer Relations. Занимается JavaScript, WebAssembly, Rust и Servo, а также рисует комиксы о коде.

Люди называют WebAssembly фактором, меняющим правила игры, потому что эта технология ускоряет выполнение кода в вебе. Некоторые из ускорений уже реализованы, а другие появятся позже.

Одна из техник — потоковая компиляция, когда браузер компилирует код во время его загрузки. До настоящего времени эта технология рассматривалась лишь как потенциальный вариант ускорения. Но с выпуском Firefox 58 она станет реальностью.

Firefox 58 также включает в себя двухуровневый компилятор. Новый базовый компилятор компилирует код в 10–15 раз быстрее, чем оптимизирующий компилятор.

Вместе эти два изменения означают, что мы компилируем код быстрее, чем он поступает из сети.



На десктопе мы компилируем 30-60 МБ кода WebAssembly в секунду. Это быстрее, чем сеть доставляет пакеты.
Читать дальше →

JavaScript и ужасы мутаций

Время на прочтение9 мин
Охват и читатели42K
Мутация — это изменение. Изменение формы или изменение сути. То, что подвержено мутациям, может меняться. Для того чтобы лучше осознать природу мутации — подумайте о героях фильма «Люди Икс». Они могли внезапно получать потрясающие возможности. Однако проблема заключается в том, что неизвестно, когда именно эти возможности проявятся. Представьте себе, что ваш товарищ ни с того ни с сего посинел и оброс шерстью. Страшновато, правда? В JavaScript существуют те же проблемы. Если ваш код подвержен мутациям, это значит, что вы можете, совершенно неожиданно, что-то изменить и поломать.


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

Разрабатываем React-компоненты многократного использования

Время на прочтение4 мин
Охват и читатели12K
В прошлом году мы рассказывали, как устроен фронтенд в Программе «Единая фронтальная система», о библиотеке элементов и нашем подходе к переиспользованию UI компонентов. Сегодня предлагаем сравнить несколько подходов к разработке React-компонентов, спасибо Cory House за отличный материал!
Читать дальше →