15 кастомных хуков для облегчения компонентов React
Появившиеся в React 16.8 хуки позволяют использовать состояние и прочие возможности библиотеки без написания классов. В небольшом обзоре приводятся 15 наиболее полезных из них: https://proglib.io/p/15-kastomnyh-hukov-dlya-oblegcheniya-komponentov-react-2021-08-11
#react
Появившиеся в React 16.8 хуки позволяют использовать состояние и прочие возможности библиотеки без написания классов. В небольшом обзоре приводятся 15 наиболее полезных из них: https://proglib.io/p/15-kastomnyh-hukov-dlya-oblegcheniya-komponentov-react-2021-08-11
#react
Playwright и Allure как хорошая практика для разработки веб-приложения
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Разработчик представил веб-сайт, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Шпаргалка по Flexbox
Это, пожалуй, одна из лучших шпаргалок по Flexbox, которые доступны в интернете. Она проста, охватывает все необходимые свойства и обладает наиболее понятными визуальными пояснениями.
Сохраняйте себе в закладке и пользуйтесь по необходимости: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#шпаргалка #css #flexbox
Это, пожалуй, одна из лучших шпаргалок по Flexbox, которые доступны в интернете. Она проста, охватывает все необходимые свойства и обладает наиболее понятными визуальными пояснениями.
Сохраняйте себе в закладке и пользуйтесь по необходимости: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#шпаргалка #css #flexbox
Old but gold: Микрофронтенд с feature sliced design
В этой статье автор рассмотрел концепцию двух данных архитектур, обсудив их преимущества перед монолитными фронтенд‑приложениями и другими доступными настройками.
А так же рассказал, как ему удалось удачно объединить оба решения в одном проекте: https://habr.com/ru/articles/747952/
#архитектура
В этой статье автор рассмотрел концепцию двух данных архитектур, обсудив их преимущества перед монолитными фронтенд‑приложениями и другими доступными настройками.
А так же рассказал, как ему удалось удачно объединить оба решения в одном проекте: https://habr.com/ru/articles/747952/
#архитектура
Forwarded from IT Юмор
15 советов по оптимизации страниц
Аспекты разработки (на которые часто не обращают внимание), которые помогут улучшить загрузку и работу вашего приложения: https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/
#собеседование #фронтенд
Аспекты разработки (на которые часто не обращают внимание), которые помогут улучшить загрузку и работу вашего приложения: https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/
#собеседование #фронтенд
В CSS появился условный оператор
Делимся статьей, в которой подробнее рассказали о синтаксисе и примерах использования: https://css-tricks.com/if-css-gets-inline-conditionals/
#css
Делимся статьей, в которой подробнее рассказали о синтаксисе и примерах использования: https://css-tricks.com/if-css-gets-inline-conditionals/
#css
В Python могли встроить вирус. Все из-за утечки админского токена языка через публичный Docker-контейнер
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли codepen того самого переключателя из мемного видео: Detailed Theme Switch
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Cloudflare выпустила Pingora v0.3.0 с поддержкой HTTP-модулей
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
This media is not supported in your browser
VIEW IN TELEGRAM
Ничего необычного, просто бэкендер пытается в CSS:
Forwarded from Газпромбанк
This media is not supported in your browser
VIEW IN TELEGRAM
Вместе с Tproger запустили игру про историю платежных инструментов!
Сегодня мы оплачиваем покупки телефоном, а далекие предки делали это с помощью…
Чтобы узнать, каким был этот путь из древности до наших дней, примите участие в мини-игре.
Ваша задача ― кликать по предмету на экране, чтобы от обмена ракушками дойти до современных видов платежей!
Начать игру можно по ссылке.
@gazprombank
Please open Telegram to view this post
VIEW IN TELEGRAM
bunkerweb: многостаночный файервол для сайта
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Лучшие способы вызова API на JavaScript
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Forwarded from Точка входа в программирование
Учим React за месяц
React — это крутая JavaScript-библиотека, которую используют для создания сайтов, мобильных приложений и даже игр.
Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.
@prog_point #web #frontend #react
React — это крутая JavaScript-библиотека, которую используют для создания сайтов, мобильных приложений и даже игр.
Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.
@prog_point #web #frontend #react
