​Пишем переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript

Максимально простая и подробная инструкция по созданию переключателя темы, который учитывает данные в файлах cookie. С помощью неё вы сможете сделать ваш сайт более дружелюбным для пользователей:

https://nuancesprog.ru/p/16119/

#фронтенд #css #javascript

Чувствуете это превосходство?

​Лайфхаки по созданию углов с помощью CSS Mask и свойства Clip-Path

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

Убедитесь сами и берите эти советы на вооружение:

https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/

#css #фронтенд

​Удобный способ использовать SVG в React

Добавить SVG на сайт можно совершенно разными способами. Но если вы хотите полноценно использовать все возможности SVG, то необходимо вставлять изображение непосредственно в HTML-разметку. Или нет?

В этой статье вы найдёте ещё один хитрый, но при этом удобный способ:

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

#react #svg

​Полное руководство по push-уведомлениям для разработчиков

Руководитель отдела дизайна OneSignal решил поделиться своим опытом и инсайтами касаемо работы push-уведомлений в веб-приложениях. В этой статье вы также узнаете интересные факты и рекомендации по использованию пушей:

https://www.smashingmagazine.com/2022/04/guide-push-notifications-developers/

Как создать многоуровневое выпадающее меню в React

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

https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/

#фронтенд #react

Анимированная полка с вещами

Сodepen-проект «My Stuff» наглядно демонстрирует современные возможности препроцессоров для HTML и CSS, а именно Pug и SCSS. Посмотрите сами, как относительно малым количеством строк, можно реализовать интересный анимированный рисунок:

https://codepen.io/annampawl/pen/yLvoGQY

#codepen #pug #scss

​Как создать редактор кода для 40+ языков с помощью React

Хватит делать классические тудушки! Давайте напишем свой редактор кода, чтобы писать код внутри кода, написанного нами.

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

https://habr.com/ru/company/skillfactory/blog/670380/

#react #tailwind

Лёгкий способ создания викторин и опросов, который вам понравится

Библиотека Survey.js — это мощный инструмент, который позволяет создавать опросы, формы, викторины и тесты самой разной сложности. При этом процесс их создания максимально прост и гибок — вы можете менять их внешний вид или даже создать собственное хранилище данных.

Посмотрите сами и сохраняйте на будущее:

https://surveyjs.io/

#библиотека

Анимированные кнопки выравнивания

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

https://codepen.io/jkantner/pen/xxWZeLz

#codepen

​Тестируемый фронтенд: хороший, плохой и странный

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

Он рассказал в чём сложность организации тестирования, какие инструменты и подходы ему помогают и многое другое.

Подробнее:

https://www.smashingmagazine.com/2022/07/testable-frontend-architecture/

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

​От Oracle потребовали отдать права на JavaScript за просто так

Корпорация Oracle получила права на JavaScript после поглощения компании Sun Microsystems ещё в 2010 году. Теперь создатель Node.js Райан Даль обратился к Oracle с открытым письмом, в котором призывает компанию отказаться от товарного знака JavaScript, передав его в общественное достояние. По его словам компании не нужны эти права, а подобный жест стал бы для неё отличным пиар-ходом.

Подробности можно почитать здесь:

https://www.cnews.ru/news/top/2022-09-06_ot_oracle_potrebovali_otdat

А вы как считаете?

#новости

Работа с анимацией на JavaScript с использованием requestAnimationFrame

Существует несколько известных способов работы с анимацией в JavaScript. Можно создать функцию с таймером, можно создать цикл. Но и там, и там сложно реализовать достаточную плавность.

Чтобы справиться с этой задачей лучше воспользоваться встроенным в HTML5 requestAnimationFrame API. Подробнее о нём и о том, как его использовать читайте здесь:

https://betterprogramming.pub/working-with-javascript-animations-using-requestanimationframe-f07e0658908e

#javascript

Как создать карусель слайдов легко и просто на Vue?

Можно написать шаблон самостоятельно, а можно воспользоваться простой библиотекой, которая сделает всё за вас. Вам остаётся лишь внести небольшие дополнения для указания собственных данных и всё. В библиотеке Vue3-carousel есть сразу несколько вариантов карусели.

Подробнее познакомиться можно здесь:

https://ismail9k.github.io/vue3-carousel/

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

​​Библиотека, которая понравится разработчикам на PHP. С помощью неё вы можете создавать качественных ботов для Telegram

В конце концов, сколько можно полагаться на Python в этом вопросе, правильно? Давайте делать ботов, не покидая любимый язык. Библиотека Zanzara создана как раз для этого.

Познакомиться ближе с библиотекой можно здесь:

https://github.com/badfarm/zanzara

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

​​LocalStorage — простой, но важный элемент при работе с JavaScript

В этом видео подробно рассматривается принцип работы LocalStorage, а также все его особенности и правильное взаимодействие с ним.

Подробнее:

https://youtu.be/3-bZ7gLVSzo

#видео #javascript

Попробуйте обыграть компьютер в крестики-нолики, написанные на чистом CSS

Сделать на чистом CSS работающие крестики-нолики уже задачка не самая простая, но здесь автор пошёл ещё дальше и добавил туда интеллект, с которым вы можете сразиться. И всё это без единой строки JavaScript-кода.

Сможете ли вы обыграть компьютер? А повторить этот код? Проверьте себя:

https://codepen.io/alvaromontoro/pen/BexWOw

#codepen #css

Визуализированный JavaScript: движок JavaScript

Мы с вами знаем, что код, написанный на JavaScript, обрабатывается движком. В Chrome это, например, V8. Но это лишь общие слова. Куда интереснее понять, как именно это происходит и какие процессы в этом задействованы.

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

https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

#javascript

​Полное руководство по CSS анимации для начинающих

В этом руководстве по анимации с помощью @keyframes будет рассмотрен весь синтаксис, включая каждое из свойств. Здесь также присутствуют интерактивные демонстрации, чтобы вам было проще понять как и что работает.

https://themeisle.com/blog/css-animations-tutorial/

#css #фронтенд

​Интеграция SvelteKit с Backendless

Вы когда-нибудь работали с Backendless? Это платформа Backend as a Service, которая позволяет без какого-либо кода настроить бэкенд приложения.

В этой серии статей вы изучите полное руководство по интеграции SvelteKit с Backendless, настроите вход и регистрацию, маршрутизацию и многое другое:

https://dev.to/brewhousedigital/integrating-sveltekit-with-backendless-3gip

#svelte #backendless

​Что такое TCP/IP: Объясняем на пальцах

Ну хорошо, допустим, вы умеете верстать страницы. Даже можете выложить свой сайт на Heroku или куда-то ещё. А знаете ли вы, как при этом пользователи получают доступ к вашему сайту? Что за IP такой, зачем он нужен и как по нему вычисляют обидчиков?

Все подробности в этом видео:

https://youtu.be/2I1HnSN1H9o

#видео #сеть