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

HTML | Emoji HTML5 поддерживает множество emoji, если установить кодировку символов документа в UTF-8

<meta charset="UTF-8">

Так же Emoji доступны из CSS и JS h1::before { content: "🍔"; } h1::before { content: "\01F354"; } document.body.innerText = "😀"; document.body.innerText = String.fromCodePoint(0x1F354);

На каком языке пишут 90% малварей? На самом деле, написать троян или шифровальщик можно на любом языке программирования, но профи чаще выбирают С++ или Delphi. Чем обусловлен их выбор можно почитать на канале LOCKNET | DEEPWEB, автор которого вещает о хакинге, приватности и кибербезопасности. ► Как снизить вероятность кражи своих данных? ► Как написать своего Telegram-бота для деанона? ► Как защитить себя от перехвата СМС-кодов? ► Что такое SQL инъекции и для чего их проводят? ► Как понять, что у вас установлено шпионское ПО? LOCKNET | DEEPWEB — о том, как защитить себя от киберпреступников в эпоху хакеров и скрипт-кидди.

CSS | Width: auto Когда мы зададим блочному элементу width:100%, он растянется на всю ширину родительского блока, и не забывайте, что у блочных элементов присутствуют еще margin, padding и border. Поэтому, если они > 0, то элемент выйдет за пределы родительского блока. А вот если задать width:auto, наш блочный элемент поместится внутри родительского элемента, даже если в нем присутствуют margin, padding и border Потренируйтесь с классом .item в примере ниже на CodePen, меняя свойство width

Node.js | console.table С помощью console.table(tabularData[, properties]) можно красиво выводить таблицы в консоль. Первым аргументом необходимо подать массив или объект, а вторым при желании можно подать массив столбцов, что будут выведены в таблице. Пример console.table([{ a: 1, b: 'Y' }, { a: 'Z', b: 2 }], ['a']) Результат

┌─────────┬─────┐
│ (index) │  a  │
├─────────┼─────┤
│    0    │  1  │
│    1    │ 'Z' │
└─────────┴─────┘

SQL | Подсчёт определённых символов в строке Казалось бы, очень простая задача. Однако в SQL нет специального метода для подсчёта вхождений символа в строку. Зато есть метод LENGTH, с помощью которого можно узнать длину строки. Следовательно, для выполнения исходной задачи нам нужно: 1. Получить длину исходной строки 2. Заменить в исходной строке искомые символы на пустоту ('') 3. Вычесть из длины исходной строки длину полученной строки SELECT (LENGTH('1 2 3 4 5 6') - LENGTH(REPLACE('1 2 3 4 5 6', ' ', ''))) AS symb_count Это и будет количеством вхождений нужного нам символа в строку.

PHP | Вывод значения переменной Обычно для вывода переменных во время дебага пользуются функциями echo, var_dump или print_r. У каждой из этих функций есть как свои плюсы, так и свои минусы. Например, echo не сможет вывести содержимое массива, а вывод var_dump или print_r может оказаться громоздким. Довольно большое количество времени я пользуюсь самописной функцией на основе json_encode:

function vi ($o) {
  echo(''.json_encode($o, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE).'');
}

HTML | Семантика В HTML4 веб-разработчики использовали свои собственные имена в идентификаторах/классах элементов для их стилизации: header, top, bottom, footer, menu, и т.п. Поисковые системы не могли корректно идентифицировать роль того или иного контента веб-страницы. В HTML5 появились семантические элементы: <article> - Определяет статью <aside> - Определяет блок сбоку от основного контента <details> - Определяет дополнительную информацию, которую пользователь может открывать или закрывать <figcaption> - Определяет пояснение для элемента <figure> <figure> - Используется для группирования различных самодостаточных элементов - иллюстраций, диаграмм, фотографий, листингов кода и т.д. <footer> - Определяет "подвал" документа или раздела <header>- Определяет "шапку" документа или раздела <main> - Определяет основной контент документа

Освойте профессию «Fullstack JS-разработчик» с гарантией трудоустройства на онлайн-курсе школы Thinknetica. Курс стартует 5 октября и предназначен для тех, кто владеет основами javascript и хочет прокачаться, чтобы найти работу. На курсе вас ждет: - продвинутый JavaScript, фронтэнд на React и бэкенд на Node.js; - задания из реальных проектов и code review каждого задания; - best practices от экспертов отрасли с более чем 10-летним стажем; - личный наставник и живое общение  в закрытом сообществе. 🔥А в конце обучения – гарантированное трудоустройство или вернем деньги. Первые 2 недели курса - всего за 1 рубль!  Попробуйте и убедитесь сами в его эффективности.  Подробности по ссылке: https://clck.ru/R3Q96

Node.js | socket.io socket.io - библиотека для веб-приложений и обмена данными в реальном времени. Состоит из двух частей: клиентской, которая запускается в браузере и серверной для node.js. Оба компонента имеют похожее API. Подобно node.js, Socket.IO событийно-ориентированная. В своей основе использует протокол WebSocket. Можно использовать для создания чатов и мультиплеерных игр. Простейший пример

var io = require('socket.io')(80);
var cfg = require('./config.json');
var tw = require('node-tweet-stream')(cfg);
tw.track('socket.io');
tw.track('javascript');
tw.on('tweet', function(tweet){
  io.emit('tweet', tweet);
});

В телеге наконец-то появился канал, где собирают вопросы на логику с технических собеседований. 90% что при собеседовании в Яндекс или Гугл что-то из этого у вас спросят. Подписывайся на АйТи собес и прокачивай свой скилл собеседований.

CSS | CLIP PATH Clip-path - указывает, какая часть изображения будет видна. Есть 2 варианта как получить изображение определенной формы: - вырезать в редакторе - наложить фигуру через CSS свойство clip-path На ресурсе по ссылке ниже вы можете быстро получить нужную форму с готовым CSS кодом.