Как сделать игру 2048 на React

Игру 2048 знают многие. В своё время она была хитом на смартфонах. Простые правила сделали её увлекательной и затягивающей.

Автор этого туториала сосредоточился на анимации. Он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS для создания собственной версии этой игры. В конце этой статьи вы найдёте ссылки на игру, её код и демо анимаций.

https://tprg.ru/7HEU

#react

​Адаптивная вёрстка без медиа-запросов

Автор этой статьи показал, как при помощи современных свойств и возможностей CSS можно добиваться адаптивности без использования медиа-запросов. Некоторые советы действительно впечатляют.

https://tprg.ru/pYhe

#css

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

Думали как провести последний месяц года? Для фронтенд-разработчиков, похоже, появился отличный вариант. Эми Даттон и Джеймс Квик создали адвент-календари по CSS и JavaScript, которые стартуют с 1 декабря и предлагают выполнить по 24 задания в каждом.

Участвовать может каждый и абсолютно бесплатно.

CSS: https://www.adventofcss.com/

JavaScript: https://www.adventofjs.com/

#фронтенд #css #javascript

​Как создать собственную криптовалюту с помощью JavaScript

Одним из преимуществом криптовалют является то, что их сеть децентрализована, что означает, что никто не просматривает транзакцию и нет посредников.

Сегодня вы можете попробовать создать криптовалюту с помощью JavaScript благодаря этой статье:

https://tprg.ru/Wv02

#javascript

Лёгкий путь по карьерной лестнице

​Spacing.js — библиотека для измерения расстояния между элементами на странице

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

Устанавливается и применяется крайне просто. Подробнее:

https://tprg.ru/HiOw

#javascript

​Использование position: sticky с CSS Grid

Ахмад Шадид поделился проблемой, которую недавно он помог решить — некорректной работой position: sticky с дочерним элементом. Он рассказал не только чем вызвана проблема, но и как её исправить и создать залипающее боковое меню.

Подробности:

https://tprg.ru/01Ht

#css

​Мощные инструменты терминала и командной строки (CLI) для современной веб-разработки

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

https://tprg.ru/bgYJ

​Визуализация с D3.js

D3, сокращённо от Data-Driven Documents  — это библиотека JavaScript, которая позволяет отображать данные самыми разными способами и содействует проверке и управлению элементами DOM.

В сегодняшней статье вы познакомитесь с D3 на основе конкретных примеров. Общий процесс сводится к следующим этапам: загрузка данных , выборка элементов , привязка данных , создание/изменение/ удаление элементов.

Подробнее:

https://tprg.ru/8tYO

#javascript

​Кто-то: Время за деньги не купишь

SSD:

Параллакс на основе настраиваемых свойств CSS

Современный CSS позволяет во многих ситуациях обходиться без притягивания ещё и JavaScript. Так, например, можно создать качественный параллакс с возможностью его отключения на кастомных свойства CSS.

Вот как это работает:

https://tprg.ru/ow8u

#фронтенд #css

​Подробное руководство по word-wrap, overflow-wrap, и word-break в CSS

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

Эта статья представляет собой руководство по углубленному изучению CSS-свойств word-wrap, overflow-wrap и word-break, которые позволят предотвратить переполнение содержимым контейнера и нарушение вёрстки.

https://tprg.ru/AMTI

#css

​Создаём приложение для записи с экрана на JS

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

Подробнее:

https://tprg.ru/w0pr

​Контролируем scroll полностью или реализация события React: onRenderChildrenComplete

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

https://tprg.ru/bYEy

#react

​5 лучших функций JavaScript ES12, которые вы можете использовать уже сейчас

ECMAScript 2021 (12-е издание) теперь доступен и поставляется с новыми функциями и улучшениями синтаксиса. Спецификации были окончательно доработаны ECMA International 22 июня 2021 года.

В этой статье подробно продемонстрируют 5 основных функций, предлагаемых ECMAScript 2021, чтобы вы могли начать использовать их в своих проектах и улучшить свой опыт работы с JavaScript. 

https://tprg.ru/tCwJ

#javascript

VS открылся, вот и рабочий день закончился

​Лучшие практики для React iframe

iframe — это, по сути, фрейм внутри фрейма. Используя тег <iframe/>, вы можете легко встроить внешний контент из других источников прямо на свою веб-страницу.

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

Как реализовать iframe наилучшим образом при использовании React, узнаете здесь:

https://tprg.ru/SNDZ

#react

​5 фреймворков CSS-in-JS для использования в 2021 году

По мере того, как веб-разработка продолжает активно развиваться, появляются новые способы ведения дел, и вокруг них строятся сообщества. Так, продолжает набирать популярность подход CSS-in-JS.

В этой статье вы найдёте несколько фреймворков CSS-in-JS, которые вы можете сразу же опробовать в своем рабочем процессе:

https://tprg.ru/sRBL

#css #javascript

​Процедурная генерация бумажных снежинок

Новый Год уже совсем близко, а это значит, что пора доставать новогодние украшения, наряжать ёлку, клеить на окна снежинки и прочее. Кстати, форму снежинок же не обязательно придумывать самостоятельно, если это дело доверить алгоритму.

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

https://tprg.ru/uVch

#typescript

​Использование однофайлового компонента Vue 3 без компиляции

Небольшая статья, рассказывающая о том, как использовать однофайловые компоненты в Vue 3 без компиляции. Ничего сложного, но крайне полезно знать.

https://tprg.ru/NLpT

#фронтенд #vue