Обновить
128K+

JavaScript *

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

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

Параллакс в 2D игре. Интересный эффект движения при создании игры на JavaScript (canvas)

Время на прочтение1 мин
Охват и читатели7.7K
При создании игры наткнулся на интересную идею, как можно реализовать эффект трехмерного движения, при создании, например, платформера. Данная возможность, думаю, подойдет для большинства 2D игр, завязанных на скроллинге игрового мира.
image
Читать дальше →

Делаем крутые Single Page Application на basis.js — часть 1, вступительно-теоретическая

Время на прочтение7 мин
Охват и читатели32K
Всем доброго времени суток!
Данная статья начинает цикл публикаций, посвященных basis.js – фреймворку для создания полноценных Single Page Application.
Читать дальше →

Позвольте представить, Shadow DOM API на основе слотов

Время на прочтение9 мин
Охват и читатели12K
Предлагаю вашему вниманию перевод статьи «Introducing Slot-Based Shadow DOM API» автора Ryosuke Niwa, написанную им в блоге WebKit осенью прошлого года.

Мы рады анонсировать что базовая поддержка нового Shadow DOM API на основе слотов, которую мы предлагали в апреле (прим. переводчика: речь идёт об апреле 2015) уже доступна в ночных сборках WebKit после r190680. Shadow DOM это часть Веб Компонентов – набора спецификаций, изначально предложенных Google для того чтобы сделать возможным создание переиспользуемых виджетов и компонентов в вебе. Shadow DOM, в частности, предоставляет легковесную инкапсуляцию DOM дерева, позволяя создавать на элементе параллельное дерево, так называемое «теневое shadow дерево», с помощью которого изменяется отрисовка элемента без изменения DOM. Пользователи такого компонента не смогут ненароком что-то в нём изменить, ведь его shadow дерево не является привычным потомком элемента-хоста. Кроме того, действие стилей также ограничено областью действия (scope), а значит CSS правила, объявленные снаружи shadow дерева не применяются к элементам внутри такого дерева, а правила, объявленные внутри – к элементам снаружи.
Читать дальше →

HolyJS: с первой попытки

Время на прочтение6 мин
Охват и читатели13K
Петербургская JavaScript-конференция HolyJS начиналась почти как авантюра. Затевать совершенно новую конференцию, когда время на подготовку очень ограничено — смелое решение.

Такой авантюризм хорошо соответствует духу самого JavaScript-мира, где всё происходит стремительно, а смелые решения зачастую необходимы. Но возможно ли в таком случае провести конференцию на высоком уровне, с интересными докладами и без организационных проблем? Что в итоге было на мероприятии? Под катом — рассказ о том, как оно прошло.



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

Vidom — blazingly fast alternative to React

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

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

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

Подборка уроков для начинающего разработчика игр на JavaScript

Время на прочтение1 мин
Охват и читатели29K
В этой подборке уроков рассматриваются основы создания игр на JavaScript, изучив которые вы научитесь:
— Работать с позицией курсора мыши
— Вращать объекты внутри CANVAS элемента
— Выделять объекты мышью внутри CANVAS
— Перетаскивать объекты внутри CANVAS
— Создавать эмуляцию гравитации для объектов внутри CANVAS
— Определять скорость мыши
— Использовать мультиязычность в своих игровых проектах.
Все уроки полностью на русском языке и выполнены в наглядной форме.
image
Читать дальше →

Как мы разрабатываем новый фронтенд Tinkoff.ru

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

Tinkoff.ru


В апреле этого года мы перезапустили tinkoff.ru. Банк превратился в финансовый супермакет. Теперь не только клиент банка, но и любой посетитель оплатит мобильный, проверит налоги и оформит ипотеку — всё на одной платформе. В этой статье я поделюсь опытом и технологическими решениями, к которым мы пришли за год разработки.

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

Опрос: насколько строго вы следуете стандартам и лучшим практикам на фронтенде?

Время на прочтение1 мин
Охват и читатели12K
Как-то так получилось, что за последнюю неделю я посмотрел довольно большое количество выступлений на разных крупных и не очень конференциях. И часто там говорили об очень важных, в теории, вещах: производительности, доступности, прогрессивном улучшении.
Но, судя по моему опыту и ощущениям, на практике никто этим не занимается, кроме самых крупных компаний. Эти ощущения подтверждает, например, подкаст Веб-стандартов: там при обсуждении каких-то технологий или практик, постоянно звучат слова "мы это у себя не используем", "только если заказчик пнёт".
Я бы хотел проверить, так ли это, проведя небольшой опрос. Думаю, результаты будут интересны многим, приглашаю обсудить вопросы, ответы и вообще эту тему в целом в комментариях.
P.S. Я в опросе довольно вольно использую термин "стандарты". Понятно, что для некоторых вещей стандартов нет, но придумывать какое-то альтернативное название не вижу смысла.
14 вопросов

Как стать профессиональным веб-разработчиком: практическое руководство

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

Дорога длинна и трудна, но интересна и полезна!

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

По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.

Что нужно помнить:

1. Статью разрешается пролистывать

Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:

Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.
Читать дальше →

Java библиотека для эффективной передачи CSS и JavaScript

Время на прочтение8 мин
Охват и читатели9.2K
В данной статье описывается способ передачи JavaScript и CSS методом соединения ресурсов, с последующими их минимизацией и сжатием, при помощи небольшой Java библиотеки «Combinatorius», что позволяет ускорить и упростить передачу контента.

Демо: combinatorius.dkiriusin.com
GitHub: github.com/deniskiriusin/combinatorius

Основные возможности библиотеки


  1. Соединение JavaScript и CSS в один JavaScript и CSS ресурс соответственно для сокращения количества HTTP запросов.
  2. Локальное кэширование сгенерированных данных для улучшения времени отклика.
  3. Правильные Expires и Cache-Control HTTP заголовки для помощи браузеру с условными запросами.
  4. Поддержка ETag для определения соответствия между кэшем браузера с данными на сервере.
  5. Сжатие методом gzip для уменьшения размера HTTP ответа.
  6. Поддержка YUI Compressor.
  7. Поддержка версий передаваемых ресурсов (fingerprinting & static resources versioning).
  8. Поддержка CSS тем через параметры URL или Cookies.
  9. Простая конфигурация.
Читать дальше →

Простые графики с помощью D3.js

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

Gualtiero Boffi | Dreamstime.com


D3.js (или просто D3) — это JavaScript-библиотека для обработки и визуализации данных с невероятно огромными возможностями. Я, когда впервые узнал про нее, наверное, потратил не менее двух часов, просто просматривая примеры визуализации данных, созданных на D3. И конечно, когда мне самому понадобилось строить графики для небольшого внутреннего сайта на нашем предприятии, первым делом вспомнил про D3 и с мыслью, что “сейчас я всех удивлю крутейшей визуализацией”, взялся изучать исходники примеров…

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

А ваш AngularJS умеет работать на 3.5Mb ОЗУ?

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

В начале весны ABBYY LS совместно с Xerox запустили сервис для перевода документов Xerox Easy Translator Service. Изюминкой этого сервиса является приложение, запускаемое на МФУ Xerox и позволяющее отсканировать необходимое количество документов, дождаться перевода на один из выбранных 38 языков, произвести печать перевода — и все это не отходя от МФУ.

Приложение запускается на определенной серии МФУ Xerox на основе технологии Xerox ConnectKey с сенсорным экраном 800x480 точек. Аппаратная начинка МФУ зависит от конкретной модели, например, наша тестовая малютка Xerox WorkCentre 3655 имеет на борту 1Ghz Dual Core процессор и 2Gb оперативной памяти. Как ни удивительно, но МФУ имеет встроенный webkit-браузер, а наше приложение — это обычное html-приложение, разработанное на AngularJS 1.3.15.

О самом проекте мы писали в блоге раньше, а эта статья посвящена одному из увлекательных этапов проекта, а именно оптимизации AngularJS под работу на МФУ Xerox. Как оказалось на деле, платформа МФУ практически не накладывает никаких серьезных ограничений на разработку приложений, и они работают практически так же, как и на десктопных webkit-браузерах, за исключением одного НО —
Читать дальше →

Создаем приложение на JavaScript с помощью React Native

Время на прочтение27 мин
Охват и читатели164K
В этом уроке мы будем изучать React Native – фреймворк от компании Facebook для создания нативных приложений под iOS и Android. У него много общего с другим очень популярным фреймворком от Facebook – React Javascript, который предназначен для построения декларативных пользовательских интерфейсов.


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

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

[Go][JS] И снова про обработку форматов marc

Время на прочтение4 мин
Охват и читатели2.7K
Приветствую, я уже писал 2 статьи (на geektimes тыц тыц ) по поводу форматов MARC.

Сегодня у меня статья с техническими подробностями, я прибрал код своего решения, убрал оттуда магию и вообще причесал.

Под катом: дружба go и js, ненависть к marc-форматам

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

Что скрывает Array#sort: реверс-инжиниринг подручными средствами

Время на прочтение4 мин
Охват и читатели20K
Как вам, возможно, известно, спецификация языка JavaScript не предписывает какой-то определённой реализации метода sort у массивов. Алгоритм, находящийся «под капотом», может отличаться (и отличается) в различных браузерах. Теоретически, можно представить себе ситуацию, когда от того, как именно реализована сортировка массивов в конкретном движке, зависит производительность вашего веб-приложения.
Скрытый текст
Очень сильно сомневаюсь, что так может случиться на практике, но как человек, написавший в своё время определённое количество курсовых и дипломных работ, я просто не смог обойтись без секции «применение в народном хозяйстве».

Если речь идёт о браузере с открытым исходным кодом, то можно просто открыть этот код и посмотреть, какой там использован алгоритм. Однако существуют браузеры с закрытым исходным кодом (не будем показывать пальцем). Что делать в таком случае?

Поскольку мы на Хабре, я готов предположить, что некоторые читатели уже потянулись к своим любимым дизассемблерам, в то время как некоторые другие готовятся звонить своим друзьям из одной небольшой и нетвёрдой компании. Однако сегодня мы не будем копаться в машинном коде или использовать инсайдерскую информацию. Мы будем смотреть весёлые картинки.


Но зачем, сэмпай?

Web scraping на Node.js и защита от ботов

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

Это третья статья в цикле про создание и использование скриптов для веб-скрейпинга при помощи Node.js:


  1. Web scraping при помощи Node.js
  2. Web scraping на Node.js и проблемные сайты
  3. Web scraping на Node.js и защита от ботов
  4. Web scraping обновляющихся данных при помощи Node.js

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


Также во второй статье затрагивалась тема инициализации сессий, но, там речь шла о предельно простом случае, когда достаточно выполнить один дополнительный запрос и сохранить куки.


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


Важное примечание

В большинстве случаев защита от ботов на сайте направлена не против скрейперов, а против таких вещей, как мошенничество, накрутки или спам в комментариях. Однако это всегда лишний повод задуматься о легальности и этичности скрейпинга именно этого сайта. В этой статье для примера выбран сайт, про который хорошо известно, что его владельцы нормально относятся к скрейпингу (хотя и предпочитают, чтобы он выполнялся через специальный API). Простые правила: если у сайта есть открытый API, значит его владельцы рады скрейперам, а если сайт большой и ультрапосещаемый, нагрузка от скрейпинга в обход API его особо не побеспокоит.


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

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

Jsqry — библиотека для запросов к JS объектам и массивам

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

Представляю вашему вниманию небольшую js-библиотеку Jsqry.
Проще всего проиллюстрировать её назначение следующим примером.


До:


var name;
for (var i = 0; i < users.length; i++) {
    if (users[i].id == 123) {
        name = users[i].name;
        break;
    }
}

После:


var name = one(users, '[_.id==?].name', 123);

Библиотечка позволяет извлекать информацию из объектов/массивов в одну строку, используя несложный язык запросов, вместо написания циклов (подчас вложенных).

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

Конкурс по программированию на JS: Классификатор слов (окончательные результаты)

Время на прочтение1 мин
Охват и читатели9.2K
Сегодня мы публикуем окончательные результаты конкурса по программированию и награждаем победителей.

По случайности, все трое призёров предпочли участвовать под псевдонимами. Мне кажется, с такими результатами им нечего стесняться. Если вы хотите представиться в комментариях, милости просим!

Итак, призовые места заняли:
  1. Antelle — 83.67% правильных ответов. Приз 3000 USD.
  2. SHB — 83.11% правильных ответов. Приз 2000 USD.
  3. chianti — 83.00% правильных ответов. Приз 1000 USD.

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

Полную таблицу результатов смотрите в английской версии на GitHub.

Progressive Web Apps: WhoAmI

Время на прочтение3 мин
Охват и читатели95K
Интерес к разработке приложений для мобильных операционных систем в сообществе разработчиков стабильно растёт, количество инструментов и подходов позволяющих создавать приложения становится всё больше. Сегодня я хочу написать о одном из новых подходов, а именно о Progressive Web Apps.



Читать далее

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

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


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