Angular is a popular framework for building UI applications. The newest version, which is not backward-compatible with the original version, is referred to as Angular, while the original version is referred to as AngularJS. The Angular team recently released version 4 of the framework. This lab is based on that version.
Angular takes a template-driven approach to building UIs. An HTML template is decorated with component elements, directives, and other expressions to bind data models and other entities. The fundamental building block of Angluar apps is the component. Components are template-bound to a data model. The template is part of the component's metadata, and the data model is the component instance itself.
Composing rich UIs from components is major aspect of Angular programming. Angular partially implements the W3C recommendations for Web Components. As Web Components grow in popularity and browser support increases, Angular will be well positioned to fully support them. In addition to component-driven development, Angular is well known for its rich services architecture, which even includes hierarchical dependency injection. While two-way data binding between the UI and data models is supported in Angular, developers who do not like the two-way pattern can easily avoid it. This lab makes use of ngModel
to perform two-way binding for collecting form data, but does not use two-way binding otherwise.
Angular is a complete framework for building UIs. Angular apps can be written in JavaScript, but TypeScript is more commonly used to due to its support for advanced features such as decorators (which are used to configure metadata for components), directives, modules, and services. TypeScript is especially helpful when building enterprise applications because of the strong typing that it enforces.
In this lab, you will use Angular, TypeScript, and Visual Studio Code to build a simple application for managing a table of widgets. Data will be loaded from a REST service and displayed in an HTML table by Angular components. In addition, the application will fully support CRUD (Create, Read, Update and Delete), allowing widgets to be added and edited as well as viewed and deleted. As you build out the app, you will learn the basics of Angular and get a feel for what Angular programming is all about.
In this hands-on lab, you will learn how to:
The following are required to complete this hands-on lab:
This hands-on lab includes the following exercises:
Estimated time to complete this lab: 45 minutes.
Rather than start from scratch, you will begin with a "hello world" project that has been created for you. This will enable you to start learning quickly without spending time creating boilerplate infrastructure. In this exercise, you will copy the starter project to a local folder and use Visual Studio Code to modify a simple Angular component included in the starter project to display a table of widgets. As you do, you will get a first look at the Angular component model.
Find the "resources" folder that accompanies this lab, and then open the "angular-vscode-starter" folder inside the "resources" folder. Copy the contents of the "angular-vscode-starter" folder to a local folder on your hard disk (the "project folder").
Open a terminal or Command Prompt window and use a cd command to change to the project folder that you copied the starter project into.
If you are running Windows, execute the following command in the Command Prompt window to open Visual Studio Code in the project folder:
code .
If you are running Linux or macOS instead, use this command instead:
open -a "Visual Studio Code" .
Confirm that Visual Studio Code starts and shows the project files in the Explorer pane on the left.
Visual Studio Code showing the starter project
Select Integrated Terminal from Visual Studio Code's View menu to open the integrated terminal. In the integrated terminal, run the following command to install the packages that the app requires:
npm install
Installing packages
During the install, you may receive warning messages regrading deprecations. These warnings can be ignored. If you receive an actual error message (usually displayed in red and labeled "ERR"), delete the "node_modules" folder in the project folder and try again.
Once the install has completed, run the following command in the integrated terminal to start the development web server:
npm start
The development web server is powered by the popular module bundler utility Webpack 2. As part of the bundling process, Webpack watches the file system for changes to the source code files, and processes them as changes are made. The processing primarily consists of transpiling code, which is necessary to convert TypeScript code to JavaScript.
To verify that the development environment and the application are working correctly, open a web browser and navigate to http://localhost:3000. Confirm that a "Hello World" page appears.
The starter app running in a browser
The "Hello World" that you see is HTML content produced by a simple Angular component named AppComponent
. The component is defined in app.component.ts, which is located in the project's "src\ts\app" folder. Open app.component.ts and inspect its contents:
Defining an Angular component
The component replaces the page's hello-world
element with the HTML in app.component.html (the component template), and styles the output with the styles in app.component.scss.
The next step is to modify the component to display a table of widgets instead of "Hello World." Open index.html in the project's "src" folder and replace the hello-world
element with the following element:
<widget-tool>Loading...</widget-tool>
Now change the selector
property in app.component.ts to target the widget-tool
element:
selector: "widget-tool",
Next, the component template needs to be updated to display a static table of widgets. Open app.component.html in the "src\ts\app" folder and replace its contents with the following markup:

Widget Tool

Name
Description
Color
Size
Quantity

Sample Widget
A sample widget
blue
large
10

Historically, stylesheets were applied to entire web pages. With components, styles can applied at the component level. Open app.component.scss in the "src\ts\app" folder and add the following statements:
table {
font-family: 'arial';
border-collapse: collapse;
border:1px solid #000;
tr {
td, th {
border-bottom:1px solid black;
padding: 5px;
}
th {
font-weight: bold;
text-align:center;
}
th:nth-child(n + 1), td:nth-child(n + 1) {
border-left:1px solid black;
}
}
}
This markup is not conventional CSS; it is SCSS, which is an extension to SASS. SASS is a preprocessor for CSS that includes a number of syntax efficiencies not available in CSS. Angular provides no direct support for SASS, but a properly configured development environment enables developers to leverage such technologies in Angular applications.
Use the File -> Save All command to save all of your changes. Then switch back to the browser and confirm that a table of widgets appears, as shown below.
Widgets dsiplayed by the modified Angular component
You have now seen how Angular components are defined, how they are declared in a page using custom HTML elements, how HTML templates are attached to them, and how they are styled. Now let's build on that by adding a data model to the Angular component.
In this exercise, you will add a model to the project and modify AppComponent
to use the model. You will also see Angular's ngFor
directive for the first time.
Create a "models" folder in the project's "src\ts\app" folder. Then add a file named widget.ts to the "models" folder and add the following code to the file:
export interface Widget {
id: number;
name: string;
description: string;
color: string;
size: string;
quantity: number;
}
An easy way to add a file or folder to a project in Visual Studio Code is to right-click (on a Mac, Control-click) the folder you want to add it to and select New File or New Folder from the context menu.
Add the following statement to the top of app.component.ts (after the existing import
statement) to import the Widget
interface defined in the previous step:
import { Widget } from "./models/widget";
Replace the empty AppComponent
class in the same file with one that declares a property named widgets
initialized with an array of Widgets:
export class AppComponent {
public widgets: Widget[] = [{
id: 1, name: 'Small Red Widget', description: 'A small, red widget.',
color: 'red', size: 'small', quantity: 2
},{
id: 2, name: 'Medium Blue Widget', description: 'A medium, blue widget.',
color: 'blue', size: 'medium', quantity: 15
}];
}
Now return to app.component.html and update the component template by replacing the template's tbody
element with the following element:

{{widget.name}}
{{widget.description}}
{{widget.color}}
{{widget.size}}
{{widget.quantity}}

The ngFor
directive duplicates an element and its children from model data. In this case, a tr
element is produced for each widget, and each widget populates the columns of its table row. The asterisk before ngFor
indicates that this is a structural directive. Directives come in two forms: structural and attribute. Structural directives add and remove DOM elements. Attribute directives manipulate the elements they are applied to.
The double curly braces denote Angular expressions. Expressions are evaluated at run-time. In this example, the first table cell in each row will be filled with the widget's name
property, the second will be filled with the widget's description
property, and so on.
Use the File -> Save All command to save your changes. Then switch back to the browser and confirm that the widget table is populated with the model data you added in Step 3.
Widget table populated with model data
Now that a model is in place, the next step is to provide an interface for creating new widgets.
In this exercise, you will add an HTML form to the app so users can add widgets to the collection. This will involve importing an Angular module named FormsModule
and modifying AppComponent
to use the module.
Open app.module.ts in the project's "src\ts\app" folder and add the following import
statement after the statement that imports BrowserModule
:
import { FormsModule } from "@angular/forms";
Once imported, FormsModule
must be registered with the AppModule
. In the @NgModule
decorator, update the imports
property to include FormsModule
:
imports: [ BrowserModule, FormsModule ],
The next step is to add a form to the component template. In app.component.html, add the following statements after the table
element:

Widget Form

<form>

Widget Name:
<input type="text" name="widgetNameInput" id="widget-name-input" [(ngModel)]="newWidget.name" />

Widget Description:
<input type="text" name="widgetDescriptionInput" id="widget-description-input" [(ngModel)]="newWidget.description" />

Widget Color:
<input type="text" name="widgetColorInput" id="widget-color-input" [(ngModel)]="newWidget.color" />

Widget Size:
<input type="text" name="widgetSizeInput" id="widget-size-input" [(ngModel)]="newWidget.size" />

Widget Quantity:
<input type="text" name="widgetQuantityInput" id="widget-quantity-input" [(ngModel)]="newWidget.quantity" />

<button type="button" (click)="addWidget()">Add Widget</button>
</form>
The ngModel
directives establish two-way data binding between the UI and the model on the component instance. Each directive is surrounded by square brackets and parentheses. Square brackets denote an input binding, which passes data from the model to the directive or component. Parentheses indicate an output binding, which passes data back to the model. The use of both declares a two-way data binding. For the button's click event, parentheses are used without square brackets since there is no input, just output, when the button is clicked.
Now update the component class to make information about new widgets available. To do the update, add the following property to the AppComponent
class in app.component.ts:
public newWidget: Widget = {
id: 0,
name: "",
description: "",
color: "",
size: "",
quantity: 0,
}
Next, add the following function to the AppComponent
class to handle clicks of the Add Widget button:
public addWidget() {
this.newWidget.id = this.widgets.reduce((maxWidgetId, nextWidget) =>
Math.max(maxWidgetId, nextWidget.id), 0) + 1;
this.widgets = this.widgets.concat(this.newWidget);
this.newWidget = {
id: 0,
name: "",
description: "",
color: "",
size: "",
quantity: 0,
};
}
The array reduce
function is used to generate an id for the new widget based on the last id present in the array.
Use the File -> Save All command to save your changes. Then switch back to the browser and confirm that you can add a widget to the collection by filling in the form and clicking Add Widget.
UI for adding widgets
Now you know how to implement forms in Angular components and use ngModel
to bind form elements to model properties. The next step is to modularize the app a bit more.
The application component has grown and is now responsible for displaying the widget table AND handling form input for new widgets. This works, but it's not ideal. In this exercise, you will decompose the application component into two smaller components: one for displaying widgets, and another for adding widgets.
Create a new folder named "components" in the project's "src\ts\app" folder. Add a new file named widget-table.component.ts to the "components" folder, and add the following code to the file to define a new component named WidgetTable
:
import { Component, Input } from "@angular/core";
import { Widget } from "../models/widget";
@Component({
selector: "widget-table",
templateUrl: "./widget-table.component.html",
styleUrls: [ "./widget-table.component.scss" ],
})
export class WidgetTable {
@Input()
widgets: Widget[] = [];
}
The @Input
decorator indicates which property (or properties) of the component class can be used for input bindings. The property type can be any valid type.
Add a file named widget-table.component.html to the "components" folder to hold the component template. Then add the following markup to the file:

Name
Description
Color
Size
Quantity

{{widget.name}}
{{widget.description}}
{{widget.color}}
{{widget.size}}
{{widget.quantity}}

Add a file named widget-table.component.scss to the "components" folder. Then add the following statements to the file:
table {
font-family: 'arial';
border-collapse: collapse;
border:1px solid #000;
tr {
td, th {
border-bottom:1px solid black;
padding: 5px;
}
th {
font-weight: bold;
text-align:center;
}
th:nth-child(n + 1), td:nth-child(n + 1) {
border-left:1px solid black;
}
}
}
Now that the WidgetTable
component has been defined, the application component needs to be updated to use it. In app.module.ts, add the following import
statement right after the statement that imports AppComponent
.
import { WidgetTable } from "./components/widget-table.component";
Next, add WidgetTable
to the component declarations in the @NgModule
decorator attached to AppComponent
:
declarations: [ AppComponent, WidgetTable ],
Remembering to update the declarations
array is key to decomposition. Many an Angular developer has lost precious time by failing to remember to register new components, directives, and pipes with the appropriate module.
Replace the table
element in app.component.html with the following markup:
<widget-table [widgets]="widgets"></widget-table>
WidgetTable
manages its own CSS, so delete the contents of app.component.scss. Do not delete the file; just delete the contents.
Use the File -> Save All command to save your changes. Then switch back to the browser and view the page source. Confirm that you see the new widget-table
element created from the template.
Output from the WidgetTable component
Now let's separate the form into its own component. Whereas the widget table received widgets as inputs, the widget form will output widgets. Add a file named widget-form.component.ts to the "components" folder. Then add the following code to the file:
import { Component, Output, EventEmitter } from "@angular/core";
import { Widget } from "../models/widget";
@Component({
selector: "widget-form",
templateUrl: "./widget-form.component.html",
})
export class WidgetForm {
newWidget: Widget = {
id: 0,
name: "",
description: "",
color: "",
size: "",
quantity: 0,
}
@Output()
onSubmit: EventEmitter<Widget> = new EventEmitter<Widget>();
addWidget() {
this.onSubmit.emit(this.newWidget);
this.newWidget = {
id: 0,
name: "",
description: "",
color: "",
size: "",
quantity: 0,
};
}
}
The @Output
decorator indicates which properties on the component are available for output bindings. Typically, the EventEmitter
class is used to wire up the outputs.
Add a file named widget-form.component.html to the "components" folder. Then add the following markup to the file:

Widget Form

<form>

Widget Name:
<input type="text" name="widgetNameInput" id="widget-name-input" [(ngModel)]="newWidget.name" />

Widget Description:
<input type="text" name="widgetDescriptionInput" id="widget-description-input" [(ngModel)]="newWidget.description" />

Widget Color:
<input type="text" name="widgetColorInput" id="widget-color-input" [(ngModel)]="newWidget.color" />

Widget Size:
<input type="text" name="widgetSizeInput" id="widget-size-input" [(ngModel)]="newWidget.size" />

Widget Quantity:
<input type="text" name="widgetQuantityInput" id="widget-quantity-input" [(ngModel)]="newWidget.quantity" />

<button type="button" (click)="addWidget()">Add Widget</button>
</form>
Return to app.module.ts and add the following import
statement after the statement that imports WidgetTable
:
import { WidgetForm } from "./components/widget-form.component";
Next, add WidgetForm
to the component declarations in the @NgModule
decorator attached to AppComponent
:
declarations: [ AppComponent, WidgetTable, WidgetForm ],
Replace the contents of app.component.html with the following markup:

Widget Tool

<widget-table [widgets]="widgets"></widget-table>
<widget-form (onSubmit)="saveWidget($event)"></widget-form>
Notice how much simpler and cleaner the AppComponent
template is now. Angular uses depedency injection to pass arguments to event handlers in component templates. $event
is a special variable name that allows event data to be passed as function arguments.
The AppComponent
class needs to be updated to use the WidgetForm
component. Replace the contents of app.component.ts with the following code:
import { Component } from "@angular/core";
import { Widget } from "./models/widget";
@Component({
selector: "widget-tool",
templateUrl: "./app.component.html",
styleUrls: [ "./app.component.scss" ],
})
export class AppComponent {
widgets: Widget[] = [{
id: 1, name: 'Small Red Widget', description: 'A small, red widget.',
color: 'red', size: 'small', quantity: 2
},{
id: 2, name: 'Medium Blue Widget', description: 'A medium, blue widget.',
color: 'blue', size: 'medium', quantity: 15
}];
saveWidget(newWidget: Widget) {
newWidget.id = this.widgets.reduce((maxWidgetId, nextWidget) =>
Math.max(maxWidgetId, nextWidget.id), 0) + 1;
this.widgets = this.widgets.concat(newWidget);
}
}
Use the File -> Save All command to save your changes. Then switch back to the browser and confirm that the widget table and widget form are both displayed on the web page. Add a new widget and verify that it works.
Adding a yellow widget
The application component has now been decomposed into two smaller components, and you can add widgets and view widgets. The next task is to permit widgets to be edited and deleted as well.
Currently, the app allows new widgets to be added, but lacks a UI for editing and deleting widgets. In this exercise, you will add support for editing widgets using inline table editing, and support for deleting widgets as well. This will involve adding two new components — one to represent edit rows and one to represent "view" rows (rows that are not currently being edited) — and modifying existing code to use them.
Create a new file named widget-row.component.scss in the "components" folder to provide CSS styling for the view-row and edit-row components. Then add the following markup to the file:
td {
border-bottom:1px solid black;
padding: 5px;
}
td:nth-child(n + 1) {
border-left:1px solid black;
}
The WidgetTable
component's styling needs to be updated as well. Open widget-table.component.scss and replace the contents of that file with the following markup:
table {
font-family: 'arial';
border-collapse: collapse;
border:1px solid #000;
tr {
th {
border-bottom:1px solid black;
padding: 5px;
font-weight: bold;
text-align:center;
}
th:nth-child(n + 1) {
border-left:1px solid black;
}
}
}
Create a file named widget-view-row.component.ts in the "components" folder and add the following code:.
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { Widget } from "../models/widget";
@Component({
selector: "tr[widget-view-row]",
templateUrl: "./widget-view-row.component.html",
styleUrls: [ "./widget-row.component.scss" ],
})
export class WidgetViewRow {
@Input()
public widget: Widget = {} as Widget;
@Output()
public onEditWidget: EventEmitter<number> = new EventEmitter<number>();
@Output()
public onDeleteWidget: EventEmitter<number> = new EventEmitter<number>();
}
Observe that the selector for this component targets tr
elements. The purpose of the widget-view-row
attribute in the selector is to differentiate between view rows and edit rows.
Create a file named widget-view-row.component.html in the "components" folder and add the following code:
{{widget.name}}
{{widget.description}}
{{widget.color}}
{{widget.size}}
{{widget.quantity}}

<button type="button" (click)="onEditWidget.emit(widget.id)">Edit</button>
<button type="button" (click)="onDeleteWidget.emit(widget.id)">Delete</button>

Create a file named widget-edit-row.component.ts in the "components" folder and add the following code:
import { Component, Input, Output, EventEmitter, OnChanges } from "@angular/core";
import { Widget } from "../models/widget";
@Component({
selector: "tr[widget-edit-row]",
templateUrl: "./widget-edit-row.component.html",
styleUrls: [ "./widget-row.component.scss" ],
})
export class WidgetEditRow implements OnChanges {
@Input()
public widget: Widget = {} as Widget;
@Output()
public onSaveWidget: EventEmitter<Widget> = new EventEmitter<Widget>();
@Output()
public onCancelWidget: EventEmitter<void> = new EventEmitter<void>();
public ngOnChanges(changes: any) {
if (changes.widget) {
this.widget = Object.assign({}, changes.widget.currentValue);
}
}
}
The OnChanges
interface is imported and applied to the WidgetEditRow
class to declare that the component implements the ngOnChanges
lifecycle method. This method executes whenever the input properties to the component change. In particular, changes to the widgets
property must be properly handled to ensure that edits to the widget do not overwrite the existing widget object in memory. For this reason, a new object is created, and the properties of the original widget are copied to the new widget using Object.assign
in the ngOnChanges
method. As a result, the original object is not modified if the user clicks the Cancel button.
Create a file named widget-edit-row.component.html in the "components" folder and add the following markup:
<input type="text" name="editWidgetName" id="edit-widget-name-input" [(ngModel)]="widget.name">
<input type="text" name="editWidgetDescription" id="edit-widget-description-input" [(ngModel)]="widget.description">
<input type="text" name="editWidgetColor" id="edit-widget-color-input" [(ngModel)]="widget.color">
<input type="text" name="editWidgetSize" id="edit-widget-size-input" [(ngModel)]="widget.size">
<input type="text" name="editWidgetQuantity" id="edit-widget-quantity-input" [(ngModel)]="widget.quantity">

<button type="button" (click)="onSaveWidget.emit(widget)">Save</button>
<button type="button" (click)="onCancelWidget.emit()">Cancel</button>

The two new row components need to be registered with the application module. Add the following import
statements after the statement that imports WidgetForm
in app.module.ts:
import { WidgetViewRow } from "./components/widget-view-row.component";
import { WidgetEditRow } from "./components/widget-edit-row.component";
Now add the new components to the declarations
in the application module:
declarations: [ AppComponent, WidgetTable, WidgetForm, WidgetViewRow, WidgetEditRow ],
The WidgetTable
template needs to be updated to use the new row components. A new "Action" column needs to be added to the table header row, and some logic needs to be added to the table to switch between the view row and edit row. Replace the template for the widget table component in widget-table.component.html with the following markup:

Name
Description
Color
Size
Quantity
Action

<ng-template ngFor let-widget [ngForOf]="widgets">

</ng-template>

It isn't possible to use ngFor
to apply two different components to the same element. Therefore, an ng-template
element is used instead to iterate over the model data, and the appropriate component is emitted using ngIf
. The asterisk is shorthand, and must be used when a structural directive is applied to multiple sibling directives.
Also, observe how multiple expressions can be included in a single template. For onDeleteWidget
, one expression emits a delete-widget event, and the second sets editRowId
to zero.
The WidgetTable
component needs to be updated to handle edit rows and the events associated with saving and deleting widgets. Open widget-table.component.ts and replace the contents of the file with the following code:
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { Widget } from "../models/widget";
@Component({
selector: "widget-table",
templateUrl: "./widget-table.component.html",
styleUrls: [ "./widget-table.component.scss" ],
})
export class WidgetTable {
public editRowId = 0;
@Input()
public widgets: Widget[] = [];
@Output()
public onSaveWidget: EventEmitter<Widget> = new EventEmitter<Widget>();
@Output()
public onDeleteWidget: EventEmitter<number> = new EventEmitter<number>();
public editWidget(widgetId: number) {
this.editRowId = widgetId;
}
}
Open app.component.ts in the "app" folder and replace its contents with the following code to add functions for saving and deleting widgets to the application component:
import { Component } from "@angular/core";
import { Widget } from "./models/widget";
@Component({
selector: "widget-tool",
templateUrl: "./app.component.html",
styleUrls: [ "./app.component.scss" ],
})
export class AppComponent {
public widgets: Widget[] = [{
id: 1, name: 'Small Red Widget', description: 'A small, red widget.',
color: 'red', size: 'small', quantity: 2
},{
id: 2, name: 'Medium Blue Widget', description: 'A medium, blue widget.',
color: 'blue', size: 'medium', quantity: 15
}];
public deleteWidget(widgetId: number) {
this.widgets = this.widgets.filter(w => w.id !== widgetId);
}
public saveWidget(widget: Widget) {
if (widget.id) {
const widgetIndex = this.widgets.findIndex(w =>
w.id === widget.id);
this.widgets = [
...this.widgets.slice(0, widgetIndex),
widget,
...this.widgets.slice(widgetIndex + 1) ];
} else {
widget.id = this.widgets.reduce((maxWidgetId, nextWidget) =>
Math.max(maxWidgetId, nextWidget.id), 0) + 1;
this.widgets = this.widgets.concat(widget);
}
}
}
Now update the application component's template in app.component.html to reference the functions added in the previous step:

Widget Tool

<widget-table [widgets]="widgets" (onSaveWidget)="saveWidget($event)" (onDeleteWidget)="deleteWidget($event)"></widget-table>
<widget-form (onSubmit)="saveWidget($event)"></widget-form>
Use the File -> Save All command to save your changes. Then switch back to the browser and confirm that you can add new widgets as well as edit and delete existing ones.
The modified UI with tools for editing and deleting widgets
Users can now edit and delete widgets as well as view and add them. The final step is to connect the app to a REST service and move widget data to the cloud rather than store it locally.
The app is almost complete. In the final exercise, you will modify it to use a REST service to store widget data. To communicate with the REST service, you will use Angular's HttpModule
, which provides HTTP services to applications that require them. And you will implement a service of your own named Widgets
to use Angular's HTTP services.
Open app.module.ts in the project's "app" folder and add the following statement after the statement that imports FormsModule
:
import { HttpModule } from "@angular/http";
Add HttpModule
to the list of modules imported into the application module:
imports: [ BrowserModule, FormsModule, HttpModule ],
Create a new folder in the "app" folder named "services." Then add a file named widgets.service.ts to the "services" folder and add the following code:
import { Injectable } from "@angular/core";
import { Http, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Rx";
import { Widget } from "../models/widget";
@Injectable()
export class Widgets {
private baseUrl: string = "http://localhost:3010/widgets";
private requestOptions: RequestOptions = new RequestOptions({
headers: new Headers({ "Content-Type": "application/json" })
});
constructor(private http: Http) { }
public getAll(): Observable<Widget[]> {
return this.http.get(this.baseUrl).map(res => res.json());
}
public get(widgetId: number): Observable<Widget> {
return this.http.get(this.baseUrl + "/" + encodeURIComponent(widgetId.toString())).map((res) => res.json());
}
public insert(widget: Widget): Observable<Widget> {
return this.http.post(this.baseUrl + "/", JSON.stringify(widget), this.requestOptions).map((res) => res.json());
}
public update(widget: Widget): Observable<Widget> {
return this.http.put(this.baseUrl + "/" + encodeURIComponent(widget.id.toString()),
JSON.stringify(widget), this.requestOptions).map((res) => res.json());
}
public delete(widgetId: number): Observable<Widget> {
return this.http.delete(this.baseUrl + "/" + encodeURIComponent(widgetId.toString())).map((res) => res.json());
}
}
Angular's HTTP service provides helper methods for making REST service requests. You simply call these methods with a URL, data, and request options, and an HTTP request is transmitted. To manage the asynchronous nature of such requests, Angular uses observables provided by another framework named RxJS (Reactive Extensions for JavaScript). Parties that subscribe to an observable returned by the HTTP service are notified when an asynchronous call completes.
The Widgets
service needs to be registered with the application module so it can be injected into the application component. Open app.module.ts and import the service just before the statement that imports AppComponent
.
import { Widgets } from "./services/widgets.service";
Now modify the @NgModule
decorator on the AppModule
class to include a providers
option that registers the Widgets
class as a provider:
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule ],
declarations: [ AppComponent, WidgetTable, WidgetForm, WidgetViewRow, WidgetEditRow ],
bootstrap: [ AppComponent ],
providers: [ Widgets ],
})
The providers
option specifies how the Widgets
service will be injected. In this example, Widgets
doubles as an injection token and as the concrete implementation to be injected.
Next, the application component needs to be updated to use the Widgets
service. Replace the contents of app.component.ts with the following code:
import { Component, OnInit } from "@angular/core";
import { Widget } from "./models/widget";
import { Widgets } from "./services/widgets.service";
@Component({
selector: "widget-tool",
templateUrl: "./app.component.html",
styleUrls: [ "./app.component.scss" ],
})
export class AppComponent implements OnInit {
public widgets: Widget[] = [];
constructor(private widgetsSvc: Widgets) { }
public refreshWidgets() {
this.widgetsSvc.getAll().subscribe((widgets) => {
this.widgets = widgets;
});
}
public ngOnInit() {
this.refreshWidgets();
}
public deleteWidget(widgetId: number) {
this.widgetsSvc.delete(widgetId).subscribe((widgets) => {
this.refreshWidgets();
});
}
public saveWidget(widget: Widget) {
if (widget.id) {
this.widgetsSvc.update(widget).subscribe(() => this.refreshWidgets());
} else {
this.widgetsSvc.insert(widget).subscribe(() => this.refreshWidgets());
}
}
}
ngOnInit
is a lifecycle function that's called when a component is loaded and ready. In this case, it loads widgets from the REST service. Oserve how callback functions are used to perform widget operations. Because REST service calls are asynchronous in nature, a callback is registered with subscribe
, and the callback is invoked when a call completes.
Use the File -> Save All command to save your changes. Then switch back to the browser one last time and observe that the widget tool is now populated with data from the REST service. Try adding, editing, and deleting widgets to confirm that the app behaves as expected.
The final application
Great job! You have built a CRUD application with Angular and learned a lot about Angular along the way.
For more information on Angular, check out this summary of Angular basics on the Angular Web site, as well as these Angular tutorials. Note that Angular is great for building mobile apps, too. The Angular Mobile Toolkit makes it easy to build responsive Web apps that work on any device, even when you lack an Internet connection.
Copyright 2017 Microsoft Corporation. All rights reserved. Except where otherwise noted, these materials are licensed under the terms of the MIT License. You may use them according to the license as is most appropriate for your project. The terms of this license can be found at https://opensource.org/licenses/MIT.


Timetable
E:
CUDA
timetable
timetable
timetable
Macros
|
Functions
main.c File Reference
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include "
lines.h
"
Include dependency graph for main.c:
Macros
#define
_CRT_SECURE_NO_WARNINGS
Functions
void
Menu
(
lines
**pHeadL,
cities
**pheadC, char **argv)
int
main
(int argc, char **argv)
Macro Definition Documentation
◆
_CRT_SECURE_NO_WARNINGS
#define _CRT_SECURE_NO_WARNINGS
Function Documentation
◆
main()
int main
(
int
argc
,
char **
argv
)
Here is the call graph for this function:
◆
Menu()
void Menu
(
lines
**
pHeadL
,
cities
**
pheadC
,
char **
argv
)
Here is the call graph for this function:
Here is the caller graph for this function:
Generated by
1.8.17


arts n deco |
Controlz |
DoPy |
DoSH |
DoTA |
Firewallz |
Informalz |
DoSM |
DePP |
DoVe |
LSD |
| Bulls And Bears |
Designers Anonymous |
Dance |
Dramatics |
Hindi Tarang |
Journal |
Martial Arts |
Movie |
Music |
Quiz |
VFx |


Header Static
Statc header is default style for header. So remove class
header-fixed
from<body id="body">
if it was added before.
<body id="body" class="">
@@include('header.htm', { "title": "Sleek - Admin Dashboard Template", "className": "header-fixed sidebar-fixed sidebar-dark header-light" }) @@include('sidebar-with-footer.htm', { "parent": "layouts", "sub_parent": "header", "active": "header-sticky" })
Statc header is default style for header. So remove class
header-fixed
from<body id="body">
if it was added before.
<body id="body" class="">


Making money, easy or difficult?
Suddenly, I found some ways tech guys usually applied to generate money. Because I am also a technican, so I should care this problem like an obtainable option for my life. Of course, sharing is always fine. That makes me write this post. In next words, I show you several approaches to help yourself be richer, or maybe be financial freedom.
Selling Virtual Possessions
-
Premium WordPress Themes. Looking at Themeforest author sales, some of them are hitting $100k/month and they are not seasoned (at least in ThemeForest).
-
Premium WordPress Plugins. These guys used to sell on CodeCanyon and it looks like their product took off quite well (selling $20K/month last year)
Blogging
-
http://goinswriter.com/get-paid-passion/. I built the audience first. I’d heard stories of people like Brian Clark who built their audiences long before they tried to sell , and I thought that sounded smart. For more than a year, I wrote a LOT of free, helpful content (i.e. eBooks, newsletters, blog posts, guest posts, webinars, and more) and shared it with my audience. The result was a tremendous amount of trust — to the point that people started begging me to sell them something. I asked my audience what they wanted. Sean Platt told me to do this, recommending a survey to ask people what they’d buy from me, even how much I should charge them. Over 1000 people responded, many indicating (to my utter shock) they would indeed pay for something I created. That gave me the confidence to try something. I experimented with an initial offering. My first product was a $2.99 eBook (which I seriously doubted people would buy). Based on the concept of a minimum viable product, I put together an offering that required minimal effort to create and then put it out there to see if people would buy it. The money I made from the first weekend it was released paid for my email marketing service for an entire year (about $1500). After that, everything changed. A hobby became a business. I learned how to launch things. After that first eBook, I released another eBook but with three different price points (based on Chris Guillebeau’s advice) and a few other tweaks. This generate ten times the sales that the first product did — in a matter of a few weeks. It also taught me how to harness the power of an online product launch (which I’ve since used on my book and online course). Learning how to launch was the golden nugget I was missing that led to sustainable, repeatable success in my business.
-
http://goinswriter.com/make-money-blogging/. Affiliate marketing: Selling other people’s products for them and earning a commission on each sale. My Amazon story is an example of this. I’m also starting to see some fruit from promoting other products I believe in, like 31 Days to Build a Better Blog. Product sales: Sell your own products (eBooks, webinars, iPhone apps, whatever). I’m working on a few of these myself. The trick is delivering value and only giving your community what they want. Advertising: If you have decent traffic, you can sell ad space. (I’ve just started exploring this, but so far it’s been fruitful. Recently, to jump-start my advertising, I offered a 50% discount on Cyber Monday.) Market your own services: If selling stuff makes your skin crawl, you can use a blog to build an online presence and brand and then use it to land consulting or freelance services. (I’ve had several people contact me about things like writing an eBook, SEO, and other topics I’ve written about.)
blog comments powered by Disqus


Contact
how to get in touch with Tom Shea
About
Work
Techniques
Contact
<EMAIL_ADDRESS>240-776-2220
@thristhart
linkedin


Login
Sign Up
Main Page
/
Museum
/
Fresno Museum
Natural History Museum
by Emre Bolat
Name
Fresno Metropolitan Museum Art and Science
Location
Fresno, California
Opening Date
April 1984
Description
The Fresno Metropolitan Museum of Art and Science was a Smithsonian Institution Affiliate and American Alliance of museum accridated museum located at downtown Fresco, California.
Eren Erdoğan
23.02.2017 13:00
Harika bir şaheser
Taygun Demir
23.02.2017 13:00
Bu fotoğrafı bence daha güzel
+ Add Annotation


DIRTY WORK RATING: 5 / 10 --> Not a good movie
For more reviews and movie screensavers, visit http://www.joblo.com/
PLOT: Two life-long losers, who need $50,000 in a jiffy to save the life of their whore-loving Pops, start a business in the only service in which they consider themselves to be experts: Revenge-for-hire!
CRITIQUE: This film stars a man whose humor I've always found to be funny, Norm McDonald. It's also peppered with plenty of other comedian cameos, an interesting premise, but unfortunately, doesn't deliver as many laughs as you might expect. Is it because "America's Funniest Videos" host Bob Saget is at the helm? I doubt it. He's actually much funnier in real life than any of his corny lines from the show might indicate.
 But overall, it just seemed to lack any real interest in their phony plight, and didn't provide enough good jokes to sustain anything more than a half hour TV program. Of all the cameos, I thought the Don Rickles one was the best, while Chris Farley deserved much more than his two-bit stint. So if you don't go into this film expecting a laugh-out riot, you might just be slightly entertained by a self-conscious Norm McDonald basically playing himself. On the other hand, it goes without saying that if you never enjoyed the man's humor in the first place, you will not appreciate this movie either. Real fans only. Overall, an inferior hit-and-miss SNL sketch gone long.
Little Known Facts about this film and its stars: Norm McDonald is born in my hometown of Montreal, Canada. Most of this film was shot in Toronto, Canada. Chris Farley's bother Kevin plays one of the theatre workers in this film. Co-screenwriter Fred Wolf also plays one of the homeless guys. He wrote Chris Farley's 1996 film BLACK SHEEP and was an uncredited writer on his 1995 film TOMMY BOY. Cameos in this film include Adam Sandler, Gary Coleman, John Goodman, Rebecca Romjin-Stamos, Dini Petty and Chevy Chase. This film is only 81 minutes long, and contains outtakes during the final credits.
Review Date: September 15, 1999 Director: Bob Saget Writers: Frank Sebastiano, Norm McDonald and Fred Wolf Producer: Robert Simonds Actors: Norm McDonald as Mitch Artie Lange as Sam Jack Warden as Pops Genre: Comedy Year of Release: 1998 --------------------------------------- JoBlo's Movie Emporium http://www.joblo.com --------------------------------------- (c) 1999 Berge Garabedian
The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


@*
* Copyright 2023 HM Revenue & Customs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*@
@import uk.gov.hmrc.hmrcemailrenderer.templates.onlinepaymentservice.DateFormatter
@(params: Map[String, Any])
@uk.gov.hmrc.hmrcemailrenderer.templates.helpers.html.template_main(params, "Change of VAT Direct Debit details") {
Dear @params("NAME")
We need to give you some information after your transfer to Making Tax Digital for VAT. This transfer may have been requested by you or by someone who deals with HMRC for you.
There is no need to take any action.
You currently pay by Direct Debit. From @DateFormatter.formatDate(params("TRANSFERDATE").toString) we will transfer your Direct Debit to a new reference @params("DDIREFERENCE").
The Service User name will change from HMRC e VAT to HMRC E VAT DDS. Your new service user number will be @params("NEWSUN").
Your bank statement may show a final payment under your old reference and a first payment under the new reference.
We have also updated our Direct Debit terms and conditions, please read them below.
You will continue to enjoy the full benefits of the Direct Debit guarantee as detailed below, if you have a question call @params("PHONENUMBER").
From HMRC Direct Debits
The Direct Debit Guarantee
- This guarantee is offered by all banks and building societies that accept instructions to pay Direct Debits.
- If there are any changes to the amount, date or frequency of your Direct Debit we will notify you 2 working days in advance of your account being debited or as otherwise agreed. If you request @params("NEWSUNNAME") to collect a payment, confirmation of the amount and date will be given to you at the time of the request.
- If an error is made in the payment of your Direct Debit by @params("NEWSUNNAME") or your bank or building society, you are entitled to a full and immediate refund of the amount paid from your bank or building society
— If you receive a refund you are not entitled to, you must pay it back when @params("NEWSUNNAME") asks you to.
- You can cancel a Direct Debit at any time by simply contacting your bank or building society. Written confirmation may be required. Please also notify us.
Terms and conditions for VAT Direct Debit
- You must provide a valid email address to use this service. We will send you important notifications about your Direct Debit to this address. The full messages will be available in your online tax account.
- You must make sure that your bank or building society will accept Direct Debit Instruction for the account you want to use. Direct Debit collections can only be made once the Direct Debit Instruction is accepted.
- When submitting a new Direct Debit Instruction, you must be authorised to sign for the account as either the sole signatory or authorised to sign on behalf of all the other signatories.
If more than one signature is required to authorise the Direct Debit on this account, you will need to complete a paper version of the mandate form.
- The account for your Direct Debit must be a bank account registered in the UK and in British pounds.
- You must make sure you have enough money in your account to pay the tax due on collection day.
- The Direct Debit will only take the amount we tell you about in advance. You must arrange to pay other VAT liabilities like surcharges, penalties or interest by other payment methods.
- If you miss the due date for your VAT payment, or complete your VAT Return late, you could be liable to a financial penalty. If you know that the Direct Debit collection will fail, you must pay by the due date using another method.
- You can cancel or change your Direct Debit Instruction using our online service up to 5 working days before your VAT payment is due.
- Your bank may cancel your Direct Debit Instruction if it has not been used for 13 months from the date of setting it up, or from the date of the last payment. This is covered by the Direct Debit dormancy period rule.
}


Face deformation
This is an example of face deformation using the javascript library clmtrackr.
Note that this example needs support for WebGL, and works best in Google Chrome.
To try it out:
- allow the page to your use webcamera
- make sure that your face is clearly visible in the video, and click start
- keep your head still until the model fits your face properly
- choose a preset or fiddle with the parameters on the right hand side, to deform the captured face
There was some problem trying to capture your webcamera, please check that your browser supports WebRTC. Instead we'll use a static image. To try it out:
- click start
- wait till the model fits the face
- choose a preset or fiddle with the parameters on the right hand side, to deform the captured face


How to use publish and subscribe in Meteor.JS
An example of how to use the publish and subscribe methods in Meteor JS.
Using Git Effectively
A quick guide on how to use Git version control effectively
Free Geocoding is Finally Here!
Finally, the availability of free geocoding, in huge bulk!
Meteor.JS Tutorial #2: Listening for Events in Meteor
A tutorial on how to listen for events in Meteor.js
Meteor.JS Tutorial #1: Getting Started Guide for Meteor JS
Short and sweet meteor.js tutorials.
Arduino Learning #4: Defining Functions
Defining reusable functions in Arduino codes...
Arduino Learning #3: Important Concepts
A brief summary of the important concepts of Arduino.
Arduino Learning #2: digitalWrite, analogWrite, and which pins are which.
Learning how to use digitalWrite and analogWrite in Arduinos.
Arduino Learning #1: setup() & loop()
Learning the basics of Arduino is challenging, break it down step by step and tackle each piece at a time.


{% extends "layout.html" %} {% block page_title %} Blank page {% endblock %} {% block content %} {% block phase_banner %} {% include "includes/phase_banner_alpha.html" %} {% endblock %} Home Companies House Forms Strike off a company from the register (DS01) Which directors need someone to approve this on their behalf? Select all that apply: Cathy Nicholas UK Metal Works Limited {% endblock %}


Record centre to be set up in 9 villages
Project expected to cost ₹1.75 crore
by Special CorrespondentModel record centres will be set up in nine villages, Revenue Minister E. Chandrasekharan said in the Assembly on Thursday.
Tender processes for the same were in the final stages and the project was expected to cost around ₹1.75 crore. These record centres will make it easier to find revenue files .
Steps are also being expedited to convert all village documentation into digital form.
Administrative sanction has been accorded for converting 180 village offices as ‘smart’ offices. Of these, 71 has been completed while the work on the remaining was on.
The government was also considering a proposal to set up front offices in village offices, he said, while replying to questions by V.R. Sunilkumar, E.T.Tyson, Geetha Gopi and others.
He said that once the K-Phone network is completed, people will no longer need to rely on Akshaya centres or Internet cafes for getting e-certificates
A periodicity or validity period has been fixed for various certificates issued by revenue offices. The validity of all caste certificates have been newly fixed as three years.


DCMES 1.1 XML Schema XML Schema for http://purl.org/dc/elements/1.1/ namespace Created 2008-02-11 Created by Tim Cole<EMAIL_ADDRESS>Tom Habing<EMAIL_ADDRESS>Jane Hunter<EMAIL_ADDRESS>Pete Johnston (p.johnston@ukoln.ac.uk), Carl Lagoze<EMAIL_ADDRESS>This schema declares XML elements for the 15 DC elements from the http://purl.org/dc/elements/1.1/ namespace. It defines a complexType SimpleLiteral which permits mixed content and makes the xml:lang attribute available. It disallows child elements by use of minOcccurs/maxOccurs. However, this complexType does permit the derivation of other complexTypes which would permit child elements. All elements are declared as substitutable for the abstract element any, which means that the default type for all elements is dc:SimpleLiteral.
This is the default type for all of the DC elements. It permits text content only with optional xml:lang attribute. Text is allowed because mixed="true", but sub-elements are disallowed because minOccurs="0" and maxOccurs="0" are on the xs:any tag. This complexType allows for restriction or extension permitting child elements.
In due course, we should install the relevant ISO 2- and 3-lettercodes as the enumerated possible values . . .
Source
<xs:complexType name="SimpleLiteral"><xs:annotation><xs:documentation xml:lang="en">This is the default type for all of the DC elements. It permits text content only with optional xml:lang attribute. Text is allowed because mixed="true", but sub-elements are disallowed because minOccurs="0" and maxOccurs="0" are on the xs:any tag. This complexType allows for restriction or extension permitting child elements.</xs:documentation></xs:annotation><xs:complexContent mixed="true"><xs:restriction base="xs:anyType"><xs:sequence><xs:any processContents="lax" minOccurs="0" maxOccurs="0"/></xs:sequence><xs:attribute ref="xml:lang" use="optional"/></xs:restriction></xs:complexContent></xs:complexType>
Complex Type elementContainer
Namespace
http://purl.org/dc/elements/1.1/
Annotations
This complexType is included as a convenience for schema authors who need to define a rootor container element for all of the DC elements.
<xs:complexType name="elementContainer"><xs:annotation><xs:documentation xml:lang="en">This complexType is included as a convenience for schema authors who need to define a root or container element for all of the DC elements.</xs:documentation></xs:annotation><xs:choice><xs:group ref="elementsGroup"/></xs:choice></xs:complexType>
Element Group elementsGroup
Namespace
http://purl.org/dc/elements/1.1/
Annotations
This group is included as a convenience for schema authorswho need to refer to all the elements in the http://purl.org/dc/elements/1.1/ namespace.
<xs:group name="elementsGroup"><xs:annotation><xs:documentation xml:lang="en">This group is included as a convenience for schema authors who need to refer to all the elements in the http://purl.org/dc/elements/1.1/ namespace.</xs:documentation></xs:annotation><xs:sequence><xs:choice minOccurs="0" maxOccurs="unbounded"><xs:element ref="any"/></xs:choice></xs:sequence></xs:group>


Guinea president replaces security minister following deadly protests
CONAKRY: Guinea President Alpha Conde announced on Monday (Nov 11) that he was replacing his security minister following deadly protests against suspected efforts by Conde to extend his mandate.
Conde, 81, is due to step down next year when his second and final five-year term expires, but he has refused to rule out running again and asked his government in September to look into drafting a new constitution.
Conde's opponents fear a new constitution could be used as a reset button on his presidency, allowing Conde to run again like other African leaders who have amended or changed constitutions in recent years to stay in power.
Protests in Conakry, the capital, and the bauxite-mining north against such a move have resulted in at least 13 deaths over the past month.
The presidential statement read on national television on Monday evening did not provide a reason for the sacking of Security Minister Alpha Ibrahima Keira, but a senior government official told Reuters it was related to Keira's "difficulty managing the socio-political crisis."
Government spokesman Damantang Albert Camara will replace Keira as security minister. Conde also announced that he was replacing his health and justice ministers.
The government has said it would investigate the deaths during the protests, which opposition leaders and residents said were caused by security forces' opening fire on demonstrators.
Conde's first election victory in 2010 raised hopes for democratic progress in Guinea after decades of authoritarian rule. But his critics accuse him of cracking down on dissent and violently repressing protests - charges he denies.
A dozen opposition and civil society leaders were sentenced to prison last month for their role in organising the protests.


I am a seasoned communications and project manager with a passion for reading and writing. I've managed multi-million dollar initiatives in both the public and private sector. In my spare time, I write personal essays at balanceful.com and started a book club in my neighborhood that grew to a membership over 250 people.
A recent arrival to Silicon Valley, I am looking to join an exhilarating team and utilize skills gained from past experience while taking on new challenges.


--- layout: archive title: Zulip Chat Archive permalink: /stream/113488-general/topic/noob.20.22resuse.20variable.20name.22.20question.html ---
Dammit I can never remember how to go from H : P
and HPQ : P -> Q
to H : Q
in tactic mode, the point being that I want to throw the original H
away and reuse the name. There's a tactic that does this but I can never remember the name and I can't come up with an algorithm to find out for myself, my searches have been futile, so sorry, I have to ask.
specialize
or replace
replace
-- that was it. I knew it was something like rewrite
. Thanks.
Last updated: Apr 24 2020 at 19:02 UTC


What's FoOlReader?
FoOlReader is a modern image browser, specifically meant to be used with
comics.
It's special because it doesn't need page reloads just to change the visualized image, unlike basically every other
comic reader.
It also automatizes a lot of necessary work to display lists of available
comics, and has custom themes. It's very easy to install, it works on almost every server, and gets your readers to love your website more.
It uses the following technologies to work: PHP, JavaScript, jQuery, HTML, Woxxy's brain.
This is what they say about my brain, by the way...
How to install
Just extract the files into a folder with any name you'd like. In example:
/var/www/comicreader/
and put the files in there.
Then open the file
/var/www/comicreader/settings.php
and add what it asks for.
How to add comics
Create a folder called "content". Like this:
/var/www/comicreader/content/
This folder will contain everything related to your comics.
Every comic will take name from its folder:
/var/www/comicreader/content/Sora no Otoshimono/
Same story to add a chapter:
/var/www/comicreader/content/Sora no Otoshimono/chapter 45/
or any chapter name you'd like:
/var/www/comicreader/content/Sora no Otoshimono/omake 3/
and the images:
/var/www/comicreader/content/Sora no Otoshimono/chapter 45/03.png
How to add comics' descriptions and thumbnails
While it will work even without them, you better take some time to add these.
To add a description, write a file like this:
/var/www/comicreader/content/Sora no Otoshimono/description.txt
You can use HTML! I suggest using <small></small> in case it's too much text to be added.
To add thumbnails, add a small picture like this:
/var/www/comicreader/content/Sora no Otoshimono/thumb.png
or in jpeg:
/var/www/comicreader/content/Sora no Otoshimono/thumb.jpg
How to enable advertisings
There's a
/var/www/comicreader/ads/
folder, with 3 files. Each filename has the position of the ad.
Avoid editing the first line, and add the code for a 728px*90px ad after the second line.
How to update
Save on your HD the settings.php and the
/var/www/comicreader/ads/
folder, just so you have some reference and can copy/paste.
Grab the latest version at FoOlRulez.
Delete all the folders beside
/var/www/comicreader/content/
that stores your
comics.
Upload all the new files from the new version.
Update manually
/var/www/comicreader/settings.php
and the
/var/www/comicreader/ads/
folder.
Suggestions
There's always an extra bunch of stuff you don't know. Here's some stuff that might interest you.
Changelog
I love writing these.
0.91
- changed deprecated set_magic_quotes_runtime() function in favor of phpini()
- fixed missing "traditional" php tag in functions.php
- fixed bug that wouldn't let chapter change after the last page has been read (ampersands)
- fixed bug that wouldn't let thumbnails work on some servers (rawurlencode)
- fixed my typo in the blueharu theme
- fixed and simplified javascript in blueharu theme (dropdowns)
Personal notes: I don't like doing new versions 10 hours later, but this was important.
0.9
- made the theme fully HTML5 w3c compliant
- commented most of code, beside the theme, which would be redundant
- improved compatibility with Internet Explorer
- improved compatibility with servers
- improved compatibility with UTF-8 characterset
- updated default theme to an even more generic style
- updated preloading bar with single-line system
- updated preloading
- updated automatic page scrolling
- updated thumbnail system
- updated system for spread pages
- moved the default theme functions into the theme file functions.php
- added a page to list all the chapters of a comic
- added "back to site" button activable from settings
- added error catching for chapters with no pages, comics with no chapters, no comics at all
- added hash system in URL (#page=1) compatible with browser history (back button)
- fixed CSS to deal with antialiasing on IE and Firefox
- fixed dropdowns to work only by clicking and to close if user clicks anywhere else
- fixed bug where some characters in image filanames made the reader skip the file
- fixed bug with spread pages where keyboard wouldn't let reader move the page
- fixed over 30 other rare bugs
Personal notes: I had enough of programming in software that is almost like Notepad. From now on I'll try using Netbeans or Eclipse.
0.8
Personal notes: why the hell am I doing this to myself?


Commands: roll, quit, and help.
Use the roll command to ask the server to make a die roll on your behalf. Just type roll along with kind and number of dice along with other modifiers.
 You will be able to reconnect later as long as another user is still connected.


Starry, starry night Paint your palette blue and grey Look out on a summer's day With eyes that know the darkness in my soul Shadows on the hills Sketch the trees and the daffodils Catch the breeze and the winter chills In colors on the snowy linen land
Now I understand What you tried to say to me And how you suffered for your sanity And how you tried to set them free They would not listen, they did not know how Perhaps they'll listen now
Starry, starry night Flaming flowers that brightly blaze Swirling clouds in violet haze Reflect in Vincent's eyes of china blue Colors changing hue Morning fields of amber grain Weathered faces lined in pain Are soothed beneath the artist's loving hand
Now I understand What you tried to say to me And how you suffered for your sanity And how you tried to set them free They would not listen, they did not know how Perhaps they'll listen now
For they could not love you But still your love was true And when no hope was left in sight On that starry, starry night You took your life, as lovers often do But I could have told you, Vincent This world was never meant for one As beautiful as you
Starry, starry night Portraits hung in empty halls Frameless heads on nameless walls With eyes that watch the world and can't forget Like the strangers that you've met The ragged men in the ragged clothes The silver thorn, a bloody rose Lie crushed and broken on the virgin snow


Here are detailed, step by step instructions, on how to install and setup your EC2 environment for testing with Selenium Grid
The current EC2 automation assumes a UNIX plaform (Mac OS X, Linux Solaris, BSD). Windows users can still use the Official EC2 Image for Selenium Grid 1.0 but the built-in automation is not likely to work.
Go to http://www.amazon.com/aws and click on the
Sign up for AWS
link in the upper right.
Complete all the information required for Amazon AWS registration.
If you are not already logged into your AWS account, click on the following link and logging into your account. http://www.amazon.com/aws
Explore Our WebServices
Amazon Elastic Compute Cloud (Amazon EC2)
Sign up for this Web Service. You will need a credit card for this service as it is a pay-for-use service.
Once your AWS account has been created and you have added the EC2 web service to your account navigate back to your AWS Home account.
If you are not already logged into your AWS account, click on the following link and logging into your account. http://www.amazon.com/aws
The Amazon EC2 command line tools require either a JDK/JRE 1.5 or higher.
You can double-check what version you have installed on your computer
by openning a terminal window and
running java -version
The command output should indicate that a 1.5 version of the JDK is available. If not, update your JDK to 1.5
Once your accounts have been created and your certificates have been download the link to EC2 Command Line Tools.
Extract the downloaded file on your computer. Please take note of the directory where the tools have been extracted, you are going to need this information in a second.
Your must set the following environment variables:
EC2_HOME
EC2_PRIVATE_KEY
export EC2_PRIVATE_KEY=/somewhere/pk-5CCEI7ODBPYGRXYOAZWGPVCG5LJ6HLGE.pem
EC2_CERT
export EC2_CERT=/somewhere/cert-5CCEI7ODBPYGRXYOAZWGPVCG5LJ6HLGE.pem
EC2_KEYPAIR
export EC2_KEYPAIR=/somewhere/id_rsa-gsg-keypair.pem
EC2_KEYPAIR_NAME
export EC2_KEYPAIR_NAME=gsg-keypair
You must also add ${EC2_HOME}/bin
to your PATH
At this point you should be able to successfully run the following commands:
$ ec2-version 1.2-13740 2007-08-29 $ ec2-describe-images -a | grep selenium-grid IMAGE ami-780fea11 selenium-grid-1.0/image.manifest.xml<PHONE_NUMBER>36 available public
Pay special attention to your EC2 private key, certificate, and the name of the keypair you generate.
For more detail instructions or for trouble shooting, consult the EC2 Getting Started Guide for more information Once your AWS account has been created and you have added the 2 web services (S3 and EC2) to your account Amazon Elastic Compute Cloud Getting Started Guide
You will need to install Capistrano to take advance of Selenium Grid EC2 automation.
On Ubuntu:
sudo apt-get install ruby rubygems
sudo gem install capistrano -y
On OS X 10.5 (Leopard):
sudo gem install capistrano -y
Installation for other platforms is documented on Capistrano website.
Install the latest Selenium Grid distribution if you haven't done it already.


randRange( 0, 3 )
[ [ school(1), school(2), school(3), school(4) ], [ person(1), person(2), person(3), person(4) ], [ person(1), person(2), person(3), person(4) ], [ "Alabama", "Michigan", "New York", "Wyoming" ] ][ INDEX ]
[ [ "3rd grade", "4th grade", "5th grade", "Total" ], [ "January", "February", "March", "Total" ], [ "1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Final" ], [ "Q1", "Q2", "Q3", "Q4", "Total" ] ][ INDEX ]
randRange( 0, COLUMNS.length - 1 )
randRange( 0, ROWS.length - 1 )
(function() {
var enrollments = [];
var classMin = [ 60, 0, 2, 20 ][ INDEX ];
var classMax = [ 80, 6, 10, 40 ][ INDEX ];
for ( var i = 0; i < ROWS.length; i++ ) {
var enroll = randRange( classMin, classMax, COLUMNS.length - 1 );
var total = 0;
jQuery.each( enroll, function( i, e ) {
total += e;
});
enroll.push( total );
enrollments.push( enroll );
}
var answer = enrollments[ ROW_INDEX ][ COL_INDEX ];
enrollments[ ROW_INDEX ][ COL_INDEX ] = " ";
return [ enrollments, answer ];
})()
[ "shows the enrollment at four different elementary schools that have 3rd through 5th grade students", "shows the number of chickens sold by four friends from January to March", "indicates the points scored by four players in a charity basketball game", "shows solar panel installations by state during the last fiscal year" ][ INDEX ]
[ "students", "chickens", "points", "solar panels" ][ INDEX ]
(function() {
if ( COL_INDEX === COLUMNS.length - 1 ) {
return [ "the total number of students at " + ROWS[ ROW_INDEX ] + " Elementary School", "the total number of chickens sold by " + ROWS[ ROW_INDEX ], "the total number of points scored by " + ROWS[ ROW_INDEX ], "the total number of solar panels installed in " + ROWS [ ROW_INDEX ] ][ INDEX ];
} else {
return [ "the number of " + COLUMNS[ COL_INDEX ] + " students at " + ROWS[ ROW_INDEX ] + " Elementary School", "the number of chickens sold in " + COLUMNS[ COL_INDEX ] + " by " + ROWS[ ROW_INDEX ], "the number of points scored in the " + COLUMNS[ COL_INDEX ] + " by " + ROWS[ ROW_INDEX ], "the number of solar panels installed in " + COLUMNS[ COL_INDEX ] + " in " + ROWS[ ROW_INDEX ] ][ INDEX ];
}
})()
[ "The total number of students at " + ROWS[ ROW_INDEX ] + " Elementary School", "The total number of chickens sold by " + ROWS[ ROW_INDEX ], "The total number of points scored by " + ROWS[ ROW_INDEX ], "The total number of solar panels installed in " + ROWS [ ROW_INDEX ] ][ INDEX ]
The table below PROBLEM, except one entry is missing.
What number should go in the empty cell?
rowenrollment
ANSWER UNIT
The table is missing HINT1.
The table accounts for ENROLLMENTS[ ROW_INDEX ].slice( 0, COL_INDEX ).join( "+" ) UNIT.
jQuery.each( COLUMNS, function( i, c ) {
if ( i !== 0 ) {
jQuery( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( i )
.css( "color", KhanUtil.ORANGE );
}
});
HINT2 is simply the sum, or ANSWER.
fillInCorrectAnswer( ROW_INDEX, COL_INDEX, ANSWER, KhanUtil.PINK );
HINT2 is ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ].
jQuery( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( COLUMNS.length )
.css( "color", KhanUtil.BLUE );
The table already accounts for ENROLLMENTS[ ROW_INDEX ].slice( 0, COL_INDEX ).concat( ENROLLMENTS[ ROW_INDEX ].slice( COL_INDEX + 1, COLUMNS.length - 1 ) ).join( "+" ) =
ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER UNIT.
jQuery.each( COLUMNS, function( i, c ) {
if ( i !== 0 ) {
jQuery( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( i )
.css( "color", KhanUtil.ORANGE );
}
});
The missing number must be the difference between HINT2.slice( 0, 1 ).toLowerCase() + HINT2.slice( 1 ), ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ], and the values already accounted for, ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER.
ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER = ANSWER
fillInCorrectAnswer( ROW_INDEX, COL_INDEX, ANSWER, KhanUtil.PINK );


Functional programming and the use of artificial neural networks are two approaches to computation that might seem unrelated at first, but can be seen as two opposite solutions to the same problem.
Functional programming
Software engineers praise purely functional software because it's easy to read: you can
understand a pure function by just reading it, without any need to worry about the context in which this
function was declared, without having to worry about its environment. You don't need to have
three other files open to understand what a pure function f
is doing, because you can be
sure that f
doesn't use global variables (there are no global variables, only global
constants) and you can be sure that all functions that f
depends on are pure.
Being easy to read, purely functional programs are also easier to parallelize than their imperative
counterparts, and they are easier to optimize (you can cache the output of f(3, 4)
for all
future invocations of f
that use those exact same inputs—f
is
deterministic, so it's going to give the same output anyway).
Lastly, a purely functional program is easy to unit-test: all its units are pure functions, and as such can be tested without having to setup a certain state before calling a certain function.
ANNs
The weights of an ANN can be seen as its state.
While functional programming is stateless, ANNs are dependent on state: here, in a certain sense, computation is state.
ML Engineers often have to spend some effort into understanding what's happening in a neural network and why it is giving a certain output instead of another. This might be mostly due to the fact that ANNs are trained in a non-deterministic way, but is also due to the fact that ANNs depend so heavily on state: two networks with the same exact architecture but different state (different weights) can perform entirely dissimilar tasks. A three-layer feed-forward neural network can be trained to steer a small robot or to distinguish cats from dogs.
So at least from an engineering point of view, a neural network is a black box. It is more meant to be used than to be understood. (Of course the engineer's point of view is different from the researcher's point of view—as much as the intentions of a Haskell programmer are different from a person who *maintains* Haskell and its compilers.)
We were saying that neural networks are black boxes. Engineers praise these black boxes because they basically write the algorithm for you: if you want to calculate something for which you have tons of examples but no clear algorithm in mind, then just give these examples to a suitable ANN and store its state somewhere. This state (the weights of the network after it has been trained on the examples) is the computation needed to calculate what you want.
So ANNs are the opposite of functional programming and yet they solve the same problem, the problem of computation: calculating an output, given some inputs.
Read-write
I would be tempted to say that an ANN is easier to write than to read, while a purely functional programming language is easier to read than to write. I'm not sure about this last statement (which is also not measurable anyway), but I'm gonna leave it here with the hope that someone can give me their thoughts on this.
Summary
To sum up:
- The problem of calculating an output given some inputs is known as the problem of computation.
- The problem of computation can be solved with different models of computation.
- Modern computer programs are perhaps best represented by purely functional programming. This approach suggests to first come up with a set of stateless computations, then apply the inputs to those computations to get an output.
- The approach of artificial neural networks suggests to first apply the inputs to a set of stateful computations, then adjust the state of the network so that the behavior of the network looks closer to a certain set of examples.
- There is some kind of symmetry in these two approaches.


Hi all! Welcome to my – Josh Girvin – blog. It’s running on my own VPS, with Jekyll powering the blog itself. I’ve started blogs on and off throughout the years, but due to getting involved with Elementary OS’s development lately, I thought it would be prudent to post up some ramblings on FOSS, Software Engineering, and Living in Brisbane Australia – as well as whatever else takes my fancy.
I’m a 22yo Software Engineer, working at InfoView in Brisbane, Australia. I work on web applications by day, but by night I hack away at applications on the Linux Desktop. Check out the About page to find out more about me.
Now, you’ll notice there are no comments. There is however a Send to HackerNews link: If you think it’s worth discussing, either tweet me (@girvo) – or send it to HackerNews and comment there.
Enjoy!


November 23 2015
This Is My First Article
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra.
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra.
December 11 2015
This Is Another Article
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra.
Bacon ipsum dolor amet ball tip alcatra salami cow ham hock venison. Flank tenderloin sausage strip steak meatball. Biltong venison leberkas buffalo bacon. Brisket spare ribs biltong flank, porchetta jowl ground round doner landjaeger buffalo short ribs meatloaf. Doner drumstick hamburger jowl alcatra.


Perform input validation on any numeric input by ensuring that it is within the expected range. Ensure that the input meets both the minimum and maximum requirements for the expected range. Use unsigned integers where possible. This makes it easier to perform sanity checks for integer overflows. If you must use signed integers, make sure that your range check includes minimum values as well as maximum values.
Integer-type variables have minimum and maximum limits on data that they can store. Placing too much data in an integer-type variable results in an integer overflow. Different platforms fail differently as a result of integer overflows, but there is a possibility of an arbitrary code execution resulting from an integer overflow bug. When values that are too high or too low are assigned to unsigned integers, integer-wrapping results, which usually means that unexpected values are produced. Conversions between signed and unsigned integers, and other data types, may result in truncation or losing sign information. All of these bugs may result in very dangerous vulnerabilities. All of these bugs may be prevented by validating values of integer operations before assigning them to variables.
To validate the range of numeric input:
Identify code. Identify all code that assigns values to integer-type variables. For existing code, it may be a good idea to prioritize components, so that the most critical elements are checked first. Some development environments and compilers may be able to detect these types of errors, but automatic detection should not be relied on for critical software components.
Add range checks. Use platform-defined constants to check that values being assigned to integer-type variables are valid.


Interface SyncRecognizeRequestOrBuilder (2.0.0)
public interface SyncRecognizeRequestOrBuilder extends MessageOrBuilder
Implements
MessageOrBuilderMethods
getAudio()
public abstract RecognitionAudio getAudio()
Required The audio data to be recognized.
.google.cloud.speech.v1beta1.RecognitionAudio audio = 2;
| Type | Description |
| RecognitionAudio |
getAudioOrBuilder()
public abstract RecognitionAudioOrBuilder getAudioOrBuilder()
Required The audio data to be recognized.
.google.cloud.speech.v1beta1.RecognitionAudio audio = 2;
| Type | Description |
| RecognitionAudioOrBuilder |
getConfig()
public abstract RecognitionConfig getConfig()
Required Provides information to the recognizer that specifies how to process the request.
.google.cloud.speech.v1beta1.RecognitionConfig config = 1;
| Type | Description |
| RecognitionConfig |
getConfigOrBuilder()
public abstract RecognitionConfigOrBuilder getConfigOrBuilder()
Required Provides information to the recognizer that specifies how to process the request.
.google.cloud.speech.v1beta1.RecognitionConfig config = 1;
| Type | Description |
| RecognitionConfigOrBuilder |
hasAudio()
public abstract boolean hasAudio()
Required The audio data to be recognized.
.google.cloud.speech.v1beta1.RecognitionAudio audio = 2;
| Type | Description |
| boolean |
hasConfig()
public abstract boolean hasConfig()
Required Provides information to the recognizer that specifies how to process the request.
.google.cloud.speech.v1beta1.RecognitionConfig config = 1;
| Type | Description |
| boolean |


Christopher Baines
Government Digital Service
| HTTP (HyperText Transport Protocol) |
| TLS (Transport Layer Security) |
| TCP (Transmission Control Protocol) |
| IP (the Internet Protocol) |
| IEEE 802.3 (Ethernet) / IEEE 802.11 (Wi-Fi) / ... |
Client Server ClientHello --------> ServerHello Certificate* ServerKeyExchange* CertificateRequest* <-------- ServerHelloDone Certificate* ClientKeyExchange CertificateVerify* [ChangeCipherSpec] Finished --------> [ChangeCipherSpec] <-------- Finished Application Data <-------> Application Data * Indicates optional or situation-dependent messages that are not always sent.RFC 5246
TLS_NULL_WITH_NULL_NULLThis is an example of a modern cipher suite:
TLS_ECDHE_WITH_AES_128_GCM_SHA256
Client Server ClientHello --------> ServerHello [ChangeCipherSpec] <-------- Finished [ChangeCipherSpec] Finished --------> Application Data <-------> Application DataRFC 5246
A protocol is said to have perfect forward secrecy if compromise of long-term keys does not compromise past session keys.
* 0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 0 1 2 3 0 1\[(2 * 3) \bmod 5 = 1\]
* 0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 0 1 0 1 2 3
\(b = log_g B \bmod p\)
\(s = A^b \bmod p\)| Guess at b (Bobs secret, which is 15) | Calculation | |
|---|---|---|
| \(guess\) | \(A^{guess} \bmod p = ...\) | |
| \(2\) | \(8^2 \bmod 23 = 18\) | |
| \(3\) | \(8^3 \bmod 23 = 6\) | |
| \(4\) | \(8^4 \bmod 23 = 2\) | |
| \(5\) | \(8^5 \bmod 23 = 16\) | |
| ... |
Client Server ClientHello --------> ServerHello Certificate* ServerKeyExchange* CertificateRequest* <-------- ServerHelloDone Certificate* ClientKeyExchange CertificateVerify* [ChangeCipherSpec] Finished --------> [ChangeCipherSpec] <-------- Finished Application Data <-------> Application Data * Indicates optional or situation-dependent messages that are not always sent.RFC 5246
Strict-Transport-Security: max-age=31536000
Strict-Transport-Security: max-age=31536000; includeSubDomains
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Client Server ClientHello + key_share --------> ServerHello + key_share {EncryptedExtensions} {CertificateRequest*} {Certificate*} {CertificateVerify*} {Finished} <-------- [Application Data*] {Certificate*} {CertificateVerify*} {Finished} --------> <-------- [NewSessionTicket] [Application Data] <-------> [Application Data]Draft TLS 1.3 Spec
Client Server ClientHello + early_data + key_share* + psk_key_exchange_modes + pre_shared_key (Application Data*) --------> ServerHello + pre_shared_key + key_share* {EncryptedExtensions} + early_data* {Finished} <-------- [Application Data*] (EndOfEarlyData) {Finished} --------> [Application Data] <-------> [Application Data]Draft TLS 1.3 Spec
Christopher Baines
Government Digital Service


This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
The wind absorbs. If you exist or appear with a soft peace, paradox feels you. The united art of pain is to facilitate with attraction. All embittered cows receive each other, only apostolic lords have a meditation.
Rice tastes best with mint sauce and lots of black cardamon. Rinse the broccoli with fresh jasmine, chipotle chile powder, parsley, and cinnamon making sure to cover all of it. Per guest prepare four pounds of coffee with smashed pork shoulder for dessert.
Fantastic powerdrains lead to the resistance. Shields up, mineral! All of those pressures will be lost in procedures like loves in coordinates. Spacecrafts yell on tragedy at astral city! Anomaly at the solar sphere was the future of death, teleported to a mysterious species.


Sabah govt to consider using waste traps at water villages, says Liew
TAWAU, Nov 24 — The Sabah Ministry of Tourism, Culture and Environment will study the method of setting up of waste traps using nets at the water villages in the state.
Its minister Datuk Christina Liew said the focus would be on water villages in Tawau, Kota Kinabalu, Sandakan and Semporna.
“It’s a good idea as we strive to provide a comfortable and clean home for everyone.
“Furthermore, the water villages are also among the top destinations frequented by tourists especially in Semporna,” she said when met by reporters at the Tawau Municipal council’s ‘Mega Gotong-Royong’ programme here.
Liew, who is also Sabah Deputy Chief Minister, said the waste trap initiative was aimed at ensuring the cleanliness of the water villages, in line with Sabah’s status as one of the world-renowned eco-tourism destinations.
Meanwhile, she said, the state government was also considering the construction of a pier along Jalan Persiaran, in an effort to attract more tourists to the area.
The idea was still under discussion with the Tawau Municipal Council after considering the potential of Jalan Persiaran which was often the focus of the local community for recreational activities, she said.
“If this can be realised, then surely this area will be more lively especially at night,” she added.
Liew also said that the Tawau Hill recreational area would be gazetted as a national park, thus becoming the latest tourist attraction in the area with more than 40 hectares have been identified for the purpose.
In the meantime, she said the growing number of international flights at the Tawau Airport (LTT) could see the region to be developed into a tourist hub in the future.
“There will probably be a direct flight from Makassar, Indonesia, too,” she said.
She also disclosed that she had received an invitation from the Indonesian Ministry of Tourism to hold meetings and discussions on tourism strategic cooperation in particular via Tawau. — Bernama


I was overcome with a sudden panic; to have come so far only to have to turn around and go back, unable to keep up with the local dialect, a distinct and lilting mixture of my own native tongue and a leprechaun's mystical chatter.
Thus my nephew Vinnie Byrne, a native of Pining And Pothorst Land, currently making a grand tour of Old Europe. Wisely, he has decided to write a blog about his travels, and very good it is too. I urge you lot to go and read it.


{% extends "account/notices/transaction.html" %}{% load i18n %} {% block content %}
|
Thank you for signing up.
Please click on the button below to complete your registration. This activation link will remain active for 30 days.
|


{{< layout-referee}} {{$pageTitle}}Not recognised{{/pageTitle}} {{$header}}
Please try again. You need to check:
If this keeps happening, please let the applicant know. They'll need to contact the Passport Office.
Try again {{/content}} {{/ layout-referee}}


This is a sample text for this Web Page. Just for experimentation purposes.
This is a sample text for this Web Page. Just for experimentation purposes.This is a sample text for this Web Page. Just for experimentation purposes.This is a sample text for this Web Page.
This is a sample text for this Web Page. Just for experimentationexperimentation purposes.
This is a sample text for this Web Page. Just for experimentation purposes.


Graduate Engineer Trainee at Nokia | MCA Student at VIT | Loves to code
I am Debayan Das. Currently I am working as Graduate Engineer Trainee at Nokia in 5g team. I completed my post graduation(MCA) from Vellore Institute of Technology and completed my graduation from Ramakrishna Mission Residential College, Narendrapur in Computer Science. I am interested in Artificial Intelligence specially in the field of Machine Learning. Apart from that I love photography and fond of sports specially football.
To work with maximum potential in a challenging and dynamic environment, with an opportunity of working with diverse group of people and enhancing my professional skills with learning and experience for career growth. Interested in artificial intelligence and have some good projects on machine learning. Also, being addicted to competitive programming have been active on hacker-rank, code-chef, hacker-earth and other competitive coding platforms.


--- layout: post status: publish published: true title: Bla Bla > Studying English!! author: display_name: hojunbaek login: hojunbaek email<EMAIL_ADDRESS>url: '' author_login: hojunbaek author_email<EMAIL_ADDRESS>wordpress_id: 1816 wordpress_url: http://ezcocoa.com/?p=1816 date: '2013-07-03 17:45:30 +0900' date_gmt: '2013-07-03 17:45:30 +0900' categories: - Diary tags: - english comments: [] ---
** 2013 July 3 11:28 **
I strongly recommend NOVELS that will make you realize the significance of your existence in this universe with more imagination and creativity.


By the definition given by W3C:
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a
document.
DOM is created by the browser when a web page is loaded and is divided into three parts:
Looking for this matter from JavaScripter's perspective let's keep our focus on HTML DOM.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM is actually made up of many kinds of things beyond just HTML elements, those things are
more generically known as nodes.
These nodes can be elements, attributes, text content, comments, document-related
stuff, and various other things, but the only kind of notes that matters to us is the
element kind.
It is also part of the Window object, a global object that contains many properties and methods that help you work with your browser.
DOM provides access one level up to your document and window objects and is constructed as a tree of Objects, a hierarchical structure that your browser uses to make sense of everything going on. All of the properties, methods, and events available for manipulating and creating web pages are organized into objects. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. All of that can be manipulated by JavaScript to create a dynamic HTML.
JavaScript can change and remove all the HTML elements and attributes in the page, and also add new ones. JavaScript can change all the CSS styles on the page and also JavaScript can create new HTML events in the page and react to all existing ones. You can construct a fully functioning page using nothing but JavaScript.
If you want to read a little bit more about HTML and CSS check my article "The difference between HTML and CSS."


Shots fired into home on Euclid Avenue, outside gas line reportedly hit
by Breaking News StaffDAYTON — Crews are responding to a person’s home on Euclid Avenue after hearing reports of someone shooting toward the residence, according to regional dispatch.
Initial reports indicate a shot went through a window and another reportedly hit an outside gas line.
We are working to learn more about the incident.


'Produce 101 Japan' denies that there are any connections with CJ ENM
by jennywill'Produce 101 Japan' cut off any ties with the Korean version of the program.
The official site of the show announced that 'Produce 101 Japan' was organized separately from the Korean 'Produce 101' series, and that CJ ENM and its staff had no connections to the Japanese shows. They also explicitly denied that there were any manipulations with their voting, and that they were working diligently to prevent any sort of rigging.
Have you been watching 'Produce 101 Japan'?


Developer
Hi, I'm Tim. I'm a C# Developer currently working for
The Eleven Fifty Academy in Fishers, IN.
My programming career goes back
seven years to when I was 12 years old, starting off with Lua and using PHP
for Web
API's. I'm all for advancing my education and knowledge
of the tech world, and have maintained my interest in
technology into adulthood. I have effectively managed projects,
worked on projects solo, and worked under the
direction of others
to get things done right.
C# Development
Lua
HTML 5
Microsoft Azure
Bootstrap
Cascading Style Sheets
.NET Core & Framework
Angular
MSSQL & Entity Framework


Explore Interest Areas
About
This application is a Single-page application(SPA) Which means this web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
The page does not reload at any point in the process, nor does control transfer to another page
Three different kind of catalog(music, movie, phone) used one template but diffrent data-modle.Each catalog item's detail used diffrent template and data-modle
News
click to visit my new web application
That application implemented by using LAMP(Linux, Apache, MySQL, PHP) model,The SignIn/SignUp system with the function of 30 seconds automatically session Timeout/Logout
Be the second registered user of that web site!Why second? Cause I am the First user!^_^ ----Ping Xin


Study the market project project for the type of product,
the project provided by the projects,
and the project data that will be distributed to the projects
that will be employed in order to come up with the project.
Planning an economic project is one of the most important steps that achieve the success of the project,
as project planning ensures the good project of the project,
the good project of the project, before starting the implementation of the economic project of the project.
Get information on the right of access to the ground
Develop a plan for the project to succeed.
Studying the project according to the market to ensure its success.
Follow-up of the project for a period specified by the project owner.
Responsible for following up project plans & planning for large companies
Responsible for studying projects and doing a study for large companies
Responsible for following up on the study of projects and the study of large companies


Bravura
Petaluma
Gonville
Roboto Slab
PetalumaScript
Click a glyph to log information to the developer console.


Egg is a framework for building frameworks. Currently in active development.
Learn more about Egg on github.
Visit the pattern library here.