teleren/devto huggingface dataset:
DO Hackaton Submission
Tags: dohackathon
Published: 2021-01-10 01:46:19

## What I built
Dbug is an application where programmers can connect with each other for pair programming.

### Category Submission:
Program for the People

### App Link
[dbug.xyz](https://dbug.xyz/)

### Screenshots
#### Edit your contact information
![Contact change demo video](https://dev-to-uploads.s3.amazonaws.com/i/1zb4bsyn94mt4egyqv4h.gif)

#### Add a new project
![New project demo video](https://dev-to-uploads.s3.amazonaws.com/i/txgreeus4c89o5a1hevz.gif)

#### Share your contact information
![Share your contact demo video](https://dev-to-uploads.s3.amazonaws.com/i/ttbkz6ngs73ibsizeqlj.gif)

#### Receive and select contact offers
![Contact selection demo](https://dev-to-uploads.s3.amazonaws.com/i/59v983gv1wg8civqtpq5.gif)

### Description
This application allows people to save their contact information and share it with other users. The information stays private and is only shared with people that you decide to share it with. Once you create a project you can receive multiple contact offerings and see on what platforms they are available, as well as GitHub statistics for their profile. After selecting a contact, you are given their contact information for further contact.

### Link to Source Code
https://github.com/yvesnrb/dbug

### Permissive License
MIT

## Background
I wanted to build this app because I think opportunities to bring people together safely is invaluable today. I hope I can give people the opportunity to video call each other to help solve problems and build cool stuff.

### How I built it
This application is composed of a full TypeScript stack. I've used ReactJS for the front-end and Express and TypeORM on the back-end. Additionally the application interfaces with a PostgreSQL database. Digital Ocean's App Platform made it extremely easy to get the entire stack running and to deploy new iterations of my application for other people to try.

### Additional Resources/Info
Check out the other posts in this series for some additional insight on how I've built this application.
Digital Ocean Hackathon Submission - Part 2
Tags: dohackathon, angular, webdev, showdev
Published: 2021-01-10 01:30:32

## What I built
I am building a game which I have named **Watch The Block**. It is a memory game focusing on remembering the old and new states. As a player, the game is straightforward; you must remember the most recent added Block to the game board. The more blocks you guess, the more points you score. It also has a ticking timer to keep players on their toes.

### Category Submission: 
Random Roulette

### App Link
https://watch-the-block.sumitarora.dev/

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

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

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


### Description
Watch the Block is a memory game focusing on remembering old and new states. As a player, the game is straightforward; you must remember the most recent added Block to the game board.
 

### Link to Source Code
https://github.com/sumitarora/watch-the-block-angular

### Permissive License
MIT

## Background
One of the resolutions for 2021 I made is to write more and engage more with the community — what better way than to be part of a hackathon. 

### How I built it 
I have built it using Angular. Digital Ocean is being used to deploy the static site. There is no backend as the only thing I am storing is user scores for which I am using firebase.

> Photo by [Christopher Gower](https://unsplash.com/@caleb_woods)
Time and Space Complexity in 2 minutes
Published: 2020-12-21 13:21:10

---
title: Time and Space Complexity in 2 minutes
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Space Complexity: How much memory is used.
Time Complexity: How many operations are executed.

This is my interpretation time and space complexity applied to software development. 

## Time complexity

### Constant Time O(1)
A Constant Time complexity operation would be simply running a statement, or a value lookup in an object.
Example:

```
arr.pop()
arr[1]
5 + 3
4 * 2

```

### Logarithmic O(logn)

With each loop you cut your decrease you work in half, or by a fraction.
A good example of this would be a binary tree. With each step into the search we should be eliminating a fraction of the tree.
So our Time complexity is decreasing by a fraction each time.

### Linear O(n)

Linear time complexity, looping through values of an array.

```
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for(let i = 0; i <= array.length; i++){
 ...
}
```
An array has a start and end. The operation would run across the array. Resulting in a complexity of O(10), which is not complex at all.
In the above example, `n` represents the number of items in our array.


### Quadratic O(n^2)
Quadratic time complexity, a loop, in a loop, in a loop.

```
for(...){
  for(...){
    for(...){
    }
  }
}
```
The above results in 0(n^3)

### Exponential O(k^n)

Exponential time complexity refers to an algorithm whose growth doubles with each loop.


## Space complexity

Space complexity deals with space an algorithm takes up in memory. 
As a trade off to executing a Quadratic Time Complex algorithm, we could create a hash table which is stored in memory. 
Now, with our hash table in memory, we can run a Constant or Linear time algorithm against the hash table. 
As a trade off, we have increased the Space Complexity by keeping a hash table in memory and decreased the Time complexity or our algorithm.
Day 8 of 365: Beautiful rotatable cube (live demo)
Tags: lume, webdev, html, 3d
Published: 2021-01-10 00:31:57

Day 8 of 365: A #beautiful rotatable #3D cube with #LUME.

Posting a new demo every day of 2021!

The demo makes a <codepen-cube> element. It applies rotation on mouse/finger move events.

{% codepen https://codepen.io/trusktr/pen/XWjBEaN %} 
 
The demo shows how to

1. Make a custom `<codepen-cube>` HTML element with with `@lume/element`.
2. How to use the element and assign the size of the cube via HTML attributes.
3. Position 6 flat square surfaces in the shape of a cube using LUME's HTML elements.
4. Observe mouse/finger movement in order to make it rotate.
5. Apply beautiful coloring.

Made with LUME:

{% github http://github.com/lume/lume %}

topics: #codeart #creativecode #mediaart #graphics #webdev #creativecoding #CSS #webgl #webdevelopment
What language to learn in 2021?
Tags: programming, software, coding, webdev
Published: 2021-01-10 00:54:03

New programming languages keep coming everyday and it is becoming extremely difficult especially for Tech newbies to choose which language to start with. I have listed below the 5 most popular programming, scripting, and markup languages in 2020 as listed on the [Stackoverflow 2020 Developer Survey.](https://insights.stackoverflow.com/survey/2020)


### 5 Most popular programming, scripting, and markup languages

1. Javascript [https://www.javascript.com/](https://www.javascript.com/)
2. HTML/CSS [https://www.w3.org/Style/Examples/011/firstcss.en.html](https://www.w3.org/Style/Examples/011/firstcss.en.html)
3. SQL [https://www.w3schools.com/sql/](https://www.w3schools.com/sql/)
4. Python [https://www.python.org/](https://www.python.org/)

5. Java [https://www.java.com/en/](https://www.java.com/en/)
Set custom DNS for Docker to use
Tags: docker, dns
Published: 2021-01-10 00:48:52

Did you know Docker internally uses Google DNS (8.8.8.8, 8.8.4.4) to resolve all domains when downloading images or installing dependencies while building images ? 

Recently while building [Smart Display with Phoenix LiveView](https://dev.to/darnahsan/smart-dashboard-with-phoenix-liveview-4e3d) I found that's the case when suddenly all new image downloads or build dependencies that were not cached started failing. As I run my own [Ad blocking VPN with DoH](https://dev.to/darnahsan/ad-blocking-vpn-with-dns-over-https-on-a-raspberry-pi4-5c3i) and have a sink setup on my router for Google DNS as many of the devices for e.g Chromecast come hard coded with Google DNS to allow serving ads and geo lock your content.

Initially I couldn't figure out what could be the cause as this was something unexpected that docker by default is using Google DNS if nothing is configured.

First I had to update in `/etc/default/docker` for docker to be able to download dependencies 

```
# Use DOCKER_OPTS to modify the daemon startup options.
DOCKER_OPTS="--dns 1.1.1.1 --dns 1.0.0.1"
```

but I hit a wall when the images that were not available locally started to fail as well up on further digging through found online that DNS config should also be updated in `/etc/docker/daemon.json`

```
{
    "dns": ["1.1.1.1", "1.0.0.1"]
}

```

For now this has resolved my Docker DNS issues and all images and dependencies are working well.
Push until you can't push anymore
Published: 2021-01-10 00:34:39

series: [“Ordinary Geeks Covid Tracker 2”]

The code is pretty much done in Asp.Net Framework. I need to change it to asp.net Core.
Had given up. 1) I saw that Apple and Google already provide Covid trackers.  I woke up this morning feeling disheartened. I went to my cousin's funeral.  Where my other cousin, JC Smiley, who is also in the hackathon, asked me why I was quitting. Later on, at his house, he helped motivate me to go hard this weekend. (I had already decided to finish my idea). So last night I couldn't get my domain from winhost moved over to here easily, but I realized that I could just buy a new domain name. So I did =).  Now I am in the game.

Found a tutorial but the registration may take 48 hours.  I am very sad that I waited this long to try to push it to Digital Ocean. Oh well.  You live and you learn.
Cropping Images with CSS
Tags: css
Published: 2021-01-10 00:33:58

There are a few ways to crop images using CSS.

The first approach is to use a container with relative positioning and hidden overflow, then adjust the orientation of the image using absolute positioning.

The second approach is to simply use object-fit and object-position to adjust the size and orientation of the image.

Here's a straight-forward example of the two strategies at work.

{% codepen https://codepen.io/brandonmweaver/pen/WNGKBXJ %}
Estruturas condicionais em JavaScript
Tags: javascript, braziliandevs, beginners, webdev
Published: 2021-01-10 00:27:14

Olá pessoal, hoje vamos conhecer algumas formas de utilizar estruturas condicionais em **JavaScript**.

## Condição Simples

```js
let idade = 18

if (idade >= 18) {
  console.log('Pode entrar')
}
```

## Condição Composta

```js
let idade = 18

if (idade >= 18) {
  console.log('Pode entrar')
} else {
  console.log('Não pode entra')
}
```

## Condições Aninhadas

```js
let idade = 22

if (idade < 16) {
  console.log('Não vota')
} else {
  if (idade < 18 || idade > 65) {
    console.log('Voto opcional')
  } else {
    console.log('Voto obrigatório')
  }
}
```

Outra forma:

```js
let idade = 22

if (idade < 16) {
  console.log('Não vota')
} else if (idade < 18 || idade > 65) {
    console.log('Voto opcional')
} else {
  console.log('Voto obrigatório')
}
```

## Condição ternária

```js
let idade = 15
idade < 16 ? console.log('Não vota') : console.log('Pode votar')
```

## Condições Múltipla

```js
let agora = new Data()
let diaSemana = agora.getDay()

switch(diaSemana) {
  case 0:
    console.log('Domingo')
    break
  case 1:
    console.log('Segunda')
    break
  case 2:
    console.log('Terça')
    break
  case 3:
    console.log('Quarta')
    break
  case 4:
    console.log('Quinta')
    break
  case 5:
    console.log('Sexta')
    break;
  case 6:
    console.log('Sábado')
    break
  default:
    console.log('[ERRO] Dia inválido!!!')
    break
}
```
How to encode and decode a part of a URL using JavaScript?
Tags: javascript
Published: 2021-01-10 00:00:00

---
  title: How to encode and decode a part of a URL using JavaScript?
  published: true
  tags: JavaScript
  date: Sun Jan 10 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/encode-decode-part-of-url-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-50eac4cca4a8d0782db9b0ebcebba019.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/encode-decode-part-of-url-javascript)
  
To encode and decode a part of URL in JavaScript, you can use the `encodeURIComponent()` and `decodeURIComponent()` functions respectively available in the global `window` object.

The `encodeURIComponent()` is different from the `encodeURI()` function where the first encodes a full URL including its domain name and protocol whereas the second one ignores the domain and protocol names.

## Encode URL

Consider this URL,

`https://www.google.com/search?q=Hello world`

If you pass this whole URL to the `encodeURIComponent()` function it encodes the full URL like this,

`https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3DHello%20world`.

The `encodeURIComponent()` doesn't ignore the domain and protocol used and encodes the whole URL itself.

So normally `encodeURIComponent()` function is used to encode only part of the url whether it may be the query string, hash, etc.

```js
// Url
let urlFirstPart = "https://www.google.com/search?q=";

let urlQueryString = encodeURIComponent("Hello World Hai");

const fullURL = urlFirstPart + urlQueryString;

// Output: https://www.google.com/search?q=Hello%20World%20Hai
```

As you can see, we are using the `encodeURIComponent()` to only encode the query string part and then appending that encoded string to get the full url.

## Decode URL

This can be done using the `decodeURIComponent()` function by passing the string into the function like this,

```js
decodeURIComponent("https://www.google.com/search?q=Hello%20World%20Hai");

//Output: https://www.google.com/search?q=Hello World Hai
```

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

---
Sieve Of Eratosthenes
Tags: notes, go, algorithms, prime
Published: 2021-01-10 16:52:38

---
title: Sieve Of Eratosthenes
published: true
date: 2021-01-10 00:00:00 UTC
tags: Notes,go,algorithm,prime
canonical_url: https://clavinjune.dev/en/blogs/sieve-of-eratosthenes/
---

![Photo by @roman_lazygeek on Unsplash](https://images.unsplash.com/photo-1453733190371-0a9bedd82893?w=1920)

I don’t do anything except converting the pseudocode from [wiki](https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes#Pseudocode) into Golang code

```go
package main

import "fmt"

func fetchFirstPrimeNumbersOf(n int) []int {
  var result []int

  // an integer n > 1
  if n <= 1 {
    return result
  }

  // let A be an array of Boolean values
  isPrime := make([]bool, n)

  // indexed by integers 2 to n,
  // initially all set to true.
  for i := 2; i < n; i++ {
    isPrime[i] = true
  }

  // for i = 2, 3, 4, ..., not exceeding √n do
  for i := 2; i*i < n; i++ {
    // I reverse the conditional check in order to make things a bit pretty

    // if A[i] is true
    if !isPrime[i] {
      continue
    }

    // for j = i^2, (i^2)+i, (i^2)+2i, (i^2)+3i, ..., not exceeding n do
    for j := i * i; j < n; j += i {
      // A[j] := false
      isPrime[j] = false
    }
  }

  // return all i such that A[i] is true.
  for i := 2; i < n; i++ {
    if !isPrime[i] {
      continue
    }

    result = append(result, i)
  }

  return result
}

func main() {
  fmt.Println(fetchFirstPrimeNumbersOf(100))
}
```

Thank you for reading!
Introducing Online GZIP de/compressor, built with Blazor WebAssembly
Tags: dotnet, aspnet, blazor, gzip
Published: 2021-01-11 15:53:50

---
title: Introducing Online GZIP de/compressor, built with Blazor WebAssembly
published: true
date: 2021-01-10 00:00:00 UTC
tags: dotnet, aspnet, blazor, gzip
canonical_url: https://swimburger.net/blog/dotnet/introducing-online-gzip-decompressor
cover_image: https://swimburger.net/media/inanvouu/screenshot-of-gzip.png?crop=0.024748552784985823,0.0010060936344875203,0.19558161867532495,0&cropmode=percentage&width=1000&height=420
---

Web Assembly (WASM) has allowed many different programming platforms to now be supported inside of the web browser. You can now develop C# .NET applications that run inside of the browser using [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor).

A large amount of the .NET API is now usable right inside the browser when you use Blazor WASM. One of those API's is the [GzipStream](https://docs.microsoft.com/en-us/dotnet/api/system.io.compression.gzipstream) class which you can use to compress and decompress files using the GZIP algorithm. Unfortunately, the Brotli API's aren't supported in Blazor WASM.

Using Blazor WASM and the GZIP API's I created this little [web application which you can use to compress and decompress multiple files using GZIP](https://gzip.swimburger.net/). All the files are de/compressed right inside of the browser without transmitting them to a server. This does mean that it is using your device to perform this task and the size of the files are limited depending on the limitation of your browser. Here's a preview:

[![Two files are dragged into the GZIP compression web application. The button "Compress Files" is clicked. The files are listed and have a loading animation next to their name. The files are compressed and downloaded back to the device.](https://swimburger.net/media/jhmj5h5t/gzip-compress.gif)](https://gzip.swimburger.net/)

The application also works offline and is installable thanks to the PWA capabilities built-in to Blazor WASM.

Both Windows, Mac, and Linux operating systems already have built-in ways to de/compress files using GZIP, but you can also use this tool if you prefer a web application over the command line utilities. You can find [the source code on GitHub](https://github.com/Swimburger/BlazorDeCompressor).
สรุปคอนเซ็ป Ecto เบื้องต้น
Tags: elixir, ecto
Published: 2021-01-09 23:37:44

[Ecto](https://hexdocs.pm/ecto/Ecto.html) เป็น Elixir library ที่มีหน้าที่คือช่วยเป็นตัวกลางเชื่อมต่อกับ database (DBMS) ช่วยในการ mapping ค่าจาก record ใน database กับข้อมูลของ Elixir

พูดง่ายๆก็คือ Ecto มี module [Ecto.Schema](https://hexdocs.pm/ecto/Ecto.Schema.html) จากข้อมูลที่อยู่ในตารางแต่ละแถวของ database เราจะใช้ Ecto เพื่อช่วยแปลงจาก row มาเป็น struct และข้อมูลแต่ละ column แต่ละ type ใน database กลับมาเป็นข้อมูลแต่ละแบบใน Elixir เช่น integer, string เป็นต้น

นอกจากนั้น Ecto ยังมี module [Ecto.Query](https://hexdocs.pm/ecto/Ecto.Query.html) ที่มี macro ที่ออกแบบมาเป็น DSL (Domain Specific Language) สำหรับใช้ query ข้อมูลซึ่งแม้จะเป็น macro ใน Elixir แต่เวลาใช้งานแถบจะเหมือน SQL แต่ปลอดภัยและสะดวกกว่าเราต่อ string เป็น SQL statement เอง

Ecto มี module [Ecto.Changeset](https://hexdocs.pm/ecto/Ecto.Changeset.html) เพื่อให้เรา เตรียมการเปลี่ยนแปลงของ row โดยสามารถเช็คได้ว่ามี field ที่ต้องมีหรือไม่ เตรียม validator ต่างๆสำหรับ validate field ให้

Ecto ยังมี [migration tool](https://hexdocs.pm/ecto_sql/Ecto.Adapters.SQL.html#module-migrations) เพื่อให้เราจัดการการเปลี่ยนแปลงของ schema ของ table ให้เราอีกด้วย

สรุป Ecto เตรียมเครื่องมือต่างๆให้เราดังนี้

- มี mix task สำหรับจัดการการเปลี่ยนแปลง (migration) database schema
- [Ecto.Repo](https://hexdocs.pm/ecto/Ecto.Repo.html) เป็น module ที่เราเอาไว้จัดการส่ง statement ต่างๆไปให้ datbase จริงๆ
- Ecto.Schema เป็น module ที่ช่วยให้เรา mapping ประเภทข้อมูลใน table กับ ใน Elixir ว่าใน 1 row จะกลายมาเป็น struct ที่แต่ละ column จะกลายมาเป็น field ใน struct โดยได้ข้อมูลประเภทไหน
- Ecto.Changeset เป็น module เพื่อจัดการ การเปลี่ยนแปลงของข้อมูลใน 1 record ว่าถูกต้อง (valid) ตามเงื่อนไขที่เราต้องการหรือไม่
- Ecto.Query ช่วยในการสร้าง SQL statement โดยอาศัย DSL macro ที่เตรียมไว้ให้ทำให้เราสร้าง SQL ด้วย syntax ของ Elixir ได้ง่าย สะดวก ปลอดภัยมากกว่าประกอบ string SQL เอง

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Remove Chrome Autocomplete Suggestion
Tags: tech
Published: 2021-02-09 22:57:58

---
title: Remove Chrome Autocomplete Suggestion
published: true
date: '2021-01-09 23:11:04 UTC'
tags:
  - tech
canonical_url: 'https://www.sheldonhull.com/microblog/remove-chrome-autocomplete-suggestion/'
---

Do you have a Chrome suggestion for a domain, url, or specific site location that you don't want anymore?

You can remove an invalid suggestion that you don't want popping up each time by using `shift+delete`.

If it's the first entry it will remove it, or use arrow keys to highlight a different entry and press the same command.

Also relevant: [To Delete Chrome Address Bar Suggestions with Mouse](https://bit.ly/38wFlOJ)
Drawing a lövely image
Tags: love2d, lua, gamedev
Published: 2021-01-09 22:50:28

Drawing an image file:

```lua
function love.load()
	mario = love.graphics.newImage("mario.png")
end

function love.draw()
	love.graphics.draw(mario)
end
```

Drawing an image from base64 on source code:

```lua
mario64 = "iVBORw0KGgoAAAANSUhEUgAAAQQAAAEEBAMAAAA8Jlc5AAAAElBMVEUAAAAAAACIcADYKAD8mDj///9LiYtiAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAEsSURBVHja7d3BDYUgEAVAWqCF34It2H9N/+RlEwIiUcF5R4zuHDdhwZTyw0mpnbA1BgEBAQEBAeF7hG1QEBAQEBAQENYl/ArZQ+L6wJYFAQEBAQEB4aWE+MlS6dbnCAgICAgICN8hDKYgICAgICAgLECofbJEjLnQsiAgICAgICC8lBCzd2bg1CcCAgICAgLCSwmx9ThGKE+2JggICAgICAgLEkolSoROGgICAgICAsKEhNrWRu3o5smtEQQEBAQEBIQJCaXRiKPEsR5Lx/XS6AUCAgICAgLCeoRSyVouHNFAQEBAQEBAmIxw9WpJBAQEBAQEhPUIMa1XTHf+0gIBAQEBAQFhYkLvEYwbpj4REBAQEBAQHiZ0Xv3U+z4CAgICAgLChISbg5BzzukP4FDNAIC3HvUAAAAASUVORK5CYII="

byte_data = love.data.decode('data', 'base64', mario64)
image_data = love.image.newImageData(byte_data)
image = love.graphics.newImage(image_data)

function love.draw()
	love.graphics.draw(image)
end
```
It's Okay to Say "No"
Tags: career
Published: 2021-01-11 17:20:45

---
title: It's Okay to Say "No"
published: true
date: 2021-01-09 22:40:32 UTC
tags: "career"
canonical_url: https://martincartledge.io/its-okay-to-say-no/
---

![beach](https://i.imgur.com/WnzajVu.jpg)

Picture this. Your manager comes to you and asks, _can you squeeze in some extra work before the big deadline?_

You _want_ to be a team player, and impress upper management, but you are not sure you can _actually_ pull it off.

You tell your manager _Sure thing, I can get that done no problem!_

Of course, what you are doing is not _wrong_, however, you can be establishing a new _expectation_ without even realizing it.

The next time a last-minute ask or change in requirements surfaces, your manager will assume you can rise to the occasion because you did previously.

Before I continue, let me reiterate. _There is nothing wrong with going above and beyond at your job_.

With that being said, I think this can quickly turn into an issue if you do not feel comfortable with saying _No_.

Telling someone _No_ is not a way to upset them or hurt their feelings. It is an honest answer that reflects how you feel.

If you do not feel confident about the new changes or added work before that big deadline, be honest about it!

You might think that your boss will be upset and take it out on you, but in reality, they will more than likely respect you more for being 100% honest and realistic.

Occasionally telling someone _No_ is not only a healthy way to be fair to yourself, it also can help build trust amongst relationships of your peers or your boss.

When you trust someone, you feel happier to work with them, right? It is a no-brainer. Everyone can benefit from open communication and honesty.

It will not always be easy to say, but it will pay off in the end.

Be fair to yourself, say _No_ more often.