• Angular 5: Unit тесты

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

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

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

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



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

      • Tutorial
      Вступление

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


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


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


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


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

        Допустим, вы используете апи яндекс карт.

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

        • Перевод
        image

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

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

        Круто было бы быстро запустить любой Angular CLI проект с Github прямо в браузере, просто изменив URL-адрес?
        Читать дальше →
        • +18
        • 3,9k
        • 2
      • Создание модального компонента с помощью Vue.js

        В этой статье вы узнаете, как с 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-атакам.

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

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

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

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


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

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



            Второй день наблюдаются проблемы с просмотром видео на YouTube.
            Новостные агрегаторы уже окрестили это «масштабным сбоем» — Масштабный сбой YouTube.

            Некоторые высказывают предположения, что это всевидящий «Роскомнадзор» чего-то там заблокировал, и не смотреть нам больше любимых котиков:)

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

            Все оказалось до банальности просто — проблема в проценте. Да, именно один процент не позволяет нам смотреть любимые видосики.
            Читать дальше →
          • Почему не стоит использовать LocalStorage

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


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

            Читать дальше →
          • Мышление в стиле Ramda: сочетаем функции

            • Перевод
            • Tutorial
            Данный пост — это вторая часть серии статей о функциональном программировании под названием "Мышление в стиле Ramda".

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

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