teleren/devto huggingface dataset:
How to make the background of the items inside a box, the background of the page? 
Tags: css, css3, html
Published: 2020-02-05 21:27:36

There is one box in the photo below and there are round circles inside the box.
The background of the box has a wood pattern, but the background of the elements inside the box is transparent(body background).

my case study file:https://jsfiddle.net/xeq2u5L6/1/

How can I do this with css?



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oeaspbnlxszyyjl1ujde.jpg)
Doing the Deep Work of Programming - How to Code 90 minutes a Day Using a Workout Timer
Tags: productivity, beginners, discuss
Published: 2020-02-05 20:49:57

I've been using a tabata timer (used for timing workout intervals and rest periods) for programming for a few months combined with other elements below with good results.

I do 6 sets of 15 minutes each with a 30 second rest in between. This ends up with 90 minutes of coding time per session. Goal is to do at least one session each day first thing in the morning.

Here are the key elements of my current setup:

**01 Block distractions**

I setup my browser to block all distracting sites - including email. You can use browser extensions or desktop apps for this. Most allow you to block certain sites for certain times during the day. So you can set it up once and forget about it.
 
When it comes to distractions I keep this principle in mind: don't try to change yourself, change your environment!

**02 Visualize a specific physical code change**

I start each session with a specific goal in mind that I want to accomplish. At the beginning of each 15 minutes I visualize making a specific code change. For example: implement this form such that when I click 'save' I see these records in the DB). During the 30 second 'rest', I ask myself "Am I on track?".  This question has been useful because there are many times I stray off track by finding something interesting to think about or explore that is not exactly related to the task at hand :) 

**03 Timebox research tasks**

In the event I need to look something up and I find myself in a search engine for more than a minute I set a timer to timebox my 'research'. Same goes with decision making. If I am trying to decide whether to use one tool vs. another, timebox that! These have historically been the biggest time sinks for me in the name of 'research' :)

**04 Continue the flow through breaks or interruptions**

I explicitly write down "todo next" in the code editor or a notebook when I am taking a break for lunch or when I am signing off for the work day.
 
I also try to leave my computer screen on the IDE with the next bit of code highlighted so when I open up my laptop the next day that's the first thing I see.

**05 Reward yourself**

Doing deep work and being focused on the task at hand is not easy. My current reward for finishing a 90 minutes session is getting to explore one or two things I've bookmarked during the session for deeper understanding (thread pulling I call it).

This flow works well for feature development. Slightly different flow is needed for debugging and designing/planning activities.

Hope this is helpful and inspires others looking to add some consistency to their programming habit. 

What techniques do you use to optimize for flow during your programming sessions?
Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS
Tags: angular
Published: 2020-02-05 20:21:15

---
title: Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS
published: true
description: Angular CLI by example
tags: angular
---

Angular CLI is an essential tool for Angular developers. In this post, you'll get started using the latest Angular CLI 9 version, on Windows 10, Linux and macOS, to initialize Angular apps and various artifacts like modules, services, directives, and components, etc.

## What is Angular CLI 9? 🤔

Angular CLI is an official command-line interface utility built by the Angular team to help developers initialize and build Angular projects without dealing with complex tools like webpack. 

It's based on Node.js and available from NPM.

> ✋✋✋ At this time, Angular CLI 9 is the latest pre-release version.


As an example, we'll create a simple car insurance front-end web application. Continue reading the full [tutorial](https://www.techiediaries.com/angular/angular-9-8-cli-commands-install-angular-cli-on-windows-10-linux-and-macos/) 🚀.

> ✋✋✋ This tutorial is also valid for Angular 8.
Golang Maps
Tags: go, beginners
Published: 2020-02-05 19:59:18

In the <a href="https://golang.org">Go</a> programming language there are maps, these have nothing to do with real world maps.

Maps in Golang associates a value to a key, you can see this as a table or set with pairs. A value can be retrieved using the key. This idea comes from <a href="https://en.wikipedia.org/wiki/Hash_table">hash map</a> in computer science.

In a (hash) map, there are pairs of (key,values).  For every value, there is one key. You can map a string to an int like this:

    var m = make(map[string]int)

This create a map (string -> int) and initialises it.

## Example 

In this example we define a mapping of string to int. Then we create one pair and output it. 

```go
package main

import (
    "fmt"
)

func main() {
    var m = make(map[string]int)
    m["Apple"] = 1
    fmt.Println(m["Apple"])
}
```

The program outputs

    $ go run example.go
    1

You can define multiple key,value mappings in your map.

```go
    m["Apple"] = 1
    m["Berry"] = 2
    m["Cherry"] = 3
```

If you want to iterate over the entire map, you can use this for loop:

```go
for key, value := range m {
    fmt.Println("Key:", key, "Value:", value)
}
```

## Other mappings

A map can also be a set of int to string pairs. 

```go
var m = make(map[int]string)
```

In the example below we use that for months:

```go
package main

import (
    "fmt"
)

func main() {
    var m = make(map[int]string)
    m[1] = "January"
    m[2] = "February"
    m[3] = "March"
    for key, value := range m {
        fmt.Println("Key:", key, "Value:", value)
    }
}
```

You can also map int to int, consider this example:

```go
var m = make(map[int]int)
m[1] = 1359
m[2] = 4639       
m[3] = 1234
```

**Related links:**
* <a href="https://golangr.com/maps/">More maps examples</a>
* <a href="https://golangr.com/">Learn Go</a>
Can we implement a Monorepo structure without Yarn Workspaces or Lerna?
Tags: monorepo, lerna, workspaces, reactnative
Published: 2020-02-05 19:56:17

---
title: Can we implement a Monorepo structure without Yarn Workspaces or Lerna?
published: true
description: We can implement a Monorepo structure without Yarn Workspaces or Lerna with the following approach.
tags: Monorepo, Lerna, Workspaces, React Native
---

In order to simplify dependency management, code reuse, and collaboration across teams, many projects have sought out to use the Monorepo structure.

To implement this structure most projects decide either on `Yarn Workspaces` or `Lerna` to accomplish this feat. The difference between the two can be simplified to the fact `Lerna` can do everything `Yarn Workspaces` can including use it as a base, and <a href="https://doppelmutzi.github.io/monorepo-lerna-yarn-workspaces/">provide sophisticated publishing and version management features to even publish projects independently from each other</a>. 

## The Problem

`Yarn Workspaces` has proven to be quite burdensome to maintain when working with React Native due to React Native's assumptions. Overall, as your codebase progress and new updates occur, you might need to update and fix the Monorepo structure. To avoid having this kind of issue, and to also enjoy similar benefits. You could instead structure your Monorepo without `Workspaces`.
 

## How could we structure a Monorepo without `Yarn Workspaces`?

Under the same repository, you could have multiple independent projects linked by installing it via a relative path. Each project or module will have its own `package.json` file which you can create with `yarn init`.


```
- apps
   - app_one
   - app_two
- shared
   - module_one
   - module_two
```

`app_one` and `app_two` can consume the shared module by installing it as follow:


`yarn add file:../../shared/module_one`
 
This will add the following to your package.json 

`"module_one": "file:../../shared/module_one",`


_Note, To avoid reinstalling the same dependencies make sure to declare modules as `peerDependencies` inside your shared modules if you also use them._


This approach has the benefit of being compatible with NPM as well.


## Possible Problems

If your shared modules have external dependencies and for some reason, you install them by running yarn inside `shared/*`, you have to always remember to remove the `node_modules` folder before running your app, else you will have name collisions.


## Conclusion

There is a price to be paid by abstractions. This does not mean abstractions are negative, it only means we should look for simplicity to achieve our goals, else we will die maintaining. I hope this post displayed a simple and less abstracted way to handle `Monorepo` structures.
Semantic versioning for GitHub Actions
Tags: github, git, versioning
Published: 2020-02-05 19:54:58

There are three ways to use a GitHub action in your projects:

1. Use an action that is committed to the same repository that it’s running in
2. Point at an external action using the `org/repo@branch` syntax
3. Point to a tagged docker image

Most people use option 2 - pointing to an external action that’s hosted on GitHub, and the way that most actions recommend that you use them is to point at the `master` branch so that you’re always up to date.

However, GitHub themselves [recommend using semantic versioning](https://help.github.com/en/actions/automating-your-workflow-with-github-actions/about-actions#versioning-your-action) for your actions to provide people with a stable experience. 

> 1. Create a release using semantic versioning (v1.0.9). For more information, see "Creating releases."
> 2. Move the major version tag (v1, v2, etc.) to point to the Git ref of the current release. For more information, see "Git basics - tagging."
> 3. Introduce a new major version tag (v2) for breaking changes that will break existing workflows. For example, changing an action's inputs would be a breaking change.

This is great advice, but it’s is additional effort to update your tag each time you make a new release. This is where the [actions-tagger](https://github.com/marketplace/actions/actions-tagger) action comes in. It’s a GitHub Action for managing GitHub Actions (how meta!)

Any time you tag a new release in a repository that uses `actions-tagger`, it will parse the release version, extract the major version from it and redefine that reference.

This means that if you tag version `v1.0.0` it will automatically tag `v1`. Then when you tag `v1.0.1`, it will change the ref that `v1` points to so that it’s the `sha` from `v1.0.1`. 

Here's an example after tagging `v1.0.0`:

![Tag with v1.0.0](https://dev-to-uploads.s3.amazonaws.com/i/7pgj2rge5ffip03wyeqd.png)


And here's how it looks once I've tagged `v1.0.1`. Notice how the `v1` and `latest` tags now point to the `sha` for `1.0.1` and not `1.0.0`?

![Tag with v1.0.1](https://dev-to-uploads.s3.amazonaws.com/i/o04cd9628mjgrdbhsbc5.png)

Your consumers of your action can point at `v1` safe in the knowledge that they’ll continue to get action updates without any breaking changes. If you need to make breaking changes, tag `v2.0.0` and those that need to upgrade can upgrade. Everyone else can continue using `v1`.

If we followed the common advice of using `@master` as the version, everyone’s workflows would break as soon as you pushed your breaking changes. Using `actions-tagger` we can have all of the benefits of auto-updating actions without any of the risks.
How does your code sound?
Tags: javascript, react, webdev, showdev
Published: 2020-02-05 19:41:55



As a developer, I love listening to music while coding. The orchestral music allows me to focus more on what I do. And one day I noticed my fingers dance on the keyboard by the music rhythm. Like playing the piano. Every word or symbol in the code was written with harmony. And then I thought... how it could sound... The code I write every day?

**And the idea was born.** :star:

Go to live on [soundcode.now.sh](https://soundcode.now.sh), put your code and enjoy how it sounds! :notes:

![soundcode](https://s5.gifyu.com/images/soundcode.gif)


**How it works**

Firstly, we load the sound fonts of the instruments which are used in this little orchestra. When you paste or write your code (or using our example), we parse it using the TypeScript AST parser to individual nodes. Then the composition begins.

**The mood of the code**

By code source, we determine the mood of the code. The more cheerful words in the code, the happier the mood and vice versa. The mood of the code is used to set the musical scale. If happy, a Major will be likely selected, if sad - Minor.

**Chords**

By the code source and with some easy math we choose which chords progression play from the determined musical scale.

**The Melody of the piano**

Each piano note is the TypeScript Token. With some math, we set the note, pitch, duration and time when to play. The special symbols like ,.+-/*, etc are excluded and used in the other instrument

**Other instruments**

Each instrument has its notes. Some just looping the notes of the chord, while others play specific notes by the source code. For example, the Cello always plays the active chord root note, when Harp only plays at the special characters or Chorus at the strings.

You can check the full source code in my GitHub repository [epranka/soundcode](https://github.com/epranka/soundcode)

If you have ideas on how to improve it (new features, bugs and etc...) feel free to share it on the [GitHub Issues](https://github.com/epranka/soundcode/issues).

Follow on [Twitter](https://twitter.com/epranka), [GitHub](https://github.com/epranka), and let’s connect on [LinkedIn](https://linkedin.com/in/epranka)

Feedback and questions are appreciated.
Getting rid of the annoying YouTube pause dialog
Tags: rant, misc, browser, picture
Published: 2020-02-05 20:08:59

---
title: Getting rid of the annoying YouTube pause dialog
published: true
date: 2020-02-05 19:25:07 UTC
tags: rant,misc,browser,picture
canonical_url: https://siderite.dev/blog/getting-rid-of-annoying-youtube-pause-dialog/
---

  Original post: https://siderite.dev/blog/getting-rid-of-annoying-youtube-pause-dialog

  I guess I don't have to tell you about ad blockers and browser extensions that improve YouTube. They are a dime a dozen and bring many features to the habitual YouTube watcher. However there is one particular new YouTube annoyance that you don't really need an extension to get rid of: the dreaded [**Video paused** dialog](https://www.google.com/search?q=video+paused+youtube%22%20target=%22_blank%22%20title=%22%22> "Many solutions out there are self serving, plain wrong or too complicated.").

  To get rid of it is easy: on an interval, check if there is a visible element of a certain type containing a certain text and click its button. While this can be done in simple Javascript, I am lazy, so the script that I am using will first load jQuery, then run a one line function periodically. This code is to be copied and pasted in the Console tab of the browser's development tools, then press Enter.

```
const scr = document.createElement('script');
scr.setAttribute('src','https://code.jquery.com/jquery-3.4.1.min.js');
document.querySelector('head').appendChild(scr);
setInterval(()=> { 
  $('#button:contains(Yes)','yt-confirm-dialog-renderer:visible:contains(Video paused)').click();
},500);
```

It's easy to understand:

- create a script element
- set its source to jQuery
- append it to the page
- execute every 500 milliseconds a code that:
  - finds the element with id _button_ containing the text "Yes"
  - inside an element of type _yt-confirm-dialog-renderer_ which is visible and contains the text "Video paused"
  - click the element

There is an even more comfortable solution, though, that I recommend. You will need a Chrome extension called [cjs](https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en "Custom JavaScript for websites") that loads whatever script you tell it in whatever page you want. It gives you the option to inject jQuery, so all you have to do is write 

```
setInterval(()=> { $('#button:contains(Yes)','yt-confirm-dialog-renderer:visible:contains(Video paused)').click(); },500);
```

 as the script to be executed on YouTube.

![Use CJS to run your own script in any page](https://siderite.dev/Posts/files/RemoveYouTubeAnnoyance_637165275080337772.jpg)

That's it. You're all done.
Types in Golang
Tags: go, beginners
Published: 2020-02-05 19:21:48

<a href="https://golang.org">Golang</a> has a lot of data types. If you programmed in other languages before, you may be familiar with int, float or byte.

Data types can be grouped into 3 types: bool, numeric types and <a href="https://golangr.com/strings/">string</a>

Of numeric types there are a lot!

* int8, int16, int32, int64, int
* uint8, uint16, uint32, uint64, uint
* float32, float64
* complex64, complex128
* byte
* rune

I'll explain some below.


## Integers

In Golang, things work a bit differently. You can't just define an integer int, you have to specify the number of bits: *int8,int16,int32,int64*

Integers by default can have negative values, for positive only you need *uint8, uint16, uint32 or uint64*.

```go
package main

import "fmt"

func main() {  
    var a int = 19
    b := 36
    fmt.Println("a is", a, " b is", b)
}
```

## Floats

For floats, you have float32 and float64. You can define more than one float on one line. Go needs := to assign, not just =. A semicolon at the end of the statement is not required.

```go
package main

import (  
    "fmt"
)

func main() {  
    a, b := 1.5, 8.5
    fmt.Printf("a %f b %f\n", a, b)
}
```

This outputs:

    a 1.500000 b 8.500000

    Program exited.

For less digits after the dot, use %.2f, %.3f etc.

```go
fmt.Printf("a %.2f b %.2f\n", a, b)
```

## Booleans

There's bool, which is True or False. This may be familiar. This is perhaps the only data type which is similar in all programming languages.

In short: only two values are possible, True (1/high) or False (0/low).

```go
a := false
b := true   
fmt.Println("a:", a, "b:", b)
```

**Related links:**
* <a href="https://golangr.com/">Learn Golang</a>
* <a href="https://play.golang.org/">Go playground</a>
How to Proxy HTTP requests?
Published: 2020-02-05 19:19:28

Hello world ✌️,

In this article, I would like to show you how you can proxy HTTP requests with absolutely no coding.

<br>

**GIST:**
The idea is that we going to use **API service** to send an HTTP request through a random proxy server. In this case, there is no **need to maintain proxy servers** on your side.

<br>

For people who prefer watching videos instead of reading, [there is a quick video](https://www.youtube.com/watch?v=wspzajG8g-4) demonstrating how to use the proxy API service.
<br>

<a href="http://www.youtube.com/watch?feature=player_embedded&v=wspzajG8g-4" target="_blank"><img src="http://img.youtube.com/vi/wspzajG8g-4/0.jpg" alt="Ho to proxy HTTP requests"/></a>
<br>


I have chosen to show [proxybot](https://proxybot.io/) service because, In my opinion, it is one of the easiest to use. Additionally, it is possible to create a free account and start using service for free. The actual service usage is pretty simple:
You just need to send an HTTP request with the following URL:
```
https://proxybot.io/api/v1/API_KEY?url=www.your-target-website.com
```


Your request will be sent through a random proxy. There is also a possibility to send your request through proxy servers located in a specific country.
<br>
For example, if you want your request to come from Germany, then you need to append **‘&geolocation_code=de’** URL parm to your request

<br>
```
https://proxybot.io/api/v1/API_KEY?url=www.your-target-website.com&geolocation_code=de
```
<br>

A full list of available geolocations and documentation can be found [here](https://proxybot.io/documentation).

Yes, it is that easy, just sending an HTTP request and stop worrying about searching and maintaining proxy servers manually.

**PS:** Proxybot it just one of the services allowing you to proxy your request. If you are looking for proxy providers here you can find a list with [top proxy providers in 2021](https://dev.to/princepeterhansen/top-7-residential-proxies-providers-31f9 "hand-picked proxy providers").

I hope that this article was useful and you found information that will help you.

Have a nice day ✌️
How do you get familiar with a new codebase?
Tags: discuss, beginners, help
Published: 2020-02-05 19:13:10

I recently started a new gig as a Software Engineer here at DEV. And having changed jobs a few times, one of the more difficult things of starting a new role is getting up to speed with a new codebase.

When learning Software Engineering (school, bootcamps, online tutorials, etc.) you're often starting from scratch or you're building a project where everything is defined upfront. For example, if you have done a Rails tutorial you've likely built a blog with a limited feature set. Decisions made in that tutorial were likely based on a defined scope - build a blog where users can create, edit, and delete articles. And then you're off to the races (shout out to scaffolding).

But like in many fields, this is great...*in theory*. In the "real world", you can often find yourself walking into an established codebase that has been through a lot.

And what ends up happening is you end up finding lots of code that makes you pause and wonder, *"why was this done this way!?"*. Sometimes there's a good answer for that, but it's some historical piece of context that leaves you having to ask someone who has been around longer.

So my questions to you all are:
- How do you get up and running with a new and established codebase?
- What tools do you use, if any?
- What sort of tools do you wish you had to help with this?

I recently came across [Codeflow](https://usecodeflow.com/)(0 affiliation, but it's a solid example) and I have had ideas in the past about building a tool to help onboard Software Engineers to a new codebase.

Lastly, it's worth noting that I realize that in an ideal world things would be clearly documented and kept up to date. This is all assuming the trade-off was made to (more or less) skip detailed documentation of nuances.

**What do you think?**
An introduction from me!
Tags: introductions
Published: 2020-02-05 19:01:46

Hi everyone,

I'm Tuan Nguyen Minh, 21y'o and living in HCM, VietNam.

I am a 4th years student of University of Information Technology and I begin coding from 2016.

My favorite programming languages are Ruby, C#, Kotlin, python, TypeScript.

I am working at a company named [Youthdev](https://youthdev.net/) as a Software Developer. Currently, I'm focusing on improving my algorithms and knowledge about Unix (DevOps).

I join DEV's community because I want to share my experiences to everyone and can learn more things about Tech.

Best regard!!!