Как сделать змейку на чекбоксах и не только

Разработчик Брайан Браун решил развлечься во время пандемии и создал библиотеку Checkboxland, которая способна отображать текст и анимацию на сетке чекбоксов.

В этой статье вы рассмотрите как работает эта библиотека, как создать с помощью неё анимацию и даже змейку:

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

#javascript

Анимация смещения фона с помощью режимов наложения CSS

Вариант создания анимации смещения фона при скроллинге страницы, созданный с использованием режима наложения CSS и многослойной анимации:

https://tympanus.net/codrops/2022/01/26/background-shift-animation-with-css-blend-modes/?ref=heydesigner

#фронтенд #css

​Как работает метод bind? 30 вопросов собеседования JavaScript

Метод bind применяется сегодня не так часто, как раньше, но его всё ещё можно встретить. В этом видео разбирается, что именно он делает и как на практическом примере:

https://youtu.be/nBeUtwXcjp0

#видео #javascript

​Поиск проблемных промисов в JavaScript

Асинхронность означает возможность написания кода, который не подвержен обычным проблемам, связанным с потокобезопасностью, и поддерживает выполнение множества задач в «параллельном» режиме. Но небольшие ошибки в асинхронном коде могут приводить к появлению неразрешённых промисов. Искать проблему в таком случае весьма сложно, но возможно.

Эта статья как раз посвящена вопросу поиска подобных проблем:

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

#javascript

​PureMVC фреймворк

Это крутой фреймворк, основная цель которого состоит в разделении интересов создаваемого кода. Суть кроется в названии, MVC — Model, View и Controller. А подробности кроются здесь:

https://puremvc.org/

#фреймворк

​Что такое «Разделение ответственности» в коде

«Разделение ответственности» — ключевой фактор грамотной организации кода. Но что это значит и как правильно применять это? Если кратко, то это правильное разделение кода не только по функциям, но и по файловой структуре. Подробнее:

https://habr.com/ru/company/piter/blog/672522/

​Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

В этой статье разбирается способ настройки линтеров, автоформатирования кода, подсветки ошибок для вашего React-проекта, а также git хуки. Эта реализация не является эталонной, но может оказаться полезной как новичкам, так и опытным разработчикам:

https://tproger.ru/articles/podgotovka-okruzhenija-react-prilozhenija-vscode-prettier-eslint-stylelint-husky/

#react

​Улучшенная прокрутка с помощью современного CSS

Скроллбар — это обыденная вещь, которая есть на каждом сайте и в приложении. Давайте посмотрим, что можно сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей:

https://blog.mayank.co/better-scrolling-through-modern-css

#css #фронтенд

​Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом

Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом. Она позволяет анимировать DOM, WebGL, а также любую переменную JavaScript. 2D, 3D, анимация клавиш, создание ховеров и прочее.

Протестируйте и попробуйте сами:

https://www.theatrejs.com/

#библиотека #фронтенд

​Полное руководство по React Context

React Context позволяет без использования props’ов передавать и применять данные в любом компоненте приложения. Таким образом, он упрощает обмен данными между компонентами. В этой статье представлены советы, которые будут полезные даже тем, кто ещё не работал с React:

https://nuancesprog.ru/p/15868/

#react

Кнопка Play/Pause

Кнопка play/pause сделана с помощью чекбокса, а анимирована средствами CSS. JavaScript здесь не используется. Посмотреть как это работает можно тут:

https://codepen.io/RitikaAgrawal08/pen/eYGXQLz?editors=1100

#codepen

​Защищаемся от DDoS-атак: что делать до, во время и после атаки

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

https://proglib.io/p/zashchishchaemsya-ot-ddos-atak-chto-delat-do-vo-vremya-i-posle-ataki-2022-06-28

​Совместное использование компонентов React с Webpack 5

В интернете полно статей, посвящённых использованию компонентов совместно с Webpack. Но во многих из них существует ряд проблем и ошибок, которые усложняют понимание материала. Эта статья призвана устранить данные проблемы.

Подробнее:

https://nuancesprog.ru/p/15900/

#webpack #react

Анимированный индикатор меню

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

https://youtu.be/5LTD_480gNU

#видео #туториал

​Дыры в документации и ошибки laravel: в чём дело и как их исправить

Laravel хороший фреймворк — в нём довольно много готовых инструментов, неплохая реализация DI-контейнера и blade-шаблоны. Но в этом фреймворке есть подводные камни, которые кроются глубоко в исходниках и при этом не имеют явной документации. Вот о подобных вещах и расскажет эта статья:

https://tproger.ru/articles/dyry-v-dokumentacii-i-oshibki-laravel-v-chjom-delo-i-kak-ih-ispravit/

#laravel #php

​Временная мёртвая зона в JavaScript

Интересная задача про временную мертвую зону в JavaScript. Здесь вы изучите, как объявляется переменная (выполняется инициализация). Какие правила объявления переменной и вычисления её лексической привязки. Рассмотрите примеры кода temporal dead zone javascript.

https://youtu.be/OgE3P6kEPz4

#видео #javascript

Берите на заметку для создания самой упоротой капчи

​Как создать простую функцию AWS Lambda с помощью TypeScript

Для написания функции Lambda обычно используется Node.js. Однако JavaScript вызывает определённые сложности из-за отсутствия проверки типов и отладки кода. Применение Typescript для решения этой задачи обладает рядом преимуществ. Подробнее о них в статье:

https://nuancesprog.ru/p/15880/

#typescript

​Создание Todo List на чистом JavaScript

Небольшой туториал с разбором кода, с помощью которого вы сможете реализовать собственный список задач на чистом JavaScript:

https://itchief.ru/javascript/todo-list

#javascript #туториал

Bun: новый рантайм для JavaScript

Bun конкурирует с хорошо известными NodeJS и Deno. Это новый JavaScript рантайм с нативным сборщиком, транспайлером, исполнителем задач и встроенным npm клиентом.

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

https://habr.com/ru/news/t/676102/

#javascript