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

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

https://tprg.ru/kzmB

#javascript

​Глитч-эффект в тексте в чистом CSS

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

https://tprg.ru/N3t4

#css

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

Забавный новогодний codepen-проект. Это игра, где вам необходимо помогать Санте перебираться с дымохода на дымоход, для этого вы должны с помощью долгого клика построить мост.

Попробовать сыграть и посмотреть код можно тут:

https://tprg.ru/TCgW

#codepen

​Как украсить свой сайт к Новому году

Ловите подборку интересных проектов с Codepen с праздничными украшениями для сайта. Сейчас самое время немножко преобразить вашу веб-страницу.

https://tprg.ru/g95t

#codepen #фронтенд

​​Разработчик: мой сайт максимально понятен и прост в использовании

Пользователь:

​Брендирование изображений с помощью ImageKit и Vue.js

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

Если ваш проект на Vue.js, то вам повезло, ведь в этой статье вы найдёте исчерпывающую информацию, которая поможет вам автоматизировать эту задачу:

https://tprg.ru/4KmO

#vue

Восход солнца на CSS

Эта красивая анимация восхода солнца создана без использования JavaScript. Всё нарисовано с помощью HTML и CSS.

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

https://tprg.ru/ine9

#codepen

​Добавление пользовательской темы для фронтенд-приложений

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

https://tprg.ru/8qFh

#фронтенд

​Как JavaScript-разработчики могут использовать конечные автоматы в своих проектах

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

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

А вот как использовать конечные автоматы в веб-разработке, узнаете тут:

https://tprg.ru/98xE

#javascript

​​Разработчики и баги в естественной среде обитания:

​Веб-альманах 2021

Недавно был опубликован веб-альманах этого года — отчёт о вебе, который основан на проверенных данных и выпускается разработчиками HTTP Archive. Мы собрали наиболее интересные факты из него специально для вас.

Как развиваются HTML, CSS и JS можете прочитать здесь:

https://tprg.ru/K3PV

​Пример использования WebAssembly-модуля, скомпилированного из Rust, в React-приложении

Автор поделился собственным способом создания модуля WebAssembly, созданного на языке Rust. Особенно эта статья будет полезна тем, кто как и автор не владеет Rust, но хочет расширить собственные знания.

https://tprg.ru/JvwR

#webassembly #react

​Превращаем устанавливаемые сайты в настоящие приложения

Прогрессивные веб-приложения стирают границы между приложениями и веб-сайтами. Они сочетают в себе как возможности сайтов, так и работу в автономном режиме, чтение файлов и так далее.

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

О том, как это сделать, узнаете в статье:

https://tprg.ru/E7Uc

#pwa

​​Настройка VSCode и Dev Tools

Лекция, посвящённая популярному редактору кода VSCode. Здесь вы научитесь настраивать его под собственные нужды, познакомитесь с полезными плагинами, которые ещё больше упростят работу с редактором, а также научитесь работать с Dev Tools.

Посмотреть лекцию можно тут:

https://tprg.ru/2QVj

#видео

Новогодняя ёлка

Продолжаем тему новогодних проектов на CodePen. На этот раз у нас красивая анимация svg-ёлки, сделанная с помощью JavaScript-библиотеки GSAP.

Изучить подробнее можно тут:

https://tprg.ru/RP5T

#codepen

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

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

https://tprg.ru/REeI

#видео #css

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

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

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

https://tprg.ru/UEG4

#react #redux

​Как программисту переехать в другую страну и закрепиться там

О релокации мечтают многие разработчики, а некоторые именно из-за этого и идут в IT. Но поменять страну проживания не самая простая задача.

Автор этой статьи поделился своим опытом релокации на Бали:

https://tprg.ru/7utF

А гифка ещё и в низком качестве

​Современное шифрование/дешифрование данных PHP с расширением Sodium

За прошедшие годы PHP добавил поддержку нескольких расширений, библиотек и алгоритмов для шифрования и дешифрования данных. Имея несколько библиотек и расширений с различными уровнями обслуживания, сложно выбрать наиболее оптимальное. Sodium является одним из самых продвинутых и современных решений для шифровки/дешифровки данных на PHP.

В этой статье предлагаем вам познакомиться с этой библиотекой поближе:

https://tprg.ru/P4eO

#php