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

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

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

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

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

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

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

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

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

☑️ НОВЫЕ ВОЗМОЖНОСТИ, КОТОРЫЕ JavaScript ПОЛУЧИЛ В 2019 ГОДУ

❗️Изменения в классах JavaScript

Разработчики сделали # частью синтаксиса. Теперь с помощью этого символа можно сделать настоящие приватные свойства. До этого приватные свойства были лишь договоренностью, записаны через видимый пробел(нижнее подчёркивание). Ничто не мешало использовать префикс для других целей, использовать другой префикс, или не использовать вовсе. Сейчас же, такая возможность появилась в самом языке.

class User {
#name;
#surname;

constructor(name, surname) {
this.#name = name;
this.#surname = surname;
}

get fullName() {
return ${this.#name} ${this.#surname}
}
}

const john = new User('John', 'Doe')

john.fullName // "John Doe"
john.name // undefined
john.#name // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class

Аналог свойства записанного с использованием ключевого слова private в других языках, в том числе в TypeScript.

❗️Стандартизированный объект globalThis

Исторически, для доступа к глобальному объекту использовался разный синтаксис в разных средах JavaScript. В вебе вы могли использовать window, self или frames, но в Worker можно использовать только self. В Node.js ничего из этого не работает, поэтому вы должны использовать global. Свойство globalThis даёт возможность стандарного доступа к глобльному значению this (и как следствие, к глобальному объекту) вне зависимости от окружения. Полезно для изоморфных приложений.

❗️Строковые методы trimStart() и trimEnd()

В добавок к методу trim(), с помощью которого можно удалить пробелы с обоих концов строки. Вводятся методы trimStart() и trimEnd(), которые дадут больше контроля над удалением пробелов.

❗️flat() и flatMap() для массивов

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

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

Также он удаляет не определенные элементы массива:

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Метод flatMap() сначала применяет функцию к каждому элементу, а затем преобразует полученный результат в плоскую структуру и помещает в новый массив.

✅ Всё выше перечисленное отлично работает в последней версии Google Chrome без передварительной Babel транспиляции.

СТРОКОВЫЕ МЕТОДЫ slice() vs substr() vs substring()

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

Все эти методы:
➡️ предназначены для извлечения части строки
➡️ не модифицируют исходную строку (создают копию)
➡️ первый аргумент везде начальный индекс (с какого символа начать копирование/извлечение)

❗️slice()
Принимает два параметра slice(start, end) (оба параметра опциональны)
start - индекс, с которого начинается извлечение. Если опущен - равен нулю Если отрицателен, то трактуется как “полная длина строки длина строки” + start.
end - индекс, которым заканчивать извлечение (не включая элемент под данным индексом).
Если опущен, slice извлечёт всё до конца строки. Если отрицателен, то трактуется как “полная длина строки длина строки” + end.

💭 Примеры:
"frontend tips".slice( 0, 5 ) // "front”
"frontend tips".slice( -8, -5 ) // “end”
"frontend tips".slice( -4 ) // “tips”

❗️substring()
Почти полностью идентичен slice (такие же параметры start и end, работает аналогично) с некоторыми НО:

- не поддерживает отрицательные значения (они интерпретируются как 0)
- можно задавать start больше end (в этом случае они поменяются местами)

💭 Примеры:
"frontend tips".substring( 9 ) // “tips"
"frontend tips".substring( -5, 8 ) // “frontend"
"frontend tips".substring( 8, 5 ) // “end"
"frontend tips".substring( 5, 8 ) // “end"

❗️substr()
Главное отличие substr() от двух предыдущих состоит в том, что указывать нужно длину, а не конечную позицию (substr(start, length) - start начало, length - длина/количество символов).
Значение первого аргумента может быть отрицательным, тогда позиция определяется с конца.

💭 Примеры:
"frontend tips".substr( 5, 8 ) // "end tips"
"frontend tips".substr( -4, 4 ) // “tips"

Итого:
✅ Используйте slice() или substring() если вы знаете индекс (позицию), на которой вы остановитесь (но НЕ включите). Я на практике всегда использую slice().
✅ Используйте substr() если вы знаете количество символов для извлечения.

☑️ ОПРЕДЕЛЯЕМ ТЕМУ ОПЕРАЦИОННОЙ СИСТЕМЫ И РЕАЛИЗУЕМ ПОДДЕРЖКУ ТЕМ НА САЙТЕ

В последнее время набрали популярность темные и светлые темы интерфейсов. В новом обновлении на IOS интегрировали тёмный режим. Расскажу про простой и красивый сбособ сделать светлую/темную темы интерфейса сайта в зависимости от темы ОС пользователя.

С помощью CSS переменных определяем базовые свойства тем (фон, цвет, тени и т. д.)

:root {
/* light */
--theme-light-background: #fff;
--theme-light-color: #000;
/* dark */
--theme-dark-background: #000;
--theme-dark-color: #fff;
}

Определяем тему операционной системы пользователя с помощью нового @media запроса prefers-color-scheme (определяет light и dark).

@media (prefers-color-scheme: light) {
.themed {
--background: var(--theme-light-background);
--color: var(--theme-dark-color);
}
}

Аналогичто определяем и для dark. А в самом классе используем определенные значения.

.themed {
background-color: var(—background);
color: var(—color);
}

Если нам не нужен переключатель тем то на этом все.
Тестировал на MacBook и iPhone (протестить можно здесь: https://jsfiddle.net/sam4hp9o/1/)

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

// определяем тему
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified;
// дефолтная тема может быть и не определена, тогда используем на собственное усмотрение
// можно в зависимости от времени суток ночью - темную, днем - светлую

// вешаем обработчики событий на изменение
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode())
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode())

// определяем поведение при инициализации
if(isDarkMode) activateDarkMode()
if(isLightMode) activateLightMode()

Реализуем activateDarkMode и activateLightMode (Значения переменных CSS можно менять через JS)

const html = document.querySelector(':root')
html.style.setProperty("--background", “var(--theme-light-background)”);

Или просто добавляем нужный класс к root елементу.

Добавляем чекбокс или кнопку управления темой (вызовами activateDarkMode и activateLightMode соответственно).
Пример здесь: https://jsfiddle.net/sam4hp9o/2/

☑️ УЛУЧШАЕМ ТИПОГРАФИКУ КАВЫЧЕК НА САЙТЕ

В русском языке традиционно применяются французские «ёлочки», а для кавычек внутри кавычек и при письме от руки — немецкие „лапки“.

✅ Правильно:
«„Цыганы“ мои не продаются вовсе», — сетовал Пушкин.

❌ Неправильно:
««Цыганы» мои не продаются вовсе», — сетовал Пушкин.

В некоторых европейских языках (Хорватии, Дании, Швеции) открывающая кавычка выглядит как французская закрывающая и наоборот.
»citirati«

В иероглифической письменности существуют свои кавычки.
『 引 號 』

У нас есть возможность использовать разные кавычки на странице: “ ‘ « < и т д (в utf-8 их очень много разных).
Контролировать их не самая интересная задача. Для этого нужно использовать CSS свойство quotes. Его использование упростит жизнь контент менеджерам и вам самим.

💭 Пример:
CSS
.quote {
/* порядок кавычек следующий */
/* "левая кавычка" "правая кавычка" "левая кавычка 2-го уровня“ “правая кавычка 2-го уровня“ и т. д. */
quotes: "«" "»" "„" "“";
/* можно использовать сколько угодно пар кавычек */
/* можно использовать любые другие символы */
}
.quote:before {
content: open-quote;
}
.quote:after {
content: close-quote;
}

HTML
<span class=“quote”>
Первая открывающая
<span class=“quote”>
Вторая открывающая и закрывающая
</span>
Первая закрывающая
</span>

Результат (доступен код):
«Первая открывающая „Вторая открывающая и закрывающая“ Первая закрывающая»

Особенно полезно будет на мультиязычных сайтах.
В зависимости от языка можно управлять кавычками.
.quote:lang(de) {
quotes: "„" "“";
}

Можно глобально настроить на все элементы, к конкретному классу(как в примере) или тегам <q>/<blockquote>.

Использование свойства quotes значительно улучшит типографику вашего сайта, а этот момент многие упускают из виду.

☑️ ОПТИМИЗИРУЕМ ЗАГРУЗКУ ИЗОБРАЖЕНИЙ

Наличия изображений на сайте делает их привлекательными, информативными и качественными.
Но так же, картинки зачастую являются самой «тяжелой» для браузера частью страницы. Большие картинки долго загружаются, особенно при нестабильном или медленном интернет соединении.
Оптимизация изображений позволяет значительно ускорить загрузку сайта.
Разберем несколько способов оптимизации картинок:

Cамым простым действием может быть сжатие.
Это даст быстрый результат в плане скорости загрузки.
В большинстве случаев сжатие на 30-40% можно сделать без потери качества.
Ресурсов для сжатия изображений существует множество.
Но что делать если картинки уже и так сжаты, а загрузка все равно медленная?

Распространенной проблемой является то, что большинство сайтов рассчитано на множество девайсов (т. е. адаптивные).
Картинки же используются одни и те же на всех устройствах.
Хотя на телефоне шириной в 320 пикселей нам абсолютно незачем использовать картинку размером 1200 пикселей.

С помощью тега <picture> мы можем загружать картинку в зависимости от размера дисплея.
Он содержит два разных тега: один или несколько <source> и один <img>.
💭 Пример:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers">
</picture>

<picture> требует <img> в качестве своего последнего потомка. Без этого ничего не выведется. Это хорошо для совместимости, так как есть только одно место для альтернативного текста (alt) и хорошо для поддержки содержимого в старых браузерах (если тег <source> не поддерживается). Eсли ни один из атрибутов media или type тегов <source> не соответствует, будет показан тег <img>.

Атрибуты тега source который вы могли не встречать:
srcset (обязательный) - Определяет URL-адрес изображения для отображения.
media - является таким же, как и при использовании в CSS media queries.
Можно использовать те же самые проверки, т.е. проверять max-width, min-width, max-height, min-height, orientation и т.д.
sizes - определяет один дескриптор ширины, один запрос носителя с дескриптором ширины или список с разделителями-запятыми запросов мультимедиа с дескриптором ширины. (простыми словами размер картинки на определенном устройстве).
type - определяет тип MIME.

Тег <picture> работает во всех современных браузерах. Не работает в IE 11, но для него есть полифилл (picturefill).

Для еще большей производительности данную технику можно совместить с “ленивой” загрузкой изображений.
Суть ленивой загрузки в том, чтобы откладывать загрузку содержимого элементов <img> находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам.
В последних версиях Google Chrome нативно поддерживает эту технологию.
💭 Пример:
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img align="center" src="fallback.jpg" loading="lazy">
</picture>

Атрибут loading имеет несколько значений:
lazy - указывает на материалы, которые являются хорошими кандидатами на ленивую загрузку.
eager - материалы в элементах с таким значением атрибута нужно загрузить без промедления.
auto - браузер самостоятельно примет решение о том, применять ли к материалам с этим значением атрибута ленивую загрузку.

Атрибут loading можно использовать и без тега <picture>, просто на картинках.

Для остальных браузеров можно использовать библиотеку полифилов (lazysizes).

☑️ ИНТЕРАКТИВНОЕ СРАВНЕНИЕ ИЗОБРАЖЕНИЙ ИЛИ «БЫЛО — СТАЛО» НА ЧИСТОМ CSS

Временами появляется надобность показать зрительные различия меж 2-мя изображениями, как правило, до и после сопоставления. К примеру, презентация эффектов фото манипуляции в портфолио, итогов косметических процедур, видимых результатов катастрофического события или как меняются объекты с течением времени.

Первое что приходит в голову это изменять размер контейнера через JS на onmousedown & onmousemove. Но можно ли решить такую задачу без JavaScript? Оказалось что можно, и решение оказывается в css свойстве resize.
Вы скорее всего использовали это свойство с элементами textarea (указывает, можно ли пользователю изменять размеры текстового поля). На Mozilla MDN сказано:
Applies to elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes. То есть применить можно к любому элементу, у которого свойство overflow отличается от visible.
Принимает он такие значения: none | both | horizontal | vertical. Мы будем использовать свойство horizontal.

💭 Далее реализуем разметку:
<div class="slider">
<div class="resize-image">
<img src="" />
</div>
<img src="" />
</div>

💭 Через CSS накладываем одно изображение на другое при помощи абсолютного позиционирования.
.slider {
position: relative;
}

.resize-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

.resize-image::before {
// стилизируем ресайзер
}

Готово, получаем отличное решение без скриптов.

Однако есть и недостатки у этого способа:
— пользователь может изменить размер верхнего изображения только из его правого нижнего угла
— управление слайдером недоступно с клавиатуры.

PS: Это решение нашлось в книге, которой я с вами делался еще в самом первом посте (Секреты CSS. Идеальные решения ежедневных задач).

☑️ АРГУМЕНТЫ ФЛАГИ

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

Рассмотрим пример кода (очень близко к тому, который я встретил в реальном проекте), который делает запрос за данными, получает список пользователей, и выводит их на страницу:

const users = await userService.fetch();

userComponent.render(users);

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

const UserFacade = {
update: async () => {
const users = await userService.fetch();

userComponent.render(users);
}
}

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

const UserFacade = {
update: async (showLoader = false) => {
if (showLoader) { // показываем лоадер если нужно
userComponent.renderLoader(true);
}

const users = await userService.fetch();

userComponent.render(users);
userComponent.renderLoader(false); // скрываем лоадер в любом случае
}
}

UserFacade.update и userComponent.renderLoader теперь принимают флаги true и false.
В зависимости от переданного аргумента выполняется конкретная логика: либо мы отображаем список пользователей без лоадера либо с ним.
Получившийся код оказывается очень сложным для чтения, для понимания и нарушает множество принципов проектирования. Чтобы понять, что делают эти методы нам нужно заглядывать в названия параметров функции. Потому что вызов UserFacade.update(true) и UserFacade.update(false) не дают абсолютно никакого понимания о том, что происходит внутри.

Мне встречались подобные методы принимающие 4(!) аргумента, 3 из которых были флагами. Выглядело это примерно так:

SomeFacace.updateSomeData(uuid, true, false, true)

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

SomeFacace.updateSomeData(uuid, {
showLoader: true,
updateCases: false,
scrollToCase: true
});

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

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

const UserFacade = {
updateWithLoader async () => {
userComponent.showLoader();
await this.update();
userComponent.hideLoader();
},
update: async () => {
const users = await userService.fetch();

userComponent.render(users);
}
}

Код стал чище, понятнее, а функции теперь вообще не принимают никаких аргументов.

И в подтверждение моих слов цитата из книги Роберта Мартина «Чистый код»:
«Аргументы-флаги уродливы. Передача логического значения функции — воистину ужасная привычка. Она немедленно усложняет сигнатуру метода, громко провозглашая, что функция выполняет более одной операции…»

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

Третья статья про вопросы на собеседовании, в этот раз про СSS каскад.

Два предыдущих поста про вопросы на собеседовании:
#1 https://t.me/frontend_tips/16
#2 https://t.me/frontend_tips/27

☑️ РУКОВОДСТВО ПО ФОРМАТИРОВАНИЮ ТЕКСТА В HTML & CSS

Знакома ситуация на картинке ниже?
Решаем проблему с выпаданием текста за контейнер правильно и красиво.

Перед ознакомлением просьба ответить на один вопрос:
Знаете ли вы о существовании тега wbr в HTML?

☑️ JavaScript tips & tricks #1 Массивы

Полезные практики написания кода связанные с массивами, которые делают код более лаконичным.

☑️ Разбор одного из вопросов, которые мне задавали на собеседовании на должность senior front-end developer в международные и украинские конторы.

Собственно сам вопрос с объяснениями.

☑️ Тесты на знание JavaScript

Встречали такие тесты, в которых приведены примеры кода и нужно сказать что он вернет после исполнения?
Их часто задают на собеседованиях или даже до, чтобы отсеять кандидатов.
Так же, стало модно создавать такие в разных компаниях для привлечения внимания разработчиков (и сбора контактов конечно же).
На очередной такой я наткнулся на dou_ua.
Возможно, некоторые из вас видели Luxoft JavaScript quiz (была реклама на главной) или даже проходили его.
Вопросы были подобраны из разных областей JS и как по мне, тест получился интересным.

Я сделал разбор некоторых технических вопросов c объяснениями.

Welcome: https://telegra.ph/Ocherednoj-JavaScript-test-12-25

Вернулся после долгого перерыва и продолжаю делать контент с новым графиком.
Ждите статьи по понедельникам и четвергам 🗓
Идей для постов собралось много!

Stay tuned 📡

Про особенности JavaScript ходят легенды. Сегодня постараемся прояснить одну из них.

☑️ МЕТОДЫ ПРИМИТИВОВ И БОКСИНГ В JAVASCRIPT

Все типы данных в JavaScript делятся на примитивы и объекты. Примитивы не могут иметь собственных свойств и методов, объекты могут. Почему свойства работают на примитивах и что такое боксинг.

☑️ ЧТО ТАКОЕ ECMASCRIPT И ЧЕМ ЭТО ОТЛИЧАЕТСЯ ОТ JAVASCRIPT

Язык JavaScript изначально так назвали в надежде извлечь выгоду из успеха Java.
Позднее JavaScript прошел стандартизацию в ECMA International.
Это привело к появлению нового языкового стандарта, известного как ECMAScript.

Проясняем разницу между ES и JS здесь.

☑️ ДЕКЛАРАТИВНОЕ И ИМПЕРАТИВНОЕ ПРОГРАММИРОВАНИЕ

На волне популярности React и прочих библиотек/фреймворков люди забывают о читаемости и думают только о красоте кода. Почему стоит смотреть на этот вопрос по другому - тут.

☑️ АЛЬТЕРНАТИВЫ РЕШЕНИЯ ТИПИЧНЫХ ЗАДАЧ


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

☑️ ДОСТУПНЫЙ FRONT-END #1

Цикл статей для улучшения доступности приложений.
Будем разбирать как сделать так, чтобы вашим сайтом/веб-приложением хотелось пользоваться.

Первая статья про упрощение взаимодействия с формами.