​Как выиграть $30 000 за 13 килобайт кода на JS

Нашли забавный конкурс, который проходит ежегодно в августе. Согласно правилам, участники должны написать мини-игру на HTML5 и JavaScript, а код должен весить не больше 13 килобайт.

Мы изучили правила, тулкит и прошлогодних победителей. Теперь предлагаем познакомиться с ними и вам:

https://tproger.ru/articles/vyigrat-30-000-za-13-kilobajt-koda-js13kgames/

​Создание вкладок на чистом JavaScript

В этом видео вы узнаете, как написать вкладки на JavaScript, не используя при этом никаких библиотек. Кроме того, это будет универсальный JS-код, в который вы сможете добавлять любое количество вкладок и при этом не менять JS:

https://youtu.be/kEos2KoW_rc

#видео #javascript

Не от мира сего

​Как работает currentColor в CSS

Ключевое слово currentColor можно использовать в качестве значения для CSS-свойства. Тогда браузер сам подставит нужный цвет. Несколько примеров использования и объяснение принципа работы тут:

https://doka.guide/css/currentcolor/

#css

​Новый выпуск веб-стандартов

В этом выпуске подкаста Вадим Макеев, Андрей Мелихов и другие обсудили Chrome, :has, MathML, Defensive CSS, карточки-ссылки, дизайн-токены, ES2022 и GitHub Copilot. Заходите послушать:

https://youtu.be/emrNwETMzro

#подкаст

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

Разработчик Брайан Браун решил развлечься во время пандемии и создал библиотеку 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