Обновить
256K+

JavaScript *

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

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

Почему Ramda?

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

Пост содержит перевод статьи «Why Ramda?», которую подготовил один из контрибьютеров Скот Сайет. Статья была опубликована 10 Июня 2014 года на сайте и рассказывает о том почему стоит обратить своё внимание на библиотеку Ramda и функциональное программирование в целом.


Примечание переводчика

В связи с тем, что статья была написана в 2014 году, некоторые примеры устарели и не работали с последней версией библиотеки. Поэтому они были адаптированы под последнюю версию Ramda@0.25.0.

Почему Ramda?


Когда-то давно buzzdecafe представил миру Ramda, в тот же момент сообщество поделилось на два лагеря.

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

[в закладки] Инструменты для тестирования JavaScript-проектов

Время на прочтение17 мин
Охват и читатели45K
Автор материала, перевод которого мы публикуем сегодня, сотрудник Welldone Software, говорит, что если в двух словах рассказать об инструментах для тестирования JavaScript-проектов, то для модульного и интеграционного тестирования рекомендуется использовать Jest, а для тестов пользовательского интерфейса — TestCafe. Однако каждый конкретный проект может нуждаться в чём-то особенном. Лучший способ найти именно то, что нужно — взять несколько инструментов, которые, как кажется, подойдут, и испытать их в действии. Эксперименты подскажут — на чём именно стоит остановиться.



Представляем вашему вниманию обзор наиболее широко используемых инструментов тестирования для JS-проектов, на которые стоит обратить внимание в 2018-м году.
Читать дальше →

Кольцевые столбчатые диаграммы в ассортименте

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

Radial diagramms
Эволюционный подход в решении задач как нельзя кстати подходит для визуализации данных. Дивжение от простого к сложному, от одномерных данных к многомерным итерация за итерацией. В этой статье рассмотрим различные варианты круговых диаграмм, от самой простой одномерной до нестандартной самодельной многомерной. В качестве инструмента будем использовать D3.js. Всех заинтересованных прошу под кат.

Округлить диаграммы

Moscow JS 40 в Avito — анонс

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

Всем привет! 1 марта в офисе Avito пройдёт Moscow JS 40, неформальная встреча JavaScript-разработчиков. С докладами выступят представители Avito, Райффайзенбанка и банка «Открытие». Обещаем много полезной информации и конечно, неформальное общение. Регистрируйтесь на встречу, приглашайте заинтересованных коллег. Под катом — тезисы выступлений, ссылки на регистрацию (upd: закрыта) и видеотрансляцию митапа.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №302 (12 — 18 февраля 2018)

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

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

Angular 5: Unit тесты

Время на прочтение10 мин
Охват и читатели56K
С помощью unit тестов мы можем удостовериться, что отдельные части приложения работают именно так, как мы от них ожидаем.

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

Даже существует мнение, что сложно тестируемый код — претендент на переписывание.

Цель данной статьи — помочь в написании unit тестов для Angular 5+ приложения. Пусть это будет увлекательный процесс, а не головная боль.
Читать дальше →

SVG маски и вау-эффекты: о магии простыми словами

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


О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.

Веб компоненты. Часть 1: Пользовательские элементы

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

Данная статья — первая часть из небольшой серии статей о создании веб-компонентов нативными средствами HTML и JS


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


Для реализации такого подхода, в настоящее время разрабатываются три спецификации, о первой из которых, пойдет речь в этой статье. Итак, знакомимся — спецификация пользовательских элементов (custom elements), рабочий черновик которой оупбликован 13.10.2016 и последняя версия которого датирована 04.12.2017.


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


  • определение (собственно, создание) нового элемента
  • упаковка нестандартного функционала и данных в один тег
Читать дальше →

Сумма iconCaption точек в кластере LoadingObjectManager

Время на прочтение2 мин
Охват и читатели2.7K
Допустим, вы используете апи яндекс карт.

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

Быстрый запуск Github репозитория c Angular CLI в вашем браузере

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

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

Именно поэтому была создана среда разработки StackBlitz, которая позволяет редактировать Angular CLI проекты в браузере. В ней сейчас пишутся примеры из официальной документации Angular.io!

Круто было бы быстро запустить любой Angular CLI проект с Github прямо в браузере, просто изменив URL-адрес?
Читать дальше →

Создание модального компонента с помощью Vue.js

Время на прочтение6 мин
Охват и читатели36K
В этой статье вы узнаете, как с Vue.js создать переиспользуемый компонент модального окна с использованием анимированных переходов и слотов.

Определение структуры шаблона


Начнем с определения нашего шаблона. Нам понадобится div для заднего плана (тени), div для самого модального окна и некоторые элементы, для определения его структуры:

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <slot name="header">
      </slot>

      <slot name="body">
      </slot>

      <slot name="footer">
      </slot>
    </div>
  </div>
</template>

Обратите внимание на использование слотов? Мы могли бы использовать входные параметры (props) для создания заголовка (header), тела (body) и футера (footer), но использование слотов даст нам большую гибкость.

Слоты позволяют нам легко использовать одно и то же модальное окно с различными типами содержимого тела нашего компонента. Мы можем использовать модальное окно, чтобы показать простой текст, но мы можем захотеть повторно использовать то же модальное окно для вывода формы, чтобы отправить запрос. Хотя входящих параметров (props) обычно достаточно для создания компонента, предоставление HTML через входящий параметр потребует от нас использовать его через директиву v-html для рендеринга — что может привести к XSS-атакам.

Здесь мы используем именованные слоты, это дает возможность использовать более одного слота в одном компоненте.
Читать дальше →

Как мы делали «нарратив» – новый формат публикаций в Яндекс.Дзене

Время на прочтение10 мин
Охват и читатели28K
Два года Яндекс.Дзен учился решать задачу персональных рекомендаций контента. Теперь Дзен — не только агрегатор статей и видео со сторонних ресурсов интернета, но и контент-площадка. Летом 2017 года была запущена платформа издателей, на которой каждый может создавать публикации, а при достижении 7000 досмотров — зарабатывать на этом деньги. Про систему монетизации и другие особенности платформы вы можете прочитать в журнале Дзена.

Статьи и видео — традиционные виды контента. Чтобы привлечь авторов на платформу и дать им новые инструменты увеличения аудитории, Дзен решил выйти за рамки привычных форматов. Одним из новых форматов стал нарратив. Это набор карточек, объединенных общей тематикой. Пользователи интернета все меньше читают, но все так же хотят получать интересные истории (поэтому они, например, смотрят сериалы, короткие видео и живые трансляции). Мы создали формат, который помогает авторам рассказывать последовательные короткие истории и развлекать читателей.


Нарративы издателей и авторов

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

Почему не стоит использовать LocalStorage

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

Привет, Хабр! Представляю вашему вниманию перевод статьи "Please Stop Using Local Storage" автора Randall Degges.


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

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

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

Мышление в стиле Ramda: Сочетаем функции

Время на прочтение5 мин
Охват и читатели13K
Данный пост — это вторая часть серии статей о функциональном программировании под названием "Мышление в стиле Ramda".

1. Первые шаги
2. Сочетаем функции
3. Частичное применение (каррирование)
4. Декларативное программирование
5. Бесточечная нотация
6. Неизменяемость и объекты
7. Неизменяемость и массивы
8. Линзы
9. Заключение

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

Универсальные приложения React + Express (продолжение)

Время на прочтение7 мин
Охват и читатели13K
В предыдущей статье был рассмотрен простой проект универсального приложения на React.js, в котором используются только стандартные средства и фрагменты кода из официальной документации React.js. Но этого недостаточно для удобной разработки. Нужно сформировать окружение так, чтобы были стандартные возможности (например «горячая» перегрузка компонентов) в равной степени как для серверной, так и для клиентской части фронтенда.
Читать дальше →

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 1 — Введение и выбор стека

Время на прочтение10 мин
Охват и читатели11K
Весной 2017 года Eric Simons, со-основатель учебного проекта Thinkster, анонсировал проект «RealWorld»демо приложение и спецификация к нему. Проект объявил своей целью выйти за рамки привычных «todo»-демок для более прикладного сравнения и изучения возможностей различных фреймворков и технологий, а также подходов к разработке и способов решения задач.

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

Видео с митапа UralJS #6 — избавляемся от this, типизируем Redux-приложение и пишем на Реакте без тормозов

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

image


На прошлой неделе в Екатеринбурге прошла встреча UralJS. Мы снова собрали сотню разработчиков и порвали коворкинг — пришлось ставить дополнительный монитор на кухне и дублировать экран проектора, чтобы снять нагрузку на основной зал.


По традиции было три спикера — фрилансер, контуровец и злой марсианин. Вот что мы обсуждали:

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

Универсальные приложения React + Express

Время на прочтение5 мин
Охват и читатели16K
В прошлой статье рассматривалась библиотека Next.js, которая позволяет разрабатывать универсальные приложения «из коробки». В обсуждении статьи были озвучены существенные недостатки этой библиотеки. Судя по тому, что https://github.com/zeit/next.js/issues/88 бурно обсуждается с октября 2016 года, решения проблемы в ближайшее время не будет.

Поэтому, предлагаю ознакомится с современным состоянием «экосистемы» React.js, т.к. на сегодняшний день все, что делает Next.js, и даже больше, можно сделать при помощи сравнительно простых приемов. Есть, конечно, и готовые заготовки проектов. Например, мне очень нравится проект, который, к сожалению, базируется на неактульной версии роутера. И очень актуальный, хотя не такой «заслуженный» проект.

Использовать готовые проекты с массой плохо документированных возможностей немного страшно, т.к. не знаешь, где споткнешься, и самое главное — как развивать проект. Поэтому для тех, кто хочет разобраться в современном состоянии вопроса (и для себя), я сделал заготовку проекта с разъяснениями. В ней не будет какого-то моего личного эксклюзивного кода. Просто компиляция из примеров документации и большого количества статей.
Читать дальше →

Платёжная система в 50 строк кода, реально?

Время на прочтение10 мин
Охват и читатели20K
В последнее время технологические решения на блокчейне всё больше проникают в нашу повседневную жизнь. Технология новая, поэтому не все понимают, как и где её применять. Я попробовал создать платежную систему на базе смарт-контракта Ethereum и результат меня удивил. Смарт-контракт выполняющий функции полноценной платёжной системы получился всего в 50 строк кода. Всех заинтересовавшихся как он работает прошу под кат.

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

Изучаем и реализуем алгоритм работы правильного observer паттерна для react компонентов

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


Итак продолжаем развивать observer-паттерн. В предыдущей статье от старого и очень простого паттерна "observer" маленькими шагами мы пришли к mobx и написали его мини-версию. В этой статье мы напишем полноценную версию mobx которая реализует алгоритм обновления зависимостей в правильном порядке для избежания ненужных вычислений. Надо сказать что попытки описать этот алгоритм на хабре предпринимались и раньше в статьях товарища vintage про атомы тут, тут, и тут но там не описан в полной мере последний "правильный" порядок обновления о чем и будет речь в этой статье.

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