Обновить
128K+

JavaScript *

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

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

Canvas — почти как SVG

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

Ссылка на канвас ниндзю в конце.

Конкретно речь пойдёт об элементе Path и как его реализовать на canvas.

Как мы помним path в svg умеет рисовать кривые безье, сплайны из этих кривых, а так же окружности. У канваса в этом плане возможностей куда меньше, так что будем работать с ним. Для начала научимся рисовать кривые. В svg как и в canvas кривые ограничены лишь 3-мя степенями, это сделано ради оптимизации, мы же будем использовать каноничное уравнение для их вычисления, так что кривые у нас будут любого порядка.
Читать дальше →

Конкурс по программированию: JSDash

Время на прочтение6 мин
Охват и читатели21K
UPDATE: Конкурс завершён. Итоги.

Компания Hola объявляет долгожданный летний конкурс по программированию! Победителей ожидают призы:

  1. Первое место: 3000 USD.
  2. Второе место: 2000 USD.
  3. Третье место: 1000 USD.
  4. Если Вы отправите кому-то ссылку на этот конкурс, поставив наш адрес в CC, и этот человек займёт призовое место, Вы получите половину суммы приза (разумеется, не в ущерб награде победителя). За одного победителя такую награду может получить только один человек — тот, кто отправил ссылку первым.

Авторы интересных решений будут приглашены на собеседования.



Правила



Условия конкурса на английском языке размещены на GitHub. Ниже — перевод на русский язык.

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

Обновление document.title в фоновой вкладке

Время на прочтение4 мин
Охват и читатели4.8K
Предположим, что у нас есть сайт по продаже билетов, на котором мы хотим в document.title показывать цену, чтобы увеличить удовлетворённость пользователей и дать им знать, что в какой вкладке у них открыто (т.к. мы не знаем, будет ли меняться место отправления/прибытия, дата, любимый перевозчик и так далее, а цена, напротив, для различных комбинаций практически всегда разная). При этом мы знаем, что, начиная с версии 56, Chrome проводит политику блокировки фоновых вкладок. Что это означает для данного функционала?
Читать дальше →

Redux Business Logic

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

Как-то раз в Телеграмм-чате React_JS (кстати, русскоязычный чат, присоединяйтесь) обсуждали вопрос: "где в React-приложении должен быть расположен код, отвечающий за бизнес-логику". Вариантов несколько, мнения разделились. Ну а я решил записать подкаст (автор @PetrMyazin).

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №269 (26 июня — 2 июля 2017)

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

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

JavaScript: многоликие функции

Время на прочтение9 мин
Охват и читатели20K
Если вы занимаетесь JavaScript-разработкой, о какой бы платформе ни шла речь, это значит, что вы способны оценить значение функций. То, как они устроены, те возможности, которыми они наделяют программиста, делают их поистине универсальным и незаменимым инструментом. Так думают и разработчики Test262 — официального набора тестов, который предназначен для проверки JavaScript-движков на совместимость со стандартом EcmaScript.



В этом материале они дают обзор синтаксических форм определения функций. В частности, речь пойдёт о том, что существует в JS со дня его появления, о том, что появилось в нём за годы развития, и о том, чего стоит ждать в будущем.
Читать дальше →

Создание React VR-приложения, работающего в реальном времени

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


Библиотека React VR позволяет писать для веба приложения виртуальной реальности с использованием JavaScript и React поверх WebVR API. Эта спецификация поддерживается последними (в некоторых случаях — экспериментальными) версиями браузеров Chrome, Firefox и Edge. И для этого вам не нужны очки VR.


WebVR Experiments — это сайт-витрина, демонстрирующий возможности WebVR. Моё внимание привлёк проект The Musical Forest, созданный замечательным человеком из Google Creative Lab, который использовал A-Frame, веб-фреймворк для WebVR, разработанный командой Mozilla VR.

Leaflet 1.x.x vs Openlayers 4.x.x. Часть 1. Исходный код

Время на прочтение3 мин
Охват и читатели9K
Хочу поделиться опытом работы с данными JS-картографическими фреймворками, надеюсь материалы помогут сделать выбор в вопросе: какую библиотеку использовать именно в вашем проекте. Чтобы не утомлять, разобью его на несколько логических частей. Начнем с основного и исходного — кода.

Что у нас там на Github?

Как мы писали стратегический кликер на хакатон ReactRiot

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

Привет. Не так давно мы с rjericho увидели статью Как я участвовал в хакатоне Angular Attack, и что из этого вышло. У нас в Барнауле хакатоны начали проводиться всего год назад. При этом они больше были ориентированы на быстрый старт IT-стартапа. Поэтому на них не получалось насладиться использованием всяких прикольных хипстерских библиотек, а приходилось пилить продукт на старых добрых PHP или Java. Однако нам давно хотелось поучаствовать в каком-нибудь фановом мероприятии, где можно просто запилить то, что душе угодно и не придумывать, как это монетизировать.


Был найден хакатон от тех же организаторов, что и AngularAttack: ReactRiot. То, что о реакте мы знали только по статьям на хабре только добавляло интерес к данному мероприятию.


Скриншот интерфейса получившейся игры

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

Плагин jQuery — jdDialog. Принцип «транзитных вызовов»

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

Постановка задачи


В процессе доработки существующей административной страницы на «самописном» движке возникла необходимость замены грубых стандартных модальных диалоговых окон на окна вписывающиеся в дизайн сайта. Переписывать административную часть никто не позволит, да и нет в этом никакой необходимости. Основное условие — быстрая интеграция в действующий код.

Поэтому принято решение выполнить косметическую операцию.

Итак, сформулированы следующие требования:

  • реализовывать на jQuery 1.9,
  • вызов аналогично стандартным окнам для быстрой замены кода,
  • вложенность диалоговых окон 2-3 уровня,
  • заменить диалоговые окна типов confirm и alert.
Читать дальше →

ArrayBuffer и SharedArrayBuffer в JavaScript, часть 2: знакомство с новыми объектами языка

Время на прочтение7 мин
Охват и читатели21K
В прошлый раз мы, в качестве подготовки к разговору об ArrayBuffer и SharedArrayBuffer, рассмотрели разные подходы к управлению памятью. Как вы, должно быть, помните, JS-движок играет роль посредника при работе с памятью, однако, новые объекты дают программисту некоторые ручные инструменты. Для чего это может понадобиться?

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

Тестирование или парсинг сайтов с динамическим дом и многое другое. Nightmare.js — ему все равно

Время на прочтение4 мин
Охват и читатели21K
Эта статья не будет содержать много лирики, марали или вводных зачем и кому это может быть надо.

В двух словах:


1. Пакет можно использовать для тестирования сайтов.
2. Пакет можно использовать для парсинга данных.
3. Пакет можно использовать для автоматизации ввода данных на сайты.

Альтернативы:


Casper.js, phantom.js, watir и много кто еще, в гугле полно всех и вся. Почему я за nightmare.js:

  1. Простота использования.
  2. Полная поддержка html5, никаких конфликтов с сайтами.
  3. Расширяемый через экшены.

Структура библиотеки


Nightmare класс использует фреймворк electron, для каждой страницы создавая объект (BrowserWindow) который запускает браузер оболочку Chromium.

Принцип работы


  1. Nightmare инициализирует новое приложение electron с стартовой страницей, которую необходимо подвергнуть дальнейшей обработке.
  2. Перед загрузкой исследуемой страницы загружаются скрипты, которые позволяют поддерживать двустороннее взаимодействие программиста и страницы через серию эмиттеров.
  3. Nightmare предоставляет программисту набор апи (цепочки действий), позволяющие произвести любые манипуляции с сайтом и получить требуемые данные.
Читать дальше →

Бешеные псы: Angular 2 vs React: доклад Евгения Гусева и Ильи Таратухина

Время на прочтение1 мин
Охват и читатели17K
Angular2 отрелижен, React и подавно. Копья поломаны, мечи перекованы на орала, страсти уже поутихли и, вроде как, статус кво восстановлен. Кто-то использует один инструмент, кто-то другой, разве что, иногда раздаются возгласы: «А у них...!»



Однако не всё так просто. В конце концов, мы не только пишем код, но и решаем однотипные проблемы:

  • Как сделать наше приложение быстрым?
  • Как писать понятнее и проще?
  • Как писать быстрее?

Кто-то может сказать: «Эту тему уже миллион раз обсасывали, зачем опять?». Но, все же, если вы запускаете новый проект или решили переписать старый, перед вами всё равно встанет проблема выбора. И даже если вы считаете, что всё очевидно — это далеко не так.
Читать дальше →

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

Что будет если скрестить React и Angular?

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

Akili — javascript фреймворк, который появился под влиянием таких решений как React, Angular, Aurelia и в меньшей степени некоторых других. Целью было объединить все лучшее, что я вижу в них и максимально все упростить.

Нравится React, но отталкивает JSX? Любите Angular, но надоела всякая магия?

Тогда вам стоит попробовать это.
Читать дальше →

Таблицы! Таблицы? Таблицы…

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели63K

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

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

«Когда управление идёт не сверху, а появляется внутри тебя»: о JS-разработке в SEMrush

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


На открытии нашей конференции HolyJS от компании SEMrush на сцену выходила фронтенд-разработчик Анастасия Манзюк, и в своём приветственном слове упомянула удивительно высокий уровень автономии внутри компании: каждая команда разработки самостоятельно принимает многие решения, которые в другой организации могут быть «спущены сверху».

Нам стало интересно, как это сказывается на разработке, и мы задали Анастасии несколько вопросов и об этом, и в целом о её фронтенд-работе в компании.

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

Как Pony Express удается вам доставлять

Время на прочтение4 мин
Охват и читатели9.4K
Чего хочет любой клиент от логистического оператора? Конечно, чтобы всё происходило быстро, качественно и желательно, по максимуму, без его — клиента — непосредственного участия. Чтобы можно было заплатить свои кровные, а дальше оно уж как-нибудь само. Но в некоторых случаях, чтобы «оно само», клиенту тоже нужно немного пошевелиться. Как быть компании, если он не торопится? Под катом — опыт Pony Express.


Дайджест свежих материалов из мира фронтенда за последнюю неделю №268 (19 — 25 июня 2017)

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


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

Скрипт статического коллтрекинга

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


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

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

Connect: советы по современному фронтенду

Время на прочтение12 мин
Охват и читатели21K
Мы недавно выпустили новую и улучшенную версию Connect, нашего набора инструментов для платформ и магазинов. Группа дизайна Stripe много работала для создания уникальных посадочных страничек, которые рассказывают историю для наших основных продуктов. К релизу мы подготовили посадочную страничку Connect, чтобы отразить эти замысловатые, передовые возможности, но в то же время не утратив ясности и простоты изложения.

В этой статье мы опишем, как использовали несколько веб-технологий следующего поколения, чтобы запустить Connect, и пройдёмся по некоторым мелким техническим деталям нашего фронтенд-путешествия.
Читать дальше →