JavaScript — TechCave

JavaScript— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.

JavaScript— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

Стена группы

Загрузка...
9 часов назад
#

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



Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.



Источник
Загрузка...
Den
22 часа назад
#

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



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

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

Источник
Загрузка...
Den
22 часа назад
#

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



Вступление

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



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



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



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



  • определение (собственно, создание) нового элемента

  • упаковка нестандартного функционала и данных в один тег



Источник
Загрузка...
22 часа назад
#

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





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

Источник
Загрузка...
22 часа назад
#

Angular 5: Unit тесты



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

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

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

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

Источник
Загрузка...
1 день назад
#

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



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

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



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

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

Источник
Загрузка...
Den
1 день назад
#

Шаблоны проектирования в React



Шаблоны проектирования, которые возникли и развились в экосистеме React за время её существования, улучшают читабельность и чистоту кода, облегчают повторное использование компонентов.

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



Сообществу React понадобилось около двух лет для того, чтобы выработать несколько идей, которые теперь стали популярными. Тут можно отметить переход с
React.createClass к классам ES6 и к чистым функциональным компонентам, отказ от миксинов и
упрощение API. Теперь, учитывая то, что число React-разработчиков постоянно растёт, то, что в развитие этого проекта вкладываются серьёзные силы, можно наблюдать эволюцию нескольких интересных шаблонов проектирования. Этим шаблонам и посвящён данный материал.

Источник
Загрузка...
1 день назад
#

Создание модального компонента с помощью 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-атакам.

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

Источник
Загрузка...
1 день назад
#

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



image

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

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

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

Источник
Загрузка...
3 дня назад
#

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



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



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



Источник
Загрузка...
3 дня назад
#

Ответы на распространённые вопросы о шаблоне render prop



Кент С. Доддс, автор материала, перевод которого мы публикуем сегодня, говорит, что недавно группа программистов, с которыми он должен был провести тренинг по React, заинтересовалась шаблоном «render props», который ещё называют шаблоном «функция как потомок» (в разных публикациях его упоминают как «children as a function» или «function as child»).
Документация по React определяет «render prop» как простую технику передачи кода между компонентами React с использованием свойства, значением которого является функция. Компонент, использующий render prop, принимает функцию, которая возвращает элемент React. Этот компонент вызывает данную функцию вместо реализации собственной логики рендеринга. Кент рекомендует тем, кто не знаком с шаблоном render prop, почитать этот
материал и посмотреть это
видео, а потом уже читать дальше.

image

Источник
Загрузка...
Den
3 дня назад
#

YouTube упал? Или проблема одного процента





Второй день наблюдаются проблемы с просмотром видео на YouTube.

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

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

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

Все оказалось до банальности просто — проблема в
проценте. Да, именно один процент не позволяет нам смотреть любимые видосики.

Источник
Загрузка...
5 дней назад
#

Применение паттерна observer в Redux и Mobx





Паттерн «observer» известен наверное с момента появления самого ооп. Упрощенно можно представить что есть объект который хранит список слушателей и имеет метод «добавить», «удалить» и «оповестить», а внешний код либо подписывается либо оповещает подписчиков



class Observable {
  listeners = new Set();
  subscribe(listener){
    this.listeners.add(listener)
  }
  unsubscribe(listener){
    this.listeners.delete(listener)
  }
  notify(){
    for(const listener of this.listeners){
       listener();
    }
  }
}


В redux-е этот паттерн применяется без всяких изменений  — пакет «react-redux» предоставляет функцию connect которая оборачивает компонент и при вызове componentDidMount вызовет subscribe() метод у Observable, при вызове componentWillUnmount()  вызовет  unsubscribе() а dispatch() просто вызовет метод trigger() который в цикле вызовет всех слушателей где каждый в свою очередь вызовет mapStateToProps() и потом в зависимости от того изменилось ли значение  —  вызовет setState() на самом компоненте. Все очень просто, но платой за простоту является необходимость явно указывать от каких частей стора зависит компонент внутри mapStateToProps().



Источник
Загрузка...
5 дней назад
#

Мышление в стиле Ramda: первые шаги



Недавно я познакомился с замечательной серией статей "Thinking in Ramda", которые проясняют на простых и ясных примерах способы написания кода в функциональном стиле с использованием библиотеки Ramda. Эти статьи показались мне настолько прекрасными, что я не смог удержаться от того, чтобы не перевести их на русский язык. Надеюсь, что в этом будет польза для многих людей smile Давайте начнём перевод с первой вступительной статьи.

1. Первые шаги

2. Сочетаем функции

3. Частичное применение (каррирование)

4. Декларативное программирование

5. Бесточечная нотация

6. Неизменяемость и объекты

7. Неизменяемость и массивы

8. Линзы

9. Заключение

Данный пост — это начало серии статей «Мышление в стиле Ramda» о функциональном программировании.

Я буду использовать библиотеку
Ramda в этих статьях, хотя многие из обсуждаемых идей применимы также к множеству других библиотек, таких как Underscore и Lodash, а также к другим языкам программирования.

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

Источник
Загрузка...
5 дней назад
#

Как избежать проблем с производительностью при создании React-приложений





О производительности react

React не зря считается очень производительным фреймворком. Он позволяет создавать быстрые динамические страницы с большим количеством элементов.



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



Источник
Загрузка...
2 3

Авторизация

Пользователи

Володя Рудомаха
adanick
Марина Викторовна
Георгiй Москвитинъ
Andpyxa Tutunnik
Andrey_fox
Jane linch
genagy
Pasha Radiuk