Chapter 1: Introduction
Chapter 2: Collecting Requirements
Chapter 3: Processing Incoming E-mail
Chapter 4: Managing Requirements
Chapter 5: Supporting Discussions
Chapter 6: User Stories
Chapter 7: Project Backlog
Chapter 8: Iteration Backlog
Chapter 9: Burndown Charts
Chapter 10: Getting Organized
Chapter 11: Creating Test Cases
Chapter 12: Reporting Defects
Chapter 13: Testing Metrics
Chapter 14: Workflow Tasks
Chapter 15: State Machine Workflows
Chapter 16: Creating Custom Forms
<!DOCTYPE html> <html> <head> <title>event propagation demo</title> </head> <body> <section> <h1>nested divs</h1> <div>one <div>child of one <div>child of child of one</div> </div> </div> </section> </body> </html>
1.window 2.document 3.<html> 4.<body> 5.<section> 6.<div>one 7.<div>child of one 8.<div>child of child of one
9.<div>child of child of one 10.<div>child of one 11.<div>one 12.<section> 13.<body> 14.<html> 15.document 16.window
<div> <button type="button">do something</button> </div> <form method="POST" action="/user"> <label>Enter user name: <input name="user"> </label> <button type="submit">submit</button> </form>
// submits the form
$('FORM').trigger('submit');
// submits the form by clicking the button
$('BUTTON[type="submit"]').trigger('click');
// focuses the text input
$('INPUT').trigger('focus');
// removes focus from the text input
$('INPUT').trigger('blur'); // submits the form
$('FORM').submit();
// submits the form by clicking the button
$('BUTTON[type="submit"]').click();
// focuses the text input
$('INPUT').focus();
// removes focus from the text input
$('INPUT').blur(); // clicks the first button - the click event does not bubble
$('BUTTON[type="button"]').triggerHandler('click'); // submits the form
document.querySelector('FORM').submit();
// submits the form by clicking the button
document.querySelector('BUTTON[type="submit"]').click();
// focuses the text input
document.querySelector('INPUT').focus();
// removes focus from the text input
document.querySelector('INPUT').blur(); var clickEvent;
if (typeof Event === 'function') {
clickEvent = new Event('click', {bubbles: false});
}
else {
clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', false, true);
}
document.querySelector('BUTTON[type="button"]').dispatchEvent(clickEvent); // Triggers a custom "image-removed" element,
// which bubbles up to ancestor elements.
$libraryElement.trigger('image-removed', {id: 1}); var event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
libraryElement.dispatchEvent(event); var event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {id: 1});
libraryElement.dispatchEvent(event); var event;
// If the `CustomEvent` constructor function is not supported,
// fall back to `createEvent` method.
if (typeof CustomEvent === 'function') {
event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
}
else {
event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {
id: 1
});
}
libraryElement.dispatchEvent(event); $(window).on('resize', function() {
// react to new window size
}); // remove all resize listeners - usually a bad idea
$(window).off('resize'); var resizeHandler = function() {
// react to new window size
};
$(window).on('resize', resizeHandler);
// ...later
// remove only our resize handler
$(window).off('resize', resizeHandler); $(someElement).one('click', function() {
// handle click event
}); <button onclick="handleButtonClick()">click me</button>
buttonEl.onclick = function() {
// handle button click
}; buttonEl.addEventListener('click', function() {
// handle button click
}); window.addEventListener('resize', function() {
// react to new window size
}); var resizeHandler = function() {
// react to new window size
};
window.addEventListener('resize', resizeHandler);
// ...later
// remove only our resize handler
window.removeEventListener('resize', resizeHandler); someElement.addEventListener('click', function(event) {
// handle click event
}, { once: true }); var clickHandler = function() {
// handle click event
// ...then unregister handler
someElement.removeEventListener('click', clickHandler);
};
someElement.addEventListener('click', clickHandler); $(window).on('mousedown', function(event) {
event.preventDefault();
}); window.addEventListener('mousedown', function(event) {
event.preventDefault();
}); $someElement.on('click', function(event) {
event.stopPropagation();
}); // stop propagation during capturing phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}, true); // stop propagation during bubbling phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}); $someElement.on('click', function(event) {
event.stopImmediatePropagation();
}); someElement.addEventListener('click', function(event) {
event.stopImmediatePropagation();
}); $uploaderElement.trigger('uploadError', {
filename: 'picture.jpeg'
}); $uploaderParent.on('uploadError', function(event, data) {
showAlert('Failed to upload ' + data.filename);
}); // send the failed filename w/ an error event
var event = new CustomEvent('uploadError', {
bubbles: true,
detail: {filename: 'picture.jpeg'}
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); // send the failed filename w/ an error event
var event = document.createEvent('CustomEvent');
event.initCustomEvent('uploadError', true, true, {
filename: 'picture.jpeg'
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); $(window).on('load', function() {
// page is fully rendered
}); window.addEventListener('load', function() {
// page is fully rendered
}); $(document).ready(function() {
// markup is on the page
});
//or
$(function() {
// markup is on the page
}); document.addEventListener('DOMContentLoaded', function() {
// markup is on the page
}); $('IMG').on('load', function() {
// image has successfully loaded
});
$('IMG').on('error', function() {
// image has failed to load
}); document.querySelector('IMG').addEventListener('load', function() {
// image has successfully loaded
});
document.querySelector('IMG').addEventListener('error', function() {
// image has failed to load
}); $(window).on('beforeunload', function() {
return 'Are you sure you want to unload the page?';
}); window.addEventListener('beforeunload', function(event) {
var message = 'Are you sure you want to unload the page?';
event.returnValue = message;
return message;
}); طراحی Url در Restful API
Url بخش اصلی و راه ارتباطی API شما با توسعه دهنده است .بنابراین طراحی یک ساختار مناسب و یکپارچه برای Url ها دارای اهمیت زیادی است .
Url پایه API خود را ساده و خوانا ، حفظ کنید . داشتن یک Url پایه ساده استفاده از API را آسان کرده و خوانایی آن را بالا میبرد و باعث می‌شود که توسعه دهنده برای استفاده از آن نیاز کمتری به مراجعه به مستندات داشته باشد. پیشنهاد می‌شود که برای هر منبع تنها دو Url پایه وجود داشته باشد . یکی برای مجموعه ای از منبع موردنظر و دیگری برای یک واحد مشخص از آن منبع . برای مثال اگر منبع موردنظر ما کتاب باشد ، خواهیم داشت :
.../books
.../books/1001
استفاده از این روش یک مزیت دیگر هم به همراه دارد و آن دور کردن افعال از Urlها است.
بسیاری در زمان طراحی Urlها و در نامگذاری از فعل‌ها استفاده می‌کنند. برای هر منبعی که مدلسازی میکنید هیچ وقت نمی‌توانید آن را به تنهایی و جداافتاده در نظر بگیرید. بلکه همیشه منابع مرتبطی وجود دارند که باید در نظر گرفته شوند. در مثال کتاب می‌توان منابعی مثل نویسنده ، ناشر ، موضوع و ... را بیان کرد. حالا سعی کنید به تمام Url هایی که برای پوشش دادن تمام درخواست‌های مربوط به منبع کتاب نیاز داریم فکر کنید . احتمالا به چیزی شبیه این می‌رسیم :
.../getAllBooks .../getBook .../newBook .../getNewBooksSince .../getComputerBooks .../BooksNotPublished .../UpdateBookPriceTo .../bookForPublisher .../GetLastBooks .../DeleteBook ….
1- از افعال Http برای کار کردن بر روی منابع استفاده کنید . با استفاده از افعال Http شامل POST ، GET ، PUT و DELETE و دو Url اصلی ، یک مجموعه‌ی مناسب از عملیات‌ها در دسترس توسعه دهنده خواهد بود . به جدول زیر نگاه کنید .
توسعه دهندگان احتمالا نیازی به این جدول برای درک اینکه API چطور کار میکند نخواهند داشت.
2- با استفاده از نکته قبلی بخشی از Urlهای بالا حذف خواهند شد. اما هنوز با روابط بین منابع چکار کنیم؟ منابع تقریبا همیشه دارای روابطی با دیگر منابع هستند . یک روش ساده برای بیان این روابط در API چیست ؟ به مثال کتاب برمیگردیم. کتابها دارای نویسنده هستند. اگر بخواهیم کتابهای یک نویسنده را برگردانیم چه باید بکنیم؟ با استفاده از Urlهای پایه و افعال Http می‌توان اینکار را انجام داد. یکی از ساختارهای ممکن این است :
GET .../authors/1001/books
POST .../authors/1001/books
3- بیشتر APIها دارای پیچیدگی‌های بیشتری نسبت به Url اصلی یک منبع هستند . هر منبع مشخصات
و روابط متنوعی دارد که قابل جستجو کردن، مرتب سازی، بروزرسانی و تغییر هستند. Url
اصلی را ساده نگه دارید و این پیچیدگی‌ها را به کوئری استرینگ منتقل کنید.
برای برگرداندن تمام کتابهای با قیمت پنچ هزار تومان با قطع جیبی که دارای امتیاز 8 به بالا هستند از کوئری زیر می‌شود استفاده کرد :
GET .../books?price=5000&size=pocket&score=8
و البته فراموش نکنید که لیستی از فیلدهای مجاز را در مستندات خود ارائه کنید.
4 - گفتیم که بهتر است افعال را از Url ها خارج کنیم . ولی در مواردی که درخواست ارسال شده در مورد یک منبع نیست چطور؟ مواردی مثل محاسبه مالیات پرداختی یا هزینه بیمه ، جستجو در کل منابع ، ترجمه یک عبارت یا تبدیل واحدها . هیچکدام از اینها ارتباطی با یک منبع خاص ندارند. در این موارد بهتر است از افعال استفاده شود. و حتما در مستندات خود ذکر کنید که در این موارد از افعال استفاده می‌شود..../convert?value=25&from=px&to=em .../translate?term=web&from=en&to=fa
5 - استفاده از اسامی جمع یا مفرد
با توجه به ساختاری که تا اینجا طراحی کرده ایم بکاربردن اسامی جمع بامعناتر و خواناتر است. اما مهمتر از روشی که بکار می‌برید ، اجتناب از بکاربردن هر دو روش با هم است ، اینکه در مورد یک منبع از اسم منفرد و در مورد دیگری از اسم جمع استفاده کنید . یکدستی API را حفظ کنید و به توسعه دهنده کمک کنید راحت‌تر API شما را یاد بگیرد.
6- استفاده از نام‌های عینی به جای نام‌های کلی و انتزاعیAPI ی را در نظر بگیرید که محتواهایی را در فرمت‌های مختلف ارائه میدهد. بلاگ ، ویدئو ، اخبار و .... حالا فرض کنیداین API منابع را در بالاتری سطح مدسازی کرده باشد مثل /items یا /assets . درک کردن محتوای این API و کاری که می‌توان با این API انجام داد برای توسعه دهنده سخت است . خیلی راحت‌تر و مفیدتر است که منابع را در قالب بلاگ ، اخبار ، ویدئو مدلسازی کنیم .
├── _layout │ ├── _footer.html │ ├── _header.html │ ├── _nav.html │ └── main.html ├── build ├── img ├── posts └── set-posts.ps1
<!--main.html-->
<!DOCTYPE html>
<html dir="rtl">
{{header}}
<body>
{{nav}}
<main>
{{content}}
</main>
{{footer}}
</body>
<!--_header.html-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/samim-font@v4.0.5/dist/font-face.css" rel="stylesheet"
type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
<style>
* {
}
</style>
</head>
<!--_nav.html-->
<header>
<nav>
<div>
<div>
<a href="#">بلاگ من</a>
</div>
<div>
<ul>
{{nav}}
</ul>
</div>
</div>
</nav>
</header>
<!--_footer.html-->
<footer>
<div>
<div>
<p>
تمامی حقوق محفوظ است
</p>
</div>
</div>
</footer> --- title: اولین پست من slug: hello date: 2023-04-26 author: سیروان عفیفی tags: [tag1, tag2, tag3] excerpt: این یک پست تستی است در مورد اینکه چطور میتوانیم از این قالب استفاده کنیم --- # اولین پست من ## اولین پست من ### اولین پست من #### اولین پست من ##### اولین پست من ###### اولین پست من لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می‌طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. <img src="/img/graphql.jpg"/>
Function Get-Layouts {
$headerLayout = Get-Content -Path ./_layout/_header.html -Raw
$homeLayout = Get-Content -Path ./_layout/main.html -Raw
$footerLayout = Get-Content -Path ./_layout/_footer.html -Raw
Return @{
Header = $headerLayout
Home = $homeLayout
Footer = $footerLayout
}
}
Function Get-PostFrontMatter($postContent) {
$frontMatter = [regex]::Match($postContent, "(---(?:\r?\n(?!--|\s*$).*)*)\s*((?:\r?\n(?!---).*)*\r?\n---)")
Return $frontMatter
}
Function Set-Headings($postHtml) {
Return $postHtml -Replace '<h(\d) id="(.*)">', {
$level = $_.Groups[1].Value
$id = $_.Groups[2].Value
$class = Switch ($level) {
'1' { 'text-4xl font-bold mb-2' }
'2' { 'text-3xl font-bold mb-2' }
'3' { 'text-2xl font-bold mb-2' }
'4' { 'text-xl font-bold mb-2' }
'5' { 'text-lg font-bold mb-2' }
'6' { 'text-base font-bold mb-2' }
}
"<h$level class='$class' id='$id'>"
}
}
Function ConvertTo-Slug {
[CmdletBinding()]
param(
[Parameter(Mandatory = $true, ValueFromPipeline = $true)]
[string]$String
)
process {
$slug = $String -replace '[^\w\s-]', '' # remove non-word characters except hyphens
$slug = $slug -replace '\s+', '-' # replace whitespace with a single hyphen
$slug = $slug -replace '^-+|-+$', '' # remove leading/trailing hyphens
$slug = $slug.ToLower() # convert to lowercase
Write-Output $slug
}
}
Function Get-Posts {
$markdownPosts = Get-ChildItem -Path ./posts -Filter *.md
$posts = @()
Foreach ($post in $markdownPosts) {
$postContent = Get-Content -Path $post.FullName -Raw
$frontMatter = Get-PostFrontMatter $postContent
$frontMatterObject = $frontMatter | ConvertFrom-Yaml
$slug = $frontMatterObject.slug ?? (ConvertTo-Slug "$($frontMatterObject.date)-$($frontMatterObject.title)")
$body = $postContent.Replace($frontMatter.Value, "") | ConvertFrom-Markdown
$postHtml = $layouts.Home -replace '{{header}}', $layouts.Header `
-replace '{{title}}', $frontMatterObject.title `
-replace '{{nav}}', (Set-Navs) `
-replace '{{content}}', $body.Html `
-replace '{{footer}}', $layouts.Footer
$postHtml = Set-Headings $postHtml
$postHtml | Out-File -FilePath ./build/$slug.html
$posts += @{
title = $frontMatterObject.title
slug = $slug
excerpt = $frontMatterObject.excerpt
date = $frontMatterObject.date
author = $frontMatterObject.author
body = $body.Html
}
}
Return $posts
}
Function Set-Archive {
$posts = Get-Posts
$archive = @()
$archive = @"
<ul>
$($posts | ForEach-Object { "<li><a href='$($_.slug).html'>$($_.title)</a></li>" })
</ul>
"@
Return $archive -join "`r`n"
}
Function Copy-ToBuild {
$layouts = Get-Layouts
$latestPosts = Get-Posts | ForEach-Object { @"
<div>
<img src="https://via.placeholder.com/300x200" alt="$($_.title)">
<h2>$($_.title)</h2>
<p>$($_.excerpt)</p>
<a href="$($_.slug).html">ادامه مطلب</a>
</div>
"@
}
$homeLayout = $layouts.Home -replace '{{header}}', $layouts.Header `
-replace '{{nav}}', (Set-Navs) `
-replace '{{title}}', 'بلاگ من' `
-replace '{{content}}', ('<div>' + $latestPosts + '</div>') `
-replace '{{footer}}', $layouts.Footer
$homeLayout | Out-File -FilePath ./build/index.html
Copy-Item -Path ./img -Destination ./build -Recurse -Force
}
Function Set-Navs {
$navs = @(
@{
title = "صفحه اصلی"
url = "/sample"
},
@{
title = "درباره ما"
url = "/sample/about.html"
},
@{
title = "تماس با ما"
url = "/sample/contact.html"
}
)
$navLayout = Get-Content -Path ./_layout/_nav.html -Raw
$navLayout -replace '{{nav}}', ($navs | ForEach-Object { "<li><a href=""$($_.url)""text-gray-700 hover:text-gray-800 m-2"">$($_.title)</a></li>" })
}
Copy-ToBuild name: Deploy static content to Pages
on:
push:
branches:
- main
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v2
- name: Install powershell-yaml module
shell: pwsh
run: |
Set-PSRepository PSGallery -InstallationPolicy Trusted
Install-Module powershell-yaml -ErrorAction Stop
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Build Static Site
shell: pwsh
run: |
. ./set-posts.ps1
- name: Upload Static Site Artifact
uses: actions/upload-pages-artifact@v1
with:
path: build
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2 --- title: اولین پست من slug: hello date: 2023-04-26 author: سیروان عفیفی tags: [tag1, tag2, tag3] excerpt: این یک پست تستی است در مورد اینکه چطور میتوانیم از این قالب استفاده کنیم --- content
کدهای این مطلب را میتوانید از اینجا دریافت کنید.