​Fresh — новый full stack фреймворк для Deno

Ещё один плюс в пользу Deno. Как мы уже рассказывали ранее, Deno является аналогом Node.js, но при этом быстрее. Теперь ещё больше смысла перейти с устаревшего Node.js.

Fresh позиционируется как современный фреймворк на TS/JS, спроектированный для легкого создания высококачественных и производительных веб-приложений. Подробнее о нём:

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

#deno #fullstack

​Scrollbar в современном CSS

Полоса прокрутки присутствует сегодня на любом сайте видимо или невидимо. Это вполне обыденный элемент, на который обычно никто не обращает особого внимания.

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

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

#фронтенд #css

​Почему ваш веб-сайт должен весить меньше 14 КБ?

А вы знали, что страница на 15 КБ будет грузиться гораздо медленнее, чем страница на 14 КБ? Несмотря на разницу всего в 1 КБ, приблизительная задержка резко возрастает на 612 мс.

Так происходит из-за алгоритма медленного старта TCP. В статье — о том, что это такое, как оно работает и почему это важно: https://habr.com/ru/post/684836/

#интернет

​Пишем переключатель темы на базе файлов 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