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

NodeJS модули NodeJS приложение имеет модульную архитектуру построения, причем каждый файл JavaScript рассматривается как отдельный модуль, который может зависеть от других модулей. Модули могут быть устанавливаемые (с использованием npm) и собственные, которые создаются в процессе разработки. Модули NPM По умолчанию все npm модули устанавливаются в директорию node-modules, создаваемую в директории, из которой была вызвана команда установки. npm install express --save Собственные модули Собственным модулем является любой JavaScript файл приложения, который экспортирует с помощью объекта exports функции или переменные. require() Для подключения модулей используется функция require(). Если подключается npm модуль, то функции необходимо передать только его название. const express = require('express'); Для подключения собственных модулей необходимо указать путь. const myModule = require('./my-module');

Тестирование Web UI в NodeJS Рассмотрим несколько инструментов для тестирования, доступных в NodeJS Mocha - это Javascript-фреймворк для тестирования. Он имеет синтаксис в стиле BDD (Behavior-driven development) и позволяет выполнять тестирование на основе асинхронных вызовов. Он также поддерживает различные assert библиотеки, такие как Chai. Chai - это библиотека утверждений (assertion library ) для NodeJS и браузера, которая прекрасно сочетается с любой средой тестирования Javascript. CasperJS - это вспомогательная библиотека для построения сценариев навигации. Она часто используется с PhantomJS, но на самом деле он также поддерживает SlimerJS, который является еще одним "headless browser" с механизмом рендеринга Gecko. PhantomJS - это headless browser с механизмом рендеринга WebKit. Позволяет запускать браузерные тесты в автономной системе

Повышаем безопасность сайта Если на клиенте и на сервере не происходит валидация введенных данных пользователем ( например в разделе комментарии, где будет каждый раз создаваться новая HTML разметка) то злоумышленник может внедрить вредоносный JavaScript код на эту страницу. Самые популярные XSS атаки - подмена страницы, либо получения COOKIE пользователей. Так же, если нет проверки введенных данных, то можно получить доступ к БД через SQL injection Если стоит простая проверка - SELECT * FROM users WHERE login='$login' AND password = '$pass'; При вводе в поля логина и пароля '1' or '1' = '1' можно получить доступ к закрытым данным ( или если стоит платная регистрация ), так как это выражение вернет TRUE и пустит в систему.

Отправка E-mail в NodeJS Для отправки E-mail в Node js приложениях используется npm модуль nodemailer. Установка в проект: npm install nodemailer --save В первую очередь необходимо создать transporter, который хранит всю конфигурацию SMTP. Для создания transporter используется метод createTransport(), который принимает объект со следующими полями: 1. host - адрес почтового сервера; 2. port - порт почтового сервера; 3. secure - булевое значение, задается true, если используется SSL, в таком случае значением port должно быть 465; 4. auth - объект со свойствами user и pass, в которых указывается логин и пароль используемого почтового аккаунта соответственно. Отправка осуществляется вызовом метода sendMail() у объекта transporter. Метод sendMail() принимает объект со структурой: 1. from - email адрес отправителя сообщения 2. to - адрес получателя 3. subject - тема сообщения; 4. text - текст сообщения; 5. html - текст сообщения в формате HTML; 6. attachments - прикрепленные к сообщению файлы.

SQL | Синтаксис В SQL Ключевые слова ( SELECT, FROM, WHERE и т.д.) нечувствительны к регистру. Традиция писать их Caps-ом началась из-за того что раньше в редакторах не было подсветки кода, сейчас таких уже не встретишь, так что этот подход сейчас только отвлекает внимание. В статье вы найдете еще больше хороших практик для написания SQL кода.

Что такое SSR SSR — (анг. аббревиатура от Server Side Rendering) это технология, которая позволяет, с помощью Node.js, запускать JavaScript код на сервере и готовый результат отправлять пользователю. SSR нужен в первую очередь, для оптимизации скорости работы сайта и SEO продвижения. Оптимизация Когда пользователь заходит на сайт, сделанный с помощью JavaScript, то все расчеты и отрисовка графических элементов возлагается на его браузер. SSR помогает снизить нагрузку на браузер пользователя, это особенно важно, если пользователь использует телефон или слабый компьютер. SEO Когда поисковая система заходит на сайт, сделанный с помощью Ajax-технологий или какого-нибудь современного фреймворка, похожего на React или Vue.js, то видит пустой HTML документ без какого-либо контента. Если на сайте есть SSR, то страница будет выглядеть как обычный веб-документ со всеми нужными текстами и метаданными. Есть готовые решения, которые помогают разработчику быстро внедрить SSR в проект, например, Next.js для React.

GraphQL Editor Это визуальный инструмент для составления GrapthQL запросов Преимущества: - облегчает понимание GraphQL - создает запросы без написания кода - делает графическую модель вашей схемы - подходит новичкам и опытным пользователям - поддерживает командную разработку Визуализация крайне полезна для работы со сложными запросами, это позволит вам составлять их быстрее и снизит вероятность багов

Инструменты для отладки JavaScript Для того чтобы разобраться в ошибках в коде существуют инструменты отладки. №1: инструменты разработчика Chrome — отладчик Добавьте команду debugger в ту строку вашего кода, в которой вам хотелось бы исследовать значения переменных и перезагрузите страницу. Исполнение приостановится на команде debugger и вы сможете исследовать программу. №2: React Developer Tools Если ваше приложение основано на React и нужно проверить значения свойств или состояний, вам стоит познакомиться с расширением React Developer Tools для Chrome. №3: отладка серверного кода и Node Inspect Node Inspect похож на инструменты разработчика Chrome, но предназначен он для серверного кода. №4: проверка ответа сервера — Postman Postman — это настольное приложение, его надо скачать и установить. Оно позволяет выбрать вид запроса (среди них — GET, POST, PUT, PATCH, DELETE), добавить нужную вам конечную точку, а если надо — то и данные для аутентификации, и отправить запрос на сервер.

MeteorJS | Node.js Framework MeteorJS подойдет для всех потребностей, от простых приложений, таких как финансовый отчёт, до управления данными больницы (выходит менее 2 тыс. строк back-end и front-end кода) С помощью готовых модулей этого фреймворка можно создать рабочее приложение за считанные часы, что требовало бы много затрат времени в стеке MEAN (MongoDB, Express.js, AngularJS and Node.js). Также хорошо MeteorJS справляется с разными компиляторами, такими как CoffeeScript. На сайте фреймворка есть интерактивные обучения, в которых можно создать TO-DO app или Whatsapp clone

PHP | экранирование строк Экранирование нужно для безопасности когда одни ЯП пишут текст для других ЯП, чтобы те могли его "прочитать".Если пользователь явно пытается "внедрить" вам какой-то скрипт, вы можете легко предотвратить его. Вы всегда должны экранировать пользовательские данные прежде, чем поместить их в SQL-запрос (это же касается и HTML). Функция addlashes() — экранирует строку с помощью слешей т.е возвращает строку с обратным слешем перед символами : (одинарная кавычка) ‘ , (двойные кавычки) " , (обратный слэш) \ , NUL (байт NULL) Функция принимает в качестве параметров только строку. <?php // PHP program to demonstrate the // working of addslashes() function $str = addslashes('twinkle loves "coding"'); echo($str); ?> Output : twinkle loves \"coding\"

CSS | Google Border Анимированный border на HTML / CSS в стиле Google с использованием @keyframes , ::before, ::after Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari Адаптивный ко всем экранам

Bit | Набор современных компонентов Bit позволяет разработчикам и командам экономить время, предоставляет набор готовых компонентов для всех популярных JS фреймворков (React, Vue, Node, Angular) и нативного JS. Он работает с GitHub и NPM, так что вы можете легко публиковать и устанавливать компоненты для любого проекта.

CSS | Flex-shrink 3адает «коэффициент сжатия при заполнении», который определяет, насколько элемент будет сжиматься относительно остальных элементов в контейнере, когда в блоке недостаточно места. По умолчанию он установлен на 1 Пример : Представьте, что у нас есть три предмета в одном контейнере. Посмотрите, что указывают их значения flex-shrink: Первый элемент flex-shrink: 1; Теряет 1/6 пространства Второй элемент flex-shrink: 3; Потеряет 3/6 (половину) свободного пространства Третий элемент flex-shrink: 2; Потеряет 2/6 (трети) свободного пространства

SQL Aliases SQL Aliases используется, чтобы дать таблице или столбцу в таблице временное название. Оно существует только на время запроса. Оптимально использовать для : - Читабельности, при длинных названиях - Для объединения 2-х и более столпцов SELECT CustomerName, CONCAT(Address, " ", PostalCode, " ", City) AS Address FROM Customers; Output: CustomerName Alfreds Futterkiste Address Obere Str. 57 12209 Berlin

JavaScript arr.entries() Метод arr.entries() используется для получения нового массива, который содержит ключ и значение для каждого индекса массива.Данный метод не принимает параметров var array = ["HTML", "CSS", "JS", "Bootstrap", "PHP"]; var entries = array.entries(); console.log("Applying the Array entries method:"); for (var i of entries) { consol.log( i ); } Output : Applying the Array entries method: 0,HTML 1,CSS 2,JS 3,Bootstrap 4,PHP