Обновить
256K+

JavaScript *

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

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

Динамическое меню c поддержкой touch move и mouse move на RevolveR

Время на прочтение6 мин
Охват и читатели3.1K
Наверняка многие из вас хотели бы научиться создавать красивые и подвижные меню в духе Android Java и Kotlin приложений. Скорее всего даже многие из вас ради этого уходили в области программирования отдельных приложений и были вынуждены осваивать инородный стек.

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

И так: Simple Dynamic Menu by RevolveR Labs.

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

Как эффективно применять React Context

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

В статье Как управлять состоянием React приложения без сторонних библиотек, я писал о том как сочетание локального состояния и контекста (React Context) поможет вам упростить управление состоянием при разработке приложения. В этой статье я продолжу эту тему - мы поговорим о методах эффективного использования потребителей контекста (Context Consumer), которые помогут вам избежать ошибок и упростят разработку приложений и/или библиотек.

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

Давайте, для начала, создадим файл src/count-context.js и пропишем там наш контекст:

Читать далее

Создание блога с помощью Nuxt Content (часть вторая)

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

обложка


Продолжаем изучать Nuxt Content.


Первая часть доступна здесь.


В этой части мы узнаем как стилизовать код в статьях, сортировать статьи по различным параметрам, работать с API Content и многое другое.

Визуализация сложных данных с использованием D3 и React

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

Существует много возможныx вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество – мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.


Какая цель этой статьи? Я хочу рассказать вам про крутой инструмент и о том, как его максимально эффективно использовать в связке с React. Мы последовательно разберем универсальный рецепт для построения компонентов любой сложности.


Удобная платформа для подбора библиотек и фреймворков JavaScript — openbase

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

Что за зверь?


openbase.io

«Находите и сравнивайте пакеты с открытым исходным кодом с отзывами пользователей, категоризацией и беспрецедентной информацией о популярности, надежности, активности пакетов и многом другом»

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

Отдаем корректный код 404 в связке VUE SPA + SSR

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

В статье рассмотрена реализация возврата корректных статус-кодов при использовании серверного рендера в Vue.js.

Читать далее

Возможности Angular DI, о которых почти ничего не сказано в документации

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

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

Читать далее

WorkBox: ваш toolkit в мире сервис-воркеров

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

Всем привет! 

Меня зовут Святослав. Я лидирую разработку сервисов оформления ипотеки в компании Домклик. Не так давно наша компания взяла курс на внедрение философии Progressive Web Application в наших клиентских сервисах.

Одним из важных аспектов PWA является использование технологии Service Worker API. Однако технология не так проста, как кажется на первый взгляд. Для эффективного использования нужно пройти тернистый путь из квестов, связанных с особенностями жизненного цикла воркеров, неполной поддержкой браузерами, проблемами с политикой кэширования и попутно встречающимися сайд-эффектами (кэширование устаревшего контента, сломанные ссылки и другое).

Workbox - это набор инструментов, предоставляющих высокоуровневый API для конфигурации и работы с такими браузерными технологиями как Service Worker API и Cache Storage API. Инструментарий состоит из набора изолированных модулей, которые помогут сделать ваше приложение "offline-ready". 

Читать далее

QR-художество

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

На хабре уже обсуждалось устройство QR-кодов и украшение их произвольными рисунками, но дизайнерская мысль до сих пор работала только в двух основных направлениях: замена квадратных модулей на более интересные формы, либо замена части кода рисунком. Такие художества возможны благодаря тому, что блоки данных в QR-коде дополняются кодами Рида-Соломона, позволяющими восстановить до 30% искажённых байтов. Основываясь на этом, дизайнеры QR-кодов давно уже наловчились заменять участок, занимающий до 30% площади кода, какой-нибудь картинкой. Я же решил испробовать другой подход — художественно искажать в QR-коде отдельные биты в целях получения интересного изображения. Например, в этом коде инвертированы лишь 50 модулей из 841.

Читать далее

Кастомные хуки. Part 1

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


Доброго времени суток, друзья!

Представляю вашему вниманию первую десятку пользовательских хуков.

Оглавление


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

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

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

Создание блога с помощью Nuxt Content (часть первая)

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

Создание блога на Nuxt Content


От переводчика: Я собирался сделать собственную статью по Nuxt Content, но наткнулся на готовую статью, которая отлично раскрывает тему. Лучше у меня вряд ли получится, поэтому я решил перевести. Написал автору в твиттер и практически сразу получил согласие. Статья будет с моими дополнениями для лучшего понимания темы.



Модуль Content в Nuxt это headless CMS основанной на git файловой системе, которая предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт. В этой статье мы разберем большинство преимуществ этого модуля и узнаем как создать блог с его помощью.

Использование Atomics.wait(), Atomics.notify() и Atomics.waitAsync()

Время на прочтение8 мин
Охват и читатели8K
Статические методы Atomics.wait() и Atomics.notify() представляют собой низкоуровневые примитивы синхронизации, которые можно применять для реализации мьютексов и других подобных механизмов. Но, так как метод Atomics.wait() является блокирующим, его нельзя вызывать в главном потоке (если попытаться это сделать — будет выдана ошибка TypeError).

Движок V8, начиная с версии 8.7, поддерживает неблокирующий вариант Atomics.wait(), называемый Atomics.waitAsync(). Этим новым методом можно пользоваться в главном потоке.



Сегодня мы расскажем о том, как применить эти низкоуровневые API для создания мьютекса, который может работать и в синхронном режиме (в потоках воркеров) и асинхронно (в потоках воркеров или в главном потоке).
Читать дальше →

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

Эффектное программирование. Часть 1: итераторы и генераторы

Время на прочтение5 мин
Охват и читатели12K
Javascript на данный момент является самым популярным языком программирования по версиям многих площадок (например Github). Является ли при этом он самым продвинутым или самым любимым языком? В нём отсутствуют конструкции, которые для других языков являются неотъемлемыми частями: обширная стандартная библиотека, иммутабильность, макросы. Но в нём есть одна деталь, которая не получает, на мой взгляд, достаточно внимания — генераторы.

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

while (true) {
    const data = yield getNextChunk(); // вызов асинхронной логики
    const processed = processData(data);
    try {
        yield sendProcessedData(processed);
        showOkResult();
    } catch (err) {
        showError();
    }
}

Это первая, пилотная часть: Итераторы и Генераторы.
Часть 2
Читать дальше →

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

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

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?

Популярные npm-пакеты. Volume 1

Время на прочтение11 мин
Охват и читатели12K
Доброго времени суток, друзья!

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

Предполагается, что вы хорошо знакомы с JavaScript и, в частности, с Node.js.

В данном части представлены следующие пакеты:


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

Javascript фреймворк разработки бизнес приложений

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

Мысль о своем фреймворке зародилась когда я еще активно работал с 1С. Хотелось иметь простую и открытую платформу для создания несложных бизнес приложений (простые системы учета, CRM и прочие).Не раз искал open source решения, но ничего подходящего не находил.

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

Хоть с HabraERP дальше обсуждений дело не пошло, я понял, что создание нужной мне платформы-фреймворка - возможно.

Спустя неполных 10 лет я готов представить вам KateJS - открытый javascript фреймворк разработки бизнес приложений.

Читать далее

Моки не кусаются! Осваиваем мокинг с React Testing Library

Время на прочтение4 мин
Охват и читатели15K
Перевод статьи подготовлен в преддверии старта курса «Автоматизация тестирования на JavaScript».





Моки — не кусаются!

Они предназначены помочь вам создавать более простые и надежные тесты. В этой серии статей я продемонстрирую вам паттерны, на которые я опираюсь при написании моков (mocks или “заглушек”) компонентов React.
Читать дальше →

Лучшая практика обработки ошибок в современном JavaScript

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

Когда вы пишете код, важно учитывать ситуации, приводящие к ошибкам. Обработка ошибок — это неотъемлемая часть работы над веб-приложением. Мы посмотрим на некоторые рекомендации по обработке ошибок в JavaScript. Чтобы не тратить ваше время зря, сразу поясняем, что описанное в статье может быть не в новинку многопытным кодерам. Если вы себя таким считаете — смело пропускайте этот материал, всех остальных приглашаем под кат.
Читать дальше →

Объектно-ориентированный JavaScript простыми словами

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


Доброго времени суток, друзья!

В JavaScript существует 4 способа создать объект:

  • Функция-контруктор (constructor function)
  • Класс (class)
  • Связывание объектов (object linking to other object, OLOO)
  • Фабричная функция (factory function)

Какой метод следует использовать? Какой из них является лучшим?

Для того, чтобы ответить на эти вопросы мы не только рассмотрим каждый подход в отдельности, но и сравним между собой классы и фабричные функции по следующим критериям: наследование, инкапсуляция, ключевое слово «this», обработчики событий.

Давайте начнем с того, что такое объектно-ориентированное программирование (ООП).