teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 19th June 2020
Tags: javascript, webdev, react, css
Published: 2020-06-19 14:36:37

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. 🎭 Playwright

Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. 

{% github microsoft/playwright %}

---

### 2. JSON Server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

{% github typicode/json-server %}

---

### 3. Lens | The Kubernetes IDE

Lens is the only IDE you’ll ever need to take control of your Kubernetes clusters. It is a standalone application for MacOS, Windows and Linux operating systems. It is open source and free.

{% github lensapp/lens %}

---

### 4. Code Server

Run VS Code on any machine anywhere and access it in the browser.

{% github cdr/code-server %}

---

### 5. CSS GG

Open-source CSS, SVG and Figma UI Icons

{% github astrit/css.gg %}

---

### 6. Coursera: HTML, CSS and Javascript for Web Developers

This repository contains all of the example source code used in the Coursera.org course called HTML, CSS and Javascript for Web Developers.

{% github jhu-ep-coursera/fullstack-course4 %}

---

### 7. Record and replay the web

rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.

{% github rrweb-io/rrweb %}

---

### 8. Chakra

Build Accessible React Apps with Speed

{% github chakra-ui/chakra-ui %}

---

### 9. face-api.js

JavaScript face recognition API for the browser and nodejs implemented on top of tensorflow.js core

{% github justadudewhohacks/face-api.js %}

---

### 10. AliBaba - Hooks

React Hooks Library.

{% github alibaba/hooks %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Vagrant-Goodhosts – Manage the hosts file with Vagrant in 2020
Tags: opensource, vagrant, ruby
Published: 2020-07-01 11:41:47

---
title: Vagrant-Goodhosts – Manage the hosts file with Vagrant in 2020
published: true
date: 2020-06-19 14:34:55 UTC
tags: OpenSource,vagrant,ruby
canonical_url: https://daniele.tech/2020/06/vagrant-goodhosts-manage-the-hosts-file-with-vagrant-in-2020/
---

Goodhosts is a new simple way to manipulate the hosts file without troubles with various operative systems and now there is the integration with vagrant!

The post [Vagrant-Goodhosts – Manage the hosts file with Vagrant in 2020](https://daniele.tech/2020/06/vagrant-goodhosts-manage-the-hosts-file-with-vagrant-in-2020/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Deploying a Static Website to AWS S3 using Jenkins or Github Actions
Tags: aws, jenkins, devops, serverless
Published: 2020-06-19 14:20:42

Deploying a static website should be non-complicated as they just consist of simple HTML pages. They can also contain some dependencies on Javascript but just for some client side functionalities. In this post I will going through a process of easily deploying a static website without spinning up a hosting server. This will be a cost effective solution since there are no big costs involved to launch any web servers. The process I describe will also give you an easy way to host static HTML files or static websites.

In this post I will be describing two methods to deploy the static website to S3:

Using Jenkins: Build an automated pipeline on Jenkins to upload the static files to S3 bucket
Using GitHub Action: Use GitHub actions to upload the static files to S3 bucket

Read the full post here:

https://amlanscloud.com/jenkinsdeploys3/
JIT vs AOT compiler in Angular!
Tags: angular, webdev, typescript
Published: 2020-06-19 13:46:41

We all know that the browser understands javascript code but how the angular code work (TypeScript). To do all this angular provides us its own compiler.

The angular compiler executes in two different ways -
1. JIT (Just In Time Compilation)
2. AOT (Ahead Of Time Compilation)

Let's see about JIT.

**1. JIT (Just In Time Compilation)**
JIT stands for Just In Time Compilation. In JIT approach, the angular code gets compiled at the run time using a typescript (tsc) compiler.

While developing an angular application, it consists of typescript code and angular specific code (like bindings,decorators). In order to run this application in angular , both these codes need to be converted to javascript code.

Here you can observe the flow.

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

By using JIT approach there are some advantages as well as disadvantages. The disadvantages for using JIT approach are:-
1. The code has to undergo compilation twice.
   a) First through typescript compiler to translate typescript code.
   b) Second through angular compiler to translate angular code.

2. As angular code gets executed at the run time, all the errors with respect to angular code are highlighted at the run time. 

Now we will see how AOT overcomes these disadvantages.

**2. AOT (Ahead Of Time Compilation)**
AOT compilation stands for Ahead Of Time compilation. In AOT approach,the angular code gets compiled at the build time using the angular (ngc) compiler.

Let us see how the AOT approach works to compile the angular applications.

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

Compared to the Typescript compiler, ngc compiler also does the same thing i.e. translates the TS code to JS code. But along with that it also takes the angular code i.e decorators, bindings, etc., and pre compiles them into imperative code before the application loads in the browser.

Hence, both typescript and angular code are in the executable format before the run time.

AOT approach in angular provides us with many advantages such as:
1. Rendering is faster.
2. Helps to find the build errors during build time itself.
3. Helps in reducing the size of the angular framework.

Note:- All the versions till Angular 8 used the JIT approach by default. From Angular 9, they made AOT mode as the default compilation approach.

Thanks for Reading !
The Perfect Tool That I've Found to Document The Project
Tags: python, staticsite, documenting
Published: 2020-06-19 14:17:12

I will be short and straight to the point, you should try MkDocs powered by python.

MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.

I found it incredible for documenting a project the are many theme available to choose from like readthedocs, it's also includes search input to easy find what you're looking for in the project documentations.

it worth a try here is the documentation link https://www.mkdocs.org/
iOS: How to let user select video from their library
Tags: ios, swift
Published: 2020-06-19 14:16:44

Despite its name `UIImagePickerController` can be also used to let user select video to import it to your app. It requires just a bit of configuration of the picker.

I am going to split the creation and configuration into multiple parts for clarity.

First we create the instance and assign `self` as a delegate which will let us dismiss the picker once selection is done and access the video.

```swift
let picker = UIImagePickerController()
picker.delegate = self
```

The delegate requires conformance to `UIImagePickerControllerDelegate` and `UINavigationControllerDelegate`. We will implement those methods later.

### Media types configuration

Next we need to tell the picker what media types are we interested in and where it should look for them:

```swift
picker.sourceType = .photoLibrary
picker.mediaTypes = UIImagePickerController.availableMediaTypes(for: .photoLibrary) ?? []
picker.mediaTypes = ["public.movie"]
```

There is `?? []` fallback because the `UIImagePickerController.availableMediaTypes` method returns optional string array. You may consider adding `assert` below to check we got `mediaTypes` just to avoid surprises in the future.

### Resolution configuration

And now we specify the quality and resolution because the picker does video compression:

```swift
picker.videoQuality = .typeHigh
picker.videoExportPreset = AVAssetExportPresetHEVC1920x1080
```

If you specify lower `videoQuality` then during the compression it will take that into an account. The `videoExportPreset` is super important because otherwise we would get 720p video.

The available presets are listed in the [documentation](https://developer.apple.com/documentation/avfoundation/avassetexportsession/export_preset_names_for_quicktime_files_of_a_given_size).

For 4K we would use `AVAssetExportPresetHEVC3840x2160` or possibly `AVAssetExportPresetHEVCHighestQuality`.

And that is basic configuration done.

It may be a good idea to allow editing with this parameter:

```swift
picker.allowsEditing = true
```

Now we just need to present the picker:

```swift
present(picker, animated: true, completion: nil)
```

## The delegate methods

Let's start with the easier method:

```swift
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        dismiss(animated: true, completion: nil)
}
```

This is called when user cancels the selection, so we dismiss the picker.

When user selects video, we get this callback:

```swift
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        dismiss(animated: true, completion: nil)
        guard let movieUrl = info[.mediaURL] as? URL else { return }

        // work with the video URL
}
```

Once again we dismiss and then attempt to get video URL from the `info` dictionary provided.

It is a good idea to copy the video somewhere else and not hold onto the original URL.

And that is basic usage of `UIImagePickerController` to get video from user's library in Full HD or even 4K if we want to.

_Thanks for reading!_
How to Fetch Your Posts From dev.to API With JavaScript
Tags: javascript, html, beginners
Published: 2020-06-19 14:00:29

The Fetch API is a modern interface that allows you to make HTTP requests in the web browsers. It is a simple and clean API that uses [`Promises`](https://www.javascripttutorial.net/es6/javascript-promises/) to deliver more flexible features to request resources from the server.

If you have worked with `XMLHttpRequest` (`XHR`) object, the Fetch API can perform all the tasks as the `XHR` object. 

> In the article, you will learn how to make use of the **FETCH API** in JavaScript to fetch all your written posts from dev.to Free API. 

*The Devcommunity API would really be helpful for individuals putting up a small portfolio and not ready to build a blog section*. 

You can easily call all your published articles/posts from Devcommunity to your portfolio blog section. 

## Getting Started

The `fetch()` method returns a `Promise` which we allow us to use the `then()` and `catch()` methods to handle response, either success or failure:


Here is a simple syntax:

```javascript
    fetch(url) 
    .then(response => {
     // handle the response 
     }) 
     .catch(error => {
      // handle the error
     });
```

Here is a link to the Devcommunity API where you can access your articles - https://dev.to/api/articles?username=olawanle_joel


**All you have to do is replace the username with yours.** 

## Using fetch API
   
Below I will be fetching from the Devcommunity API. 

```javascript
    fetch('https://dev.to/api/articles?username=olawanle_joel')
    .then((response) => response.json())
    .then(data => console.log(data))
    .catch((error) => console.log(error));
```

The above code will return all your articles from Devcommunity as Json to my Dev Console. 

There are other formats or methods of returning the response, such as:

 - text()  
 - blob()  
 - fromData(), e.t.c.

## Summary

Once you have successfully fetched all the results of the API and it returns the content as expected. You can now start making use of those values. 

Here is a [repository](https://github.com/olawanlejoel/portfolio) in which I made use of the Devcommunity api to call my articles to a mini [portfolio](bit.ly/babyboydev). 

## Useful Resources

 - [Javascript Fetch Api](https://www.javascripttutorial.net/javascript-fetch-api/)
 - [Understanding fetch() API In JavaScript](https://dev.to/asaoluelijah/understanding-the-fetch-api-in-javascript-1c70)
 - [Understanding fetch() 2 - Building A Random Quote Generator App](https://dev.to/asaoluelijah/understanding-fetch-2-building-a-random-quote-generator-app-25nj)
How can I become wealthy ?
Published: 2020-06-19 13:59:04

Process 1 : Feeling and the subconscious mind.
- What is the feeling ?
- What is the subconscious mind ?
- How to use feelings and the subconscious to achieve goals ?

Process 2 : Project Planning.
- How to design an effective plan ?
- What are minor results ?

Process 3 : Action.
- How to proceed continuously ?
Data Connection in UI Bakery Low-Code Platform, Finally!
Tags: webdev, nocode, lowcode, api
Published: 2020-06-19 13:56:03

UI Bakery releases Data connection.
From now, you can not only build a customizable front-end but also connect any API to it, and thus get a functional web app without leaving the platform.

Main possibilities Data connection provides:
– Fetch any data from the backend by calling any HTTP API.
– Create and manage data collections.
– Connect your data to various UI components: charts, maps, images, tables, etc.
– Create and manage workflows – the sets of steps that are meant to react to user interactions. 
– Integrate your frontend with any third-party API.
– Write pieces of your own JavaScript code to modify your workflows, and more.

Check the details, and see the new functionality in action in UI Bakery.
https://hubs.ly/H0rJdjP0
มองโลกในแง่ดีและร้าย
Tags: firstpost, ธรรมะ, writing
Published: 2020-06-19 13:53:55

---
title: มองโลกในแง่ดีและร้าย
published: true
description: มองโลกแต่ในแง่ร้ายอย่างเดียว ก็ไม่ดี มองแต่แง่ดีอย่างเดียว ก็ไม่ได้ เพราะมองแต่ในแง่ร้าย มันก็เป็นความคิดอกุศล หรือว่ามองแต่ในแง่ดีอย่างเดียว กลายเป็นคนโลกสวย ถูกเขาเอาเปรียบ ถูกเขาหลอกได้ 
tags: #firstpost #ธรรมะ #writing
---
ไม่ว่าคุณจะทำ Project, ติดต่อผู้คน, เดินทาง, แก้ปัญหา, คิดงานใหม่ ฯลฯ จะต้องมีประเด็นของมุมมองที่เกี่ยวข้องกับแง่ดี และ แง่ร้ายเสมอ.

TL;DR รอบคอบ อย่างมีเมตตา ด้วยทางสายกลาง

มองโลกแต่ในแง่ร้ายอย่างเดียว ก็ไม่ดี มองแต่แง่ดีอย่างเดียว ก็ไม่ได้ เพราะมองแต่ในแง่ร้าย มันก็เป็นความคิดอกุศล หรือว่ามองแต่ในแง่ดีอย่างเดียว กลายเป็นคนโลกสวย ถูกเขาเอาเปรียบ ถูกเขาหลอกได้
### สุดโต่ง 2 ข้าง พยายามดึงเราไป 2 ทาง

#### คนมองโลกในแง่ร้าย 
คนที่ถูกครอบงำด้วยการมองโลกในแง่ร้าย มักจะมีเสียงในหัวประเภทนี้ คือ 
*" Project นี้มันจะ work เหรอ ?, ใคร ๆ เขาก็ทำกันน่ะ "*
*" อันนี้ขายไม่ออกแน่, ไม่มีใครซื้อหรอก "*
*" คนนี้เขาต้องมีอะไรแอบแฝงแน่ ๆ เลย, ระวังโดนหลอกน่ะ"*

จะมีความหยาบกระด้างอยู่ในจิต ค่อนข้างไปในทางอารมย์ร้าย เคลือบแคลงไม่ลงใจ อิจฉาริษยาบ้าง ขี้กลัวไม่กล้าเสี่ยงบ้าง ก็จะมีผลเป็นความไม่ก้าวหน้า ดักดานอยู่ที่เดิม หรือไม่ก็รู้สึกน้อยเนื้อต่ำใจ inferiority complex, มีความคิดน้อมไปในทางอกุศล

**แต่ก็ไม่ใช่ว่าไม่ดี**. เพราะจะมีส่วนที่เป็นความรอบคอบ คิดนึกถ้วนถี่อยู่ บางครั้งอาจจะถูกก็ได้

#### คนโลกสวย
คนที่เป็นคนโลกสวย มักเสียงในหัวประเภทนี้ คือ 
*" ลงทุนไปแล้ว เดี๋ยวมันก็ขึ้นหรอก "*
*" ไม่เป็นไรหรอก เดี๋ยวก็ขายได้ ใจเย็น ๆ "*
*" เดี๋ยวทุกอย่างก็ดีขึ้นเอง "*

ทำให้มักจะประมาทเลินเล่อ สะเพร่า ไม่ระมัดระวัง ไม่รอบคอบ สุดท้ายก็ถูกเอารัดเอาเปรียบ หรือ ถูกหลอกได้

**แต่ก็ไม่ใช่ว่าไม่ดี**. เพราะจะมีส่วนที่เป็นความเมตตา ความเห็นอกเห็นใจ มีความใจเย็นอยู่

### เอาบางอย่างไม่เอาบางอย่าง
- **คนมองโลกในแง่ร้าย** ก็ไม่เหมือนกับ *คนรอบคอบ* เพราะ *คนรอบคอบ* เขาจะไม่ได้คิดเรื่องอกุศล.

- **คนโลกสวย** ก็ไม่เหมือนกัน *คนใจดีมีเมตตา* เพราะ *คนใจดีมีเมตตา* เขาจะไม่ได้เป็นคนประมาทเลินเล่อ

*ไม่ใช่* **เอา**ทุกอย่าง และก็ *ไม่ใช่* **ปฏิเสธ**ทุกอย่าง แต่บางอย่าง*ต้องมี* บางอย่าง*ต้องละ*

#### สิ่งที่ต้องละ
- **ทางร้าย**  ความเคลือบแคลง, ความโกรธ, ความกลัวที่เป็นอกุศล
- **ทางหลง** ความประมาทเลินเล่อ, ราคะ, ความเพลิน, ขึ้เกียจ, เหลาะแหล่ะ

#### สิ่งที่ต้องมี
ต้องฝึกให้มีความรอบคอบ อดทน ปัญญา เมตตา กรุณา,​อาจจะเจอความผิดหวังบ้าง, สมหวังบ้าง แต่ก็จะสามารถอยู่ในโลกนี้ได้อย่างมีความผาสุกได้
SAP Cloud Platform - Machine learning With Fiori Cloud
Tags: machinelearning, python, security, covid19
Published: 2020-06-19 13:50:41

Hello everyone.

A situation is shown where we use machine learning models to analyze everything related to Biosafety issues from the sap cloud platform.

We have created an architecture where we use various SAP Cloud Platform services including the following:

Java Server
Hana Database
Odata Provisioning
SAP Web IDE
SAP portal
Git
Fiori Cloud

Where each service allows us to create the solution that we will see below.

 

Detects the face mask on
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z33gn7308zzcsflef4fl.png)

Detect number of people in a certain place
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9i8j0krbnxm0w5550uq.png)

Detect social distancing
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9i8j0krbnxm0w5550uq.png)

All data is stored in a HANA database. Our architecture is decoupled and allows the use of microservices integrated into HANA.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9i8j0krbnxm0w5550uq.png)

We can visualize the captured image to have evidence of the biosecurity control.

We can see in the following report, all the traceability and the information collected from each person.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1aemrepv39y1v9j6i0uo.png)

Below is a demonstration video of the solution. Where the process is explained step by step.

https://youtu.be/Cj_HrEZiIpA
I Rebuilt My Personal Site!
Tags: showdev, react, ssg, nextjs
Published: 2020-06-19 13:44:54

---
title: I Rebuilt My Personal Site!
published: true
description: I Rebuilt My Personal Site! Come let me know what you think!
tags: showdev, react, SSG, next
//cover_image: https://direct_url_to_image.jpg
---
# I Rebuilt My Site! 😳 
In most cases if you asked anyone, "Should I rebuild this site or just improve it?" they would tell you to to improve it. Because if you rebuild, all the work and time you've invested to this point is thrown out with the project. And there's nothing more valuable in this life than your time. I would normally *be* one of those people. However my first site was lacking. I didn't know about design systems, my CSS is pretty subpar and it's pretty empty in terms of content.
I am proud of it, and I learned a huge amount from it regardless. It's Built with plain React & CSS and deployed to AWS. (If you would like to see how the deployment worked, I wrote an article about that here.)
 {% link https://dev.to/fastflowz/how-i-host-my-personal-site-for-1usd-month-2c67 %}
But it had a lot of room for improvement. The first thing I decided on was a dev.to integration. I've thoroughly enjoyed sharing with everyone here, and felt that putting those posts front and center should be a priority. Secondly I wanted to make my projects more accessible. Most of them are far from impressive, but they tell the story of how I've advanced as a developer. Thirdly, while I'm fairly active on social media, some people aren't. So my last goal was to provide a way for those people to be able to contact me. You can view it [here](https://next-personal-site.iamflowz.vercel.app/contact). I feel like I've converted pretty well, but I'd love to hear your guy's thoughts? What could be improved? What do you like? What don't you like? Please let me know in the comments below!!

---
Find me on [Twitter](https://twitter.com/FastFlowZ) | [LinkedIn](https://www.linkedin.com/in/dakota-lewallen/)
Sponsor me on [Github](https://github.com/iamflowz)
Like the article? [Buy me a coffee!](https://www.buymeacoffee.com/iamflowz)
TerminusDB Webinar - Star of Super Database
Tags: database, startup, working, irl
Published: 2020-06-19 13:43:44

---
title: TerminusDB Webinar - Star of Super Database
published: true
description: The TerminusDB team are not just tech geniuses, we also have musical talent. Last month we have made a parody of a pop song and we named it “Super Database”. Today we have the star of the video - Sreya to be in our webinar. She also takes care of the core TerminusDB team on daily bases. Let’s ask her what does she think of the team and the making of “Super Database”.
tags: database, startup, working, IRL
---
The TerminusDB team are not just tech geniuses, we also have musical talent. Last month we have made a parody of a pop song and we named it “Super Database”: https://www.youtube.com/watch?v=yNbc44TGBTc Today we have the star of the video - Sreya to be in our webinar. She also takes care of the core TerminusDB team on daily bases. Let’s ask her what does she think of the team and the making of “Super Database”.
Intro To Ruby Modules
Tags: beginners, ruby
Published: 2020-06-19 13:33:11

#What are modules?
Ruby modules are similar to ruby classes. They're large groups of methods that fall under a category. So an example of a built in ruby module would be the Math module.

#Module Us?
We can create our own custom modules using the current ruby module syntax. It looks like this:
```Ruby
module Somename
#loads of methods in-between.
end
```

#How can I use modules?
Simple repeatable tasks are great for modules. If there's something you're going to use over and over I recommend creating a module to add it to it.

#Let's See some Code! 🐱‍💻
![](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/microsoft/74/hacker-cat_1f431-200d-1f4bb.png)
```Ruby
module Greeting
  def hi
    puts "Hi!"
  end
  def hello
    puts "hello"
  end
  def gmorning
    puts "Good Morning"
  end
  def hola 
    puts "hola"
  end
end
greet = include Greeting
greet.gmorning #=> Good Morning
greet.hello #=> hello
greet.hola #=> hola
greet.hi #=> Hi!
```
In the code, the module, `Greeting`, has 4 methods: gmorning, hello, hi, and hola. The keyword, `include`, allows the module and it's method to be used. The variable `greet`, is an instance of `Greeting`, and can access all of it's methods. So, once we do, `greet.hi` the output will be: `Hi!`.

>You sure it works?

Here's the code, run it and see what happens.
{% replit @OreOlad2/Module-Practice %}

#Go write some code!!:smiley:
Hope you learned somehting!:sunglasses:
shortcuts in Chrome devtools!
Published: 2020-06-19 13:31:06

---
title: shortcuts in Chrome devtools!
published: true
description: shortcuts in the Chrome devtools console
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Cool stuff I did not know that you could run this in the Chrome devtools console.

```javascript
$x("//body");
```

See here for a list of other really nice shortcuts.

https://developers.google.com/web/tools/chrome-devtools/console/utilities
Python 3.9
Tags: python, webdev, django
Published: 2020-06-19 13:30:32

Python 3.9 🥳 is out and my favourite feature is the dictionary union operator.


### Example
```python

a = {1: 'dog', 2: 'cat', 3: 'rabbit'}
b = {4: 'snake', 5: 'python'}
c = a | b
print(c)

# {1: 'dog', 2: 'cat', 3: 'rabbit', 4: 'snake', 5: 'python'}
```


### 

[Read the official Docs](https://www.google.com/url?sa=t&source=web&rct=j&url=https://docs.python.org/3.9/whatsnew/3.9.html&ved=2ahUKEwjmy9SW_I3qAhWIFxQKHc6JCPMQFjAAegQIBBAC&usg=AOvVaw1xjgI_NJ_p-MSJqgrX054w&cshid=1592573027313)