Александр Серый

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

Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
Заменяем длинный текст placeholder многоточием:

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

Скрываем placeholder при фокусе:

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Курсор для label + отмена раздражающего выделения при клике:

label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Только вертикальный ресайз для textarea (horizontal часто ломает диз):

textarea {
	resize: vertical;
}

Убираем дефолтный курсив у address:

address {
	font-style: normal;
}

Убираем подсветку полей:

input:focus,
textarea:focus {
		outline: none;
}

Адаптивные img:

img {
	height: auto;
	max-width: 100%;
	width: auto\9;
}

Адаптивные видео:

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Перенос слов:

.break-word {
        word-wrap: break-word;
}

Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

Нумерованный список с подпунктами:

ol {
	counter-reset: list1;

	li:before {
		counter-increment: list1;
		content: counter(list1) '. ';
	}

	ol {
		counter-reset: list2;

		li:before {
			counter-increment: list2;
			content: counter(list1) '.' counter(list2) '. ';
		}

		ol {
			counter-reset: list3;

			li:before {
				counter-increment: list3;
				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
			}
		}
	}
}

update дополнительно стили для печати

P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.

Если вы не страдаете синдромом "true-programmer" и ваш проект - это НЕ профессиональное улучшение качеств разработки, тогда спокойно переходи на любую подходящею CMS.

// просто функция проверяющая, является ли данное ей значение числом
function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

// конструктор объектов типа Калькулятор, считай определение класса
function Calculator() {

  // массив методов калькулятора, каждый из которых есть функция от двух чисел
  // виден только внутри объекта
  var methods = {
    "-": function(a, b) {
      return a - b;
    },
    "+": function(a, b) {
      return a + b;
    }
  };

  // публичный метод калькулятора, собственно его предназначение
  // принимает строку с выражением которое надо вычислить
  this.calculate = function(str) {

    // парсит строку с выражением
    // разбивая ее на 3 части по пробелам
    var split = str.split(' '),
      // создаются три переменные, два числа и операнд
      a = split[0],
      op = split[1],
      b = split[2]

    // валидация переменных
    if(!methods[op] || !isNumeric(a) || !isNumeric(b)) {
      return NaN;
    }

    // достается элемент массива methods под названием op
    // он является функцией
    // ей передаются оба числа и она с ними что-то делает
    // собственно результат ее выполнения возвращается из функции calculate
    return methods[op](+a, +b);
  }

// еще один публичный метод калькулятора
// принимает название функции и саму функцию
// нужен, чтобы в массив methods можно было добавлять новые операции
this.addMethod = function(name, func) {
methods[name] = func;
};
}

// создается новый объект класса Калькулятор
var calc = new Calculator;

// добавляется возможность умножать два числа, будет называться "*", объект функции прилагается
calc.addMethod("*", function(a, b) {
return a * b;
});

// аналогично, возможность делить одно число на другое
calc.addMethod("/", function(a, b) {
return a / b;
});

// аналогично, возведение в степень
calc.addMethod("**", function(a, b) {
return Math.pow(a, b);
});

// смотри описание this.calculate = function(str) {
var result = calc.calculate("2 ** 3");
alert(result); // 8

jsfiddle.net/fo0Lkzs2/1

1. Сначала сделайте простой запрос (без авторизации) для получения произвольного кода (на сервере генерируем случайный ключ и возвращаем)
2. Полученный ключ (code) кодируем на клиенте через SHA256 (code+username+password)
3. Делаем запрос авторизации отправляя шифрованный код
4. На Сервере проверяем в базе комбинацию SHA256(ключ+полеUSER+полеPASSWORD). Если нашли - Вуаля! и убиваем ключ

Таким образом будет отправляться всегда новый код для авторизации и снифферы не уловят ваши данные.

Привет!

Это смотрели:
https://github.com/sindresorhus/gulp-imagemin/issues/85 ?

@tnorman уровень логики не ниже, чем на серверной стороне?)) Посмешили.
Фронт-енд разработчик должен разбираться во фронт-енде, а не в PHP — фтопку PHP, вообще никакого PHP.

Основы построения баз — да, поскольку появится возможность работы с базами напрямую. Понимать принципы общения с сервером и другими компьютерами, знать про HTTP-заголовки, политику безопасности и, в частности, политику происхождения документа. То есть знание XMLHttpRequest, CORS и (хотя бы) представление о WebSocket, WebRTC.

Разбираться в клиентских технологиях — HTML, CSS, Javascript, SVG, canvas, многочисленные API, описанные в HTML. И если не знать про WebGL и API, то разбираться зачем это и к чему. Построение DOM, CSSOM, понимание узких мест и тенденций. Основные семантические конструкции и микроданные.

Понимать box model, visual formatting model, stacking context, работу с формами и элементами, медиа-элементами. Знать, что такое кодировка и как жить с разными кодировками при необходимости, хотя это уже редкость.

ООП соглашусь — наследование, инкапсуляция, понимание роли прототипов и умение их использовать. Знание основных паттернов и парадигм. Добавлю модель событий — просто знание (не жалкие 5 штук, а реальный охват, включая MutationObserver). Ну и регулярные выражения.

AJAX? Если не брать в расчёт XML-RPC, SOAP, WSDL, то выделять это в отдельный вопрос не стоит. А вот event loop (включая tasks и microtasks), на который завязана модель событий и все асинхронные вызовы знать обязательно. Также быть в курсе, что такое promise, зачем они и как использовать.

Знать основы проектирования, UX и построения UI. Очень много в работе фронт-енда основано на взаимодействии человека и интерфейса. Непонимание основ UX приводит к неприятным последствиям.

Что же насчёт Backbone или других конкретных технологий — это вообще дело наживное и акцентировать внимание не стоит. Опыт приветствуется, но не является обязательным. ну только если проект не горит.
Безусловно, знание технологий разработки нужно, но я бы тогда поставил на Node.js, Grunt/Gulp, AngularJS.

Сделайте то же самое но используйте js.

Никак. Он для этого просто не предназначен.

чем это dependency injection и deferred objects в контексте js необычны?

А так пишите конечно, но постарайтесь раскрыть все по подробнее, зачем применять то и то и профит от этого. Описать inversion of control в js, особенностях там всяких... примеры... Статья туториал как писать это не так интересно, тут скорее статья разбор готового приложение с подробным описанием этих практик. Ну и что бы люди могли на реальном примере посмотреть.

Вы наверное слышали, что каждый уважающий себя программист обязан написать несколько велосипедов? И JavaScript-программисты тоже так делают и еще как! Так вот в этом нет ничего плохого, это отличное самообучение.

Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.

Sublime Text 2