teleren/devto huggingface dataset:
Makerwork 006 includes a universal tool to evaluate, discover and compare software projects on GitHub
Tags: github, vue, javascript, makerwork
Published: 2021-03-06 01:50:11

---
title: Makerwork 006 includes a universal tool to evaluate, discover and compare software projects on GitHub
published: true
date: 2021-03-03 04:00:06 UTC
tags: GitHub,Vue,JavaScript,makerwork
canonical_url: https://makerwork.netlify.app/posts/makerwork006/
series: Makerwork
---

Hey Makers! 👋 

Welcome to **Digest 006** of the newsletter. Our featured maker, Alexey, is the author of a universal tool to evaluate and discover alternatives and compare software projects on GitHub. 🏆 

By the end of 2017, over 25 million project repositories were hosted on GitHub and we all know that the number is counting. With so many options out there, it’s hard to decide which one is best for you.

Given there are competing tools, it is important not merely to find the appropriate software, but have a metric for judging its usefulness. Indeed, GitHub statistics (counts of stars, watches and forks) were highly correlated with each other, but were distinct from other metrics.

Metrics such as downloads, usage, releases etc may necessarily indicate the software usefulness. Alexey has never seen a tool that could compare GitHub repositories side by side with a broad range of data and statistics.

We suggest that **Moiva** should be used as an objective addition in measuring the utility of software, while Alexey’s goal is to make it really useful for as many developers as possible, make it popular, and present it in a nice and elegant way. ⭐️

If you like to know about the maker, I interviewed Alexey of **Moiva** in this week's roundup of makers for makers. This week's issue also includes an an open source ticket management system **Peppermint** and an open source alternative to Clubhouse, Twitter Spaces and similar audio spaces **Jam**.

[SUBSCRIBE FREE](https://makerwork.substack.com)

*The Makerwork newsletter includes interviews with makers featured in the email sharing their insights about open-source, their product, blog and work.*
Copyright Responsive footer using html and css?
Tags: html, css, beginners
Published: 2021-03-03 03:45:44

<strong >Introduction </strong>

In this post I am going to show you how I made footer using html and css. As you know footer is important section in web development and if footer looks 👌 well then our web development skills also improves.
It really matters if you make good looking footers that is result of your web development skills.
Read More:
1) <a href ="https://dev.to/deepai/how-i-added-block-element-to-paragraph-1n82"> How I added block element to paragraph? </a>
2)<a href ="https://dev.to/deepai/how-i-added-figure-caption-element-figcaption-1nc6"> How I added figure caption element?</a>

So for that I am going to show you how you create good looking footer using html and css.
Let's discuss what we can include in footer section 
1.In footer section we can add copyright information.

2.In footer section we can contact information.

3.In footer section we can add other pages links. 

4.We also include sitemap link.

5.We can add subscriptions NEWSLETTER etc.

For more details check out my blog <a href ="https://marathistandard.com/">Marathi Standard</a>  and also my <a href ="https://social.msdn.microsoft.com/profile/mas2100/"> MSDN Profile</a>
Now Its time to create footer section using html and css.
For that check out code provided through codepen project. 
Below 👇 Is How I made responsive footer using html and css.

{% codepen https://codepen.io/DeepAI20/pen/yLVEYwG %}

This is how I made footer section using html and css.

Hoping you 🙏 like this project.
introduction
Tags: intro, modding, random, newbie
Published: 2021-03-03 03:37:59

Hi, i'm stanboo I really don't prefer using my real name and I hope people are okay with that. I'm really childish and my friend recommended this site to me. I'm single and part of LGBTQ+ community. I hope I can be part of this community and be able to learn more coding languages since I barely know 2. My biggest inspiration right now are minecraft youtubers/modders haha, isn't that weird I'm in  college. I'm currently 18 and I love modding minecraft I also want to learn other things beside minecraft. I really want to learn how to code websites! Anyways, I really hope I can learn a lot from this community!
คู่มือการใช้งาน Airflow
Published: 2021-03-03 02:34:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7w9i2u7h00pykubljci.png)

#สิ่งที่ต้องมี
* Docker

***
# เปิดใช้งาน Airflow
####ขั้นตอนที่ 1. แตกไฟล์โปรเจคที่ได้รับ
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga12i2z8y1xqp3we1vry.png)
   
* ./dags - สามารถใส่ไฟล์ DAG ของคุณได้ที่นี่
* ./logs - บันทึกจาก execution และ scheduler
* ./plugins - สามารถใส่ปลั๊กอินที่กำหนดเองได้ที่นี่
* ./worker - ไฟล์ airflow.cfg

####ขั้นตอนที่ 2. เรียกใช้งาน Terminal cd มาที่โฟลเดอร์
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tqoaer1478sjjqdnzr8.png)

ใช้คำสั่งและรอจนกว่าขึ้นแบบในรูป
```
docker-compose up airflow-init
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lozun6gq1jvvvfekyqx8.png)
 
####ขั้นตอนที่ 3. ใช้คำสั่งเพื่อเริ่มต้นใช้งาน
<mark>ก่อนเริ่มใช้งานควรปรับแต่ง config ให้เรียบร้อย</mark>
```
docker-compose up
```
ล็อกอินเพื่อเข้าใช้งาน web ui ได้ที่ http://localhost:8080.
ชื่อบัญชีผู้ใช้ที่ถูกสร้างขึ้นคือ `airflow` และรหัสผ่าน `airflow` สำหรับ admin

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2re8mrqmmsd8jj98zxb0.png)
****
# การปรับแต่ง Config
การปรับแต่งจะทำในไฟล์ `./worker/airflow.cfg`
### Timezone
```Apache
#มี default เป็น UTC
[core]
default_timezone = Asia/Bangkok

[webserver]
default_ui_timezone = Asia/Bangkok
```

### SMTP Server
ใช้ SMTP Server Gmail สำหรับส่งอีเมล
```Apache
[smtp]
smtp_host = smtp.gmail.com
smtp_starttls = True
smtp_ssl = False
# Example: smtp_user = airflow
smtp_user = your@gmail.com
# Example: smtp_password = airflow
smtp_password = your_password_gmail
smtp_port = 25 หรือ 587
smtp_mail_from = your@gmail.com
smtp_timeout = 30
smtp_retry_limit = 5
```

****
# การใช้งาน Web UI
### การสร้าง Connection ID
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x32yq2js3mwoqb0q8ib.png)

ระบุข้อมูลเพื่อเชื่อมต่อกับฐานข้อมูล conn_id จะต้องตรงกับ CONN_ID ในไฟล์ python
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhcvx5f7xpgr265kzuhf.png)

### การสร้าง Users
![Screenshot (503)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76c3dx3f9i8x5wt6mi51.png)
กดปุ่ม + เพื่อเพิ่ม User
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uha0c33un1jleriocwq.png)
 
### การสร้าง Roles
![Screenshot (504)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/284dbmrdi66ist77jhc0.png)
กดปุ่ม + เพื่อเพิ่ม Roles
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdkwkafdzodnl6inkcbt.png)  

### การเปิดใช้งาน Active DAG
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ol75k2fmc4e7s10s36s4.png)

### การ Trigger DAG
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjv0t9edtan1vciczn98.png)
****
Best Android App Development Company in Vijayawada | ColourMoon Technologies
Tags: webdesigning, mobileapps, gamingapp
Published: 2021-03-03 02:30:21

ColourMoon Technologies Provides you the Best Services to make your Business a New Online Presence by providing services like Mobile Apps Development, Gaming App Development, Web Designing, Graphics Designing and Digital Marketing to make your Brand with our Services within no time.
Earn a FREE Microsoft Certification Exam While Learning New Skills
Tags: microsoft, azure
Published: 2021-03-03 02:07:19

[Microsoft's Cloud Skills Challenge 2021](https://csc.docs.microsoft.com/ignite/registration/March2021) is back! Take advantage of the opportunity to get a FREE Certification

Here's a breakdown:

1. [CLICK HERE](https://csc.docs.microsoft.com/ignite/registration/March2021)

2. [Microsoft Learn](https://csc.docs.microsoft.com/ignite/registration/March2021) gives you challenges to study via prescribed modules.

3. Complete one #challenge and earn a free Microsoft Certification exam

[#CloudSkillsChallenge](https://csc.docs.microsoft.com/ignite/registration/March2021)
Survey on Azure DevOps in Software Development
Tags: azure, webdev, devops, cloud
Published: 2021-03-03 00:17:15

This questionnaire is part of a survey based on the investigation of the main factors that influence the acceptance of the Azure platform in the context of Software development.

The information recorded here will be kept confidential and analyzed jointly, without identifying the respondents.

Estimated reading and filling time: 5 min.

Link: https://forms.office.com/Pages/ResponsePage.aspx?id=I328LGbrJ027GVBIKxQl-anwSs6-xAxIg1oIUeE9Mr5UQzFCQjlDQzk5WFUzVjBBSjlOT0MwM0ZGQy4u

Thank you for your cooperation!
App Platform: Injecting files from Environment Variables
Published: 2022-09-20 17:07:42

---
title: App Platform: Injecting files from Environment Variables
published: true
date: 2021-03-03 00:00:00 UTC
tags: 
canonical_url: https://jonfriesen.ca/articles/app-platform-injecting-files
---

App Platform apps (that don't use dockerfiles) are built using [Cloud Native Build Packs](https://buildpacks.io/), which turn your code into a OCI image that is run on a secured, shared Kubernetes instance. App Platform offers the ability to apply environment variables to your app, in many cases app secrets are stored in these env vars, and in less common cases the apps require these secrets to exist as a file on the filesystem.

### Some options to make this happen are:

- Commit the secret to the app git repository so it's present when the build occurs.
  - The obvious drawback here is that the secret is in the git and the git history. This is unacceptable in most cases.
- Convert the App to use a dockerfile and echo the environment variable to disk with the dockerfile.
  - Slightly better than the first option, this method still persists your secret to the OCI image.
- Finally, explicitly take over the run command and inject the file at run time.
  - This method does not persist the secret anywhere in an unencrypted fashion.
  - It ensure that the right version of your secret is present.
  - The drawback is it your app `run_command` needs to be manually set.

## How do we do this?

**1.** Add the environment variable to your app and check the `Encrypt` checkbox.

**2.** Select the component that requires the secret and `Edit` the _Commands_ to look something like

```
echo "${APP_CERT}" > jwt.cer && <your_apps_run_command>

```

In this snippet, the `APP_CERT` environment variable writen to a file called `jwt.cer` and then the apps execution code is ran.

## Further Considerations

In some cases you may need to encode your file before saving it as an environment variable, which will require decoding it.

### Encoding your file using base64

The `base64` tool comes with Linux and MacOS by default, getting a base64 representation of your file can be down with:

```
cat <your_file> | base64

```

this also means your file will need to be decoded before being written to disk. Update your run command to:

```
echo "${APP_CERT}" | base64 --decode > jwt.cer && <your_apps_run_command>

```
What's the Difference Between val and var in Kotlin?
Tags: kotlin
Published: 2021-03-03 09:35:31

---
title: What's the Difference Between val and var in Kotlin?
published: true
date: 2021-03-03 00:00:00 UTC
tags: kotlin
canonical_url: https://hugomartins.io/essays/2021/03/difference-between-val-and-var-kotlin/
---

Coming from a background of Python and PHP, I’m used to interpreted loosely typed languages in which declaring variables is done in an almost frivolous way. Suffice it to say, when I started writing Kotlin, I was a bit confused about the fact that there are two different ways of declaring essentially the same variables. Even when I wrote C#, back in the day, I never encountered anything similar to this.

Those declarations didn’t differ in type or visibility but rather on their mutability. Kotlin has quite a diverse offering of built-in functionality that encourages immutability. One of those is declaring properties with `val` and `var`. But what’s the difference between `val` and `var` then?

`val` is a keyword in Kotlin that allows us to define properties as read-only. Because they are read-only, they cannot be modified. `var`, on the other hand, is a keyword that can be used to declare properties in Kotlin that are mutable. These properties are not read-only (as with `val`) and they can be modified at will.

What does that mean in practice? Let’s consider the following example:

```
data class Car(
    val model: String
)

fun main() {
    val car = Car("Tesla")
    car.model = "Ford"
}
```

If we try to compile this, Kotlin’s compiler complains with a `Val cannot be reassigned` error. A property declared with `val` cannot be safely modified at runtime. In fact, these properties don’t even have a setter accessor that we can use to set its value. On the other hand, let’s consider the following example:

```
data class Car(
    var model: String
)

fun main() {
    val car = Car("Tesla")
    car.model = "Ford"
}
```

with the above example, Kotlin’s compiler won’t complain because the property `model` in the data class `Car` is declared with a `var`. By declaring with a `var`, it can be modified without any issues, even though `car` is declared with `val`. `var` has both getters and setters as accessors.

In essence, `val` and `var` are both property declaring keywords, that allow us to declare properties with varying types and visibility modes, differing on the mutability of those properties. While `var` allows properties to be mutable, `val` does not, enforcing immutability straight from the source code at runtime.

While it forced a shift of mentality, I’ve come to appreciate more and more being able to use `val` and enforcing immutability. I’ve come to rely on it so much that I end up missing it whenever I go back to other languages that don’t prize immutability as much as Kotlin.
How to turn off the relative positioning of an element in CSS?
Tags: css
Published: 2021-03-03 00:00:00

---
  title: How to turn off the relative positioning of an element in CSS?
  published: true
  tags: CSS
  date: Wed Mar 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/turn-off-relative-positioning-of-element-css
  cover_image: https://melvingeorge.me/_next/static/images/main-79d6a1436f3335b9fdf425bced9a1e37.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/turn-off-relative-positioning-of-element-css)
  
To turn off the relative positioning of an element in CSS, you can set the `position` property of that element to `static`, this will attach that element back to the whole document flow.

```css
/* Turn off relative positioning */
position: static;
```

- This is useful in the cases where we want to revert the positioning of an element used with `position: absolute;` property back to its original document flow.

### Feel free to share if you found this useful 😃.

---
Download Images using JavaScript 📸
Tags: javascript, webdev, download, images
Published: 2021-03-03 00:00:00

---
title: 'Download Images using JavaScript 📸'
date: '2021-03-03'
author: 'Sapan Bodiwala'
description: 'How to download images programmatically using JavaScript'
published: true
tags: javascript, webdev, download, images
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3w1aurnbpjy9rq6ubjr.png
---

Let's say you're trying to add a feature to your site or app to allow users to download an image upon clicking a button. Should be pretty straight forward right? I thought so myself as I needed to add this feature when building an internal media library tool at [Discovery](https://www.discovery.com/).

I tried adding this feature by just adding the **download** attribute to an anchor tag and setting the **href** attribute to the image url (cross-origin url).

```html
<a href='URL_HERE' download>Download image</a>
```

Turns out that Chrome started [ignoring](https://developers.google.com/web/updates/2018/02/chrome-65-deprecations#block_cross-origin_a_download) download attributes that pointed to cross origin urls.

**To solve this**, we'll take advantage of the browser built in **fetch** method. You'll need to add an event listener to the element that you want to trigger the image download and call the below function:

```js
// Using fetch
async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
```

The **imageSrc** function parameter represents the cross origin image url.

1. First, we use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to get the _ReadableStream_ data of the image
2. Next, we call the [blob](https://developer.mozilla.org/en-US/docs/Web/API/Body/blob) method provided by **fetch** to get the raw image data
3. Third, we use the **URL Web API** to call the [createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) static method to create a URL that represents the image's download URL
4. Finally, an anchor element is created to set the new url to the **href** attribute. You can also set the name of the file by setting the **download** attribute of the anchor element. Last, we append the anchor element we created to the DOM and trigger a click to download the image and then quickly remove the anchor from the document.

And there you go! You now have the ability to download images on the trigger of a function!

I hope this helped and was useful for you!

This post can also be found at [sapanbodiwala.com/blog](https://sapanbodiwala.com/blog)
What's the best programming language for…
Tags: programming
Published: 2021-03-03 14:07:03

---
title: What's the best programming language for…
published: true
date: 2021-03-03 00:00:00 UTC
tags: programming
canonical_url: https://jhall.io/archive/2021/03/03/whats-the-best-programming-language-for/
---

> What’s the best programming language for a high-performance web server?

> What’s the best programming language for processing large text files?

> What’s the best programming language for…

![Shut up!](https://jhall.io/archive/images/arnold-shut-up.jpg)

These questions are meaningless. The best language for practically any task is (drum roll, please)…

**the language you are most familiar with!**

There was a time when it was important to squeeze every micro-optimization possible out of our code. Unless you’re still writing code for an [Altair 8800](https://en.wikipedia.org/wiki/Altair_8800), this time is _long_ past. Humans are by far the most expensive part of any IT operation these days, so don’t waste time on premature optimzations worrying about which language to write your CRUD service in.

Instead, optimize for the humans who touch your code. Write your service in the language you, and your team, are most familiar with.

In the rare situations where some piece of code does require extra optimization, which cannot be achieved in your chosen language, you’ll know it. And you’ll be asking far more detailed questions than “What’s the best language for X?”

Until you find yourself in that situation, just stick with the language you’re comfortable with.
Troubleshooting WSL + localhost:3000 'connection refused' issue
Tags: wsl2, createreactapp, iphelper
Published: 2021-03-02 23:33:34

Just spent an hour trying to figure out why the browser wouldn't open localhost:3000 (served by Webpack/create-react-app in **WSL2**).

Normally, a server running in WSL should be accessible from the Windows (host) machine without any issues.

My troubleshooting steps, roughly:
- check `/windows/system32/drivers/etc/hosts` file *--nothing special here...*
- check Windows firewall rules, just in case
- shut down WSL VM with `wsl --shutdown` command and restart it
- run another app in WSL using a different port *-- hmm, this works...*
- change the port of the app in question in Webpack config: `PORT=3006 react-scripts start` *-- also works... so the problem is in the specific port!*
- see if some process is holding the port 3000 in Linux: `ss -tulpn`
- check if a process is holding the port in Windows: `netstat -ano | findstr :3000` or _Resource Monitor -> Network tab -> Listening ports_ -- **aha! there is one!**
- find the process name by PID in the _Task Manager -> Services_

Turns out, the port was taken by __IP Helper__ service (iphlpsvc).

I could not find a way to reconfigure it, and some quick research [showed](http://revertservice.com/10/iphlpsvc/) that it wasn't a critical service (at least in my case), so I just disabled it in the _Services_.
MySQL tutorial - 2 Relationship in Database
Tags: mysql, beginners, tutorial
Published: 2021-03-02 23:53:11

In SQL database, each entity is represented as a table that can connected each other. There are many types of relation in SQL database especially in MySQL database.

## One to One Relation

One to one relation is a relation that represents each entity has a relation with single other entity. For example a single post is written by an author. The one to one relation is illustrated in this picture below.

![One to one relation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10cwz626x4xtgs2eix5y.png)

## One to Many Relation

One to many relation is a relation that represents an entity has a relation with many entities. For example a single post has a lot of comments. The one to many relation is illustrated in this picture below.

![One to many relation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqco2qey3j6cajejdytj.png)

## Many to Many Relation

Many to many relation is a relation that represents many entities has a relation with many other entities. The main characteristic of this relation in SQL database is the existence of a table that act as a connector between two other tables. For example a many posts can be liked by many users. This relation is illustrated in this picture below.

![Many to many relation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/marqh0js89ss6kwvzg96.png)

## How to define relation

Entity relation is define based on the use cases. To identify the relation that will be used can be done by abstraction using entity relationship diagram (ERD).

I hope this article is helpful for learning relation in SQL, If you have any thoughts or comments you can write in the discussion section below.