htmlq

htmlq — это парсер веб-страниц, который использует CSS-селекторы для извлечения фрагментов содержимого из файлов HTML. О том как его установить и использовать можно узнать тут:

https://github.com/mgdm/htmlq

#библиотека #парсинг

​Создание плейлиста Spotify с помощью бота в Discord

В этой статье мы с вами сможем создать бота для Discord с применением Serverless Cloud, который будет добавлять песни в общий плейлист Spotify. Подробная инструкция по созданию здесь:

https://www.serverless.com/blog/making-a-discord-playlist-bot-with-serverless-cloud

#бот #discord

​Canvas2D. Canvas2D повсюду

Примерно 30-40% сайтов используют элемент <canvas> для своих целей. При этом 98% таких элементов рендерят Canvas2D. Он, кстати, применяется и в автомобилях, и в холодильниках, и даже в космосе.

О том, что он умеет сегодня, рассказали в блоге Google Chrome:

https://developer.chrome.com/blog/canvas2d/

#canvas #html

В подвал лучше вообще не лезть

Всё о веб-анимациях в 2022

Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или даже получить какую-нибудь премию.

Подробнее о современных веб-анимациях можно прочитать здесь:

https://habr.com/ru/company/htmlacademy/blog/660901/

Как сделать эффект «поднятия шторы» в CSS

Не большой урок по созданию популярного современного эффекта анимации на сайтах, так называемого поднятия штор. Выглядит стильно и на самом деле не требуется применения JavaScript. Реализовать подобный эффект можно всего лишь с помощью CSS.

Подробнее:

https://css-tricks.com/css-raise-the-curtains-effect/

#css #туториал

​Выравнивание содержимого в разных обёртках

Ахмад Шадид делится проблемой применения обёрток, которые могут дать нежелательные эффекты при рендеринге страницы, а также способами их устранения:

https://ishadeed.com/article/aligning-content-different-wrappers/

#фронтенд

​Про интеграцию сторонних библиотек в Laravel

Эта статья посвящена теме интеграции Laravel со сторонними библиотеками. В ходе чтения статьи вы поймёте какие проблемы могут возникнуть при неправильной интеграции, а также как их избежать:

https://tprg.ru/6PQ4

#php #laravel

​​Как ведёт себя сайт, когда доверил вёрстку стажёру:

Библиотека superplaceholder.js

Это простая библиотека поможет вам прокачать плейсхолдеры на вашем сайте, добавив им анимацию:

https://www.npmjs.com/package/superplaceholder

#библиотека

Эффект качающейся лампы с GSAP

Достаточно простой проект, который реализует анимацию качания лампы с помощью библиотеки GSAP. Лампа же в свою очередь «освещает» заранее подготовленную картинку, добавляя ей атмосферности и реалистичности.
Посмотреть код можно тут:

https://codepen.io/Since1979/pen/podveKZ

#codepen #gsap

​Сайт-портфолио с React, GreenSock и Animate.css

В этом видео вы узнаете, как создать сайт-портфолио на React с нуля с продвинутой анимацией. Заварите чай, садитесь поудобнее и готовьтесь создать свой собственный вариант портфолио:

https://youtu.be/bmpI252DmiI

#видео

​Создаём VR и AR прямо в браузере

Для этого нам понадобится JavaScript-библиотека A-Frame, которая позволит нам создавать трёхмерные миры с помощью HTML и Entity-Component, работающие с Quest, Rift, WMR, SteamVR, мобильным устройствами и компьютерами.

Подробности, инструкция и примеры тут:

https://aframe.io/

#библиотека

​Как создать роутер для пользовательского приложения SPA

Если вы разрабатывали SPA, то знаете о необходимости обработки несколько страниц в одностраничном приложении, как бы странно это не показалось. А если работали с React, то должны быть знакомы и с React Router, которая решает эту задачу.

Но в этой статье речь пойдёт о способе, который позволит вам избежать необходимости подключения лишней библиотеки, дав вам возможность использовать собственный маршрутизатор на ванильном JS. Подробнее в статье:

https://www.wiktorwisniewski.dev/blog/how-to-create-router-library

#spa #javascript

Подготовили для вас подборки полезной информации по различным направлениям

— любителям Java: @a_cup_of_java;
— всё о нейросетях: @neuro_channel;
— нужные инструменты для разработчиков: @prog_tools.

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

​Программирование помогает решать множество старых споров и задач. Вот и ещё один спор решён благодаря программистам:

​Симулятор x86 подобного процессора на машине Тьюринга

Как можно понять из названия, автор решил бросить самому себе вызов и создать весьма необычный проект. Буквально с нуля, используя JavaScript, он создал машину Тьюринга, которая симулирует работу процессора на архитектуре х86, а также написал собственный Assembler для неё.

Подробнее:

https://habr.com/ru/post/665776/

С лёгкостью создаём анимации прокрутки с помощью Lax.js

Библиотека Lax.js не только простая, но и лёгкая. При этом она позволяет создавать плавные и красивые анимации при прокрутке страницы на ванильном JavaScript.

Подробнее:

https://github.com/alexfoxy/lax.js

#библиотека

Анимация повторения текста при прокрутке

Интересный эффект анимации текста, который позволяет создать «отражения» при прокрутке страницы. При желании можно реализовать различные варианты такого поведения, подобрав наиболее подходящий для вашего проекта. Здесь ещё несколько примеров и способ создания эффекта:

https://tympanus.net/codrops/2022/04/13/on-scroll-text-repetition-animation/

#фронтенд

​​Mailwind — используем Tailwind для создания электронных писем

Mailwind представляет собой версию Tailwind CSS, созданную специально для разработки электронных писем в формате HTML. Если работали с оригиналом, то и тут проблем не возникнет, но зато вы сможете сэкономить кучу времени и сил.

Подробнее об установке и использовании тут:

https://github.com/soheilpro/mailwind

#библиотека #tailwind