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

Вроде бы простая, но приятная анимация кнопок выравнивания текста. Выполнена с помощью 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

​Как работает неточное сравнение строк

В языках программирования строки сравниваются очень просто — если строка отличается хотя бы на один символ, то возвращает false. Но что делать, если нам нужно не просто true/false, а значение, которое бы показывало разницу строк в процентах. Для этого существует множество алгоритмов и о самых популярных пойдёт речь в этой статье:

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

#javascript

​Пет-проект на React, или как озвучить интернет

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

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

https://tproger.ru/articles/pet-proekt-na-react-kak-my-ozvuchivali-internet/

#react #фронтенд #бэкенд

​ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов

Svelte — крайне удобный инструмент для создания сайтов. Однако он имеет две важные проблемы, а именно трудно выявляемый повторный рендеринг компонентов и их некорректное размещение в дереве. Чтобы избавиться от этих проблем команда Hoon Park создала инструмент, включающий визуализатор дерева компонентов и решающий проблему повторного рендеринга ReSvelte.

В этой статье вы найдёте подробный обзор библиотеки:

https://nuancesprog.ru/p/15780/

#svelte #resvelte #фронтенд