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

С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

#видео #сеть

Создавайте 3D-визуальные эффекты в Vue с помощью Lunchbox.js

Lunchbox.js — это пользовательский рендерер для Three.js, который упрощает работу с ним. И он отлично сочетается с Vue. В этой статье вы узнаете всё, что нужно, чтобы начать создавать крутые 3D-визуальные эффекты:

https://blog.logrocket.com/build-3d-visuals-vue-lunchbox-js

#vue #lunchbox

​Обратные вызовы JavaScript за 5 минут

Обратные вызовы, или коллбэки — неотъемлемая часть JavaScript, без понимания которой вам будет сложно развиваться в качестве JS-разработчика. И многим поначалу эта тема может показаться сложной, но на самом деле при правильном объяснении понять её можно буквально за 5 минут.

По этой ссылке вы найдёте статью и видео, где простыми словами объясняется принцип работы функций обратного вызова — выбирайте сами в каком формате вам будет изучить этот вопрос:

https://jamesqquick.hashnode.dev/javascript-callbacks-explained-in-5-minutes

#javascript

​Если бы все люди вели себя как разработчики:

​Рекурсия против Циклов в JavaScript

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

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

https://dev.to/thawkin3/recursion-vs-loops-in-javascript-14em

#javascript

Ужасный UX с непослушными кнопками

В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.

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

https://codepen.io/jh3y/pen/KKvvPrP

#codepen

​Новые JavaScript-API для работы с аппаратным обеспечением

До недавнего времени работа с аппаратным обеспечением из веб-приложения была сложной, запутанной, с кучей подводных камней и компромиссов. К счастью, это направление не стоит на месте и в современных браузерах появилась поддержка некоторых новых API, которые позволяют без труда решать задачи взаимодействия с NFC, USB и специфической периферией.

Подробнее о существующих сегодня API и их возможностях можно узнать тут:

https://habr.com/ru/company/ruvds/blog/562532/

#javascript