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

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

534 поста 5 786 подписчиков

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

7

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

BigInt

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

Проблема в том что тип данных Number может хранить числа только в определенном диапазоне.


const biggestNumber = Number.MAX_SAFE_INTEGER;
console.log(biggestNumber);
console.log(biggestNumber + 1);
console.log(biggestNumber + 2);
console.log(biggestNumber + 3);

Открыть на CodePen


Если мы будем увеличивать это число на Number не сможет точно сохранить результат. BigInt позволяет нам хранить числа за пределами максимального целочисленного значения Number.

Создать BigInt можно следующим образом:

const bigIntExample_1 = 100n;
const bigIntExample_2 = BigInt(100);
console.log(bigIntExample_1, bigIntExample_2);
Открыть на CodePen

Просто добавляем суффикс 'n' в конце литерала числа или используем функцию BigInt().


Теперь попробуем повторить первый пример только уже с использованием BigInt

const bigIntNumber = BigInt(Number.MAX_SAFE_INTEGER);
console.log(bigIntNumber + 1n);
console.log(bigIntNumber + 2n);
console.log(bigIntNumber + 3n);
console.log(bigIntNumber + 4n);
Открыть на CodePen

Аналогично как и с типом данных Number мы можем разделять большие числа через '_'.

const bigIntExample_3 = 1_000_000_000_000_000n;
console.log(bigIntExample_3);

Если мы будем сравнивать BigInt c Number через '===' то при одинаковых значениях получим false, так как это разные типы данных.


const bigIntExample_4 = 10n;
const numberExample_1 = 10;
console.log(bigIntExample_4 === numberExample_1); // false
console.log(bigIntExample_4 == numberExample_1); // true

Открыть на CodePen


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


P.S. Больше информации в видеоуроке

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

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

Хостинг уровня /b или даже ниже1

Привет Пикабу!

Этот пост касается облачных серверов и их поставщиков, а точнее поставщика. Даже если вы не программист или разработчик, уверяю, вы сможете знатно пригореть от манеры работы тех. поддержки сервиса https://cp.vpsdedic.ru (:

Итак, после ухода Oracle из России, я решил поискать сервера в Европе по доступным ценам и мне попался сервис vpsdedic, который предлагал сервера по доступным ценам, а именно 289р в месяц за скромный конфиг, которого-бы мне в принципе для учёбы и экспериментов вполне бы хватило.

Как видно на скрине, они обещают сервер в Нидерландах или Франции за 289 рублей, что как раз уложилось в мой бюджет :)


Но тут возникла задержка, сервер я заказал, а он никак не поднимется, решил спросить о сроках, ответ убил.

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


Пишу, что знатно посмеялся с ситуации, получаю ещё более не понятный ответ от ТП.

Думаю, круто! За 300р сервер в 4 раза мощнее, это просто праздник какой-то!

Но тут оказывается, что сервер то в России, хотя я, напомню, заказывал Нидерланды или Францию!
Ответ как вы понимаете опять убил :)

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

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

Санкции пришли от куда не ждали

Санкции пришли от куда не ждали

P.S  Переносил сайт на другой хостинг, после переноса ssl не поднялся.В веб разработках ничего не понимаю, поэтому написал в техподдержку.Сайт переносил потому, что не мог оплатить старый хостинг из за санкций.Сайт мой.тег "мое"

13

Циклы в SASS / SCSS ( @each )

Привет, в этом уроке мы разберемся что такое циклы в SASS / SCSS на примерах разберем как перебирать структуры данных List и Map и на примерах разберемся как использовать все эти вещи вместе с интерполяцией для динамической генерации стилей. Приятного просмотра.

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

5

Теги: <img>, <audio>, <video>,

Разберемся с тегами которые помогают нам добавлять на страницу изображения и мультимедиа (аудио и видео).

IMG


<img> - позволяет нам добавлять изображения на страницу.

Атрибуты:


src - обязательный атрибут значением которого должна быть ссылка или путь к изображению.


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


width - необязательный атрибут, его значением используется для задания ширины изображению.


height - необязательный атрибут, его значением используется для задания высоты изображению.


* Также у тега img присутствуют другие атрибуты о которых поговорим позднее, а еще ему можно задавать все общие атрибуты (id, class, title и тд.).



Local img

<img src="./assets/img-example.jpg" alt="grapefruit" width="250px" height="250px">

Img from the internet

<img
src="https://upload.wiki__media.org/wikipedia/commons/thumb/7/7b/Orange-Whole-&-Split.jpg/1024px-Orange-Whole-&-Split.jpg"
alt="Img from wikipedia"
width="1024"
>

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

AUDIO


Для добавления аудио на сайт нам нужно использовать тег <audio>. Чтоб указать какой трек мы хотим использовать нам нужно указать путь к файлу трека в качестве значения атрибута src.


<audio controls src="./assets/audio.mp3">
Ваш браузер не поддерживает тег <b>audio</b>
</audio>

Тег <audio> имеет достаточно много атрибутов, мы рассмотрим самые распространенные: src - путь к аудиофайлу.


controls - если атрибут указан то браузер будет пользователю элементы управления треком (перемотка, звук и тд.) .


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


loop - зацикливание трека muted - определяет будет ли воспроизводится звук.


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


<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="./assets/audio.mp3" type="audio/mp3"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>
Браузер попытается скачать трек, который находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.


<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>

VIDEO


Для того, чтобы добавить видео на страницу, мы будем использовать тег <video>.


<video src="./assets/video.webm" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>

Тег video как и тег audio, имеет множество похожих атрибутов:


src - путь к видео файлу.


controls - если атрибут указан то браузер будет пользователю элементы управления видео (перемотка, звук и тд.).


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


loop - зацикливание видео.


muted - определяет будет ли воспроизводится звук.


poster - содержит ссылку на изображение которое будет показано пока видео загружается.


<video src="./assets/video.webm" poster="./assets/poster.jpg" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>

Аналогично тегу <audio> мы можем определять сразу несколько источников видео с помощью тега <source> который будем вкладывать в тег <video>.


<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="./assets/video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>

Браузер попытается скачать видео, которое находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.


<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>

IFRAME


Тег <iframe> позволяет нам вставлять одни страницы в другие, если это не запрещено источником который вы хотите вставить к себе на страницу. У тега iframe достаточно много атрибутов + к нему можно добавлять общие атрибуты которые есть у всех тегов. src - url источника который нужно вставить через iframe.


<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="700"
height="400"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

Добавление внешней страницы в нашу страницу:


<iframe src="https://example.org"
title="iframe Example 1"
width="700"
height="400">
</iframe>

Неработающий iframe:


<iframe src="https://vs-dev.info/"
title="iframe Example 1"
width="700"
height="400">
</iframe>

Вставляем видео с youtube:


<iframe src="https://www.youtube.com/embed/4rOLgFCNrTg_"
title="iframe Example 1"
width="700"
height="400">
</iframe>

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

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

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

Урок - Подключение CSS

HTML существует только для разметки контента, но не несет в себе никакой стилизации элементов. За это отвечает язык CSS. Все визуальные отличия тегов друг от друга мы видим только благодаря тому что браузер имеет свою таблицу стилей которая работает по умолчанию. Как вы уже поняли, для того чтобы мы могли стилизовать элементы сами, нам нужно будет использовать язык CSS. Разберемся как его внедрить на нашу страницу.


Способ #1 - inline styles


Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.


<h1 style="color: red">Some Title - <a href="#">link</a></h1>

Способ #2 - тег <style>


Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.


<head>
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
</head>

Открыть на CodePen


Способ #3 - отдельный файл


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


Атрибуты:

rel - должен иметь значение stylesheet

href - ссылку или путь к файлу .css


Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.


<link rel="stylesheet" href=".././css/style.css">


Способ #4 - отдельный файл через тег <style>


Не рекомендую вам так делать, лучше старайтесь всегда когда возможно подключать свои .css файлы через тег link. Такой способ практически ничем не отличатся от подключения через <link> кроме синтаксиса, но он читается намного хуже и усложняет понимание.


<style>
@IMPORT '.././css/style2.css';
</style>

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

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

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

Урок - Тип данных Number в JavaScript

Привет, сегодня в этом уроке мы познакомимся с типами данных в JavaScript и подробно поговорим о типе данных Number.

Транскрипт урока


Числовой, примитивный, тип данных в JavaScript на который выделено 64 бита памяти, этот тип данных помимо целых чисел включает в себя также хранение чисел с плавающей запятой. В других языках числа могут подразделяться на несколько типов, например: Integer, Float, Double или Bignum. Но в JavaScript тип за числа отвечают типы данных number и bigint. О bigint немного позднее.


const integerNumber = 100;
const floatNumber = 10.2;
const anotherFloatNumber = 10.2002;
console.log(integerNumber, floatNumber, anotherFloatNumber);

Запись больших чисел


Для записи больших чисел мы можем использовать букву 'e' для того чтобы сократить число


const oneBillion = 1000000000; // Здесь у нас 9 нулей
const oneBillionWithE = 1e9; // Здесь тоже
const floatBillions = 5500000000;
const floatBillionsWithE = 5.5e9;
console.log('e', floatBillions, floatBillionsWithE);

Отрицательное число после "e" подразумевает деление на 1 с указанным// количеством нулей:


const oneMillisecond = 0.000001;
const oneMillisecondWithE = 1e-6;
Также большие числа мы можем разделять символом '_' для повышения читаемости.


const bigNumber = 10_000_000_00;

Специальные числовые значения:


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


В JavaScript мы можем делить на 0 и это не вызовет никаких ошибок.


const divOnZero = 10 / 0; // Infinity

Также мы можем задать Infinity явно.


const infinityNumber = Infinity;

NaN - not a number.


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


const exampleNaN_1 = 'Vladimir' * 10;
const exampleNaN_2 = 'Vladimir' / 10;
const exampleNaN_3 = 'Vladimir' - 10;
const exampleNaN_4 = NaN;

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


const exampleNaN_5 = NaN;  // явно
const exampleNaN_6 = 'Vladimir' - 10; // неявно


Negative numbers


Все числа из предыдущих примеров были положительными. Это не относится к NaN. Положительное число или отрицательное легко проверить через Math.sign.


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


const negativeZero = -0;
const zero = 0;

Пример:


const negativeZeroExample = 0 / -10;

Аналогично все числа, кроме NaN, могут быть отрицательными.


const negativeInfinity_1 = -Infinity;
const negativeInfinity_2 = 10 / -0;
const negativeInfinity_3 = -2e6;
const negativeInfinity_4 = -1_000_000_000;

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


Неточности в вычислениях


Из 64 бит, отведённых на число, сами цифры числа занимают до 52 бит, остальные 11 бит хранят позицию десятичной точки и один бит – знак. Так что если 52 бит не хватает на цифры, то при записи пропадут младшие разряды.


Аналогичные проблемы с точностью возникают в языках: PHP, Java, C, Perl, Ruby.



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

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

Помогите с wordpress + SSL

Ребята, заранее извиняюсь, если такое здесь не принято, но я просто уже не знаю что делать.


Суть проблемы:

0. Сайт на wordpress (чтобы не сочли за рекламу ссылку напишу в комментарии)

1. Переехал с hostinger'a на hostland

2. Подключил SSL сертификат

3. У клиента перестали нормально подгружаться CSS. У меня при этом все отображается нормально. Проверял на 2 компах (win и mac разные браузеры), 2 мобилки (ios и android разные браузеры) и планшет. У меня все нормально с версткой, у клиента не грузятся css.


Покурил инет, распространенная тема, что слетают CSS при установке SSL на сайт с wordpress. Перепробовал кучу инструкций, ничего не помогает. У меня как отображалось все нормально, так и отображается. У клиента же верстка плывет...


Подскажите, куда копать? Что делать? Как отловить эту проблему?

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