Сообщество - Web-технологии

Web-технологии

520 постов 5 813 подписчиков

Популярные теги в сообществе:

6

Ответ на пост «Есть вопрос по Youtube»1

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


Например вы каким-то образом узнали что основная часть вашей аудитории в московском часовом поясе и смотрят ютуб тихими холодными одинокими вечерами. Предположительно основная часть просмотров идёт с главной страницы на которую попадают популярные(набирающие популярность) видео релевантные для вашей аудитории.


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


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


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


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


Если на ютубе важнее просмотры, то на пикабу плюсы, и нам надо их набрать и не набрать минусов. Т.е. контент должен быть выложен в то сообщество и с теми тегами, люди подписанные на которые будут плюсовать и не должен быть выложен туда где его будут минусовать. (Ваш кэп)


И в данном случае выкладывание на пикабу в обед может поспособствовать достаточного количества просмотров для появления в рекомендациях на ютубе к вечеру.


P.s.: Решил поразмышлять во время обеда )

P.s.s: Информация в посте может не соответствовать реальности.

Показать полностью
5

Есть вопрос по Youtube1

Чем занимаюсь ?


Я веду свой образовательный youtube канал, куда выкладываю видеоуроки по web-разработке, созданию сайтов и программированию.


Я имею коммерческий опыт в разработке и программировании (7 лет), а также имею опыт преподавания программирования (2 года).


Понятное дело что у меня есть хобби и тд. помимо программирования.


В чем вопрос ?


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


Если есть какие-то советы или предложения жду ваши комменты под этим постом.


Если интересно то вот ссылка на канал


Заранее спасибо за ваше мнение )

Показать полностью
10

Тип данных String в JavaScript

string - примитивный тип данных, представляет собой цепочку элементов использующую кодировку UTF-16, вне зависимости от кодировки которую использует страница. Больше уроков у меня на канале UTF-16 описывает возможность хранения символов unicode с помощью 16 или 32 битных значений. Любые текстовые данных в JavaScript являются строкой в том числе и JSON.

Можем создавать строки разными способами:

// Одинарные кавычки
const stringExample_1 = 'Hello world #1';

// Двойные кавычки

const stringExample_2 = "Hello world #2";

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

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

const stringExample_3 = 'I am \'not\' sentient';

// Аналогично и с двойными кавычками.
const stringExample_4 = "I am \"not\" sentient";

// Решаем ситуацию проще, используя один тип кавычек внутри другого.
const stringExample_5 = 'I am "not" sentient';

Обратные кавычки


Шаблонные строки или шаблонные литералы.


Внутри обратных кавычек мы можем вычислять какое-то выражения или подставлять значение переменной, предварительно обернув его в ${}, этот функционал доступен только при использовании обратных кавычек.

const stringExample_6 = `Hello world #3`;
const stringExample_7 = `Hello world #${2+2}`;
const helloWorldNumber = 5;
const stringExample_8 = `Hello world #${helloWorldNumber}`;

Важно! То что мы передаем внутрь ${} будет преобразовано в строку.

Мы можем добиться аналогично поведения если будем использовать оператор '+' и одинарные или двойные кавычки. Это операция называет 'конкатенация строк'.

const stringExample_9 = 'Hello world #' + 6;
const stringExample_10 = "Hello world #" + 7;

Для того чтобы узнать количество символов в строке мы можем обратится к ее свойству length.

const stringExample_11 = 'Hello world #';
console.log(stringExample_11.length); // 13 символов

Для того чтобы получить символ из строки вы можете обратиться к нему по его индексу. Индексирование строк начинается с 0 и заканчивается количеством ее символов минус 1.

const stringExample_12 = 'Hello world #9';
const firstChar = stringExample_12[0]; // H
const thirdChar = stringExample_12[2]; // l
const lastChar = stringExample_12[stringExample_12.length - 1]; //9

Иммутабельность строк

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


const stringExample_13 = 'Hello world #10';

// Заменяем первый символ строки.
stringExample_13[0] = 'Q';

console.log(stringExample_13); // 'Hello world #10'

Строка не изменилась

Также в строках мы можем использовать unicode символы

console.log('\u{1F60D}')

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

Показать полностью
5

Функции в SASS / SCSS

Привет, в этом уроке мы научимся использовать функции в SASS / SCSS, рассмотри примеры их работы, а также разберемся с новым, для нас, циклом @for. Напишем несколько функций и посмотрим для чего они вообще нужны. Приятного просмотра. Больше уроков у меня на канале.

9

Рендер страницы через JavaScript

Задача

Есть API, который в ответ на запрос отдает json со списком фреймворков и их описанием. Необходимо на его основе отрендерить карточки.

Рендер страницы через JavaScript Программирование, Разработка, IT, Программист, Обучение, Javascript, Json, Frontend, Web, Web-программирование, Рендер, HTML, Кодирование, Фронт, Длиннопост

Прототип

Алгоритм

- Получить список;

- Обработать список;

- Отрендерить в HTML.


1. Получить список

Для данной статьи я подготовил тестовые данные, которые можно получить по адресу:

https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...

Чтобы сделать HTTP запрос — используйте метод fetch:

fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")

2. Обработать список

Вот как выглядит json, который мы получаем:

{
  "success": true,
  "list": [
    {
      "title": "React",
      "text": "React is an open-source...

Напишем функцию buildHTML, которая на вход будет принимать JSON, а отдавать строку, которую мы в будущем используем как HTML:

// HTTP запрос
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  // переводим ответ в json
  .then(response => response.json())
  // конвертируем в html
  .then(buildHTML)

Определение функции:

const buildHTML = ({ list }) =>
  list.map(({ title, text }) => (`
    <div>
      <h2>${title}</h2>
      <p>${text}</p>
    </div>
`)).join("");

3. Отрендерить в HTML


fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  .then(response => response.json())
  .then(buildHTML)
  .then(render); // полученный результат передает в функцию render

В файле HTML создадим пустой контейнер, куда будем вставлять карточки:

<div class="container"></div>

https://developer.mozilla.org/en-US/docs/Web/API/Element/inn... функции render сводится лишь к использованию свойства innerHTML:

const render = (html) => {
  const container = document.querySelector('.container');
  container.innerHTML = html;
};
Рендер страницы через JavaScript Программирование, Разработка, IT, Программист, Обучение, Javascript, Json, Frontend, Web, Web-программирование, Рендер, HTML, Кодирование, Фронт, Длиннопост

Результат

Полную версию кода смотрите на codepen.

Показать полностью 2
8

Тег input в HTML

Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.

Этот видео-урок является дополнением к посту о input - ссылка на пост
Показать полностью
5

Как работает тег <form> в HTML

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

<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее. <form> имеет достаточно много атрибутов, мы разберем самые распространенные. Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.

<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
action - определяет ссылку на сервер куда будут отправляться данные из <form>.

method - определяет метод http с помощью которого будут отправляться данные.

target - определяет в каком окне будет производиться отправка, в новом или текущем.


Также есть еще много атрибутов у тега <form>, о них читайте в документации.


P.S. Больше уроков у меня на канале
Показать полностью
16

Как сечь холопов плетьми объектно и по параметрам

Лучший в мире язык для промышленной веб-разработки - PHP. Он прост в освоении, имеет огромную экосистему, быстр, вынослив и кормить совсем не нужно.


Типичный стиль написания кода, используемый в PHP - "объектно ориентированный". На втором уроке по PHP новичок легко осваивает этот принцип и всю жизнь, в меру своей испорченности, использует его.


Отступление для зануд, которое приличные люди могут не читать: PHP является т.н. "Тьюринг-полным" языком, на котором возможно творить любую бесовщину. Мне известно о возможности писать на PHP приложения с окошками для Windows. Я знаю, что есть любители писать на PHP в "функциональном" стиле. Но приличный человек будет копать землю лопатой, а не любимой серебряной ложечкой для чая.


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


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


Объе́ктно-ориенти́рованное программи́рование (ООП) — методология программирования, основанная на представлении программы в виде совокупности объектов, каждый из которых является экземпляром определённого класса, а классы образуют иерархию наследования.
Идеологически ООП — подход к программированию как к моделированию информационных объектов, решающий на новом уровне основную задачу структурного программирования: структурирование информации с точки зрения управляемости, что существенно улучшает управляемость самим процессом моделирования, что, в свою очередь, особенно важно при реализации крупных проектов.
Управляемость для иерархических систем предполагает минимизацию избыточности данных (аналогичную нормализации) и их целостность, поэтому созданное удобно управляемым — будет и удобно пониматься. Таким образом, через тактическую задачу управляемости решается стратегическая задача — транслировать понимание задачи программистом в наиболее удобную для дальнейшего использования форму.

Как сечь холопов плетьми объектно и по параметрам PHP, Web-программирование, Яндекс Дзен, Длиннопост

Человек, писавший эти слова, не хотел объяснить, как работает ООП. Он хотел показать, какой он умный. Там дальше еще больше интересного, кому не хватило:

абстракция - для выделения в моделируемом предмете важного для решения конкретной задачи по предмету, в конечном счёте — контекстное понимание предмета, формализуемое в виде класса;

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


А теперь воспряньте, ибо я попытаюсь рассказать про практическое применение ООП при разработке на PHP. И вы увидите, что на деле это очень просто.


Предмет

Первый способ использования объектов в PHP - это группировка данных (это "свойства" объекта) для передачи куда-то.


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


Мы вызываем приказчика и говорим: "этого сечь плетьми на конюшне, он вредитель". Таким образом, приказчик получил команду ("сечь плетьми") и параметры (кого - "вот этого", за что - "он вредитель").


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


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


Допустим, в нашем коде функция "сечь плетьми по параметрам" используется с десяток раз по разным поводам. Холопов ведь в строгости держать надобно. И мы хотим, так сказать, обновить функционал: раньше каждому полагалось по 10 плетей, а теперь малолетним по 3, зато взрослым 15.


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


При передаче же объекта нам ничего не надо переделывать, кроме инструкции приказчику (тела самой функции): "спроси-ка, любезный, сколько ему лет, и секи в зависимости от этого".


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


Дополнительная "плюшка", которые мы получаем: объект, при создании, вероятно, проверяется на корректность, и нам нет необходимости каждый раз при работе с ним убеждаться в том, что он вообще существует (вот же он).


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


Сервис

Второй способ использования объектов в PHP - это группировка "команд" (это называется "методы").


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


Здесь "кузница", можно: подковать лошадь, изготовить кольчугу, заточить меч, сковать гвоздь.

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


Конструктор

Когда мы говорим "этого сечь", откуда же взялись все параметры, нужные приказчику для наказания?


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


Часть получил в результате каких-то действий: например, наш Питер потерял руку в результате несчастного случая. В результате произошло изменение состояния объекта (свойство "количество рук" уменьшилось).


Конструктор позволяет создать объект по минимальному набору параметров, позволяющих ему существовать. Пусть он пока маленький, ничего не умеет, но у него уже есть имя, фамилия и родители. Плюс некий набор "стандартных" параметров: две руки, две ноги, голова. Наличие кожи конструктор отмечает самостоятельно: нет необходимости описывать объект слишком подробно, когда есть базовая информация о том, как выглядят объекты этого класса.


Создавая объект "конюшня", мы определяем минимально необходимые для создания конюшни вещи: где она будет стоять, сколько будет стойл, кто будет в ней работать и т.д. После чего конюшня готова выполнять свои функции. Если бы мы забыли назначить работников, наши команды не могли бы быть выполнены. Поэтому конструктор объекта должен следить за полнотой предоставленных данных. Это называется валидация.


Все вместе

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


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


Все это уже относится к практическим вопросам, которые решаются при проектировании системы.


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


Помните - только практика может превратить "чайника" в настоящего PHP-боярина!


Источник

Показать полностью 1
Отличная работа, все прочитано!