Great Rash

var form = document.querySelector('form'); if (form.checkValidity()) { // форма валидна } else { // форма невалидна }

Зачем идти верстальщиком если вы "очень долго практиковали на С++"? Программист на плюсах зарабатывает гораздо больше верстальщика. Я бы, как минимум, на джуниора по плюсам пошел на вашем месте (даже если первое время по деньгам меньше будет). Очень странный выбор короче.

Просто уберите строку getElementById, чтобы из-за неё ошибка не валилась.

Топикстартер, это тебе

function dR() { o.open("GET", "data.txt?r=" + Math.random(), 1); o.onload = function() { var a = this.responseText; a = a.replace(/\s*[\r\n=]+\s*/g, "="); a = a.replace(/^\s+/, ""); a = a.replace(/\s+$/, ""); a = a.match( /([^=]+)/g); for (var i = 0, len = a.length; i < len; i += 2) { try { document.getElementById(a[i]).innerText = a[i + 1]; if (gauge) { gauge.setValue(a[i + 1]); } } catch(e) {}; } setTimeout("dR()", 500); } o.send(); }

Нафига вам сторонние скрипты если это всё пишется элементарно: var treshold = 10; // пороговое значение (если расстояние тача больше него, значит у нас свайп, а не клик) var touchStart = { // тут храним начальные координаты тача x: 0, y: 0 }; $(elem).on({ 'touchstart': function(e) { var touch = e.originalEvent.changedTouches[0]; // запоминаем начальные координаты тача touchStart.x = touch.clientX; touchStart.y = touch.clientY; }, 'touchend': function(e) { var touch = e.originalEvent.changedTouches[0]; var dx = touch.clientX - touchStart.x; var dy = touch.clientY - touchStart.y; var abs_dx = Math.abs(dx); var abs_dy = Math.abs(dy); // если дельта по x и по y меньше порогового значения, // значит у нас не свайп, а клик if (abs_dx < treshold && abs_dy < treshold) { console.log('this is click'); } // если дельта по x больше порогового значения и она больше дельты по y // значит мы свайпим влево или вправо, но не вверх или вниз if (abs_dx > treshold && abs_dx > abs_dy) { if (dx < 0) { // если дельта меньше нуля, значит свайпнули влево $(this).trigger('swipeLeft', e); } else { $(this).trigger('swipeRight', e); } } // если дельта по y больше порогового значения и она больше дельты по x // значит мы свайпим вверх или вниз, но не влево или вправо if (abs_dy > treshold && abs_dy > abs_dx) { if (dy < 0) { $(this).trigger('swipeUp', e); } else { $(this).trigger('swipeDown', e); } } }, 'swipeLeft': function(e) { console.log('this is swipe left'); }, 'swipeRight': function(e) { console.log('this is swipe right'); }, 'swipeUp': function(e) { console.log('this is swipe up'); }, 'swipeDown': function(e) { console.log('this is swipe down'); } });

1) Лучше делать своё, чем переделывать чужое. Всегда. 2) Онлайн-уроков по фотошопу в интернетах как грязи.

http://codepen.io/anon/pen/yOWpXj?editors=1010 - IE9+

Инлайн-блок на инлайн-блоке инлайн-блоком погоняет... Вот тут первый ответ фиксит вашу проблему.

Да я не негодую. Просто забавно.

Представляю ситуацию: я упоролся и перевёл у себя на компе время на 5 дней назад - ваша ссылка превратилась в тыкву.

var mediaQuery = window.matchMedia('(min-width: 500px)'); if (mediaQuery.matches) { // я выполнюсь только если ширина экрана 500 или больше }

Вы ещё не отрендерили темплейт, а уже пытаетесь искать в нём дочерние элементы. На момент вызова метода initialize в DOM существует только $el, но внутри он пустой. Вывод: this.$el.find нужно запускать внутри render, после вызова this.$el.html.

Теперь то мы знаем, что форум родился 1-го апреля. Посему разрешите поздравить всех причастных, администрацию и вообще всех кому небезразличен этот маленький заповедник верстальщиков. Па-здра-вля-ю! Смешные картинки про верстку приветствуются!

Можно написать багрепорт в службу поддержки доты.

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

Ну собственно твоя реализация ничем не отличается от классического БЭМ. Вопрос вкуса как писать модификаторы, через 2 подчёркивания или через одно. Например в твоей реализации элементов придётся в CSS использовать camel case, про который тоже куча народу скажет своё "фи". Так что вкусовщина всё это. Почему в яндексе твой подход не прокатил бы я уже написал собственно.

Ты так пишешь будто длинные названия классов - это что-то плохое. Ну и что, что их три? Главное ведь не длина атрибута class, а понятность чтения кода. Не понимаю чем это хуже той лапши на SASS, которую ты привёл в пример. Особенно забавно получается если приходится разбираться в таком коде, не имея исходников (был у меня такой случай). UPD: Дополню справедливости ради, что я тоже не в восторге от системы модификаторов, предложенной яндексом. Сам то я примерно так пишу: <div class="block-name__elem-name _mod-1 _mod-2"></div> философия БЭМ сохраняется, но код при этом читабельней. Однако это только потому, что ИЕ6 помер наконец. А ведь БЭМ придумывали ещё в эпоху актуальности ИЕ6, в котором (сюрприз-сюрприз) в CSS не работала запись такого вида: .block-name__elem-name._mod-1 { /* ... */ } Именно оттуда растут ноги такого длинного объявления модификаторов.

// 1 способ $(element, context); // 2 способ $(context).find(element);

На самом деле нет. Просто надо уметь его готовить Товарищи из яндекса писали, что у них иногда по дню уходило просто на проектирование разметки (без написания кода). Т.е. наверное треть времени уходит на то чтобы просто понять как разбить макет на БЭМ-элементы. Опять же БЭМ идеально подходит только для больших порталов где есть 100500 повторяющихся элементов с разными скинами. Для лендингов БЕМ бесполезен чуть менее чем полностью.

Я согласен с этим утверждением на все сто. БЭМ дал главное - научил людей избавляться от мусорной свалки в CSS. А ещё я считаю, что все эти ваши SASS, SCSS и т.п. вместе с переменными должны умереть. Как только везде заюзают Web Components всё это станет ненужно. Вот тогда и наступит верстальческий рай

Шаг 5. Чтобы написать код открытия клеток нам придётся провести небольшой рефакторинг. Для начала я лоханулся со спрайтом клеток, наверное вы уже давно поняли что не так Так что первым делом забираем новый спрайт: Вторым делом перепишем метод .placeNumbers(), нам нужно отделить от него метод поиска соседних клеток, так как он понадобится нам при открытии клеток (как водится, часть кода я опущу): var minesweeper = function(game) {}; minesweeper.prototype = { // ... // теперь соседние клетки ищет отдельный метод getNeighbours: function(cell) { var i = cell.index; var u = i - this.game.boardWidth; var d = i + this.game.boardWidth; var l = i - 1; var r = i + 1; var ul = u - 1; var ur = u + 1; var dl = d - 1; var dr = d + 1; // в этот массив будем собирать найденных соседей клетки var indexArr = []; if (cell.posX > 0) { indexArr.push(l); if (cell.posY > 0) { indexArr.push(ul); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(dl); } } if (cell.posX < this.game.boardWidth - 1) { indexArr.push(r); if (cell.posY > 0) { indexArr.push(ur); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(dr); } } if (cell.posY > 0) { indexArr.push(u); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(d); } // возвращаем соседей return indexArr; }, // метод расстановки цифер теперь совсем маленький placeNumbers: function(cell) { var neighbours = this.getNeighbours(cell); for (var i = 0; i < neighbours.length; i++) { this.addNumberToCell(neighbours[i]); } }, // ... }; Не забудьте сделать цифры невидимыми, для этого внутри .addNumberToCell() уберите строку cell.frame. Далее нам нужно немного изменить метод расстановки клеток. А именно добавить клеткам новые свойства: флаг, обозначающий, что наш рекурсивный алгоритм уже проверял данную клетку на наличие мины, а так же обработчик кликов. Приступим: var minesweeper = function(game) {}; minesweeper.prototype = { // ... placeCells: function() { var len = this.game.boardWidth * this.game.boardHeight; var x = 0; var y = 0; var cell = null; for (var i = 0; i < len; i++) { x = i % this.game.boardWidth; y = Math.floor(i / this.game.boardWidth); cell = this.game.add.sprite(x * 56, y * 56, 'cells', 10); cell.posX = x; cell.posY = y; cell.isBomb = false; cell.numBombs = 0; cell.index = i; // отмечаем клетку непроверенной cell.isChecked = false; // разрешаем клетке обрабатывать события // (без этого флага Phaser события не обрабатывает) cell.inputEnabled = true; // навешиваем обработчик клика на клетку cell.events.onInputDown.add(this.onClick, this); this.game.board.add(cell); this.game.board.addToHash(cell); } }, // обработчик клика по клетке onClick: function(cell) { // если мы кликнули не по мине if (!cell.isBomb) { // то открываем клетку this.openCell(cell); } }, // рекурсивный поиск пустых клеток openCell: function(cell) { // соседи текущей клетки var neighbours = []; // текущий сосед var neighbour = null; // если в клетке мина или мы уже проверяли такую клетку if (cell.numBombs > 0 || cell.isChecked) { // открываем её цифру cell.frame = cell.numBombs - 1; // и выходим из рекурсии return; } // отмечаем клетку как проверенную cell.isChecked = true; // открываем клетку (11 кадр - значит пустая, без цифр) cell.frame = 11; // получаем соседние клетки neighbours = this.getNeighbours(cell); // для каждого соседа for (var i = 0; i < neighbours.length; i++) { // находим его в группе neighbour = this.game.board.hash[neighbours[i]]; // если там нет мины if (!neighbour.isBomb) { // открываем его цифру neighbour.frame = neighbour.numBombs - 1; // и рекурсивно вызываем открытие его соседей this.openCell(neighbour); } } }, // ... }; Алгоритм, используемый при открытии клеток, называется Flood Fill. Я использовал связанность по 8 направлениям, но подозреваю, что хватит и 4-х. Однако нам ни к чему делать лишние усложнения в методе .getNeighbours(), всё-таки наша игра слишком проста, чтобы такие оптимизации как-то сильно повлияли на производительность. Вот что у меня получилось (кликнул в верхний левый угол и в нижний правый): Ссылка на архив с игрой.

window.addEventListener('DOMContentLoaded', function() { if (window.innerWidth <= 1024) { console.log('допустим, что это у нас планшет или мобилка с гигантским экраном'); } });

http://etherpad.org/

Потому что консоль такой код превращает в такой: with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) { ({alert(1);})}А запись: ({})считается объектом, а не группировкой.Короче всё из-за того, что консоль так устроена.