Drag and drop so simple it hurts Demo
Framework support includes vanilla JavaScript, Angular, and React.
dragula (demo) dragula (demo) dragula (demo) 
. Today, we’re thrilled to share that we’re continuing the Angular Momentum with the biggest release since the initial rollout of Angular; making large leaps in reactivity, server-side rendering, and tooling.
Welcome to this short introduction to Blazor! This new Microsoft framework uses a unique approach to leverage your existing C# and .NET skills to create single-page applications running in web browsers. The technology that makes this possible is called WebAssembly, an open standard supported directly by current browsers on desktop and mobile platforms. You write C# and Razor code instead of JavaScript, and the compiled app runs natively on the client.
Sample Source Code: https://github.com/DevExpress/blazor-training-samples
<li>Item 1</li> <li>Item 2</li>
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
<li>Item 0</li> // <= New item <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
<li key={0}>Item 0</li> // <= New item
<li key={1}>Item 1</li>
<li key={2}>Item 2</li>
<li key={3}>Item 3</li> @page "/"
<button class="btn btn-primary" @onclick="addPerson">Add Person</button>
<ul class="mt-5">
@foreach (var person in People)
{
<li>@person.Id, @person.Name</li>
}
</ul>
@code{
List<Person> People = new()
{
new() { Id = 1, Name = "User 1" },
new() { Id = 2, Name = "User 2" },
};
int LastId = 2;
void addPerson()
{
People.Insert(0, new() { Id = ++LastId, Name = $"User {LastId}" });
}
class Person
{
public int Id { set; get; }
public string Name { set; get; }
}
} 
<ul class="mt-5">
@foreach (var person in People)
{
<li @key="person.Id">@person.Id, @person.Name</li>
}
</ul> 
import React, { Component } from 'react';
import {useParams,useNavigate,useLocation} from 'react-router-dom';
import { useEffect } from 'react';
const TestRoute=(props)=>{
const navigate=useNavigate();
const location=useLocation()
const params=useParams();
const {id,name}=useParams();
useEffect(()=>{
console.log(location.search);
},[])
const gotosfc=()=>{
navigate("/sfc",{replace:true});
}
return(
<>
<strong>Id :</strong> {id}
<br/>
<strong>Name :</strong> {name}
<br/>
<button onClick={()=>gotosfc()}>Go to SFC</button>
</>
)
}
export default TestRoute; <Route path="/product/edit/:id/:name" element={<TestRoute />} /> <Route path="/product/edit/:id" element={<TestRoute />} />
<Route path="/product/edit/:id/:name" element={<TestRoute />} /> Apple vs. Google company structure, as seen through patents
let names = ["Jack", "Jecci", "Ram", "Tom"];
let upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
upperCaseNames = names[i].toUpperCase();
} let names = ["Jack", "Jecci", "Ram", "Tom"]; let upperCaseNames = names.map(name => name.toUpperCase());
function print(name) {
console.log(name);
}
let names = ["Jack", "Jecci", "Ram", "Tom"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
print(names[i])
} function print(name) {
console.log(name);
}
let names = ["Jack", "Jecci", "Ram", "Tom"];
names.forEach(name=> print(name));
// اگر صرفا چاپ در کنسول مد نظر هست
let names = ["Jack", "Jecci", "Ram", "Tom"];
names.forEach(name=> console.log(name)); function isOdd(n) {
return n %2;
}
let numbers = [1,2,3,4,5];
let odd = [];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
let number = numbers[i];
if( isOdd(number) ) {
odd.push(number);
}
} let numbers = [1,2,3,4,5, 6, 7] let odd = numbers.filter(n => n%2);
let numbers = [1,2,3,4,5]
let result = 0;
for(let i=0, total = numbers.length; i< total ; i= i +1) {
result = result + numbers[i];
} let numbers = [1,2,3,4,5,6,7];
function sum(accumulator, currentValue){
return accumulator + currentValue;
}
let initialVal = 0;
let result = numbers.reduce(sum, initialVal);
// یا بصورت زیر کد را خلاصه نمود
let numbers = [1,2,3,4,5,6,7, 10];
let result = numbers.reduce((acc, val)=> acc+val, 0); let names = ["ram",, "rahul", "raj", "rahul"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
if(names[i] === "rahul") {
console.log(" found rahul");
break;
}
} let names = ["ram",, "rahul", "raj", "rahul"];
let isRahulPresent = names.some(name => name==="rahul");
if(isRahulPresent) {
console.log("found rahul");
} let numbers = [1,2,3,4,5, 0];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
if(numbers[i] <= 0) {
console.log("0 present in array");
break;
}
} let numbers = [1,2,3,4,5,0];
let isZeroFree = numbers.every(e => e > 0);
if(!isZeroFree) {
console.log("0 present in array");
} A few weeks ago I created this Git Cheat Sheet as a reference for commands I use at least once a month. I've found it useful and I'm sharing it so others find it useful too. There are also markdown and org-mode versions available.
WebAssembly is moving beyond the browser and is pitched to become a foundational element of modern cloud-native architecture. It lets any language compile to universal binaries that run on any OS or processor, robustly sandboxed and with great performance. This session covers a new approach to running .NET in WASI environments. You’ll see how your existing .NET code could be built into WASI-compliant modules, plus the opportunities this opens. This is experimental, not yet a committed product.
