​Когда уже сверстал страницу, а к бэкенду ещё не приступал:

​Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript

Автор решил написать крошечный тест-раннер run-chewy на nodejs, чтобы лучше разобраться в основном пакете SWC и поэкспериментировать с рабочими потоками. И вот что у него в итоге получилось:

https://nuancesprog.ru/p/16522/

#qa #javascript #typescript

Новогодний паттерн для фона на чистом CSS

Просто паттерн, который вы можете использовать в качестве фона где хотите. Сделан он с помощью одного только CSS, так что не занимает практически ничего.

Посмотреть код можно здесь:

https://codepen.io/t_afif/pen/abKgOgz

#codepen #css

​ASMR программирование. Пишем игру Pacman

Хотите немного технологичного ASMR? Тогда включайте это видео и наслаждайтесь звуками механической клавиатуры, которые всего за час с небольшим создают классического Pacman’а на JavaScript. Кстати, там и код можно изучить:

https://www.youtube.com/watch?v=GXlckaGr0Eo

#видео #asmr #javascript

​Продвинутый TypeScript

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

https://angularexperts.io/blog/advanced-typescript

#typescript

​Мета-приложения и Symbiote.js

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

Подробнее обо всём этом можно узнать тут:

https://habr.com/ru/post/682580/

#фронтенд #javascript

Снежный анимированный бэкграунд

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

Подробнее можно посмотреть тут:

https://codepen.io/bawelna0225/pen/ZERwxmr

#codepen #фронтенд

SVG-фейерверки

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

https://codepen.io/creativeocean/pen/jOzKZGR

#codepen

​Как войти в блокчейн через JavaSсript: создаём свой DeFi-проект на базе JS SDK смарт-контрактов Waves Enterprise

DeFi (Decentralized Finances) — обобщённое понятие для всех сервисов, предоставляющих финансовые услуги в децентрализованном формате. Это означает, что все операции с вашими активами прозрачны, ваши средства всегда вам доступны, и наложить на них какие-либо ограничения практически невозможно. Другими словами, это одна из причин почему так важен децентрализованный интернет и технологии, о которых сегодня так много говорят.

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

https://habr.com/ru/company/web3_tech/blog/700626/

#javascript #web3

​Elm — забава или серьёзный инструмент?

Данный обзор познакомит вас с частичкой мира функциональных языков программирования, а именно с Elm — функциональным языком программирования, который компилируется во всеми любимый javascript. Кто-то узнает про этот инструмент, кто-то про то, что фронтенд — это не только HTML, CSS и JS.

Подробнее:

https://habr.com/ru/post/696718/

#elm #javascript

​Создание приложения погоды на Vue.js

Узнайте, как создать приложение погоды в Vue JS, используя Open Weather Map API и restful api для получения данных о погоде. При этом здесь также используется современный Javascript Fetch API наряду с методами и состояниями Vue JS.

Подробнее:

https://youtu.be/JLc-hWsPTUY

#видео #vue

Новогодний лоадер со снежком

Этот лоадер на чистом CSS добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:

https://codepen.io/jkantner/pen/wvXbboe

#codepen #css #лоадер

Новогодняя игра «Помощник Санты»

Если салаты уже нарезаны, шампанское охлаждается и вам пока что нечем заняться, то поиграть в игру «Помощник Санты». Ваша задача максимально проста — добраться как можно дальше переходя с одной печной трубы на другую.

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

https://codepen.io/housamz/pen/KKgmMLm

#codepen #gamedev

​Анимация неонового свечения на CSS

Всего за 5 минут вы можете научиться создавать эффект неонового свечения с анимацией на чистом CSS. Без лишних слов и воды пошаговое руководство представлено здесь:

https://youtu.be/fWkzXZCIAuQ

#видео #фронтенд #css

​Как использовать Redux для управления состоянием в масштабах всего приложения

Возможность иметь единое хранилище состояний — это то, что даёт Redux преимущество над традиционным контекстным API.

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

https://www.freecodecamp.org/news/how-to-use-redux-for-application-wide-state-management/

#redux #фронтенд

Feed the World

Милый codepen-проект, предлагающий в буквальном смысле накормить Мир, перетягивая еду прямо в рот.

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

Попробовать можно тут:

https://tprg.ru/Kwkq

#codepen #gamedev

​Случайность в CSS

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

Или всё-таки можно обойтись без JS? В этой статье вы найдёте интересный способ рандомизации с помощью CSS:

https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd

#css

Как создать браузерную «пипетку» с работой вне браузера

Знакомьтесь, EyeDropper API — небольшой JS API, позволяющий разработчикам добавить в их проект пипетку. С помощью неё пользователь может выбрать нужный цвет и веб-приложение зафиксирует его.

Подробнее о том, как это работает можно узнать тут:

https://patrickbrosset.com/articles/2021-11-24-how-i-built-an-eye-dropper-browser-extension/

#javascript #фронтенд

Создайте многопользовательскую игру в крестики-нолики в реальном времени с помощью Socket.io and Vue

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

Подробнее:

https://dev.to/nilmadhabmondal/build-multiplayer-realtime-tic-tac-toe-game-with-socketio-and-vue-5clp

#vue #socketio

​Лучшая коллекция генераторов CSS-кода

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

https://blog.openreplay.com/a-top-collection-of-css-code-generators/

#css #фронтенд