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

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

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

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

8

О важности оптимизации

Один достойный человек вчера спросил меня:


- У меня огромный массив. Будет ли быстрее разбить его на куски для обработки, чтобы сэкономить память?


С той поры, когда Билл Гейтс произнес свою знаменитую фразу "640 килобайт хватит всем", доступный объем памяти все время растет, но остается конечной величиной. Например, мой домашний компьютер имеет 128Гб памяти, то есть ровно в хрен-знает-сколько-лион раз больше, но браузер Google Chrome легко поглощает весь этот объем.


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


Мне пока ни разу не говорили. Аналогия с мотором автомобиля (он лучше всего работает в определенном диапазоне оборотов) - ложная: модули памяти не изнашиваются от перезаписи. Кожаные мешки могут расслабиться: электронные мозги гораздо выносливее их унылого серого вещества.


В то же время, мне совершенно точно известно: запустив 50 процессов по 4Гб, я загоню компьютер в своп, а если его не хватит, OOM killer разберется кто виноват и накажет кого попало. Начнет убивать процессы, и тогда "те из вас, кто останется в живых, будут завидовать мертвым".

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


Может оказаться так, что мы легко сокращаем потребление памяти в 10 раз, просто возвращая генератор вместо массива. А иногда приходится биться несколько недель ради экономии в 10%.


И это время:

а) стоит денег,

б) никогда не вернется в вашу жизнь.


Оптимизируйте, прежде всего, своё свободное время. Человек изнашивается гораздо быстрее железяки.


Источник

Показать полностью 1
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. Больше уроков у меня на канале
Показать полностью
Отличная работа, все прочитано!