teleren/devto huggingface dataset:
Instalasi Vue 3 dengan TailwindCSS
Tags: tailwindcss, vue, javascript
Published: 2021-08-11 15:03:37

Jika belum install vue-cli saya sarankan diinstall terlebih dahulu menggunakan command.
```
yarn global add @vue/cli
# atau
npm install -g @vue/cli
```
setelah itu kita mulai install boilerplate(semacam template) vue
```
vue create example-vue
```
Nanti akan ada beberapa opsi, kalian tinggal baca2 saja lalu pencet enter. (kalau kalian bingung gatau mau milih apaan,  tinggal pilih pilihan yang tulisannya default ajah)

setelah itu install tailwind
```
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

Jalankan command berikut maka akan muncul file bernama `tailwind.config.js` dan `postcss.config.css`

```
npx tailwindcss init -p
```

Buka file tailwind.config.js dan ganti degan
```
  module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
```

Setelah itu buat file bernama index.css di folder src dan tambahkan 3 line berikut ke file css tersebut
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Kaitkan file index.css dengan main.js
```
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
```


Sumber: 
https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin
VS Code Shortcuts
Tags: beginners, firstyearincode, vscode, html
Published: 2021-08-11 15:02:04

I remember starting out with HTML and hating when I had to code a list.

```html
<ul>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <!-- And so on... -->
</ul>
```

Though you could use copy and paste I couldn't imagine that developers would use such a slow method when it is their passion to make software more efficient. So I did some research and here are 3 of the shortcuts I came across that I now use everyday.
<br></br>

## Copy the Line Without "Ctrl (Windows)/Command (Mac) + C"

You can copy a line of code without having to highlight, copy, and paste. Put your cursor on the line of code you want to copy, hold Shift + Alt/Option and press the down or up arrow key if you need to copy the line above or below. It looks like this:

![Gif Of A Line Of Code Being Copied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo98vpbxdpnqrpbt9gbp.gif)
<br></br>

## Edit Multiple Lines at Once

What if you needed to change that list of questions to now be a list of answers? Instead of highlighting line by line you can now select multiple lines by holding Alt (Windows)/Option (Mac):

![Gif Of Multi Line Editing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3sa5ji4j6vzm75jzfhb.gif)
<br></br>

## Use Emmet Abbreviations

So I've made my list, but now I realize that they all need an id if I want to be able to manipulate them individually in Javascript. IDs have to be unique. Do I need to edit line by line? What if there were 100 of these?

This issue could have been prevented using Emmet, a tool built into VS Code (and a lot of other code editors) that includes a ton of code shortcuts for some basic languages. The shortcut that would solve my problem looks like this:

![Emmet Abbreviation Example Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qllw2mmtrlvlvi5v9cvg.gif)

Now that first line looks a bit insane:

```
ul>li#question${Question}*5
```

Let me break it down:
- "ul": Letting Emmet know I want an unordered list
<br></br>

- ">": This is a "child" signifier. Whatever element follows will be the child of the ul.
<br></br>

- "li": I want a li element inside the ul.
<br></br>

- "#": The symbol for the id attribute (like in CSS) the text that follows is the value of id. So #question is id="question".
<br></br>

- "$": This is tells Emmet "I want this numbered". By default it starts with 1.
<br></br>

- "{}": This is a "text" signifier. This will add text to the nearest element.
<br></br>

- "*(number)": This is a "multiplication" signifier. This tells Emmet you want the current element repeated "number" of times. We could replace the 5 in the example with a 20 if we had 20 questions.

For more Emmet Abbreviations you can visit [here](https://docs.emmet.io/abbreviations/syntax/).

Hopefully these can help you speed up your coding a little. If you have any questions about Emmet feel free to comment below. I'm happy to help.
How to find all the distinct values of a field across your documents in MongoDB using the distinct aggregation method
Tags: mongodb
Published: 2021-08-11 18:16:47

---
title: How to find all the distinct values of a field across your documents in MongoDB using the distinct aggregation method
published: true
date: 2021-08-11 15:00:00 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/how-to-find-all-the-distinct-values-of-a-field-across-your-documents-in-mongodb-using-the-distinct-aggregation-method/
series: "Small Bytes of MongoDB"
---
For a full overview of MongoDB and all my posts on it, check out my [overiew](https://donaldfeury.xyz/introduction-to-mongodb).

If you want to find out all the different values for a field across all the documents in a collection, you can use the ready-made `distinct` aggregation method to find that out.

With the given data in a collection called `podcasts`:

```
{
	{
		"name": "Tech Over Tea",
		"episodeName": "#75 Welcome Our Hacker Neko Waifu | Cyan Nyan",
		"dateAired": ISODate("2021-08-02"),
		"listenedTo": true,
	},
	{
		"name": "Tech Over Tea",
		"episodeName": "Neckbeards Anonymous - Tech Over Tea #20 - feat Donald Feury",
		"dateAired": ISODate("2020-07-13"),
		"listenedTo": true
	},
	{
		"name": "Tech Over Tea",
		"episodeName": "#34 The Return Of The Clones - feat Bryan Jenks",
		"dateAired": ISODate("2020-10-19"),
		"listenedTo": false
	}
}

```

If you run the following command:

```
db.podcasts.distinct("episodeName")

```

The result will be:

```
[
	"#75 Welcome Our Hacker Neko Waifu | Cyan Nyan",
	"Neckbeards Anonymous - Tech Over Tea #20 - feat Donald Feury",
	"#34 The Return Of The Clones - feat Bryan Jenks"
]

```

Notice that the result is all the different values for the field `episodeName`.

You can also do the same on a query result:

```
db.podcasts.distinct("dateAired", {listenedTo: true})

```

Will return:

```
[ISODate("2021-08-02"),ISODate("2020-07-13")]

```
Hack Reactor Week 1 Recap
Published: 2021-08-11 14:57:06

Last Saturday marks the last day of my first week at HR. It was a pleasant first week. We spent the first two days reviewing key concepts covered at pre-course by rewriting some recursion problems as well as underscore methods. We then started our four day sprint on class patterns and data structures. At the end of day 2, we had a self-assessment(SA) on the review material. The SA wasn't a very hard problem but was challenging to finish and pass all the tests within the one hour period allotted to us. If we could not pass the tests we can try to finish the SA within the next day. On day 3 of the week, I learned about five different class styles including functional, functional-shared, prototypal, pseudoclassical, and ES6. The sprint was relatively straightforward; we had to implement data structures such as stack and queue and write both of them in all 5 class patterns. On day 5, we started a sprint on writing different data structures such as linked lists, trees, hash tables, sets, graphs, and binary search trees. This was a tougher sprint than the previous two because we had to understand each data structure and implement the key methods to them. The week ended with a self-assessment where we have to implement another method to the tree. This SA was more challenging to me because I was unsure as to how I should approach the problem. In the end even though I solved the problem, I overcomplicated it an implement an algorithm that took double the time than the most efficient solution. All in all, week one was a great experience. I really liked the format of HR where we spend a lot of time pair programming and discovering the content for ourselves. Being a fresh graduate from college, it was definitely a transition to get used to. I enjoy being able to bounce ideas off of my partners and learn alongside people who have the same goal of being a software engineer.
Rails redirect user to the previous page after signup or login
Tags: ruby, rails, devise, code
Published: 2021-08-11 14:34:16

#### Let's hit the ball, After working on a subscription platform for a while I realized new user's who wanted to pay for service's on the go have to sign up but after signup, Devise redirect the user to the root page, user's will have to look up what they wanted all over again.

devise allows us to override most of the implementation, 
we can create a registration controller.

```
class Users::RegistrationsController < Devise::RegistrationsController



 protected


  def after_sign_up_path_for(resource)
     url = session[:fall_back_url]
       session[:fall_back_url] = nil
      if current_user && url
        url
      end
  end
end
```

And inside controller methods we might what to save user's url, we'll save it an session `fall_back_url`

```
def show
    if !current_user
      session[:fall_back_url] = request.url
    end
end

```
Form Request Validation in Laravel API’s
Published: 2021-08-11 14:27:21

When we write API’s in Laravel and use Form Requests to validate the requests, the default Laravel behavior is to throw Validation Exception ( \Illuminate\Validation\ValidationException ) and redirect the user to the previous page. This redirect Url can be configured as well if we want to. As a result of it, we see a response with 200 status code, and the response body contains big data set comprised of HTML, Javascript and CSS i.e. a complete HTML page is sent as a response because of the redirection.

To get a proper failure response with correct status code and error messages, we have the following options.

##First Method
Inside our FormRequest class, we can override withValidator function. This withValidator function takes Validator Instance <mark>(\Illuminate\Contracts\Validation\Validator)</mark> as an input argument. Validator object has fails method available. We can explicitly check for the failure of our validation and can send an appropriate error message with the correct HTTP Status Code.
![Schema](https://contrivesol.com/wp-content/uploads/2021/01/FirstMethod.png)

##Second Method
Inside our FormRequest class, we can override failedValidation function. This failedValidation function takes Validator Instance <mark>(\Illuminate\Contracts\Validation\Validator)</mark> as an input argument. Inside this method, we can throw Validation Exception <mark>(\Illuminate\Validation\ValidationException)</mark>
![Schema](https://contrivesol.com/wp-content/uploads/2021/01/SecondMethod-768x193.png)

##Third Method
Laravel handles all the exceptions in App\Exceptions\Handler class for us. Here inside the register method, we can capture the Validation Exception thrown by Laravel in case of Validation Failures and can send an appropriate response back to the API consumer.
![Schema](https://contrivesol.com/wp-content/uploads/2021/01/ThirdMethod.png)

[Want to Discuss More? Contact Us](https://contrivesol.com/contact-us/)
EXTENSION FOR CREATING A CHAT ON A SITE WITH WORDPRESS PLATFORM
Tags: wordpress, chat
Published: 2021-08-11 14:23:14

The technical opportunity to ask certain questions or get an online consultation on a topic of interest to the user, presented on the Internet resource he is visiting, is today quite widely in demand among the owners of commercial sites. And if the portal is developed on the wordpress platform, the [user chat plugin for WordPress](https://imbachat.com/en/wordpress-chat)  (a small software extension) can be installed independently. It requires:

* Download ImbaChat WordPress CMS plugin from the official website of the developers.
* Unpack and install the file in the already active WordPress admin panel.
* Go through a little registration and run the downloaded extension.
* In case of problems with the launch, you must contact the technical support service for developers. An online specialist will help you make the necessary adjustments in the computer settings.

## ImbaChat technical capabilities
After installing the extension, the site administrator himself chooses the chat format that will be activated on his Internet resource. The choice of technical capabilities of the WordPress user chat plugin is impressive, for example:

* Classic communication between a site visitor and an administrator using text messages.
* Create a WordPress group chat for a specific group of users with the ability to add new or remove existing participants.
* Chat for one-to-one communication between two users.
* At the same time, using ImbaChat, communication can be carried out not only by receiving and sending messages. It is possible to use online audio and video format. You can get acquainted with more complete information about the plugin using the website of its developers and distributors.
The state of a modern repo
Tags: devops, opensource, architecture, discuss
Published: 2021-08-11 14:01:03

## Background

During the years I have seen many tools and technologies both rise and fall, both good and bad attempts on solving different problems in and around development.

In my early years source control wasn't even a thing, issues was tracked by pen and paper and a release was something that you as a developer created on your own machine. :P

Much time has passed since then, and looking back at this, it's easy to see that we are in a much better place today, with modern tools and services like GitHub, that offers a complete package for what you need.


## The problem

With the advent of toolchains and build pipelines, among other things, we have had a need to save configuration for a lot of stuff along with the actual code in our repos.

On the whole, I think this a good thing, as the possibility to discuss and change configuration, along with what tools to use is much more in the open nowadays.

But, what I dislike is that the root of a repo is a free-for-all to save configuration files in.

Just take a small peek into the [Forem repo](https://github.com/forem/forem) for dev.to, to get a hint of what i mean.

Along with the few folders of actual code, there are countless of files and folders needed for the different tools used for testing / building / deploying.

### Disclaimer
Take note! There is no blame sent in the direction of the 
Forem team, this problem is visible in almost all repos, in some sort or the other.


## Question

What if I happen to be a new coder, eager to test out opensource development for a project i really like?

In my line of work as a professional developer, I often come back to the fact that we manage complexity, and try to present it a something simple.

Not to hide the complexity away for everyone, but instead not to scare away the people that just want to get a grasp of what the system does, and be able to dive into the details when ready.

I just feel that we could do better in some areas when it comes to all the configuration-files as well, can't we?


Happy coding! :)
Wednesday Links - Edition 2021-08-11
Tags: java, jvm, postgres, docker
Published: 2021-08-11 13:17:27

Introducing JfrUnit 1.0.0.Alpha1 (3 min read)✈️
https://www.morling.dev/blog/introducing-jfrunit-1-0-0-alpha1

Introducing JDKMon: A New Tool to Detect and Update JDKs (2 min read)🖥️
https://www.infoq.com/news/2021/08/jdkmon-java

ShellCheck - finds bugs in your shell scripts (30 sec)✔️
https://www.shellcheck.net

Postgres Full-Text Search: A Search Engine in a Database (9 min read)🔎
https://blog.crunchydata.com/blog/postgres-full-text-search-a-search-engine-in-a-database

No need to hate Java default methods (6 min read)🛀
https://mikemybytes.com/2021/08/05/no-need-to-hate-java-default-methods

Testcontainers 1.16.0 release (4 min read)✨
https://www.atomicjar.com/2021/07/testcontainers-1-16-0-release

Overview of hardened container base images (5 min read)📦
https://blog.codecentric.de/en/2021/08/overview-of-hardened-container-base-images

AMA About the Java Language — Brian Goetz and Nicolai Parlog (1h)💬
https://www.youtube.com/watch?v=9si7gK94gLo

The 2021 Stack Overflow Developer Survey is here! (2 min read)📋
https://stackoverflow.blog/2021/08/02/2021-stack-overflow-developer-survey-results

Java 17's Enhanced Pseudo-Random Number Generators (7 min read)🔢
https://mbien.dev/blog/entry/enhanced-pseudo-random-number-generators

Kotlin Clean Architecture Backend (~10min read)🧹
https://github.com/ESchouten/CleanArchitecture
Things that to know when accepting an order in any freelancing Platform
Tags: fiverr
Published: 2021-08-11 13:33:17

I have lost like 2-3 gig offers due a mistake i made on Fiverr by not creating an offer in a DM between me and my clients.![Screen Shot 2021-08-11 at 2.30.25 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv4waktfmq402p84yq59.png)
If you don't create an offer you're at risking the offer. 
So create an offer to show
Khiladi 420 Matka | Sona Matka 420 | Matka 420 Target
Published: 2021-08-11 13:32:46

Good Post, I am a big believer in posting comments on sites to let the blog writers know that they’ve added something advantageous to the world wide web <a href="http://sattamatkaw2m.in/">satta matka</a> and <a href="http://sattamatkaw2m.in/">indian matka</a> and <a href="http://sattamatkaw2m.in/">fix matka number</a> and <a href="http://sattamatka420.in/">matka 420</a>
Django Send an Email For Password Reset
Published: 2021-08-11 13:31:40

 


Its obvious to forget your password. That is the reason behind the "forgotten password" link on any authentication system. When using Django, you just need less than 20 lines of code, and you are done. After building your application, then forgotten passwords should be among the last things to work on.

The process requires four templates:

Login.html: This is the login page that has a link directing the user to the second page:

Password_reset.html: 
The HTML file contains an empty input to enter your valid email upon which a link will be sent.

Password_reset_done: 
The templates contain information telling the user that the link has been sent to the email.

Password_reset_confirm: 
This is where you are directed when the user clicks on a link sent to the email. It opens a page where you are allowed to change your password.

Password_reset_complete: 
After submitting your changes, this page should open up with a new link directing you back to login.

Make sure you link up the pages in this order. You can decide to use the internal form or design your form. But Django form becomes faster and easier.

The next process is to visit the main URL containing minor URLs pages. Include the following templates in that file.
Import the auth. views first.
from Django.contrib.auth import views as auth_views

Then inside urlspatterns[] add
path('password-reset/', auth_views.PasswordResetView.as_view( template_name='users/password_reset.html'), name='password_reset'),

 path('password-reset/done', auth_views.PasswordResetDoneView.as_view(

 template_name='users/password_reset_done.html'), name='password_reset_done'),

 path('password-reset-confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(

 template_name='users/password_reset_confirm.html'), name='password_reset_confirm'),

 path('password-reset-complete/', auth_views.PasswordResetView.as_view(

 template_name='users/password_reset_complete.html'), name='password_reset_complete'),

After setting up the following codes, make sure those names like auth_views.PasswordResetConfirmView are as indicated above. Don’t change anything even a single letter, because they are global django keywords.

In the main app settings, work on the email setup to allow Google to easily send SMTP URLs. We need the host, port number, host email, and password. If you are in the development process, ensure you allow fewer applications to access your email. If not, you might receive an error as I did.

Import os

Then at the bottom part->

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER =”your company/ur email as host”
EMAIL_HOST_USER = “Your password”

It is as simple as this. If you receive any errors kindly comment for rectification
Visit my GitHub for the full free code: https://github.com/maniamartial/djangoFullstackBlogApp
JS Constructor Params vs This: Which Do You Use?
Tags: javascript, discuss, codequality, codenewbie
Published: 2021-08-11 13:22:08

I still never *quite* know what to do with JS constructor parameters and functions used in the constructor. I'll explain what I do and my logic behind my reasoning, but I'd like to hear what you all do in the comments. I haven't had much luck really Googling this particular topic so I hope this sheds some light on the subject. 

## This vs Parameters 
Take the example below, would you do it like this:  

```js 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.bio = this.setBio();
  }

  setBio() { 
    // pretend this is more complicated 
    return `Name: ${this.name}, Age: {this.age}`;
  }

  doThing() {
    // some server call that uses name and age 
  }
}
```

Or, would you do: 

```js 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.bio = this.setBio(name, age);
  }

  setBio(name, age) { 
    // again, assume this was complex
    return `Name: ${name}, Age: {age}`;
  }
}
```

So, that's an extremely contrived example, but I think you get the idea. When dealing with constructor helper functions, do you pass in arguments, or just use `this`? Personally, my little rule is: 

> any function using properties inside the constructor uses the constructor parameters, not class properties

And the reason for that is that this technically breaks: 

```js 
class Person {
  constructor(name, age) {
    this.bio = this.setBio();
    this.name = name;
    this.age = age;
  }

  setBio() { 
    // pretend this is more complicated 
    return `Name: ${this.name}, Age: {this.age}`;
  }
}
```

Since we're using class properties, you can't tell from line 3 that `setBio` has to be run *after* `name` and `age` have been set (again, pretend this is a more complicated function). However, using the parameters directly would prevent the order from mattering. 

## Generated on Generated 
Then you can also have situations that require *generated* properties to exist. 

```js 
class Person {
  constructor(name, age) {

    this.name = name;
    this.age = age;
    this.bio = this.setBio(name, age);

    sendEmail(this.bio)
  }

  setBio(name, age) { 
    // pretend this is more complicated 
    return `Name: ${this.name}, Age: {this.age}`;
  }

  sendEmail(bio) { 
    // some AWS ping to send an email
  }
}
``` 

Again, **SUPER** simple example, pretend that `bio` was actually worth a helper function to generate. But what do you do in that situation? I feel silly passing in a `this` property to a function, but if I don't I run into the same issues as before, that it's not clear that `sendEmail` can only be run after `setBio` is generated. And yes, comments or something could clear this up, but I would prefer programmatically safe code. 

## What are your thoughts? 
So that's what I do, what have you come up with? And yes, I know that functional, non-class setups could side step this issue altogether. But I'm specifically looking for your take on class based decisions. Let me know what you think below and as always, happy coding everyone.