text:
title: Web Developement 101
---

# Introductory Guide to learn Web Development

# 101 to 2.0 Full Guide (Beta Version) 🏗
Last Updated on : Sep 20, 2020 (Under Development 🚧 and writing ✍ Phase)

**Disclaimer:** This document has highly practical information and resources for you to learn about web using modern Project Based Learning(PBL) approch.
This document is not for exam clearing or passing point of view it is crafted for those who want to learn about the web using Agile Learning and hands-on projects.
**🎯🎯The goal of this document is to show you what are major components of building a Website and How you can learn to build something of your own and put it on Internet.**

> We have tried to keep it simple and start from the basics.
> **We have also tried our best to simplify the simple terms and we assume you know nothing and want to learn from scratch**
> Because we all have faced the problem of not 😕 understanding the definition 😕. Definations of Definations will be broken down into 🍰digestible🍰 terms so you know the reference to each word.

You will be taken to the web from developer point of view.
**Theory is supported by relevent memes and illustations for ease of understanding.**

## What is Web?
Web is an Internet based system that serves the purpose of sharing resources from one computing device with other.
**Web** in English means a network of interconnected elements. As we know many small computing devices are available on those devices and each node has specific value in the system to contribute to Internet. That is where Internet and Web seem similar.
Web works with many file formats but originally it was meant to avail readable files on internet which could be useful for others.
Today we use HTML (Hyper Text Markup Language) with other modern technologies to bring a beautiful User Experience.

## Why was Web needed?
When Internet started people wanted to share information and resources with other people using other computing devices but there was a problem that the computer or the device which servers the files has to be turned on all day and night for everyone to access specific resources which was not quiet possible with personal computers.
**Solution?** Some tech businesses started to help people and other small business to bring themselfs by making going to your resources and info easily available to any body 24*7. They created services where people can buy some space to put their content on a system which is connected to internet all time.

### Funfact: The Domain we search are not how the website is named or identified.
An IP Address is logged behind each running website or domain where the web traffic is sent.
An **Internet Protocol address** (**IP address**) is a numerical label assigned to each device connected to a [computer network](https://en.wikipedia.org/wiki/Computer_network "Computer network") that uses the [Internet Protocol](https://en.wikipedia.org/wiki/Internet_Protocol "Internet Protocol") for communication.
**Bonus**: Currently there are 2 Types of IP addresses.
- IPv4
![image](https://user-images.githubusercontent.com/33034184/89873941-ca334d00-dbd8-11ea-8bdf-682d6cbb6f40.png)

- IPv6
![image](https://user-images.githubusercontent.com/33034184/89874025-e636ee80-dbd8-11ea-937b-65280009de61.png)

**You can study about IP Addresses from other resources but for now just know that IP Address is behind each active domain.**

## How Web Works
![image](https://user-images.githubusercontent.com/33034184/89870514-943f9a00-dbd3-11ea-9c4d-e1f6c2a50f58.png )

### Interesting Note: Web is not limited to Websites.
Web is cosidered to be a place where you can find websites you need but for Developers it is more than that. Websites work with https:// (Port 443) or http://(Port 80) domains but under the hood websites communicate with APIs or Websockets to fetch data and resources from other services also.
**All the smart phone apps that we use communicate with a server which is hosted on the Web using Domain which has server IP.
That is how we can access same data over the Phone Apps or Web-based apps as the Server is not client side dependent any type of device can ping server if the developers want.
**

## What is Client Side
Client Side is anything that pings the website and uses it. User uses Website using Client like Web-browsers from various available devices.

## What is Server Side
Anything that happens related to logic of the service or the backend it is done on the server side.

## Where is Programming
There are different programming languages for various purposes in Web Dev and some do fulfill
many purposes.
**Client Side Progamming**
HTML and CSS are just the Structure and Design parts of Website which cannot be considered as programming laguages as we donot write logics in HTML and CSS.

 They are in simple words controlled by JavaScript to function in intractive manner.
**Laughter Warning !**

JavaScript is the language which executes in user's browser to provide the functionality to smooth and interative websites.

## Server Side Programming

**Programming logic and business logic of a site resides on Server Side. Server Side Programming languges are**
 - PHP
 - Java(Spring Boot)
 -  Python (using Django or Flask Web Dev
   Frameworks) Note: Python Frameworks can also manipulate client side pages.
   - NodeJS
   These languages help the developer write the logic for backend or server side.
   **Note that Backend languages can be used for building API's for your project too.**

## What is Server
Server serves the desired Webpage or API for users. Server is nothing but a port that runs and serves what the Developer has coded.
**If you are a developer, You will be working simulating the server on your local machine to develop the desired functioning of server.**

### Where is server kept
Server itself is a specifically configured Computer/PC usually runs on Linux OS and can also run Windows or Mac but practically Linux is useful and widely used, now server has a port opened for public to access it's resources.

Server is a running service on a port of an IP address which allows web traffic to use it's resources.

**What is Port and opened port**
This is an important element of servers and website.

**Port** :
Computers do **not** have ports.
 Think of it as a virtual place which is available for specific service. If you want to access files on the web you go to port 443(https) or 80 (http) traffic. If you wish to run a database on the server you will be given a 3306 Port Number in case of MySQL.
There are total of 65535 Ports available on a system/PC's Networking Layers.
**Opened Port:** The networking protocols like TCP and UDP need the source and destination port to send data to specific service.

Port is always assigned with IP address for Network devices to identify sender and reciever.
General Format to hit a IP at specific Port
**IPADDRESS:PORT (<IP_ADDRESS>:5005)**
**Try This**
[https://www.google.com:80/]
This is Google server's port 80 means http means the we are hitting the google IP@ Port 80.
Google has configured their server to not use port 80 as the data is not secured over port 80.
You can read about difference between http and https from the web in case and know how https is secure.

**Now Test This**
This is where our google request is served. Port 443 open for HTTPS request/traffic
[https://www.google.com:443]
(https://www.google.com:443)
By Default Modern Browsers take us to PORT number 443 to achieve https but if we donot have https enabled in our site/server browser then tries port 80 and shows we are using unsecured connection.
**More on this will be discussed in coming steps.**

**Loads normal Google**

**Why 65535 Ports to be specific**

The concept of "ports" is strictly related to the [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol) and [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol) protocols of the [TCP/IP networking stack](https://en.wikipedia.org/wiki/Internet_protocol_suite). From a strictly technical point of view, both TCP and UDP are structured in such a way as to carry several kinds of information (Source port, Destination Port, Sequence Number, Data, etc.). As both "Source port" and "Destination port" are structured (within the TCP and UDP packet) with a 16 bit "field", here are the limits: source ports and destinations ports can assume all the values that can be represented with 16 bits (aka: from 0 to 65535);

**0 to 65535 'cause they are both represented with a 16 bit value.**

#### We are yet to get introduction to Linux and how you will be using Linux to host your site.
Hosting means putting the site live on ports 80, or 443 on internet.
**Think of Hosting as someone else's computer which can be used as a paid service by you and most importantly it hosting systems are configured to get a static ip and are 24*7 available.**
This is a business of the web. Linux machines are available to use as provided by hosting providers at different costs and machine hardware configurations like RAM and storage.
Linux hosting is not the only option as mentioned earlier but for now keep it to linux.

**Does that mean you need hosting to start building your website?**
No, not yet!
### **Did you know about localhost or <IP_ADDRESS>**
As developers we need to make our website on our available OS or System so we simulate the server on our local OS and build and test the website on local network before starting to pay for a hosting service.
Like all other Linux hosting machines all of computers have basics networking functionality to run local services. The only difference in your personal computer and Hosting service machines is that it is up all day and night with stable internet connection until you can pay .
Your personal Computer can be your server till the time you can keep it turned on.

## How will I make my PC become server for my development?
You will need what's called a Web-Server Software which will make your pc a server for you and your other network devices connected on the same network.
Keep Reading this document and you will reach on the step for using that software and know that there are many ways to start a local server using different Web-server softwares.

### Wow! You made it to practicals now!

**Congratulate yourself as you now have basic understanding of the web and know what are major components in building your own Web-based solution or Website**

### Let's Begin :-)

## Development 101

### Choose IDE you like
IDE is an Advanced text-editor specifically built for writing code. IDE helps us with simple tools to ease the workflow and manage the code.

***Le Beginners**

Most of devs use Visual Studio Code
> **Install a IDE like Atom or Visual Studio Code**
> **💡💡Start Downloading Now so VSCode Downloads while you are reading this.💡💡**
> [https://code.visualstudio.com/]
> [https://atom.io/](https://atom.io/)

## The Subtle art of Googling

> Everything you are trying to do it already done by someone on the web.

**Just enter your errors or question on google and the many resources will be given to you right a way.**

Example Doubt:
Case: I am developing a webpage where users can run a JavaScript function or script after clicking a button which will do a task. I know that a button element is needed using which should run a funtion so my search could be
"how to listen to html button click using js"
or "how to run js on html button click"

### Meme Alert!

## Learn HTML CSS

**Keep Following this doc the Project 1 will help you learn basics**
There are many resources to learn Basics you can find many on the web.
**Note that You should try building it on your personal PC so you can learn by doing**
https://www.w3schools.com/html/](https://www.w3schools.com/html/)
[https://www.w3schools.com/html/html_css.asp](https://www.w3schools.com/html/html_css.asp)
[https://www.w3schools.com/html/html_scripts.asp](https://www.w3schools.com/html/html_scripts.asp)

**Understand HTML, CSS and JS Roles**

### Project #1 Alert!!!!

#### Rollup your sleeves... 💻Now You need to get started

## Action Project #1
**🌎🌎 Remember to follow each walkthrough step**
### Task 1 📖: Make Static Website and Deploy using Github Pages

About this Task:
**🔨Let's Break it Down🔨**
- Make (Create Something)
- **Static Website** : Static Website is a Website which is collection of html pages which do not communicate with any server.
Meaning : Static Website has no data processing or storage it is just to show case documents with beautiful or desired UI. [Only Client Side Web Pages only]
> Example : This Website you are on is a Static Website where you can visit using the github domain and see documentation to learn about Web and Web Development.
- **Deploy** : Deployment is an Action where your code/work/project is uploaded on Public URL so every body on internet and your Website Domain can reach and view.
- **Github Pages**: We will be using Github Pages to walk you through on how you can use Github to maintain your code base and host(host is open and available to use and Deploy is Action to host it site/code).
> What is Github? Github is a code management system in simple words which helps us store or code and code versions/history so we can store our old code even after code changes.

**How does Github do it?**
Github does this using Git VCS (Version Control System is a Fundamental and essential component of any Software service or product) where code changes can be tracked and stored.
So when we create Github Account it just provides us a cloud based system where we can store our code and collaborate with our Team.
More about Git and Github will be explained as we procced.

**Now you Know Github Pages are features in Github where along side maintaining the code you can also host HTML based Code on Github provided Domain.**
> Example : This URL https://wilyerengineering.github.io/learn is a sub-domain of Github which can be created by enabling Github Pages from Github for specific project.

**What is Sub-Domain ?**
Sub-Domain is an extentsion of a domain. Like Some Companies have extensions to reach out to specific departments. 📠
You must have seen such cool domains yourself while surfing the web.
> Example : 🎙 https://artists.spotify.com/ 🎙 [Spotify has this domain for Music Artists and Looks very Professional]

## **What are domains and How Can we buy domains?**

**Domain names are simple words with .com, .org , .io [Latest on Trend] or .in [For India] as per country.** to easily find the relevent online service or website with out remembering each site's IP address which is like remembering phone numbers of all your contacts without naming them. We know the pain.

**You can buy from https://in.godaddy.com/ which seems to be the best for this but there are others like Big Rock or Name Cheap**

- You donot have to buy a domain to follow this guide but this is for helping you know how each major step is done when putting some business based project live. Currently we are using Github Pages to host and learn.

#### Case Study:
Let's Assume you want to launch a web site which sells books online.[Just assume that nothing of this sort is already in the market(in market means on other websites) Just as a test run.]
- You will need to to buy a domain name where people can buy your books and visit your site, so let's get started and find domain on GoDaddy.

- You need to see that Domain Names have high value as easier it is to remember the costlier it will be.
Premium Domains Refer to easy Domain Names.
Example 1: [Not Cheap to buy if you are just a startup and don't have such a price to pay.]
![image](https://user-images.githubusercontent.com/33034184/93695150-363a9680-fb31-11ea-9bbb-6f90adfb0e88.png)

### Memes Alert!

Example 2: **Now Let's Use Give our Startup a Good and Unique Name**

- Domains names define the name of your business so make sure you use your skills to make a cool name. It is good idea to add One Common thing with an uncommon word to make a Domain name unique.
- May be Tweaking with Characters here and there.
**Here Chill is added to online Books and now it seems cool enough to buy such a domain name.**

### **✨ In 90% of Cases Domain Names Define Business and How people remember it.✨**

![image](https://user-images.githubusercontent.com/33034184/93695280-85cd9200-fb32-11ea-97ac-50d960d3edce.png)

#### This is enough for you to know the value of domain and how sub-domains are booked.

**Crux**: SubDomain Can only be created if you own the corresponding Domain name.
like **buy.chillbooksonline.com** if you own **chillbooksonline.com** or **care.chillbooksonline.com** for customer care specific portal or pages.

### ❄Cool❄ Now you will understand the following defination.❄
Github creates for us a sub domain with our username followed by github.io {github.io is another domain which is owned by GitHub, Inc.

Using Github Pages and deploying your own static website will help you build your desired HTML CSS Template Based.

👨💻 You will use, learn and work on 👨💻 :
- HTML
- CSS (divs , classes , import css and fonts)
- JS imports
- Downloading a predesigned web page and customizing it (Bootstrap Templates in short)
- Setting up an IDE for your project development.
- Creating Github Account and Basics of Git
- Deploy your first website on internet using Github Pages(Static Site)

### Step 1: Download Visual Studio Code (VSCode)

### Step 2: Install an Extension named Live server in VSC
- Open VSCode and Find The Extensions Icon from Side Nav Bar.

- Search "Live Server" or "LiveServer" to Find an Extension and Install The Extension

- Make Sure Your VSCode's Bottom Tool Bar has

or

### Step 3: Make your project Dir
It is recommended that you make a Directory/Folder on your system which you will only use for development related work like "DevelopmentProjects", "Coding" or any cool name you wish.
Now understand that each one of your project will have a folder dedicated to it. So when you do this project make a folder named whatever you like.

**Open**
![image](https://user-images.githubusercontent.com/33034184/93705037-8583c580-fb37-11ea-96ab-b4d7ca720a40.png)

**Create Folder**
![image](https://user-images.githubusercontent.com/33034184/93705050-9af8ef80-fb37-11ea-9264-7aa8593141b9.png)

**Select 'WilyerLearnProjects' or The folder you just created**
![image](https://user-images.githubusercontent.com/33034184/93705075-cf6cab80-fb37-11ea-958e-daa995d7ae1b.png)

**Create New File and name it index.html**
![image](https://user-images.githubusercontent.com/33034184/93705111-37bb8d00-fb38-11ea-8d07-51d4444aaccc.png)

**Write some Simple HTML to index.html**
In the following Case we have used simple H2 Tag `<h2> </h2>` and Added Desired Text

#### Don't Care about the syntax yet. Just follow along. **This is more of a Environment Setup Part**
![image](https://user-images.githubusercontent.com/33034184/93705136-781b0b00-fb38-11ea-94f3-63da14b7b2ce.png)

**Right Click and Find Option to `Open File with Live Server` Select and You will see the browser Window open automatically**

![image](https://user-images.githubusercontent.com/33034184/93705153-9254e900-fb38-11ea-978f-90ea849f3cae.png)

If Browser Window does not open then try to use this URL : http://<IP_ADDRESS>:5500/ [This will be explained in coming section] First just check it and run it for yourself.
**Note that the value after :(colon) is Port 5500 and same value can be seen in bottom-right section of Tool bar so use the value which is being shown on your system**
http://<IP_ADDRESS>:YOUR_VALUE from Photo(5500)
Final URL : http://<IP_ADDRESS>:5500/
![image](https://user-images.githubusercontent.com/33034184/93706543-fb425e00-fb44-11ea-8c6f-7451d4326e8a.png)

> ### **Now Let's See what is the meaning of 👉 http://<IP_ADDRESS>:5500/**

#### **Let's 🔨Break🔨 it Down**

- http:// 👉 Hyper Text Transfer Protocol
![image](https://user-images.githubusercontent.com/33034184/93706740-04342f00-fb47-11ea-9755-232ffd2a3625.png)
#### 🔥Bonus ▶Video▶ To Understand it as it will be useful.
{% youtuber video hExRDVZHhig %}

{% endyoutuber %}

- <IP_ADDRESS> 👉  is called LocalHost IP Address. `localhost`. Local hoat as defined in intro is a local address of your machine so you can run tests and develop by simulating an original IP Address that is liked with Domains.

- :5500 👉 is a Port Number where the Operating System runs specific service.

### Output
![image](https://user-images.githubusercontent.com/33034184/93705212-098a7d00-fb39-11ea-9736-1e631cff534f.png)

### Step 4: Update HTML Page `index.html` with following code.
{% codepen wilyerofficial bGpmJaB light html,result 300 %}

Example
![image](https://user-images.githubusercontent.com/33034184/93705641-689dc100-fb3c-11ea-8edd-023cf219de14.png)

### Step 5:Learn HTML Basics If you want.

**Following Video of 30 minutes can help you grab the basics of HTML and all the available Tags that you can use**

You can skip this if you know a little about HTML Already.

{% youtuber video 88PXJAA6szs %}

{% endyoutuber %}

### 🚧🚧🚧🚧  Working on Document Guide from this step onwards 🚧🚧🚧🚧

#### Step 6: Now Download the Pre-designed Bootstrap Template

#### What is Bootstrap Template
It is like someone has already done basic UI design so you can build your website elements using that.

Some suggested Templates:

 - [https://bootstrapmade.com/free-html-bootstrap-template-lonely/](https://bootstrapmade.com/free-html-bootstrap-template-lonely/)
 -   [https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-template/](https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-template/)

**You can Explore more from here**

 - [https://bootstrapmade.com/bootstrap-portfolio-templates/](https://bootstrapmade.com/bootstrap-portfolio-templates/)

 - [https://colorlib.com/wp/cat/portfolio/](https://colorlib.com/wp/cat/portfolio/)

### Step 7: Extract Downloaded Template and Copy to the project folder you created
Folder Downloads as .zip file so you will need to Extract to proceed.

### Step 8: Launch it on you local using Step #5 options

### You should see the working page like you did on the web preview when you downloaded

#### Open the code files of downloaded project in VSCode

## Now YA OYO(you are own your own)
Play with the code and make it look like yours.
Add you images, Text make it cool. You can always use the art of googling to clear your doubts.
Add Your Social Media Handles and make it professional.

### Hyyyy Now what? Don't you want your friends to see our personal website live?

###

    If (yes){
    print("Fasten your seat belts now we are going in the Realm of Git.");
    }
    else{
    print("As you wish");
    }

**Git or Github may seem a intimidating at first but when you know it's uses and Advantages you will never look back.**

Create an account on Github it is developer's Linkedin.
### Learn Git from any of these YT tutorials or watch other videos you like on YT
[https://www.youtube.com/watch?v=iR5WIknxdkY](https://www.youtube.com/watch?v=iR5WIknxdkY) (Hindi)

[https://www.youtube.com/watch?v=0fKg7e37bQE](https://www.youtube.com/watch?v=0fKg7e37bQE) (English)

[https://www.youtube.com/watch?v=SWYqp7iY_Tc](https://www.youtube.com/watch?v=SWYqp7iY_Tc)  (English)
### Following Image can be kept handy to use Git Commands
![image](https://user-images.githubusercontent.com/33034184/84883173-dbb31980-b0ad-11ea-8d59-1b89b2004793.JPG)

## Action Project #2

## Realtime Instagram Follower Counter.

You will learn about AJAX Request and JavaScript DOM Interaction.
[https://gist.github.com/rahulshyokand/ea12f3817a05f71b55fc3013dd4e2630](https://gist.github.com/rahulshyokand/ea12f3817a05f71b55fc3013dd4e2630)

# AJAX

## Action Project #3
Playing with User inputs in forms and storing in Database.

## What are Databases?
Database is a service which helps in management and storage of Database.A database is useful if you woould want to store information of users and help them back when they need.
Almost all websites we use store user data for various purposes. Like most websites need us to login to there system and so we can do specific operation with an identity like Email or Username.
In simple terms an entry in database is made when we create an account on a web-based or a software based platform. When we login the program checks if user with the given username or password exists in database and accordingly we can proceed.

### There are many Databases available in market but there are 2 main types of DBs

Relational DB or NoSQL (Structured or Unstructured DBs)

 For Now understand that RDBMS is like an advanced EXCEL Sheet which can be accessed using all Server Side programming languages as the DB is on the Server Side.

## MySQL
(Basic RDBMS) for Starting

[https://www.tutorialspoint.com/mysql/index.htm](https://www.tutorialspoint.com/mysql/index.htm)

## Deploy - Yet to be written

## Linux OS Basics
- Making Directories
- Accessing Linux using SSH using git commands on Linux to handle production server deployments of Code
- Installing Python / Django on Linux
- Bash Scripts
- Start Django App after Linux VM Reboot

repository: WilyerEngineering/learn

branch_name: refs/heads/source

gha_license_id: NOASSERTION

repo_name: WilyerEngineering/learn


text:
---
title: "M. Arch. Mai Tran"
draft: false
# page title background image
bg_image: "images/backgrounds/page-title.jpg"
# meta description
description : "."
# teacher portrait
image: "images/team/MAI.JPG"
# course
course: "Operation Manager"
position: ""
# biograph
bio: "M.Arch Tran Thi Quynh Mai is an Operation Manager at ISCM. She graduated from University of Architecture Ho Chi Minh city with master degree in Architecture (2013). After graduation, she has worked for Ton Duc Thang university as well as Architectural lecturer in 6 years. Her interests in research focuses on architecture and urban fields especially smart design, urban design, landscape architecture, sustainable development and smart city."
# interest
interest: ["Sustainable development","Heritage Conservation", "Smart design"]
# contact info
contact:
  # contact item loop
  - name<EMAIL_ADDRESS>    icon : "ti-email" # icon pack : https://themify.me/themify-icons
    link<EMAIL_ADDRESS>
  # contact item loop
  - name : "+84-28-3930-9589/ +84-28-3930-9269"
    icon : "ti-mobile" # icon pack : https://themify.me/themify-icons
    link : "tel:+120345876"

  # contact item loop
  # - name : "Clark Malik"
  #   icon : "ti-facebook" # icon pack : https://themify.me/themify-icons
  #   link : "#"

  # contact item loop
  # - name : "Clark Malik"
  #   icon : "ti-twitter-alt" # icon pack : https://themify.me/themify-icons
  #   link : "#"

  # contact item loop
  # - name : "Clark Malik"
  #   icon : "ti-skype" # icon pack : https://themify.me/themify-icons
  #   link : "#"

  # contact item loop
  # - name : "clarkmalik.com"
  #   icon : "ti-world" # icon pack : https://themify.me/themify-icons
  #   link : "#"

  # contact item loop
  # - name : "1313 Boulevard Cremazie,Quebec"
  #   icon : "ti-location-pin" # icon pack : https://themify.me/themify-icons
  #   link : "#"

# type
type: "teacher"
weight: 8
---

### Courses
* Building Construction/Structure
* Theories of Architectural Design
* Design Studios
* International design Studios
* Urban planning and housing

### International Experiences
* Instructor in International design Studios in Thailand (2018), Myanmar (2019), Vietnam (2016, 2017, 2018, 2019, 2020)
* Lecturer exchange in Hasselt University, Belgium on March, 2018
* Member of Women in Transport Leadership (WiTL)
* Member of Lens

license: MIT

branch_name: refs/heads/main

extension: md

gha_license_id: MIT

license_type: permissive


text:
# Mineros

The original Meros miner, which was never optimized nor threaded. It is not maintained and should not be used.

### Compilation

```
git clone https://github.com/MerosCrypto/Mineros
cd Mineros
nimble install https://github.com/MerosCrypto/mc_randomx https://github.com/MerosCrypto/mc_bls https://github.com/MerosCrypto/Nim-Meros-RPC stint
nim c src/main.nim
```

### Usage

Mineros requires an active Meros node to work. While it is possible to mine blocks without one, it isn't possible to earn Meros without a node. Mining earns Merit, which is used to verify transactions. Only by verifying transactions do Merit Holders earn Meros. Without any verifications, Meros won't mint Meros.

```
./build/Mineros <IP_ADDRESS> 5133
```

Where `<IP_ADDRESS>` is the Meros node's IP and `5133` is the RPC port.

repository: MerosCrypto/Mineros

branch_name: refs/heads/master

gha_language: Nim

repo_name: MerosCrypto/Mineros


text:
## Reverse Vowels of a String

#### Description

[link](https://leetcode.com/problems/reverse-vowels-of-a-string/)

---

#### Solution

1. Set two pointers to find all vowels and reverse them
2.

repository: ProHiryu/leetcode

repo_name: ProHiryu/leetcode


text:
# cs224n-squad
cs224n squad project

Starter code from Stanford CS224n: http://web.stanford.edu/class/cs224n/default_project/index.html

The work being done in this repo:
1. Update starter code to be compatible with tensorflow 1.12
2. Convert GRU to cudnn_rnn.CudnnGRU & cudnn_rnn.CudnnLSTM, no recurent drop out support, but massive improvement on run time.
3. Implemented Bidirectional attention & Coattention
4. Created an attention called RNNattention, with RNNattention, simply feed the attention output to another bidirectional RNN, the model is able to achieve 65%+ F1 score on dev set with extremly fast training time (leave every other parameters as default). Training time per batch on a single NV 1080 graphic card machine is 0.26s.

Things to do:
1. Look at charactor-level vector representation
2. Look at conditioning end prediction on start prediction


text:
# OpenFaaS Kotlin Native (Linux amd64) Template

This template provides support for [Kotlin Native](https://kotlinlang.org/docs/reference/native-overview.html) (Linux amd64) on [OpenFaaS](https://www.openfaas.com/). By using this template a basic Kotlin Native program can be quickly created and included in a Docker image, which is ready to be deployed on OpenFaaS.

## Usage

In order to use this template go thorugh the following steps below.

1. Clone this repository
2. Change working directory to the cloned repository
3. Run the following to build a new Kotlin Native Docker image:

```docker build --tag hello-kotlin .```

4. Start OpenFaaS
5. Go to the following web address (in a Web Browser) to access the OpenFaaS Portal: http://<IP_ADDRESS>:8080
6. If a Login dialog appears enter in the username and password for the OpenFaaS instance
7. Click on **Deploy New Function** button
8. Select **CUSTOM** tab
9. For **Docker image** enter in **hello-kotlin**
10. For **Function name** enter in **hello-kotlin**
11. Click on **DEPLOY** button

After completing the steps above you can now try out the Kotlin Native OpenFaaS function (hello-kotlin).

repository: napperley/openfaas-kotlin-templates

repo_name: napperley/openfaas-kotlin-templates


text:
# Flatcar

Here are sensible defaults variables to use when deploying
on Flatcar.

## Requirements

Python on Flatcar is automaticaly bootstrap with a portable
[Pypy](https://github.com/squeaky-pl/portable-pypy).

## Sample configuration

```yaml
{!inventory/flatcar/group_vars/all/all.yml!}
```

repository: pierreozoux/symplegma

repo_name: pierreozoux/symplegma


text:
Lint Rules for Android.
==========

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

Android Lint Rules includes several rules for Android platform.

# Contents: #
* Background Vector : Detect vectors used for background
* Hardcoded Value : Detect hardcoded values used for dimension

# Installation
 - To implement **Android Lint Rules** to your Android project via Gradle, you need to add JitPack repository to your root build.gradle.
```gradle
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
```
 - After adding JitPack repository, you can add **Android Lint Rules** dependency to your app level build.gradle.
```gradle
dependencies {
    implementation 'com.github.Trendyol:android-lint-rules:1.0.1"
}
```

# TODO

#### Custom Lints
- [ ] Vector drawables for TextView Drawable attributes as an Error
- [ ] Use custom LifecyclerOwner with LiveData as a Warning
- [ ] Encapsulate the LiveData which is store data on ViewModels as a Warning
- [ ] Hardcoded colors for support theme as an Error
- [ ] Resource names (https://github.com/Trendyol/android-guidelines/) as a Warning
- [ ] Prefix check for multi module projects as an Error

#### IDE Default Lints
- [ ] Spesify return type explicitly as a Warning
- [ ] Line length as a Warning
- [ ] Method body line limit as a Warning
- [ ] Method name length as a Warning

License
--------
    Copyright 2019 Trendyol.com

    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.


text:
These files offer a unified hashing API for Jolt applications to leverage
built-in hashing functions with access to just 4 functions.

# Adding a new hash function

1. Make files `algorithms/<my_hash_func>.c` and `algorithms/<my_hash_func>.h`.

2. In these file, define the 4 functions:
    a. `jolt_hash_<my_hash_func>` -
    b. `jolt_hash_<my_hash_func>_init` -
    c. `jolt_hash_<my_hash_func>_update` -
    d. `jolt_hash_<my_hash_func>_final` -

3. Add an entry to the end of enumerated type `jolt_hash_type_t` in `hash.h`.
   Do not put it after `JOLT_HASH_MAX_IDX`.

4. Add your hashing header and add an entry registering your functions to your
   enumerated value in `hash_registry.c`. Make sure the ``name`` field is less
   than or equal to 14 characters (15 including NULL terminator) and is all
   lowercase. The ``size`` field is the length of the hash output in bytes.

5. Add unit tests to `tests/hash/algorithms/test_<my_hash_func>.c`

# Things already taken care of for you

1. Before passing to the custom hashing functions/wrappers, inputs have already
   been sanity checked. This includes reject NULL values, inputs of length 0,
   insufficient output hash buffers, etc.


text:
# Overview

[![Build Status](https://github.com/duosecurity/duo_api_perl/workflows/Perl%20CI/badge.svg)](https://github.com/duosecurity/duo_api_perl/actions)
[![Issues](https://img.shields.io/github/issues/duosecurity/duo_api_perl)](https://github.com/duosecurity/duo_api_perl/issues)
[![Forks](https://img.shields.io/github/forks/duosecurity/duo_api_perl)](https://github.com/duosecurity/duo_api_perl/network/members)
[![Stars](https://img.shields.io/github/stars/duosecurity/duo_api_perl)](https://github.com/duosecurity/duo_api_perl/stargazers)
[![License](https://img.shields.io/badge/License-View%20License-orange)](https://github.com/duosecurity/duo_api_perl/blob/master/LICENSE)

**duo_api_perl** - Demonstration client to call Duo API methods
with Perl.

## Tested Against Perl Versions:
* 5.24
* 5.26

## TLS 1.2 and 1.3 Support

Duo_api_perl uses the Perl SSL modules and OpenSSL for TLS operations.  TLS support will depend on the versions of multiple modules, but all recent versions have TLS 1.2 and 1.3 support.

# Duo Auth API

The Duo Auth API provides a low-level API for adding strong two-factor
authentication to applications that cannot directly display rich web
content.

For more information see the Duo Auth API guide:

<http://www.duosecurity.com/docs/authapi>

# Duo Admin API

The Duo Admin API provides programmatic access to the administrative
functionality of Duo Security's two-factor authentication platform.
This feature is not available with all Duo accounts.

For more information see the Duo Admin API guide:

<http://www.duosecurity.com/docs/adminapi>

# Duo Accounts API

The Duo Accounts API allows a parent account to create, manage, and
delete other Duo customer accounts. This feature is not available with
all Duo accounts.

For more information see the Duo Accounts API guide:

# Testing

```
$ cpanm --verbose --installdeps --notest .
$ perl Makefile.PM
$ make test
```

<http://www.duosecurity.com/docs/accountsapi>

gha_language: Perl


text:
---
title: "Field: REC_USE_LIM"
layout: field
parent: OTHER_METHOD
language: en
indicator: 16-5-2
slug: REC_USE_LIM
---
## Comments and limitations

The key strength of the Enterprise Survey is that most of the questions in the survey pertain to the actual, day-to-day experiences of the firm; this question regarding corruption during tax inspections/meetings is not an opinion-based question but rather a question grounded in the firm’s reality.

The limitations include that some countries’ data is almost 10 years old (e.g. South Africa and Brazil). This is due to the fact that these face-to-face survey projects can be expensive in some countries and hence due to budget limitations, the World Bank hasn’t been able to update some of the Enterprise Surveys data in a subset of countries. Another limitation is that the surveys are done mostly in World Bank client countries and hence most high-income countries are not covered by the surveys (US, Canada, Western European countries, Japan, GCC countries, etc.).

Another limitation may be the sensitive nature of corruption. In some countries/cultures, firms may not be comfortable answering questions on corruption. Although the data is collected under the context of confidentiality, firms may refuse to answer the question if they have been subject to bribery solicitations. Hence, in some countries, the actual incidence of this particular type of corruption may be higher than the calculated indicator value.

repository: weblate/sdg-metadata

repo_name: weblate/sdg-metadata


text:
# 🛠▶ Powerline Xcode Version Segment

Powerline status prompt segment which displays the active version of Xcode.

[![PyPI version](https://badge.fury.io/py/powerline-xcodeversion.svg)](https://badge.fury.io/py/powerline-xcodeversion)

# 🤳🏻 Usage

Add the `xcodeversion` snippet below to your powerline theme JSON file.

```diff
{
    "segments": {
        "left": [
+            {
+                "function": "powerline_xcodeversion.xcodeversion",
+                "priority": 60
+            },
            ...
```

## 🔧 Configuration

The spacing and symbol in the xcodeversion section can be customized (or removed).
Add the following to your main
[`powerline/config.json`](https://powerline.readthedocs.io/en/master/configuration.html)
file:

```diff
{
    "segment_data": {
+        "xcodeversion": {
+            "args": {
+                "format": "🛠  {}"
+            }
+        },
        ...
```

The example above shows the default format.
The `{}` will be replaced with the version number.

💡 Remember to kill the powerline daemon with `powerline-daemon -k`
so that your changes will show up immediately while you test configuration changes.

# 📄 License

This repo is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for rights and limitations.

repository: phatblat/powerline-xcodeversion

gha_language: Python

repo_name: phatblat/powerline-xcodeversion


text:
# ng-mouse-sprite
An angular module for manipulating sprite on mouse move among other mouse event. Also do simple sprite animation

##Usage
    install via npm
    npm install ng-mouse-sprite

    then include this in your html, ejs( or as suppose in your template, may be jade...) as follow. Please note path configuration for public files

    also include this as dependency in your app

        angular.module('app', ['ngMouseSprite'])

    then you can use this on a canvas as follow

###1. to just animate Sprite

            <canvas nga-sprite nga-img-src="/img/prite-animation.png"></canvas>

###2. to animating sprite on mouse movement over the canvas

            <canvas nga-sprite nga-img-src="/img/sprite-animation.png"></canvas>

###optional attributes for configurations are
        +`nga-img-src`     // This is the sprite image source. Check how to create a sprite here
        +`nga-frame-width`     The width of the frame, default is 100.
        +`nga-frame-height`    The height of the frame, default is 100. It is advisable to make this to be the same height as image height
        +`nga-img-height`      This is the sprite image height. Default is 100.
        +`nga-img-width`       This is the sprite image width. Default is 1000.
        +`ngaNoOfFrame`        This is the number of frame in a sprite sheet. You can specify a less frame than images you have to cut the frames short. This is calculated by default as floor function of nga-img-width/nga-frame-width
        +`ngaFramesDelay`      This is the delay in between frames. The lesser the delay, the faster the frames animations. The default is 3

### Sample usage with options
        <canvas nga-mouse-sprite=""
            nga-img-src="/img/sprite-animation.png"
            nga-frame-width="100"
            nga-frame-height="100"
            nga-img-height="100"
            nga-img-width="1000"
            nga-no-of-frame="10"
            nga-frames-delay="3">
        </canvas>

    Please check how to create a sprite sheet image here + [https://www.codeandweb.com/texturepacker/tutorials/how-to-create-a-sprite-sheet](here)

All issues and pull request should be submitted to [ng-mouse-sprite](https://github.com/olyjosh/ng-mouse-sprite)

## Author
### Joshua Aroke (Olyjosh)

Inspired by javascript work here
+ [http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/](http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/)

###MIT License

Copyright (c) 2017 olyjosh

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

 IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

repository: olyjosh/ng-mouse-sprite

repo_name: olyjosh/ng-mouse-sprite


text:
# gitlab-webhook-handler

Node.js >= 0.12

gitlab <= 7.11.4

从[gitlab-webhook-handler](https://github.com/rvagg/github-webhook-handler)修改而来，用来处理 gitlab 的 webhook 的一个中间件。由于我使用的gitlab是v7.11.4版本，目前默认仅支持 push、tag、issue 和 merge 事件，并且不支持SSL。

GitLab allows you to register **[Webhooks](https://gitlab.com/gitlab-org/gitlab-ee/blob/v7.11.4/doc/web_hooks/web_hooks.md)** for your repositories. Each time an event occurs on your repository, whether it be pushing code, filling issues or creating pull requests, the webhook address you register can be configured to be pinged with details.

This library is a small handler (or "middleware" if you must) for Node.js web servers that handles all the logic of receiving.

## Example

```js
var http = require('http')
var createHandler = require('./gitlab-webhook-handler')
var handler = createHandler({ path: '/webhook', events: ['Push Hook', 'Issue Hook']})

http.createServer(function (req, res) {
  handler(req, res, function (err) {
   res.statusCode = 404
   res.end('no such location')
  })
}).listen(7777)

handler.on('error', function (err) {
  console.error('Error:', err.message)
})

handler.on('Push Hook', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref)
})

handler.on('Issue Hook', function (event) {
  console.log('Received an issue event for %s action=%s: #%d %s',
    event.payload.user.name,
    event.payload.object_attributes.action,
    event.payload.object_attributes.id,
    event.payload.object_attributes.title)
})
```

## API

gitlab-webhook-handler exports a single function, use this function to *create* a webhook handler by passing in an *options* object. Your options object should contain:

 * `"path"`: the complete case sensitive path/route to match when looking at `req.url` for incoming requests. Any request not matching this path will cause the callback function to the handler to be called (sometimes called the `next` handler).
 * `"events"`: an optional array of whitelisted event types (see: *events.json*). If defined, any incoming request whose `X-Github-Event` can't be found in the whitelist will be rejected. If only a single event type is acceptable, this option can also be a string.

The resulting **handler** function acts like a common "middleware" handler that you can insert into a processing chain. It takes `request`, `response`, and `callback` arguments. The `callback` is not called if the request is successfully handled, otherwise it is called either with an `Error` or no arguments.

The **handler** function is also an `EventEmitter` that you can register to listen to any of the GitLab event types. Note that the `"error"` event will be liberally used, even if someone tries the end-point and they can't generate a proper signature, so you should at least register a listener for it or it will throw.

See the [GitLab Webhooks documentation](https://gitlab.com/gitlab-org/gitlab-ee/blob/v7.11.4/doc/web_hooks/web_hooks.md) for more details on the events you can receive.

Included in the distribution is an *events.json* file which maps the HTTP header *X-Gitlab-Event* to event names:

```js
var events = require('gitlab-webhook-handler/events')
Object.keys(events).forEach(function (event) {
  console.log(event, '=', events[event])
})
```

Additionally, there is a special `'*'` even you can listen to in order to receive _everything_.

## License

**gitlab-webhook-handler** is Copyright (c) 2016 [xlaoyu](http://xlaoyu.info) and licensed under the MIT License.

**github-webhook-handler** is Copyright (c) 2014 Rod Vagg [@rvagg](https://twitter.com/rvagg) and licensed under the MIT License. All rights not explicitly granted in the MIT License are reserved. See the included [LICENSE.md](./LICENSE.md) file for more details.

repository: Yuliang-Lee/gitlab-webhook-handler

repo_name: Yuliang-Lee/gitlab-webhook-handler


text:
# Changelog 3.1.0
- Returned plissken gem to convert the entire HTTP response to snake_case.
- Specs are refactored, now each class is tested independently.
- Removed the JSON gem from dependencies. Added the ability for developers to replace utilities for parsing JSON. Add example in README how to use it.
- Simplified the code where possible.
# Changelog 3.0.0
- Drop configure from SbrfMerchant, move params to SBRF::Api::Client#initialize
- Update minimum Ruby version to 2.3
# Changelog 2.0.1
- Nested fields of API response is OpenStruct, not Hash
# Changelog 2.0.0
- Drop SbrfMerchant::Order
- Rewrite SbrfMerchant::Api::Client, now it extendable by default for every request in API
- Add converting API request body from snake_case to camelCase
- Add converting API response body from camelCase to snake_case
# Changelog 1.0.0
- Replace Order::OneStage class with Order class
- Add methods for working with two stage orders
# Changelog 0.2.0
- Replace external gems with Ruby standard library features
# Changelog 0.1.3
- Fix unexpected behaviour in Response::Base#success?

# Changelog 0.1.2
- Fix errors in Response::OrderStatus

# Changelog 0.1.1
- Add support of OneStage Order (register, cancel, refund, status)

gha_language: Ruby


text:
## How-to-run-node-webkit's-test-cases

## Prerequisite

* node-webkit didn't ship third party node modules required for testing, you
need to install them.
* We use `nw-gyp` to build native modules.
* We have test cases that need a http server. And we have set up a simple nodejs server with port 8123 and 8124
opened. The http server document root is `tests/server`. You can add ports in `tests/server/server.js`

So please run this:

````bash
$ npm install -g nw-gyp
$ cd src/content/nw/tests
$ npm install -d
````

## How to run tests

The test suits is indeed a node-webkit app, so use node-webkit to run it:

````bash
$ /path-to-node-webkit src/content/nw/tests
````

## Command line options

    $ /path-to-node-webkit src/content/nw/tests --help

      Usage: nw-test [options]

      Options:

        -h, --help             output usage information
        -V, --version          output the version number
        -S, --silent           hide the browser window and quit when done (run silently)
        -R, --reporter <name>  specify the reporter to use
        -g, --grep <pattern>   only run tests matching <pattern>
        -i, --invert           inverts --grep matches
        -t, --timeout <ms>     set test-case timeout in milliseconds [2000]
        -s, --slow <ms>        "slow" test threshold in milliseconds [75]
        -b, --bail             bail after first test failure
        -A, --async-only       force all tests to take a callback (async)

### -S, --silent
Hide the browser window (run silently), and quit the app when tests are done,
suitable for automatic tests system.

### -o, --output <name>
Output result to a file, this is usually used together with `json`
reporter, so we can write the results of test to the file in the format of
JSON.

### -R, --reporter <name>
The `--reporter` option allows you to specify the reporter that will be used,
defaulting to `html`. This flag may also be used to utilize third-party
reporters. For example if you `npm install mocha-lcov-reporter` you may then
do `--reporter mocha-lcov-reporter`.

### -g, --grep <pattern>

The `--grep` option when specified will trigger mocha to only run tests matching
the given pattern which is internally compiled to a RegExp.

Suppose for example you have `api` related tests, as well as `app` related
tests, as shown in the following snippet; One could use `--grep api` or
`--grep app` to run one or the other. The same goes for any other part of a
suite or test-case title, `--grep users` would be valid as well, or even
`--grep GET`.

````javascript
describe('api', function(){
  describe('GET /api/users', function(){
    it('respond with an array of users')
  })
})

describe('app', function(){
  describe('GET /users', function(){
    it('respond with an array of users')
  })
})
````

### -t, --timeout <ms>
Specifies the test-case timeout, defaulting to 2 seconds. To override you
may pass the timeout in milliseconds, or a value with the s suffix, ex:
`--timeout 2s` or `--timeout 2000` would be equivalent.

### -s, --slow <ms>
Specify the `slow` test threshold, defaulting to 75ms. Mocha uses this to
highlight test-cases that are taking too long.

### -b, --bail
Only interested in the first exception? use `--bail` !

## Automatic test

To make the testing automatic, we need to:

1. Write results to a file.
2. Print the results in a machine-readable format, like JSON.
3. Run tests silently and quit when done.

In node-webkit's test, we can do:

````bash
$ /path-to-node-webkit src/content/nw/tests --silent --output result.json --reporter json
````

## Ignore tests that take too long to run

Some tests like visiting html5test.com and getting its score would take too
long to run for normal tasks, these tests are usually marked as `long-to-run`,
so you can use following command to filter out them:

````bash
$ /path-to-node-webkit src/content/nw/tests --grep long-to-run -i
````

## Tips
in test case like `node-remote`, we need to open a http server
to be the remote site. It is automatically opened when we run tests. We use port 8123, 8124 for test.
The http server document root is `tests/server`. We have put some resources there e.g. `node_remote_test.html`.

## Native Modules
When there is a new nw release, We hope you to rebuild native modules.

We use `tools/build_native_modules.py` to build our native modules:

````bash
$ cd src/content/nw
$ python tools/build_native_modules.py`
````
Also, please update `node_modules` using `npm install -d`.


text:
## Resampling

Up to now we have talked about neural network models as classification algorithms.
In the SR problem we have no classes but the desired output is a image.
This behavior is often hard to digest but it does not change anything about the previous consideration.
The only change will be related to the size of the neural network and its amount of parameters that could drastically increase due to the larger output required.
Lets start from the beginning: to feed a super-resolution model we have to use a series of prior-known LR-HR image association.
In the real life we always have a series of images, typically LR images, and we want to enlarge the resolution of them, i.e enlarge the spatial dimensions of the input image, to better see some particulars or just to create an output without artifacts or evident pixel grains.
If we consider these series of images as the HR one we can easily down-sample them without particular troubles [^1].
This re-sampling will introduce a aliasing factor that our model should learn to nullify.
The number of model parameters is typically around the `10^7` so if we introduce any filtering process (degradation) in the input image the model will be able to overcome also these problems.

Starting from these considerations we can down-sample our images by a desired scale factor: common scale factor are between 2 and 8 and in this work we will refer to a scaling equal to 4.
A crucial role is played by the re-sampling (or down-sampling) algorithm chosen for the artificial image degradation.
Any down-sampling algorithm, in fact, loose part of the original information by definition.
Thus we can facilitate the learning choosing a lossless one but in this way we will loose in generalization (the model will not learn how to overcome some cases), or we can apply a drastic down-sample technique and achieve better performances later.

The simpler down-sampling algorithm is given by a *nearest interpolation*.
This algorithm pass a kernel mask over the image and it substitutes each pixel mask to their average [^2].
This procedure can be achieved using a *Pooling* algorithm (in particular an AveragePooling) (ref. [Pooling](../NeuralNetwork/Pooling.md) for further information) for the down-sample or we can use an UpSample layer.
The UpSample function is commonly related to GAN (Generative Adversarial Networks) models in which we have to provide a series of artificial images to a given Neural Network but it is a function which can be introduce inside a Neural Network model to rescale the number of features.
We mention it in this section since it is not intrinsically related to a Neural Network model but it could be use as image processing technique.

We provide an implementation of this algorithm either in `NumPyNet` either in `Byron` library using different techniques.
The UpSample function inside a Neural Network model has to provide both up- and down- sampling technique since one is used in the forward function and its inverse during the back-propagation.
To achieve this function in `NumPyNet` we can use a series of reshapes and striding on the input matrix as shown in the following snippet.

```python
import numpy as np
from numpy.lib.stride_tricks import as_strided

class Upsample_layer(object):

  def __init__(self, stride=(2, 2), scale=1., **kwargs):

    self.scale = float(scale)
    self.stride = stride

    if not hasattr(self.stride, '__iter__'):
      self.stride = (int(stride), int(stride))

    assert len(self.stride) == 2

    if self.stride[0] < 0 and self.stride[1] < 0: # downsample
      self.stride = (-self.stride[0], -self.stride[1])
      self.reverse = True

    elif self.stride[0] > 0 and self.stride[1] > 0: # upsample
      self.reverse = False

    else:
      raise NotImplementedError('Mixture upsample/downsample are not yet implemented')

    self.output, self.delta = (None, None)

  def _downsample (self, input):
    batch, w, h, c = input.shape
    scale_w = w // self.stride[0]
    scale_h = h // self.stride[1]

    return input.reshape(batch, scale_w, self.stride[0], scale_h, self.stride[1], c).mean(axis=(2, 4))

  def _upsample (self, input):
    batch, w,  h,  c  = input.shape     # number of rows/columns
    b,     ws, hs, cs = input.strides   # row/column strides

    x = as_strided(input, (batch, w, self.stride[0], h, self.stride[1], c), (b, ws, 0, hs, 0, cs)) # view a as larger 4D array
    return x.reshape(batch, w * self.stride[0], h * self.stride[1], c)                                     # create new 2D array

  def forward(self, input):
    self.batch, self.w, self.h, self.c = input.shape

    if self.reverse: # Downsample
      self.output = self._downsample(input) * self.scale

    else:            # Upsample
      self.output = self._upsample(input) * self.scale

    self.delta = np.zeros(shape=input.shape, dtype=float)

  def backward(self, delta):
    if self.reverse: # Upsample
      delta[:] = self._upsample(self.delta) * (1. / self.scale)

    else:            # Downsample
      delta[:] = self._downsample(self.delta) * (1. / self.scale)

```

Thus the down-sampling algorithm is obtained reshaping the input array according the two scale factors (`strides` in the code) along the two dimensions and computing the mean along these axes.
Instead the up-sample function use the stride functionality of the `Numpy` array to rearrange and replicate the value of each pixel in a mask of size `strides x strides`.

The same functionality can be obtained in the `C++` version of the code provided by the `Byron` library in which we compute the right indexes along a nested sequence of for loops (ref. [on-line](https://github.com/Nico-Curti/Byron/blob/master/src/upsample_layer.cpp)).
We have to take in care the summation reduction provided by the down-sampling according to the thread concurrency: in this case we can not generalize the loop collapsing to the full set of lops but we have to separately manage the summation in a sequential section.

A more sophisticated interpolation algorithm, which reduce the loosing information, is provided by the *bicubic interpolation*.
The re-sampling algorithm interpolate the information provided by the nearest pixels using a cubic function.
Given a pixel, the interpolation function evaluates the 4 pixels around it applying a filter given by the equation:

$$
k(x) = \frac{1}{6} \left\{ \begin{array}{rc}
  (12 - 9B - 6C) |x|^3 + (-18 + 12B + 6C) |x|^2 + (6 - 2B)           & \mbox{if}        |x| < 1 \\
  (−B − 6C) |x|^3 + (6B + 30C) |x|^2 + (−12B − 48C) |x| + (8B + 24C) & \mbox{if} 1 \leq |x| < 2 \\
  0                                                                  & \mbox{otherwise}         \\
  \end{array}
  \right.
$$

where `x` identifies each pixel below the filter.
Commonly values used for the filter parameters are `B=0` and `C=0.75` (used by `OpenCV` library) or `B=0` and `C=0.5` used by `Matlab`[^3].
Despite this function was also implemented in the most common library in `Python` we provide an efficient multi-threading implementation in the `Byron` library.

Equivalent performances could be achieved using a generalized version of the bicubic filter which use the 8 positions mask around each pixel, the so called Lanczos filter.
Also this function was provided into the `Byron` library.

To better understand the told above functions we can consider their application on the simple image given in Fig. [1](../../../../img/up_down_sampling.svg).

![Re-sampling image example. **(left)** The original image. **(up right)** The down-sampled blue-ROIs using different interpolation algorithm (Nearest, Bicubic and Lanczos, respectively). We use a scale factor equal to 2 (half size in down-sampling and double size in up-sampling). The Lanczos interpolation is the lossless algorithm but from a qualitative point-of-view the result is the quite the same of the bicubic one. **(down right)** The up-sampled red-ROIs using the same interpolation algorithm of the upper row. Also in the Up-sampling the Lanczos and bicubic algorithms produces equal qualitative results. The Nearest algorithm produces the worse results in both up- down- cases.](../../../../img/up_down_sampling.svg)

In the figure the three algorithms were applied over the same image to highlight the differences against the down-sampling and up-sampling.
The nearest interpolation algorithm produces always the worse results both in up-sampling and down-sampling.
In the bicubic and Lanczos down-sampling we can better appreciate the "preservation" of the line shapes that are lost using the Nearest algorithm.
The result obtained by bicubic and Lanczos are quite similar in both cases but the computational cost of the Lanczos algorithm is greater than the bicubic one.
This is the reason why the bicubic interpolation is the most used technique for image resizing with a balance between computational cost and qualitative results.
In our implementation of SR algorithms we chose to use the bicubic interpolation for those reasons.

The aim of SR algorithm is to overcome these results and obtain a better quality image either from an optical point-of-view either from a mathematical one.
Until now we are considering the quality of the digital image only from a qualitative point-of-view.
In the next section we will introduce some useful mathematical scoring to numerically evaluate the image quality.

[^1]: Ignoring particular cases the hardest step is always to enlarge the image resolution and not the inverse step.

[^2]: The inverse (up-sampling) interpolation simply replicates each pixel in each dimension by a number equal to the scale factor.

[^3]: In this case the filter is also called Catmull-Rom filter.

[**next >>**](./QualityImage.md)

repository: Nico-Curti/PhDthesis

repo_name: Nico-Curti/PhDthesis


text:
## Notes for NOV 2020

* Ethics
    - theories
        - [Meta-ethics](https://en.wikipedia.org/wiki/Meta-ethics)
        - [Descriptive ethics](https://en.wikipedia.org/wiki/Descriptive_ethics)
        - [Normative ethics](https://en.wikipedia.org/wiki/Normative_ethics)
        - [Applied ethics](https://en.wikipedia.org/wiki/Applied_ethics)
        - [Narrative ethics](https://en.wikipedia.org/wiki/Narrative_ethics)
        - [Virtue ethics](https://en.wikipedia.org/wiki/Virtue_ethics)
        - [Deontological ethics](https://en.wikipedia.org/wiki/Deontological_ethics)
        - [Consequentialism](https://en.wikipedia.org/wiki/Consequentialism)
        - [Ethics of Care](https://en.wikipedia.org/wiki/Ethics_of_care)
    - [Trolley problem](https://en.wikipedia.org/wiki/Trolley_problem)
    - [The Good Place](https://en.wikipedia.org/wiki/The_Good_Place)
        - "Big Bang Theory" for moral philosophers
    - [Shop Class as Soulcraft](https://www.amazon.ca/Shop-Class-Soulcraft-Inquiry-Value/dp/0143117467)

* Random
    - ['ethics' tag](https://softwareengineering.stackexchange.com/questions/tagged/ethics) on Software Engineering Stack Exchange
    - [Søren Kierkegaard](https://en.wikipedia.org/wiki/S%C3%B8ren_Kierkegaard)
    - [Franz Kafka](https://en.wikipedia.org/wiki/Franz_Kafka)
    - [Onion satire on Kafka](https://www.youtube.com/watch?v=gEyFH-a-XoQ)
        - "Prague's Kafka International Named Most Alienating Airport"
    - [The Queen's Gambit](https://en.wikipedia.org/wiki/The_Queen%27s_Gambit_(miniseries))

## Sponsors

* [Forestry](https://forestry.io/)
* [Binary Star](http://www.binarystar.biz/)
* [Silver Orange](https://www.silverorange.com/)

## Our Links

* [Our website](http://peidevs.github.io/)
* [Request Slack invite](https://docs.google.com/forms/d/e/1FAIpQLScjMRLiiKXqeHCjCSAD37mFxJdH5fskiok-LUaIGtPUZ63glw/viewform)

gha_language: JavaScript


text:
---
layout: post
title: My Favorite Sublime Text Tips and Plugins
published: False
categories: [sublime-text]
tags: [tips, tricks, plugins]
comments: True
image:
    teaser: SublimeText.png
    feature: SublimeText.png
---

Lets just get things rolling. Here is a list of my currently used and favorite Sublime Text Plugins. I am currently running Sublime Text 3 on Windows 8.1.

* Package Control
* Emmet
* Jekyll
* Bracket Highlighter
* Front End Snippets

### Package Control

I had to come back to put this in first. I often forget that package control doesn't come pre-installed with sublime text, because without it everything is so much more difficult to do.

### Emmet

Emmet is my favorite plugin. I have only used it for a few months, but it feels like it has already saved me months of work. Instead of individually typing out every single opening tag and closing tag in html, you simply have to type the tag you want, press tab and your tag is written out for you as well as placing your curser in the middle. For tags that have attributes like links the href is automatically added and your curser is placed in the href quotes ready for your url. My favorite use for Emmet is ordered and unordered lists. Just type ul>li*10 and hit tab and your have an unordered list with ten items ready to go!

### Jekyll

I honestly just installed jekyll and haven't used it very much. I haven't gotten all of its functionality figured out, but so far just the post and draft creation has been very helpful.

### Bracket Highlighter

Bracket Highlighter is nothing special, but it can be very helpful for finding missing end tags and seeing exactly where you are working.

### Front End Snippets

I am in the process of building my own snippets for everything I use. However, for now using the front end snippets have been very useful. These snippets include html css and jquery and can make redundant chunks of code super fast to spit out on your page.

## My favorite Sublime Text Themes
* Cobalt2
* Brogrammer

### Cobalt2 Color Theme

I prefer light text on a dark background. The Cobalt2 color these by Wes Bos has been my favorite recently. It is build of the Cobalt theme with much more syntax highlighting.

### Brogrammer

I recently switched my theme from Cobalt2 to Brogrammer. This theme has a darker background with an extreme level of syntax highlighting contrast. Every tag, class, selector, property, value, and more has its own bright color. Making it very easy to understand where all of your elements are and will help with any syntax errors.

repository: JasonSwingen/js-outdoors

gha_language: HTML

repo_name: JasonSwingen/js-outdoors


text:
# opsworks-linux-cookbook-rails Cookbook

## Requirements

* Signed up for an AWS account
* IAM User credentials
* Service Access Permissions enabled on your IAM user
* [AWS Command Line Tool (AWS CLI)](http://docs.aws.amazon.com/cli/latest/userguide/installing.html) installed on your workstation.
* `bash` or equivalent shell

### Platforms

* Tested and verified on Amazon Linux 2015.09
* Tested and verified on Ubuntu 14.04

### Chef
- Chef 12+

### Cookbooks
- application_ruby
- build-essential
- poise-ruby

## Usage

* run `berks package`
* upload `cookbooks-*.tar.gz` to the appropriate artifactory repository.
* create stack using custom chef cookbooks
* create custom layer
* add `opsworks-linux-cookbook-rails` as recipe in `setup`
* start instance
* goto http://public IP of your instance/


text:
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## Unreleased

### Breaking Changes

- `onToggleReaction` and `onAddReaction` arguments have changed.

```js
// old
onAddReaction(kind, activity, { data, targetFeeds, trackAnalytics });
// new
onAddReaction(kind, activity, data, { targetFeeds, trackAnalytics });
```

- `session` is replaced with `client` everywhere
- Update `getstream` library to v4.0.7, if you it directly check out it's
  [CHANGELOG](https://github.com/GetStream/stream-js/blob/master/CHANGELOG.md#400---2018-12-03)
  for info on its breaking changes there.

### Changes

- `RepostButton` now actually reposts an activity to another feed.

### Added

- Support for liking of comments. See the
  [`StatusUpdateForm` section of the docs](https://getstream.github.io/react-activity-feed/#!/StatusUpdateForm)
  for an example of this.

repository: TrendingTechnology/react-activity-feed

repo_name: TrendingTechnology/react-activity-feed


text:
[![Python Version](https://img.shields.io/pypi/pyversions/cellfinder.svg)](https://pypi.org/project/cellfinder)
[![PyPI](https://img.shields.io/pypi/v/cellfinder.svg)](https://pypi.org/project/cellfinder)
[![Downloads](https://pepy.tech/badge/cellfinder)](https://pepy.tech/project/cellfinder)
[![Wheel](https://img.shields.io/pypi/wheel/cellfinder.svg)](https://pypi.org/project/cellfinder)
[![Development Status](https://img.shields.io/pypi/status/cellfinder.svg)](https://github.com/brainglobe/cellfinder)
[![Tests](https://img.shields.io/github/workflow/status/brainglobe/cellfinder/tests)](
    https://github.com/brainglobe/cellfinder/actions)
[![codecov](https://codecov.io/gh/brainglobe/cellfinder/branch/master/graph/badge.svg?token=s3MweEFPhl)](https://codecov.io/gh/brainglobe/cellfinder)
[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/python/black)
[![Imports: isort](https://img.shields.io/badge/%20imports-isort-%231674b1?style=flat&labelColor=ef8336)](https://pycqa.github.io/isort/)
[![pre-commit](https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white)](https://github.com/pre-commit/pre-commit)
[![Contributions](https://img.shields.io/badge/Contributions-Welcome-brightgreen.svg)](https://docs.brainglobe.info/cellfinder/contributing)
[![Website](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fbrainglobe.info)](https://brainglobe.info/documentation/cellfinder/index.html)
[![Twitter](https://img.shields.io/twitter/follow/brain_globe?style=social)](https://twitter.com/brain_globe)

# Cellfinder
Whole-brain cell detection, registration and analysis.

**N.B. If you want to just use the cell detection part of cellfinder, please
see the standalone [cellfinder-core](https://github.com/brainglobe/cellfinder-core)
package, or the [cellfinder plugin](https://github.com/brainglobe/cellfinder-napari)
for [napari](https://napari.org/).**

---
`cellfinder` is a collection of tools developed by [Adam Tyson](https://github.com/adamltyson), [Charly Rousseau](https://github.com/crousseau) and [Christian Niedworok](https://github.com/cniedwor) in the [Margrie Lab](https://www.sainsburywellcome.org/web/groups/margrie-lab), generously supported by the [Sainsbury Wellcome Centre](https://www.sainsburywellcome.org/web/).

`cellfinder` is a designed for the analysis of whole-brain imaging data such as
 [serial-section imaging](https://sainsburywellcomecentre.github.io/OpenSerialSection/)
 and lightsheet imaging in cleared tissue. The aim is to provide a single solution for:

 * Cell detection (initial cell candidate detection and refinement using
 deep learning) (using [cellfinder-core](https://github.com/brainglobe/cellfinder-core))
 * Atlas registration (using [brainreg](https://github.com/brainglobe/brainreg))
 * Analysis of cell positions in a common space

 ---
Installation is with
`pip install cellfinder`

---
Basic usage:
```bash
cellfinder -s signal_images -b background_images -o output_dir --metadata metadata
```
Full documentation can be
found [here](https://brainglobe.info/documentation/cellfinder/index.html).

This software is at a very early stage, and was written with our data in mind.
Over time we hope to support other data types/formats. If you have any issues, please get in touch [on the forum](https://forum.image.sc/tag/brainglobe) or by
[raising an issue](https://github.com/brainglobe/cellfinder/issues/new/choose).

---
## Illustration

### Introduction
cellfinder takes a stitched, but otherwise raw whole-brain dataset with at least
two channels:
 * Background channel (i.e. autofluorescence)
 * Signal channel, the one with the cells to be detected:

![raw](https://raw.githubusercontent.com/brainglobe/cellfinder/master/resources/raw.png)
**Raw coronal serial two-photon mouse brain image showing labelled cells**

### Cell candidate detection
Classical image analysis (e.g. filters, thresholding) is used to find
cell-like objects (with false positives):

![raw](https://raw.githubusercontent.com/brainglobe/cellfinder/master/resources/detect.png)
**Candidate cells (including many artefacts)**

### Cell candidate classification
A deep-learning network (ResNet) is used to classify cell candidates as true
cells or artefacts:

![raw](https://raw.githubusercontent.com/brainglobe/cellfinder/master/resources/classify.png)
**Cassified cell candidates. Yellow - cells, Blue - artefacts**

### Registration and segmentation (brainreg)
Using [brainreg](https://github.com/brainglobe/brainreg),
cellfinder aligns a template brain and atlas annotations (e.g.
the Allen Reference Atlas, ARA) to the sample allowing detected cells to be assigned
a brain region.

This transformation can be inverted, allowing detected cells to be
transformed to a standard anatomical space.

![raw](https://raw.githubusercontent.com/brainglobe/cellfinder/master/resources/register.png)
**ARA overlaid on sample image**

### Analysis of cell positions in a common anatomical space
Registration to a template allows for powerful group-level analysis of cellular
disributions. *(Example to come)*

## Examples
*(more to come)*

### Tracing of inputs to retrosplenial cortex (RSP)
Input cell somas detected by cellfinder, aligned to the Allen Reference Atlas,
and visualised in [brainrender](https://github.com/brainglobe/brainrender) along
with RSP.

![brainrender](https://raw.githubusercontent.com/brainglobe/cellfinder/master/resources/brainrender.png)

Data courtesy of Sepiedeh Keshavarzi and Chryssanthi Tsitoura. [Details here](https://www.youtube.com/watch?v=pMHP0o-KsoQ)

## Visualisation

cellfinder comes with a plugin ([brainglobe-napari-io](https://github.com/brainglobe/brainglobe-napari-io)) for [napari](https://github.com/napari/napari) to view your data

#### Usage
* Open napari (however you normally do it, but typically just type `napari` into your terminal, or click on your desktop icon)

#### Load cellfinder XML file
* Load your raw data (drag and drop the data directories into napari, one at a time)
* Drag and drop your cellfinder XML file (e.g. `cell_classification.xml`) into napari.

#### Load cellfinder directory
* Load your raw data (drag and drop the data directories into napari, one at a time)
* Drag and drop your cellfinder output directory into napari.

The plugin will then load your detected cells (in yellow) and the rejected cell
candidates (in blue). If you carried out registration, then these results will be
overlaid (similarly to the loading brainreg data, but transformed to the
coordinate space of your raw data).

![load_data](https://raw.githubusercontent.com/brainglobe/brainglobe-napari-io/master/resources/load_data.gif)
**Loading raw data**

![load_data](https://raw.githubusercontent.com/brainglobe/brainglobe-napari-io/master/resources/load_results.gif)
**Loading cellfinder results**

## Contributing
Contributions to cellfinder are more than welcome. Please see the [developers guide](https://brainglobe.info/developers/index.html).

## Citing cellfinder

If you find cellfinder useful, and use it in your research, please cite the paper outlining the cell detection algorithm:
> Tyson, A. L., Rousseau, C. V., Niedworok, C. J., Keshavarzi, S., Tsitoura, C., Cossell, L., Strom, M. and Margrie, T. W. (2021) “A deep learning algorithm for 3D cell detection in whole mouse brain image datasets’ PLOS Computational Biology, 17(5), e1009074
[https://doi.org/10.1371/journal.pcbi.1009074](https://doi.org/10.1371/journal.pcbi.1009074)
>
If you use any of the image registration functions in cellfinder, please also cite [brainreg](https://github.com/brainglobe/brainreg#citing-brainreg).

**If you use this, or any other tools in the brainglobe suite, please
 [let us know](mailto:code@adamltyson.com?subject=cellfinder), and
 we'd be happy to promote your paper/talk etc.**

repository: brainglobe/cellfinder

repo_name: brainglobe/cellfinder