Денис Славский

Например:
Пойа Д.
Как решать задачу.
Математика и правдоподобные рассуждения.
Математическое открытие.

Для начала отдельное упражнение – как из индекса буквы в исходной строке получить индекс строки, в которую его положить.

Обозначу число строк переменной rows. Период этой «пилы» от верхнего пика до следующего верхнего пика составляет 2 * (rows - 1). Остаток от деления на этот период будет означать позицию внутри одного «зуба»:

остаток: 0 1 2 3 4 5
 строка: 0 1 2 3 2 1 – это хочется в итоге как-то получать

Чтобы просчитать «отражение» – когда шли вниз и потом стали идти вверх – надо подогнать этот момент и сделать пересечением оси y = 0 и тогда отражение легко сделать, взяв абсолютное значение Math.abs():

y  : 3  2  1  0 -1 -2
abs: 3  2  1  0  1  2

Остаток от деления будет всегда положительным и растущим: 0 1 2 3 4 5, а нужно получить из него 3 2 1 0 -1 -2. Умножить на -1 и добавить 3: Math.abs(rows - 1 - ost)

Итого примерно такой код даст правильные номера строк, куда вставлять символ, получая на вход i – индекс буквы в исходной строке:

var i, ost, row, rows=4, period = 2 * (rows - 1); //   0 0 0   |    6 0 0
for(i = 0; i < 10; i++) {                         //   1 1 1   |    7 1 1
  ost = i % period;                               //   2 2 2   |    8 2 2
  row = rows - 1 - Math.abs(rows - 1 - ost);      //   3 3 3   |    9 3 3
  console.log( i, ost, row);                      //   4 4 2   |   10 4 2
}                                                 //   5 5 1   |   11 5 1

В сборе будет выглядеть примерно так:

function encrypt( text, n) {
  var i, ost, period = 2 * (n-1), r, row, out = [];
  text = text.replace(/\s/g,""); // убрать пробелы
  for(r = 0; r < period; r++) out[r] = ""; // пустые строки
  for(i = 0; i<text.length; i++) {
    ost = i % period;
    row = n - 1 - Math.abs(n - 1 - ost)
    out[row] += text.substr(i,1);
  }
  return out.join("");
}

function test( text, rows) {
	var pre = document.createElement("pre");
	pre.innerHTML = encrypt(text, rows);
	document.body.appendChild(pre);
}

test("этот текст зашифрован", 4); // экинтесшфаоттарвтзо

jsFiddle

Upd. чуть переписал это дело. Шифровка и расшифровка осуществляются на основе одной и той же «карты», которая зависит только от числа букв в тексте и числа строк. Поэтому сделал одну ф-ю, создающую эту карту. И слегка отличающиеся короткие функции шифровки и дешифровки. Фиддл с формой. Код шифровки/дешифровки такой:

function makeMap( len, n) {
  var i, pip, period = 2 * ( n - 1);
  var rows = Array.apply( null, Array( n)).map( function(){ return []});
  for( i = 0; i < len; i++) {
    pip = i % period;
    r = pip < ( n - 1) ? pip : period - pip; 
    rows[ r].push( i);
  }
  return Array.concat.apply( null, rows);
}

function decrypt( text, n) {
  var map = makeMap( text.length, n);
  return text.split('').reduce(function(p,c,i,a){ return p + a[map.indexOf(i)]},'');
}

function encrypt( text, n) {
  var map = makeMap( text.length, n);
  return text.split('').reduce(function(p,c,i,a){ return p + a[map[i]]},'');
}

Можно сделать совсем чистую страницу

Group Policy Path: User or Computer Configuration > Administrative Templates > Windows Components > Microsoft Edge

Allow web content on New Tab page: Disabled

Добрый день!

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

flexbox, grid layout

- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
Немного о новинках в css тут.
Поддержка браузерами тут.

gulp, webpack и пр.

- это инструменты, которые созданы для облегчения рутинных задач.
Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
Посмотрите отличный скринкаст от Ильи Кантора!

препроцессоры

- представьте, что вам чего-либо не хватает в html и css.
Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
Популярный шаблонизатор Pug
Один из css-препроцессоров Stylus

пакетные менеджеры

- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

Конкретные статьи и ресурсы для новичка:

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

Дерзайте!

и как отдельный класс-синглтон

Зачем? Зачем сингелтон? Ответте на вопрос когда это нужно?

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

- Разделение ответственности - важный принцип инженерного дела в принципе.
- Принципы SOLID - хорошо дают понять как работать с зависимостями и делать декомпозицию системы. Сильно пересекается с инкапсуляцией, полиморфизмом и разделением ответственности.
- Паттерны GRASP - эдакая смесь принципов и паттернов, описывают нюансы цикла жизни объектов и их взаимодействия друг с другом.
- Закон Деметры - про инкапсуляцию.
- CQRS - подход по разделению операций записи и операций чтения. Естественно подход такой не работает если вам надо реализовать атомарную запись и чтение, но это минимальный набор задач.
- Рефакторинг. Он нужен всегда. Его нужно делать по чуть-чуть когда видно что "уже мешает" или "можно было сделать лучше". Ну то есть это не переписывание всего и вся большими кусками, а маленькие изменения которые с течением времени эволюционно меняют архитектуру проекта. Возможно только если код покрыт тестами, это отдельная жирная тема.

Не нужно знать "архитектуры", они являются лишь результатом соблюдение принципов. И уж тем более "паттерны" это лишь элементы архитектуры. Не нужно на них зацикливаться, это лишь словарь.

https://en.wikipedia.org/wiki/Category:Programming...

Просто нужно ссылку обернуть в какой-нибудь врап:

html:

<div class="pointer">
  <a href="#" class="disabled">disabled link</a>
</div>

css:

.pointer {
  cursor: pointer !important;
}

.disabled {
  pointer-events: none;
}

example

Ответ на вопрос будет сильно зависеть от того, в каком направлении вы думаете развиваться.
Будет ли это сетевое программирование? Тогда это си, в основном.
Может быть, веб-программирование? Тогда тут могут быть php, javascript, python, ruby.
Захотите разрабатывать программы на десктоп? Вам нужны c# или java.
На мобильные платформы? тогда java и objective c (плюс swift).
Или податься в разработку игр? Тогда либо c++, либо с# (для Юнити - наверное, самой популярной платформе).
Хотите экзотики? Приглядитесь к функциональным языкам - Erlang и Haskell.
Разработка железа и драйверов для железа? тогда си (без плюсов) и ассемблер.
Определитесь, что вы хотите, потому что всё объять не получится. Выберите один (или два) направления и добейтесь хорошего уровня в нём. А потом вам будет уже легче двигаться дальше.

Мой совет - попробуйте изучать C# или Java (они во многом похожи) для софта, или Javascript и php/python для веб-приложений и сайтов.

Добавлю, что очень правильный совет дал @tsarevfs - помимо языка программирования, хороший программист должен знать несколько инструментов - и в первую очередь, это система контроля версий, например, git. Плюс юнит-тестирование (хотя это можно начать изучать позже, через годик-два). Плюс - нужно хорошо знать свою IDE, в которой работаете; не вздумайте работать в блокнотиках!

Ещё помимо практики нужно знать теорию - читайте Макконнелла, Фаулера, Мартина, Бека.
Подпишитесь на хабре на пару десятков хабов и регулярно читайте всё подряд. Через годик ваш уровень понимания статей сильно вырастет.

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

UPD. Важное дополнение из обсуждения в комментариях (спасибо @Argentum88 @Deerenaros )
Чтобы стать профессионалом и "востребованным программистом с нормальным заработком", нужно очень хорошо понимать внутреннее устройство тех систем (платформ, фреймворков), на которых идёт работа.
Для этого нужно заглядывать вглубь. Изучив различные мейнстрим-инструменты, посмотреть на аналогичные менее популярные системы. Изучать исходный код используемых open-source библиотек. Написать свою подобную систему. Для web - написать свою CMS (хотя бы базовую). Для десктоп-программ - попробовать программировать без навороченных библиотек, которые делают рутинную работу за программиста. Для разработчика игр - сделать простую игру на базовом инструментарии платформы, где всё придётся делать своими руками.
Всё это даст возможность проникнуться, почему всё делается именно так, даст понимание взаимосвязей разных частей программы.
А потом, осознав это, выбрать один из уже готовых инструментов, и продолжать писать на нём, уже обладая более глубоким его пониманием.