Привіт, хлопці, налаштування Tailwind у ваших проектах на Vite може зайняти два-три кроки.

Наприклад, у Vite з React,

• Потрібно встановити Tailwind.
• Згенерувати конфігураційні файли.
• Додати шаблон до цих файлів.

Але я створив npm пакет, який налаштовує Tailwind однією командою у вашому проекті. Він автоматично встановить Tailwind, згенерує конфігураційний файл і додасть шаблони до нього.

Інсталяція:

npm install -g lazywind

Встановіть пакет глобально.

Далі запустіть,

lazywind

Запустіть цю команду в директорії вашого проекту.

Приклад:

Тепер налаштуємо React проект за допомогою Vite

Налаштуйте React,

npm create vite@latest client -- --template react  

cd client  

npm install

Після налаштування React і встановлення залежностей ви … Читати далі

“Обітниця Часу”
“Кристальні Колодязі розкололися, потік часу зламався. Як мандрівник між світами, ти виткатимеш нитки довіри і вирватимеш з тіней зраду. Але обережно, кожне твоє рішення змінить майбутнє, і тільки ти можеш виконати Обітницю Часу.”

Деталі гри

У кожному з паралельних світів, що охороняють Кристальні Колодязі, є свої охоронці. Однак через руйнування кристалів ці охоронці стали або зіпсованими, або перебувають під впливом зради. Гравець повинен у цих світах збирати уламки кристалів і здобувати довіру охоронців або виявляти їх справжнє обличчя, щоб завершити місію.

Основна мета: Зібрати розбиті кристали, щоб відновити час. Однак, в процесі цього гравець повинен розібратися, хто … Читати далі

Я мав удачу побувати на багатьох етапах індустрії настільних ігор. Для гри Fantastic Factories я був співавтором гри, створив арт, зробив графічний дизайн і самостійно опублікував її. Я також працював над кількома виданими та такими, що ось-ось будуть опубліковані, іграми (Verdant, Knitting Circle, Point Galaxy, Propolis). Однак є одна річ, яку я ще не робив — це подання гри видавцю. Минулого уікенду на PAX Unplugged я отримав першу можливість провести подання, і тому я хочу поділитися своїм досвідом.

Reading Terminal Market — чудове місце для обіду, прямо біля Філадельфійського конференц-центру.

По-перше, я був дуже радий, що мав можливість працювати разом … Читати далі

текст перекладу

Покрокова інструкція зі створення Dockerfile для Flask-додатків, що зменшують час збірки та проблеми з деплоєм

💡Вступ

Ласкаво просимо у світ DevOps! 🚀 Сьогодні ми зануримося в одну з основних навичок для будь-якого DevOps інженера: оптимізацію Dockerfile для Flask-додатків. Хоча початківці часто зосереджуються на освоєнні основного синтаксису Dockerfile, досвідчені інженери знають, що справжня майстерність полягає в оптимізації — створенні Dockerfile, які є ефективними, безпечними та готовими до продуктивного використання.

У цьому блозі ми пройдемо процес створення простого Flask-додатку. Спочатку ми створимо базовий Dockerfile, а потім удосконалимо його, порівнюючи два варіанти, щоб зрозуміти різницю. Незалежно від того, чи ви початківець, … Читати далі

Зображення створено за допомогою DALL.E

Вступ: Ваш шлях у програмуванні починається!

Привіт, майбутній розробнику Django! 👋 Сьогодні ми створимо щось неймовірне — Панель погоди, яка допоможе вам навчитися Django, створюючи крутий і практичний додаток. Не переживайте, якщо ви новачок у програмуванні, я поясню все крок за кроком!

Що ви дізнаєтесь сьогодні

• Налаштування проекту Django
• Підключення до погодного API
• Створення веб-додатка
• Відображення погодної інформації

Попередні вимоги

Перед тим, як ми почнемо, переконайтеся, що у вас є:

• Встановлений Python (версія 3.8+)
• Базові знання Python
• Комп’ютер (очевидно! 😄)
• Бажання вчитися!

Крок 1: Підготовка вашого середовища для розробки

Встановлення Python і Django

Відкрийте термінал … Читати далі

Django форми (forms.ModelForm та forms.Form) використовуються для обробки вводу користувача у веб-застосунках. Вони надають зручний спосіб для валідації, обробки та керування введеними даними з HTML-форм у безпечний та структурований спосіб. Ось основні варіанти використання кожного типу форм:

Чому варто використовувати Django форми?

1. Валідація даних: Переконайтеся, що введені користувачем дані відповідають певним вимогам (наприклад, формат електронної пошти, максимальна довжина, обов'язкові поля).
2. Безпека: Захист від поширених вразливостей, таких як SQL-ін’єкції або міжсайтові скрипти (XSS).
3. Легкість у використанні: Спрощення створення та обробки форм з мінімумом коду.
4. Інтеграція: Легко інтегрується з моделями та поданнями Django.

У Django вибір … Читати далі

текст перекладу

Налаштування тестового середовища:

• Імпортуємо необхідні модулі:

import { ComponentFixture, TestBed } from '@angular/core/testing';  
import { MyComponent } from './my.component'; // Ваш компонент для тестування  
import { MyService } from './my.service'; // Сервіс з функцією Observable  
import { of } from 'rxjs'; // Для створення моків для обсерваблів

• Налаштування TestBed:

describe('MyComponent', () => {  
 let component: MyComponent;  
 let fixture: ComponentFixture;  
 let mockMyService: jasmine.SpyObj; // Створюємо мок об'єкта  

 beforeEach(async () => {  
 await TestBed.configureTestingModule({  
 declarations: [MyComponent],  
 providers: [  
 { provide: MyService, useValue: mockMyService } // Перевизначаємо сервіс за допомогою моку  
 ]  
 })  
 .compileComponents();  
 });  

 beforeEach(() => {  
 fixture = 

… Читати далі

Тема суперечки про Angular vs React є однією з найпоширеніших в обговореннях веб-розробки.

Angular vs React

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

Ваша команда важливіша, ніж ви думаєте

Першим і найважливішим фактором є склад вашої команди та рівень її досвіду.

Фреймворки не пишуть код — це роблять люди. Експертиза, старшинство та знайомство вашої команди з Angular чи … Читати далі

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

У цій статті ми розглянемо, що таке компоненти React, їх типи та найкращі практики для їх створення.

Що таке компоненти React?

Компонент React — це, по суті, JavaScript функція або клас, який повертає частину інтерфейсу користувача. Він інкапсулює структуру, логіку та стилі частини інтерфейсу, що робить його багаторазовим і незалежним.

Основні особливості компонентів React:

• Багаторазові: Компоненти можна використовувати повторно в додатку.
• Ізольовані: Кожен

… Читати далі

Сигнали в JavaScript, уявлені DALL·E

Минуло більше десятка років від моменту випуску React, і більше 5 років з того часу, як команда React представила функціональні компоненти, що стало великим зсувом парадигми. Насправді, вони не лише замінили класи компонентів, але й надихнули на створення багатьох бібліотек, таких як SolidJS.

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

const SimpleComponent = () => {  
 const [count, setCount] = useState(0); // значення стану встановлено на 

… Читати далі