Всем привет, друзья! И бодрых сил вам на всю неделю 😉

26 января в 16:00 состоится стрим! "Прожарка 🔥 макетов" — это первый в своём цикле стрим, для которого вы выбираете один из макетов, который в последствии мы с вами будем верстать в прямом эфире 😁

Записаться на стрим можно здесь:

💥👉 https://train-it.ru/frying-layouts 👈💥

В данный момент действует льготная цена всю неделю! В понедельник 24 января цена повысится!

Хотелось бы напомнить: даже если у вас не получается поучаствовать на стриме в живую, покупая участие на стриме, запись останется с вами навсегда в личном кабинете клуба Train IT 🔥

По ссылке выше вам предстоит выбрать макет, который мы будем "прожаривать" на стриме😁

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

Голосование по выбору макета продлится до пятницы включительно (21 января 23:59).

Не циклитесь)

Привет!

Сегодня мы немного зациклимся на циклах)

Если ненадолго отвлечься от программирования, то зачем нам цикл в жизни? Затем, чтобы выполнить какое-то идентичное действие столько раз, сколько это потребуется для достижения результата. Простой и банальный пример: наполнение чашки из чайника.
Наливаем кипяток в чашку, проверяем полная ли она, если нет - наливаем кипяток в чашку, проверяем полная ли она, если нет - наливаем кипяток в чашку, проверяем полная ли она…, ну и так можно до бесконечности, особенно если не видеть краёв чашки или отвлечься на телефон и просто перелить воду через край (в коде может получиться аналогичная ситуация - переполнение памяти).

Возьмем один из трех доступных в JS формата цикла и постараемся налить таки воду в нашу чашку. Скажем объем чашки 250 мл, а нам хотелось бы хотя бы 220 мл, а льем мы не более чем по 30 мл:

let waterVolume = 0; //чашка пустая
while (true) { //будьте осторожны когда так пишите))
    if (waterVolume >= 220) break; //без этой строчки мы наполним океан не сразу правда, но со скоростями компьютеров это не так и долго))
    waterVolume += Math.floor(Math.random() * 30);
}
console.log(waterVolume); //посмотрим сколько по итогу налили

Как и все в этой жизни, циклы имеют начало и конец, ну, не считая бесконечных циклов))

Train-it.ru - начни с нами свое движение к успеху)

#train_it_web

И снова наступила пятница! всем хороших выходных!

We need to go deeper!!!

Привет!

Бывает что у вас уже есть куча проектов там и сям, а заодно еще и на самой Tilda парочка-другая… И перевозить все на Тильду не хочется по целому ряду причин:
- Все уже проверено временем и рисковать что-то поломать не хочется.
- На переезд и переделку всего нужно время или деньги (хотя и в этом случае время тоже понадобится).
- Ну вот просто потому, а почему бы и не считать это причиной))


Но как всегда есть необходимость получать актуальную информацию, а что же у вас в Тильде творится и, например, время от времени подтягивать информацию с тильды на ваши другие сервисы, что не руками на 10 сайтах менять одно и тоже, а в автоматическом режиме или у вас есть договоренность и вы делитесь каким-то своим контентом со своими партнерами. Но как это все сделать без скрапинга и не думать о структуре дома и ограничении доступа со сторонних доменов и еще куча о чем?
Для всего это у Tilda есть удобное API, которое даже позволяет настраивать специальные webhook-и (своего рода подписка на событие по обновлению сайта).
Если же на более простом уровне, то обычный GET запрос формата

<http://api.tildacdn.info/v1/getpagefull/?publickey={ваш публичный ключ}&secretkey={ваш секретный ключ}&pageid={номер страницы}>

позволит получить всю нужную информацию по странице, например время ее публикации, заголовок, ну и конечно, сам HTML код страницы!

Если готовы погружаться, то мы с вами!
Train-it.ru - будем с вами на любой глубине!

#train_it_web

Всем привет! На сайте опубликовано расписание по изучению Web и Tilda! Грызем гранит науки дальше!)🤓

“Условие” ? “Быть” : “ Не быть”. И нет вопросов или есть…

Привет!

Сегодня мы не будем искать ответ на извечный вопрос, а научимся в более лаконичной форме ставить некое условие и получать нужный нам результат)

Наверняка все знают или хотя бы раз слышали про чудесную конструкцию “if”, которая позволяет нам делать ветвление логики в зависимости от истинности его условия. Для некоторой определенности можно взять случай: нам в интернет магазине нужно сказать пользователю бесплатная у него доставка или нет. Предположим, если заказ более 3000 рублей, то мы готовы везти его лично в любое время дня и ночи, а вот если 2999 рублей или меньше, то ничего не знаем будьте добры оплатите 500 рублей за доставку. Вот наша функция для расчета суммы доставки:

js
function deliveryCostCalculator(orderCost) {
    if (orderCost > 3000) {
        return 0;
    } else {
        return 500;
    }
}
//Или по некоторым другим практикам:
function deliveryCostCalculator(orderCost) {
    if (orderCost > 3000) {
        return 0;
    }
    return 500;
}

В принципе код вполне компактный и как бы что нам от него еще хотеть, но можно написать лаконичнее с помощью чудесного тернарного (условного) оператора:

js
function deliveryCostCalculatorTernary(orderCost) {
  return orderCost > 3000 ? 0 : 500;
}

Код стал намного лаконичнее и прозрачнее, так как все выражение легко помещается в поле зрения разработчика!

Но вдруг нам понадобилось добавить условие, что если заказ больше 2000 рублей, так и быть доставка будет стоить 250 рублей, в случае с “if-else” конструкцией все понятной новый виток “else if” и все готово, но тернарный оператор нас не бросит в трудный час и позволит тоже нам добавить новый виток логики в его лаконичном стиле:

js
function deliveryCostCalculatorTernary(orderCost) {
  return orderCost > 3000 ? 0 : orderCost > 2000 ? 250 : 500;
}
//или при форматировании:
function deliveryCostCalculatorTernary(orderCost) {
  return orderCost > 3000 ? 
0 : 
orderCost > 2000 ? 
250 : 
500;
}
//при таком форматировании даже проглядывается наш старый добрый “if-else”))

Безусловно, когда внутри появляется много специфической логики и действий тернарный оператор теряет свою читабельность, но это порой смысл взглянуть на свой код и подумать: “А действительно мой код написан правильно, возможно, стоит вынести вот эту логику в отдельную функцию…?”

Train-it.ru - с нами хоть в самые глубины тернарных джунглей)

Всем привет! Мы наконец-то запустили новое направление и на сайте уже висит расписание! Да, это про Excel!😊Присоединяйтесь,чтобы не пропускать выход новых уроков и становитесь повелителем таблиц вместе с нами!

Властью данной мне...мной

Если знать что твой следующий шаг не обернётся ошибкой, сделать его намного спокойнее…

Привет!

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

Предположим, у нас есть источник данных, не мы его разрабатываем/поддерживаем, у нас даже нет к нему доступа как такового, чтобы посмотреть, что там творится. Просто при GET запросе с неким ID пользователя (также, без потери какой-либо общности, будем считать что запрос выполняется успешно, падающие запросы рассмотрим в другой раз, честное пионерское!!!) он нам возвращает объект формата:

json
{
    status: "succeeded",
    error: "",//пустая если на той стороне не случилось ничего плохого
    responseObject: {
        userInfo: {
  id: 7454
            title: "",
            login: "",
            rating: {
                likes: 456,
                dislikes: 10
            },
            ...//еще ряд полей
        }
    }
}

Нам нужно из данного объекта вывести количество лайков и дизлайков, которые поставили пользователю. Казалось бы, что могло бы быть проще, скажете вы (и в принципе будете правы). Предположим получаемый объект записывается в некую переменную const response:

js
const response = getUserByID(7454);
const likes = response.responseObject.userInfo.rating.likes;
const dislikes = response.responseObject.userInfo.rating.dislikes;

И вот наша жизнь прекрасна и удивительна и мы спим спокойно, но неожиданно, которое всегда наступает, кто-то делает запрос для юзера, которого не существует в нашей системе, скажем, с ID = 999999 и мы получаем ответ:

json
{
    status: "succeeded",
    error: "",
    responseObject: {
        userInfo: null
    }
}

И наш код вполне закономерно начинает бросать ошибку:

Uncaught TypeError: Cannot read properties of null (reading 'rating')

Конечно мы могли бы добавить обработку исключений, что исправило бы ситуацию, но таким образом мы немного теряем контроль над потоком исполнения… Другой вариант делать проверки на существование поля и наличия в нем значения, типа:

js
if (response.responseObject.userInfo) {
    response.responseObject.userInfo.rating.likes;
}

И вы довольные снова спите спокойно и радуетесь жизни, но в один прекрасный и замечательный солнечный день дата центр не справляется с потоком тепла от этого мира и… перегревается, там накрывается все охлаждение!!! И, о боль, у сервиса, который верно и преданно вам давал данные из базы данных с юзерами больше нет такой возможности и он стал возвращать:

json
{
    status: "failed",
    error: "Request failed, please help us!!!",
    responseObject: null
}

А вы были так уверены, что в нашей жизни все так стабильно, что не написали проверку на status и снова все полетело с ошибкой…

Как же избежать такой ситуации и не писать if с проверками на каждый чих? Наконец-то мы подходим к теме сего поста (ура-ура):

js
const response = getUserByID(999999);
const likes = response?.responseObject?.userInfo?.rating?.likes;
const dislikes = response?.responseObject?.userInfo?.rating?.dislikes;

Безусловно, проверки были бы и раньше на более верхнеуровневые объекты, здесь это показано с точки зрения лаконичности.
Далее просто разово проверить что likes получили свое значение (и при желании вывести какое-то дефолтное значение).

* Все описанное является вымыслом! Ни один программист не пострадал, наверное…
** Безусловно в дата центрах всегда есть реплики, но коннекшн с БД дело порой не столь постоянное как того бы хотелось…

Train-it.ru - с нами ваш сон станет крепче)

Мы для вас не только смешную картинку нашли, но и запостили на сайт расписание следующих уроков! Заходим, ознакамливаемся,подписываемся!🤓

Не теряем контроль даже в неожиданных ситуациях!)

Привет!

Каждый из нас в жизни сталкивается с чем-то непредвиденным/незапланированным. И, хотя это могут быть не самые “приятные” или “уместные“ события, главное в них то, как можем взять это все под контроль и продолжить делать то, что от нас требуется.

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

Суть у этих и всех других “опасных” ситуаций одна и та же - это просто некоторый блок кода, который может “упасть” (бросить/кинуть ошибку). Схема контроля в общем виде тоже одна:

js
try {
//блок кода, который может упасть 
} catch (exception) {
//обработка ошибки
} finally {
//действия, которые выполняются
}

Блоки “catch’ или “finally” могут отсутствовать, но хотя бы один из них обязательно должен присутствовать.

Также могут быть ситуации, когда требуется разместить внутри блока “try” еще один блок с кодом, который тоже может упасть, схематично это может выглядеть так:

js
try {
  try {
  //блок кода, который может упасть 
  } catch (exception) {
  //обработка ошибки
  }
} finally {
//действия, которые выполняются
}

А теперь давайте посмотрим на что-то “живое”:
Предположим, у нас есть функция, принимающая на вход строку с ФИО, разбивающая ее на фамилию, имя и отчество и делающая в них первый символ заглавным, а остальные строчными (да есть множество кейсов, когда, например, имена составные или у человека нет отчества, но давайте для простоты это опустим):

js
function normalizeTitle(title) {
    return title[0].toUpperCase() + title.substring(1).toLowerCase();
}

function personTitleParser(personTitle) {
    const splitTitle = personTitle.split(" ");
    return { 
        lastName: normalizeTitle(splitTitle[0]),
        firstName: normalizeTitle(splitTitle[1]),
        patronymic: normalizeTitle(splitTitle[2])
    }
}

Вы живете спокойно и прекрасно пользуетесь функцией, пока к вам не приходит человек, который просто написал что его зовут:

js
personTitleParser(“Петя”);

И вы ловите: “Uncaught TypeError: Cannot read properties of undefined (reading '0')”. Безусловно, грамотным решением было бы сначала обрабатывать строки на непустоту и массив на наличие именно трех элементов. Давайте тогда так и сделаем:

js
function normalizeTitle(title) {
    if (!title) return "";
    return title[0].toUpperCase() + title.substring(1).toLowerCase();
}

function personTitleParser(personTitle) {
    const splitTitle = personTitle?.split(" ");
    if (!splitTitle || splitTitle.length !== 3) {
        throw new Error(`Строка с ФИО должна содержать три элемента. Переданное значение: '${personTitle}'`);
    }
    return { 
        lastName: normalizeTitle(splitTitle[0]),
        firstName: normalizeTitle(splitTitle[1]),
        patronymic: normalizeTitle(splitTitle[2])
    }
}

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

js
try {
    personTitleParser("Петя");
} catch (e) {
//Это, конечно, не самый красивый способ, но далее мы можем сделать уже то что именно мы хотим, вернув контроль над исполнением, а не просто упасть
    alert(e);
}

Train-it.ru - помогаем сохранить управление!)

Покажи мне свою метаинформацию и я буду все о тебе знать)

Привет!

Всегда приятно обладать какой-то информацией, а когда она нам еще и помогает, так это вообще нету слов…) Вот так и мы, когда создаем какую-то HTML страницу, можем помочь миру чуть быстрее понять что на ней находится и позволить жаждущим ее найти с помощью метаинформации (“меты”).
Метаинформация содержится уже в хорошо знакомых нам тегах, которые зовутся, возможно, неожиданно “meta” и могут выглядеть как-то так для страницы онлайн магазина, на которой можно купить яблоки:

html
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Сочные сладкие яблоки сорта дичка эксклюзивом от онлайн-магазина СуперМегаПлюсМагазин с доставкой на дом, по самым выгодным  ценам во вселенной">
  <meta name="keywords" content="Яблоки, Дичка, Сочные яблоки, Яблоки с доставкой">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Давайте теперь разберем чего мы тут успели миру наговорить:
1. charset - показывает в какой кодировке браузеру нужно обрабатывать данную страницу (для человека бесполезная информация)
2. name="description" - здесь мы описываем что это вообще за страница такая и что она содержит (это уже полезно для поисковых роботов, а соответственно и для людей)
3. name="keywords" - ключевые слова, можно сказать суть страницы в тезисах (аналогично по эффекту второму пункту)
4. name="viewport" - как браузеру отображать полученную страницу (человеку тоже мало чем может помочь)

Как мы видим, данные теги помогают не только нам найти то что нам нужно, но также и отобразить это так как авторы это задумали)

Train-it.ru - помогаем людям и интернетам стать ближе)

Обновлено расписание на апрель-май 😉
Расписание, как всегда, можно посмотреть на главной странице

Всем отличных выходных!
И чтобы не было таких ситуаций как в сегодняшнем пятничном меме 😁

Регистрация на стрим «Прожарка 🔥 макетов» открыта!

Вот и подошёл черёд второго по счету стрима, который состоится 19 мая в 16:00 по Московскому времени! На этом стриме мы с вами будем перебирать интересные лендинги со сложными блоками и верстать их в прямом эфире 😉

💥👉 https://train-it.ru/frying-layouts 👈💥

В данный момент действует льготная цена до среды 11 мая включительно. В четверг 12 мая цена повысится!

Так же, по результатам прошедшего голосования, на этом стриме мы с вами прикоснемся к программированию и создадим полезный функционал на JavaScript! 🤩

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

Важное напоминание❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.

💥👉 https://train-it.ru/frying-layouts 👈💥

Импровизация, куча фишек, живое и ламповое общение — далеко не всё, что будет ждать вас на стриме🥳

Тренировка насмотренности одна из важнейших составляющих при вёрстке любых блоков и элементов. Чем больше вы делали таких блоков и элементов, тем больше с первого взгляда будете понимать как он устроен и на какие составляющие делится. А если вы будете визуально понимать как устроен блок, это уже 50% сделанной работы, остаётся только перенести эту структуру в HTML и CSS, и, если надо, ещё и в JS.

Именно этим мы и будем заниматься на стриме 19 мая в 16:00! Мы будем перебирать интересные блоки на лендингах, что вы мне присылали. И конечно же воспроизводить их с нуля.

Регистрация на стрим:
💥👉 https://train-it.ru/frying-layouts 👈💥

Помимо этого мы с вами прикоснёмся к программированию на JavaScript, и сделаем прикольный и полезный функционал, который можно использовать на лендингах или для личного пользования! И, возможно, вы будете гораздо меньше бояться загадочного JavaScript 😁

Важное напоминание❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.

Регистрация на стрим:
💥👉 https://train-it.ru/frying-layouts 👈💥

Тем более, сейчас действует льготная цена до 11 мая включительно! А уже 12 мая цена поднимется.