teleren/devto huggingface dataset:
97Palettes.com - Based on Microsoft Colors
Tags: fluentui, palette, colors, flatui
Published: 2020-06-21 04:22:42

---
title: 97Palettes.com - Based on Microsoft Colors
published: true
description: A Palette Influenced by FlatUI Colors and Fluent UI
tags: #FluentUI, #Palette #Colors #FlatUI
cover_image: https://images.pexels.com/photos/743986/pexels-photo-743986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---

Happy Sunday! Dev Community

Another weekend...Another project!

So this week I was super inspired by the Microsoft's Fluent UI and came up with this little project:

[97Palettes.com] (https://www.97Palettes.com)

I also got some heavy inspiration from FlatUI Colors

My stack for this small project was:
Bulma CSS
SweetAlert JS
Clipboard JS

*Join me...I build little web projects every weekend.*

For this Sunday, here is the project [97Palettes.com] (https://www.97Palettes.com)

Until next weekend...Chao!
Paletro — Bring Command Palette (⌘⇧P) in any Applications
Tags: productivity, sideprojects, tools, mac
Published: 2020-06-21 03:47:13

Hello devs, do you like the efficiency of "Command Palette" function in Sublime or VS Code?

I love it, so I made a small app [Paletro](https://appmakes.io/paletro), which allows you to trigger "Command Palette" in any applications on macOS, such as Xcode, Mail, Draft, Finder, etc.

{% youtube KlvbSXE0YWo %}

Compared with the built-in `cmd+shift+/`, or the Alfred workflow, it offers closer UI and functionality like a command panel, such as themes, auto-complete, command history, rules to exclude / include menu items, themes, extensions, etc.

Please try it for free, any questions, suggestions, or criticisms are welcomed!

[Homepage](https://appmakes.io/paletro)
Generate GitHub Actions Badge from Command Line
Tags: github, cli, javascript
Published: 2020-06-21 03:37:57

---
title: Generate GitHub Actions Badge from Command Line
published: true
description: generate GitHub Actions badge Markdown cod from command line
tags: 
- github
- cli
- JavaScript
//cover_image: https://direct_url_to_image.jpg
---

I've created [github-actions-badge](https://github.com/azu/github-actions-badge).
It generate GitHub Actions badge Markdown cod from command line.

[![Actions Status: test](https://github.com/azu/github-actions-badge/workflows/test/badge.svg)](https://github.com/azu/github-actions-badge/actions?query=workflow%3A"test")

```
[![Actions Status: test](https://github.com/azu/github-actions-badge/workflows/test/badge.svg)](https://github.com/azu/github-actions-badge/actions?query=workflow%3A"test")
```

This badge spec is here.

- https://help.github.com/en/actions/automating-your-workflow-with-github-actions/configuring-a-workflow#adding-a-workflow-status-badge-to-your-repository

## Install

Install with [npm](https://www.npmjs.com/):

    npm install github-actions-badge --global

## Usage

    Usage
      $ github-actions-badge
 
    Options
      --format "markdown", "json"
 
    Examples
      # Copy GitHub Action as Markdown format
      $ github-actions-badge | pbcopy

**Example**

```
$ github-actions-badge
[![Actions Status: test](https://github.com/azu/github-actions-badge/workflows/ci/badge.svg)](https://github.com/azu/github-actions-badge/actions?query=workflow%3Aci)
```

## Source

- [azu/github-actions-badge: Generate GitHub Actions badge Markdown code.](https://github.com/azu/github-actions-badge)
Day 20: #100DaysofCode - Practice makes perfect
Tags: ruby, codenewbie, 100daysofcode, womenintech
Published: 2020-06-21 03:31:49

Today I had a rest day. I watched a few videos on Big O Notation and practice the Ruby section on <a href="https://www.hackerrank.com/domains/ruby"> HackerRank </a>

I pushed it to my Github <a href="https://github.com/SincerelyBrittany/coding-challenges/blob/master/HackerRank/ruby/hashes_arrays.rb">here</a>

In addition, I did one coding challenge on <a href="https://www.hackerrank.com/challenges/arrays-ds/problem"> HackerRank</a>.

The question ask: Given an array of  integers, print each element in reverse order as a single line of space-separated integers.

Now the simple way to do this was to use the ``.reverse`` method like the following:

``` 
def reverseArray(a)
   a.reverse
end
```

But that is too easy and it would not really make it a challenge now would it? I decided to use <a href="https://repl.it"> repl.it</a> and work this example out using ``[1,2,3,4,5]`` as my sample array. 

This first thing I wanted to do was iterate over the array like so: 

```
def reverseArray(a)
    a.each_with_index do |num, index|  
    end
end
```

Now essentially you want to change the index of the array, but first its easier to reference it if the numbers are by 1 so lets add the ``(index+1)``

```
def reverseArray(a)
    a.each_with_index do |num, index|  
       puts (index+1)
    end
end
```
which will return your indexes plus one:

```
1
2
3
4
5
```

So if you want to reference all an index in the ``a`` array you might try this: 

```
def reverseArray(a)
    a.each_with_index do |num, index|  
        puts (a[index+1])
    end
end

```

But that wont work because when you think about it the code above is looking for the following in your array:

a[1] // 2
a[2] // 3
a[3] // 4
a[4] // 5
a[5] // N/A 

I had to find a way to reference the index in reverse. I had to think back to what can reverse/negate something. The negative(-) sign helped me with this:

```
def reverseArray(a)
    a.each_with_index do |num, index|  
        puts (a[-(index+1)])
    end
end

```

Which returned the following: 

```
5
4
3
2
1
```
Look at that, I returned a reversed array. 

Next, using the array review I accomplished on HackerRank, I was able to complete this challenge. I knew that the ``.push()`` method adds new items to the end of an array, and returns the new length. I needed to push the ``a`` array into a new_array so that it could be returned, like so:

```
def reverseArray(a)
  new_array = []
    a.each_with_index do |num, index|  
        new_array.push(a[-(index+1)])
    end
    return new_array
end
```

This took me a hour and a half and I do not want people who read this to think this was simple. I am a code newbie and although I was able to figure this code out, it was not easy. Keep that in mind as you code. It may take hours, but you will get it and feel great when you accomplish something you never thought was possible.

<center> Happy Saturday! 

Song of the Day </center>

{% soundcloud https://soundcloud.com/jordan-rakei/goodbyes %}
ทบทวน JavaScript สมัยใหม่ var let const
Tags: javascript, es6, thai
Published: 2020-06-21 02:24:38

ปกติเวลาประกาศตัวแปรจะใช้ var ตามด้วยชื่อตัวแปร เช่น
```js
var myName = "A";
```
แต่ JavaScript สมัยใหม่ นิยมใช้ let และ const
let จะใช้กับตัวแปรที่สามารถเปลี่ยนค่าได้
const จะใช้กับตัวแปรคงที่ (ไม่สามารถเปลี่ยนค่าได้) เช่น
```js
const myName = "A";
myName = "B";
console.log(myName);
```
ผลลัพธ์คือ `Error` เพราะตัวแปรที่เป็น const จะไม่สามารถเปลี่ยนแปลงค่าได้
แต่ถ้าเป็น let สามารถเปลี่นรแปลงค่าได้
```js
let myName = "A";
myName = "B";
console.log(myName);
```
ผลลัพธ์คือ `B`
Longest substring without repeating characters, solving Google interview question.
Tags: javascript, computerscience, career, tutorial
Published: 2020-06-21 02:03:35

Question : Given a string, find the length of the longest substring without repeating characters.

Eg : Input = "abcabcbb"    Output = 3, Since "abc" is longest substring without repeating characters. 

From the question it self, we can say that we need some sort of data structure that can keep track of unique characters. 

This paves the way towards using <strong>Set</strong> 

Now how to parse the string ? Notice that question asks for "substring".

<strong>If question asks for any sort of substring releated, try solving it with two pointer appraoch</strong>

<h2>Two Pointer approach</h2>

1 > This approach is simple and intuitive, for this question we will keep two pointer, left and right. 
2 > We shall initialize left and right to 0.
3 > Move the right pointer by 1, and add the corresponding character to the set.
4 > If character is already present in the set then remove the character at left pointer and move the left pointer by 1.
5 > Keep on doing this till right pointer reaches the end of string. 

The code is really simple and intutive : 

```javascript 
var lengthOfLongestSubstring = function(s) {
    let left = 0;
    let right = 0;
    let max = 0;
    let set = new Set();
    while(right<s.length){
        if(set.has(s[right])){
            set.delete(s[left]);
            left++;
        }else{
            set.add(s[right]);
            right++;
            max = Math.max(max,set.size);
        }
    }
    return max;
};
```

That's it ! Hope you liked my explanation :) 

Cracking the interviews is easy if we can see the hidden patterns :P

github : https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/problems/longestSubstringwithUniqueCharacters.js
Question about deployment.
Tags: react, node, help
Published: 2020-06-21 01:49:23

Hi Dev community,

I am currently creating my portfolio site with React.js, Node.js(express), and postgreSQL. This will be my first ever website/web app which will be deployed, since all my others are for school projects. I can't find any comprehensive tutorials about how to deploy, specifically to Google Cloud (since my database is hosted there I want to keep everything in one place). I was wondering if anyone could point me in the right direction for any tutorials or walkthroughs. 

Thanks!
Invisible Yet Focusable
Tags: css, a11y
Published: 2020-06-21 01:25:57

---
title: Invisible Yet Focusable
published: true
description: 
tags: css, a11y
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sg7a2gbzrur551oiic4z.png
---

These two mixins are one of my favorites. Flexible and useful for creating accessible interfaces.

```scss
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
@mixin screen-reader-only() {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@mixin undo-screen-reader-only($position: unset) {
  position: $position;
  opacity: 1;
  pointer-events: auto;
}
```

They are quite handy when hiding something visually.

By using mixins rather than classes we can keep working in pure CSS when showing/hiding the elements instead of reaching for JS to toggle classes.


Another benefit these mixins have (over `display:none` and `visibility:hidden`) is that the element can still receive focus, and when it does, we can undo the mixin to show the element. Again, no JS needed. In the cards below, try pressing Shift+Tab to jump to the play button on the previous card.

{% codepen https://codepen.io/tryggvigy/pen/vYLxKjP default-tab=result %}
Coming out shouldn’t be a thing in 2020
Tags: devpride
Published: 2020-06-21 01:23:00

I’ve been living by myself for around 6 years now and as an introvert, I don’t usually talk about my feelings (or any other stuff), but recently I came out to my mom.

I used to struggle a lot about why I like what I like and my “straight” friends (at that moment) were always making jokes about gay people and things like that, so because of that I started pretending to be what others wanted me to be.

5 years ago a met a lovely young man who taught a great lesson and made me realize that what I was feeling was right despite what others think of me, so since then I started accepting my self.

When I first came out was to my friends in the city I live, I guess I started with them because I though it wasn’t going to be that hard for them, and thankfully I was right, but as I said at the beginning, I came out to my mom and the story went a bit different.

It’s hard to grow in a society that tells you EVERYWHERE that if you don’t fit in their “traditional role model” you are wrong and they are right. _I didn’t choose to be gay, but now I’m choosing to be happy and proud of myself._
Rock paper scissors game using python
Tags: python, beginners, tutorial, codenewbie
Published: 2020-06-21 00:37:58

Hello,
Today we will make Rock paper scissors game using python.
First, we will import random and define a new function that Take all the possibilities in the game.
```python
import random
print("welcome") 
chars = "RPS"
def rps(player1,player2):
    if player1 == "R" and player2 == "P":
        return "computer won!!"
    elif player1 == "P" and player2 == "R":
        return "player1 won!!"
    elif player1 == "P" and player2 == "S":
        return "computer won!!"
    elif player1 == "S" and player2 == "P":
        return "player1 won!!"
    elif player1 == "R" and player2 == "S":
        return "player1 won!!"
    elif player1 == "S" and player2 == "P":
        return "computer won!!"
    elif player1 not in chars:
        return "wrong input"
    elif player1 == player2:
        return "tie"
```
Second, we will make a new variable and assign it to **True** then we will make a while loop, inside the loop we will assign two new variables ,
the last thing that we call the function and print it .
```python
run = True
while run:
       player1 = input("R for rock ,P for Paper,S for scissors : \n")
    player2 = random.choice(chars)
    print(rps(player1,player2))
```
the final code:
```python
import random
print("welcome") 
chars = "RPS"
def rps(player1,player2):
    if player1 == "R" and player2 == "P":
        return "computer won!!"
    elif player1 == "P" and player2 == "R":
        return "player1 won!!"
    elif player1 == "P" and player2 == "S":
        return "computer won!!"
    elif player1 == "S" and player2 == "P":
        return "player1 won!!"
    elif player1 == "R" and player2 == "S":
        return "player1 won!!"
    elif player1 == "S" and player2 == "P":
        return "computer won!!"
    elif player1 not in chars:
        return "wrong input"
    elif player1 == player2:
        return "tie"
run = True
while run:
    player1 = input("R for rock ,P for Paper,S for scissors : \n")
    player2 = random.choice(chars)
    print(rps(player1,player2))

```
**me playing the game**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bf5pazm1wakmyz49zggg.png)
##**note:** you can only use uppercase characters
you can support me on buy me a coffee :
<a href="https://www.buymeacoffee.com/Oxyoxide" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
twitter:https://twitter.com/Oxy_oxide
buy me a coffee : https://www.buymeacoffee.com/Oxyoxide
Don't forget to follow me.
Thanks for reading.
#019 Docker entrypoint
Tags: docker, devops, tutorial
Published: 2020-06-20 23:15:42

# Introduction

this is part 19 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# entrypoint vs cmd
I found [this article](https://dev.to/lasatadevi/docker-cmd-vs-entrypoint-34e0) on dev.to explain it very well so go and read it and when you fully understand it cameback here.
***
# entrypoint

what I need to focus on right now is entrypoint , why I can use it and how?

basically entrypoint is an shell script that run first when container run , so it's not stick to the image so he does not make a new layer.

entrypoint can be a script in linux is sh (don't worry there is an entire section for linux bash :D in our Journey!)

I am going to get help from the postgres image , they have an big entry point.

go to [this link](https://github.com/docker-library/postgres/blob/master/docker-entrypoint.sh) , and you will see a big script called docker-entrypoint.sh

I will focus on some things that can be combined with docker.

first to be able to run this script we can see that the postgres alpine template they provide contain this.

![script](https://dev-to-uploads.s3.amazonaws.com/i/otcg1wuu56vg2kzt5q95.png)

```bash
COPY docker-entrypoint.sh /usr/local/bin/
```

this path is special path used in linux to put your own bin files or scripts bin is simply an excitable in linux like exe or bat in windows.

```bash
RUN ln -s usr/local/bin/docker-entrypoint.sh /
```
ln -s is mean symbolic link.
>Symbolic links offer a convenient way to organize and share files. They provide quick access to long and confusing directory paths. They are heavily used in linking libraries in Linux.

```bash
ENTRYPOINT ["docker-entrypoint.sh"]
```

this say to Dockerfile here is the script I need to run.

***

# Explain docker-entrypoint.sh

```bash
#!/usr/bin/env bash
```
in this line in the head of the script is meaning that this script is will work on bash (since we have alpine we use sh insted)

```bash
set -Eeo pipefail
```
this is for safety if things go wrong on executing the script immediately exit.
pipefail take in count also if let's say cmd1|cmd2|cmd3 if one of them fail also immediately exit. Don't continue to others.

```bash
exec "$@"
```
this is where the magic it's simply say take all what you pass as argument from terminal and execute it as 1 line , so when it's done running all the script will start to run what we pass as arguments.

***

# End
I know this is hard topic maybe because it's contain lot of shell things , but when we reach the bash section there lot to cover and you will be able to back here and easily understand what is going on.
How do you code review?
Tags: discuss, career, webdev, codereview
Published: 2020-06-21 00:30:59

---
title: How do you code review?
published: true
description: Discussion on how people code review
tags: discuss, career, webdev
//cover_image: https://direct_url_to_image.jpg
---

At some point in your developer career you'll have to do a code review. It seems everyone does it differently. I spend about an hour on a code review. Any more and my brain is toast. I also have a checklist that I run through:

- Are there any style issues?
- Does the code placement make sense?
- Is one method doing too much?
- Are there tests? If not, should there be tests?

How do you perform code reviews? What's worked well for you and what hasn't?
How to make an object immutable in JavaScript?
Tags: javascript
Published: 2020-06-21 00:00:00

---
  title: How to make an object immutable in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Jun 21 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-objects-immutable-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-3d2bb652b8893d0b74d3d549739c1c60.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-objects-immutable-javascript)
  
To make an object read only or immutable you can use the `Object.freeze()` method.

---

Consider this object,

```javascript
const Car = {
  name: "Audi",
  year: "2020",
};
```

We don't want any more properties to be added to this `Car` object.

Let's use the `Object.freeze()` method to achieve this.

```javascript
const Car = {
  name: "Audi",
  year: "2020",
};

// make car object immutable
Object.freeze(Car);
```

Now if you try to add or change any properties in the `Car` object, it will throw an error in strict mode.

```javascript
const Car = {
  name: "Audi",
  year: "2020",
};

// make car object immutable
Object.freeze(Car);

// try to add a new property
Car.engineType = "BS-VI"; // error in strict mode
```

- The `Object.freeze()` method accepts the object to make it immutable as the parameter.
- The method returns the same object which is passed into it.
- Cannot add or modify any properties and methods after calling the method.
- It also restricts any modification to the prototype.

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

---
Responsive Local Club
Tags: css, html
Published: 2020-06-20 23:48:57

To have img auto centered horizontally:

```css
img {
  /* prevent weird alignment with other elements */
  display: block;
  /* keep it centered */
  margin: auto;
}
```

Different width to target for media query:

```css
/* landscape tablet */
@media only screen and (max-width: 960px) {
  .main, header {
    height: auto;
  }
}

/* vertical tablet */
@media only screen and (max-width: 700px) {
  li {
    display: block;
    padding: 0.5rem 0.9rem;
    text-align: center;
  }
}

/* smart phone */
@media only screen and (max-width: 470px) {
  .quote q, .location p {
    font-size: 1.3rem;
  }
}
```
Bash | How to source a file from GitHub?
Tags: bash, source, github
Published: 2020-06-20 23:39:04

When you are invoking BootStrap in HTML file, don't bother to download related files, just paste the link:
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
```

Often, for future convenience, I gather all Bash functions created by myself in a single file named ***funkfunc.sh***, so I can source it whenever I need. But, in different projects, I still have to copy the file respectively. In most cases, the hosts are allowed to access Internet, why don't make an online version of ***funkfunc.sh***?

##Source a file from a public repo in GitHub

For example, I have a public repo: [killDevils/PublicSource](https://github.com/killDevils/PublicSource), there is a file named "bashKit.sh". When I view the "Raw" file of it, the Browser shows me the link: `https://raw.githubusercontent.com/killDevils/PublicSource/master/bashKit.sh`

Now, add a line at the top of .sh file (below shebang tag `#!/bin/bash`):
```bash
source <(curl -s https://raw.githubusercontent.com/killDevils/PublicSource/master/bashKit.sh)
```

##Source a file from a ***PRIVATE*** repo in GitHub

First, please read my old post:[GitHub | Download a file from a Private Repository in GitHub](https://dev.to/killdevils/github-download-a-file-from-a-private-repository-in-github-869), get to know how to generate the link we need.

For example, The link I got is `https://1234abc45678cde6543edca@raw.githubusercontent.com/killDevils/PrivateRepo/master/funkfunc.sh`

Now, add a line at the top of .sh file (below shebang tag `#!/bin/bash`):
```bash
source <(curl -s https://1234abc45678cde6543edca@raw.githubusercontent.com/killDevils/PrivateRepo/master/funkfunc.sh)
```
#🍻
Hope this would help! Cheers!
Hello, DEV.to!
Tags: react, javascript, css, node
Published: 2020-06-20 23:15:17

This is my first post. I plan to use the DEV API to extract this data and put it on my personal site. Here goes nothing!!!
#🤞

It's coming along.

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

Here's the desktop:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n52km5vrzxjtynq82bq6.jpg)
Create small ASP.NET Core Docker
Tags: dotnet, docker, fsharp
Published: 2020-06-20 23:10:11

- Create project

```
$ dotnet new webapi --language F# --output src/MyWeb
```

- Create `Dockerfile`

```
FROM mcr.microsoft.com/dotnet/core/sdk:5.0-alpine AS base

WORKDIR /app
COPY src/MyWeb/MyWeb.fsproj src/MyWeb/
RUN dotnet restore src/MyWeb

COPY src/MyWeb src/MyWeb
RUN dotnet publish src/MyWeb \
    -r linux-musl-x64 \
    -c Release \
    -o /out \
    -p:PublishTrimmed=true

FROM mcr.microsoft.com/dotnet/core/runtime-deps:5.0-alpine
WORKDIR /app
COPY --from=base /out ./
CMD ./MyWeb
EXPOSE 80
```

- Build image

```
$ docker build -f Dockerfile  -t wk/my-web .
```

- Check image size

```
$ docker images | grep wk/my-web
wk/my-web    latest     e03dd2b6b198    4 hours ago    72.4MB
```