teleren/devto huggingface dataset:
Jfrog Docker Challenge
Tags: docker, jfrog, challenge
Published: 2021-08-18 07:22:06

> PREREQUISITE: Must have Docker installed (https://docs.docker.com/get-docker/)
> Docker Challenge : https://jfrog.com/docker-challenge/

#Step 1 - LOGIN TO YOUR ENVIRONMENT
Login to the SaaS URL with the JFrog Platform credentials.

#STEP 2 - ADD LOCAL DOCKER REPOSITORY
### Adding a local docker repository that will be used to store your custom docker image you will create in a later step.
* Navigate to the Administration Module. 
Expand the Repositories menu and click on the Repositories menu item.
* Add a new Local Repository with the Docker package type. 
* Enter the Repository Key `docker-dev-local` and
* Keep the rest of the default settings.

#STEP 3 - ADD REMOTE DOCKER REPOSITORY
### Adding a remote repository that will be used to store needed 3rd party images from Docker Hub.
* Click on the Remote tab on the Repositories page and add a new Remote Repository with the Docker package
type. 
* Enter the Repository Key `docker-hub-remote`
* Keep the rest of the default settings.

#Step 4 - ADD VIRTUAL DOCKER REPOSITORY
### Add a virtual docker repository that you will use when creating your custom docker image.
* Click on the Virtual tab on the Repositories page and add a new Virtual Repository with the Docker package
type. 
* Enter the Repository Key `docker` and add the local and remote docker repositories you created in Steps 2
and 3. 
* Select your local repository that you created in Step 2 as the Default Deployment Repository. 
* Keep the
rest of the default settings.

#Step 5 - FORK THE JFROG DOCKER EXAMPLE GITHUB REPO
Fork the JFrog Docker example repo: https://github.com/jfrog/jfrog-docker-repo-simple-example

This repo contains a simple Dockerfile you will use to build your custom image.

#Step 6 - UPDATE THE BASE IMAGE REFERENCE
Clone your forked repository and update the FROM line of the Dockerfile to reference your virtual
docker repository.
```
FROM 
{SERVER_NAME}.jfrog.io/{VIRTUAL_REPO_NAME}/alpine:3.11.5
```
> The SERVER_NAME is the first part of the URL given to you for your environment: https://-
SERVER_NAME.jfrog.io

> The VIRTUAL_REPO_NAME is the name “docker” that you assigned to your virtual repository in Step 4.

#Step 7 - PUSH CUSTOM IMAGE TO YOUR DOCKER REPOSITORY
Log in to your virtual repository, build, tag and push your custom image with the following commands:
```
$ docker login {SERVER_NAME}.jfrog.io
```
```
$ docker build --tag 
{SERVER_NAME}.jfrog.io/{VIRTUAL_REPO_NAME}/my-docker-image:latest .
```
```
$ docker push {SERVER_NAME}.jfrog.io/{VIRTUAL_REPO_NAME}/my-docker-image:latest
```

> You have now successfully pushed your docker image to Jfrog repo

##For the last step, 

* Navigate to the Application Module, expand the Artifactory menu and click the Artifacts menu item. 
* In the Artifact Tree View, expand the docker, the docker-dev-local and the docker-hub-remote repositories to show your new artifacts. 
* Click on your image in your docker-dev-local repository to see its details.

* Submit your screenshot of the completed challenge to https://jfrog.co/tshirt-challenge along
with your shipping information!
What is REST?
Tags: rest
Published: 2021-08-18 07:10:13

First of all, let's explained what REST stands for:

REpresentation
State
Transfer

Which is a fancy way of saying that a server responds to Create, Read, Update, Delete in a standard way. 
It uses the following actions GET, POST, PUT and DELETE to decide which URL to use:
http://example.com/users
http://example.com/users/1

[GET] http://example.com/users
It acts on the entire resource, and get a list of resources
[POST] http://example.com/users
It acts on the entire resource, is used to create a new resource
[GET] http://example.com/users/1
Acts on a single resource, gets the resource with the single ID
[PUT] http://example.com/users/1
Acts on a single resource, updates the resource with the given ID
[DELETE] http://example.com/users/1
Finally the most straighfoward. It acts on a single resource, deletes the resource with the given ID.

While the URLs mentioned are the most common, there can be sligth different details like using users/details/1 or users/update/1 instead.

I hope you find this explanation helpful!
My favorite stack for web applications, and why I use it
Tags: webdev, website, webstack
Published: 2021-08-18 07:04:20

If you are a full stack developer, or just a web developer in general; you might have heard the term "Tech Stack" or just "Stack" in general. Basically, it is a set of technologies that you use to make your web applications. Pretty simple right? 

There are many popular stacks which are used from small startups to big companies. These stacks include but not limited to:
- MERN: MongoDB, Express, React, Node
- MEAN: MongoDB, Express, Angular.js, Node
- LAMP: Linux, Apache, MySQL, PHP
etc.

When **I** make a web application, I want a tech stack that is lightweight, and easy to use/manage. 

I call it the PERP stack (weird name)
- P: Python
- E: (E)nginx
- R: React
- P: PostgreSQL

Since I use Python and TypeScript as my primary languages, I use these for making my applications. On the backend, I use Python Flask (specifically) as my web framework. I use [Ariadne](https://ariadnegraphql.org/) with Flask as I like to use GraphQL instead of REST, whenever possible.

Flask is an unopinionated and lightweight web framework. It comes with the bare essentials, and there are tons of extensions which you can integrate to make your application, which is why I use it instead of a complete web framework like Django.

For the frontend, React is a must for me. I don't like any other frontend frameworks/libraries except React (just my own opinion). With React, I use URQL or Apollo client as the GraphQL client. Also, I forgot to mention that this will all be in TypeScript (because types are OP). UI-wise, I use [Tailwind CSS](https://tailwindcss.com/), and [Headless UI](https://headlessui.dev/) (Tailwind components for React, Vue, etc).

As my database, I leverage SQL over any other type of "main" database, specifically PostgreSQL. Of course, I would use something like Redis for user session and caching. The reason I use SQL is because it provides you with structured tables, so that the data always follows the same format and pattern. Relational functionality is also another pro to it. Foreign keys, joins, etc, are very useful SQL functionalities.

This is basically the set of technologies that I like to use for making my web application. Of course, there might be other better alternatives, but I just use it because I am more comfortable with using these. And it's not that bad. Let me know what tech stack you use for your web application, in the comments below. Hope you enjoyed this post :)
HNG Internship goals.
Tags: django, python, backend, internships
Published: 2021-08-18 07:03:52


This is my second go at HNG and I won't lie I am more scared than receptive towards it this year although I have grown as a software engineer. But then again here goes nothing.

Hi, I am Philip Ireoluwa Okiokio, a software engineer who is interested in building solutions and creating business logic. This is a skill that I developed by using Python as my primary programming language and Django (Django Rest Framework) as the framework I use in building these solutions.

HNG is upon us once more and I would want to use this medium to grow in terms of interpersonal relationships, team management, software engineering and confidence. 

So technical I graduated from UNI on the 14th of August and I have more time on my hands and I want to make the best of it to grow, build an amazing portfolio and honestly get a Job. 

I would have 1 year of experience in Django in October, and I would love to have gotten a Job (Internship or full-time role) by then. So in 8 weeks I should have grown and learnt to build in Public. This was however made possible by  Zuri (https://training.zuri.team) thank you to the facilitators.

Here is a list of tutorials on designing with Figma, version control with GIT, and basic Python programming.

Figma: https://www.youtube.com/watch?v=WhlNnf1711M
GIT: https://www.youtube.com/watch?v=SWYqp7iY_Tc
Python Programming: https://docs.python.org/3/tutorial/


See you in 8 weeks.
Sass Space Generator
Tags: scss, css, sass
Published: 2021-08-18 07:02:29

# Sass Space Generator
In all web project we need deferent spacing class for UI designing like `marign-bottom: 15px` or `padding: 15px` 
This will help you to generate several spacing classes for margin and padding.

Eg: `'mt-0'` , `'pl-5'`

## How to create

```css

$spacing: 0, 5, 10, 15, 20; // Modify this to generate your spacing classes
$unit: px; // Modify this to specify your unit eg: em, pt, %.

$directions:(
  l: left,
  t: top,
  r: right,
  b: bottom,
  v: top,
  h: left
);
@mixin generateSpacing($prop, $short  ) {
   @each $space in $spacing{
    .#{$short}a-#{$space} { #{$prop}: $space + $unit}
    @each $key,$val in $directions{
      .#{$short}#{$key}-#{$space} {
        #{$prop}-#{$val}: $space + $unit;
        @if $key == v {
          #{$prop}-bottom: $space + $unit;
        }
        @if $key == h {
          #{$prop}-right: $space + $unit;
        }
      }
    }
  }
}
@include generateSpacing(padding , p);
@include generateSpacing(margin , m);


```



## How to Use

If you are not using sass on your project, I have included a basic [spacing.css](https://github.com/vineethtrv/sass-spacing-generator/blob/master/spacing.css) on github, you can use this one.
Or else you can copy this code and and generate css using online sass compiler like [SassMeister](https://www.sassmeister.com), [Sass.js](https://sass.js.org). 

  
### The first letter represents the spacing type ( Margin/Padding).

**m** :  margin 

**p** :  padding 

### The second letter represents the direction.
**l**	: left

**r**	: right

**t** 	: top

**b** 	: bottom

**v**	: vertical (top and bottom)

**h**	: horizontal (left and right)

**a**	: all

### The third represents the spacing value (which you can give your own)
For eg: `mb-0`  means margin-bottom: 0;

### Model
This will be the generated spacing class styling examples 

| class | css |
|--|--|
| .ma-0 | `.ma-0 { margin: 0 }`  |
| .mt-0 | `.mt-0 { margin-top: 0 }`  |
| .ml-0 | `.ml-0 { margin-left: 0 }` | 
| .mh-0 | `.mh-0 { margin-left: 0; margin-right: 0 }` |
| .mv-0 | `.mv-0 { margin-top: 0; margin-bottom: 0 }` |
| .pa-5 | `.pa-5 { padding: 5px }`  |
| .pb-5 | `.pt-5 { padding-bottom: 5px }`  |
| .pr-5 | `.pl-5 { padding-right: 5px }` | 
| .ph-5 | `.ph-5 { padding-left: 5px; padding-right: 5px }` |
| .pv-5 | `.pv-5 { padding-top: 5px; padding-bottom: 5px }` |

### Modify Spacing values
you can create your own spacing classes by modify the **`$spacing`** variable

```css
$spacing: 0, 5, 10, 15, 20;
```

### Modify Spacing unit
By modifying the **`$unit`** variable you can specify your unit eg: `em`, `pt`, `%` ...

```css
$unit: px;
```
You don't need --save anymore for NPM installs
Tags: npm, node, javascript
Published: 2021-08-18 06:53:48

If you ever installed an NPM package the following syntax looks very familiar to you:

```bash
npm install --save package_name
```

This was long the golden standard to install a package and save it as a dependency in your project.

Meaning if we didn't specify the `--save` flag, it would only get locally installed and not added to the package.json file.

## NPM evolved

Over time NPM evolved into a huge player in package management, and ever since version 5 of NPM, we no longer need to define this `--save` argument.

Meaning our packages will be saved by default into our package.json file.

I'm thrilled with this addition, as it's very rare to want to install a package that you don't need in your package.json file.

## Installing dev dependencies using NPM

We also used to have the following command to install a package as a dev dependency.

```bash
npm install --save-dev package_name
```

This will place the package in your dev dependencies in the package.json file.

So to recap, the normal install will install our package under the `dependencies`, while the `--save-dev` argument will place them under `devDependencies`.

```js
{
  "name": "my_project",
  "version": "0.0.1",
  "dependencies": {
    "package_name": "^1.0.0",
  },
  "devDependencies": {
    "package_dev_name": "^1.0.0",
  }
}
```

## NPM install additional flags

As we saw, the default install has no flags and will install our dependency. NPM, however gives us some flags to control the options.

- `-P`, '--save-prod`: Package will install as a dependency
- `-D`, `--save-dev`: Package will be installed as dev dependency
- `-O`, `--save-optional`: Package will be installed as an optional dependency
- `--no-save`: Package won't be saved in package.json file

These are the most important flags we can use. However, the only one you frequently use might be the `-D` flag.

Do keep in mind the letter flags are capital sensitive.

So to recap: we don't need to use the `--save` attribute anymore. This is now the default behavior.
We can provide the `-D` flag to save a package as a dev dependency.

Thank you for reading this article. I hope you learned something new today. And thank you, NPM for making this available.

### 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)
HNG 8.0 INTERNSHIP
Published: 2021-08-18 06:52:25

I'm so gratefull previlage and also excited to be in this year's HNG internship.It as being am dream to build a great carrier in tech

HNG Internship is a Large scale virtual internship that has a learning environment that ameliorate or meliorate the tech experience of its interns providing them with real life problems with that production feel experience.

it is a muster of so many tracks such as Product Design, Digital Marketing, Backend, Frontend and Mobile Development.

Admittedly and as a matter of fact , I'm only going to enthrall myself more in Frontend and less backend

To comprehend and grasp much about the Internship visit
https://zuri.team or
https://internship.zuri.team or
https://training.zuri.team

My Goals and aspirations for this internship includes

overtoping my understanding of Specifications
Work in a virtual team
more in my Programming skills
master new tools used in production

Also, you can come up to speed with some technologies used in this internship
HTML/CSS:
 https://www.youtube.com/watch?v=mU6anWqZJcc

NodeJs: 
https://www.youtube.com/watch?v=Oe421EPjeBE

Figma:
 https://butteracademy.com/figma-tutorial-beginners

GIT: 
https://www.edureka.co/blog/git-commands-with-example/

Thanks for reading...
Gastby js deployment to SSH server using Github action.
Tags: serverless, github, gatsby, react
Published: 2021-08-18 06:50:51

This is a simple code snippet that shows how you can deploy you Gatsby.js application to an SSH server using Github actions. 

Create a main.yaml in your .github/workflow
```

name: blog
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy Gatsby site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2.3.1
      
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'
      
      - name: Install Project Dependencies
        run: npm install
      
      - name: Install Gatsby CLI
        run: npm install -g gatsby-cli@2.12.34
      
      - name: Build
        run: gatsby build --prefix-paths
      
      - name: Verify build
        run: ls -la public
      
      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  
          PORT:  
          USERNAME:  
          PASSWORD: 
        with:
          source: "./public"
          target: "/var/www/html/blog"
          strip_components: 2 # this is important






```
AppOps the new frontier of DevOps
Tags: kubernetes, appops, devops, cloud
Published: 2021-08-18 06:48:10

*DevOps* can be evolved to a more App-centric approach. That's what AppOps is and why you should embrace it. Moreover, *Kubernetes* is great but we would like to reduce the complexity by introducing a tool that automates the process and make abstraction possible.

*AppOps* leads to an App-centric approach based on automation and cloud tools (like for reducing the *Kubernetes* complexity or allowing full serverless solution). What technologies can help with doing that?

[My thoughts about why we should focus our #devops process on appdevelopment rather than on technicalities](https://betterprogramming.pub/devops-appops-f096cdbb02ac?sk=54881bda9afd12cf0e92bd9f7bb58350)
Implement Event Sourcing With MongoDB
Tags: mongodb, eventdriven, node, microservices
Published: 2021-08-18 06:43:53

The Event Sourcing approach is an emerging pattern for building new architectures based on microservices. The advantages of this approach are too many to be listed, but I will try to share the most important:

- decoupled systems
- real-time changes (in the meaning that I do not have to wait for - a scheduled job that moves data)
- separation of responsabilities

This approach gained a very huge usage since we moved on to microservices and we need some approach to notify all the architectural parts on data changes.

*It is possible to enable event-sourcing patterns without touching your application codebase?*

My answer is yes, and you will find all the details in this article.

In this article, we will discover in deep what Event Sourcing is and how to implement it by using MESS, a simple tool that connects directly to MongoDB and reacts to data changes. This approach is very similar to what happens with triggers on traditional RDBMS but asynchronous and with a workload that’s outside the system, so there isn’t any overload of the database.


[Read the full tutorial](https://levelup.gitconnected.com/implement-event-sourcing-with-mongodb-1fbf2cc0d155?sk=9ecd8e4d797ae30c78f9a4e0d509b0e3)
[Joke] Bad things about every programming language
Tags: programming, coding
Published: 2021-08-18 06:24:28

This is just a sarcastic post where I rant about the bad sides of every programming language I have tried/used. Please don't be offended, as this just for entertainment purposes.

Let's get started:

**Python**: Slow as hell, no generics or types. I am not Harry Potter, Parseltongue is not for me. Spaces and tabs don't work together well. SNEK!!!

**JavaScript**: My life is `undefined`, every single tutorial on the internet is on JS.

**TypeScript**: Error: Property `sanity` of type `Mind` is undefined.

**Java**: I wish I had a widescreen monitor. JVM taking too much of my RAM. And the error tracebacks are bigger than my p- (rogramming skills)

**C++/C**: I wish pointers didn't exist, and type conversion was easier.

**Rust**: Lifetimes don't make sense. Car-go, car not fly.

**Golang**: No generics, error handling is disgusting. Why use zero values if nil exists? (nevermind, they got generics now.....)

**C#**: Microsoft™ Java. Also, pointers are useless here.

**HTML**: A very good **programming** language.

**CSS**: The only thing I can flex about in my life is a flexbox that I made when I was 12 years old.

I hope you enjoyed this post. Again, please don't take this offensively. A lot of the programming languages on this post are the ones I use, and they are pretty good. I just made the bad things sound funny :)
HTML tags | q
Tags: html, tags, q
Published: 2021-08-18 06:11:24

It is used to **indicate a short inline quotation**. It has an optional `cite` attribute to assign a URL with the source of the citation or in which information about it is expanded.

Normally the browser will render it by inserting the text between quotes, which will be modifiable by CSS using the `quotes` attribute.

Being a short quotation **does not need line breaks**. In that case `<blockquote>` should be used.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q) | [Support](https://caniuse.com/mdn-html_elements_q)
Show/Hide Sign In Signup Forms Using JavaScript | Responsive Login and Signup Form
Tags: html, css, javascript, webdev
Published: 2021-08-18 06:03:59

How to show/hide sign in signup forms using JavaScript, HTML, and CSS?

In this tutorial, i have created a responsive sign up, sign in and password reset forms using HTML, CSS and JavaScript. You can toggle and show/hide forms simply on button clicking.

**This Tutorial covers following topics:**

How to toggle login register form when clicking the button?

How to create a sliding sign in & sign-up form?

How to create a signup form using JavaScript and jQuery?

How to get jQuery latest CDN toggle link?

How to build an animated login and signup form with toggle features?

how to create a responsive login and signup form in HTML CSS and JavaScript?

how to hide elements in jQuery?

**Watch Video Tutorial:**

{% youtube bmUFZcx0Nh8 %}
Debian 11 İçin Static IP Tanımlama
Tags: debian, static, ip
Published: 2021-08-18 05:51:27

Bir etki alanı denetçisi (domain controller) kurmadan önce en önemli adım IP adresinin sabit olması gerekliliğidir. Eğer DHCP ile değişen bir IP'ye sahipseniz ileride etki alanına dahil olan sistemlerde aksaklıklar meydana gelebilir.

Öncelikle aşağıdaki komut ile ağ aygıt adımızı öğrenmemiz gerekmektedir.

```
ip a
```

Bu komut çıktısında 1: , 2:, 3: gibi farklı aygıtlar yer almaktadır. muhtemelen 1. aygıt olarak "lo" yer almakta ve lookback adresini tanımlamaktadır. Büyük bir olasılıkla ağ aygıt adınız 2:'nin yanındaki enp0s3 gibi bir isim olması gerekmektedir. Bu bilgiyi netleştirdikten sonra IP adresini statik hale getirmeye başlayabiliriz.

Kullandığınız herhangi bir editör ile (nano, vim, piko vs.) `/etc/network/interfaces` dosyasında aşağıdaki gibi olan satırı bulup;

```
allow-hotplug enp0s3
iface enp0s3 inet dhcp
```

Bu satırı tamamen silip aşağıdaki gibi düzeltmeniz gerekmektedir.

```
auto enp0s3
iface enp0s3 inet static
 address 192.168.1.67
 netmask 255.255.255.0
 gateway 192.168.1.1
 dns-nameservers 192.168.1.1
```

Bu düzenlemede address yazan yere daha önce alınmamış bir IP adresini yazmanız gerekiyor. Ve tabi ki aynı subnet üzerinde olması gerektiği için gateway adresini de doğru şekilde yazmanız gerekmektedir. DNS adresi olarak da şimdilik modeminizin veya kullandığınız DNS adresini yazabilirsiniz.

Bu adımdan sonra IP adresini temizleyip, networking servisini yeniden başlatmak olacaktır.

```
sudo ip addr flush dev enp0s3
sudo systemctl restart networking.service
```

Bu şekilde IP adresinizi statik hale getirmiş olacaksınız.