Snippets

Short typescript imports angular

Как сделать короткие imports в Angular

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

Пример о чем речь:
import { ExportService } from '../../../services/export.service';
превратится в:
import { ExportService } from '@services/export.service';

В статье я расскажу, как настроить IDE, импорты в компонентах и импорты в файлах стилях.

Подробнее »Как сделать короткие imports в Angular

Загрузка файлов в firebase Storage с использованием AngularFire2

AngularFire 2 — безусловно шикарная Angular 2 библиотека для работы с Firebase, которая, к сожалению, сейчас не поддерживает передачу файлов в Firebase Storage, но все же это возможно. О том, как же все-таки реализовать загрузку файлов в Storage, если у вас Angular 2 проект и вы используете AngularFire, я расскажу далее.
Подробнее »Загрузка файлов в firebase Storage с использованием AngularFire2

Исправляем шрифты на втором мониторе Macbook Pro

Купив недавно Macbook Pro 2016 года, обнаружил неприятный момент с отображением шрифтов на подключаемых мониторах. Выглядят они с артефактами и размытыми. Проблема не нова и наблюдается уже много лет.

Решений в интернете нашел много, большинство из них сводились к форсированию RGB режима на втором мониторе путем применения патчей. Но я нашел проще и более прозрачный способ, как справиться с проблемой.
Подробнее »Исправляем шрифты на втором мониторе Macbook Pro

Отправка файлов POST запросом в Angular 2

Когда возникает такая тривиальнейшая задача как отправка картинки $http запросом, ожидаешь, что ничего сложного возникнуть не может и такой функционал должен бы решаться на уровне фреймворка. Но не все так просто, как хотелось бы. Поэтому хочу поделиться небольшими примерами того, как отправлять файл и как можно отправить его вместе с другими полями формы.Подробнее »Отправка файлов POST запросом в Angular 2

Как подружить Angular 2 и Socket.IO с помощью RxJS

Работая над проектом, в котором как вы догадались, используются Angular 2 и Socket.io, я захотел поделиться способом создания провайдера, который будет содержать методы для подписки и вещания событий, возвращающих Observable переменные. Функционала написаного провайдера хватит на реализацию фактически любого веб-приложения использующего одно socket подключение.Подробнее »Как подружить Angular 2 и Socket.IO с помощью RxJS

Как установить и настроить gulp

Сборка front-end’а на пальцах с помощью Gulp

В наше время сборка front-end’a является уже неким стандартом в разработке сайтов и веб-приложений. Есть множество вариантов сборки ресурсов сайта и каждый разработчик выбирает для себя сам, какие инструменты для этого использовать. Я же хочу поведать о процессе сборке с помощью менеджера задач, которому отдал предпочтение, а именно GULP.Подробнее »Сборка front-end’а на пальцах с помощью Gulp

CSS3 анимация c помощью animate.css

Наверняка каждый из вас хотя бы раз встречал сайт, в котором по мере скролла появляются элементы с различными css3 анимациями. Для реализации таких эффектов и приданию динамичности сайту в целом можно использовать библиотеку animate.css. О том как ее использовать я расскажу далее.Подробнее »CSS3 анимация c помощью animate.css

Angular 2 интерцептор

Одной из самых распространенных задач при разработке SPA (Single Page Application) является установка постоянных хедеров во всех http запросах к API. Например отправка jwt-токена в методах для авторизированного пользователя. Но в Angular 2 http — интерцепторы не поддерживаются, как это было в Angular первой версии. Как же все таки реализовать в одном месте настройку хедеров для всех запросов приложения? Об этом я расскажу далее.Подробнее »Angular 2 интерцептор

Анимированная bootstrap кнопка меню «гамбургер»

Кнопка «гамбургер» стала своего рода стандартом для мобильных версий сайтов, по нажатию на которую, появляется или скрывается меню сайта. Но стандартная кнопка в bootstrap никак не изменяется при нажатии. Ниже находится сниппет, добавляющий популярную анимацию (превращение в крестик) для данной кнопки.Подробнее »Анимированная bootstrap кнопка меню «гамбургер»

Плавная прокрутка на iOS

По умолчанию все страницы в браузерах под iOS имеют импульсную прокрутку «momentum scrolling», которая позволяет странице еще продолжать движение после скролла. Подобное инерционное движение можно наблюдать если толкнуть шайбу по льду. Можно подумать, что подобными свойствами должны обладать все элементы страницы, у которых задан внутренний скролл, но это не так.Подробнее »Плавная прокрутка на iOS