Wise.js | Frontend tips

☑️ МАЛОИЗВЕСТНЫЕ CSS СЕЛЕКТОРЫ

Селекторы (от select) - это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили. Здесь будут выделены те селекторы, которые встречаются не часто, но могут быть полезны в некоторых ситуациях. В том числе присутствуют некоторые селекторы level 4, они здесь будут отдельно выделены(🔜). У них не очень хорошая поддержка браузерами, так как эта часть документации еще в драфтовом режиме, но в ближайшее время может быть утверждена. Перед их использованием убедитесь в поддержке вашим браузером!

⚡️:only-child
Этот применяется к дочернему элементу, только если он является единственным у родителя. Пригодится когда нужно прописать больший/меньший отступ/границу для тех элементов, которые содержат только один дочерний элемент, или же вы можете уменьшить размер шрифта если элемент содержит несколько дочерних элементов.

⚡️:target
Этот псевдо-класс позволяет связать гиперссылку <a> с любым элементом на странице, при этом значение атрибута href ссылки должно начинаться с символа # и содержать идентификатор id выбранного элемента (якорь). При нажатии на ссылку с идентификатором якоря, псевдо-класс :target применяет заданный стиль к элементу с якорем. То есть, когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора элемента, этот элемент становится целью (отсюда и :target).

⚡️:empty
Псевдокласс представляет пустые элементы, которые не содержат дочерних элементов, текста или пробелов. К примеру, <p></p> является пустым элементом, а <p> </p>, <p> </p> или <p>тест</p> уже нет.

⚡️:root
Находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.

⚡️:not(X)
Отрицательный CSS псевдо-класс, - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.

⚡️ :any 🔜
Селектор создан для того чтобы объединить несколько селекторов вместе, чтобы получить тот же самый эффект. Таким образом повышая читабельность вашего CSS-файла.

:any(section, article, aside)
:any(li, nav, header, footer) a {
 color: #000;
}

⚡️:has 🔜
Данный селектор позволяет указать, какие объекты должны присутствовать внутри указанного элемента, для того, чтобы это правило сработало по отношению к нему. Для примера, мы можем выбрать все секции, в которых присутствуют заголовки:
section:has(h1, h2, h3, h4, h5, h6)

⚡️:any-link 🔜
Оно объявлено для соответствия любому из свойств :link или :visited.
a:any-link { ... } - то же самое что и
a:link, a:visited { ... }

⚡️:local-link 🔜
Этот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.

⚡️:dir(ltr | rtl) 🔜
Cопоставляет элементы в зависимости от направления содержащегося в них текста. Может быть полезен при работе над приложением с поддержкой восточных языков (Арабский, Турецкий и т д)
ltr - текст слева направо
rtl - текст справа налево

826 views10:09

Wise.js | Frontend tips

Что вам наиболее интересно?

Final Results

38%

технологии HTML/CSS/JS, интересные моменты, неочевидные вещи, полезные советы

материаллы (ссылки на полезные ресурсы, книги, видео и т д)

30%

первая работа и собеседования (вопросы, задачи, тестовые задания, как готовиться)

24%

код ревью (примеры хорошего/плохого кода с объяснениями)

37 voters808 views10:26

Wise.js | Frontend tips

☑️ CSS СВОЙСТВО currentColor

💬 Посмотрите на этот CSS код:

.test {
  color: red; 
  border: 5px solid;
  box-shadow: 0 0 5px 5px;
  height: 50px;
}

Кажется что чего-то не хватает. Мы опустили значения border-color и не указали цвет тени, значит ли это, что наш код не будет работать?
На самом деле - нет. Этот код полностью рабочий и правильный - и дело здесь в такой штуке как currentColor.

Ключевое слово currentColor похоже на переменную CSS с некоторыми отличиями: вы можете использовать currentColor только в тех свойствах, которые требуют цвет в качестве значения, а если свойство не принимает цвет в качестве значения, оно не будет работать с currentColor.

💬 В примере выше можно явно указать это свойство:

.test {
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px 5px currentColor;
  height: 50px;
}

Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.
Есть свойства и элементы, которые наследуют значение color по умолчанию:
📍Цвет границы
📍Цвет границы элемента <hr>
📍Значение свойства box-shadow
📍Цвет текста элемента
📍Значение свойства outline
📍Цвет маркеров и границы элементов списка
📍Цвет атрибута alt элемента img.

Есть ряд случаев, когда может пригодиться получение значения свойства color. Один из примеров, когда значение свойства color не наследуется по умолчанию — это градиенты. Линейный и радиальный градиенты CSS не наследуют свойство color.

💬 С помощью currentColor вы можете создать градиент, использующий основной цвет темы:
background-image: linear-gradient(to bottom, currentColor, #fff);

💬 Также свойство currentColor можно очень эффективно использовать на псевдо-элементах ::before & ::after

a:hover::after,
a:focus::after,
a:active::after
{
    border-left-color: currentColor;
}

Вооружившись этим свойством мы очень просто можем изменять тему определенных блоков или даже всей страницы.
💬 Код из картинки в приложении с использованием данного свойства может выглядеть так (ссылка на скриншот https://i.ibb.co/DPXX1Bg/Screen-Shot-2019-04-18-at-12-26-33-PM.png):

svg {
    fill: currentColor;
}
 
.button {
    color: #000;
    border: 2px solid currentColor;
}
.button:hover,
.button:focus {
    color: #333;
}
.button:active {
    color: #666;
}

878 viewsedited 09:50

Wise.js | Frontend tips

☑️ ПРАВИЛА СРАВНЕНИЯ В JAVASCRIPT

В JavaScript существует несколько основных типов данных. А также множество операторов для работы с ними. Eсть два набора операторов равенства строгие : === и !==, и нестрогие == и !=. Строгие работают так, как вы ожидаете. Если два операнда имеют один и тот же тип и имеют одинаковое значение, то === выдает true а !== выдает false. Нестрогие поступают правильно, когда операнды относятся к одному и тому же типу, но если они относятся к разным типам, они пытаются привести значения. Ни одно собеседование не обходится без вопросов про приведение типов и их сравнение, а также, понимание этих правил поможет вам избежать ошибок и многих часов отладки вашего кода.

🔻СРАВНЕНИЕ ПРИМИТИВОВ (по обе стороны от оператора типы: number, string, boolean, null, undefined)

Оператор тождества или идентичности (далее ===) вычисляет значения своих операндов, а затем сравнивает, без преобразования типов по таким правилам:
⚡️Если у значений разные типы — они не идентичны.
2 === "2" // false
⚡️Если оба значения или null или undefined — они идентичны.
null === null // true
undefined === undefined //true
⚡️Если оба значения или true или false — они идентичны.
true === true // true
⚡️Если одно или оба значения — NaN — они не идентичны.
NaN === NaN // false
⚡️Если оба операнда это числа с одним и тем же значением — они идентичны. Если одно число равно 0, а другое -0, они также идентичны.
2 === 2 //true
⚡️Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.
"hello" === "hello" // true

Оператор равенства (далее ==) похож на оператор идентичности, но он использует менее строгие правила. Если у значений разные типы — они преобразуются и сравниваются:

⚡️Если у значений одинаковый тип, они проверяются на идентичность, без преобразований (по правилам описанным выше).
⚡️Если одно значение null, а другое undefined — они равны.
null == undefined // true
⚡️Если одно значение число, а другое строка, то строка преобразуется в число и выполняется сравнение.
"2" == 2 // true
⚡️Если одно значение — true, оно перед сравнением преобразуется в 1. Если — false, оно преобразуется в 0 и сравнение выполняется снова.
true == 1 // true

🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ (по обе стороны от оператора типы: объекты, массивы, функции)

Здесь все работает одинаково для == и === :

⚡️Если оба значения ссылаются на один и тот же объект, массив или функцию — они идентичны.

const a = {};
b = a;
a === b // true

⚡️Если оба значения ссылаются на различные объекты — они не идентичны, даже при идентичных свойствах.

{} === {} // false
[] === [] // false

🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ ДАННЫХ С ПРИМИТИВАМИ (с одной стороны примитивы, с другой ссылочные типы)
При строгом сравнении (===) всегда false
При нестрогом сравнении (==):
⚡️Если одно значение число или строка, а другое — объект(функция, массив), то перед сравнением объект преобразуется в простой тип. Встроенные классы преобразуются методом valueOf(), если не получилось, то toString() для чисел и обратный порядок для строк (сначала то toString() потом valueOf()). Класс Date всегда выполняет преобразование toString().

Иногда примитивы и ссылочные типы данных могут быть очень похожи. С точки зрения программиста примитивное значение типа string и объект, созданный из строки конструктором String(), практически неотличимы, и даже во многих книгах этот момент упоминается мимоходом, без конкретных примеров.

const a = "строка";
const b = new String(a);
const c = new String(a);

a==b // true (преобразование типов)
a==c // true (преобразование типов)
b==c // false (2 разных обьекта)

На практике рекомендую отказаться от использования == в сторону ===. Используя строгое сравнение можно быть уверенным в возвращаемом значении. В примере ниже можете проверить себя в приведении типов при сравнении (https://ibb.co/K9PNct1). Будьте внимательны при сравнении переменных!

ImgBB

Screen-Shot-2019-05-02-at-1-04-52-PM hosted at ImgBB

Image Screen-Shot-2019-05-02-at-1-04-52-PM hosted in ImgBB

916 viewsedited 19:30

Wise.js | Frontend tips

☑️ НОВЫЙ АТРИБУТ inputmode ДЛЯ МОБИЛЬНЫХ ОС И БРАУЗЕРОВ

Формы являются главным типов взаимодействия на сайтах и в приложениях. Форма - это просто путь к результату. Заполнение формы должно быть быстрым и понятным. Но заполнять формы с мобильных устройств это та еще задача. Упростить её для пользователей можно используя атрибут inputmode на элементах формы (input).

💬 Пример: <input type="text" inputmode="" />

inputmode не меняет способа, которым браузер интерпретирует input (этим занимается атрибут type) – он даёт браузеру инструкцию, какую виртуальную клавиатуру вывести на экран.

Поддерживаемые значения атрибута:

🔻 email - добавляет символ @ и десятичную точку на стандартную клавиатуру. Пользователю не нужно переключать раскладку для ввода этих символов.

🔻 tel - клавиатура похожа на numeric, является копией клавиатуры кнопочных телефонов. Поддерживает цифры от 0 до 9, символы решётки, звёздочки и другие (все что может понадобится при наборе номера телефона).

🔻 search - виртуальная клавиатура, оптимизированная для поиска. Например, ключ возврата может быть переименован в «Поиск», и могут быть другие оптимизации.

🔻 numeric - циферная клавиатура, идеально подходит для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д.

🔻 url - позволяет добавить расширение имени домена (например, .com) путём нажатия одной кнопки. Также на основной клавиатуре появляются кнопки, которые обычно используются для веб-адресов, например, символы (.), (www.), (/).

🔻 none - в документации сказано что никакой клавиатуры не будет, использовать когда сайт реализует собственную клавиатуру. В IOS появляется стандартная клавиатура.

🔻 text - cтандартная клавиатура для ввода текста.

Поддержка браузеров пока не лучшая ( https://caniuse.com/#feat=input-inputmode ), но вреда от данного атрибута чотно не будет, а при срабатывании сделает вашего пользователя немного счастливее. 🎆

P.S: Как вы могли заметить на канале был небольшой перерыв, отныне я буду публиковать по 3 поста в неделю. Stay tuned! 📡

878 views13:24

Wise.js | Frontend tips

☑️ ВОПРОСЫ НА СОБЕСЕДОВАНИИ #1

За время работы я побывал на многих собеседованиях, еще больше провел и регулярно продолжаю это делать (по 2-3 в неделю), так как мы активно ищем разработчиков уровня junior+ и middle. В постах такого типа будем разбирать задания, с которыми у людей возникает наибольшее количество трудностей. Первый цикл будет посвящен разбору кусков кода и вопросов по нему. Поехали:

🔻 Задание 1: Что мы увидим в консоли и почему?

function greeting() {
  console.log(name); // ?
  console.log(age); // ?

  var name = “Alex”;
  let age = 25;
}

greeting();

✅ Ответ:
console.log(name); // undefined
console.log(age); // ReferenceError

💬 Пояснение:
var обладает функцирнальной областью видимости.
Переменные обьявленные с ключевым словом var поднимаются (всплывают) внутри функции (области видимости), где они определены, перед тем, как код будет выполнен.
Код:

console.log(name);
var name = “Alex”;

идентичен следующему:

var name;
console.log(name);
name = “Alex”;

let и const обладают блочной областью видимости.
Они не “всплывают” и живут исключительно в рамках своего блока “{…}”. Не важно будь это функция, цикл или просто блок скобочек. Они недоступны до того, как мы объявим (инициализируем) их. При обращении к переменной age мы получим ошибку ReferenceError.

🔻 Задание 2: Что выведет данный код?

const a = 3;
const b = new Number(3);
const c = 3;

console.log(a == b); // ?
console.log(a === b); // ?
console.log(b === c); // ?

✅ Ответ:

console.log(a == b); // true
console.log(a === b); // false
console.log(b === c); // false

💬 Пояснение:
Хотя new Number() и выглядит как число, на самом деле его тип “object”. Оператор == приводит переменную b к числу. a и b имеют значение 3, поэтому оператор возвращает true. Однако, когда мы используем оператор ===, значение и тип должны быть одинаковыми. Это не так: new Number() - это не число, это объект. Оба возвращают false.
Более детально про приведение типов - пост выше в этом же канале (ПРАВИЛА СРАВНЕНИЯ В JAVASCRIPT)

🔻Задание 3: Какой будет результат вывода?

const a = {};
const b = { prop: "b" };
const c = { prop: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]); // ?

✅ Ответ:
console.log(a[b]); // 456

💬 Пояснение:
Ключи объекта автоматически преобразуются в строки (так как ключи - только примитивы). Мы пытаемся установить объект как ключ к объекту со значением 123. При преобразовании объекта в строку, он становится “[Object object]”.
Код:
a[b] = 123;
идентичен следующему:
a[“[Object object]”] = 123;

Затем мы пытаемся сделать то же самое с другим обьектом. Он так же преобразуется в “[Object object]”.
Код:
a[c] = 456;
идентичен следующему:
a[“[Object object]”] = 456;

Затем мы записываем a[b], используя один и тот же ключ. Потому перезатираем предыдущее значение.
И при обращении код:
console.log(a[b]);
идентичен следующему:
console.log(a[“[Object object]”]); // 456

1.12K viewsedited 10:03

Wise.js | Frontend tips

☑️ СВОЙСТВА object-fit И object-position

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

📍 object-fit
Определяет, каким образом содержимое замещаемых элементов будет подогнано к краям контейнера тега в случае, когда для элемента заданы ширина и высота, отличные от его собственных размеров.

Значения:

🔻fill
значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину

🔻contain
содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера

🔻cover
содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера

🔻scale-down
содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры

🔻none
замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера

Пример использованя взят с htmlbook
( https://www.dropbox.com/s/wi7zsqq8akewgyt/object-fit.jpg?dl=0 )

📍object-position
Используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов (как с background-position) или любые единицы измерения css.

Минус этих свойств всего один - они не работают в IE. Как альтернативу без JS там можно использовать background-image и аналогичное свойство background-size.

Dropbox

object-fit.jpg

Shared with Dropbox

949 views08:05

Wise.js | Frontend tips

☑️ CSS Shapes

Обратите внимание на картинку внизу поста (https://www.dropbox.com/s/fchqrmrmj4oe486/css-shape.png). Не так просто добится такого результата на веб-сайте для любого количества текста.

Сегодня мы можем задавать объекту любую форму CSS-трансформациями (transform), но эти формы не могут влиять на поведение содержимого внутри них или вокруг них. Например, если вы создаете треугольник или трапецию с помощью CSS, то созданная форма не влияет на то, как будет вести себя текст внутри фигуры или вокруг.

CSS Shapes позволяют определять геометрические фигуры, вокруг которых может обтекать текст. Этими фигурами могут быть круги, эллипсы, простые или сложные многоугольники и даже изображения и градиенты.

Мы можем определить в CSS все виды базовых фигур, применив к свойствам shape-inside или shape-outside следующие значения функций:

🔻 circle(cx, cy, r);
Описывает круг, значения cx и cy определяют координаты центра круга, r — радиус.

🔻 ellipse(cx, cy, rx, ry);
Описывает окружность, значения cx и cy определяют координаты центра окружности, rx и ry — радиус.

🔻 rectangle(x, y, width, height, [rx, ry]);
Описывает прямоугольник, значения x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов.

🔻 polygon(x1 y1, x2 y2, ..., xn yn);
Описывает многоугольник на основе переданных координат.

🔻 url(path/to/the/image.svg);
Описывает форму заданную выбранным изображением или SVG файлом.

Примеры использования можно посмотреть в документации ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes ).

Чтобы применить свойство shape-outside к элементу, этот элемент должен быть плавающим (float: left|right) и иметь определенные высоту и ширину. В будущем возможности CSS-форм позволят использовать формы не только для плавающих элементов, и когда это случится, контент сможет обтекать форму с двух сторон.

Поддержка браузерами у CSS Shapes хорошая, работает во всех современных браузерах (IE11 не работает, но и современным его не назовешь). Если вы хотите использовать CSS Shapes в браузерах, которые не поддерживают данную технологию eсть плагин, который доступен на Github (https://github.com/adobe-webplatform/css-shapes-polyfill).

Dropbox

css-shape.png

Shared with Dropbox

921 views13:10

Wise.js | Frontend tips

☑️ ПОЛЕЗНЫЕ CSS ФУНКЦИИ

Разница между CSS функцией и просто значением свойства в том, что функция вызывается символом (), и может принимать аргументы. Если вы не сталкивались с функциями ранее, то на примерах ниже быстро разберётесь. Поехали:

🔻 attr()
Это функция, которая возвращает значение переданного атрибута элемента в виде строки.

💭Например attr(href) в следующем коде:

.selector {
    a[href]::after {
      content: attr(href);
    }
}

возвращает значение атрибута href указанного в элементе (если у элемента нет атрибута href - вернется пустая строка).
А затем использует его в качестве контента для псевдоэлемента ::after, который добавляет полученное значение к ссылкам.
Вот так просто мы создали кликабельную ссылку не дублируя атрибут href в контент (соблюдая принцип DRY). HTML в этом случае будет выглядеть так:

<a href=“#some-path”></a>

#some-path не нужно вставлять в контент

Соответственно можно взять абсолютно любой атрибут и использовать его таки образом. В том числе и пользовательские data-* атрибуты. Что дает возможность изменять их значение через JavaScript.

🔻 calc()
Данная функция принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, /.
Операнды в выражении могут быть в различных единицах измерения width: calc(100% - 80px)
❗️Операторы (+ , - и другие) всегда должны быть по обеим сторонам отеделены пробелом.

💭 Пример:
Возможно вы желаете отступ, связанный с размером шрифта, вроде 4em? Не проблема.

.element1,
.element2 {
  width: calc(50% - 2em);
}

Или сделать один столбик резиновым, а другой статическим

.static {
  width: 200px;
}
.responsive {
  width: calc(100% - 200px);
}

Выравнивание элемента по центру (вертикально)

.element {
  margin-top: calc( 50% - 25px );
}

Половина высоты родителя минус половина высоты дочернего элемента.

🔻 counter()
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе.

💭 Пример:

body {
  counter-reset: section;  /* Устанавливает значение счетчика, равным 0 */
}

h3::before {
  counter-increment: section;  /* Инкрементирует счетчик */
  content: "Секция "counter(section) ": "; /* Отображает текущее значение счетчика */
}

Используем три свойства CSS: counter-reset, counter-increment, content и функция counter(). Если какое-либо из указанных свойств будет пропущено, то метод не будет работать.

💭 Пример:
и следующий код на странице

<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3

>

будет выглядеть как:

Секция 1: Вступление
Секция 2: Основная часть
Секция 3: Заключение

При этом между заголовками может быть абсолютно любой контент. Преимущество в том, что разработчику больше не нужно сжидить за нумерацией заголовков, а отдать это задачу CSS!

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

990 views15:38

Wise.js | Frontend tips

Wise.js | Frontend tips pinned «☑️ КНИГИ ДЛЯ НАЧИНАЮЩИХ И НЕ ТОЛЬКО На вопрос стоит, ли учится по книгам веб разработке, да и программированию в целом нет однозначного ответа. Некоторые технологии изменяются/развиваются очень быстро так что по ним не успевают выпустить актуальную книгу…»

15:19

Wise.js | Frontend tips

Информация для тех кто пришёл с вебинара:
Пост с книгами по изучению веб технологий закреплён!
Удачи в обучении 💫

1.05K views15:24

Wise.js | Frontend tips

☑️ НУЖНО ЛИ КОММЕНТИРОВАТЬ КОД

Начиная изучать программирование, в том числе языке разметки вы знакомитесь с такой штукой как комментарии. Комментарий — это строка в исходном коде, которую могут прочесть разработчики, но которая игнорируется компиляторами и интерпретаторами (т. е. не исполняемый код).
Посмотрите на следующий пример: (примеры кода взяты с medium/nuances-of-programming):

let o_fac = new BGF()
let bg_a = o_fac.build("ALIEN");
bg_a.i_health(100);
bg_a.i_armor(50);
bg_a.i_attack(50);
game.v_Add(bg_a);

Этот блок кода выполняет несколько функций. Результат: программисты не могут быстро понять, что же именно делает данный код. А теперь снабдим тот же код комментариями.

// create the alien object.
let o_fac = new BGF()
let bg_a = o_fac.build("ALIEN");

// set Alien details.
bg_a.i_health(100);
bg_a.i_armor(50);
bg_a.i_attack(50);

//add to game
game.v_Add(bg_a);

Разве читабельность кода не возросла? Все потому, что комментарии описывают то, что делает код, в то время, как сам код показывает, как это делается. Получается, что комментарии объясняют наш код, но пояснять код можно разными способами. И комментирование является самым худшим из них.

И причин для этого несколько:

🔻 Мало кто из разработчиков обращает на внимание на комментарии.

🔻 Нельзя верить комментариям, которые вы читаете. Источником истины является код. Комментарии часто не обновляют после изменения коди и они попросту не соответствуют дейтсвительности.

🔻Комментарии которые я встречал делали не очень позеные вещи:
- извенение за сложность или длину кода
- хак/костыль
- извенение за неправильное именование переменных или функций
- бесполезные комментарии типа
i++; // Увеличиваем счетчик

А что насчет предыдущего кода? В нем комментарии казались полезными. На самом деле комментарии маскировали проблему, а не решали её. Мы можем создать обертку над уже готовым функционалом:

const alien = alienFactory
              .createAlien()
              .withStats({
                  health: 100,
                  armor: 50,
                  attack: 50
                })
              .getAlien();

game.add(alien);

Еще один плюс от использования фабрик-оберток в том, что все лишние детали скрыты. Нам не придется думать о том, как работают функции, не относящиеся к отдельно взятому изменению в коде. И так код становится удобнее для понимания.

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

И в заключение - как выглядит 90% комментариев (https://www.dropbox.com/s/b23v6x56btrrlt5/cat-code.jpg):

Dropbox

cat-code.jpg

Shared with Dropbox

1.16K viewsedited 09:07

Wise.js | Frontend tips

☑️ CSS СВОЙСТВА КОТОРЫЕ ВЫ НЕ ИСПОЛЬЗУЕТЕ

При разработке интерфейса мы пользуемся определенным набором css свойств. Например блоки верстаем через flexbox, для обтекания используем float, для фона background. Сегодня мы посмотрим на свойства которые помогут разнообразить верстку и упростить некоторые моменты. Возможно в будущем будет обзор каждого свойства - если будет актуально.

🔻 Раскладка:
Cейчас большинство разработчиков использует flexbox для разметки основных частей сайта. часто забывая о технологии grid. Его можно и нужно использовать для глобальной раскладки сайта, для сложных сеток и компонент.
Так же есть технология под названием CSS Multi columns. С отличной поддержкой браузерами (в том числе IE 10). Универсальное свойства columns: [column-width] || [column-count], позволяют одновременно задать ширину и количество колонок многоколоночного текста.

🔻 Анимации и трансформации:
Все знают и используют для анимации transform + transition. Но мало кто использует свойство will-change. CSS Will Change позволяет подготовить браузер перед изменением состояния элемента. Браузер сможет подготовиться к этой оптимизации, например, перерисовке.

💭 Пример:

div {
    will-change: transfrom;
}

🔻 Переменные в CSS:
Это сущности,, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);)

💭 Использование:

.element {
  --main-bg-color: brown;
}

.element {
  background-color: var(--main-bg-color);
}

🔻 Интерактивность:
Интересная технология Scroll snap контролирует поведение скролла. Например, есть горизонтальная прокрутка. Когда мы прокручиваем контент, он останавливается в том месте, до которого прокрутили. С помощью Scroll snap страница будет автоматически докручиваться до границы элемента, на котором остановилась, какой бы высоты он ни был. Так же работает горизонтальное выравнивание по центру/верху. Это отличный пример, что можно не использовать JavaScript для простых задач.

💭 Пример использования:

.container {
    scroll-snap-type: x mandatory;
    scroll-padding: 50%;
}
.child {
    scroll-snap-align: center;
}

🔻 Направление текста
Существует 4 системы написания. Они характеризуются направлением написания и чтения символов по вертикали и горизонтали.
Latin based — стандартная система: читаем слева направо и сверху вниз.
Arabic based — справа налево и сверху вниз.
Han based — азиатская группа, может быть по-разному (слева направо или наоборот).
Mongolian based - тот же latin based с поворотом всего на 90%.

Каждый день такие задачи не ставят, но столкнувшись с ними вы пойдете использовать transform: rotate. Не то, чтобы transform — это неверно, но с CSS Writing Modes — правильнее.

💭 Использование:

.element {
 writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
}

Свойство определяет направление потока блока, в каком направлении складываются контейнеры уровня блока и направление в котором инлайновый контент находится в родительском блоке.

1.22K viewsedited 08:37

Wise.js | Frontend tips

☑️ КАК УСКОРИТЬ ЗАГРУЗКУ GOOGLE FONTS В 4 РАЗА

В разработке очень часто приходится использовать шрифты с Google Fonts (большая библиотека свободно распространяемых шрифтов). Ибо стандартные шрифты никого не устраивают, а хранить шрифты у себя не всегда хочется. Да и сервис очень популярный и вероятность что у пользователя уже есть нужные сайту шрифты очень высока. Сам сервис предлагает вам несколько способов подключения шрифтов:

1. с помощью тега <link> в <head> документа
2. @import в css файле

На примере разберем почему оба этих способа являются медленными:

Допустим нам нужно загрузить 2 шрифта Lato и Racing-Sans-One (способ работает со всеми шрифтами). Ссылка на подключение будет выглядеть таким образом

<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Racing+Sans+One&display=swap" rel="stylesheet">

Здесь мы грузим не шрифты, а таблицу стилей (css файл). И уже внутри этого файла @font-face загружает ресурсы шрифтов. То есть мы делаем 3 запроса:
Таблица стилей, и по запросу за каждым шрифтом.

Во втором пункте все еще хуже, мы делаем запрос за нашей таблицей стилей, а после всё те же 3 запроса. В итоге получаем 4. При хорошем интернет соединении на MacbookPro в последней версии Google Chrome затраченное время ~200-250 ms (ms - миллисекунд) в первом случае и ~230-280 ms во втором.

Кажется, не так и много, но при первом входе на сайт (пока ресурсы еще не закешировались) пользователь получает один из негативных эффектов:

❌ FOIT (вспышка невидимого текста) - шрифтов вовсе нет - и через 200-250 ms они появляются.

❌ FOUT (вспышка неустановленного текста) - отображается fallback шрифта (стандартный браузерный) и после загрузки он изменяется на шрифт из Google Fonts.

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

🚀 Начинаем ускорять:

Мы знаем что наш сервис ипользует домен fonts.gstatic.com для загрузки шрифтов, потому мы можем использовать preconnect.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сервер. Эта процедура включает поиски DNS, «переговоры» TLS и «рукопожатие» TCP. Что в свою очередь устраняет круговые задержки и экономит время пользователя. (не работает в IE). Для IE можно использовать rel=“dns-prefetch”. Тоже сэкономит немножко времени.

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

Для этого пойже пройти в файл с таблицей стилей который мы грузили (в нашем случае это https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Racing+Sans+One&display=swap) и берем прямые сслыки на шрифты.
Смотрим на атрибут src: url().
Например для Lato - это url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2)

Подключаем его с помощью тега <link> с особым набором атрибутов:

<link rel="preload" as="font" type="font/woff2" href=“тут ссылка на шрифт” crossorigin>

что делают эти атрибуты:
🔻 href - ссылка на ресурс (CDN шрифа)

🔻 rel=“preload” указывает браузеру декларативно извлекать ресурс, но не «исполнять» его (наш CSS будет поставлен в очередь использования).

🔻 as=“font” указывает браузеру, что он должен загружать, чтобы он мог установить соответствующий приоритет. Без этого браузер установил бы низкий приоритет по умолчанию.

🔻 type=“font/woff2” указывает браузеру тип файла, чтобы он загружал ресурс, только если он поддерживает этот тип файла.

🔻 crossorigin необходимо, потому что шрифты выбираются с использованием анонимного режима CORS.

1.37K viewsedited 18:08

Wise.js | Frontend tips

Дальше подключаем загруженные шрифты в теге <style> если у вас SPA (сэкономите еще пару десятков секунд) или в вашей таблице стилей.

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url(“сслыка на шрифт”) format('woff2');
    unicode-range: /* какой диапазон символов будет загружен из шрифта */
}

Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().

Полное время загрузки сократилось до 40 - 50 ms. Код примера можно посмотрель здесь: https://codepen.io/anon/pen/MNwxzg

1.37K viewsedited 18:08

Wise.js | Frontend tips

☑️ ЭФФЕКТИВНЫЙ КОД #1 HTML

Каждый день я читаю много кода. Просматривая домашки студентов, pull requestы на работе, тестовые задания кандидатов, или просто код людей которые его шарят в linkedin, twitter и github. Расскажу про некоторые вещи, которых лучше избегать при верстке сайта, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно. В свою очередь написание хорошего кода делает простым поддержку, доработку и масштабирование сайта. Некоторые моменты покажутся очевидными для опытных разработчиков, но начинающим будет полезно. Далее по пунктам:

🔻 Не используйте теги с целью стилизовать контент, а также “Deprecated tags” (устаревшие теги)
Теги <font>, <u>, <mark>, <s>, <big>, <center>, <strike>, <blink> (и прочие стилистических элементы)
Это задача CSS, не стоит мешать разметку со стилями в HTML

🔻 Не используйте устаревшие атрибуты и атрибуты для стилизации
start у <ol>, width у <hr> <img> и других, align у текстовых, и прочие выполняющие роль CSS.

🔻 Не использейте <br> для разметки
Не используйте <br> для форматирования документа или для добавления отступов между элементами.
Это нужно делать с помощью margin или padding в CSS.

🔻 Не засоряйте код <div>ами и <span>ами
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
Код

<div class=“main”>
   <div class=“menu”>
        <div class=“menu-item”>
          <div class=“image-wrapper”>
             <img src=“” alt=“”/>
             <div class=“image-description”></div>
          </div>
        </div>
   </div>
</div>

может быть заменен на более семантичный и читабельный

<main>
    <ul>
      <li>
          <figure>
              <img src=“” alt=“”/>
              <figcaption></figcaption>
          </figure>
      </li>
    </ul>
</main>

🔻 Избегайте непоследовательности
Если вы решили использовать 4 пробела или два таба для отступа, сделайте это на каждой строчке вашего HTML кода. Правило также касается регистра, кавычек и прочих элементов разметки кода. Делайте все в одном стиле.

🔻 Не используйте таблицы для блочной верстки
Таблици - только для таблиц. Исключение может быть только верстка emailов.

🔻 Не используйте спецсимволы (типа <, >, «, § и т д.)
Это ведет к невалидному коду.
Замените их на HTML мнемоники. Это это конструкция, которая ссылается на символ из набора символов текстового файла.
Например:
знак меньше < это <
знак больше > это >

🔻 Избегайте тегов <iframe> и <frame>
Их нужно использовать всего в нескольких случаях:
встраивание медиаконтента — как правило стороннего (видео с YouTube, пост с Facebook);
встраивание апплетов — приложений, работающих в контексте веб-сайта (формы оплаты или интерактивные карты)

🔻 Не используйте теги <script> без атрибута src и <style> без причины.
Есть кейсы в которых необходимо использовать эти теги, но в большинстве случев их можно вынести в оддельный файл, что поможет вам избавится от копипаста и поможет в дальнейшем переиспользовании.

🔻 Не вкладывайте блочные элементы в строчные
Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент <a>, который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы - другие ссылки и кнопки.

1.49K viewsedited 14:32

Wise.js | Frontend tips

☑️ ВОПРОСЫ НА СОБЕСЕДОВАНИИ #2

🔻 1. Каким будет результат выполнения следующего кода?

const items = ["xyz", "xxxx", "test", “hello”, “qwe”];

delete items[3];
console.log(items.length);

// ?

✅ Ответ:
console.log(items.length) // 5

💬 Пояснение:
Длина массива не изменится и будет равна 5. Если вывести в консоль массив items мы увидим следующее
["xyz", "xxxx", "test", undefined × 1,“qwe”]
Да, delete удаляет элемент из массива, но не так, как нам этого хочется. Образовалась «дырка».
Индексы элементов не изменились, и длина тоже.

🔻 2. Каким будет результат выполнения следующего кода?

function Foo(){}
Foo.prototype.bar = 42;

const foo = new Foo();

delete foo.bar;
console.log(foo.bar); // ?

✅ Ответ:
console.log(foo.bar); // 42

💬 Пояснение:
Если объект наследует свойство от прототипа и не имеет собственного свойства с таким же именем, свойство не может быть удалено при обращении через этот объект. Однако можно удалить это свойство напрямую в прототипе.

delete Foo.prototype.bar; // удаляет свойство из прототипа
console.log(foo.bar); // undefined

🔻 3. Каким будет результат выполнения следующего кода?

a = 2;
delete a;
console.log(a); // ?

✅ Ответ:
console.log(a); // undefined

💬 Пояснение:
Присвоение значения свойству без операторов var, const, let иногда неверно характеризуется, как глобальная переменная, (a = 2).
На самом деле происходит присвоение значения свойству глобального объекта. Оператор delete удалил поле a из обьекта window.

🔻 4. Каким будет результат выполнения следующего кода?

const a = 2;
delete a;
console.log(a); // ?

✅ Ответ:
console.log(a); // 2

💬 Пояснение:
delete эффективен только применительно к свойствам объектов.
Он не оказывает никакого влияния на имена переменных и функций.

🔻 5. Каким будет результат выполнения следующего кода?

delete Math.PI;
console.log(Math.PI);  // ?

✅ Ответ:
console.log(Math.PI); // 3.1415…

💬 Пояснение:
delete не может удалить определенные свойства встроенных объектов (таких как Object, Array, Math и так далее)

1.71K views08:34

Wise.js | Frontend tips

☑️ МАЛОИЗВЕСТНЫЕ CSS СЕЛЕКТОРЫ

Селектор определяет, к какому элементу применять то или иное CSS-правило.
Основные селекторы всем хорошо знакомы. Но есть такие, которыми по каким-то причинам мало пользуются разработчики:

🔻 Псевдокласс :focus-within
Определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.

🔻 Селектор :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. Но допустим нам нужно выбрать диапазон элементов с 5 по 12 включительно. Это можно сделать вот так:

ul li:nth-child(n+5):nth-child(-n+12) {
  background: lightpink;
}

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

ul li:nth-child(-n+12):nth-child(n+5) {
  background: lightpink;
}

Как это работает. Первая часть выражения выбрает 5й элемент, а потом все после него. А вторая часть — 12й элемент, а потом все до него. На пересечении запросов получается требуемый диапазон.

🔻 Псевдоклассы пользовательского интерфейса (формы)

:disabled — используется для отбора и стилизации заблокированных для выбора и изменения элементов форм;

:enabled — отбирает не заблокированные для выбора и изменения элементы форм;

:checked — применяется для выбора и стилизации элементов <input type="radio">, <input type="checkbox">, а также элементов <option></option>, находящихся внутри элемента <select></select>;

:indeterminate — элементы радио и чекбокс могут быть включены или выключены пользователем. Некоторые из них могут находиться в неопределенном состоянии, к которым и применяется данный псевдокласс.

И многие другие: valid, invalid, required и т. д.

🔻 Псевдокласс :only-child
Находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.

🔻 Псевдокласс :only-of-type
Элемент, который является единственным элементом данного типа в родительском элементе.

🔻 Псевдокласс :empty
Применяется к элементам, которые ничего в себе не содержат (да, это работает не только с формами). И вместо создания условной логики для <h1>{name}</h1> в шаблоне вы можете просто спрятать тег с помощью CSS, если он оказался пустым:
h1:empty { display: none; }

🔻 Псевдокласс :root
Находит корневой элемент(элемент <html>) и идентичен селектору по тегу html, но его специфичность выше. Полезно для объявления CSS переменных, и других глобальных значений.

🔻 Псевдокласс :target
Выбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы. Так можно скрывать или показывать целые разделы страници. Пример:

div {
  display: none;
}
div:target {
  display: block;
}


<a href="#link1">Ссылка 1</a>
<a href="#link2">Ссылка 2</a>

<div id="link1">
  <h3>Содержимое по ссылке 1</h3>
</div>
 
<div id="link2">
  <h3>Содержимое по ссылке 2</h3>
</div>

1.64K views09:27

Wise.js | Frontend tips

☑️ КООРДИНАТЫ В БРАУЗЕРЕ

Чтобы передвигать элементы по экрану, или перемещатся между ними следует знать систему координат в браузере.
Так как этих свойст достаточно много (pageX, pageY, screenX, screenY, clientX, clientY, x, y, layerX, layerY, offsetX, offsetY) можно запутаться и выбрать неверный для конкретной задачи.

Все они работают в одной из нескольких указанных ниже систем координат:

✔️ Относительно окна браузера (как position:fixed) – привязывается к координатам окна, а не документа.
✔️ Относительно документа (как position:absolute) – на уровне документа, отсчёт идёт от верхнего левого угла документа.
✔️ Относительно родителя (для объектов событий мыши).
✔️ Физические координаты (для объектов событий мыши).

Относительно окна браузера:

🔻 clientX/clientY - относительно верхнего левого края полностью отображаемой области содержимого в браузере. Эта контрольная точка находится под строкой URL и кнопкой возврата в верхнем левом углу. Эта точка может находиться в любом месте окна браузера и перемещается при прокрутки страници. Значение в левом верхнем углу всегда будет (0,0) независимо от позиции скрола.

🔻 x/y - alias для MouseEvent.clientX/MouseEvent.clientY (то же самое что и clientX/clientY)

Относительно документа:

🔻 pageX/pageY - возвращает значение равное горизонтальной/вертикальной координате, относительно всего документа. Учитывает любую горизонтальную/вертикальную прокрутку страницы.

Относительно родителя:

🔻 offsetX/offsetY - то же что и pageX и pageY только относятся к родительскому контейнеру, а не документу.

🔻 layerX/layerY - являются позицией мыши относительно "ближайшего расположенного элемента", то есть элемента, свойство стиля position не является static.

И последний - физические координаты

🔻 screenX/screenY - по отношению к верхнему левому углу физического экрана/монитора эта контрольная точка перемещается только при увеличении или уменьшении количества мониторов или разрешения монитора.

1.53K viewsedited 10:52

Wise.js | Frontend tips

☑️ МНОЖЕСТВЕННЫЕ ФОНЫ И ТЕНИ В CSS

Мы часто пользуемся свойствами background и box-shadow. Но не все знают про то, что эти свойства могут быть множественными и не используют их возможности по максимуму.

🔻Например чтобы сделать 2 фона у одного элемента нам не нужно использовать псевдоэлементы (или лишние вложенные элементы).

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

background: url(a.png) no-repeat,
            url(b.png) repeat-x,
            url(c.png) 100% 100% repeat-y;

или в развернутой форме

background-image: url(a.png), url(b.png), url(c.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 0 0, 0 0, 100% 100%;

🔻 Такая же ситуация с тенями у элементов. Свойство box-shadow дает возможность добавлять к блочным элементам множественные тени (внутренние и внешние). Для этого тебе нужно указать значения цвета, размера, размытости и смещения ( color, size, blur и offset). Перечислив их через запятую можно сделать несколько теней у одного элемента.

box-shadow:  /* устанавливаем 4 внешних тени для элемента */
    20px 15px 30px yellow,
    -20px 15px 30px green,
    -20px -15px 30px blue,
    20px -15px 30px red;

Работает и для text-shadow.

text-shadow: /* устанавливаем 4 тени для текста */
    0 0 4px white, 0 -5px 4px violet,
    2px -10px 6px indigo,
    2px -60px 33px orange,
    0px -85px 40px red;

Множественные тени могут служить не только для создания теней, а и для других декоративных частей элементов. Вот например «Мoна Лиза», или «Джоконда» сделанная с использованием одного только свойства box-shadow. (код https://codepen.io/jaysalvat/pen/HaqBf).
Превью: https://www.dropbox.com/s/zhjfdc6oqjlfcv7/mona_lisa_box_shadow.png

Dropbox

mona_lisa_box_shadow.png

Shared with Dropbox

1.75K views14:18

Wise.js | Frontend tips

☑️ ПРОГРАММИСТ - ПРОФЕССИЯ ИЗБРАННЫХ?

Давно не публиковал ничего, но после перерыва возобновляю активность на канале.
Сегодня пост не про технологии, а про программирование в целом. Поделюсь мыслями почему я, считаю это обычным ремеслом, а не профессией избранных умов и гениев (не без исключений конечно).

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

А вот вам биография эталонного программиста (ну HR порадуются такому в любом случае).
В детстве рано получил комп, играл в игрушки, стало интересно их делать, начал учить Pascal | Delphi | любой другой ЯП (нужное подчеркнуть), потом универ, после работа и на фоне всего этого тонны прочитанных книг по разработке софта и решение олимпиадных задач.

Тру программисты вам расскажут о важности долгого, тернистого пути обучения, что начинать нужно было еще сто лет назад, про паттерны и алгоритмы, важность профильного образования, что нужно быть очень умным (даже иметь особый талант) и конечно же знать математику (желательно на высшем уровне). Кажется что этот путь только для избранных, заучек и ботанов которые только и думают о нажимании кнопок 24/7.

Да, конечно, это все вам нужно если вы собираетесь устраиваться в Google/Facebook, писать игровые движки с нуля, заниматься машинным интеллектом или запускать ракеты в космос.
Но если вы собираетесь делать сайты для продажи очередного крутого продукта / новую соцсеть / приложение, которое изменит мир (нет) и т д. то для вас хорошие новости — не нужно быть гением и знать алгоритм Косарайю наизусть.

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

И пару слов про возраст. Многих это смущает и я понимаю почему. Одному моему студенту сейчас за 60 лет. Он пришел на курсы, чтобы выучить HTML/CSS. На первом занятии я был на 100% уверен что на следующее он не придет. Он не пропустил ни одного занятия и сделал дипломный проект лучше всех. Верстка была ему нужна чтобы красиво рисовать графики для ошибок измерений (как оказалось, он был профессором МГУ института прикладной математики на пенсии, но все же).

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

1.64K viewsedited 07:28

About

Blog

Apps

Platform