Tutorial by Examples: web

Typescript & react & webpack

Installing typescript, typings and webpack globally npm install -g typescript typings webpack Installing loaders and linking typescript npm install --save-dev ts-loader source-map-loader npm link typescript Linking TypeScript allows ts-loader to use your global installation of TypeScript inste...

TypeScript • Using Typescript with React (JS & native)

Add a WebView to the UI

uwp • WebView

Open a website

MyWebView.Navigate(new Uri("http://www.url.com"));

uwp • WebView

webpack.config.js

install loaders npm install --save-dev ts-loader source-map-loader tsconfig.json { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx&quo...

TypeScript • Using TypeScript with webpack

Using SignalR with Web API and JavaScript Web App, with CORS support.

Objective: Use SignalR for notification between Web API, and TypeScript/JavaScript based Web App, where Web API and the Web App is hosted in different domain. Enabling SignalR and CORS on Web API: Create a standard Web API project, and install the following NuGet packages: Microsoft.Owin.Cors ...

signalr • Getting started with signalr

New web application with Luminus

Luminus is a Clojure micro-framework based on a set of lightweight libraries. It aims to provide a robust, scalable, and easy to use platform. With Luminus you can focus on developing your app the way you want without any distractions. It also has very good documentation that covers some of the majo...

clojure • Getting started with web development

Python Selenium take/save screenshot of webpage

from selenium import webdriver # Create a new cromedriver driver = webdriver.Chrome() # Go to www.google.com driver.get("https://www.google.com") # Saves a .png file with name my_screenshot_name to the directory that # you are running the program from. screenshot_name = "my_s...

selenium • Take a screenshot of a webpage

Concepts: identify concepts from a webpage (Node.js)

AlchemyLanguage can detect general concepts referenced in your content. The service returns Linked Data links for each concept and a URL to a relevant website when possible. This example requires AlchemyLanguage service credentials and Node.js Use a command-line interface to install the Wats...

ibm-watson-cognitive • AlchemyLanguage

Introduction to Java Web Start

The Oracle Java Tutorials summarize Web Start as follows: Java Web Start software provides the power to launch full-featured applications with a single click. Users can download and launch applications, such as a complete spreadsheet program or an Internet chat client, without going through lengt...

Java Language • Java deployment

C# Extensions to WebDriver

public static IWebDriver dismissAlert(this IWebDriver driver) { try { IAlert alert = driver.SwitchTo().Alert(); alert.Dismiss(); } catch {} return driver; } public static IWebDriver acceptAlert(this IWebDriver driver) { try { IAlert a...

selenium • Accepting popup alerts with Selenium

Java Selenium take/save screenshot of webpage and add on report

public void Screenshot() throws Throwable{ final byte[] screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES); scenario.embed(screenshot, "image/png"); // ... and embed it in the report. Thread.sleep(1000); } Alternately public static void captureSc...

selenium • Take a screenshot of a webpage

Loading a Webpage

var page = require('webpage').create(); page.open('http://www.google.com', function(status) { console.log("Status: " + status); var title = page.evaluate(function() { return document.title; }); console.log("Loaded page: " + title); phantom.exit(); });

phantomjs • Getting started with phantomjs

Web Page Using Materializecss

Here is an example of a basic page using the Materialize CSS framework which incorporates the grid system and materialboxed. <!DOCTYPE html> <html> <head> <title>Materializecss Example webpage</title>  <link href="ht...

materializecss • Getting started with materializecss

Encode Query String with `[System.Web.HttpUtility]::UrlEncode()`

$scheme = 'https' $url_format = '{0}://example.vertigion.com/foos?{1}' $qs_data = @{ 'foo1'='bar1'; 'foo2'= 'complex;/?:@&=+$, bar''"'; 'complex;/?:@&=+$, foo''"'='bar2'; } [System.Collections.ArrayList] $qs_array = @() foreach ($qs in $qs_data.GetEnumerator()...

PowerShell • URL Encode/Decode

Decode URL with `[System.Web.HttpUtility]::UrlDecode()`

Encoded with [uri]::EscapeDataString() First, we'll decode the URL and Query String encoded with [uri]::EscapeDataString() in the above example: https://example.vertigion.com/foos? foo2=complex%3B%2F%3F%3A%40%26%3D%2B%24%2C%20bar'%22& complex%3B%2F%3F%3A%40%26%3D%2B%24%2C%20foo'%22=bar2&am...

PowerShell • URL Encode/Decode

Basic Webclient with Provider

To get started we need a factory that produces WebClients. public class ClientFactory { private Map<String, WebClient> cache = new HashMap<>(); public enum RESTClient { PORTAL; } public WebClient fetchRestClient(RESTClient restClient) { if (th...

cxf • Getting started with cxf

Use your webcomponent in a template

import { Component } from '@angular/core'; @Component({ selector: 'myapp-about', template: `<my-webcomponent></my-webcomponent>` }) export class AboutComponent { }

Angular 2 • Use native webcomponents in Angular 2

Displaying Google Analytics data in your Website

This document explains how to get Google Access tokens and use them to get Google Analytics data to be displayed in our websites. Example: A live example is available in https://newtonjoshua.com note: Use the same gmail account for all the below steps. STEP 1: Set Up Google Analytics Foll...

google-analytics • Displaying Google Analytics data in your Website

Displaying GitHub timeline / feeds on your website

This document explains how to display your GitHub feeds/timeline on your website. Example: A live example is available at: https://newtonjoshua.com GitHub timeline: GitHub provides the public timeline for any user in Atom format. You can view your timeline at: https://github.com/{{GitHub...

github • Displaying GitHub timeline / feeds in your Website

Configure webpack

Create a file webpack.config.js in the root of your working directory Filename: webpack.config.js module.exports = { entry: __dirname + "/src/index.jsx", devtool: "source-map", output: { path: __dirname + "/build", filename: "bund...

React • Setting Up React Environment