AngularJS is one of the most preferred framework for the web developers who aspire to design a web app in a dynamic manner. In case, if your developers are going to start a project on AngularJS , they may be in need of numerous tools to develop your website in a full-fledged manner. - See more at: http://www.valuecoders.com/blog/technology-and-apps/top-20-angularjs-developer-tools/#sthash.0yLW201H.dpuf
دوستان، همکاران سیستم یک وبینار رایگان در مورد Web Components برگزار می‌کند که من ارائه می‌کنم 🙂. اگر علاقه‌مند بودید ثبت نام کنید.
@implements IDisposable
<EditForm EditContext="@_editContext" OnValidSubmit="submit">
<button type="submit" disabled="@_isInvalidForm">Submit</button>
</EditForm>
@code
{
private User _userModel = new User();
private EditContext _editContext;
private bool _isInvalidForm = true;
protected override void OnInitialized()
{
_editContext = new EditContext(_userModel);
_editContext.OnFieldChanged += HandleFieldChanged;
}
private void submit()
{
if(_editContext.Validate())
{
}
}
private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
{
_isInvalidForm = !_editContext.Validate();
StateHasChanged();
}
public void Dispose()
{
_editContext.OnFieldChanged -= HandleFieldChanged;
}
} var isValid = !_editContext.GetValidationMessages(fieldIdentifier).Any();
عموما برای درج فایل‌های ثابت اسکریپت‌ها و شیوه‌نامه‌های سایت، از روش متداول زیر استفاده می‌شود:
<link rel="stylesheet" href="/css/site.css" /> <script src="/js/site.js"></script>
مشکلی که به همراه این روش وجود دارد، مطلع سازی کاربران و مرورگر، از تغییرات آن‌هاست؛ چون این فایل‌های ثابت، توسط مرورگرها کش شده و با فشردن دکمه‌هایی مانند Ctrl+F5 و به‌روز شدن کش مرورگر، به نگارش جدید، ارتقاء پیدا می‌کنند. برای رفع این مشکل حداقل دو روش وجود دارد:
الف) هربار نام این فایل‌ها را تغییر دهیم. برای مثال بجای نام قدیمی site.css، از نام جدید site.v.1.1.css استفاده کنیم.
ب) یک کوئری استرینگ متغیر را به نام ثابت این فایل‌ها، اضافه کنیم.
که در این بین، روش دوم متداول‌تر و معقول‌تر است. برای این منظور، ASP.NET Core به همراه ویژگی توکاری است به نام asp-append-version که اگر آنرا به تگ‌های اسکریپت و link اضافه کنیم:
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <script src="~/js/site.js" asp-append-version="true"></script>
این کوئری استرینگ را به صورت خودکار محاسبه کرده و به آدرس فایل درج شده اضافه می‌کند؛ با خروجی‌هایی شبیه به مثال زیر:
<link rel="stylesheet" href="/css/site.css?v=AAs5qCYR2ja7e8QIduN1jQ8eMcls-cPxNYUozN3TJE0" /> <script src="/js/site.js?v=NO2z9yI9csNxHrDHIeTBBfyARw3PX_xnFa0bz3RgnE4"></script>
ASP.NET Core در اینجا هش فایل‌های یافت شده را با استفاده از الگوریتم SHA256 محاسبه و url encode کرده و به صورت یک کوئری استرینگ، به انتهای آدرس فایل‌ها اضافه می‌کند. به این ترتیب با تغییر محتوای این فایل‌ها، این هش نیز تغییر می‌کند و مرورگر بر این اساس، همواره آخرین نگارش ارائه شده را از سرور دریافت خواهد کرد. نتیجه‌ی این محاسبات نیز به صورت خودکار کش می‌شود و همچنین با استفاده از یک File Watcher در پشت صحنه، تغییرات این فایل‌ها هم بررسی می‌شوند. یعنی اگر فایلی تغییر کرد، نیازی به ری‌استارت برنامه نیست و محاسبات جدید و کش شدن مجدد آن‌ها، به صورت خودکار انجام می‌شود.
البته این ویژگی هنوز به Blazor اضافه نشده‌است؛ اما امکان استفاده‌ی از زیر ساخت ویژگی asp-append-version با کدنویسی مهیا است که در ادامه با استفاده از آن، کامپوننتی را مخصوص Blazor SSR، تهیه می‌کنیم.
دسترسی به زیر ساخت محاسباتی ویژگی asp-append-version با کدنویسی
زیرساخت محاسباتی ویژگی asp-append-version، با استفاده از سرویس توکار IFileVersionProvider به صورت زیر قابل دسترسی است:
public static class FileVersionHashProvider
{
private static readonly string ProcessExecutableModuleVersionId =
Assembly.GetEntryAssembly()!.ManifestModule.ModuleVersionId.ToString("N");
public static string GetFileVersionedPath(this HttpContext httpContext, string filePath, string? defaultHash = null)
{
ArgumentNullException.ThrowIfNull(httpContext);
var fileVersionedPath = httpContext.RequestServices.GetRequiredService<IFileVersionProvider>()
.AddFileVersionToPath(httpContext.Request.PathBase, filePath);
return IsEmbeddedOrNotFound(fileVersionedPath, filePath)
? QueryHelpers.AddQueryString(filePath, new Dictionary<string, string?>(StringComparer.Ordinal)
{
{
"v", defaultHash ?? ProcessExecutableModuleVersionId
}
})
: fileVersionedPath;
}
private static bool IsEmbeddedOrNotFound(string fileVersionedPath, string filePath)
=> string.Equals(fileVersionedPath, filePath, StringComparison.Ordinal);
}
در برنامه‌های Blazor SSR، دسترسی کاملی به HttpContext وجود دارد و همانطور که مشاهده می‌کنید، این سرویس نیز به اطلاعات آن جهت محاسبه‌ی هش فایل معرفی شده‌ی به آن، نیاز دارد. در اینجا اگر هش قابل محاسبه نبود، از هش فایل اسمبلی جاری استفاده خواهد شد.
ساخت کامپوننت‌هایی برای درج خودکار هش فایل‌های اسکریپت‌ها
یک نمونه روش استفاده‌ی از متد الحاقی GetFileVersionedPath فوق را در کامپوننت DntFileVersionedJavaScriptSource.razor زیر می‌توانید مشاهده کنید:
@if (!string.IsNullOrWhiteSpace(JsFilePath))
{
<script src="@HttpContext.GetFileVersionedPath(JsFilePath)" type="text/javascript"></script>
}
@code{
[CascadingParameter] public HttpContext HttpContext { set; get; } = null!;
[Parameter]
[EditorRequired]
public required string JsFilePath { set; get; }
}
با استفاده از HttpContext مهیای در برنامه‌های Blazor SSR، متد الحاقی GetFileVersionedPath به همراه مسیر فایل js. مدنظر، در صفحه درج می‌شود.
برای مثال یک نمونه از استفاده‌ی آن، به صورت زیر است:
<DntFileVersionedJavaScriptSource JsFilePath="/lib/quill/dist/quill.js"/>
در نهایت با اینکار، یک چنین خروجی در صفحه درج خواهد شد که با تغییر محتوای فایل quill.js، هش متناظر با آن به صورت خودکار به‌روز خواهد شد:
<scriptsrc="/lib/quill/dist/quill.js?v=5q7uUOOlr88Io5YhQk3lgYcoB_P3-5Awq1lf0rRa7-Y" type="text/javascript"></script>
شبیه به همین کار را برای شیوه‌نامه‌ها هم می‌توان تکرار کرد و کدهای آن، تفاوت آنچنانی با کامپوننت فوق ندارند.
We help developers build and deploy cross-platform apps. From open source to premium services, Ionic makes app creation lightning fast.
Threads App UI Design in Figma step by step UI/UX Design + Link
Designing a great app that offers a seamless user experience can be a challenging task, especially when you have numerous components to manage. Figma, a collaborative interface design tool, has become a popular choice for UI/UX designers. In this article, we'll explore the process of designing Threads, a messaging app, from scratch in Figma. We'll walk you through the complete UI/UX design process, including wireframing, prototyping, and design system creation.
ایجاد ساختار ابتدایی پروژه
برای ساخت پروژه، به خط فرمان مراجعه کرده و با دستور زیر، یک پروژه‌ی react از نوع typescript را ایجاد می‌کنیم.
npx create-react-app todo-mobx --template typescript cd todo-mobx
برای توسعه‌ی این مثال، از محیط توسعه‌ی VSCode استفاده می‌کنیم. اگر VSCode بر روی سیستم شما نصب باشد، در همان مسیری که خط فرمان باز است، دستور زیر را اجرا کنید؛ پروژه‌ی شما در VSCode باز می‌شود:
code
سپس در محیط VSCode، دکمه‌های ctrl+` را فشرده (ctrl+back-tick) و دستورات زیر را در ترمینال ظاهر شده وارد کنید:
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest npm install mobx mobx-react-lite --save
در ادامه برای استایل بندی بهتر برنامه از کتابخانه‌های bootstrap و font-awesome استفاده می‌کنیم:
npm install bootstrap --save npm install font-awesome --save
سپس فایل index.tsx را باز کرده و دو خط زیر را به آن اضافه می‌کنیم:
import "bootstrap/dist/css/bootstrap.css"; import "font-awesome/css/font-awesome.css";
کتابخانه‌ی MobX، از تزئین کننده‌ها یا decorators استفاده می‌کند. بنابراین نیاز است به tsconfig پروژه مراجعه کرده و خط زیر را به آن اضافه کنیم:
"compilerOptions": {
.... ,
"experimentalDecorators": true
}
ایجاد مخازن حالت MobX
در ادامه نیاز است storeهای MobX را ایجاد کنیم و بعد آن‌ها را به react اتصال دهیم. بدین منظور یک پوشه‌ی جدید را در مسیر src، به نام stores ایجاد می‌کنیم و سپس فایل جدیدی را به نام todo-item.ts در آن با محتوای زیر ایجاد می‌کنیم:
import { observable, action } from "mobx";
export default class TodoItem {
id = Date.now();
@observable text: string = '';
@observable isDone: boolean = false;
constructor(text: string) {
this.text = text;
}
@action
toggleIsDone = () => {
this.isDone = !this.isDone
}
@action
updateText = (text: string) => {
this.text = text;
}
}
در همان مسیر stores، فایل دیگری را نیز به نام todo-list.ts، با محتوای زیر ایجاد می‌کنیم:
import { observable, computed, action } from "mobx";
import TodoItem from "./todo-item";
export class TodoList {
@observable.shallow list: TodoItem[] = [];
constructor(todos: string[]) {
todos.forEach(this.addTodo);
}
@action
addTodo = (text: string) => {
this.list.push(new TodoItem(text));
}
@action
removeTodo = (todo: TodoItem) => {
this.list.splice(this.list.indexOf(todo), 1);
};
@computed
get finishedTodos(): TodoItem[] {
return this.list.filter(todo => todo.isDone);
}
@computed
get openTodos(): TodoItem[] {
return this.list.filter(todo => !todo.isDone);
}
} توضیحات:
مفهوم observable@: کل شیء state را به صورت یک شیء قابل ردیابی JavaScript ای ارائه می‌کند.
مفهوم computed@: این نوع خواص، مقدار خود را زمانیکه observableهای وابسته‌ی به آن‌ها تغییر کنند، به روز رسانی می‌کنند.
مفهوم action@: جهت به روز رسانی state و سپس نمایش تغییرات یا نمایش نمونه‌ی دیگری در DOM می‌باشند.
import { createContext, useContext } from "react";
import { TodoList } from "../stores/todo-list";
export const StoreContext = createContext<TodoList>({} as TodoList);
export const StoreProvider = StoreContext.Provider;
export const useStore = (): TodoList => useContext(StoreContext); import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import { TodoList } from './stores/todo-list';
import { StoreProvider } from './providers/store-provider';
const todoList = new TodoList([
'Read Book',
'Do exercise',
'Watch Walking dead series'
]);
ReactDOM.render(
<StoreProvider value={todoList}>
<App />
</StoreProvider>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister(); import React, { useState } from 'react';
import { useStore } from '../providers/store-provider';
export const TodoNew = () => {
const [newTodo, setTodo] = useState('');
const todoList = useStore();
const addTodo = () => {
todoList.addTodo(newTodo);
setTodo('');
};
return (
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="Add To do" value={newTodo} onChange={(e) => setTodo(e.target.value)} />
<div className="input-group-append">
<button className="btn btn-success" type="submit" onClick={addTodo}>Add Todo</button>
</div>
</div>
)
}; import React from 'react';
import { TodoItem } from "./TodoItem";
import { useObserver } from "mobx-react-lite";
import { useStore } from '../providers/store-provider';
export const TodoList = () => {
const todoList = useStore();
return useObserver(() => (
<div>
<h1>Open Todos</h1>
<table className="table">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th className="text-left">Do It?</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
todoList.openTodos.map(todo =>
<tr key={`${todo.id}-${todo.text}`}>
<TodoItem todo={todo} />
</tr>)
}
</tbody>
</table>
<h1>Finished Todos</h1>
<table className="table">
<thead className="thead-light">
<tr>
<th>Name</th>
<th className="text-left">Do It?</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
todoList.finishedTodos.map(todo =>
<tr key={`${todo.id}-${todo.text}`}>
<TodoItem todo={todo} />
</tr>)
}
</tbody>
</table>
</div>
));
}; import React, { useState } from 'react';
import TodoItemClass from "../stores/todo-item";
import { useStore } from '../providers/store-provider';
interface Props {
todo: TodoItemClass;
}
export const TodoItem = ({ todo }: Props) => {
const todoList = useStore();
const [newText, setText] = useState('');
const [isEditing, setEdit] = useState(false);
const saveText = () => {
todo.updateText(newText);
setEdit(false);
setText('');
};
return (
<React.Fragment>
{
isEditing ?
<React.Fragment>
<td>
<input className="form-control" placeholder={todo.text} type="text" onChange={(e) => setText(e.target.value)} />
</td>
<td></td>
<td>
<button className="btn btn-xs btn-success " onClick={saveText}>Save</button>
</td>
</React.Fragment>
:
<React.Fragment>
<td>
{todo.text}
</td>
<td className="text-left">
<input className="form-check-input" type="checkbox" onChange={todo.toggleIsDone} defaultChecked={todo.isDone}></input>
</td>
<td>
<button className="btn btn-xs btn-warning " onClick={() => setEdit(true)}>
<i className="fa fa-edit"></i>
</button>
<button className="btn btn-xs btn-danger ml-2" onClick={() => todoList.removeTodo(todo)}>
<i className="fa fa-remove"></i>
</button>
</td>
</React.Fragment>
}
</React.Fragment>
)
}; ASP.NET Core in .NET 8 is your complete solution for modern web development. It handles all of your web development needs from the frontend to the backend. You can build beautiful, richly interactive web experiences with Blazor, and high-performance backend APIs and services that are reliable and secure. ASP.NET Core in .NET 8 is perfect for building cloud-native apps, and great tooling in Visual Studio and Visual Studio Code supercharges your productivity. With ASP.NET Core in .NET 8, every developer is a full stack developer!
