Ruby on Rails продовжує розвиватися та адаптуватися до потреб сучасної веброзробки. Давайте розглянемо деякі захоплюючі функції, які представляють наступний етап еволюції цього улюбленого фреймворка.

1. Покращена асинхронна обробка з Background Tasks API

Rails 8 вводить більш інтуїтивний спосіб роботи з фоновими завданнями за допомогою нового нативного Background Tasks API. Ця функція спрощує асинхронні операції без потреби в сторонніх бібліотеках, таких як Sidekiq чи Delayed Job.

class UserMailer < ApplicationMailer  
  background :welcome_email  

  def welcome_email(user)  
    mail(  
      to: user.email,  
      subject: "Ласкаво просимо на нашу платформу!"  
    )  
  end  
end  

# Використання  
UserMailer.welcome_email(user).deliver_later

2.

Покращена інтеграція з WebSocket

Реалізація WebSocket була вдосконалена завдяки спрощеному API … Читати далі

Підтримання узгодженого середовища розробки є одним із найбільших викликів у сучасній розробці програмного забезпечення. Незалежно від того, чи працюєте ви самостійно, чи в команді, відмінності між середовищами можуть спричиняти прикрі помилки, витрату часу та складні процеси налаштування. Dev Containers (контейнери для розробки) є потужним рішенням цієї проблеми, пропонуючи спосіб інкапсуляції вашого середовища розробки у контейнер для простого та повторюваного налаштування.

Де середовище кожного розробника таке ж барвисте та узгоджене, як веселка!

У цьому дописі ми познайомимо вас із Dev Containers (контейнерами для розробки), пояснимо їхні переваги та розглянемо, як їх можна використовувати для оптимізації робочих процесів у проектах на Rails … Читати далі

Фото: Sora Shimazaki на Pexels

Останнє оновлення: 2024–08–30

Нещодавно на офіційному вебсайті React були випущені нові документи. Це найкращий спосіб вивчити фреймворк.

https://react.dev/learn

Ті, хто вже давно працює з React, знають, що для того, щоб стати справжнім майстром цього фреймворку, потрібно стежити за кожним розробником команди React у Twitter, щоб не пропустити жодної цінної інформації.

Але тепер це не потрібно! Уся ця езотерична інформація тепер доступна в легкому для читання форматі. Молоді таланти, що наступають вам на п'яти, заберуть вашу роботу завдяки новим React документаціям!

Єдиний спосіб залишатися попереду – це змиритися, сісти і уважно прочитати кожне слово в … Читати далі

React.js - це широко використовувана бібліотека JavaScript для розробки додатків в реальному часі та користувацьких інтерфейсів. Її часто називають фронтенд-фреймворком JavaScript. Visual Studio Code (VSCode) - це легкий, але потужний редактор коду, який надає відмінну підтримку для розробки на React.js. У цій статті ми проведемо вас через процес налаштування React.js з Vite, швидким і добре налаштованим інструментом для зборки, у VSCode. Тож давайте швидко встановимо додаток React у VS Code.

Необхідні умови:

Перед тим, як приступити до процесу установки, давайте переконаємось, що у вас є всі необхідні передумови:

1. Node.js та npm:

• React.js залежить від Node.js та npm (Node Package Manager).

У цьому блозі ми розглянемо простий калькулятор ІМТ (Індекс маси тіла), створений за допомогою React та Next.js. Цей додаток дозволяє користувачам вводити свою вагу та зріст, вибирати одиничну систему (метричну або імперську), а також обчислювати їх ІМТ разом з відповідною категорією. Давайте зануримось у код і розглянемо кожну частину докладніше.

Налаштування компонента

'use client';

На початку нашого коду є рядок use client. Ця директива є важливою в Next.js, оскільки вона вказує, що компонент, який ми визначаємо, є клієнтським компонентом. Це означає, що він може використовувати хоки React і керувати станом, що є важливим для інтерактивних додатків, таких як наш … Читати далі

TLDR: Шаблон тут https://github.com/5tigerjelly/chrome-extension-react-template

У цьому дописі я поділюсь своїм досвідом створення розширення для Chrome — від використання чистого HTML, JS і CSS до міграції на React і використання Vite для компіляції. Цей шлях був сповнений викликів, уроків і врешті-решт рішення, яке, сподіваюся, допоможе іншим у схожих ситуаціях.

Фото Орісси Хьюмс на Unsplash

Початок роботи з чистим HTML, JS і CSS

Коли я тільки починав, я слідував офіційній документації Google, яка надавала приклади на чистому HTML, JS і CSS. Цей підхід добре працював для налаштування основних функцій. Документація була зрозуміла і допомогла мені зрозуміти основи розширень для Chrome. Мені вдалося … Читати далі

В цьому блозі ми розглянемо, як реалізувати аутентифікацію на основі JWT за допомогою Next.js v14 і NextAuth v4. Ми створимо власну сторінку входу та використаємо постачальника облікових даних для обробки процесу аутентифікації.

Налаштування Next.js та NextAuth

Для початку потрібно встановити Next.js і NextAuth за допомогою npm або yarn:

pnpm add next-auth

Створення власної сторінки входу

Далі потрібно створити власну сторінку входу.
Ми створимо новий файл app/login/page.tsx для цього:

'use client'  
import React, { useState } from 'react';  
import Image from "next/image";  
import Link from "next/link";  
import { Button } from "@/components/ui/button";  
import { Input } from "@/components/ui/input";  
import { Label 

Технологія мікрофронтендів пропонує революційну парадигму для створення масштабованих і зручних у підтримці веб-додатків, розбиваючи монолітну архітектуру на керовані компоненти, що розробляються незалежно.

Щоб дізнатися більше про мікрофронтенди, перегляньте цей пост:

[

Як ми будуємо мікрофронтенди

Створення мікрофронтендів для прискорення і масштабування процесу веб-розробки.

blog.bitsrc.io

](/how-we-build-micro-front-ends-d3eeeac0acfc?source=post_page-----f3762996c208--------------------------------)

Однак це не означає, що мікрофронтенди завжди корисні.

Одним із найбільших недоліків використання мікрофронтендів з React є проблема спільного стану між цими розподіленими одиницями.

На відміну від традиційних монолітних додатків, мікрофронтенди мають справу з синхронізацією стану між різними джерелами і доменами — завданням, яке браузери не призначені вирішувати.

Ви можете побачити розгорнутий додаток тут: … Читати далі

React 19 представляє безліч нових функцій та покращень, спрямованих на покращення досвіду розробника та підвищення продуктивності додатків. У цьому блозі ми розглянемо основні оновлення та надамо практичні приклади, щоб допомогти вам зрозуміти та застосувати ці вдосконалення у ваших проектах, з особливим акцентом на додатки в спортивній індустрії.

1. Дії (Actions)

Дії спрощують мутації даних та оновлення станів, дозволяючи асинхронні функції в межах транзакцій. Ця функція автоматично керує очікуваними станами, помилками, формами та оптимістичними оновленнями.

Уявіть собі додаток для управління спортивною командою, де користувачі оновлюють статистику гравців.
Дії (Actions) можуть безшовно керувати станом процесу оновлення.

import { useState, useTransition } from 

Впровадження двофакторної аутентифікації (2FA) є важливим кроком у забезпеченні безпеки користувацьких акаунтів та підвищенні загальної безпеки. Keycloak, відкрите рішення для управління ідентифікацією та доступом, надає потужну підтримку різних методів 2FA. У цьому блозі ми розглянемо, як налаштувати кілька методів 2FA в Keycloak: SMS, Email та одноразовий пароль на основі часу (TOTP) через додаток Authenticator.

Огляд

Сьогодні ми налаштуємо демонстраційний клієнтський додаток, який перенаправляє на Keycloak для входу, після чого Keycloak запропонує варіант MFA. Ми охопимо наступне:

1. Запуск Keycloak за допомогою Docker.
2. Налаштування потоку багатофакторної аутентифікації (MFA) в Keycloak.
   3.
   Запуск демонстраційного додатку для тестування потоку MFA.

Для тих, хто хоче … Читати далі