Мяу-мяу пианино

Этот милый codepen-проект предлагает вам поиграть на «мяукающем» пианино. Нажимать на клавиши вы будете не каким-нибудь курсором, а кошачьей лапкой, извлекая из инструмента соответствующие звуки.

Попробовать поиграть и посмотреть код проекта можно тут:

https://codepen.io/laurenvast/pen/jOrWXej

#codepen

​Jamstack: философия веб-разработки на примере Next.js

Jamstack сегодня можно определить как современную архитектуру веб-разработки, которая позволяет создавать веб-сайты на основе методологии микросервисов. Это крайне удачное решение для разработки, которое объединяет различные подходы, при этом сохраняя только лучшие моменты каждого.

Подробнее в статье:

https://tproger.ru/articles/preimushhestva-jamstack-na-primere-next-js/

#nextjs #jamstack

​Разработка на JavaScript с нуля в 2022 году: дорожная карта

Чтобы ваше обучение программированию на JavaScript с нуля было эффективным, мы составили для вас подробную дорожную карту. Забирайте себе по ссылке:

https://tproger.ru/articles/javascript-s-nulja-dorozhnaja-karta/

#javascript

​​Когда ты фронтенд-разработчик, но в душе астроном:

​Зачем использовать materialize и dematerialize операторы и что такое Notification в RxJS

Вы когда-нибудь встречали такие операторы, как materialize и dematerialize в RxJS? Вероятно, вы слышали о них, но не применяли их, потому что не до конца понимали, где они могут понадобиться.

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

https://habr.com/ru/company/skyeng/blog/661709/

#angular #rxjs

​8 советов работы с JavaScript, которые повысят ценность вашего кода

Писать код можно по-разному. Но существует ряд советов, которым стоит следовать, если вы не хотите потом усложнить самим себе жизнь. Одно из основных правил — комментирование кода. Без комментариев вы уже через неделю можете не вспомнить, что делает ваша функция.

Ещё 7 советов можно узнать здесь:

https://nuancesprog.ru/p/15712/

#javascript

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

Эта крошечная библиотека позволит вам сделать такие же крошечные и минималистичные загрузчики.

Подробнее:

https://bmsvieira.github.io/lwder.js/demo/index.html

#библиотека

​Свежий выпуск подкаста Frontend Weekend с Евгением Кателлой в гостях

Это самый длинный выпуск московского видеосезона подкаста, ведь с Евгением можно обсудить много всего: его работу в Рамблере, руководство мобильной разработкой Яндекс.Еды, конференцию Podlodka Crew и множество других интересных вопросов.

Смотрим и слушаем, как обычно, тут:

https://youtu.be/iljZUC6rggQ

#подкаст

​​Прокачиваем навыки фронтенда с Frontend Practice

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

Подробнее:

https://www.frontendpractice.com/projects/ableton

Что может быть хуже кучи Cookies? Уведомление о том, что на сайте не применяются Cookies, которое появляется при каждом обновлении страницы!

​​Детальный разбор вопросов с собеседований фронтенд-разработчиков

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

https://tprg.ru/Mbsq

#видео #фронтенд

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

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