Forwarded from FrontEndDev
Используем http: only cookie для защиты JWT токена аутентификации
https://teletype.in/@budnifronta/m3EIF2ft9hJ
https://teletype.in/@budnifronta/m3EIF2ft9hJ
Object destructuring with types in TypeScript
https://flaviocopes.com/typescript-object-destructuring/
#coding
#typescript
https://flaviocopes.com/typescript-object-destructuring/
#coding
#typescript
Flaviocopes
Object destructuring with types in TypeScript
Lazy Load Vue Component When It Becomes Visible
https://mokkapps.de/blog/lazy-load-vue-component-when-it-becomes-visible
#coding
#vue
https://mokkapps.de/blog/lazy-load-vue-component-when-it-becomes-visible
#coding
#vue
Michael Hoffmann
Lazy Load Vue Component When It Becomes Visible - Michael Hoffmann | Michael Hoffmann - Senior Frontend Developer (Freelancer)…
In this blog post, I'll show you how a simple mechanism to lazy load your Vue components if they become visible using the Intersection Observer API.
Forwarded from WebCraft - ремесло веб разработки
Полное руководство по разработке full stack Laravel
Подробное руководство по разработке веб-приложений на Laravel. В статье представлены советы и примеры для всех уровней разработчиков, от новичков до опытных специалистов. Автор рассматривает различные аспекты разработки, включая маршрутизацию, модели, базы данных, представления, шаблоны и многое другое.
👉 @web_craft | #laravel
Подробное руководство по разработке веб-приложений на Laravel. В статье представлены советы и примеры для всех уровней разработчиков, от новичков до опытных специалистов. Автор рассматривает различные аспекты разработки, включая маршрутизацию, модели, базы данных, представления, шаблоны и многое другое.
👉 @web_craft | #laravel
Forwarded from Душный Вуй
Вот вам схема жизненного цикла страницы в Nuxt 3 которую прислал @zohan333
Forwarded from Codecademy | Программирование
Введение в Page Visibility API
Читайте статью ниже, чтобы узнать, что такое Page Visibility API, его назначение, принцип работы и область применения.
👉Читать статью
#javascript #полезное
Читайте статью ниже, чтобы узнать, что такое Page Visibility API, его назначение, принцип работы и область применения.
👉Читать статью
#javascript #полезное
Forwarded from Frontender's notes [ru]
🧑💻10 советов по TypeScript для продвинутых пользователей
В этой статье автор расскажет как стать более искусным и эффективным разработчиком TypeScript.
Читать...
В этой статье автор расскажет как стать более искусным и эффективным разработчиком TypeScript.
Читать...
Forwarded from Библиотека программиста | программирование, кодинг, разработка
#инфографика
CI/CD пайплайн в деталях
1️⃣ SDLC с CI/CD
🔸Жизненный цикл разработки программного обеспечения (SDLC) состоит из нескольких ключевых этапов: разработка, тестирование, деплой и cопровождение. CI/CD автоматизирует и интегрирует эти этапы, обеспечивая более быстрые и надежные выпуски. Когда код помещается в Git-репозиторий, он запускает автоматизированный процесс сборки и тестирования.
🔸Для проверки кода запускаются сквозные тестовые примеры. Если тесты пройдены, код может быть автоматически развернут в staging/production окружении. Если проблемы обнаружены, код отправляется обратно в разработку для исправления ошибок. Эта автоматизация обеспечивает быструю обратную связь с разработчиками и снижает риск ошибок в продакшене.
2️⃣ Разница между CI и CD
🔸Непрерывная интеграция (CI) автоматизирует процессы сборки, тестирования и слияния. В рамках CI запускаются тесты всякий раз, когда код фиксируется для раннего обнаружения проблем интеграции. Это поощряет частые фиксации кода и быструю обратную связь.
🔸Непрерывная доставка (CD) автоматизирует процессы выпуска, такие как изменения инфраструктуры и развертывание. Это гарантирует, что программное обеспечение может быть надежно выпущено в любое время с помощью автоматизированных рабочих процессов. CD также может автоматизировать этапы ручного/аппрувал тестирования, необходимые перед деплоем в продакшене.
3️⃣ CI/CD пайплайн
🔸Типичный CI/CD пайплайн состоит из нескольких связанных этапов:
🗄 Разработчик фиксирует изменения кода в системе управления версиями
🗄 CI-сервер обнаруживает изменения и запускает сборку
🗄 Код компилируется и тестируется
🗄 Результаты тестирования сообщаются разработчику
🗄 В случае успеха артефакты развертываются в staging окружениях
🗄 Дальнейшее тестирование может быть проведено на стадии подготовки перед выпуском
🗄 Система CD внедряет утвержденные изменения в продакшен
CI/CD пайплайн в деталях
🔸Жизненный цикл разработки программного обеспечения (SDLC) состоит из нескольких ключевых этапов: разработка, тестирование, деплой и cопровождение. CI/CD автоматизирует и интегрирует эти этапы, обеспечивая более быстрые и надежные выпуски. Когда код помещается в Git-репозиторий, он запускает автоматизированный процесс сборки и тестирования.
🔸Для проверки кода запускаются сквозные тестовые примеры. Если тесты пройдены, код может быть автоматически развернут в staging/production окружении. Если проблемы обнаружены, код отправляется обратно в разработку для исправления ошибок. Эта автоматизация обеспечивает быструю обратную связь с разработчиками и снижает риск ошибок в продакшене.
🔸Непрерывная интеграция (CI) автоматизирует процессы сборки, тестирования и слияния. В рамках CI запускаются тесты всякий раз, когда код фиксируется для раннего обнаружения проблем интеграции. Это поощряет частые фиксации кода и быструю обратную связь.
🔸Непрерывная доставка (CD) автоматизирует процессы выпуска, такие как изменения инфраструктуры и развертывание. Это гарантирует, что программное обеспечение может быть надежно выпущено в любое время с помощью автоматизированных рабочих процессов. CD также может автоматизировать этапы ручного/аппрувал тестирования, необходимые перед деплоем в продакшене.
🔸Типичный CI/CD пайплайн состоит из нескольких связанных этапов:
Please open Telegram to view this post
VIEW IN TELEGRAM
Собрали небольшую коллекцию для фронтенд-разработчика. Отлично подойдет, если пользуетесь готовыми шаблонами:
1⃣ Templated — коллекция простых HTML/CSS шаблонов
2⃣ Zerotheme — коллекция HTML/CSS шаблонов от дизайнера #Mik
3⃣ Html5up — коллекция элегантных, адаптивных и настраиваемых HTML/CSS шаблонов
4⃣ W3layouts — инициатива Hidayath по предоставлению бесплатных адаптивных шаблонов с поддержкой WordPress
5⃣ html5xcss3 — коллекция шаблонов, разработанных с учетом совместимости с экранами разных размеров
1⃣ Templated — коллекция простых HTML/CSS шаблонов
2⃣ Zerotheme — коллекция HTML/CSS шаблонов от дизайнера #Mik
3⃣ Html5up — коллекция элегантных, адаптивных и настраиваемых HTML/CSS шаблонов
4⃣ W3layouts — инициатива Hidayath по предоставлению бесплатных адаптивных шаблонов с поддержкой WordPress
5⃣ html5xcss3 — коллекция шаблонов, разработанных с учетом совместимости с экранами разных размеров
Responsive background images with image-set, the srcset for background-image
https://dev.to/ingosteinke/responsive-background-images-with-image-set-the-srcset-for-background-image-259a
#coding
#css
https://dev.to/ingosteinke/responsive-background-images-with-image-set-the-srcset-for-background-image-259a
#coding
#css
DEV Community
Responsive background images with image-set, the srcset for background-image
Source sets can help us to make websites load faster. We can use them in different ways to offer...
Build a progressive web app (PWA) with React
https://blog.logrocket.com/building-pwa-react/#from-web-app-pwa-using-workbox
#coding
#react
https://blog.logrocket.com/building-pwa-react/#from-web-app-pwa-using-workbox
#coding
#react
LogRocket Blog
Build a progressive web app (PWA) with React - LogRocket Blog
Progressive web apps are a (terribly named) wonderful idea. Go from create-react-app to PWA in a snap, saving your business money on the way.
How to Pass Data Between Pages in react-router-dom V6?
https://plainenglish.io/blog/how-to-pass-data-between-pages-in-react-router-dom-v6
#coding
#react
https://plainenglish.io/blog/how-to-pass-data-between-pages-in-react-router-dom-v6
#coding
#react
plainenglish.io/blog/how-to-pass-data-between-pages-in-react-router-dom-v6
How to Pass Data Between Pages in react-router-dom V6?
3 ways of passing data between pages in react-router-dom V6
Sharing Logic Between Components in Different React Renderers
https://www.braingu.com/blog/share-react-component-logic
#coding
#react
https://www.braingu.com/blog/share-react-component-logic
#coding
#react
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t#toc-ghtu-how-to-use-srcset-for-a-set-of-images
#coding
#html
https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t#toc-ghtu-how-to-use-srcset-for-a-set-of-images
#coding
#html
Web Design Envato Tuts+
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive...
In this tutorial we’ll see what the srcset and sizes attributes can do, how to use them with an img or picture element, and how to know which combination is the right choice.
Forwarded from Frontender's notes [ru]
🧐Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов.
Читать...
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов.
Читать...