Обновить
128K+

JavaScript *

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

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

Всё, что нужно знать о Progressive Web App (PWA)

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

PWA — прогрессивные веб-приложения.

Предупреждение. Эта статья не проспонсирована PWA. Все взгляды и мнения в статье принадлежат только её автору.

Progressive Web App или PWA — лучший способ для разработчиков заставить свои веб-приложения загружаться быстрее и быть более производительными. PWA — это веб-сайты, которые используют современные веб-стандарты, что дает возможность устанавливать их на компьютер или устройство пользователя. В работе они как приложения. Самый известный пример — это Twitter, который запустил сайт mobile.twitter.com как PWA на React и Node.js.
Читать дальше →

Как мы заказ обеда в офис улучшали (без доступа к серверу)

Время на прочтение9 мин
Охват и читатели4.1K
Всем привет.

Я работаю в офисе. Разработчиком ПО. И иногда я ем. Да что уж, каждый день. Работодатель снабжает нас обедами — работники заказывают обед на завтра, а в это завтра поставщик обедов привозит то, что работники заказали. То, что заказали и то, что привезли, не всегда совпадает, но к делу это не относится. Обед заказывается на странице заказа обедов. Но…
Читать дальше →

Эксплуатация xss уязвимости

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

Эксплуатация xss уязвимости



Данная статья описывает применению xss уязвимости:


  • Кража токена
  • Кража окружения
  • Изменения контента сайта
  • Получения доступа к системе хостинга
Читать дальше →

Начало работы с методами JavaScript-массивов .map(), .filter() и .reduce()

Время на прочтение5 мин
Охват и читатели57K
Когда я разбирался в том, как пользоваться методами JS-массивов .map(), .filter() и .reduce(), всё, что я читал, смотрел и слушал, казалось мне очень сложным. Эти концепции рассматривались как некие самостоятельные механизмы, ни к чему другому отношения не имеющие. Мне тяжело было ухватить их суть и их понять.



Я слышал, что это — базовые вещи, понимание которых является чем-то вроде границы между «посвящёнными» и «непосвящёнными». Хотелось бы мне тогда, чтобы мне сказали о них правду. Она заключается в том, что эти три метода символизируют то, что причины, по которым перебирают некие итерируемые объекты, часто вписываются в одну из трёх функциональных категорий.
Читать дальше →

Qt QJSEngine Hello world

Время на прочтение4 мин
Охват и читатели5.9K
Данный пример построен на примере из книги М.Шлее «Qt профессиональное программирование на Qt» «Черепашья графика». Для лучшего понимания работы советую почитать раздел «Язык сценариев Qt Scripts».

В примере будет реализован простой терминал, в который можно вводить команды. Результат выполнения команд будет отображаться в этом же терминале. Пользовательский интерфейс будет реализован на QML.

Создадим проект Qt Quick

image

Опишем форму. Файл main.qml:
Читать дальше →

Советы по написанию самодокументируемого кода

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

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


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


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

Смешиваем OpenJDK и NodeJS: межъязыковые взаимодействия и вертикальная архитектура

Время на прочтение13 мин
Охват и читатели3.8K
Привет, Хабр!

Давно вынашивали мысль обсудить с вами тему GraalVM, откладывали, пока не нашли, наконец, сегодняшнюю статью, тематика которой серьезно выходит за рамки разбора конкретной виртуальной машины. Автор Майк Хёрн (Mike Hearn) ни много ни мало излагает целую парадигму межъязыковых взаимодействий и многоязычного программирования (polyglot programming). Далее — знаменитый пример вертикального масштабирования и весьма длинная статья под катом.


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

30 полезностей для Firefox Developer Tools

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


Ниже приведены фичи и советы по использованию Firefox Developer Tools. Некоторые из них аналогичны возможностям инструментов в Chrome, для некоторых аналоги в других браузерах отсутствуют.


Осторожно, под катом много тяжёлых гифок!

Осторожно, под катом много тяжёлых гифок!

Пишем тренажер слепой печати на чистом JavaScript: Часть 2

Время на прочтение9 мин
Охват и читатели4.7K
Здравствуйте! В преддверии старта курса «Fullstack разработчик JavaScript» один из наших авторов решил поделиться своим опытом создания тренажера для слепой печати. А мы же, в свою очередь, хотим показать данный материал вам и сегодня делимся заключительной его частью.




Первую часть можно почитать здесь
Читать дальше →

Node.js Streams для чайников или как работать с потоками

Время на прочтение8 мин
Охват и читатели111K
Я думаю многие не раз слышали про Node js Streams, но так ни разу и не использовали, либо использовали, не задумываясь как же они работают, запайпили (pipe) стрим и норм. Давайте же разберемся что такое стримы, запайпить (pipe), чанки (chunk — часть данных) и все такое))


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

Разработка приложений в VK mini apps

Время на прочтение8 мин
Охват и читатели52K
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.

image

Первоначальная публикация статьи в блоге Mail.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

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

Скрытая цена CSS-in-JS-библиотек в React-приложениях

Время на прочтение11 мин
Охват и читатели18K
В современных фронтенд-приложениях технология CSS-in-JS пользуется определённой популярностью. Всё дело в том, что она даёт разработчикам механизм работы со стилями, который удобнее обычного CSS. Не поймите меня неправильно. Мне очень нравится CSS, но создание хорошей CSS-архитектуры — задача не из простых. Технология CSS-in-JS может похвастаться некоторыми серьёзными преимуществами перед обычными CSS-стилями. Но, к сожалению, применение CSS-in-JS способно, в определённых приложениях, привести к проблемам с производительностью. В этом материале я попытаюсь разобрать высокоуровневые особенности наиболее популярных CSS-in-JS-библиотек, расскажу о некоторых проблемах, которые иногда возникают при их использовании, и предложу способы смягчения этих проблем.


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

Dap в действии. Пишем TodoMVC. Часть 1

Время на прочтение11 мин
Охват и читатели3.5K
Первая статья про dap, очевидно, не стала моим писательским успехом: подавляющее большинство коментов к ней свелись к «ниасилил» и «ниасилил, но осуждаю». А приз за самый единственный конструктивный комментарий верхнего уровня достается OldVitus, за совет продемонстрировать dap на примере TodoMVC, чтобы было с чем сравнить. Чем я в этой статье и займусь.

TodoMVC, если кто не знает, это такой стандартный UI-хелловорлд, позволяющий сравнить решения одной и той же задачи — условного «Списка дел» — средствами разных фреймворков. Задачка, при всей своей простоте (ее решение на dap влезает «в один экран»), весьма иллюстративна. Поэтому на ее примере я попробую показать, как типичные для веб-фронтенда задачи реализуются с помощью dap.

Искать и изучать формальное описание задачи я не стал, а решил просто среверсить один из примеров. Бэкенд в рамках этой статьи нам не интересен, поэтому сами мы его писать не будем, а воспользуемся одним из готовых с сайта www.todobackend.com, оттуда же возьмем и пример клиента и стандартный CSS-файл.

Для использования dap вам не нужно ничего скачивать и устанавливать. Никаких npm install и вот этого всего. Не требуется создавать никаких проектов с определенной структурой каталогов, манифестами и прочей атрибутикой IT-успеха. Достаточно текcтового редактора и браузера. Для отладки XHR-запросов может еще потребоваться веб-сервер — достаточно простейшего, типа вот этого расширения для Chrome. Весь наш фронтенд будет состоять из одного-единственного .html-файла (разумеется, ссылающегося на скрипт dap-движка и на стандартный CSS-файл TodoMVC)

Итак, с чистого листа.
Читать дальше →

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

Chorda. Пробуем сделать это декларативно

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

Каждый раз, когда мне нужно сесть за создание нового приложения, я впадаю в легкий ступор. Голова идет кругом от необходимости выбрать, какую же библиотеку или фреймворк взять на этот раз. Вот в прошлый раз я писал на библиотеке X, но теперь уже подрос и хайпанулся фреймворк Y, а еще есть классный UI Kit Z, да и с прошлых проектов осталась куча наработок.


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

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

Независимое глубокое клонирование объектов в JavaScript

Время на прочтение5 мин
Охват и читатели27K
В любом языке программирования есть типы данных, которыми программисты описывают субъекты, чтобы в дальнейшем работать и, в случае необходимости, обрабатывать их. Язык JavaScript не исключения, он имеет примитивные (Number, String, Boolean, Symbol и др) и ссылочные (Array, Object, Function, Maps, Sets и др) типы данных. Нужно отметить, что примитивные типы данных, являются иммутабельными — их значения не могут быть модифицированы, а только перезаписаны новым полным значением, а вот с ссылочными типами данных все наоборот. Например, объявим переменные типа Number и Object:

let num = 5;
let obj = { a: 5 };

Мы не можем модифицировать переменную num, нам лишь можно перезаписать ее значение, а вот переменную obj мы модифицировать можем:

let num = 10;
let obj = { a: 5, b: 6 };

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

Последние можно заморозить, к примеру, с помощью Object.freeze(obj), но данная тема выходит за рамки статьи (ссылки для любознательных Object.defineProperty, защита объекта от изменения).

Как типы данных передаются в функции в JavaScript? Каждый js-программист наверняка без труда ответит на этот вопрос, но все же скажем: примитивные типы данных передаются в функцию всегда только по значению, а ссылочные всегда только по ссылке. И вот тут с последними, в некоторых ситуациях, возникают проблемы.
Читать дальше →

Делаем адаптивную загрузку контента на сайте

Время на прочтение6 мин
Охват и читатели4.3K
Привет, Хабр!

Я делаю сайт для своего проекта. На сайте нужно показывать одновременно много гифок, каждая весит неплохо. Если показывать все разом, то страница грузится очень долго. При этом отдавать страницу без гифок (чтобы они там догрузились) тоже нельзя.

Всех, кому интересно, как я разобрался с этой проблемой, прошу под кат.
Читать дальше →

Используем console.log() в Chrome на полную

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


Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log() — лекарство от большинства болезней кода.


Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес


Но помимо повсеместно используемой функции console.log(), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.

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

Может перестанем называть доступностью UX и юзабилити?

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

Осторожно! Слово «доступность» встречается в этой статье 15 раз.


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

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

PM2: подходим к вопросу процесс-менеджмента с умом

Время на прочтение5 мин
Охват и читатели88K
Буквально пару часов назад у меня завязался спор на тему того, что Node.JS слишком медленная для крупных проектов и ей стоит предпочесть Golang, Rust, PHP, etc. Основным аргументом противоположной стороны в этом споре был факт однопоточности JavaScript. Якобы при разработке приложения производительность просто упрётся в эту однопоточность и ничего сделать уже нельзя — только переписать на каком-то другом языке. Однако дела с этим в NodeJS обстоят немного лучше, чем кажется на первый взгляд. Перед тем, как мы углубимся в эту тему хочу заявить, что уважаю право каждого разработчика использовать тот язык программирования, который пришёлся ему по душе и который он считает предпочтительным в той или иной задаче.

Сделав поиск по ключевому слову «PM2» на Хабре я не нашёл ни одной статьи, посвящённой этому process-менеджеру. Лишь одиночные упоминания в статьях других пользователей. Я загорелся (сильно сказано) идеей наверстать упущенное и пролить свет на этот тёмный уголок разработки backend на Node.JS (о котором многие знают, да, я в курсе). Всех заинтересовавшихся прошу под кат.

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

Ещё пять идей, как прокачать свое мастерство фронтенд-разработчика (декабрь 2019)

Время на прочтение2 мин
Охват и читатели7.7K
Цель публикации — подкуинуть несколько идей, что можно повторить, чтобы повысить свое мастерство front-end разработчика. Это просто идеи, без исходников и туториалов, что немного усложняет задачу, но прививает более самостоятельный подход к обучению.

Предыдущий полный список идей: Front-end додзё: проекты для тренировки навыков разработчика (5 новых + 43 старых)

1.Динамическое меню


Посмотрите, как это круто, когда кликаешь в меню и контент уменьшается.

image

motrix.app

Чему научитесь:

  • CSS переходы и анимации.
  • Как изменить компоновку и содержимое.
  • Как гармонично использовать HTML и JavaScript, чтобы добавить интерактивность на ваш сайт.
Читать дальше →