teleren/devto huggingface dataset:
Avoid COPY . . in Dockerfile
Tags: docker, security
Published: 2021-06-13 06:52:31

## TL;DR
Use `COPY src src`.

## Security Consideration
Refer to [the Sysdig's post](https://sysdig.com/blog/dockerfile-best-practices/#3-3).

`COPY . .` will place credentials in container by default. You will need to configure `.dockerignore` to avoid this. However, managing `.dockerignore` is tedious and easy to make mistake. This is just like `.gitignore`.

Whitelist copying like `COPY src src` and `copy build build` never cause this problem.

## Layer efficiency
The files required by a command are different by step. For example, `npm install` requires only `package.json` and `package-lock.json`. Overwriting them in a later step by `COPY . .` may cause a consistency problem. In addition, not the builder container but only the runner container requires the files under `src` in Node.js, Ruby, Python, and so on with builder pattern. 

## Conclusion
I suggest to use whitelist copying to avoid some security problems. Build time will become shorter as a bonus.
Python's Collections Module: Counter
Tags: python, codenewbie, collections
Published: 2021-06-13 06:40:22

## Introduction

A Counter is a `dict` subclass for counting **hashable** objects → any object which is not mutable. 

It is a collection where elements are stored as dictionary keys and their counts are stored as dictionary values.

```python
#To use it, ofcourse we need to first import it
from collections import Counter
```

## Using Counter

```python
myList = ['k', 'k', 1, 1, 2, 2, 1, 2, 3, 3, 1, 'a']
myString = "CodeBlooded"

# simply pass any iterable
# Counter(iterable) returns a Counter obj
count1 = Counter(myList)
count2 = Counter(myString)

#How does a Counter obj look?
print(count1, count2, sep='\n')

"""Output
Counter({1: 4, 2: 3, 'k': 2, 3: 2, 'a': 1})
Counter({'o': 3, 'd': 3, 'e': 2, 'C': 1, 'B': 1, 'l': 1})
""""
```
💡 As counter is a subclass of dictionary, it has all the methods of the dictionary. 

## `most_common(n)` method

The  `most_common(n)` returns a list of n most common objects along with their respective counts.

```python
from collections import Counter

myList = ['k', 'k', 1, 1, 2, 2, 1, 2, 3, 3, 1, 'a']
myString = "CodeBlooded"

# simply pass any iterable
# Counter(iterable) returns a Counter object
count1 = Counter(myList)
count2 = Counter(myString)


print(count1, count2, sep='\n')

# If n is omitted or None, most_common()
# returns all elements in the counter.
print(count1.most_common(2))
print(count2.most_common(3))

"""Output
Counter({1: 4, 2: 3, 'k': 2, 3: 2, 'a': 1})
Counter({'o': 3, 'd': 3, 'e': 2, 'C': 1, 'B': 1, 'l': 1})
[(1, 4), (2, 3)]
[('o', 3), ('d', 3), ('e', 2)]
"""
```

## Common Patterns with `Counter` 
For a given `Counter` object `c`, 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4a4meg6qwxaaogw16bw.png)

💡 Feel free to fire up your ipython or python shell and try this commands out for better understanding :)

Let's wrap up this post with a problem where Counter is very helpful.
 

## Finding most frequent word using Counter in a given string

```python
from collections import Counter

string = "string with repeated word Jello So what is Jello Who cares what is Jello anyways but Jello must be repeated Jello number of Jello times"

# You can use re.split() for more complex patterns!
words = string.split()
words_count = Counter(words)
print("Most Occurring word is",
      words_count.most_common(1))

"""Output
Most Occurring word is [('Jello', 6)]
"""
```

❓ if you notice, while printing the Counter object - it doesn't maintain the **order** of elements present in the iterable passed. Do you know why?

Try googling or duckduckgoing! I will answer this question in next post 😉
Django Admin Honeypot
Tags: django, github, security, tutorial
Published: 2021-06-13 06:35:34

When talking about Web Application security, I think one of the main page we need to defend at all cost is the webpage admin page. Once a hacker is able to gain access to the admin page, the fear would be the hacker is able to exfiltrate all our user Personal Information (PI). 

There are many propose solution to keep the web app admin pages safe. The propose solutions are:
1) Only allow Admin to access the admin site through Local network or VPN.
2) Separating the domain between normal user and admin user.

But you know what, no matter how you handle securing the web app admin site. There will always be someone who will try to gain access to your website. Why not have a little fun and set up a honeypot for them. What a honeypot you may ask? A simple way of explaining it in layman terms is that its a lure for our hacker to try and attack us.

One package we can use as a honeypot is called [django-admin-honeypot](https://pypi.org/project/django-admin-honeypot/). Its a simple package that will replace the real admin page with a face one and register all IP that try to access the page.

## Installing django-admin-honeypot

Installing django-admin-honeypot is just a simple as :

```
pipenv install django-admin-honeypot
pipenv lock -r > requirements.txt
```

## Configuring the django-admin-honeypot

add `admin_honeypot` in INSTALLED_APP located in settings.py

```python
INSTALLED_APPS = [
    #...

    # Django-admin-honeypot
    'admin_honeypot',
    #...
]
```

## Update Urls for django-admin-honeypot

```python
urlpatterns = [
    path('admin/', include('admin_honeypot.urls', namespace='admin_honeypot')),
    path('secret/', admin.site.urls),
    #       ^-- Change this to anything you like eg:secret
    #...
]
```

## End

With just 3 simple steps we are able to better protect our webapp. But this is not a fool proof method of protecting our app... It is one of the step to better secure our webapp.
Python's Collections Module: Introduction
Tags: python, codenewbie, collections
Published: 2021-06-13 06:12:17

## Introduction

This [module](https://docs.python.org/3/library/collections.html) implements specialized container datatypes providing alternatives to Python’s general purpose built-in containers, `dict, list, set, and tuple.`


## What types does it offer?

 Following are the  most commonly used special container types of collections module,

| Name  |  Purpose |
|--:|---|
|  Counter |  dict subclass for counting hashable objects |
|  OrderedDict | dict subclass that remembers the order entries were added  |
|  defaultdict | dict subclass that calls a factory function to supply missing values  |
| deque  |  list-like container with fast appends and pops on either end |
| namedtuple | factory function for creating tuple subclasses with named fields | 

## And...

We can also implement a custom container type like `OrderedCounter` using the container types provided by collections module.

The next series of posts  will dive deep into the above mentioned container types provided by collections module.

Stay Tuned !
How to use Open Graph
Tags: webdev, html, programming
Published: 2021-06-13 05:51:56

![Open Graph Tag Comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a170echpghkj0p67izy.png)

Now tell me which one more likely to be clicked by a normal user.

![One](https://media.giphy.com/media/2Wf4evHz9Yd7Y8mPNR/giphy-downsized.gif)

First Link, but WHY ??

Because at first glance I got what's in that link and it is more appealing than the second one.

Open graph was originally developed by Facebook and now it is used by Twitter, Pinterest and LinkedIn.

The benefit of Open Graph is simple, it converts any webpage into a social rich object which becomes more attractive on Social Media upon sharing.

### Open Graph Meta Tag

Implementing Open Graph is very simple, You just need to write some meta tag in the head section of an HTML document.
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Open Graph Uses">
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://example.com">
    <meta property="og:image" content="https://ogp.me/logo.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="300">
    <meta property="og:image:height" content="300">
    <meta property="og:image:alt" content="The Open Graph logo">
    <meta property="og:description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">
    <title>Open Graph</title>
</head>
```

You can see the meta property with "og" is the Open Graph Tag.

There are different types of Open Graph Meta Tag which you can use as per your requirement.

Some of the most commonly used meta tags are - 

- og:title
- og:image
- og:url
- og:type
- og:description
- og:locale

Whole List of Tags - [Open Graph Tags](https://ogp.me/)

### Validate the Tags 

- [Facebook](https://developers.facebook.com/tools/debug/)
- [Twitter](https://cards-dev.twitter.com/validator)
- [Pinterest](https://developers.pinterest.com/tools/url-debugger/)

So, if you have any suggestions or feedback let me know in the comment.

Thanks for reading.
JavaScript insert newly created element after another element
Tags: javascript
Published: 2021-06-13 05:37:43

Yesterday we had a look at how you can [insert an element before another element](https://daily-dev-tips.com/posts/javascript-insert-newly-created-element-before-another-element/).

And today, we'll be looking at the after function to insert elements after another element.

## Insert an element after another element

Let's start with an existing element with a unique ID.

```html
<div id="existing">I'm an existing element</div>
```

Let's select this element using its ID in JavaScript.

```js
const el = document.getElementById('existing');
```

And now we can create a new element using the [JavaScript createElement function](https://daily-dev-tips.com/posts/javascript-creating-a-new-element/).

```js
const p = document.createElement('p');
p.textContent = `Hi I'm new here`;

// Insert before the after element
el.after(p);
```

And just like the before function, we can use a simple one-liner to change the text of this after insert.

```js
// Insert element and text
el.after(span, "I'm a new span");
```

You can view this code on Codepen.

{% codepen https://codepen.io/dailydevtips1/pen/NWpBYyq %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Multiple sliding backgrounds with CSS. 
Published: 2021-06-13 05:36:59

I recently made a new landing page for a [windsurfing fitness](https://getwindsurffit.com) program I sell as an e-book. To make a much more simple and a little bit cooler looking image slider I decided to just use 3 images as backgrounds and scroll them in different directions at different speeds. 

The end result makes it look like a big multiple image slider but it's not. 

```
#slide1, #slide2, #slide3 { height: 240px; width: 29549px!important; overflow: hidden; margin: 10px 0px!important; }

#slide1 { animation: slide1 130s linear infinite; }
#slide2 { animation: slide2 110s linear infinite; }
#slide3 { animation: slide3 60s linear infinite; }
```

The images are just setup as backgrounds to the 3 divs. Then we use some keyframes to control the animations.

```
@keyframes slide1 { 0%{ transform: translate3d(0px, 0, 0); } 100%{ transform: translate3d(-3000px, 0, 0); } }
@keyframes slide2 { 0%{ transform: translate3d(-25000px, 0, 0); } 100%{ transform: translate3d(-22000px, 0, 0); } }
@keyframes slide3 { 0%{ transform: translate3d(0px, 0, 0); } 100%{ transform: translate3d(-3000px, 0, 0); } }
```
I made the width of the divs insanely long so if you watch the slides for a long time they don't eventually run off the page. 

Working on other pages on the site now [here](https://getwindsurffit.com/windsurfing-training/), [here](https://getwindsurffit.com/windsurfing/), [here](https://getwindsurffit.com/windsurfer/), [here](https://getwindsurffit.com/foil-board/), [here](https://getwindsurffit.com/wind-direction/). Hope you like!
DEV COMMUNITY BADGE
Tags: android, security, webdev, html
Published: 2021-06-13 05:35:38


<a href="https://dev.to/ammarmukadam">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="Ammar Mukadam's DEV Community Profile" height="30" width="30">
</a>
Rust - Variable Shadowing
Tags: rust, programming, beginners, codenewbie
Published: 2021-06-13 05:15:09

## Variable Shadowing


> Semua materi merupakan rangkuman belajar.
>
> Untuk bacaan yang lebih langkap & update dipersilahkan akses pada
> [The Book](https://doc.rust-lang.org/stable/book/ch03-01-variables-and-mutability.html#shadowing)


Kita dapat membuat ulang sebuah _variable_ dengan nilai yang berbeda,
ini disebut __Shadowing__ pada Rust.

Perlu digarisbawahi ini berbeda dengan mengubah nilai _variable_

__Mutating__
```
fn main() {
  let mut doi = "Rizki";
  println!("Kenalin nih guys, doi gw {}", doi);
  
  doi = "Amel";
  println!("Kenalin nih guys, doi gw {}", doi);
}
```

__Shadowing__
```
fn main() {
  let doi = "Rizki";
  println!("Kenalin nih guys, doi gw {}", doi);
  
  let doi = doi.to_lowercase();;
  println!("Kenalin nih guys, doi gw {}", doi);
}
```

1. Kita tidak perlu `mut` pada _shadowing_
2. Kita tidak perlu menulis `let` pada _mutating_
3. Kita dapat mengubah tipe data pada _shadowing_
    Karena pada dasarnya kita membuat _variable_ baru 
    dengan nama samauntuk menggantikan yang sebelumnya

```
let spaces = "   ";
let spaces = spaces.len();
```

Hal ini untuk menghindari banyaknya _variable_ seperti `spaces`, `spaces_str`, `spaces_len`, dan lainnya.
__apakah mungkin untuk efisiensi alokasi memory?? mungkin, masih belajar juga__

Well, plus dan minus,
Namun demikian feature _shadowing_ pada Rust
pemakaiannya tergantung developer...


Terima kasih.
What is React Native??
Tags: react, reactnative, nativeapps, javascript
Published: 2021-06-13 05:11:07

First and foremost, let me clarify here that I’m not talking about the hybrid apps or web apps that are being wrapped around in a browser or something like that. It’s completely a pure native app that you formally designed using swift or in android using java or kotlin. They are pure apps and they are completely being designed using web skills, i.e. HTML, CSS, and javascript.
So, obviously, the very first question came to your mind is, What is react native?  and in order to understand the react native we have to touch up a little bit on the rest as well. Now, in case you are not aware of the project react. It is a project being designed by Facebook. And in case you are not aware and still don’t believe me that these apps can be really awesome just take out the phone and have a look at the apps like Facebook, Instagram, Airbnb e.t.c, they are completely being designed and up almost switched into the react-native.

Again coming back to the question, what is react and react native??

So, Facebook recently was facing a lot of problems like re-designing their apps and everything, and basically, what I believe the main problem was handling a lot of users as well as to just roll out new features as well. Now just on the twist side node just try to imagine if I gave you a small chunk of the Facebook app which is humungous, which is very big and you have to just re-compile that app, hit just controlled be or command be, just rebuild that app, it’s gone take a lot of time, u can have probably a coffee or can have a nap and still that app is going to be compiled. So Facebook needed something more robust, faster that can handle a lot of traffic as well as can be designed really quickly. And the team at Facebook got started by designing a new completely fresh project which is react. Now, the good part about react is its virtual dom and the virtual dom is really fast and although it is a library, and it’s a kind of very lite weight component that can be injected anywhere. You can use react with PHP, MySQL, Firebase, Mongo DB, or any kind of database you used in your project.

So, now the successor of react is react native. Obviously, it's a framework for building native apps. Now all the things that you learnt in react like components, props, states and other things are used in react native as well. The best part about react native is two, first of all, you don’t have to ever compile your apps, you just hit a reload just like your website and that’s it, you are done making your app and the second part is you don’t have to maintain two separate code base for your application. For example:- let just say I have an application and I have to launch two separate versions of it, obviously iOS version and in android version. It requires two teams out there because simply one team is going to maintain an Android application and one team is going to maintain an iOS application, but in react native, you just have to maintain one single code and that code will produce a native Android app as well as an iOS app.
Rust - Variable
Tags: rust, programming, beginners, codenewbie
Published: 2021-06-13 05:05:50

## Variable


> Semua materi merupakan rangkuman belajar.
> 
> Untuk bacaan yang lebih langkap & update, dipersilahkan akses pada
> [The Book](https://doc.rust-lang.org/stable/book/ch03-01-variables-and-mutability.html#variables-and-mutability)


Variable pada Rust bersifat __immutable__ (tidak dapat dirubah) secara default.

Memiliki 2 keyword _variable_
- let
- const

Penuliasan _variable_ pada Rust mengikuti metode [_snake_case_](https://en.wikipedia.org/wiki/Snake_case).
- menggunakan huruf kecil
- dipisahkan dengan underscore


### Let

```
fn main() {
  let doi = "Rizki";
  println!("Kenalin nih guys, doi gw {}", doi);
  
  doi = "Amel";
  println!("Kenalin nih guys, doi gw {}", doi);
}
```
Sudah disebutkan sebelumnya bahwa _variable_ bersifat __immutable__ secara default.
Ini berarti, bila kita menuliskannya secara normal, maka kita ngga bisa ganti si `doi` ini ya.

Kode di atas akan menghasilkan error `cannot assign twice to immutable variable doi`

Nah, kalau kita ingin bisa mengubah si `doi` ini nanti (menjadikannya __mutable__),
ya kita harus menuliskannya sedari awal, dengan keyword `mut`.

```
fn main() {
  let mut doi = "Rizki";
  println!("Kenalin nih guys, doi gw {}", doi);
  
  doi = "Amel";
  println!("Kenalin nih guys, doi gw {}", doi);
}
```
Seperti contoh di atas, 
bila dari awal bilang "nanti bisa ganti ya",
tidak akan menimbulkan masalah.

Hal ini menjadi penting untuk diantisipasi di compiler, 
agar tidak terjadi di production.
Karena semakin berkembang projek yang sedang kita kerjakan,
maka akan sangat mungkin _variable_ dipakai & diubah pada fungsi yang lain.

Compiler manjamin hal itu tidak akan terjadi,
jika ada `code` yang mencoba mengubah _variable_ yang seharusnya _immutable_,
akan error di compiler.


### Const

Seperti _constant_ pada umumnya,
`const` adalah keyword untuk variable yang __sama sekali tidak bisa diubah__.
Lantas apa bedanya dengan _default_ `let`?

1. Kita tidak dapat menggunakan `mut` pada `const`
2. Kita harus menuliskan tipe data pada `const`
3. `const` dapat dipakai di level scope manapun, termasuk _global scope_
4. `const` hanya dapat diisi dengan constant expression
    Langsung dengan nilainya, 
    tidak dapat diisi dengan hasil dari fungsi atau yang lainnya
    yang berjalan pada _runtime_.

Penamaan _constant_ biasa dengan HURUF BESAR dengan _underscore_
```
const TANGGAL_LAHIR: u32 = 22;
```


Terima kasih.
Using .env in NestJs
Tags: nestjs, javascript, configuration
Published: 2021-06-13 04:49:37

Using the .env file in NestJs can't be easier. All you have to do is this 

```
npm i --save @nestjs/config
```

Go to the app.module.ts file which is the starting module being called. Add add this inside your imports array

```
ConfigModule.forRoot()
```

Create a .env file in the root.

Start accessing your variables using process.env.your-variable-name

Happy programming!!!
Properties of Semiconductors
Published: 2021-06-13 04:24:32



In the previous tutorial, we have seen the [types of semiconductors](https://dev.to/theenggprojects/types-of-semiconductors-5l0) and today we will have a look at the properties of semiconductors:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynciwr72c5vgdib52zrp.png)

#PROPERTIES OF SEMICONDUCTORS:

   * The physical and chemical properties of semiconductors make them capable of designing technological wonders like microchips, transistors, LEDs, solar cells, etc.
   * The [microcontroller](https://www.theengineeringprojects.com/2018/03/introduction-to-microcontrollers.html) used for controlling the operation of space vehicles, trains, robots etc is made up of transistors which are manufactured by semiconductor materials.
   * Semiconductors are smaller in size and possess less weight.
   * Their resistivity is higher than conductors but lesser than insulators.
   * Semiconductors can conduct electricity under preferable conditions or circumstances. This unique property makes it an excellent [material to conduct electricity](https://www.sciencebuddies.org/stem-activities/which-materials-conduct-electricity).
   * Semiconductor devices can display a range of useful properties, such as passing current more easily in one direction than the other. Because the electrical properties of a semiconductor material can be modified by doping.
   * Semiconductors have large thermoelectric power factors making them useful in thermoelectric generators.

#ADVANTAGES OF SEMICONDUCTORS:

   * Semiconductor diode is cheaper as compared to vacuum tubes. Because it does not produce any current in the absence of applied voltage.
   * It has very small interelectrode capacitances and less power consumption.
   * This is very important in high frequency application.
   * Semiconductors are small in size and lighter weight.
   * Semiconductor devices occupy less space on any type of printed circuit board i.e. [Flexible PCB](https://www.theengineeringprojects.com/2018/04/flexible-pcb.html).
   * The semiconductor device does not produce any noise.
   * It has a long life and is robust in construction.
   * Semiconductor devices they have no vacuum deterioration trouble.

#DISADVANTAGES OF SEMICONDUCTORS:

   * Semiconductor devices require low voltage operation as compared to the vacuum tubes.
   * Semiconductor devices cannot handle as more power as ordinary vacuum tubes can do.
   * Semiconductor diode cannot withstand high reverse voltage.
   * It has poor response and has reverse saturation current.
   * In high frequency noise level is higher in semiconductor device.