Новые возможности отладки при работке с Flexbox

Не так давно в браузерах Google и Microsoft появились новые инструменты, позволяющие значительно упростить и улучшить визуально работу с флексами в DevTools.

Автор этой статьи принимал участие при разработке этих инструментов и теперь делится тем, как их включить и использовать в Chrome и Edge:

https://tprg.ru/QGaF

#фронтенд #css

Управление состоянием: Jotai вместо Redux

Несмотря на то, что Redux является мощной и популярной библиотекой для управления состоянием приложения на JS, Jotai позволяет упростить и улучшить решение этой задачи, задействуя хуки при использовании React. А благодаря минималистичному API, Jotai избавляет от необходимости писать объёмный код для обработки потока данных, как в случае с Redux.

Подробнее о том, как работает Jotai, рассказывают в этой статье:

https://tprg.ru/WOCe

#react #redux

На самом деле ещё и рот на лбу бы оказался

​Альтернативные фреймворки JavaScript

Когда речь заходит о фреймворках JavaScript, то на ум сразу приходят React, Angular и Vue. На данный момент это наиболее популярные варианты при создании проектов.

Но помимо них существуют несколько фреймворков и библиотек, которые могут составить им конкуренцию. Подробнее в этой статье:

https://tprg.ru/BAps

#javascript

Ломаем и чиним Kubernetes

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

О том, как починить кластер, воркеры, восстановить сертификаты и многое другое без даунтайма запущенных сервисов, читайте в этой статье:

https://tprg.ru/XuDt

#devops #kubernetes

​Создана веб-симуляция Linux

Как тебе такое, Илон Маск?! Пользователь GitHub создал проект, который позволяет запускать симуляцию Linux прямо в браузере. Конечно, это не полноценная ОС, а лишь её симуляция, но даже в ней пользователь может открыть терминал, зайти в настройки или поменять яркость экрана.

Автор не рассказал, как он это сделал, поэтому, если вы хотите попробовать проект в деле или изучить его код — вот ссылка на репозиторий: https://tprg.ru/rtTZ

​Создание игрового цикла на Canvas

Игровой цикл — это метод визуализации, который используется для создания анимаций и игр с изменением состояния с течением времени. В этом видео наш подписчик рассказывает, как создать простой игровой цикл на Canvas, используя метод requestAnimationFrame.

Видеоурок: https://tprg.ru/r19Q

Готовый пример из видео: https://tprg.ru/LdWE

А тут вы можете посмотреть другие видеоуроки от нашего подписчика:
— визуализация звука с микрофона;
— анимация хаотичных частиц;
— эффект волны на JavaScript.

#фронтенд #javascript

Его уже не спасти

​Иконки Favicon научились использовать в качестве Supercookies

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

Данный способ подробно описал в своём GitHub-аккаунте немецкий разработчик, а основную суть метода можно узнать в нашей статье:

https://tprg.ru/hDX2

Создание ИИ для игры Гомоку (5 в ряд) на JavaScript

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

— алгоритм оценки состояния игры;
— генератор ходов;
— алгоритм поиска;
— алгоритм определения победы.

В статье вы найдёте не только разбор кода алгоритмов, но также ссылку на саму игру и репозиторий на GitHub для детального изучения:

https://tprg.ru/Ves9

#javascript

Необычная задача на JavaScript

Сможете ли вы, глядя на эту картинку, сказать какое значение будет присвоено переменной tree?

Для того, чтобы решить эту задачу необходимо знать приоритет операторов в JS, ассоциативность, префиксные и постфиксные инкремент и декремент, а также другие особенности JavaScript.

В этой статье вы можете проверить свой вариант ответа и посмотреть подробное решение задачи:

https://tprg.ru/UtCD

#javascript

​Предложка «Веб-страницы»

Вы нашли что-то действительно классное по веб-разработке на просторах интернета? Присылайте нам через нашего бота Tproger, и лучшие материалы мы опубликуем на канале:

t.me/tproger_official_bot?start=suggest

​Возможности CSS сегодня

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

В этой статье рассматриваются несколько полезных фич CSS, которые могут упростить вам жизнь:

https://tprg.ru/HRYS

#фронтенд #css

Да тут ещё и
.mouth {
position: absolute;
left: 10px;
}

​«Как меня чуть не уволили за выбор React для корпоративного приложения»

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

https://tprg.ru/48Sv

#фронтенд #react

10 полезных инструментов для веб-разработчика

В этой подборке содержатся сервисы и инструменты, которые пригодятся большинству веб-разработчиков: WhatRuns, CSS Scan, Prettier и другие.

Подробнее обо всех инструментах в статье:

https://tprg.ru/YiNX

Подборка CodePen-проектов ко Дню всех влюблённых

Ко Дню всех влюблённых мы подготовили эту праздничную подборку.

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

— сердцепад: https://tprg.ru/6kKI

— сердце из струящихся линий: https://tprg.ru/mOhM

— интерактивная караоке-валентинка: https://tprg.ru/Oxob

— конструктор валентинок: https://tprg.ru/y2Wn

— микро-каталог признаний: https://tprg.ru/yVWl

— валентинка с Пикачу: https://tprg.ru/6Mzd

— и ещё одна валентинка напоследок: https://tprg.ru/7dPu

#codepen #фронтенд

​7 основных понятий CSS Grid Layout с примерами

Гриды в CSS — очень удобный инструмент, позволяющий легко расставлять блоки на странице, который сейчас уже поддерживается большинством браузеров.

А тут мы рассказываем о нескольких свойствах и функциях, чтобы вам было проще использоваться Grid Layout:

https://tprg.ru/NkMa

#фронтенд #css

​Аспектно-ориентированное программирование в JavaScript

Нет, мы не ошиблись. Да, аспектно-ориентированное программирование существует. Более того, АОП можно без проблем совмещать с ООП. Следуя концепции АОП, можно внедрять дополнительный код в существующие объекты, методы и функции без изменения их логики.

Подробнее об аспектно-ориентированном программировании, его использовании в JavaScript и примерах реализации можно прочитать в этой статье:

https://tprg.ru/XMFQ

#javascript

​Подборка фронтенд-проектов для новичков

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

https://tprg.ru/bWHv

#фронтенд