Along with NativeScript 3.4 we also released a new version of the nativescript-angular plugin with official support for Angular 5. The update includes support for Angular’s new AnimationBuilder APIs, as well as some iOS-specific startup time improvements. You can learn more about these changes in the nativescript-angular changelog.
As you may remember, Microsoft has removed the IE Mode feature from Microsoft Edge. THe company has limited it to enterprise customers and IT admins. They have also stated that the feature was released to the public for testing purposes only. Here is a bit of good news - you can re-enable IE Mode when needed with recent versions of Edge!
Microsoft is planning to make Windows 10 PCs work without passwords. While the company has been working on removing passwords from Windows 10 and its Microsoft Accounts for a number of months now, the next major update to Windows 10 next year will go one step further.
C:\Users\Vahid>dotnet new --list Templates Short Name Language Tags -------------------------------------------- ------------------- ------------ ---------------------- Blazor Server App blazorserver [C#] Web/Blazor Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly
<button
onClick={this.handleReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button> handleReset = () => {
const counters = this.state.counters.map(counter => {
counter.value = 0;
return counter;
});
this.setState({ counters }); // = this.setState({ counters: counters });
}; 
class Counter extends Component {
state = {
count: this.props.counter.value
}; handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
}; <button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-sm"
>
Increment
</button> getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.props.counter.value === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
const { value } = this.props.counter; // Object Destructuring
return value === 0 ? "Zero" : value;
} handleIncrement = counter => {
console.log("handleIncrement", counter);
}; <Counter
key={counter.id}
counter={counter}
onDelete={this.handleDelete}
onIncrement={this.handleIncrement}
/> handleIncrement = counter => {
console.log("handleIncrement", counter);
const counters = [...this.state.counters]; // cloning an array
const index = counters.indexOf(counter);
counters[index] = { ...counter }; // cloning an object
counters[index].value++;
console.log("this.state.counters", this.state.counters[index]);
this.setState({ counters });
}; 
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root")); import React, { Component } from "react";
class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar
</a>
</nav>
);
}
}
export default NavBar; import "./App.css";
import React from "react";
import Counters from "./components/counters";
import NavBar from "./components/navbar";
function App() {
return (
<React.Fragment>
<NavBar />
<main className="container">
<Counters />
</main>
</React.Fragment>
);
}
export default App; 
render() {
return (
<React.Fragment>
<NavBar />
<main className="container">
<Counters
counters={this.state.counters}
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDelete={this.handleDelete}
/>
</main>
</React.Fragment>
);
} render() {
return (
<div>
<button
onClick={this.props.onReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button>
{this.props.counters.map(counter => (
<Counter
key={counter.id}
counter={counter}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
/>
))}
</div>
);
} <NavBar
totalCounters={this.state.counters.filter(c => c.value > 0).length}
/> class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-pill badge-secondary">
{this.props.totalCounters}
</span>
</a>
</nav>
);
}
} 
import React from "react";
// Stateless Functional Component
const NavBar = props => {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-pill badge-secondary">
{props.totalCounters}
</span>
</a>
</nav>
);
};
export default NavBar; const NavBar = ({ totalCounters }) => { 
export function getLocalJwt(){
return localStorage.getItem(tokenKey);
} import * as auth from "./authService"; axios.defaults.headers.common["Authorization"] = "Bearer " + auth.getLocalJwt();
Uncaught ReferenceError: Cannot access 'tokenKey' before initialization
function setJwt(jwt) {
axios.defaults.headers.common["Authorization"] = "Bearer " + jwt;
}
//...
export default {
// ...
setJwt
}; http.setJwt(getLocalJwt());
function checkExpirationDate(user) {
if (!user || !user.exp) {
throw new Error("This access token doesn't have an expiration date!");
}
user.expirationDateUtc = new Date(0); // The 0 sets the date to the epoch
user.expirationDateUtc.setUTCSeconds(user.exp);
const isAccessTokenTokenExpired =
user.expirationDateUtc.valueOf() < new Date().valueOf();
if (isAccessTokenTokenExpired) {
throw new Error("This access token is expired!");
}
} 
if (user.IsAdmin)
{
claims.Add(new Claim(ClaimTypes.Role, CustomRoles.Admin, ClaimValueTypes.String, _configuration.Value.Issuer));
} {
// ...
"http://schemas.microsoft.com/ws/2008/06/identity/claims/role": "Admin",
// ...
} public class User : BaseModel
{
[Required, MinLength(2), MaxLength(50)]
public string Name { set; get; }
[Required, MinLength(5), MaxLength(255)]
public string Email { set; get; }
[Required, MinLength(5), MaxLength(1024)]
public string Password { set; get; }
public bool IsAdmin { set; get; }
} [HttpPost]
public ActionResult<User> Create(
[FromBody]
[Bind(nameof(Models.User.Name), nameof(Models.User.Email), nameof(Models.User.Password))]
User data)
{ <NavBar user={this.state.currentUser} /> <Route
path="/movies"
render={props => <Movies {...props} user={this.state.currentUser} />}
/> class Movies extends Component {
// ...
render() {
const { user } = this.props;
// ... {user && (
<Link
to="/movies/new"
className="btn btn-primary"
style={{ marginBottom: 20 }}
>
New Movie
</Link>
)} 
{
// ...
"http://schemas.microsoft.com/ws/2008/06/identity/claims/role": "Admin",
// ...
} function addRoles(user) {
const roles =
user["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"];
if (roles) {
if (Array.isArray(roles)) {
user.roles = roles.map(role => role.toLowerCase());
} else {
user.roles = [roles.toLowerCase()];
}
}
} export function isAuthUserInRoles(user, requiredRoles) {
if (!user || !user.roles) {
return false;
}
if (user.roles.indexOf(adminRoleName.toLowerCase()) >= 0) {
return true; // The `Admin` role has full access to every pages.
}
return requiredRoles.some(requiredRole => {
if (user.roles) {
return user.roles.indexOf(requiredRole.toLowerCase()) >= 0;
} else {
return false;
}
});
}
export function isAuthUserInRole(user, requiredRole) {
return isAuthUserInRoles(user, [requiredRole]);
} import { adminRoleName, apiUrl } from "../config.json"; {
"apiUrl": "https://localhost:5001/api",
"adminRoleName": "Admin"
} import * as auth from "../services/authService";
class MoviesTable extends Component {
columns = [ ... ];
// ...
deleteColumn = {
key: "delete",
content: movie => (
<button
onClick={() => this.props.onDelete(movie)}
className="btn btn-danger btn-sm"
>
Delete
</button>
)
}; constructor() {
super();
const user = auth.getCurrentUser();
if (user && auth.isAuthUserInRole(user, "Admin")) {
this.columns.push(this.deleteColumn);
}
} Virtual Events for Developers
While in-person conferences and events may be cancelled, there are still many online opportunities for you to stay connected. Browse the full list of virtual events to continue to grow your skills as a developer, contribute to interesting projects, and meet like-minded developers around the world.
Partial views in ASP.NET MVC allow you to reuse and customise components to act like user controls. They consist of both code and markup. They are an idea that is easy to grasp but they have great potential for the more adventurous developer who is prepared to experiment. Dino Esposito explains
Last week, at ng-conf, the Angular team at Google provided the web developer world with an update on the state of Angular 2. They were joined on stage by a member of the TypeScript team, Jonathan Turner, to also announce that Angular 2 will be built using TypeScript. Jonathan then demoed a preview of the upcoming TypeScript 1.5 release via an Angular 2 sample application.
