JavaScript

Основы Angular 2

Основы Angular 2 — #00 — Вступление



Основы Angular 2 — #01 — Установка и наш первый компонент



Основы Angular 2 — #02 — ngFor и немного о нашем class



Основы Angular 2 — #03 — Шаблонные переменные, метод click и наш основной компонент

Angular 2 – примеры и уроки

Artem Demo

Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Angular 2 это следующее поколение JavaScript фреймвороков от Google. Его функционал сильно отличается от предыдущей версии, это обусловлено двумя основными факторами – обновление JS до следующей версии (ECMAScript 6), а так же полная переработка языка в соответствии с новыми стандартами веб разработки.

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

Подробнее

Быстрый старт за 5 минут с Angular 2 beta

Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».



Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Демо

Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:

My First Angular 2 App

Вот файловая структура:

angular2-quickstart
├── app
│   ├── app.component.ts
│   └── boot.ts
├── index.html
└── license.md

Подробнее

Что стоит почитать об Angular 2

Делюсь списком полезных источников по Angular 2. Подойдут как для начинающих, так и для тех, кто имеет опыт работы с фреймворком.



Небольшое отступление. Мы начали писать в связке ASP.NET WebAPI + Single Page Angular 2 App более полугода назад (ещё во время беты). Полет нормальный, поэтому коротко о плюсах.

Фреймворк ускоряет работу сайта. Angular2-приложение – это «толстый клиент», где управление отображением и часть логики перенесены на сторону браузера. Так сервер уделяет больше времени доставке данных, плюс пропадает необходимость в перерисовке сквозных частей сайта: шапки, футера, меню и прочего.Angular 2 помогает описать структуру приложения декларативно, а TypeScript – допускать меньше ошибок благодаря статической типизации. Подробнее о плюсах и минусах расскажем в следующих статьях.

Подробнее

Порог вхождения в Angular 2 — теория и практика

Добрый день, дорогие хабра: жители, читатели, писатели, негативно-комментаторы.

В качестве вводной части и чтобы снять некоторые вопросы немного расскажу о себе. Меня зовут Тамара. Оужас, я девушка! Кого это пугает — закрывайте статью и не читайте.

Для остальных: у меня за плечам незаконченный лет 10 назад МИРЭА, факультет кибернетики. Но все эти 10 лет практики сложились таким образом, что по большей части я занималась рекламой и в перерывах случалось работать в различных стартапах, связанных с интернетом и не только.



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

Я покривлю душой, если скажу, что я не могу разобраться в чужом коде. Могу, на java и php могу даже какие-то простые вещи поправить. Но дальше этого мой опыт программирования никогда не уходил.

Подробнее

Обход блокировки баннера AdBlock Plus и Adguard + Anti-Adblock

Всё больше и больше веб-мастера задаются вопросом, как же обойти блокировку баннера и вывести из строя расширение AdBlock Plus и Adguard?
Оказывается, осуществить обход блокировки баннеров можно при помощи JavaScript и HTML, используя альтернативные теги, например, DIV.

Итак, что же нам потребуется?

• Базовые знания JavaScript;


• Базовые знания HTML.

Приступим

Давайте рассмотрим следующий JavaScript код (код полностью рабочий):

/**
	@name: Banner Creater
	@versoin: v. 0.4 final
	@author: Mr.MEX
	@site: hyperworld.ru
*/
function bannerCreater(opt){
	opt = opt || {};
	var h = opt.h,
		w = opt.w,
		link = opt.link,
		img = opt.img,
		title = opt.title,
		target = opt.target,
		attach = opt.attach,
		create = true,
		div = document.createElement('div'),
		result = '',
		words = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
		max_position = words.length - 1,
		logging = opt.logging
	;
	for(i = 0; i < 10; ++i) {
		position = Math.floor (Math.random() * max_position);
		result = result + words.substring(position, position + 1);
	}
	var idgen = result;
	if (h == null) {
		h = 60;
	} else if (w == null) {
		w = 468;
	} else if (link == null) {
		console.error('Не указана ссылка, баннер не будет создан.');
		create = false;
	} else if (img == null) {
		console.error('Не указана ссылка на изображение, баннер не будет создан.');
		create = false;
	} else if (title == null) {
	
	} else if (target == null) {
		target = '_blank';
	} else if (attach == null) {
		console.error('Не указан id элемента, в который будет встроен баннер, баннер не будет создан.');
		create = false;
	} else if (logging == null){
		logging = false;
	}
	if (create == true) {
		div.setAttribute('id',idgen);
		div.setAttribute('style','width:'+w+'px !important;height:'+h+'px !important;background-image:url(\''+img+'\') !important;background-repeat:repeat repeat !important;background-position:center center !important;cursor:pointer !important;');
		if (title) {
			div.setAttribute('title',title);
		}
		div.setAttribute('onclick', 'window.open(\''+link+'\', \''+target+'\')',0);
		document.getElementById(attach).appendChild(div);
		if (logging == true){
			console.log('Успешно создан баннер для сайта '+link+' с ID: '+idgen+', размерами '+w+'x'+h+'px в блоке '+attach+'.');
		}
	}
}

Подробнее

MoscowJS Meetup 32

В московском офисе Яндекса пройдёт 32-я встреча MoscowJS. Приглашаем опытных фронтенд-разработчиков пообщаться на профессиональные темы и обменяться опытом. Поговорим о пакетах npm на TypeScript, роли JavaScript в интернете вещей и о том, нужно ли непременно тестировать весь новый код.

Учим JavaScript/jQuery за 1 час! #От Профессионала

Прокачка TinyMCE 4

Здравствуйте, меня зовут Константин, я работаю front-end-разработчиком на информационно-развлекательном портале, основную долю контента которого составляют новости и статьи. И, конечно же, нам было крайне важно организовать удобную работу с порталом для наших редакторов. О том, каких успехов мы добились на данном поприще, и будет эта статья.

У себя на портале для редактирования новостей и статей мы используем WYSIWYG-редактор TinyMCE версии 4.2.4. Он показал себя с наилучшей стороны среди всех WYSIWYG-редакторов как по стабильности работы, так и по качеству формируемой HTML-разметки. К тому же он оказался наиболее простым в освоении для людей, привыкших работать с офисными приложениями.

Но одних его базовых возможностей не хватает для того, чтобы реализовать все потребности редакции. Я не стану описывать процесс конфигурирования TinyMCE: во-первых, нужды у всех разные, а во-вторых, этот момент очень хорошо освещен в документации. Зато я расскажу о решениях, которые для многих могут оказаться полезными и которые не так просто найти в интернете.

А пойдет сегодня речь о:

• работе с изображениями;


• форматировании HTML-разметки при вставке текста из внешних источников;


• типографике.

Работа с изображениями

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

Вот важнейшие моменты, которые мы для себя определили:

• простая загрузка изображений;


• простая вставка изображений в текст;


• ресайз изображений до размеров, заданных в тексте;


• простое создание ссылки на увеличенное изображение.

В интернете есть немало плагинов к TinyMCE для работы с графикой (в том числе и его родной, платный плагин MoxieManager), которые имитируют файловые менеджеры. Однако, как показала практика, все эти богатые возможности «а-ля» проводник Windows редакторам совсем не нужны. И потому мы решили отказаться от данной концепции и максимально упростить загрузку иллюстраций и добавление их в статью.

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



Подробнее