text:
---
layout: engineering-education
status: publish
published: true
url: /building-simple-maps-using-leaflet-js/
title: Building Simple Maps using Leaflet.js
description: This tutorial will show you how to build an easy and mobile-friendly map using the leaflet.js library.
author: femi-ige-muyiwa-oladele
date: 2021-09-02T00:00:00-10:31
topics: [Languages]
excerpt_separator: <!--more-->
images:

  - url: /engineering-education/building-simple-maps-using-leaflet-js/hero.jpg
    alt: Building Simple Maps using Leaflet.js Example Image
---
Leaflet.js is an open-source JavaScript library used to build mobile-friendly and lightweight maps. Leaflet.js is easily used to create maps.
<!--more-->
The library also supports many plugins which include, base map providers, search and popups, and layer switching controls.
It assists JavaScript developers in building web mapping and web-GIS functionalities.

Leaflet.js makes it easier to build geoportals such as the [Coordinate Reference Systems (CRS)](https://cran.r-project.org/web/packages/eRTG3D/vignettes/v6.html).
It has been used to build web applications such as the [World Weather App](https://github.com/Christophler/EngHack2021-WorldWeatherApp), which is an app built for getting weather data in a specific location.

This tutorial will show you how to build an easy and mobile-friendly map using the leaflet.js library.

### Prerequisites
To follow this guide, the reader should understand:
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
- [HTML (Hypertext Markup Language)](https://developer.mozilla.org/en-US/docs/Web/HTML).
- [CSS (Cascading Style Sheet)](https://developer.mozilla.org/en-US/docs/Web/css).
- Code editors like [*Visual studio code*](https://code.visualstudio.com/download), and [*Sublime text*](https://www.sublimetext.com/3).

### Goal
In a moment, we will guide you on how to create an easy `OSM` map layer using leaflet.js and how to plot markers on them. We will also add a simple layer control feature to add some sparkle to the map layout. At the end of this guide, the reader should be able to:

- Integrate leaflet.js using its unique content delivery network (CDN).
- Create an easy `OSM` map layer.
- Plot markers on the map layer.
- Add a simple layer control.

### Setting up the environment
First, we will need to set up the environment. This involves loading the leaflet JavaScript and CSS files into our project. We can do this in three ways:
- Using Leaflet's unique Content Delivery Network (CDN).
- Using JavaScript's package manager.
- And lastly, the conventional method of downloading both the Leaflet JavaScript and CSS file to your local storage.

But in this tutorial, we will only focus on the first two methods.

#### Using Leaflet's CDN
The CDN is a hosted version of Leaflet. To use it, place the content below in the `head` section of your HTML code:

```html
<link rel="stylesheet"<EMAIL_ADDRESS>/>
<script<EMAIL_ADDRESS>```
To avoid potential security problems, it is necessary we enable the [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) security feature when using Leaflet from a CDN.

```html
    <link rel="stylesheet"<EMAIL_ADDRESS>        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script<EMAIL_ADDRESS>        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
```
#### Using the JavaScript package manager
If we are using the `npm` package manager, we can fetch a local copy of the leaflet by running:

```bash
npm install leaflet
```
To use `npm`, we would need to follow the steps below:
- [Download and install node](https://nodejs.org/en/).
- Run the following command:

```bash
npm install
```
Once completed, we can move on to the next stage.

### Getting Started
#### Creating Map Container
In this guide, we will work with the Visual Studio code. We would also integrate our leaflet using the CDN. We would start by creating an HTML file within our code editor. Then, we would initialize our HTML file, and add our CDN:

```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet"<EMAIL_ADDRESS>        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script<EMAIL_ADDRESS>        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>

</body>
</html>
```
We will create a div within the body and give it an id name called `map`. The div acts as a container when we initialize the map.

```html
<div id="map"></div>
```
In the head section, we create a style tag with the div id's name and style it. You can style it in any way you want. In this tutorial, we will give it basic styling. It is important that when styling your map, the div id should have a defined height. Otherwise, the map won't show.

```css
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        width: 100%;
        height: 100vh;
    }
</style>
```
At the moment, our code looks like this:

```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet"<EMAIL_ADDRESS>        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script<EMAIL_ADDRESS>        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

    <div id="map"></div>

</body>
</html>
```

#### Initializing and creating the map layer
To initialize the map, all we need to do is create a variable name called *map_init* and write the following code. For more information on initialization, you can check the leaflet documentation [here](https://leafletjs.com/reference-1.7.1.html).

```js
var map_init = L.map('map',{
    center: [9.0820, 8.6753],
    zoom:8
});
```
`L.map` represents a map object given the DOM ID of a `<div>` element. The values in the center variable name are known as the `coordinates`. The values `9.0820` and `8.6753` represent the latitude and longitude, respectively. They are coordinate systems used in determining or describing any position or place on the earth's surface.

In leaflet.js, the zoom level is as essential as the latitude and longitude. The zoom level determines the detail specifications. Meaning, lower zoom level shows the entire continent while higher zoom levels display details of a city. So we can use different zoom levels. It all depends on our focus at the moment.

> Note: We used the div id name `map` to prevent errors like this:
> ```bash
> Uncaught Error: Map container not found.
> ```

We then add our map layer using tiles. A tile is a map displayed in a web browser by seamlessly joining dozens of individually requested image or vector data files. We would use the OSM (Open Street Map) map layer because of its easily understandable structure and simplicity. If you want to explore more, you can check on other tile layers compatible with Leaflet [here](https://leaflet-extras.github.io/leaflet-providers/preview/).

```js
var osm = L.tileLayer ('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo (map_init);
```

`addTo` is a method used for adding data to a container. So, if you are planning on creating another tile layer, make sure you comment on the `addTo` method first and add it to your new tile layer. As we go on, we will learn how to put each tile layer in a layer controller.

So let us continue.

#### Adding markers
Markers are standard symbols used to mark a single location on the map. Let's use the code below to create a standard marker icon on the coordinates shown below:

```js
var marker = L.marker([9.0820, 8.6753]).addTo(map_init);
```
`L.marker` represents a marker object given a coordinate (longitude and latitude). We can add as many as we want as long as we have a geographic point.

For the markers, we can use a different icon. It is all based on preference. If you want to use another icon, you have to follow the steps below to create the icon:

```js
var greenIcon = L.icon({
iconUrl: 'filename',
});
```
- To add the newly created `greenIcon` marker to the map, we type in the following:

```js
L.marker([9.0820, 8.6753],  {icon: greenIcon}).addTo(map_init)
```

Adding markers via coordinates is not the only spatial representation that is done using the leaflet library. Polygons, circles can also be done using a group of coordinates or coordinates.

To add a polygon, copy the code below:
```js
var polygonPoints = [
    [37.786617, -122.404654],
    [37.797843, -122.407057],
    [37.798962, -122.398260],
    [37.794299, -122.395234]];
var poly = L.polygon(polygonPoints).addTo(map_init);
```

To add circles, you can copy the code below:
```js
var circle = L.circle([37.786542, -122.386022], {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
    radius: 50.0
}).addTo(map-init);
```
The key *color* with the value *red* determines the color of the circle. The key *fillOpacity* determines the transparency within the circle's border (the higher the opacity, the less transparent it is). The key *radius* determines the circumference of the circle (the higher the radius, the larger the circumference).

At the moment, we have been able to integrate leaflet.js using its unique content delivery network (CDN), create an easy osm map layer, and plot markers on the map layer.

#### Adding layer controller
In this section, we will show you how to add a layer controller. Layer controllers are there to give your map an orderly look. It also gives you a choice to select which feature you would like to view at that moment.

To get this started, we create a variable name called *Basemaps* and another variable name called *Overlaymaps*. In the first variable, we create an object with key *"OSM"* and value *osm* (the variable name for our tile layer). For the second variable, we will do mostly the same as the first, but with different keys and values. The key is *"Marker"*, the value is *marker* (the variable name for our marker).

Example:
```js
var Basemaps = {
    "OSM": osm;
}
var Overlaymaps = {
    "Marker": marker;
}
L.control.layers(Basemaps, Overlaymaps).addTo(map_init);
```
Finally, we have our final code as follows:

```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet"<EMAIL_ADDRESS>    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script<EMAIL_ADDRESS>    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

    <div id="map"></div>

</body>
<script>
    var map_init = L.map('map',{
        center: [9.0820, 8.6753],
        zoom:8
    });
    var osm = L.tileLayer ('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo (map_init);
    var marker = L.marker([9.0820, 8.6753]).addTo(map_init);
    var Basemaps = {
        "OSM": osm
    }
    var Overlaymaps = {
        "Marker": marker
    }
    L.control.layers (Basemaps, Overlaymaps).addTo (map_init);
</script>
</html>
```
If we run the above HTML code in our browser, we would have our simple, lightweight web map like the image shown below:

![browser image](/engineering-education/building-simple-maps-using-leaflet-js/mapimage.PNG)

The coordinates used are the absolute location of Nigeria. As we mentioned earlier, coordinates determine any position on the earth's surface. So, if you want to get the coordinates of any location, you can follow the steps below:

- On your computer, open [Google Maps](https://www.google.com/maps/).
- Right-click on any place or area on the map.
- Select the latitude and longitude. The coordinates will automatically be copied.

### Conclusion
In conclusion, we learned how to add tile layers, plot markers,  plot polygons and circles, create a layer control, and bring all these components together to have a simple map, all with leaflet.js.

You can find the entire code [here](https://github.com/muyiwexy/Leafletmap).

### Further reading
- [The Leaflet documentation](https://leafletjs.com/reference-1.7.1.html)

---
Peer Review Contributions by: [Willies Ogola](/engineering-education/authors/willies-ogola/)

repository: mbuguac/engineering-education

gha_language: SCSS

repo_name: mbuguac/engineering-education


text:
# My Portfolio
[Deployed Site](https://morning-everglades-46777.herokuapp.com/)

![Followers badge](https://img.shields.io/github/followers/JonesElliott?label=Followers&style=social) ![MIT license badge](https://img.shields.io/badge/License-MIT-green) ![Potato Code badge](https://img.shields.io/badge/Contains-Potato%20Code-blue)

## Description
A book searching application that utilizes Google Books and is built with the React framework and MongoDB.

![example image](./documentation/example.png)

## License

This project is licensed under the MIT License.

license: MIT

repository: JonesElliott/book-nook

branch_name: refs/heads/main

extension: md

license_type: permissive

repo_name: JonesElliott/book-nook


text:
# XeroRuby::PayrollUk::Address

## Properties

Name | Type | Description | Notes
------------ | ------------- | ------------- | -------------
**address_line1** | **String** | Address line 1 for employee home address |
**address_line2** | **String** | Address line 2 for employee home address | [optional]
**city** | **String** | Suburb for employee home address |
**post_code** | **String** | PostCode for employee home address |
**country_name** | **String** | Country of HomeAddress | [optional]

## Code Sample

```ruby
require 'XeroRuby::PayrollUk'

instance = XeroRuby::PayrollUk::Address.new(address_line1: 123 Main St,
                                 address_line2: Apt 4,
                                 city: Fulham,
                                 post_code: SW6 6EY,
                                 country_name: United Kingdom)
```

repository: XeroAPI/xero-ruby

branch_name: refs/heads/master

gha_language: Ruby

gha_license_id: MIT

repo_name: XeroAPI/xero-ruby


text:
2020.2 Versal™ Inter-NoC Interface-Connecting Multiple NoC Instances

Building and Running the Design

# Description of the Design
This design uses the Inter-NoC Interface (INI) to connect two AXI4 traffic generators to two
independent, integrated DDR4 memory controllers (DDRMCs). Each traffic generator is
connected to a single AXI NoC. Each of those AXI NoCs uses two INI output ports to fan out to
two AXI NoCs. Those two AXI NoCs each contain two INI input ports and one integrated
DDRMC. The result is a full crossbar between the two traffic generatrors and two DDRMCs. The
Quality of Service (QoS) requirements are set on the memory controller side of the crossbar.
The traffic generators will be configured to form a double buffer structure with one acting as the
data producer and the other as the consumer. The traffic patterns will be controlled with a userdefined
traffic file provided with this tutorial.

Note: This lab is provided as an example only. Figures and information depicted here might vary from the
current version.

# Create the Design
Follow the steps given in Module_01 to open the 2020.2 release of Vivado®, create a new project with
the **xcvc1902-vsva2197-1LP-e-S** part, and create an empty block design.
Follow the steps below to construct the IP integrator design:
1. Copy the file `lesson04.csv` to the working directory. This file defines the simulated data
traffic pattern used by the traffic generators.
2. On the IP integrator canvas, instantiate four instances of the AXI NoC IP. Configure each as
follows:

Table: AXI NoC Configurations

|Instance| Number of AXI Slave Interfaces| Number of AXI Master Interfaces |Number of Inter-Noc Slave Interfaces|Number of Inter-Noc Master Interfaces|Memory Controller|Connectivity |
|--------|:------------------------------:|:------------------------------:|:----------------------------------:|:-----------------------------------:|:---------------:|:-----------:|
|axi_noc_0|   1                           |   0                            | 0 | 2 | None | S00_AXI => M00_INI, M01_INI|
| axi_noc_1 | 0 | 0 | 2 | 0 | Single (with 2 Number of Memory Controller Ports) | S00_INI => MC Port 0, S01_INI => MC Port 1 |
| axi_noc_2 | 1 | 0 | 0 | 2 | None  | S00_AXI => M00_INI , M01_INI|
| axi_noc_3 | 0 | 0 | 2 | 0 | Single Memory Controller (with 2 Number of Memory Controller Ports) | S00_INI => MC Port 0, S01_INI => MC Port 1|

``` tcl

set_property -dict [list CONFIG.NUM_MI {0} CONFIG.NUM_NMI {2}] [get_bd_cells axi_noc_0]
set_property -dict [list CONFIG.CONNECTIONS {M01_INI { read_bw {1720} write_bw {1720}} M00_AXI { read_bw {1720} write_bw {1720}} M00_INI { read_bw {1720} write_bw {1720}} }] [get_bd_intf_pins /axi_noc_0/S00_AXI]
set_property -dict [list CONFIG.ASSOCIATED_BUSIF {S00_AXI}] [get_bd_pins /axi_noc_0/aclk0]
set_property -dict [list CONFIG.NUM_SI {0} CONFIG.NUM_MI {0} CONFIG.NUM_NSI {2} CONFIG.NUM_CLKS {0} CONFIG.NUM_MC {1} CONFIG.NUM_MCP {2} CONFIG.LOGO_FILE {data/noc_mc.png}] [get_bd_cells axi_noc_1]
set_property -dict [list CONFIG.CONNECTIONS {MC_0 { read_bw {1720} write_bw {1720} read_avg_burst {4} write_avg_burst {4}} }] [get_bd_intf_pins /axi_noc_1/S00_INI]
set_property -dict [list CONFIG.CONNECTIONS {MC_1 { read_bw {1720} write_bw {1720} read_avg_burst {4} write_avg_burst {4}} }] [get_bd_intf_pins /axi_noc_1/S01_INI]
set_property -dict [list CONFIG.NUM_MI {0} CONFIG.NUM_NMI {2}] [get_bd_cells axi_noc_2]
set_property -dict [list CONFIG.CONNECTIONS {M01_INI { read_bw {1720} write_bw {1720}} M00_AXI { read_bw {1720} write_bw {1720}} M00_INI { read_bw {1720} write_bw {1720}} }] [get_bd_intf_pins /axi_noc_2/S00_AXI]
set_property -dict [list CONFIG.ASSOCIATED_BUSIF {S00_AXI}] [get_bd_pins /axi_noc_2/aclk0]
set_property -dict [list CONFIG.NUM_SI {0} CONFIG.NUM_MI {0} CONFIG.NUM_NSI {2} CONFIG.NUM_CLKS {0} CONFIG.NUM_MC {1} CONFIG.NUM_MCP {2} CONFIG.LOGO_FILE {data/noc_mc.png}] [get_bd_cells axi_noc_3]
set_property -dict [list CONFIG.CONNECTIONS {MC_0 { read_bw {1720} write_bw {1720} read_avg_burst {4} write_avg_burst {4}} }] [get_bd_intf_pins /axi_noc_3/S00_INI]
set_property -dict [list CONFIG.CONNECTIONS {MC_1 { read_bw {1720} write_bw {1720} read_avg_burst {4} write_avg_burst {4}} }] [get_bd_intf_pins /axi_noc_3/S01_INI]
```
3. Make the following connections:
* `axi_noc_0 M00_INI` to `axi_noc_1 S00_INI`
* `axi_noc_0 M01_INI` to `axi_noc_3 S01_INI`
* `axi_noc_2 M00_INI` to `axi_noc_3 S00_INI`
* `axi_noc_2 M01_INI` to `axi_noc_1 S01_INI`

After regenerating the layout, the canvas should look as follows.
![after INI connections](images/layout_after_INI_connection.PNG)

4. Click **Run Block Automation** (on the green banner at the top of the canvas).
5. Click **axi_noc_0** to enable AXI Performance Monitor for `PL-2-NOC AXI-MM` pins. Now click **axi_noc_2** and enable AXI Performance Monitor for `PL-2-NOC AXI-MM` pins.
6. Click **All Automation** on Run Block Automation. Set the AXI slave interfaces to **0** in the General tab for `axi_noc_1` and `axi_noc_3`. Followed by **Run Connection Automation**.
7. Click **OK**.
8. Configure the `noc_tg` to use the user defined traffic pattern defined by the `lesson04.csv`
file previously copied to the working directory. This can be done by double-clicking the
**noc_tg** instance to bring up the configuration dialog box and then under the Non-synthesizable TG Options tab, setting the parameter AXI Test/Pattern Types to **user defined**.
pattern by clicking the pull-down menu.
9. Use the file browser to select the **Path to User Defined Pattern File (CSV)** option to set the
path to the CSV file.
10. Click **OK** to dismiss the configuration dialog box. And repeat setps 9 and 10 for `noc_tg_1`.
11. Click **Run Connection Automation** to complete the wiring of the clocks and resets by
selecting **All Automation** in the Run Connection Automation dialog box.
12. Click **OK** to dismiss the dialog box.
13. The Run Connection Automation link becomes active. Connect the clock and
reset pins of the Clocking Wizard. Click the link, select **All Automation** and click **OK**.
14. Regenerate the layout. The canvas should now look as follows.
![layout after config NoC TG](images/layout_after_noc_tg_config.PNG)

15. Double click on **axi_noc_3** to bring up the configuration screen.
16. On the General tab, set DDR Address Region 0, to **DDR CH1**.
17. Click **OK** to dismiss the dialog box.
18. Open the Address Editor and click **Assign All**. Each traffic
generator sees the same memory at the same address, as shown in the following figure.
![Address Editor for TG](images/address_editor.PNG)
The TCL commands to set the addresses are:
```  tcl
set_property offset 0x0000000000000000 [get_bd_addr_segs {noc_tg_1/Data/
SEG_axi_noc_1_C1_DDR_LOW0}]
set_property offset 0x0000050000000000 [get_bd_addr_segs {noc_tg_1/Data/
SEG_axi_noc_3_C0_DDR_CH1}]
```
19. On the Diagram canvas, select the two AXI traffic generator output nets, M_AXI, and right
click to display the context menu.
20. Select **Mark Simulation**. This will mark the two AXI nets to appear as transactions in the
simulation waveform viewer.
21. Click **Run Validate Design** (**F6**) to validate.

# Simulate the Design
To prepare for simulation, create a top level design wrapper following the procedure from Module_01.
Click **SIMULATION** → **Run Simulation** → **Run Behavioral Simulation** from the Flow Navigator
pane. This will generate the simulation netlist and start up the Vivado simulator. With the traffic
parameters given above, the simulation will complete after approximately 46 μs. The resulting
waveform window showing the traffic generator AXI interfaces should appear as follows:
![Simulation results waveform](images/sim_results.PNG)

© Copyright 2020 Xilinx, Inc.

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.

XD028

repository: dharapxilinx/Vivado-Design-Tutorials

repo_name: dharapxilinx/Vivado-Design-Tutorials


text:
**This revision of the code does not work with documents that have anything in the XML file other than the strings. Make sure there are no comments or extra text. A sample XML file is supplied for reference on how to format your XML. Any other format of XML can not be guaranteed to work in this revision of the code.**

### Video Tutorial
A video Tutorial can be found here:
[Video Tutorial](https://youtu.be/w236mZxTCyA)

# To use:
In python 3, run `createCSV.py` and type the name of the XML document with the extension.
eg. `strings.xml`

This will create a folder (translationsOutput) and within that, a CSV file (generatedCSV) will be created.
Open that CSV file in Google Spreadsheets and wait for that to load, it may take a while depending on the amount of strings in your initial XML file.

Once the spreadsheet is done loading, save it as CSV file in the same folder as your python scripts.
- File
- Download as
- Comma-separated values (.csv, current sheet)

Then in python, run `createXML.py` and type the name of the new CSV file that was made from spreadsheet.
eg. `generatedCSV - generatedCSV.csv`

This will create a series of folders inside the translationsOutput folder, each containing the XML file with the translated strings.

These folders can be imported into Android Studio and used in your application.

If you would like for less than the 104 default langauges, the language codes can be removed from the language_codes.txt file.
A full reference of the codes/languages can be found here: https://cloud.google.com/translate/docs/languages

*I have only tested on Windows and Linux computers, both using Python 3. Not sure if works on MacOS*

repository: fadymach/XMLTranslator

repo_name: fadymach/XMLTranslator


text:
# [146. LRU Cache][title]

## Description

Design and implement a data structure for Least Recently Used (LRU) cache. It should support the following operations: get and put.

get(key) - Get the value (will always be positive) of the key if the key exists in the cache, otherwise return -1.
put(key, value) - Set or insert the value if the key is not already present. When the cache reached its capacity, it should invalidate the least recently used item before inserting a new item.

**Example 1:**

```
Input: a = "11", b = "1"
Output: "100"
```

**Example 2:**

```
Input: a = "1010", b = "1011"
Output: "10101"
```

**Tags:** Math, String

## 题意
> 设计LRU

## 题解

### 思路1
> 。。。。

```go

```

### 思路2
> 思路2
```go

```

## 结语

如果你同我一样热爱数据结构、算法、LeetCode，可以关注我 GitHub 上的 LeetCode 题解：[awesome-golang-leetcode][me]

[title]: https://leetcode.com/problems/two-sum/description/
[me]: https://github.com/kylesliu/awesome-golang-leetcode

repository: LeslieKuo/awesome-golang-leetcode

repo_name: LeslieKuo/awesome-golang-leetcode


text:
title: Laravel learnings: week 6
slug: laravel-learnings-week-6
status: published
date: April 21 2013 15:30
tags: laravel-weekly, laravel
-------
Small update this week. I also decided to change the name from my posts to just "Laravel" so I can post about Laravel in general and not just about Laravel 4 specifically.<!--more-->

## Laracon EU Announced

[Shawn McCool](https://twitter.com/shawnmccool) has announced the dates for Laracon EU last thursday in his Laravel talk for a PHP Amsterdam user group meeting. Mark your calendars! August 30 - 31 will be 2 days of Laravel awesomeness. The conference will take place at the Bimhuis venue in Amsterdam.

## Laravel Meetup 20/04

Last night we had a Laravel meetup in Amsterdam, organised by [Jeroen Gerits](https://twitter.com/JeroenGerits). We had a great time talking about Laravel and everyday things, having a few drinks and some dinner and hanging out. It was nice meeting other Laravel developers in person. Thanks to everyone who came out!

This will definitely not be the last one. Stay tuned for more meetups in the future!

## Session Driver Update

Laravel's default session driver changed so make sure to update your client side code!

https://twitter.com/laravelphp/status/324366028647837696

## Laravel 4 Generators: Scaffolding

[Jeffrey](https://twitter.com/jeffrey_way) added scaffolding support to his generators package. Your development workflow just became even faster!

https://twitter.com/jeffrey_way/status/324274663226232834

## Resources

- [Composer primer](http://daylerees.com/composer-primer) by [Dayle Rees](https://twitter.com/daylerees)
- [How to create a Facade in Laravel 4](http://fideloper.com/create-facade-laravel-4) by [Chris Fidao](https://twitter.com/fideloper)
- [Laravel 4 Vagrant Setup](https://github.com/duellsy/Laravel-4-Vagrant) by [Chris Duell](https://twitter.com/duellsy)
- [Why you should use a PHP Framework and why I’m using Laravel](http://juniorgrossi.com/why-you-should-use-a-php-framework-and-why-im-using-laravel/) by [Junior Grossi](https://twitter.com/junior_grossi)
- [Practical Laravel – payment integration – Stripe](http://maxoffsky.com/code-blog/practical-laravel-payment-integration-stripe/) by [Maksim Surguy](https://twitter.com/msurguy)

## Screencasts

- [Basic authentication](https://tutsplus.com/lesson/basic-authentication/) by [Tutsplus](https://tutsplus.com)

## Packages

- [Profiler package](https://github.com/loic-sharma/profiler) by [Loic Sharma](https://twitter.com/sharmaloic)


text:
# Change Log

All notable changes to this project will be documented in this file.
This change log is automatically generated based on commit messags. See
[Commit Message Guidelines](CONTRIBUTING.md#commit-message-guidelines)
for more information.

## [1.1.0](https://github.com/cmfcmf/docusaurus-search-local/compare/v1.0.0...v1.1.0) (2023-04-10)

### Features

- Add Dutch translations ([#178](https://github.com/cmfcmf/docusaurus-search-local/issues/178)) ([0c3b492](https://github.com/cmfcmf/docusaurus-search-local/commit/0c3b492ecaeb8969f69cd27de98576b5e20c26a8))

### Bug Fixes

- Re-add support for using this plugin on Windows ([0337ada](https://github.com/cmfcmf/docusaurus-search-local/commit/0337ada1ecf3e188eac636dfbc47a363a72008e6)), closes [#175](https://github.com/cmfcmf/docusaurus-search-local/issues/175) [#179](https://github.com/cmfcmf/docusaurus-search-local/issues/179)

## [1.0.0](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.11.0...v1.0.0) (2023-02-26)

### ⚠ BREAKING CHANGES

- The minimum supported Docusaurus version is now v2.0.0.

### Features

- Add Danish translations ([deb44b7](https://github.com/cmfcmf/docusaurus-search-local/commit/deb44b7e20e08747b4e7a744e7d21a88e338903b))
- Create Norwegian translation ([f1833f3](https://github.com/cmfcmf/docusaurus-search-local/commit/f1833f3da543b7f723e04bd0ff9f5d0fd511f686))
- Create Russion translation, closes [#158](https://github.com/cmfcmf/docusaurus-search-local/issues/158) ([9917a13](https://github.com/cmfcmf/docusaurus-search-local/commit/9917a135651f1ab292a8f27e6e3b57af12d94265))
- Create Taiwanese translation ([4437359](https://github.com/cmfcmf/docusaurus-search-local/commit/4437359eca9396603f574396bd6609587222ee25))
- Create Thai translation ([#164](https://github.com/cmfcmf/docusaurus-search-local/issues/164)) ([ba2d41e](https://github.com/cmfcmf/docusaurus-search-local/commit/ba2d41ebf45f10e2810a44d6800daca18d03f17a))

### Bug Fixes

- Correctly extract page titles when not specified in frontmatter, closes [#146](https://github.com/cmfcmf/docusaurus-search-local/issues/146) ([1f33151](https://github.com/cmfcmf/docusaurus-search-local/commit/1f33151bbef355a82361734f434e65af624b5ac2))
- Do not generate .d.ts files, which break `docusaurus write-translations`, closes [#145](https://github.com/cmfcmf/docusaurus-search-local/issues/145), [#129](https://github.com/cmfcmf/docusaurus-search-local/issues/129), [#163](https://github.com/cmfcmf/docusaurus-search-local/issues/163), [#167](https://github.com/cmfcmf/docusaurus-search-local/issues/167) ([c09cc94](https://github.com/cmfcmf/docusaurus-search-local/commit/c09cc942bd2e4078fcd517b965f63848079f5007))
- Fix potential error when calculating paths, closes [#136](https://github.com/cmfcmf/docusaurus-search-local/issues/136) ([26f1b71](https://github.com/cmfcmf/docusaurus-search-local/commit/26f1b7132087211ef4211f60f55dbe3d9ab4b2fe))
- Resolve warning regarding `render` parameter in autocomplete, closes [#148](https://github.com/cmfcmf/docusaurus-search-local/issues/148) ([66d41e4](https://github.com/cmfcmf/docusaurus-search-local/commit/66d41e479f8fab7be13047d1761b1e4f6be562c9))
- Support Yarn pnp, closes [#139](https://github.com/cmfcmf/docusaurus-search-local/issues/139) ([045d534](https://github.com/cmfcmf/docusaurus-search-local/commit/045d5346470eea2a5a30dd944e138ef0c5400032))

### Other

- Update to Docusaurus v2 ([f8619b7](https://github.com/cmfcmf/docusaurus-search-local/commit/f8619b72ec748ac084b53cf7c88157419a27863a))

# [0.11.0](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.10.0...v0.11.0) (2022-06-12)

### Bug Fixes

- Correct alignment of search input, closes [#117](https://github.com/cmfcmf/docusaurus-search-local/issues/117) ([f29dc02](https://github.com/cmfcmf/docusaurus-search-local/commit/f29dc02c475980509599018bae3ff45beecad6f3))

### chore

- Update dependencies ([1fe21f7](https://github.com/cmfcmf/docusaurus-search-local/commit/1fe21f768b957140ad9fcbd1ac05cebfbee48b3a))

### Features

- Add Czech translation ([#115](https://github.com/cmfcmf/docusaurus-search-local/issues/115)) ([cc7c724](https://github.com/cmfcmf/docusaurus-search-local/commit/cc7c7249b3e28cf5cb3c958932144618cd211ae6))
- Add Slowak translation ([#116](https://github.com/cmfcmf/docusaurus-search-local/issues/116)) ([970ba86](https://github.com/cmfcmf/docusaurus-search-local/commit/970ba8656bd1380385e3bd7ea10009fa3c108d4f))
- Add Swedish Translation ([#105](https://github.com/cmfcmf/docusaurus-search-local/issues/105)) ([72fdcd8](https://github.com/cmfcmf/docusaurus-search-local/commit/72fdcd80c555a70d4791a5930083fe93ed8c2e7d))
- Make number of search results configurable, closes [#122](https://github.com/cmfcmf/docusaurus-search-local/issues/122) ([a9d2faa](https://github.com/cmfcmf/docusaurus-search-local/commit/a9d2faa3847f9762e8498c253b89f04bdaf7ab2a))
- support Docusaurus v2.0.0-beta.17, update dependencies, closes [#102](https://github.com/cmfcmf/docusaurus-search-local/issues/102), closes [#99](https://github.com/cmfcmf/docusaurus-search-local/issues/99) ([84c72c3](https://github.com/cmfcmf/docusaurus-search-local/commit/84c72c3d98c6e0d578c7799274f4a33a896c1425))
- Support indexing of docs and blog tags, closes [#121](https://github.com/cmfcmf/docusaurus-search-local/issues/121) ([df0a81e](https://github.com/cmfcmf/docusaurus-search-local/commit/df0a81ee07c84f15c8d0095e31aa827a45289c19))

### BREAKING CHANGES

- The default height of the search input is now 36px. Use
  the --aa-search-input-height CSS variable to adjust it if needed.
- The minimum supported Docusaurus version is now v2.0.0-beta21
- the minimum supported Docusaurus version is now v2.0.0-beta17.

# [0.10.0](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.9.4...v0.10.0) (2022-01-28)

### Features

- Add polish translations :poland: ([#95](https://github.com/cmfcmf/docusaurus-search-local/issues/95)) ([e947ad1](https://github.com/cmfcmf/docusaurus-search-local/commit/e947ad108738445b6cafe6537531e72418c9e411))
- support Docusaurus v2.0.0-beta.15, fixes [#93](https://github.com/cmfcmf/docusaurus-search-local/issues/93) ([30a6c66](https://github.com/cmfcmf/docusaurus-search-local/commit/30a6c66e974df0536a51399bd18ba5458d1c62a8))

### BREAKING CHANGES

- the minimum supported Docusaurus version is now v2.0.0-beta15.

## [0.9.4](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.9.3...v0.9.4) (2022-01-19)

### Bug Fixes

- Return EMPTY_INDEX when server responds with error. ([#91](https://github.com/cmfcmf/docusaurus-search-local/issues/91)) ([1a4d89c](https://github.com/cmfcmf/docusaurus-search-local/commit/1a4d89c77ff7bb029386de50d2a1b1e5dc7e95b3))

## [0.9.3](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.9.2...v0.9.3) (2022-01-13)

### Bug Fixes

- wrong variable when checking available documentation plugins ([8b04bbf](https://github.com/cmfcmf/docusaurus-search-local/commit/8b04bbfa277b1a7afd4aeecae48e52f68f4d4f77))

## [0.9.2](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.9.1...v0.9.2) (2021-12-14)

### Bug Fixes

- support trailingSlash = false ([371d60a](https://github.com/cmfcmf/docusaurus-search-local/commit/371d60accd03bbd3465f2d771b476f673b6ce022)), closes [#52](https://github.com/cmfcmf/docusaurus-search-local/issues/52)

## [0.9.1](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.9.0...v0.9.1) (2021-12-14)

### Bug Fixes

- do not throw error if a search index does not exist ([9a17de6](https://github.com/cmfcmf/docusaurus-search-local/commit/9a17de64d4bfac192d319bd7126af6a1843c0965)), closes [#85](https://github.com/cmfcmf/docusaurus-search-local/issues/85)

### Features

- update @algolia/autocomplete-js to 1.5.1 ([5631755](https://github.com/cmfcmf/docusaurus-search-local/commit/5631755cf13b8610e2a68f7a1298f3f97f8568bb))

# [0.9.0](https://github.com/cmfcmf/docusaurus-search-local/compare/v0.8.0...v0.9.0) (2021-12-11)

### Features

- split indexes by plugin and documentation versions ([2953045](https://github.com/cmfcmf/docusaurus-search-local/commit/295304582682d6bd27839454f609dc0e88d029a2))
- support up to Docusaurus v2.0.0-beta13 ([e74750f](https://github.com/cmfcmf/docusaurus-search-local/commit/e74750f5ea906f759a8b5c81c7397d12f4d6de9e)), closes [#82](https://github.com/cmfcmf/docusaurus-search-local/issues/82) [#83](https://github.com/cmfcmf/docusaurus-search-local/issues/83)

### BREAKING CHANGES

- the minimum supported Docusaurus version is now v2.0.0-beta9.

# 0.8.0

- FEAT: Support multiple docs, blogs, and pages plugins (#33)

# 0.7.0

- FEAT: Infer `docsPath`, `docsRouteBasePath`, and `blogRouteBasePath` from Docusaurus context
- FEAT: Make similarity tuning parameters and boosting behavior of title vs content vs parent categories configurable (#67)
- FEAT: Align documentation version detection with [DocsVersionNavbarItem](https://github.com/facebook/docusaurus/blob/fcaa94695d76ad508ff4dcdc1a2cabbe1a22650e/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionNavbarItem.tsx)
- FIX: Correctly exclude tags pages of both docs and blogs, respect `tagsBasePath` if configured
- BREAKING: Now requires Docusaurus v2.0.0-beta4 or later
- BREAKING: Now requires at least Node.js 14
- CLEANUP: Reorganize repository layout, use yarn workspaces

# 0.6.7

- FEAT: Add support for Bahasa Indonesia (`id`)
- FEAT: Support Docusaurus v2.0.0-beta7

# 0.6.6

- FEAT: Support Docusaurus v2.0.0-beta5

# 0.6.5

- FEAT: Add additional translations of autocomplete (Spanish, French, Japanese, and Portugese) (#56)

# 0.6.4

- FIX: Re-add support for Chinese (`zh`)

# 0.6.3

- FIX: Correctly handle [trailingSlash config option](https://docusaurus.io/docs/docusaurus.config.js/#trailing-slash) (#52)
- FEAT: Fully localized autocomplete (currently in German, English, Italian, Brazilian Portuguese, and Chinese), update autocomplete to 1.2.2
- FEAT: Support Hindi for search indexing (`hi`)
- FEAT: Validate plugin options (#46)

# 0.6.2

- FEAT: Italian translations
- FIX: Missing peer dependency warnings
- FIX: Correct Docusaurus peer dependency version (#36)
- BREAKING: Now requires Docusaurus v2.0.0-beta0

# 0.6.1

- FIX: Add missing codeTranslations folder to release package

# 0.6.0

- BREAKING: Now requires Docusaurus v2.0.0-alpha73
- BREAKING: Update autocomplete.js to v1-alpha, which features an all-new design and renamed class names (#32).
- FEAT: Use i18n system for translation of the searchbar itself, translate to German and English (#29)
  - BREAKING: To specfiy a non-default placeholder if no results are found, overwrite the newly introduced translation keys instead of `.d-s-l-a .aa-dropdown-menu .aa-suggestion-empty::after { content: "No results"; }`
- FEAT: Yellow result higlighting no longer adds a parameter to the URL and vanishes on refresh (#28)
- FIX: Support for language th

# 0.5.0

- FIX: Correctly handle "/" as docsRouteBasePath and blogRouteBasePath (#21)
- FIX: Exclude hash link "#" from HTML headings when indexing
- FIX: Use same tokenizer that was used for indexing documents to tokenize the content of the search box
- FEAT: Allow to specify a different separator for the tokenizer (#20)
- FEAT: Find blog posts and static pages regardless of the currently selected documentation version (#19)
- FEAT: For docs, optionally also index the titles of parent categories in the sidebar (#17)

# 0.4.0

- BREAKING: Now requires Docusaurus v2.0.0-alpha66
- FEAT: Upgrade to new version APIs from v2.0.0-alpha66

# 0.3.1

- FIX: Search did not work in Safari (#18)

# 0.3.0

- FEAT: Support versioned documentation
- BREAKING: Renamed options
  - `blogBasePath` to `blogRouteBasePath`
  - `docsBasePath` to `docsRouteBasePath`
- BREAKING: Now requires Docusaurus v2.0.0-alpha.59
- FIX: Remove version badge from search index
- FIX: Correct docs/blog/page detection logic for edge cases (e.g., `/docs-foo-bar` is no longer considered a documentation page)
- FIX: Use correct plugin name
- FIX: Japanese and Thai search should now work correctly (#12)

# 0.2.0

- FEAT: Highlight search results on the page using a new `highlight` query parameter

# 0.1.3

- FIX: `<style>` and `<script>` tags no longer break indexing (#7)

# 0.1.2

- FEAT: Make search results easier to style, improve markup (#6)

# 0.1.1

- FIX: Parsing of empty sections and pages
- FIX: Parsing static pages was broken
- FEAT: Add logging

# 0.1.0

- FEAT: Support for indexing other languages than English (#3)
- FEAT: New options to configure indexing.
- FIX: Navigation buttons are no longer included in indexed text (#4).
- BREAKING: Static pages are no longer indexed by default

# 0.0.5

- FIX: Set different dropdown colors in dark theme.

# 0.0.4

- FIX: Focus search bar after loading the index if it was previously focused.
- FEAT: Introduce document ids to make index smaller

# 0.0.3

- FIX: Lowercase all search terms before searching the index. A search term with an uppercase letter never gives any results, because the index is all lowercase.
- FEAT: If document and section titles are equal, only display one of them in search results.

# 0.0.2

- FIX: Prepend baseUrl when fetching search index.
- FEAT: Add more fields to package.json.

# 0.0.1

- Initial version

repository: cmfcmf/docusaurus-search-local

gha_language: JavaScript

repo_name: cmfcmf/docusaurus-search-local


text:
# SimplyScrape

<!---
![SimplyScrape Logo](https://i.imgur.com/X12ZeEE.png)
-->

SimplyScrape is a tool that makes web scraping esier for you. SimplyScrape generates web-scraping code for you automatically. All you need to do is to fill in the input fields!

## Getting Started

These instructions will get you a copy of the project up and running on your local machine.

### Prerequisites

You need the following in order to run the application as it is intended on your machine:

```
Python 3 or above
Pip package installer for python

```

### Installing the application

First clone this repository or download it manually to a working directory on your computer.
Thereafter, open terminal/cmd inside the SimplyScrape directory on your computer.
Now Run the following command in your terminal/cmd:

```
pip install -r requirements.txt
```
After all the requirements are installed, you need to download a Chrome WebDriver. Go to https://chromedriver.chromium.org/downloads or simply click [here](https://chromedriver.chromium.org/downloads).
Now download the latest version of Chrome WebDriver. Extract the downloaded zip file downloaded. Now copy the extracted file (named 'chromedriver.exe') and paste it into SimplyScrape directory. Lastly update your chrome browser to the latest version available (this step is highly suggested for better performance of the tool).
The SimplyScrape directory on your machine should look something like the image below:

![SimplyScrape Directory](https://i.imgur.com/I5Rzqa5.png)

### Running the application

if you have gone throgh the steps of "Installing the application" chapter, you are ready to use the SimplyScrape tool. Open cmd/terminal and run the following command:

```
py SimplyScrape.py
```

Now the tool should prompt you to name your web scraping session. Name it anything you like.
Afterwards the tool prompts you to provide a url to a page you want to webscrape. Provide the full url of the webpage you want to scrape to the application. Now the application will open a browser window as well as an html code.
The chrome browser window will connect to the webpage you wanted to scrape. Inside the chrome browser window you can use the chrome developer tools to inspect the webpage. The html code that is opened for you is the html code of the webpage you provided to the tool. You can look through the html code for better understanding the structure of the website. The html code for the webpage is stored in the 'SimplyScrape' directory.
Now go back to the terminal that previously prompted you for inputs (the terminal/cmd that is running SimplyScrape).
You should be prompted to provide class name of a span element. You can choose to leave it empty or you can provide class name of a span element in the webpage you chose. After filling the input and submitting you will have more inputs asking for class names of specific elements. You can leave them empty or provide class names for those elements in case you want to extract information from those classes.
After you have submitted information for all the input fields the application will open a text file containing code that can be used for web scraping the page you provided the tool.

## Contributing

Feel free to fork and expand this project! Send a pull request if you would like to add your code to the project.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/farzammadani/JustShareKeys/releases).

## Authors

* **Farzam Madani** - *Creation of the core application* - [farzammadani](https://github.com/farzammadani)

See also the list of [contributors](https://github.com/farzammadani/JustShareKeys/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/farzammadani/JustShareKeys/blob/master/LICENSE) file for details

## Acknowledgments

* Big thanks to anyone whose library is used for this project

repository: farzammadani/SimplyScrape

repo_name: farzammadani/SimplyScrape


text:
# Data Structure and Algorithms implementation using Python
The repo consisting of implementation of all the data structure and algorithms I have written over the time.

I also have included solution (in python) for the exercise from Algorithms 4th edition by Robert Sedgewick and Kevin Wayne.

I will try to update the repo whenever I can.

I would suggest attempting to solve the exercise by yourself before foing through these solutions.


text:
# huawei_e5180_traffic_stats

Collect traffic stats for Huawei E5180 LTE modem in ruby.

## Why?

As mobile companies give shitty data cap of 100GB on "unlimited" plans (after which you land with 2M/384k connection) we want to know internet usage distribution.

## Setup

```
bundle install
```

## Usage:

Start collecting stats by:

```
ruby collect_huawei_e5180_traffic_stats.rb
```


text:
---
hrs_structure:
  division: '5'
  volume: '14'
  title: '38'
  chapter: '842'
  section: 842-1
type: hrs_section
tags:
  - Crime
  - Criminal Proceeding
menu:
  hrs:
    identifier: HRS_0842-0001
    parent: HRS0842
    name: 842-1 Definitions
weight: 48005
title: Definitions
full_title: 842-1 Definitions
---
**§842-1 Definitions.** As used in this chapter:

"Enterprise" includes any sole proprietorship, partnership, corporation, association, and any union or group of individuals associated for a particular purpose although not a legal entity.

"Organized crime" means any combination or conspiracy to engage in criminal activity as a significant source of income or livelihood, or to violate, aid, or abet the violation of criminal laws relating to prostitution, gambling, loan sharking, drug abuse, illegal drug distribution, counterfeiting, extortion, labor trafficking, or corruption of law enforcement officers or other public officers or employers.

"Person" includes any individual or entity capable of holding a legal or beneficial interest in property and includes nonresident aliens.

"Racketeering activity" means any act or threat involving but not limited to murder, kidnapping, gambling, criminal property damage, robbery, bribery, extortion, labor trafficking, theft, or prostitution, or any dealing in narcotic or other dangerous drugs that is chargeable as a crime under state law and punishable by imprisonment for more than one year.

"Unlawful debt" means a debt incurred or contracted in an illegal gambling activity or business or which is unenforceable under state law in whole or in part as to principal or interest because of the law relating to usury. [L 1972, c 71, pt of §2; am L 1990, c 27, §2; am L 1991, c 175, §1; am L 2011, c 146, §4]

repository: SamMade/BlueAndKrabby

repo_name: SamMade/BlueAndKrabby


text:
---
title: "Bloomberg's Billionaires - Part 2: General data and stats"
date: 2013-06-21 19:58
author: saguiitay
categories: [Development]
tags: [Billionaires, Windows Phone]
redirect_from:
 - /2013-06-21-bloombergs-billionaires-part-2-general-data-and-stats/
 - /development/bloombergs-billionaires-part-2-general-data-and-stats/
---
In my [previous post]({% post_url 2013-06-17-bloomberg-billionaires %} "Bloomberg Billionaires"), I've mentioned Bloomberg's Billionaires website,
which displays detailed information about the Top 100 world billionaires. Today, let's take a look at the data used by the website.

Using Fiddler, we can browse to (http://www.bloomberg.com/billionaires/) and follow the AJAX requests performed by the page.

The first interesting piece of information is a request to (http://www.bloomberg.com/billionaires/db/metadata/js/) - this request gives us a
nice JSON (ignoring the "META=" part at the beginning of the content). A quick review of the JSON reveals that it contains the following information:

- Collection of Scopes (I'm not sure what's the purpose of this yet)
- Collection of Places - this is a list of places/countries that have Billionaires)
- Collection of People - this is the important part for us. For each person, we have some basic global information such as name, age, industry.

Here's the class that represent a single person in the "people" collection:

{% highlight csharp %}
public class Name
{
	public string full { get; set; }
	public string last { get; set; }
	public string sort { get; set; }
}

public class Person
{
	public Name name { get; set; }
	public int age { get; set; }
	public int children { get; set; }
	public string status { get; set; }
	public string place { get; set; }
	public string gender { get; set; }
	public string industry { get; set; }
	public string source { get; set; }
	public string final_day { get; set; }
}
{% endhighlight %}

The next request is to (http://www.bloomberg.com/billionaires/db/stats/2013/06/13) (notice the Date part of the URL - making a request for a specific
date will give you the information relevant to that date). The response this time is a "pure" JSON object, with a list of people. For each person,
here's a list of the information we get:

- Hold: summary of the Public, Private and Cash holdings of the person
- Last and Last_Rel: The change in net worth since the last update (divide by 100 to get the change in million dollars and percentages respectively)
- YTD and YTD_Rel: The change in net worth in the last year (divide by 100 to get the change in million dollars and percentages respectively)
- Net: Net worth of the person
- Rank: Ranking of the person in the list of Top Billionaires

We can deserialize the result into with the following code:

{% highlight csharp %}
public class Stats
{
    public int rank { get; set; }
    public int net { get; set; }
    public List hold { get; set; }
    public int last { get; set; }
    public int last_rel { get; set; }
    public int ytd { get; set; }
    public int ytd_rel { get; set; }
}
var people = await JsonConvert.DeserializeObjectAsync<IDictionary<string, Stats><idictionary<string, stats="">>(result);
{% endhighlight %}

This is a good start - we now have a list of the Top 100 Billionaires, and some general information about each of them, including their ranking and Net worth.

(**Note:** the original list of billionaires we got from the first request contains people that are not currently in the Top 100 list.
These people might not have their Stats available for the current date. If you want to retrieve their details, use the `final_day` field to
locate the last appearance of the person in the Top 100)

In the next part, we'll see how to retrieve the images of the people in the list.


text:
---
layout: default
---

**Meet Samuel**

My name is Samuel and I am an Information Technology (IT) student at RMIT University. I was born in Australia and have lived mostly in Northern Victoria and Melbourne.

Now I am currently based in Brisbane until January 2020, helping a university with an IT security project; which is providing to be both challenging and rewarding. In 2011 I graduated from high school and completed a Diploma of Information Technology at RMIT TAFE in 2016.

My native language is English, and I know a little German and French. In January 2020 I am moving to southern France to begin on a new journey in IT and hope to establish a working knowledge of the French language in the next few years.

Outside of IT, I read the news every single day. In fact, at the expense of my energy for the next day, I automatically wake up around 3 or 4 AM each morning to read the latest news reports across North America and Europe, before returning to sleep for a few hours.


text:
# angular-9-seed-app

Angular 9 Seed App. Download this app to begin a new app using Angular 9.

Created by AngularExample. [https://github.com/angularexample](https://github.com/angularexample)

Full source code available at [https://github.com/angularexample/angular-9-seed-app](https://github.com/angularexample/angular-9-seed-app)

### Screen Shot

![Angular 9 Seed App](https://github.com/angularexample/angular-9-seed-app/blob/master/src/assets/images/angular-9-seed-app.png)

## Table of Contents
* [About The Author](#about-the-author)
* [Purpose Of This Project](#purpose-of-this-project)
* [Project Setup](#project-setup)
  * [Prerequisites](#prerequisites)
  * [How To Install](#how-to-install)
  * [How To Run](#how-to-run)
  * [How To Run Unit Tests](#how-to-run-unit-tests)
  * [How To Run End To End Tests](#how-to-run-end-to-end-tests)
* [Software Libraries Used](#software-libraries-used)
* [Angular Best Practices Included](#angular-best-practices-included)
  * [Set Change Detection As Default](#set-change-detection-as-default)
  * [All Services Use ProvidedIn](#all-services-use-providedin)
  * [Each Service Has A Service Module](#each-service-has-a-service-module)
    * [Import Services As A Module At The Dependant Module Level](#import-services-as-a-module-at-the-dependant-module-level)
    * [Why Not To Import Services At App Level](#why-not-to-import-services-at-app-level)
  * [Set A Prefix For Components](#set-a-prefix-for-components)
    * [Use The Unique Prefix In Class Names](#use-the-unique-prefix-in-class-names)
      * [Quickly Recognize All Your Custom Objects](#quickly-recognize-all-your-custom-objects)
      * [IDE Type-Ahead Shows Only Your Classes](#ide-type-ahead-shows-only-your-classes)
      * [Unique Prefix Also For Services And Modules](#unique-prefix-also-for-services-and-modules)
      * [Unique Prefix In File Names And Directories](#unique-prefix-in-file-names-and-directories)
  * [Set Styles To Use SCSS](#set-styles-to-use-scss)
  * [Set Style Paths To Avoid Relative Paths in CSS](#set-style-paths-to-avoid-relative-paths-in-css)
  * [Set Path Variables To Avoid Relative Paths In Import](#set-path-variables-to-avoid-relative-paths-in-import)
  * [Exclude Files For Testing And Coverage](#exclude-files-for-testing-and-coverage)
* [Configured For Large Scale Projects](#configured-for-large-scale-projects)
  * [Common Package For Shared Services And Components](#common-package-for-shared-services-and-components)
    * [Alert Service](#alert-service)
    * [Data Service](#data-service)
    * [Data Error Interceptor ](#data-error-interceptor)
    * [Run Time Error Handler](#run-time-error-handler)
    * [Log Service](#log-service)
    * [Message Service](#message-service)
      * [How To Use The Message Service](#how-to-use-the-message-service)
  * [Styles Has Global Colors](#styles-has-global-colors)
  * [Styles Have Media Breakpoints For Responsive Design](#styles-have-media-breakpoints-for-responsive-design)
  * [Complete Tests Are Done For All Existing Services And Components](#complete-tests-are-done-for-all-existing-services-and-components)
  * [Angular Material and CDK Are Installed And Configured](#angular-material-and-cdk-are-installed-and-configured)
  * [Angular Material Icons Are Installed And Configured](#angular-material-icons-are-installed-and-configured)
  * [App Component Has Routing](#app-component-has-routing)
    * [If You Do Not Need Any Routing](#if-you-do-not-need-any-routing)
  * [Home Page And Page Not Found Are Done](#home-page-and-page-not-found-are-done)
  * [Header Component Is Done](#header-component-is-done)

## About The Author

**JC Lango** is a UI Architect and UI Developer for large scale web applications at several Fortune 500 companies.

He is an expert in **Angular**, **Polymer**, and **React** and maintains these sites at Github:

* **AngularExample** [https://github.com/angularexample](https://github.com/angularexample)
* **PolymerExample** [https://github.com/polymerexample](https://github.com/polymerexample)
* **ReactJSExample** [https://github.com/reactjsexample](https://github.com/reactjsexample)

JC may be available to work remote, and can be contacted at these links:

* LinkedIn: [https://www.linkedin.com/in/jclango](https://www.linkedin.com/in/jclango)
* Email: [jobs<EMAIL_ADDRESS>
## Purpose Of This Project

The purpose of this project is to provide an Angular 9 seed app.

You can download this app to begin a new project in Angular 9.

It includes many [Angular Best Practices](#angular-best-practices-included), and
[Advanced Configurations](#configured-for-large-scale-projects),
with architecture designed for large scale applications.

Check out the rest of this README for more information.

## Project Setup

### Prerequisites

You need to have Node and NPM installed on your PC.

[Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

### How To Install

Download the source code using git or else download and unzip the zip file.

Open a terminal window and go to the project root folder.

You need to have npm installed globally.

Run `npm i` to install the required libraries.

### How To Run

Run `ng serve` for a dev server.

Navigate to `http://localhost:4200/`.

The browser will automatically reload if you change any of the source files.

### How To Run Unit Tests

To run the unit tests, you need to stop the server.

If the server is running, stop the server from the terminal window by pressing *Control-C*.

To run the unit tests, Run the following command in the terminal window.

`ng test -- --no-watch --no-progress --browsers=ChromeHeadlessCI`

And if you're running on Windows,
include the `--disable-gpu` flag. See [crbug.com/737678](https://bugs.chromium.org/p/chromium/issues/detail?id=737678).

### How To Run End To End Tests

To run the unit tests using Angular *cli*, you need to stop the server.

If the server is running, stop the server from the terminal window by pressing *Control-C*.

To run the e2e tests using Angular cli, Run the following command in the terminal window.

`ng e2e -- --protractor-config=e2e/protractor-ci.conf.js`

And if you're running on Windows,
include the `--disable-gpu` flag. See [crbug.com/737678](https://bugs.chromium.org/p/chromium/issues/detail?id=737678).

## Software Libraries Used

The following major software libraries are used:
```text
Angular 9
Angular Material 8
Angular CDK
Angular Material Icons
RxJS 6
```

**Note**: Normally you need to match the version of Angular Material to Angular. But we must use Angular Material 8 because 9 is not yet released.
In this case it will still work.

## Angular Best Practices Included

**Note:** All these steps have already been done in this project.

Angular Best Practices:

  * [Set Change Detection As Default](#set-change-detection-as-default)
  * [All Services Use ProvidedIn](#all-services-use-providedin)
  * [Each Service Has A Service Module](#each-service-has-a-service-module)
  * [Set A Prefix For Components](#set-a-prefix-for-components)
  * [Set Styles To Use SCSS](#set-styles-to-use-scss)
  * [Set Style Paths To Avoid Relative Paths in CSS](#set-style-paths-to-avoid-relative-paths-in-css)
  * [Set Path Variables To Avoid Relative Paths In Import](#set-path-variables-to-avoid-relative-paths-in-import)
  * [Exclude Files For Testing And Coverage](#exclude-files-for-testing-and-coverage)

### Set Change Detection As Default

For best overall performance, set the change detection as the default for a new component.

This is done by adding a line to the **schematics** section of **angular.json**.

```
      "schematics": {
        "@schematics/angular:component": {
          "changeDetection": "OnPush",
          "styleext": "scss"
        }
      },
```

### All Services Use ProvidedIn

There are three different ways to inject a service.

1. Module level ``providers``.
2. Component level ``providers``.
3. Service level ``providedIn``.

The last way, Service level ``providedIn``, was introduced in Angular 6.
The difference is that you don't import the service in the dependent component.
Instead you name the module of the dependent component in the service.
In most cases you see it done by naming "root", which is the AppComponent.

The intended advantage of ``providedIn`` is that Angular has tree shaking, which will only bundle a service if it gets used.

### Each Service Has A Service Module

Each service has its own module.

The reason is to include all of the dependencies required by that service.

Also, some services require some tricky binding to other services. These must be done in a module file.

The advantage of having all of the dependencies in the service module,
means that you don't need to ever import anything else.

For example, you don't need to add anything to the app module.

Just import the service module into the module of the component or service,
in which you will use the service.

For example, if you have a component that needs the data service,
import the data service module ``XxxDataModule``, into the module for your component.

#### Import Services As A Module At The Dependant Module Level

I recommend creating a service module for each service, that contains all of the
dependencies for the service. Then import the service module,
at the module level of the **dependent** class.

There are two reasons:

1. You will always insure that all dependencies are included.
2. The service you use, and where, will be documented in the consuming module.

Why is this better than injecting the service at the app level?

The reason becomes clear when you deal with large scale applications,
and especially when you need to delete components in one app, or copy components to another app.

If you are deleting components or copying components,
you will need to also keep track of their required services.

Every time you remove or add a component that has a required service,
you will need to also edit the app module.

On the other hand, if you use this recommended design,
you don't ever touch the app module.

Your app module will be leaner and cleaner,
and free from changes by multiple developers.

This makes refactoring a large scale app much easier, and much safer.

#### Why Not To Import Services At App Level

Whether you use ``providedIn`` or ``providers``,
I recommend you do **not** import all your services at the **app** level,
which is contrary to the way most documentation tells you.

If you have instead imported the dependencies of the service at the app module,
you later not be sure of what items in the app module are actually required,
and which dependencies go with which services.

If you have used ``providedIn: root`` or ``providers`` in the app module,
and the dependent class is later deleted,
you may still have stuff in your app module that are no longer required.

Or if are adding a reusable service to another app,
or moving a service from one app to another,
you may risk a failure caused by a missing dependency.

As an app grows and becomes larger and more complicated,
and when you have multiple developers working on the same project,
the risk of these mistakes becomes much greater.

It can be sometimes extremely difficult to find out why things are breaking,
especially since some of these services require some special bindings.

And, in many cases, things will work fine for a while (by mistake),
because the actual dependencies are imported somewhere else (by coincidence),
and when that other module gets changed or deleted, all of a sudden you get
a failure in a another part of the app.

Another problem is that you may also end up with a lot of things imported,
that actually are not required. And in that case, you will never get an error.
So your code becomes bloated with extra code and objects that are completely unnecessary.

Although the tree shaking aspect of ``providedIn`` is intended to help with the bundling,
it still does not keep your source code free of unused services.

In that case, the compiled bundle will be free of the unused services...

But the services, and their dependencies, can still be in your source code.

All the unused services can be littering up a large project,
taking up space in your source code control,
and requiring the resources of unit tests and coverage.

### Set A Prefix For Components

An Angular best practice is to use a unique prefix for the selector name of a component or directive.

Set the unique prefix in the **angular.json**.

```
  "projects": {
    "angular-9-seed-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "xxx",
```

The prefix is used in the **selector* section of the component metadata,
which is usually the first part of your compenent code.

```
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'xxx-header',
  styleUrls: ['./xxx-header.component.scss'],
  templateUrl: './xxx-header.component.html'
})
```

Choose a 3 or 4 character prefix that will most likely be unique.
This is done to prevent any possible element name collision.

One way to get a prefix is to use the first 3 or 4 consonants of the company name,
or else for the project name.

Example: "My Company" gives you "mcm" or "mcmp".

#### Use The Unique Prefix In Class Names

After many large scale projects, I have learned that it also a best practice to
use the same unique prefix for class names.

So your "header" component selector is "xxx-header".

And the class name for "xxx-header" is "XxxHeaderComponent".

There are a few good reasons.

##### Quickly Recognize All Your Custom Objects

It makes it easy to recognize all your custom code objects.

If you scanning through lots of source code, whether its TypeScript or HTML or CSS,
everyone can quickly identify all your custom objects.

It distinguishes your own custom objects from other vendor related objects.

##### IDE Type-Ahead Shows Only Your Classes

When I am coding in my IDE, which is **WebStorm**,
and I begin to add an import like this:

```import {Xx}```

I immediately get a drop down list that shows all of the importable class names
that start with "Xx". And since that is a good unique class name prefix,
I get only my own custom class names.

This make writing coding much faster, and more fool proof.

#### Unique Prefix Also For Services And Modules

The same unique prefix should also be used for all you other angular objects,
such as services.

If you have a "search" service, the class name would be "XxxSearchService".

The same unique prefix should also be used for the module names.

#### Unique Prefix In File Names And Directories

When you use the prefix in your file names,
it provides consistency. And also prevents name collisions when refactoring or mixing similiar classes.

Here is how the prefix is used in all the source filesIn fact, I use the prefix for all the source files for a given set.

###### Example:

```
xxx-header/
  mock-xxx-header.component.ts
  mock-xxx-header.module.ts
  xxx-header.component.html
  xxx-header.component.scss
  xxx-header.component.spec.ts
  xxx-header.component.ts
  xxx-header.module.ts
```

To complete the unique prefix naming convention,
use the same unique prefix for the directories that contain your custom objects.

Example:
```
src/
  app/
    modules/
       xxx-header/
       xxx-search/
       xxx-search-box/
```

1. This provides consistency for class names and their containing directory.
2. If your prefix denotes a group or project, it allows you to separate the grouped source files.

Example:
If you have 3 sets of source with different prefixes:

* Common: "cmmn"
* Group A: "grpa"
* Group B: "grpb"

Your directories might look like this:

```
src/
  app/
    modules/
       cmmn-header/
       grpa-search
       grpa-search-box/
       grpb-search/
```

### Set Styles To Use SCSS

SCSS is far superior to plain CSS. First of all, you can still use plain CSS.

But in addition, you can use variables to do things like setting global colors.

Set the styles to use SCSS in the **angular.json**.

```
  "schematics": {
    "@schematics/angular:component": {
      "changeDetection": "OnPush",
      "styleext": "scss"
    }
```

### Set Style Paths To Avoid Relative Paths in CSS

If you set the path for styles, you can avoid having relative paths.

###### Wrong Way

```
import "../../../assets/styles/partials/colors"
```

Relative paths are messy, and must be edited if you move your files or directories.

###### Right Way

```
import "partials/colors"
```

If you are using style paths, it is much cleaner, and won't need to be edited when you later move things around.
It also allows you to use the same code in other projects, and provides consistency.

Set the path for styles in the **angular.json**, in the ``stylePreprocessorOptions`` section.

This must be done in two places, under ``architect`` and under ``test`` as follows:

```
  "styles": [
    "src/assets/styles/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/assets/styles"
    ]
  },
```

The main styles file is ``src/assets/styles.scss``

### Set Path Variables To Avoid Relative Paths In Import

Another Angular best practice is to set variables to avoid relative paths for imports.

###### Wrong Way

```
import {XxxHeaderModule} from '../../../modules/xxx-header/xxx-header.module'
import {environment} from '../../../environments/environment'
```

###### Right Way

```
import {XxxHeaderModule} from<EMAIL_ADDRESS>import {environment} from '@env/environment'
```

The paths for imports are set in the **tsconfig.json**.

First, set the ``baseUrl`` under ``compilerOptions`` as follows:

```
  "compilerOptions": {
    "baseUrl": "./src",
```

Next, set the ``paths`` under ``compilerOptions`` as follows:

```
    "paths": {
      "@app/*": [
        "app/*"
      ],
      "@env/*": [
        "environments/*"
      ]
```

### Exclude Files For Testing And Coverage

There are certain files you need to exclude from testing and coverage.

These will also depend on the file and directory naming conventions used in the project.
So it is best to always use the same naming standards in all your projects.

The test exclusions are set in the **angular.json** under the ``test`` section as follows:

```
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "codeCoverage": true,
            "codeCoverageExclude": [
              "src/*",
              "src/environments/*",
              "**/index.ts",
              "**/test.ts",
              "**/*.module.ts",
              "src/mocks/**/*",
              "**/mock*"
            ],
```

This assumes that there is a directory for mocks under ``src/mocks/``. This should hold the mocks for Angular built-in classes, not any of your custom classes.

You should put your own class mocks under the same folder that contains the orginal class. The mocked source file name should begin with "mock".

This also follows the best practice of creating a directory for each component or service,
and creating a module for each component or service, and containing all of the associated sources files in that directory.

###### Example:

```
xxx-header/
  mock-xxx-header.component.ts
  mock-xxx-header.module.ts
  xxx-header.component.html
  xxx-header.component.scss
  xxx-header.component.spec.ts
  xxx-header.component.ts
  xxx-header.module.ts
```

## Configured For Large Scale Projects

This seed app has a number of added features that make it ready to use in a large scale Angular project.

* [Common Package For Shared Services And Components](#common-package-for-shared-services-and-components)
* [Styles Has Global Colors](#styles-has-global-colors)
* [Styles Have Media Breakpoints For Responsive Design](#styles-have-media-breakpoints-for-responsive-design)
* [Mocks Directory Has Mocks For Route Testing](#mocks-directory-has-mocks-for-route-testing)
* [Complete Tests Are Done For All Existing Services And Components](#complete-tests-are-done-for-all-existing-services-and-components)
* [Angular Material and CDK Are Installed And Configured](#angular-material-and-cdk-are-installed-and-configured)
* [Angular Material Icons Are Installed And Configured](#angular-material-icons-are-installed-and-configured)
* [App Component Has Routing](#app-component-has-routing)
* [Home Page And Page Not Found Are Done](#home-page-and-page-not-found-are-done)
* [Header Component Is Done](#header-component-is-done)

### Common Package For Shared Services And Components

This project has a common package set up that uses an ``index.ts`` file to assist in locating the imports.

This is where all of your shared services and components should be.

The directory ``xxx-common/`` contains these members:
* ``test/`` An index for all of the mocks within the common package.
* ``xxx-alert/`` [Alert Service](#alert-service)
* ``xxx-data/`` [Data Service](#data-service)
* ``xxx-data-response-interceptor/`` [Data Error Interceptor ](#data-error-interceptor)
* ``xxx-error-handler/`` [Run Time Error Handler](#run-time-error-handler)
* ``xxx-log/`` [Log Service](#log-service)
* ``xxx-message`` [Message Service](#message-service)
* ``index.ts`` The file that provides the import paths for all the members of this package.

By using the ``index.ts``, it shortens your import path. To import any member of this package just point to the package root as follows:

```
import {XxxAlertModule, XxxErrorHandlerModule, XxxLogModule, XxxMessageModule} from '@app/xxx-common';
```

More detail on each of these services follows.

#### Alert Service

The ``XxxAlertService`` is the recommended way to display any pop up message to the user.

You don't need to add anything to any template.

To use the alert service, first import the service module into the dependent module as follows:

```
import {XxxAlertModule} from '@app/xxx-common';
```

Then declare it in the module's ``imports`` array.

```
  imports: [XxxAlertModule]
```

The service module uses ``providedIn``, so you don't need to add it to any ``providers``.

Then import the service into your component or service as follows:

```
import {XxxAlertService, XxxAlertType} from '@app/xxx-common';
```

Then instantiate the service in your constructor as follows:

```
  constructor(
      private xxxAlertService: XxxAlertService
  )
```

To show the alert pop up, define the alert type, and the message.

There are 3 alert types: INFO, ERROR, WARN.

The colors and formatting for these alerts is done using the styles defined in ``assets/styles/partials/_alert.scss``, so you need to also keep that file.

Then call it as follows:

```
this.xxxAlertService.openAlert(XxxAlertType.WARN, 'No matching data found');
```

The alert component is based on the Angular Material *MatSnackBar*. The imports are already done in the **XxxAlertModule** source file.

You will need to keep *Angular Material* installed in the *package.json*.

#### Data Service

The ``xxx-common`` package includes the ``XxxDataService``.

This service uses Angular **HttpClient** to return an observable in the ``getData`` method for doing a XHR GET.

You can expand this service for other XHR requests.

It also is already bound to the ``XxxDataResponseInterceptor`` service [Data Error Interceptor](#data-error-interceptor),
which automatically handles all XHR errors.

To use the data service, first import the service module into the dependent module as follows:

```
import {XxxDataModule} from '@app/xxx-common';
```

Then declare it in the module's ``imports`` array.

```
  imports: [XxxDataModule]
```

The service module uses ``providedIn``, so you don't need to add it to any ``providers``.

Then import the service into your component or service as follows:

```
import {XxxDataService} from '@app/xxx-common';
```

Then instantiate the service in your constructor as follows:

```
  constructor(
      private xxxDataService: XxxDataService
```

The ``getData`` method takes a URL as its argument.

It is recommended that you use the ``environments`` to contain all the urls used in your app.

This is how the data service is called:

```
    const url = environment.url.api + environment.url.comments;
    this.commentsSubscription = this.xxxDataService.getData(url)
        .subscribe(result => this.onSuccessGetComments(result),
            () => this.onErrorGetComments());
```

See one of my other projects for the full context.

#### Data Error Interceptor

The ``xxx-common`` package includes the ``XxxDataResponseInterceptor`` service.

This is already bound to the ``XxxDataService`` [Data Service](#data-service),
to automatically handle all XHR errors.

It uses the ``XxxMessageService`` to broadcast a message to the ``AppComponent``.
The ``AppComponent`` is set up up subscribe to this message,
and will display a pop up alert using the ``XxxAlertService`` [Alert Service](#alert-service).

#### Run Time Error Handler

The ``xxx-common`` package includes the ``XxxErrorHandler`` service.

This service intercepts all run time errors.

It uses the ```XxxLogService``` [Log Service](#log-service) to log the error.

It uses the ```XxxAlertService``` [Alert Service](#alert-service) to display a pop-up message to the user.

To use the error handler service, first import the service module into the app module as follows:

```
import {XxxErrorHandlerModule} from '@app/xxx-common';
```

Then declare it in the module's ``imports`` array.

```
  imports: [XxxErrorHandlerModule]
```

The service should not be imported or instantiated. All of that is already done in the service module.

Nothing else is needed. The service will now work on its own.

#### Log Service

The ``xxx-common`` package includes the ``XxxLogService``.

This service creates a log entry, which for now, is displayed in the console.

For your large scale project, you can create an API endpoint,
which will do the logging on the back end.

Then you can modify this service to enable that feature.

To use the log service, first import the service module into the dependent module as follows:

```
import {XxxLogModule} from '@app/xxx-common';
```

Then declare it in the module's ``imports`` array.

```
  imports: [XxxLogModule]
```

The service module uses ``providedIn``, so you don't need to add it to any ``providers``.

Then import the service into your component or service as follows:

```
import {XxxLogService} from '@app/xxx-common';
```

Then instantiate the service in your constructor as follows:

```
  constructor(
      private xxxLogService: XxxLogService
```

To call the log service, first you need to create a log entry.
Then call it as follows:

```
    const logEntry: XxxLogEntry = new XxxLogEntry(error.message);
    logEntry.stack = error.stack;
    this.xxxLogService.log(logEntry);
```

#### Message Service

The ``xxx-common`` package includes the ``XxxMessageService``.

This service uses a publish and subscribe design,
to allow communication between any components or services.

This communication can be one to one, or one to many.

To use the service, first import the service module into your module,

```
import {XxxMessageModule} from '../xxx-message/xxx-message.module';
```

Then declare it in the module's ``imports`` array.

```
  imports: [XxxMessageModule]
```

The service module uses ``providedIn``, so you don't need to add it to any ``providers``.

Then import the service into your component or service file as follows:

```
import {XxxMessageService} from '@app/xxx-common';
```

Then instantiate the service in your constructor as follows:

```
  constructor(
      private xxxMessageService: XxxMessageService
```

##### How To Use The Message Service

To use the message service we first create a message object with a unique key:

```
const message=new XxxMessage('searchTextChanged');
```

The best practice is use a string key that is meaningful.
In this case we want to indicate that the search text has changed.

The next step is to send the message:

```
xxxMessageService.broadcast(message);
```

After the message is broadcast, one or more subscribers will instantly receive the message.
This is generally used to notify another component that something has happened.

Here is the code to subscribe to the message.

```
    this.subscriptionSearchTextChange = this.xxxMessageService.subscribe('searchTextChange', () => {
      this.onSearchTextChange();
    });
```

The message service also has a payload property, which allows you to send data.
The payload can be any kind of custom object.

Here is an example of how to use the message payload:

```
    const message = new XxxMessage('data.responseError');
    message.payload = {
      alertType: XxxAlertType.ERROR,
      alertMessage: errorMsg
    };
    this.xxxMessageService.broadcast(message);
```

The payload in this case is a custom object that is used by the ``XxxAlertService``.

The payload is extracted by the subscriber as follows:

```
    this.subscriptionDataError = this.xxxMessageService.subscribe('data.responseError', (payload) => {
      this.xxxAlertService.openAlert(payload.alertType, payload.alertMessage);
    });
```

**Note**: The subscriber should store a reference to the subscription,
and especially in a component, use the OnDestroy hook to unsubscribe.

You should always unsubscribe any subscription, to avoid memory leaks.

### Styles Has Global Colors

Styles have global colors set in ```assets/styles/partials/_colors.scss```. Add your global colors here.

### Styles Have Media Breakpoints For Responsive Design

Responsive CSS allows a different layout for mobile/tablet/desktop.

Styles have global colors set in ```assets/styles/partials/_media-variables.scss```.

At the most basic level, the body font size can be used along with setting all measurements using *rem* units instead of *px*.

For a more fine-grained level, there are 3 more files that contain breakpoints for all of the different tablets and mobile devices.

If you don't need all of those, these files can be deleted.

### Mocks Directory Has Mocks For Route Testing

There is a ```mocks``` directory to contain any mocks for the built-in Angular services.

It has mocks that allow testing of the ``ActivatedRoute`` service.

Any other mocks for Angular services should be added to this folder.

But mocks for your own custom services and components should be in the same folder as the original.

### Modules Directory To Contain All Your Own Modules

The best practice I recommend is to have a ``modules/`` directory that contains all of your own modules.

The rule is to create a folder for each module, and to create a module for each component or service.

Each component or service should import all of it's own dependencies.

We don't import these services at the app module level, which is usually recommended by the Angular docs.

The reason is, if you refactor your app, or re-use components or services in other apps, you can easily just copy or move just the folders you want.

If you had imported these at the app level, you would need to delete or add imports at the app level.

But if you use the strategy recommended here, you don't bother with anything at the app level.
When you just add your module folder, it already has all of its own dependencies. All you do is just import the module into the parent module that needs it.

This is a fine-grained approach to code organization.

### Complete Tests Are Done For All Existing Services And Components

Complete tests are already done for all of the existing code.

These tests are designed to provide 100% coverage.

Use these tests as a guide for the correct way to do your unit tests.

You should use a mock for each of any dependencies.

This gives you the most flexibility and is the easiest way to handle dependencies.

### Angular Material and CDK Are Installed And Configured

Angular Material is already installed.

The default required styles are included in ``assets/styles/vendor/_angular-material.scss``.

### Angular Material Icons Are Installed And Configured

**Angular Material Icons** are imported using ``index.html``.

The initial configuration recommended for using Material Icons with Material Icon Buttons is done using  ```assets/styles/vendor/_mat-icon.scss```.

### App Component Has Routing

The ``AppComponent`` has routing.

Routing for the app module uses the ``app-routing.module.ts``. Only one path is defined here,
the default which is the ```XxxPageNotFoundPageComponent```.

As you add additional routing paths, do not add them here.
Instead, each page should have it's own component,
and it should also have it's own routing module.

See how this is done by looking at the routing module for the home page, ``xxx-home-page-routing.module.ts``.

The routing for each page is done in the routing module for that page component.

This is the recommended design for using routing in a large scale application.

**Note**: You need to import any module that has routing in the ``app.module.ts``.
So you will see in this case that we have imported ``XxxHomePageModule``.

#### If You Do Not Need Any Routing

1. Delete the ``@angular/router`` entry from the **package.json**.
2. Delete the ``app-routing.module.ts`` file.
3. Delete the import for the ``AppRoutingModule`` in the ``app-routing.module.ts``.
4. Delete the import for the ``XxxHomePageModule`` in the ``app-routing.module.ts``.
5. Delete the directories for ```xxx-home-page``` and ``xxx-page-not-found-page``.

### Home Page And Page Not Found Are Done

Two initial pages for routing are set up. ```XxxHomePage``` and ```XxxPageNotFoundPage``` are done.

Each path (other than for page not found), should have its own routing module.

See how this is done by looking at the routing module for the home page, ``xxx-home-page-routing.module.ts``.

### Header Component Is Done

A header component ```XxxHeader``` is done. It uses Angular Material **MatToolbar**.

This gives you a decent looking application so you can start coding!

---

gha_language: TypeScript

gha_license_id: NOASSERTION


text:
go-kafakesque
--------------

[![Go Documentation](http://img.shields.io/badge/go-documentation-blue.svg?style=flat-square)][godocs]
[![Build status](https://circleci.com/gh/arbor/go-kafkaesque.svg?style=shield&circle-token=ebd68735d49a76441b9272111ba0b12d472ee4d9)](https://circleci.com/gh/arbor/go-kafkaesque)

[godocs]: https://godoc.org/github.com/arbor/go-kafkaesque

A Go binding for [Kafka Admin Service](https://github.com/arbor/kafka-admin-service)
Since I couldn't manage to find one, hence, write a
new one. One of the intention of having this package is
to allow me to easily write a Terraform provider.

## Usage:

Import package
```bash
go get github.com/arbor/go-kafkaesque
```

For package dependency management, we use dep:
```bash
go get -u github.com/golang/dep/cmd/dep
```

If new package is required, pls run below command
after go get. For more information about dep, please
visit this URL https://github.com/golang/dep.
```bash
dep ensure
```

Run test:
```bash
make test
```

To maintain codebase quality with static checks and analysis:
```bash
make run
```

Examples:
```go
package main

import (
	"fmt"

	gokafkaesqueue "github.com/arbor/go-kafkaesque"
)
```

## Contributing

1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request

repository: arbor/go-kafkaesque

gha_language: Go

repo_name: arbor/go-kafkaesque


text:
The solution has been created with Visual Studio Express 2010.

How to Build Windows Version
=====
* Open the solution file with Visual Studio
* Select x64 and Release in build
	- For 32bit windows or python, try win32 and Release (not fully tested)
* Rebuild all

This should give you xgboost.exe for CLI version and xgboost_wrapper.dll for python

Use Python Module
=====
* After you build the dll, you can install the Python package from the [../wrapper](../wrapper) folder

```
python setup.py install
```

And import it as usual

```
import xgboost as xgb
```

R Package
====
* see [R-package](../R-package) instead


text:
---
layout: article
title: Testing a React app in Node.js with Jasmine
redirect_from: /tutorials/react_with_npm
---

# Testing a React app in Node.js with Jasmine

The [Jasmine NPM](/setup/nodejs.html) package was originally designed just to
run specs against your Node.js code, but with a couple of other packages, you
can use it to run your React specs as well. This tutorial assumes you're using
[babel](https://www.npmjs.com/package/babel) to compile your code and
[React Testing Library](https://www.npmjs.com/package/@testing-library/react)
to test it. We'll also be using [jsdom](https://www.npmjs.com/package/jsdom)
to provide a fake HTML DOM for the specs.

A [complete working example](https://github.com/jasmine/jasmine.github.io/tree/master/examples/react-in-node)
of this setup is also available.

 With Jasmine initialized, the first thing we'll
do is make a helper to register babel into the `require` chain. This will cause
TypeScript files to be compiled to Javascript on the fly when they're loaded.
Make a new file called `babel.js` in the `spec/helpers` directory:

```javascript
require('@babel/register');
```

Or, if using TypeScript:

```javascript
require('@babel/register')({
    "extensions": [".js", ".jsx", ".ts", ".tsx"]
});
```

We need to tell Babel what flavor of Javascript we want by adding a
[Babel configuration](https://babeljs.io/docs/en/configuration) with the
following contents:

```json
{
  "presets": ["react-app"]
}
```

Next, we need to provide a simulated browser environment. Create `jsdom.js` in
`spec/helpers` with the following contents:

```javascript
import {JSDOM} from 'jsdom';

const dom = new JSDOM('<html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.navigator = dom.window.navigator;
```

In order to ensure these files are loaded before any specs run, we'll edit
`spec/support/jasmine.json`. We need the Babel helper to be loaded before any
helpers that contain TypeScript, JSX, or any other code that needs to be
transpiled, so we modify `jasmine.json` like so:

```json
"helpers": [
  "helpers/babel.js",
  "helpers/**/*.js"
],
```

Or, if using Typescript:

```json
"helpers": [
  "helpers/babel.js",
  "helpers/**/*.{js,ts}"
],
```

Next, set up the `test` script in `package.json` to run Jasmine:

```json
  "scripts": {
    "test": "cross-env NODE_ENV=test jasmine",
```

## Handling CSS and image imports

It's common for React code to import CSS or image files. Normally those imports
are resolved at build time but they'll produce errors when the specs are run in
Node. To fix that, we add one more package:

```shell
$ yarn add --dev ignore-styles
```

```shell
$ npm install --save-dev ignore-styles
```

And put the following code in `spec/helpers/exclude.js`.

```javascript
import 'ignore-styles';
```

## Optional: Spec file pattern configuration

You also might want to change the way that Jasmine looks for spec files.
Jasmine traditionally looks for files in the `spec` directory with names ending
in `.spec.js`, but a common convention in React projects is to put spec files
in the same directories as the code they test and give them names ending in
`.test.js`. If you want to follow that convention, change the `spec_dir`,
`spec_files`, and `helpers` setting in `spec/support/jasmine.json` accordingly:

```json
  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.js"
  ],
```

Or, for TypeScript:
```json
  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.{js,ts}"
  ],
```

## Setting up a React testing utility

We'll need a way to render React components and inspect the result. There are
several utility libraries that provide that functionality. The most popular is
[React Testing Library](https://www.npmjs.com/package/@testing-library/react).

Setup for react-testing-library is simple. All we need to do is make sure the
`@testing-library/react` package is installed. If you used a recent version of
`create-react-app` to initialize your application, it might already be there.
If not, install it:

```shell
$ yarn add --dev @testing-library/react
```

```shell
$ npm install --save-dev @testing-library/react
```

See the
[React Testing Library documentation](https://testing-library.com/docs/react-testing-library/intro)
for more information. The related
[jasmine-dom](https://github.com/testing-library/jasmine-dom) matcher library
may also be of interest.

Note that most of the React Testing Library docs are written for Jest, so the
code samples require some translation before they'll work in Jasmine. In
particular:

* The Jasmine equivalent of `test()` is `it()`.
* Although there's a lot of overlap, Jest and Jasmine have different built-in
  matchers.
* Jest creates an implicit top-level suite in each file. Jasmine doesn't, so
  wrapping the contents of each file in a well-named `describe` is highly
  recommended.

When translating code samples from Jest to Jasmine, you may find it helpful to
refer to the [Jasmine tutorial](/tutorials/your_first_suite), the
[list of matchers that come with Jasmine](/api/edge/matchers.html), and the
[list of matchers that come with jasmine-dom](https://github.com/testing-library/jasmine-dom#custom-matchers).

 [Write your specs](/tutorials/your_first_suite.html) and run
them:

```shell
$ yarn test
```

```shell
$ npm test
```

gha_language: HTML


text:
# UrlParser

Ruby library for parsing URL (RFC 3986).
C extension with external library which users re2c to generate C code for parsing.
Detailed descriptions is in the [blog article](http://staskobzar.blogspot.ca/2016/08/url-parser-ruby-c-extension-binding.html).

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'url_parser'
```

And then execute:

    $ bundle

Or install it yourself as:

    $ gem install url_parser

## Usage

TODO: Write usage instructions here

## Contributing

1. Fork it ( https://github.com/[my-github-username]/url_parser/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request


text:
Django Async is an asynchronous execution queue for Django with proper database transaction management.

Building a database backed task queue is a fairly trivial thing, but getting the database transactions exactly right is no simple matter.

[![Build Status](https://travis-ci.org/KayEss/django-async.png?branch=develop)](https://travis-ci.org/KayEss/django-async)

# Usage and documentation #

All documentation can be found at http://www.kirit.com/Django%20Async

# Doing development #

_This project uses git flow. Don't forget to do `git flow init -d`_

To test just run `tox`. But if you want to go the old way then to create virtual environments for running the tests you can execute `test-projects/make-virtual-environments`. To run the tests execute `runtests`.

repository: dcollinsn/django-async

extension: markdown

repo_name: dcollinsn/django-async


text:
---
title: Year 8 third blog
layout: post
author: toby.summerfield
permalink: /year-8-third-blog/
source-id: 10AT_xEW7QiP5QPN2Mjh7NgnmvCMimqtuPVnFFP0TkAQ
published: true
---
Third blog - making an animation which makes ' I love aliens ‘

Task: To make progress with fuze and create a moving animation

What went well

I was able to finish the task of making ' i love aliens ‘. I also managed to figure out all the coding and set up my fuze box first time. This is an achievement because last week I had to ask for some help but this week I completed it first time.

What didn't go well

When I was coding I made a few errors as I was rushing to see the finished product. When I tried to run the program with my original coding it worked but it said ' I love' and it didn't say aliens at the end.

How to achieve it

I could achieve my goals quicker and more easily by not being quicker but actually slower and more careful. This is because i would be able to complete the task with 100% accuracy and not have to go back through my work or coding to find where I had gone wrong and how to fix it.