Обновить
512K+

JavaScript *

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

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

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

Время на прочтение8 мин
Охват и читатели114K
Я думаю многие не раз слышали про 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 мин
Охват и читатели90K
Буквально пару часов назад у меня завязался спор на тему того, что 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, чтобы добавить интерактивность на ваш сайт.
Читать дальше →

Прослушиватели событий и веб-воркеры

Время на прочтение6 мин
Охват и читатели9.8K
Недавно я разбирался с API Web Workers. Очень жаль, что я не уделил время этому отлично поддерживаемому инструменту раньше. Современные веб-приложения очень требовательны к возможностям главного потока выполнения JavaScript. Это воздействует на производительность проектов и на их возможности по обеспечению удобной работы пользователей. Веб-воркеры — это именно то, что в наши дни способно помочь разработчику в деле создания быстрых и удобных веб-проектов.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №393 (9 — 15 декабря 2019)

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

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

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

9 очень полезных советов по JavaScript

Время на прочтение3 мин
Охват и читатели5.3K
Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Powerful JavaScript Hacks» автора Klaus.

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

Нативочка из переводимой статьи
Я люблю оптимизировать.

Но пользователям наплевать на мой оптимизированный код, если их сайт не работает в браузере Internet Explorer 11.

Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.


К слову, Netflix использует ту же платформу для тестирования своих веб-приложений. Более того, он даже указан как необходимый навык в некоторых вакансиях.

Endtest действительно имеет некоторые прикольные функции, такие как:

  • Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS
  • Редактор без кода для автоматизированных тестов
  • Поддержка веб-приложений
  • Поддержка как нативных, так и гибридных приложений для Android и iOS
  • Неограниченное количество видеозаписей для ваших тестовых прогонов
  • Сравнение скриншотов
  • Геолокация
  • Оператор if
  • Циклы
  • Загрузка файлов в ваши тесты
  • API Endtest, для легкой интеграции с вашей системой CI/CD
  • Расширенные утверждения
  • Мобильные тесты на реальных мобильных устройствах
  • Тестирование электронной почты с помощью Endtest Mailbox

Вы можете просмотреть документы по этому инструменту.

А теперь 9 очень полезных советов по JavaScript.

Делаем кроссплатформенное нативное десктоп приложение на Angular

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

angular-nodegui


Как вы уже наверно знаете, Angular уже есть во многих платформах:



Ну и, конечно, здесь не хватало десктопа (не будем пока про Electron).

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

Вывод типов в jscodeshift и TypeScript

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

Вывод типов в jscodeshift и TypeScript


Начиная с версии 6.0 jscodeshift поддерживает работу с TypeScript (далее TS). В процессе написания codemode-ов (преобразований), может потребоваться узнать тип переменной, которая не имеет явной аннотации. К сожалению, jscodeshift не предоставляет средств для вывода типов «из коробки».

Читать дальше →
13 декабря 2058. В этот день вся земная история разделилась на два этапа: до и после Контакта. На орбите нашей планеты появился объект внеземного происхождения. Незваного гостя засекли около Марса, а еще раньше «странно движущуюся комету» заметили астрономы в разных странах. Пришельцы оказались механической формой жизни, которая, впрочем, не проявляла враждебности.
Продолжение истории — под катом

Прекратите выдавать за утечку памяти что-то другое

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

На сегодняшний день написано очень много статей о том, что от подписок Observable RxJS надо отписываться, иначе произойдет утечка памяти. У большинства читателей таких статей в голове отложилось твёрдое правило "подписался? — отпишись!". Но, к сожалению, зачастую в подобных статьях информация искажается или что-то недоговаривается, а ещё хуже когда подменяются понятия. Об этом и поговорим.


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

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




Всем привет! Сегодня я решил показать, как написать свой тренажер слепой печати на JavaScript. Я думаю, каждый из нас в начале пути тренировал свою печать — ведь это один из важнейших навыков разработчика
.
Читать дальше →

Новые фронтендовые библиотеки на периферии React

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

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

Добро пожаловать под кат!
Читать дальше →