teleren/devto huggingface dataset:
JS: Make things happen OnScroll and create better interactive websites
Tags: javascript, tutorial, webdev, codequality
Published: 2021-02-07 15:32:11



`Hello World!` The fourth episode of the series  - A CSS/JS trick in 5 minutes - [Last Article](https://dev.to/devlorenzo/css-how-to-make-a-website-responsive-19kg) was about a CSS trick (How to make a website responsive). 
Since the last two articles were about a CSS trick, let's show you a Javascript one: How to make things happen on scroll.

--- 

The first method to make things happen on scroll is fairly easy:
```
window.onscroll = function () {
  // Code to happen on scroll here
};
```

---

But how underlined this [query on stack overflow](https://stackoverflow.com/questions/38049119/do-something-on-scroll) (I also tried this on a website) its result to cause lag and a longer charging time for the user. So it's better to use an event listener with a flag:  
```
const animateFlag = true

window.addEventListener("scroll", function() {
  if(this.pageYOffset > 0) {
    if(animateFlag) {
      // Code to happen on scroll here
      animateFlag = false;
    }
  }
})
```
Var animateFlag block the code to rerun every time user scroll. 

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

Recommended reading:
{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Local Dev Setup with automatic HTTPS + WebSockets in 1 Line
Tags: webdev, beginners, tutorial
Published: 2021-02-07 15:30:46

---
title: Local Dev Setup with automatic HTTPS + WebSockets in 1 Line
published: true
description: Local Dev Setup with automatic HTTPS + WebSockets in 1 Line using Caddyserver.
tags: webdev, beginners, tutorial
//cover_image: https://direct_url_to_image.jpg
---

Let's set up a local web server for development that supports automatic HTTPs and WebSockets in just 1 line of code. No problem thanks to the awesome [Caddyserver](https://caddyserver.com/).

## Preparations

### Set up the local hostname
For automatic HTTPs you need to set up a local hostname first. We will use `remast.local`. To make your local development machine available at that hostname you need to add the hostname to your local hosts file.

So locate the hosts file on your machine and add the following line:
```
127.0.0.1	remast.local
```

Here's where you find the hosts file in your operating system.

| Operating System | Location of hosts file           |
| ---------------- |:-------------|
| Windows 10       | `C:\Windows\System32\drivers\etc\hosts` |
| Linux       | `/etc/hosts` |
| Mac OS X       | `/private/etc/hosts` |

Now verify by testing to reach the hostname via ping with `ping remast.local`. If that takes you to `127.0.0.1` everything is fine and you can proceed.


### Install Caddyserver

Now install [Caddyserver](https://caddyserver.com/) on your machine. If you're on Windows and use the [Chocolatey package manager](https://chocolatey.org) you can do that with `choco install caddy`. For other plattforms check the [Caddyserver install docs](https://caddyserver.com/docs/install).

## Starting the local dev server with HTTPs and WebSockets

Now off we go with our local dev server with automatic HTTPs and WebSocket support. Here's the only one line you need:

```
caddy reverse-proxy --from remast.local --to 127.0.0.1:8080
```

This one line will fire up your local [Caddyserver](https://caddyserver.com/) which will automaticlally start HTTPs and proxy all requests including WebSockets. How cool is that?!

### Using the Caddyfile

Of course you can always save your configuration in file called `Caddyfile`, with the following contents:
```
remast.local {
	reverse_proxy 127.0.0.1:8080
}
```

### What's next?

Once you've made your first steps [Caddyserver](https://caddyserver.com/) there's no way back. Caddy is really awesome for both development and production!
How To Fork A Subdirectory Of Repo As A Different Repo On GitHub
Tags: git, github, fork
Published: 2021-03-29 09:49:56

---
title: How To Fork A Subdirectory Of Repo As A Different Repo On GitHub
published: true
date: 2021-02-07 15:15:48 UTC
tags: git, Github, fork
canonical_url: https://blog.mphomphego.co.za/blog/2021/02/07/How-to-fork-a-subdirectory-of-repo-as-a-different-repo-on-GitHub.html
---
![](https://blog.mphomphego.co.za/assets/2021-02-07-How-to-fork-a-subdirectory-of-repo-as-a-different-repo-on-GitHub.png)

# The Story

Ever wanted to fork a subdirectory and not the whole Git/GitHub repository. Well I have, I recently had to fork a subdirectory of one of the repositories I wanted to work on without the need to fork the whole repository. In this post, I will show you how it's done.

Note: I do not think you can fork subdirectories through GitHub's web interface

# The How

## Clone the repo

```bash
git clone https://github.com/<someones-username>/<some-repo-you-want-to-fork>
cd some-repo-you-want-to-fork
```

## Create a branch using the `git subtree` command for the folder only

```bash
git subtree split --prefix=./src -b dir-you-want-to-fork
git checkout dir-you-want-to-fork
```

## Create a new GitHub repo

Head over to GitHub and create a new repository you wish to fork the directory to.

## Add the newly created repo as a remote

```bash
cd some-repo-you-want-to-fork
git remote set-url origin https://github.com/<username>/<new_repo>.git
```

## Push the subtree to the new repository

```bash
git fetch origin -pa
git push -u origin dir-you-want-to-fork
```

## Fetch all remote branches in the new repository

```bash
git clone https://github.com/<username>/<new_repo>.git
cd new_repo
git checkout --detach
git fetch origin '+refs/heads/*:refs/heads/*'
git checkout dir-you-want-to-fork
```

You now have a "fork" of the `src` subdirectory.

## Merge to main/dev branch (troubleshooting)

If you ever run `git merge master` and get the error **fatal: refusing to merge unrelated histories**; run

```bash
git checkout dir-you-want-to-fork
git merge --allow-unrelated-histories master
# Fix conflicts and
git commit -a
git push origin dir-you-want-to-fork
```

# Reference

- [Splitting a subfolder out into a new repository](https://docs.github.com/en/github/using-git/splitting-a-subfolder-out-into-a-new-repository)
- [StackOverflow](https://stackoverflow.com/questions/24577084/forking-a-sub-directory-of-a-repository-on-github-and-making-it-part-of-my-own-r#24577293)
Build your first Web App with ZnetDK for Mobile
Tags: php, beginners, webdev, opensource
Published: 2021-02-07 15:14:03

Hello to the DEV community,

In this post, I invite you to discover [ZnetDK for Mobile](https://mobile.znetdk.fr/), a **free open source full-stack framework** that may facilitate the development of **web applications** in **PHP** and **MySQL**, in particular *for beginners*.

Here are **some benefits** of developing your web application with ZnetDK for Mobile:
- The **installation** is pretty easy: download the latest version of **ZnetDK for Mobile** as a [ZIP archive](https://mobile.znetdk.fr/download) and uncompress it into the *web content directory* of your AMP server.
- You start developing from the **starter application** supplied with the framework: the **front end** of the application is *already developed*, you just have to **add new pages** to your application, link them to the **navigation menu** and finally to code the **controller actions** that provide and record *application data*.
![ZnetDK for Mobile Starter App](https://dev-to-uploads.s3.amazonaws.com/i/5fptrtl1m90twazxp14w.png)
- The **starter application** is fully **customizable**: *title*, *logo*, *icons*, *colors*, *font*, *footer* can be adapted to your desired *look and feel*.
![ZnetDK for Mobile Color theming](https://dev-to-uploads.s3.amazonaws.com/i/7fz33grxd337plejom65.png)
- **Reading** and **writing** of data in the application's **MySQL database** is done through [DAO](https://mobile.znetdk.fr/php-api#z4m-phpapi-database) and or [SimpleDAO](https://mobile.znetdk.fr/php-api#z4m-phpapi-simpledao) objects of the [ZnetDK PHP API](https://mobile.znetdk.fr/php-api).
- **Access** to the web app can be **secured** by entering a **login** and **password**: the framework includes *ready-to-use pages* for managing **users** and **profiles**.
![ZnetDK for Mobile Secured access](https://dev-to-uploads.s3.amazonaws.com/i/288k3piasaoklwwn3nzr.png)
- The starter web app is **Responsive** for better display on *mobile* devices, *tablets* and *desktops* and *can be easily installed* on the user's device in accordance with **Progressive Web Application** (PWA) technology.
- To **help you get started**, you have complete online [PHP and JavaScript API](https://mobile.znetdk.fr/php-api) documentation, a [getting started guide](https://mobile.znetdk.fr/getting-started), a [tutorial](https://mobile.znetdk.fr/tutorial) for developing a contact list, [code snippets](https://mobile.znetdk.fr/code-snippets) and many more...

A **live demo** is available at https://mobile.znetdk.fr/demo.

Your feedback on this framework is welcome.

Pascal
*ZnetDK web developer*
ML for Google CDAP
Tags: cdap, datafusion, googlecloud, machinelearning
Published: 2021-02-07 14:59:14

Google CDAP (former Cask Data Application Platform) is a next-generation data fusion platform. It is at the heart of Google Cloud Data Fusion, but with a significant advantage: It is not lock-in to the Google Cloud Platform and thus, can be operated quite cost-effective.

Even if CDAP is a great tool to realize plenty of data fusion use cases, e.g., move siloed data to a data warehouse, without writing a single line of code, we often face the same dilemma:

Having configured a data integration pipeline e.g., for data streaming, our customers do not understand why they have to operate another platform to also implement complex event processing or use machine learning to classify real-time events.

In order to avoid operational complexity, Google CDAP finally is discarded to be used in production.

This recurring situation was so annoying for us, that's why we decided to equip Google CDAP with extra plugins to seamlessly implement a wide variety of **smart** data processing use cases (including all kinds of machine intelligence) with always the same platform. 

Today, we use Google CDAP with 150+ plugins, from deep and machine learning, business rule processing to natural language processing and more.

Doing ML/AI projects this way, is a customer success story. At the end, they often have to operate just a single platform to move their data from sources to sinks and vice versa in a smart and extensible way.

That is the real potential of Google CDAP, and data fusion just marked the beginning. 

We are excited to share this experience with you. And in one of the next posts, we talk about ML/AI model management inside Google CDAP.
Real Time Remote Collaboration using Live Share Extension
Tags: webdev, vscode, computerscience, serverless
Published: 2021-02-07 14:49:58

Recently our college held an inter college Web Design competition which held in online and duration was two hours. So all participants were instructed to create a group of two members each. As usual I also picked a friend to collab. But the problem was it was the time of the lock down period and we both are from different town. As we need a need real time remote collaboration for that two hours, we started searching for such kind of things and luckily found it in youtube named 'Live Share'.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jpudpra8iwv5fm1atb5e.jpg)


•  Basically this is an extension of Visual Studio Code.

•  There is an another audio version where we can do voice chat while working.

•  Maximum members/collaborators can be upto 30!

•  and most interesting part is everyone here can watch in real time what other fellow collaborators are typing/removing in which line of which file even exact location of their cursor.


<h2> Installation: </h2>
<br>
<b>requirements:</b>
•windows (7 or above)
•macOS (Sierra 10.12 or above)
•linux (32-bit is not supported by liveShare)

<b>procedure:</b>

First of all install <a href="https://code.visualstudio.com"> Visual Studio Code</a> in system.
Then go to extension and search 'Live Share' which is done Microsoft and install it. after installation it should automatically enable. If an icon of it is added in the slide bar that indicates liveShare is enabled.

<h2>Quickstart:<h2>

**Microsoft or GitHub account is required to join or start a session.

On clicking the liveShare icon a new vision will appear in the slide bar. Where upper part will show session details and lower part about contact details where list of other collaborators and their state will be appeared.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yixw830e808w5to1844r.jpg)

<b>sharing:<b>

• To share your repository click on the share button.It may take time to setup.
• You'll be asked to sign in with your Microsoft or GitHub account.
• After setting it all up you'll get an icon on the top of session details part to copy collaboration link click it to copy the link. And share it to your collaborators.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5nov8k3iseuksxwte7ic.jpg)

<b>joining:</b>

• To join anyone's collaboration session click the 'Join' button of the slide bar.
• For the first time you'll be asked to sign in with your Microsoft or GitHub account.
• After that a bar will be appeared on the top where the URL of that collaboration session will be asked. After putting that hit enter and you'll be entered into collaboration session.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vb6hs1docy2yr0kn0jnw.jpg)

For more information check the documentation <a href="https://docs.microsoft.com/en-us/visualstudio/liveshare/">here</a>
       Good Luck!
PHP explode function Magic
Published: 2021-02-07 14:47:24

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5jmmqde9p8ing5jg6mgd.png)
I most often use explode function to separate firstname and lastname value from name field to store in the database. 

To do so my code looks like below.

```
$fullName = "John Doe";
$pieces = explode(' ', $fullName);
$firstName = $pieces[0]; // John
$lastName = $pieces[1]; // Doe
```

But recently working in an project I found an issue with this code when user adds middle name also.

So lets say name is `John Jane Doe`. Above code saves gives $firstName as 'John' and $lastName as 'Jane' and 'Doe' is missing.

So in finding solution to this I came across solution of [explode](https://www.php.net/manual/en/function.explode.php) function in php official documentation. 

The solution is pretty simple. explode function accepts third parameter as integer, which limits number of elements in output array.

So my solution code looked like this.

```
$fullName = "John Jane Doe";
$pieces = explode(' ', $fullName, 2); // only two elements
$firstName = $pieces[0]; // John
$lastName = $pieces[1]; // Jane Doe
```
How agile principles of ‘done’ can help you as a Software Developer
Tags: agile, productivity, devops, webdev
Published: 2021-02-07 14:28:56

Learn how having a definition of done can protect you from unwanted distractions. [Read more on how I've used it myself](https://medium.com/javascript-in-plain-english/dod-db13fd3b6059?source=friends_link&sk=f658b5c50d916f295314fcb4514cd280)
Release 0.10.0 of Spellcheck (GitHub) Action
Tags: github, action, release
Published: 2021-02-07 14:24:42

---
title: Release 0.10.0 of Spellcheck (GitHub) Action
published: true
description: a feature release with improved action capabilities
tags: github, action, release
//cover_image: https://direct_url_to_image.jpg
---
Yesterday I released a feature release of [GitHub Spellcheck Action](https://github.com/rojopolis/spellcheck-github-actions).

The release is based on a contribution from Matt Calvert (PR [#34](https://github.com/rojopolis/spellcheck-github-actions/pull/34)).

The enhancement allows for the GitHub Action to bypass the filename pattern specified in the PySpelling configuration, which is the core configuration for this action.

The default behaviour is to specify the patterns in the configuration and you specify your file patterns:

```yaml
  sources:
  - '**/*.md'
```

In order to bypass/overwrite that configuration, you can specify `source_files` and a related `taskname` in the action, using PySpelling differently - so the _handling_ is moved from the PySpelling configuration to the action configuration for this use-case.

An example:

```yaml
name: Spellcheck Action
on: push

jobs:
  build:
    name: Spellcheck
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - uses: rojopolis/spellcheck-github-actions@0.10.0
      name: Spellcheck
      # Overwrite configuration
      with:
        source_files: README.md CHANGELOG.md notes/Notes.md
        task_name: Markdown
```

Thanks to Matt for his contribution.

An issue ([#33](https://github.com/rojopolis/spellcheck-github-actions/issues/33)) raised the question of the ability to only check the incoming changes, not the final product. Matts contribution looks promising as a stepping stone in the ability to configure actions capable for exactly that, but some more work and evaluation and experimentation will have to be invested into the issue before a solution can be provided.

The next coming feature release is already in the pipeline and is support for German as language. See [milestone for 0.11.0](https://github.com/rojopolis/spellcheck-github-actions/milestone/4) for more details.

## Change Log

### 0.10.0 2021-02-06 feature release, update not required

- Added capability to specify a set of files in the action, bypassing the filename pattern specified in the configuration. Implementation from PR [#34](https://github.com/rojopolis/spellcheck-github-actions/pull/34) from Matt Calvert
Difference between UI and UX with practical examples
Published: 2021-02-07 14:17:42

UX stands for User Experience. UX designers are responsible for designing the user experience of a product. UX designers think about how to enhance a product and make it more user-friendly. They analyze that is interacting with the product is straightforward or not. Is the experience smooth or is it clunky? They think about the user journey which is all the possible ways a user can interact with a product. They take care of things like how many steps is it taking to do a particular task. Can we somehow reduce complexity and make doing the task easier and faster? They talk to users, see the analytics data, and critically think about ways to improve the user experience of a product.

Now, let's come to the UI. 

UI stands for User Interface. UI designers deal with the visual aspect of a product. They are responsible for the look and feel of a website. They deal with things like typography, white space, and colors to make a website look good They focus on having a contrast between text and other elements on a page to ensure readability and accessibility. They think about the layout of the website like which is the best area to place a piece of text or an image or a button. They make designs for multiple screen sizes like laptops and mobiles. They integrate the brand's identity into the whole design by using brand colors and brand-specific graphics. They ensure that the design of the different pages is consistent.

**Now, let's see a few examples.**

Suppose you have a quotes website where you have curated the quotes from the best authors and celebrities in the world. The UX designer discovers that what people often do is that they copy a quote by selecting the desired text manually and then send it to their friends. The UX designer thinks that let's add a copy button so that users can easily share a quote with other people. The UX designer came up with a solution to improve the user experience. Now, users will be able to share quotes easily and quickly. The UI designer will now think about where to place the copy button, what icon to use for it, and what should be the color for it.

Another example. 

You have a gaming news website. The UX designer discovers that people are coming to the signup page but a small percentage of people complete signing up. The designer investigates and finds that the signup form is pretty long. It's asking for Full Name, Email, Password, Gender, Address, and Preferences. Users don't like this and don't signup. He/she proposes a solution that in the signup page, we only ask for full name, email, and password and after a user logs in, we get the other details. Now, the UI designer makes the desired changes to the form and ensures that the design still looks good. In this example also, the UX designer came up with a solution to solve a problem to improve the user experience. The UI designer made the necessary changes and ensures that the form still looks aesthetically good.

So, that's it in a nutshell. Do let us know if we missed anything in the comments section.
Go routines
Tags: go, routine, concurrent
Published: 2021-02-07 14:09:42

# Go routines

ลองนึกดูว่าถ้ามีคนอยู่หลายคน หนึ่งคนมีค้อนกับตะปูเพื่อจะตรอกเข้ากับกำแพง แต่ละคนมีจำนวนตะปูและพื้นที่บนกำแพงที่แตกต่างกัน แต่ว่ามีค้อนอยู่อันเดียว คนที่มีตะปูที่น้อยกว่าจริงๆต้องทำงานเสร็จก่อน แต่ก็ต้องแบ่งค้อนให้คนอื่นใช้งาน นี้คือหลักการของ Goroutine

การใช้งาน Goroutine ในภาษา Go อนุญาติให้ทำงานหลายๆงานในเวลาเดียวกัน (coroutine) งานเหล่าๆนั้น (routine) สามารถทำงานได้ใน process เดียวกัน Goroutine นั้นไม่แบ่งพื้นที่กันกับคนอื่นทำให้มันแตกต่างจาก thread แต่อย่างไรก็ตาม เราสามารถส่งตัวแปรเข้าไปอีก coroutine ได้ในโค็ด แต่อาจจะทำให้มันเกิดการทำงานที่คาดเดาไม่ได้

ลองมาดูการทำงานของ ฟังก์ชัน hello

```go
func hello() {
	fmt.Println("hello world")
}
```

ทีนี้เราจะลองเรียกใช้ฟังก์ชันนี้ในแบบ coroutine

```go
func main() {
	fmt.Println("hello")
	
	// รูปแบบการเรียกใช้ฟังก์ชัน hello แบบ coroutine
	go hello()
	
	fmt.Println("end")
}
```

จะเห็นผลลัพท์คือไม่มีการแสดงข้อความ **hello world** ออกมา ว่าฟังก์ชัน main ไม่สนว่า ฟังก์ชัน hello นั้นจะทำงานนานแค่ไหน พอมันเรียกใช้งานฟังก์ชัน hello แล้ว ฟังก์ชัน main ก็ทำงานต่อเลย

---

## มาลองใช้ Concurrent Routines

ลองจิตนาการว่าเราจะคำนวนค่าต่างๆ 2 ครั้ง ครั้งแรกเราจะหาผลรวมตัวเลขจาก 1 - 10 หลังจากนั้น หาผลรวมตัวเลขของ 1 - 100 เพื่อไม่ให้เป็นการเสียเวลาเราจะทำการคำนวนของค่านี้ไปพร้อมๆกันด้วย coroutine

```go
func main() {
	var s1 int
	go func() {
		s1 = sum(1, 100)
	}()

	log.Println(s1)
}

func sum(from, to int) int {
	res := 0
	for i := from; i <= to; i++ {
		res += i
	}

	return res
}
```

ตัวแปร s1 จะแสดงมาเป็น 0 เนื่องจากในตอนเรียกฟังก์ชัน sum ใน main ยังทำงานไม่เสร็จและตัวแปร s1 ยังคงเป็น 0 

ทีนี้ลองเรียกเป็นแบบ

```go
func main() {
	var s1 int
	go func() {
		s1 = sum(1, 100)
	}()

	// ลองเพิ่ม statement ไปเพื่อรอให้ฟังก์ชัน sum ทำงานเสร็จ
	time.Sleep(time.Second)

	log.Println(s1)
}

func sum(from, to int) int {
	res := 0
	for i := from; i <= to; i++ {
		res += i
	}

	return res
}
```

---

## WaitGroup

หากเราทำงาน coroutine มากกว่า 1 ตัวขึ้นไป เพื่อที่จะควบคุมการทำงานของ coroutine เป็นไปตามลำดับที่เราต้องการ เราต้องใช้ WaitGroup{} ช่วย

```go
package main 
import "sync" 
func main() {
	// สร้าง pointer ชี้ไปที่ wait group
  wg := &sync.WaitGroup{}

	// เพิ่มคำสั่ง asynchronous เข้าไป เพื่อบอกให้รู้ว่าให้รอ goroutine 1 ตัวด้านล่างทำงานให้เสร็จก่อนไปทำงานอื่น
  wg.Add(1)
  go func() {
		// wait routine
		...
		.
		.
		wg.Done() // บอกตัว wait group ว่าใน go routine นี้ทำงานเสร็จแล้ว
	}()
  wg.Wait()

	// หลังจากทำงาน go routine ด้านบนเสร็จแล้วก็ทำอันด้านล่างต่อ
  ………….
  ………….
}
```

หลังจากที่เราได้ปรับใช้ wait group กับการคำนวน ผลรวมตั้งแต่ 1 - 10 และ 1 - 100

```go
package main

import (
	"log"
	"sync"
)

func main() {
	s1 := 0
	s2 := 0
	wg := &sync.WaitGroup{}

	// ถ้าเราใส่แค่ 1 จะเกิด panic ทันทีเพราะ wg ถูกใช้งาน 2 ครั้ง
	wg.Add(2)
	go sum(1, 100, wg, &s1)
	go sum(1, 200, wg, &s2)
	wg.Wait()

	log.Println(s1, s2)
}

func sum(from, to int, wg *sync.WaitGroup, res *int) {
	*res = 0
	for i := from; i <= to; i++ {
		*res += i
	}

	wg.Done()
}
```
... WIP ...