On 16th November 2016, Nat Friedman and James Montemagno introduced Visual Studio for Mac, the newest member of the Visual Studio family at Connect(); 2016 event. I thought let's give it a try so I installed the same and went through the project templates available in it. This blog is kind of a getting started guide to install Visual Studio For Mac.
I’ve been building some ASP.NET Core apps as of late and had to dig into how Dependency Injection works there. After talking with Julie Lerman a bit on Twitter about it, I realized that there might be some confusing things about how it works in ASP.NET Core, so I’m hoping I can add some clarity in this post.
I just finished teaching the first week of a 9-week, super-intensive, hands-on boot camp that focuses on TypeScript/ASP.NET Web API/AngularJS. I decided to write a series of blog posts that describes each week of the camp. Who makes it. The challenges the students encounter. And, the material that we cover
....
Becoming a software architect isn't something that simply happens overnight or with a promotion. It's a role , not a rank . It's an evolutionary process where you'll gradually gain the experience and confidence that you need to undertake the role.
<script> let src = 'https://svelte.dev/tutorial/image.gif'; let name = 'Rick Astley'; </script> <img src={src} alt="{name} dancing">
<img {src} alt="{name} dancing"> <script>
export let siteName = "dotnettips";
</script>
<p>this is a nested component for third tutorial on {siteName}</p> <script>
import Nested from "./Nested.svelte";
export let name;
</script>
<h1>Hello {name}!</h1>
<Nested siteName="dotnettips.info" /> Hello world! this is a nested component for third tutorial on dotnettips.info
در مثال بالا ما یک کامپوننت جدید را ایجاد کرده و از طریق دستور import به App.svelte اضافه کردیم. نکته‌ای که در اینجا وجود دارد، نحوه مقدار دهی props در کامپوننت‌ها است. اگر به خط 9 دقت کنیم، کامپوننت ما از طریق تگ جدیدی با نام (Nested) به بدنه html برنامه اضافه شده است که یک attribute به نام siteName دارد. siteName متغیر export شده در کامپوننت Nested.svelte است که در کامپوننت‌ها به این صورت مقدار دهی میشود. قبلا نحوه مقدار دهی این خصیصه‌ها را در فایل‌های جاوا اسکریپت مشاهده کرده بودیم. نکته دیگری که باید به آن دقت داشت این است که خصیصه siteName مقدار پیش فرض dotnettips را در Nested.svelte به خود اختصاص داده بود. به همین جهت اگر ما siteName را هنگام استفاده از کامپوننت مقدار دهی نکنیم، از مقدار پیش فرض خود استفاده خواهد کرد. ولی اینجا ما با مقدار دهی آن، siteName را به dotnettips.info تغییر داده‌ایم.
نکته مهم : دقت داشته باشید کامپوننت‌های شما همیشه باید با حروف بزرگ شروع شوند؛ به طور مثال در صورت نوشتن <nested/> محتوای کامپوننت نمایش داده نخواهد شد. svelte، از طریق زیر نظر گرفتن حروف کوچک و بزرگ در ابتدای تگ‌ها، بین تگ‌های html و کامپوننت‌ها تمایز قائل میشود.
Spread props :
تا اینجا به صورت خلاصه با props یا خصیصه‌ها آشنا شده‌اید و دیدیم که با export کردن یک متغیر در یک کامپوننت، میتوانیم آن را هنگام استفاده مقدار دهی نماییم. برای اینکه تمرینی هم باشد با توجه به مطالبی که تاکنون گفته شده، پروژه‌ی جدیدی را ایجاد کنید و محتوای App.svelte را مانند کد زیر تغییر دهید.
<script>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/> همانطور که در خط دوم کد می‌بینید، کامپوننتی به نام Info.svelte به این بخش اضافه شده‌است. این کامپوننت را با محتوای زیر ایجاد نمایید:
<script>
export let name;
export let version;
export let speed;
export let website;
</script>
<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p> اگر برنامه را اجرا کنید یک چنین خروجی را مشاهده خواهید کرد:
The svelte package is blazing fast. Download version 3 from npm and learn more here
<Info {...pkg}/>
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<p>Count : {count}</p>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button> <script>
let count = 0;
let doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p> $: doubled = count * 2;
$: console.log(`the count is ${count}`); $: {
console.log(`the count is ${count}`);
alert(`I SAID THE COUNT IS ${count}`);
} $: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
} <script>
let numbers = [1, 2, 3, 4];
function addNumber() {
let newNumber = numbers.length + 1;
numbers.push(newNumber);
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>Add a number</button> function addNumber() {
let newNumber = numbers.length + 1;
numbers.push(newNumber);
numbers = numbers;
} function addNumber() {
let newNumber = numbers.length + 1;
numbers = [...numbers, newNumber];
} <script>
let name = "";
function updateName(event) {
name = event.target.value;
}
</script>
<h4>My Name Is {name}</h4>
<input value={name} on:input={updateName} /> <script>
let name = "";
</script>
<h4>My Name Is {name}</h4>
<input bind:value={name} /> {#if condition}
<!-- you html codes ... -->
{/if} <script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}
{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if} {#if condition}
<!-- you html code when condition is true -->
{:else}
<!-- you html code when condition is false -->
{/if} {#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if} {#if condition}
<!-- you html code when condition is true -->
{:else if condition2}
<!-- you html code when condition2 is true -->
{:else}
<!-- you html code when condition and condition2 are false -->
{/if} {#each list as item}
<!-- you html code per each item in list -->
{/each} <script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{cat.name}
</a></li>
{/each}
</ul> <ul>
{#each cats as {id,name}}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{name}
</a></li>
{/each}
</ul> <ul>
{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}
</ul> 
var list = new List<int> {1,1,2,2,3,3,3,4,4,4}; var hash = new HashSet<int>(); var duplicates = list.Where(i => !hash.Add(i));
var movies = new List<Movie>
{
new Movie("Titanic", 1998, 4.5f),
new Movie("The Fifth Element", 1997, 4.6f),
new Movie("Terminator 2", 1991, 4.7f),
new Movie("Avatar", 2009, 5),
new Movie("Platoon", 1986, 4),
new Movie("My Neighbor Totoro", 1988, 5)
};
var distinctRatings = movies.DistinctBy(movie => movie.Rating);
// Output:
// Titanic,The Fifth Element,Terminator 2,Avatar,Platoon 
function definitelyNotAThunk() {
return function aThunk() {
console.log('Hello, I am a thunk.');
}
} export const getAllItems = () => ({
type: UPDATE_ALL_ITEMS,
items,
}); export const getAllItems = () => {
return dispatch => {
Api.getAll().then(items => {
dispatch({
type: UPDATE_ALL_ITEMS,
items,
});
});
};
}; > npm install --save axios redux-thunk
{
"apiUrl": "https://localhost:5001/api"
} 
import { applyMiddleware, compose, createStore } from "redux";
import thunk from "redux-thunk";
//...
const store = createStore(
reducer,
compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
//... export const GetPostsSuccess = "GetPostsSuccess"; export const GetPostsStarted = "GetPostsStarted"; export const GetPostsFailure = "GetPostsFailure";
import axios from "axios";
import { apiUrl } from "../config.json";
import * as types from "../constants/ActionTypes";
export const fetchPosts = () => {
return (dispatch, getState) => {
dispatch(getPostsStarted());
axios.get(apiUrl + "/posts").then(response => {
dispatch(getPostsSuccess(response.data)).catch(err => {
dispatch(getPostsFailure(err));
});
});
};
};
export const fetchPostsAsync = () => {
return async (dispatch, getState) => {
dispatch(getPostsStarted());
try {
const { data } = await axios.get(apiUrl + "/posts");
console.log(data);
dispatch(getPostsSuccess(data));
} catch (error) {
dispatch(getPostsFailure(error));
}
};
};
const getPostsSuccess = posts => ({
type: types.GetPostsSuccess,
payload: { posts }
});
const getPostsStarted = () => ({
type: types.GetPostsStarted
});
const getPostsFailure = error => ({
type: types.GetPostsFailure,
payload: {
error
}
}); import * as types from "../constants/ActionTypes";
const initialState = { loading: false, posts: [], error: null };
export default function postsReducer(state = initialState, action) {
switch (action.type) {
case types.GetPostsStarted:
return {
loading: true,
posts: [],
error: null
};
case types.GetPostsSuccess:
return {
loading: false,
posts: action.payload.posts,
error: null
};
case types.GetPostsFailure:
return {
loading: false,
posts: [],
error: action.payload.error
};
default:
return state;
}
} import { combineReducers } from "redux";
import counterReducer from "./counter";
import postsReducer from "./posts";
const rootReducer = combineReducers({
counterReducer,
postsReducer
});
export default rootReducer; import React from "react";
const FetchPosts = ({ fetchPostsAsync }) => {
return (
<section className="card mt-5">
<div className="card-header text-center">
<button className="btn btn-primary" onClick={fetchPostsAsync}>
Fetch Posts
</button>
</div>
</section>
);
};
export default FetchPosts; import React from "react";
import Post from "./Post";
const Posts = ({ posts, loading, error }) => {
return (
<>
<section className="card mt-5">
<div className="card-header">
<h2>Posts</h2>
</div>
<div className="card-body">
{loading ? (
<div className="alert alert-info">Loading ...</div>
) : (
<div className="list-group list-group-flush">
{posts.map(post => (
<Post key={post.id} post={post} />
))}
</div>
)}
{error && <div className="alert alert-warning">{error.message}</div>}
</div>
</section>
</>
);
};
export default Posts; import React from "react";
const Post = ({ post }) => {
return (
<article className="list-group-item">
<header>
<h2>{post.title}</h2>
</header>
<p>{post.body}</p>
</article>
);
};
export default Post; import { connect } from "react-redux";
import { fetchPostsAsync } from "../actions";
import FetchPosts from "../components/FetchPosts";
const mapDispatchToProps = {
fetchPostsAsync
};
export default connect(null, mapDispatchToProps)(FetchPosts); import { connect } from "react-redux";
import Posts from "../components/Posts";
const mapStateToProps = state => {
console.log("PostsContainer->mapStateToProps", state);
return {
...state.postsReducer
};
};
export default connect(mapStateToProps)(Posts); import "./App.css";
import React from "react";
import CounterContainer from "./containers/Counter";
import FetchPostsContainer from "./containers/FetchPosts";
import PostsContainer from "./containers/Posts";
function App() {
const prop1 = 123;
return (
<main className="container">
<div className="row">
<div className="col">
<CounterContainer prop1={prop1} />
</div>
<div className="col">
<FetchPostsContainer />
</div>
<div className="col">
<PostsContainer />
</div>
</div>
</main>
);
}
export default App;