​Различия деструктуризации массивов и объектов в JavaScript

Назначение деструктуризации в JavaScript — обеспечить аккуратный и надёжный способ извлечения значений из ваших массивов и объектов.

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

https://tprg.ru/7YRe

#javascript

​Дженерики в TypeScript

Дженерики — это обобщённые типы, которые нужны для описания похожих, но отличающихся какими-то характеристиками типов. Если вы не используете их из-за незнания или боязни, то эта статья развеет все ваши страхи и научит правильно применять дженерики на практике.

https://tprg.ru/Lr7H

#typescript

Иконки с эффектом глассморфизма в CSS

Несмотря на то, что существует множество статей о том, как создать такой эффект в CSS, все они предполагают очень простой случай, когда наложение является прямоугольным или, самое большее, прямоугольником с border-radius. 

Однако получение эффекта глассморфизма для неправильных форм, таких как значки, независимо от того, являются ли эти значки смайликами или SVG, намного сложнее, поэтому автор статьи решил, что стоит поделиться этим процессом, ловушками, в которые он попал, и вещами, которые он узнал по пути.

https://tprg.ru/ymJ8

#css

​Разработка через тестирование: как тестировать с помощью Vue.js, VueTestUtils и Jest

Разработка через тестирование - это практика разработки программного обеспечения. TDD предполагает три этапа разработки:

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

TDD также требует, чтобы вы часто писали модульные тесты. В этой статье вы узнаете, как реализовать такой подход при помощи Vue.js, VueTestUtils и Jest:

https://tprg.ru/i7z1

​Полный курс по Gulp

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

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

https://tprg.ru/hIAg

#gulp

Проще признать устаревшим и переписать с нуля

Как сделать игру 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