Frontender Libs - обзор библиотек JS / CSS
رفتن به کانال در Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
نمایش بیشتر7 320
مشترکین
-624 ساعت
-327 روز
-11130 روز
آرشیو پست ها
Псс… Соскучились? 😝 Photo Lab объявляет о старте онлайн-хакатона PhotoHack Mobile с призовым фондом 500 000 рублей! 🔥
В этот раз перед участниками стоит задача разработать мобильное приложение, используя технологии Photo Lab. При этом речь не идёт о чём-то масштабном и грандиозном, а наоборот, нужно создать нишевый продукт, направленный на решение конкретной задачи.
Где: онлайн
Когда: 12-13 сентября 2020 года
Кого мы ждём: мобильных разработчиков, специалистов по Machine Learning и Data Science, продакт-менеджеров, UI/UX-дизайнеров, авторов креативных идей, а также студентов технических специальностей.
P.S. в команде может быть не более пяти человек 😉
Подробная информация и регистрация на сайте:
Торопитесь! Заявки принимаются до 11 сентября 2020
CSS | @supports
Долгое время веб-разработчикам приходилось прибегать к сторонним решениям для выяснения того, поддерживаются ли некие возможности CSS текущим браузером. После того, как в CSS появилась директива @supports, проверять возможности браузеров стало можно прямо из CSS-кода.
@supports (-webkit-line-clamp: 2) {
.el { /* ваш стиль */}
}
Если условие оказывается истинным ( браузер поддерживает свойство -webkit-line-clamp ), будет применён стиль, объявленный внутри директивы @supports.
Проверка на отсутствие поддержки какого-либо свойства:
@supports not (display: flex) {
div { float: left; }
/* задан альтернативный стиль */
}
Множественные проверки
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
/* добавляем сюда ваших стилей */
}PHP | Менеджер зависимостей
Аналогично пакетному менеджеру npm для node.js, для php так же существует и свой - Composer. После установки зависимостей через него достаточно подключить только один файл:
require 'vendor/autoload.php';
Преимущества использования
- Composer упрощает интеграцию библиотек
- Composer умеет обновлять используемые библиотеки
- Composer сам скачает все необходимые зависимости библиотеки
Небольшая шпаргалка по использованию
composer init - создать проект
composer require vendor/package - устанавливает библиотеку vendor/package
composer install - устанавливает все зависимости проекта
composer update - обновляет все зависимостиДумаешь написать игру на JavaScript - это сложно? 🚗
Записывайся на бесплатный интенсив и мы докажем тебе обратное!
Программа интенсива 📌
✅ 1 День
— Пройдем основы JS (переменные, типы данных, условия)
— Сделаем игровое поле и машину
— Поработаем с DOM ( получение элементов со страницы, события мыши и клавиатуры)
Request Animation Frame
✅ 2 День
— Создадим дорогу и научим автомобиль перемещаться по полосам
— Изучим циклы, forEach
✅ 3 День
— Реализуем остальные машины, которые будут ехать по дороге.
— Познакомимся с методом getBoundingClientRect который позволит нам реализовать столкновения
— Добавим немного косметики
Переходите по ссылке и получите приглашение:
https://telegram.me/gloacademy_bot?start=5f526c30bf088e000d911898
До встречи на занятиях ✌🏻
Node.js + Docker
Лучшие практики Docker с Node.js
- Используйте более компактныe образы Docker
- Используйте
CMD ['node', 'server.js'] для запуска приложения, избегайте использования npm start
- Используйте .dockerignore, чтобы предотвратить утечку важных данных
- Очистите зависимости перед продакшеном RUN npm ci --production && npm clean cache --force
- Установите ограничения виртуальной памяти как Docker, так и v8
- Очистите кеш NODE_MODULE после установки зависимостей
Еще больше практик с примерами в статье ниже.SQL | ALL и ANY
ALL & ANY - логические операторы в SQL. В результате они возвращают boolean значение.
ANY возвращает true, если какое-либо из значений подзапроса соответствует условию. Оператор ALL возвращает true, если все значения подзапроса удовлетворяют условию.
Рассмотрим пример:
SELECT id, name FROM goods WHERE id > ALL (SELECT id FROM goods WHERE availability)Условие удовлетворяют только те строки, id которых (в нашем случае это 4 и 5), больше любого из найденных значений в подзапросе (1, 2 и 3). 4 больше чем 1 и чем 2 и чем 3. 5 аналогично. Заменим ALL на ANY
SELECT id, name FROM goods WHERE id > ANY (SELECT id FROM goods WHERE availability)Условие удовлетворяют только те строки, id которых (в нашем случае это 2, 3, 4 и 5), больше хотя бы одного из найденных значений в подзапросе (1, 2 и 3).
Этот пост займёт 30 секунд твоего внимания.
Смотри, вот канал EasyPeasyCode. Здесь есть всё, чтобы за месяц освоиться в IT: образовательные материалы, задачи по проге, авторские статьи, опросы, юмор, книги – всё человеческим языком.
Канал ведёт разработчик с опытом, поэтому можешь забирать бесценный опыт с первых уст.
План действий следующий: подписывайся и изучай то, что здесь дают бесплатно, чтобы потом не отдавать доллары на курсах. Через месяц сравнишь скиллы до/после и приятно удивишься :)
PHP | Filters
filter_var() — Фильтрует переменную с помощью определенного фильтра
filter_var(variable, filter, options)Как переменные можно фильтровать? - Убрать HTML теги
$comment = "<h1>Hey there! How are you doing today?</h1>"; $sanitizedComment = filter_var($comment, FILTER_SANITIZE_STRING); // Hey there! How are you doing today?- IP Адрес
$ip = "172.16.254.1";
if(filter_var($ip, FILTER_VALIDATE_IP)){
echo "The <b>$ip</b> is a valid IP address";
}
- Почту
$email = "someone@@example.com";
$sanitizedEmail = filter_var($email, FILTER_SANITIZE_EMAIL);
if($email == $sanitizedEmail && filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "The $email is a valid email address";
}
А так же почти все остальные типы данных.Как установить breakpoint в 3 строчке js файла в Node.js?
debug< ...
PHP задачи с собеседований - канал в котором публикуются интересные задачи, тесты и теоретические вопросы по PHP.
Тематика канала:
— строки, массивы,
— работа с файлами и базой,
— http cookie session,
— базовый синтаксис,
— web, функции
Проверь свои знания языка на @phpquiz
CSS | SKEWED
Реализация с помощью
transform: skew и небольшого скрипта на JSJS | Moment.js
Moment.js - библиотека для форматирования даты в нужном вам формате. Работает в браузере и с Node.js. Легко подключается и настраивается и при этом работает динамично со всеми временными зонами.
Поддерживает:
- Текущие даты
moment().format("MMM Do YY"); // авг. 27-го 20
moment().format('YYYY [escaped] YYYY'); // 2020 escaped 2020
- Относительные
moment().endOf('day').fromNow(); // через 10 часов
moment().startOf('hour').fromNow(); // 13 минут назад
- Календарные
moment().calendar(); // Сегодня, в 14:12 moment().add(1, 'days').calendar(); // Завтра, в 14:12- Локальные
moment.locale(); // ru
moment().format('LT'); // 14:12Как в MySQL выбрать только 3 первых записи?
SELECT * FROM table ...
PHP | Files mode
Функция fopen() - принимает вторым параметром режим работы с файлом.
fopen("\resource.txt", "r");
Основные режимы:
- 'r' - Открывает файл только для чтения; помещает указатель в начало файла.
- 'r+' - Открывает файл для чтения и записи; помещает указатель в начало файла.
- 'w' - Удаляет содержимое файла. Если файл не существует - пробует его создать.
- 'w+' - Открывает файл для чтения и записи. Удаляет содержимое файла. Если файл не существует - пробует его создать.
- 'a' - Открывает файл только для записи; помещает указатель в конец файла. Если файл не существует - пытается его создать.
- 'a+' - Открывает файл для чтения и записи; помещает указатель в конец файла. Если файл не существует - пытается его создать.Node.js | Обработка асинхронных ошибок
Если ошибка не обработана, то ваше приложение находится в неопределённом состоянии.
try/catch c синхронными ошибками работает замечательно, но в Node.js лучше всего писать асинхронный код, чтобы не блокировать thread.
Некоторые способы обработки асинхронных ошибок:
- Прослушиваем все сообщения об ошибках (on error).
server.on('error', function (err) {
console.error(err)
process.exit(1)})
- Прослушиваем uncaughtException в объекте process.
process.on('uncaughtException', function (err) {
console.error('uncaughtException: ', err.message)
console.error(err.stack)
process.exit(1)})
В статье вы найдете больше практик для обработки ошибок.Как задать эффект плавного изменения только для свойства width?
