不要被骗子欺骗！Telemetrio 会找到并标记这些频道 👉 如果想查看标记，请订阅

Frontender Libs - обзор библиотек JS / CSS

前往频道在 Telegram

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev

显示更多

网络: Senior Frontend - javascript, html, css俄罗斯82 300技术与应用15 255

7 320

订阅者

-624 小时

-327 天

-11130 天

395

帖子浏览量

~ 23424 小时

~ 31248 小时

5.39%

参与率

~ 1

每日帖子数

Ads index

帖子存档

\n\n\n Этот текст не будет показан, пока браузер не выполнит big.js.\n\n\nЧтобы этого избежать, JavaScript предоставляет нам две техники, известные как async и defer. Вы можете просто добавлять эти атрибуты к тегам \n\n\nПервым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать.","datePublished":"2020-08-19T16:03:00Z","dateModified":"2020-08-19T16:03:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2317},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":53}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/119","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/119","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/119","headline":"CSS | line-clamp Свойство CSS -webkit-line-clamp позволяет ограничить содержимое контейнера блока указанным к…","articleBody":"CSS | line-clamp \n\nСвойство CSS -webkit-line-clamp позволяет ограничить содержимое контейнера блока указанным количеством строк\nНам, чтобы им пользоваться, надо прибегнуть к старой реализации flexbox, применив свойства display: -webkit-box и -webkit-box-orient: vertical.\n\n.card-description {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n\nОписание карточки отобразит только 3 строки","datePublished":"2020-08-19T09:05:00Z","dateModified":"2020-08-19T09:05:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2275},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":49}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/118","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/118","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/118","headline":"Frontender Libs - обзор библиотек JS / CSS","datePublished":"2020-08-18T16:03:00Z","dateModified":"2020-08-18T16:03:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2123},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/117","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/117","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/117","headline":"CSS | Плавная прокрутка Раньше, для оснащения страницы плавной прокруткой, требовалось задействовать нескольк…","articleBody":"CSS | Плавная прокрутка\n\nРаньше, для оснащения страницы плавной прокруткой, требовалось задействовать несколько строк JS-кода. А теперь эта задача может быть решена исключительно средствами CSS\n\nhtml {\n scroll-behavior: smooth;\n}\n\nПосле этого кода все якорные ссылки на странице будут прокручиваться плавно.Его пока не поддерживают Edge, IE и Safari (настольная и мобильная версии)","datePublished":"2020-08-18T09:03:00Z","dateModified":"2020-08-18T09:03:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2283},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":68}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/116","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/116","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/116","headline":"Кто такой Deno? Deno – это новая runtime-среда для JavaScript и TypeScript от создателя Node.js. Инструмент п…","articleBody":"Кто такой Deno?\n\nDeno – это новая runtime-среда для JavaScript и TypeScript от создателя Node.js. Инструмент построен на V8 (JavaScript-движок ), Rust (производительный и безопасный язык) и Tokio (асинхронный рантайм для Rust).\n\nПреимущества \n- Модули Deno могут быть размещены в любом месте ( локально кэшируются, не используется \"package.json\" )\n- Безопасность ( не имеет открытого доступа к файловым или сетевым ресурсам по умолчанию)\n- Встроенный TypeScript\n- Тестирование ( в ядре )\n- Форматирование кода\n- Дебаг\n- Compile/Bundle\n- Deno HTTP server смогло обработать 25 тысяч запросов в секунду с максимальной задержкой в 1.3 миллисекунд. В Node.js аналогичное приложение обработало 34 тысячи запросов в секунду, но задержки колебались от 2 и 300 миллисекунд\n- Все скрипты приложения могут быть объединены в один JavaScript файл\n\nDeno имеет все шансы стать более продуманной средой выполнения Javascript, чем Node.js.","datePublished":"2020-08-17T16:03:00Z","dateModified":"2020-08-17T16:03:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2285},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/115","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/115","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/115","headline":"Node.js | Streams Стрим — это концепция, c помощью которой можно обрабатывать данные небольшими частями, что…","articleBody":"Node.js | Streams\n\nСтрим — это концепция, c помощью которой можно обрабатывать данные небольшими частями, что позволяет задействовать небольшой объем оперативной памяти. \nНапример нужно записать \"тяжелый файл\"\n\nconst fs = require('fs');\nconst file = fs.createWriteStream('./big.file');\nfor(let i=0; i<= 1e6; i++) {\n file.write('Длинный текст\\n');\n}\nfile.end();\n\nЗапуская сервер мы получим нагрузку на оперативную память ~ 400 MB\nМодуль fs.createReadStream может предоставить нам Stream\n\nconst fs = require('fs');\nconst server = require('http').createServer();\nserver.on('request', (req, res) => {\n const src = fs.createReadStream('./big.file');\n src.pipe(res);\n});\nserver.listen(8000);\n\nКогда клиент запросит этот файл, мы транслируем его по частям, что означает, что мы вообще не буферизуем его в памяти. Использование памяти снизилось до 25 МБ.\n\nВ статье вы найдете больше информации и где еще применяют потоки.","datePublished":"2020-08-17T09:02:00Z","dateModified":"2020-08-17T09:02:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2434},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":44}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/114","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/114","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/114","headline":"Frontender Libs - обзор библиотек JS / CSS","datePublished":"2020-08-16T16:02:00Z","dateModified":"2020-08-16T16:02:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2417},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/113","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/113","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/113","headline":"Frontender Libs - обзор библиотек JS / CSS","datePublished":"2020-08-16T16:02:00Z","dateModified":"2020-08-16T16:02:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2762},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/112","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/112","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/112","headline":"SQL | Подзапрос с EXISTS Например выберем всех клиентов, которые совершили покупки до конца зимы: select id,…","articleBody":"SQL | Подзапрос с EXISTS\n\nНапример выберем всех клиентов, которые совершили покупки до конца зимы:\n\nselect id, company_name\nfrom client\nwhere exists (select *\n from purchase\n where client.id = purchase.client_id\n where date > '2020-28-02')\n\nОператор EXISTS используется для проверки существования любой записи в подзапросе. Если подзапрос возвращает одну или несколько записей, то возвращается true. Обычно EXISTS используется в зависимых (коррелирующих) подзапросах.","datePublished":"2020-08-16T09:03:00Z","dateModified":"2020-08-16T09:03:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2440},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}}]}

7 320

PHP | MAIL Рассмотрим простейший пример отправки письма PHP

<?php 
$to  = "<mail@example.com>, " ; 
$to .= "mail2@example.com>"; 
$subject = "Заголовок письма"; 
$message = ' <p>Текст письма</p> </br> <b>1-ая строчка </b> </br><i>2-ая строчка </i> </br>';
$headers  = "Дополнительный зоголовок"; 

mail($to, $subject, $message, $headers); 
?>

В начале мы определяем кому адресовано письмо, за это отвечает переменная $to, если же получателей несколько человек, то записываем через запятую адреса эл. почты. Переменные $subject и $message тема и текст письма соответственно. Cейчас же так никто не делает, потому что почта стала более сложной вещью, поэтому используют библиотеки Swift Mailer или PHPMailer. В статье присутствует инструкция по PHPMailer.

7 320

JS | Копирование объектов 1.

function copy(mainObj) {
  let objCopy = {}; // objCopy будет хранить копию mainObj
  let key;
  // копирует каждое свойство objCopy
  for (key in mainObj) {
    objCopy[key] = mainObj[key]; 
  }
  return objCopy;
}

let objCopy = Object.assign({}, obj);

let newObj = JSON.parse(JSON.stringify(obj));

 let newObj = { ...obj };

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

7 320

Какой цвет будет при наведении на ссылку после ее посещения?

Anonymous voting

7 320

GIT | Основные команды - git init - создает в текущем каталоге новый подкаталог с именем .git, создает git - репозиторий. - git status - статус файлов, любых изменений. - git add имя_файла - начинает отслеживать введенный файл. - git add . - для отслеживания всех новых файлов текущего локального репозитория. - git diff --cached - для просмотра что войдёт в следующий коммит. - git commit -m "name commit" - фиксация изменений, создание коммита. - git checkout master - отменит последние коммиты. - git reset HEAD - очищает буферную зону от изменений, которые мы только что проиндексировали. - git remote add origin - связывается с вашим репозиторием на GitHub, добавьте ссылку на ваш гит-репозиторий в конце. - git push -u origin master - для размещения локального репозитория на сервере GitHub (или внесения изменений).

7 320

JSON.parse() и JSON.stringify() нужны для преобразования json строки в объект и наоборот Например, нам нужно сохранить данные в localStorage:


const object = {id: 1};
const string = JSON.stringify(object);
localStorage.setItem(key, string);
const data = localStorage.getItem(key);
const retrieved = JSON.parse(string);
// retrieved содержит объект {id: 1}

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


const userStr = JSON.stringify({
  id: 1, 
  name: 'John', 
  friends: [
    {id: 2, name: 'Maria'}, 
    {id: 3, name: 'Peter'}
  ]
});
const clone = JSON.parse(userStr, 
  (key, value) => {
 if (typeof value === 'string') {
     return value.toUpperCase();
   }
   return value;
});
console.log(clone);
// { 
//   id: 1, 
//   name: "JOHN", 
//   friends: [
//   {id: 2, name: "MARIA"}, 
//   {id: 3, name: "PETER"}
//   ]
// }

7 320

🔥 Для тех кто ищет первую работу в IT Работодатели платят хорошую ЗП, но не берут на себя обучение кадров. Их можно понять - бизнесу надо решать задачи прямо сейчас Чтобы избежать боли поиска первой работы - возьмите обучение на себя В Skillbox можно пройти обучение с гарантированным трудоустройством: Frontend разработчик - 2750р / мес * Fullstack разработчик - 2919р / мес * Веб-разработчик PRO - 4083р / мес * - первый платеж через 6 месяцев

7 320

CSS | Random Нестандартная реализация генерации случайного числа на чистом CSS без строчки JS. Автор использовал :

@keyframes
z-index
:checked

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

7 320

Чему равно $keys[1] ?

Anonymous voting

7 320

SQL | JOIN Оператор языка SQL JOIN предназначен для соединения двух или более таблиц базы данных по совпадающему условию. Выведем все голы, забитые в матче Россия-Чехия

SELECT player, gtime
  FROM game JOIN goal ON matchid = id 
    WHERE (team1='RUS' AND team2='CZE')

7 320

JavaScript | async и defer Если скрипт – внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.

<head>
  <script src="big.js"></script>
</head>
<body>
  Этот текст не будет показан, пока браузер не выполнит big.js.
</body>

Чтобы этого избежать, JavaScript предоставляет нам две техники, известные как async и defer. Вы можете просто добавлять эти атрибуты к тегам

<script>.

Async — это когда вы говорите браузеру загружать скрипт, не затрагивая рендеринг. То есть, браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится. Defer — сработает, когда весь HTML-документ будет обработан браузером. Также используют, когда нужно выполнить скрипты в строгом порядке

<script src="1.js" defer></script>
<script src="2.js" defer></script>

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

7 320

CSS | line-clamp Свойство CSS -webkit-line-clamp позволяет ограничить содержимое контейнера блока указанным количеством строк Нам, чтобы им пользоваться, надо прибегнуть к старой реализации flexbox, применив свойства display: -webkit-box и -webkit-box-orient: vertical.

.card-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Описание карточки отобразит только 3 строки

7 320

Продолжите SQL запрос, что бы выбрать всех сотрудников начинающихся с буквы 'М' и заканчивающихся на 'А' SELECT * FROM EMPLOYEES WHERE ...

Anonymous voting

7 320

CSS | Плавная прокрутка Раньше, для оснащения страницы плавной прокруткой, требовалось задействовать несколько строк JS-кода. А теперь эта задача может быть решена исключительно средствами CSS

html {
  scroll-behavior: smooth;
}

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

7 320

Кто такой Deno? Deno – это новая runtime-среда для JavaScript и TypeScript от создателя Node.js. Инструмент построен на V8 (JavaScript-движок ), Rust (производительный и безопасный язык) и Tokio (асинхронный рантайм для Rust). Преимущества - Модули Deno могут быть размещены в любом месте ( локально кэшируются, не используется "package.json" ) - Безопасность ( не имеет открытого доступа к файловым или сетевым ресурсам по умолчанию) - Встроенный TypeScript - Тестирование ( в ядре ) - Форматирование кода - Дебаг - Compile/Bundle - Deno HTTP server смогло обработать 25 тысяч запросов в секунду с максимальной задержкой в 1.3 миллисекунд. В Node.js аналогичное приложение обработало 34 тысячи запросов в секунду, но задержки колебались от 2 и 300 миллисекунд - Все скрипты приложения могут быть объединены в один JavaScript файл Deno имеет все шансы стать более продуманной средой выполнения Javascript, чем Node.js.

7 320

Node.js | Streams Стрим — это концепция, c помощью которой можно обрабатывать данные небольшими частями, что позволяет задействовать небольшой объем оперативной памяти. Например нужно записать "тяжелый файл"

const fs = require('fs');
const file = fs.createWriteStream('./big.file');
for(let i=0; i<= 1e6; i++) {
  file.write('Длинный текст\n');
}
file.end();

Запуская сервер мы получим нагрузку на оперативную память ~ 400 MB Модуль fs.createReadStream может предоставить нам Stream

const fs = require('fs');
const server = require('http').createServer();
server.on('request', (req, res) => {
  const src = fs.createReadStream('./big.file');
  src.pipe(res);
});
server.listen(8000);

Когда клиент запросит этот файл, мы транслируем его по частям, что означает, что мы вообще не буферизуем его в памяти. Использование памяти снизилось до 25 МБ. В статье вы найдете больше информации и где еще применяют потоки.

7 320

Что выведет браузер?

Anonymous voting

7 320

SQL | Подзапрос с EXISTS Например выберем всех клиентов, которые совершили покупки до конца зимы:

select id, company_name
from client
where exists (select *
              from purchase
              where client.id = purchase.client_id
              where date > '2020-28-02')

Оператор EXISTS используется для проверки существования любой записи в подзапросе. Если подзапрос возвращает одну или несколько записей, то возвращается true. Обычно EXISTS используется в зависимых (коррелирующих) подзапросах.