teleren/devto huggingface dataset:
Basic Component pada Vue JS
Tags: vue, javascript
Published: 2021-04-12 08:04:23

## **Perkenalan**
> Vue adalah progresif framework javascript yang memungkinkan kalian menulis kode dengan efisien dan cepat dibandingkan tanpa Framework sama sekali, oleh karena itu di Vue JS menerapkan sistem Component. **Note: This article is intended for Indonesians**

<br />

> Di vue js terdapat banyak component seperti: **Component Basic, Component Props, Component Emit, Component Slot, Component Provide, Component Inject**. Artikel ini akan membahas Component Basic pada Vue JS **Note: Pastikan kalian paham tentang Vue dan Javascript Dasar**

<br />

## **Component Basic**
#### 🚀 Konfigurasi pada Vue CLI
<br /> 
1. Pertama kita buat file (Nama.vue) biasanya di simpan pada direktori _src/components/_
<br /> 
```java
// src/components/Nama.vue
<template>
  <h3>
    Ini Dipanggil Dari Component Nama.vue
  </h3>
</template>
```
Kalian bebas menentukan nama filenya. Lalu didalam filenya kalian tuliskan elemen html seperti biasa, seperti pada contoh diatas.
<br />
2.Tentukan dimana kalian akan merender Component tersebut contoh saya ingin render di src/App.vue
```html
<template>
  <div class="container">
    <Nama />
  </div>
</template>

<script>
/* eslint-disable */
import Nama from "path/ke/FileVueKalian"
export default {
  components: {
    Nama,
    'nama-component': Nama, // Jika ingin kebab-case
  },
};
</script>
```
Otomatis elemen `h3` dengan tulisan `Ini Dipanggil Dari Component Nama.vue` akan langsung di render pada File App.vue. Hanya dengan begitu saja kalian sudah bisa membuat Component Dasar pada Vue JS
Which CSS pre-processor? Or just postcss?
Tags: webdev, css, discuss, webperf
Published: 2021-04-12 08:59:19

Coming from [Vite](https://vitejs.dev/) (pronounced `/vit/`), where it does allow SCSS/SASS, but [it believed in future web standards](https://vitejs.dev/guide/features.html#css-pre-processors).

I find this unintuitive.

```css
a {
  & b {
    color: red;
  }
}
```

So, does anyone actually use or prefer postcss? Or rather, what it your favorite compile-to-CSS (maybe, LESS, Stylus), and why?
How to redirect to a URL with Express JS
Published: 2021-04-12 08:54:26

The **res.redirect() function** lets you redirect the user to a different URL by sending an **HTTP response with status 302**. The HTTP client (browser, **superAgent**, etc.) will then "follow" the redirect and send an HTTP request to the new URL as shown below.

**Example:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx8kqbv035k5w9y64c9z.png)

The **res.redirect() function** also lets you specify an HTTP status other than 302. **The 302 status is considered a temporary redirect**, which means search engines will still crawl the existing URL. If you want to indicate the URL has permanently changed, you should send a response with **HTTP status 301**.

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

**Handling POST Requests**
There's some nuances about which status code you should use for POST requests. Strictly speaking, HTTP 301 and 302 are not required to keep the same method and body content when redirecting. If you're redirecting a POST request, you should use HTTP 307 as a replacement for HTTP 302, and HTTP 308 as a replacement for HTTP 301.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvyv7acb0u2kwgmw2ui3.png)
fix CentOS 6 error: YumRepo
Tags: centos, linux
Published: 2021-04-12 08:50:17

Resolution
To fix this problem you edit /etc/yum.repos.d/CentOS-Base.repo and replace all mirrorlist

1.  Go to /etc/yum.repos.d/ directory:
 
     cd /etc/yum.repos.d/

2.  Make copy of original file:

    cp CentOS-Base.repo CentOS-Base.repo.old

3.  Open and edit file with any text editor:

    vi CentOS-Base.repo

4.  Replace mirrorlist‘s 

Replace sections:

[base]
[updates]
[extras]

With following:

```
[base]
name=CentOS-$releasever - Base
# mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os&infra=$infra
# baseurl=http://mirror.centos.org/centos/$releasever/os/$basearch/
baseurl=https://vault.centos.org/6.10/os/$basearch/
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-6

# released updates
[updates]
name=CentOS-$releasever - Updates
# mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=updates&infra=$infra
# baseurl=http://mirror.centos.org/centos/$releasever/updates/$basearch/
baseurl=https://vault.centos.org/6.10/updates/$basearch/
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-6

# additional packages that may be useful
[extras]
name=CentOS-$releasever - Extras
# mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras&infra=$infra
# baseurl=http://mirror.centos.org/centos/$releasever/extras/$basearch/
baseurl=https://vault.centos.org/6.10/extras/$basearch/
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-6
```

5.   Clean yum cache

    yum clean all

6.   Run again yum update command:

    yum update

Now you can successfully update your CentOS 6.
Exciting portfolio page with Next.js, TailwindCSS and Framer Motion
Tags: react, nextjs, tailwindcss, vercel
Published: 2021-04-12 08:21:01

---
title: Exciting portfolio page with Next.js, TailwindCSS and Framer Motion
published: true
description: 
tags: #react #nextjs #tailwind #vercel
cover_image: https://ironsoul.ninja/og-image-03.png
---

Hi there!

I am pleased to let you know that I finally released my personal website (portfolio). It is available via this link - [ironsoul.ninja](https://ironsoul.ninja). It was built using some cool technologies such as Next.js static rendering, TailwindCSS for styling, and dark/light mode, Framer Motion for all animations on the page.

The source code is open and is available on [GitHub](https://github.com/ironsoul0/ironsoul.ninja).

If you are interested in the process of building a page like this, feel free to ask questions! I would be happy to help.
How to use Conditional statement in Javascript
Published: 2021-04-12 08:17:05

**What are conditional statement?** 
A conditional statement control behavior in Javascript and determine whether or not pieces of code can run. Javascript has different type of conditional statements which includes:
If-else statement, and switch.
•	“if” statement: to specify a block of code to be executed, if a specified condition is true.
•	“switch” statement to specify many alternative blocks of code to be executed…

As the most common type of conditional, the ”if” statement only runs if the condition enclosed in parentheses () is truthy.
 
         If (10 > 5) {
	    var outcome = “yes”;
	   }
          OUTPUT
         “yes”

The example above states:
1.	The keyword “if” tells Javascript to start the conditional statement.
2.	(10 > 5) is the condition to test, which in this case is true – 10 is greater than 5.
3.	The part contained inside the curly braces {} is the block of code to run.
4.	Because the condition passes, the variable outcome is assigned the value “yes”

i.	**Else declaration;**
You can extend an “if” statement with an else statement, which adds another block to run when the if conditional doesn’t pass.
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":

     If (hour < 18) {
      greeting = “Good day”;
     } else {
     greeting = “Good evening”;
     }
    OUTPUT
    “Good day”

ii.	**“else if” declaration;**
Use the “else if” statement to specify a new condition if the first condition is false.
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":

         If (time < 10) {
      greeting = "Good morning";
      } else if (time < 20) {
      greeting = "Good day";
      } else {
      greeting = “Good evening”;
      }
    OUTPUT
    “Good morning”


•	**“switch” statement declaration;**
The switch statements is a multiple-choice selection statement. The general form of the switch statement is as follow

    switch( expression ){
    case constant1:
    statement(s);
    break;
    case constant2:
    statement(s);
    break;
    case constant3:
    statement(s);
    break;
    .
    .
    default
    statement(s);
    }

**NOTE:**
else statement cannot be declared without an if statement opening the command line.
You can have multiple if statement for multiple choice of statements. In switch, you only have one expression for the multiple choices.
Some small Css tips #014
Tags: webdev, css, html, beginners
Published: 2021-04-12 08:12:31

---
title: Some small Css tips #014
published: true
description: I try to tweet a small css tip every day. Here is a collection of some of them.
canonical_url: https://since1979.dev/some-small-css-tips-014/
cover_image: https://since1979.dev/wp-content/uploads/2021/04/small-css-tips-014.jpg
tags: webdev, css, html, beginners
---

To continue on my [previous post](https://dev.to/vanaf1979/some-small-css-tips-013-4bk4) here are some more tweets with little Css tips that might help you in your projects. 

### Prevent users from selecting text.
{% twitter 1369988287285387271 %}
{% codepen https://codepen.io/Since1979/pen/jOVvdEd %}
User-select docs: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

--- 

### Css :is()
{% twitter 1370342555490131968 %}
{% codepen https://codepen.io/Since1979/pen/LYbJMEK %}
:is() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

--- 

### Css viewport units.
{% twitter 1371805648938266626 %}
{% codepen https://codepen.io/Since1979/pen/VwmRVmj %}

--- 

### Css logical properties.
{% twitter 1372166615731740677 %}
{% codepen https://codepen.io/Since1979/pen/YzpgOye %}
Css logical properties docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

--- 

### Subscribe and Follow

**[Subscribe to my Youtube channel.](https://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA)**

**[Follow me on Twitter](https://twitter.com/Vanaf1979)**

**Thanks for reading/watching and stay safe**
Cheatsheet Compilation
Tags: webdev, javascript, beginners, productivity
Published: 2021-04-12 07:57:04

Hi everyone 👋

Today I wanted to share with you the Ultimate Cheatsheet Compilation.I hope aspiring/new developers will find this compilation helpful for quick reference whenever needed.

###**1. Git CheatSheet**
![Git CheatSheet](https://res.cloudinary.com/practicaldev/image/fetch/s--YTjkxp9h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwUcp4VoAAEJ6Q%3Fformat%3Djpg%26name%3D4096x4096)

###**2. Git CheatSheet with more details**
![Git CheatSheet](https://res.cloudinary.com/practicaldev/image/fetch/s--Ln36tRe6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwVersUMAE4TQS%3Fformat%3Djpg%26name%3Dmedium)

###**3. Javascript Operator Cheatsheet**
![Javascript Operator](https://res.cloudinary.com/practicaldev/image/fetch/s--NrsgKBpS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwV3GUUwAE1Ybh%3Fformat%3Djpg%26name%3Dlarge)

###**4. Javascript String Cheatsheet**
![Javascript String](https://res.cloudinary.com/practicaldev/image/fetch/s--oSaYKjJI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwWEiHUcAEdzGB%3Fformat%3Djpg%26name%3Dlarge)

###**5. Javascript Date Cheatsheet**
![Javascript Date](https://res.cloudinary.com/practicaldev/image/fetch/s--88Vs9rrJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwWQVdU8AEpzoy%3Fformat%3Djpg%26name%3D4096x4096)

###**6. Javascript Object Cheatsheet**
![Javascript Object Cheatsheet](https://res.cloudinary.com/practicaldev/image/fetch/s--e1mQxvhe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwWhIiUEAAqxN3%3Fformat%3Djpg%26name%3D4096x4096)

###**7. Javascript Array Cheatsheet**
![Javascript Array Cheatsheet](https://res.cloudinary.com/practicaldev/image/fetch/s--fa3q-Vws--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwWwhpVAAA-mEd%3Fformat%3Djpg%26name%3Dlarge)

###**8. Cron Cheatsheet**
![Cron Cheatsheet](https://res.cloudinary.com/practicaldev/image/fetch/s--Zy6ZhsWf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwXGWmU0AANUCj%3Fformat%3Djpg%26name%3D4096x4096)

###**9. HTTP Status Code Cheatsheet**
![HTTP Status Code Cheatsheet](https://res.cloudinary.com/practicaldev/image/fetch/s--Z3GFaue_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwXk1XUEAEXxKX%3Fformat%3Djpg%26name%3D4096x4096)

###**10. Javascript DOM Cheatsheet**
![Javascript DOM Cheatsheet](https://res.cloudinary.com/practicaldev/image/fetch/s--oBCtz_Sc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EfwX7_DU0AA9pCD%3Fformat%3Djpg%26name%3D4096x4096)

I hope you find this blog post useful and keep it handy for quick reference. 

Happy coding and thank you for reading this article!
Kubernetes Storage Backup Discussion
Tags: kubernetes, backup, docker, devops
Published: 2021-04-12 07:55:05

---
title: Kubernetes Storage Backup Discussion
published: true
description: 
tags: kubernetes, backup, docker, devops
//cover_image: https://direct_url_to_image.jpg
---

I would be interested to know how you back up your storage and what tools you use.

In our development environment we use a NFS which is backed up via a cronjob every 4 hours.
MySQL and MongoDB are also backed up.

In the live environment we don't use NFS for many reasons.
Here I ask myself how I can backup the single read write volumes.
I have thought of it this way until now: I shut down the deployment with a cronjob, then mount the storage into a backup image, when that is done the deployment is started again.

How do you do that?
How to create and use Javascript modules? - a very basic example
Tags: javascript, modules, es6
Published: 2021-04-12 07:53:38

Javascript was once used for petty purposes like client side validation. 

Now it has exploded and occupied the territory of server side programming as well.

The introduction of ES6 standards played a huge role in this. 

Until 2015 you couldn't reuse code from another javascript file by importing them.

ES6 introduced modules and then things changed.
Here is a very basic example of how to create and use javascript modules:

https://fullstackdeveloper.guru/2021/04/12/how-to-create-javascript-modules-a-basic-example/
The only food API you'll ever need.
Tags: api, food, postman, testing
Published: 2021-04-12 07:40:44

If you are looking for a way to impress non developers with your knowledge of recipes, food, health have a look at [API-Link](https://spoonacular.com/food-api.)

It is made for development and is really easy to use. You are setup in less than 5 minute and can do a lot even of a free tier:

* Register with Email
* You then Get an API Key
* You can view all the endpoints in the Documentation section
* You can import all the enpoints directly in Postman
* You get about 150 free calls per day

I made a short video about it but was curios what you all think about this API and what Projects you want to make with it. Mine is clear: Cook with what you have in the fridge

https://www.youtube.com/watch?v=F__LzZKbxPs
Apply rubocop one by one
Published: 2021-04-12 07:39:07

---
title: Apply rubocop one by one
published: true
description: 
tags:
---
Use rubocop_auto_corrector

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

[rubocop_auto_corrector v0.4.0をリリースした - くりにっき](https://sue445.hatenablog.com/entry/2020/07/07/235216)
https://rubygems.org/gems/rubocop_auto_corrector/
Top 5 3D web design trends 2020 | 2021
Tags: webdev, webdesign, webdesigninspiration
Published: 2021-04-12 07:30:32

Top 5 3D web design trends 2020 | 2021
Hello guys, Welcome to Dezigner bay.🙂

Today I brought you to the 5 most amazing 3d interactive websites that Every web developer should visit.

Let's have a look.
https://youtu.be/L099UGgxUwQ
Dreams about coding solutions?
Tags: devjournal
Published: 2021-04-12 07:21:10

_This post was originally published on April 12, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

-------------

Good Monday morning. I'm a little tired today. All of my dreams this weekend were about the current problem I'm trying to solve at work in terms of getting scope added to a certain integration.

I feel like even in my sleeping and restful moments where my brain should be recuperating, it's filled with trying to find a solution or at least new ways forward.

It's kind of miraculous. Because even while I was asleep, I was somewhat conscious of my brain branching out in all kinds of different directions.

Well, I'm bent on finding my solution today. This morning, even! I'm visualizing myself wrapping up this section of work and putting it out into the world (fingers crossed)!

I'm interested to see and curious about what today will bring. There are lots of possibilities and as long as I keep making my way forward, I'll come to the solution.

-------------

Pssst! I send weekly newsletters about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here! >>](https://ladies-code-collective.ck.page/e53b5fca44)
What's a Microservice Architecture, Tho?
Published: 2021-04-12 03:12:54

One key value throughout the history of software development has been the effort to decouple components of software programs.  In essence, decoupled software is composed of many independent components which can be added, removed, and reused freely.  But, what are software “components”?  Well, as I’ve discussed in previous blogs, web components are a great example of decoupled components of software which can be added, removed, and reused universally across browsers and across frameworks.  However, web components are really only applicable within front-end web development.  Does there exist something of this nature, but geared toward back-end development?

Enter microservices.  The term “microservice” is a huge buzz-word these days, but not often do people get to see what microservices actually are behind the scenes.  At a high level, a microservice is a tiny application specifying a set of functions which access some remote data source or data sources, and return their data.  This “set of functions” is known as its API, or Application Programming Interface.  Typically, a microservice API will run on a remote web server without a front end, and its functions can be called after obtaining a developer API key.

Before microservices, the vast majority of the web utilized a monolithic architecture.  For each new web application, a new front end, back end, and data source may have had to be created, configured, and carefully deployed within a fragile production environment.  Nowadays, highly decoupled microservices and data sources exist all over the web, and oftentimes all that goes into spinning up a new web application is a static front-end which leverages existing APIs to deliver its dynamic content.

Check out this video I put together on deploying microservice-architected applications using Docker!
{% youtube 2FXew1HqS9c %}
My first thoughts about Angular Material
Tags: angular, javascript, beginners
Published: 2021-04-12 07:10:58

I just had my first bigger project to do and we decided to work with Angular. My partner and I weren't really focused on the design of the app. At one of the first meetings with our coaches they asked us about it and suggested Angular Material. After that meeting we looked it up and decided to use it.

## What is Angular Material?
Angular Material is a UI component library for Angular JS developers. These components can make it easier to create goodlooking web pages and applications. It will help you to have a consistent and modern web design.

## Installing Angular Material
To start with Angular Material you need first to install it. You can do this with Angular CLI's installation schematic by running the following command:
`ng add @angular/material`

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you some questions to determine which features to include.

On the site of Angular Material you have a getting started guide that you can follow. See the link below.
https://material.angular.io/guide/getting-started

## Component
On the site you can also find all the components you can use. With those components you can create easy an consistent and modern site.
If you see the list of the component you can see a little example and a short description. If you go further into a component you see an overview and can look at the code. You have also the API that you need to import. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb5lnuvifygzxwqaln7q.JPG)

In the navbar of the site you can also select a theme for the documentation. Then you see the examples in that theme so you know what to expect.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gopp4l1tjscai6xd8snj.JPG) 

## My thoughts
In the beginning of the project I was excited with Angular Material. The site is clear and you have a nice overview of the things you could use. The installation was also easy.

At first I was figuring out how to import the code. That was also because Angular itself was new for me. But after I figured out how to import the API and found where the code was, it was clear for me. 

I struggled sometimes with changing the colours. Because it works with a theme, the colours are fixed and if I wanted to change it with CSS it wasn't always the easiest. But at the end it worked for me.

So my first thoughts about Angular Material is that it's relatively easy to use. Maybe sometimes you are missing some extra documentation. It's also a more basic design so you can not expect something really fancy in my opinion. But overall it's a good UI component library to start with!