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

Node.js | Telegraf Telegraf - очень простой и удобный фреймворк для телеграм ботов. Преимущества - Полная поддержка Telegram Bot API 4.8 - Поддержка платежной платформы Telegram - Поддержка HTML5 игр - Инлайн мод - Совместим с веб-хуками (http, https, fastify, express.js) Пример

var { Telegraf } = require('telegraf')
var bot = new Telegraf(process.env.BOT_TOKEN)
bot.start((ctx) => ctx.reply('Добро пожаловать!'))
bot.help((ctx) => ctx.reply('Отправь мне стикер'))
bot.on('sticker', (ctx) => ctx.reply('👍'))
bot.hears('Привет', (ctx) => ctx.reply('Приве-е-ет!'))
bot.launch()

😣 На рынке жёсткий дефицит фронтендеров Хочешь быстро влиться во фронтенд и через пару лет хвастаться ЗП > 200к? Вот план для старта: 1. Веб-верстка - 3 месяца 2. JavaScript - 3 месяца 3. Система контроля версий GIT - 1 месяц 4. Онлайн-сессии по вебразработке - 1 месяц 5. Vue.js - 2 месяца 6. React.js - 2 месяца 7. Защита дипломного проекта 8. 💰Трудоустройство💰 Это программа курса Профессия Frontend разработчик от Skillbox. Да - трудоустройство они тоже берут на себя. Тут можно получить курс со скидкой 50% 👇

CSS | Селекторы Универсальный селектор - * {} Селекторы типов - div {} Селекторы классов - .classname {} Селекторы идентификаторов - #idname {} Селекторы потомков - span em {} Селекторы дочерних элементов - div > em {} Селекторы смежных элементов - i + b {} Селекторы атрибутов - a[href='info.htm'] {} Псевдоклассы - a:hover {} Псевдоэлементы - p::first-letter {}

Node.js | EasyVK EasyVK - npm пакет, предназначенный для работы с API ВКонтакте на стороне сервера. Преимущества - Обращения к методам API ВКонтакте - Создание ботов с помощью LongPoll API - HTTP клиент для просмотра историй - Поддержка обещаний

HTML | DATA data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML

<article
  id="post1"
  data-columns="3"
  data-index-number="12314">
</article>

Доступ из CSS

article[data-columns='3']{
  width: 400px;
}

Доступ из JS var article = document.getElementById('post1'); article.dataset.columns // "3" article.dataset.indexNumber // "12314"

Как изучить React и построить международную карьеру? 🔥Максим Иванов, разработчик Minecraft и Battlefield, запускает авторский курс по React. Курс стартует 1 ноября, но уже можно начать учиться бесплатно не выходя из Телеграма: ⭐️Как сделать клон Minecraft на React (делаем 3d-игру на компонентах) ⭐️Как делать формы любой сложности на React и react-hook-form ⭐️Как освоить реакт быстро, не тратя время на булщит? 💩 ⭐️Как попасть в интересный проект? Самая короткая дорога от hello world до удаленки за баксы 🔥 ⭐️Как справиться с застреванием в процессе обучения и в карьере 💥Инсайт: Как всех обогнать. Прокачиваем карьеру. Как в этом помогает блог и привычка описывать свои шаги.📝 Чтобы получить доступ материалам, переходи в наш Телеграм-бот. Он заботливо выдаст все видео.

PHP | PDO Для взаимодействия с базами данных обычно необходимо ставить специальную библиотеку, созданную для конкректной базы данных. Это может вызывать некоторые трудности, если, например, на сервере несколько разных СУБД. Но с PDO всё гараздо проще. PDO (PHP Data Objects) — расширение PHP, которое реализует взаимодействие с базами данных при помощи объектов. В PDO отсутствует привязка к конкретной системе управления базами данных. Оно поддерживает, как MySQL, так и PostgreSQL, SQLite, Oracle, Microsoft SQL Server и другие. Ещё одним плюсом будет встроенная защита от SQL инъекций. Пример

// Подключение к базе данных
$db = new PDO('mysql:host=localhost;dbname=pdo', 'root', 'password');
// Выполнение подготовленного запроса, такой запрос защищён от инъекции
$stmt = $pdo->prepare("SELECT `name` FROM categories WHERE `id` > ?");
$stmt->execute([$id]);
// Получение данных
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($data as $k => $v){
  echo 'Category name: '.$v['name'].';';
}

JS | Promise Промис — это объект, который либо выполняется с некоторым значением, либо отклоняется с ошибкой. Промис может иметь одно из трех состояний: находится в режиме ожидания (pending), выполнен (fulfilled), отклонен (rejected). Некоторые методы, которые ускорят разработку: - race - возвращает Обещание (Promise) с результатом, первого завершенного из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым - any - Как только одно из "обещаний"(Promise) выполнится успешно(fullfill), метод возвратит единственный объект Promise со значением выполненного "обещания" - allSettled - возвращает промис, который исполняется когда все полученные промисы завершены Внизу подробная статья о Promise с примерами

Привет! ✌️ Меня зовут Евгений и я разработчик. Люблю автоматизацию и пишу короткие заметки о web/hardware разработке и не только в свой блог Sleepless tech. Заходите, скучно не будет 😉

CSS | Will-Change CSS Will Change позволяет подготовить браузер перед изменением состояния элемента. Это позволяет добавить определенную оптимизацию к сайту. Например, если элемент будет изменен при клике, то установка will-change при наведении курсора на этот элемент даёт браузеру достаточно времени, чтобы подготовиться к этому изменению.

.element {
   transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}

t.me/Paqmind – фуллстек разработка для продвинутых. Устали от пересказов документации и Hello-World туториалов? Возможно, наш канал вас приятно удивит. Регулярно постим авторский контент по: - программированию (нетривиальные темы) - методологиям разработки - топовым технологиям - трендам индустрии Учебные материалы, обзоры, аналитика. Присоединяйся к сообществу Paqmind и развивайся профессионально вместе с нами!

PHP | Генерация изображений с текстом В статье рассказывается о небольшом классе для php, что позволяет легко генерировать изображения с текстом. Пример реализации

include_once 'LImageHandler.php';
$fontPath = 'fonts/MintTypeRistrettoProRegular.ttf';
$imagePath = 'images/original.jpg';
$fontSize = 45; // Указываем размер шрифта 
$color = array(255, 255, 255); // Задаем цвет текста
$backgroundColor = array(0, 0, 0); // Задаем цвет подложки
$ih = new LImageHandler;
$imgObj = $ih->load($imagePath);
$imgObj->textWithBackground('Генерация изображений с текстом', $fontPath, $fontSize, $color, $backgroundColor, LImageHandler::CORNER_CENTER_TOP, 0, 150, 0, 50, 10);
$imgObj->textWithBackground('Виктор Зинченко', $fontPath, 30, $color, $backgroundColor, LImageHandler::CORNER_RIGHT_BOTTOM, 50, 50, 0, 30, 10);
$imgObj->show(false, 100);