teleren/devto huggingface dataset:
How to integrate postcss and webpack
Tags: postcss, webpack, javascript
Published: 2021-10-16 10:30:53

Step by step about how to use postcss & postcss-cli. And then integrate them with webpack from scratch. It will be used when using tailwind.

```
.
├── package.json
├── postcss.config.js
├── src
│   ├── autocomplete.css
│   ├── base.css
│   ├── index.js
│   └── main.css
└── webpack.config.js
```

Source code: https://github.com/ynwd/postcss

Create app dir
```
mkdir postcss && cd postcss
```

Init package:
```
npm init -y
```

Install postcss
```
npm i -D postcss postcss-cli
```

## 
Create css file
```css
/* src/main.css */
@import './base.css';
@import './autocomplete.css';
```

```css
/* src/base.css */
html {
    color: blue;
  }
  
select {
  appearance: none;
}
```

```css
/* src/autocomplete.css */
.autocomplete {
  color: #777;
}
```

## Run postcss cli

run this to see the available commands
```
npx postcss --help
```

compile our existing css files
```
npx postcss src/main.css
```

You will see error messages:
```
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
```

## PostCSS plugins

Install postcss plugin

```
npm i postcss-import autoprefixer cssnano -D
```

- [`postcss-import`](https://github.com/postcss/postcss-import) is used to replace `@import` with actual code.
- [`autoprefixer`](https://github.com/postcss/autoprefixer) is used to parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](https://caniuse.com/). It is recommended by Google and used in Twitter and Alibaba.
- [`cssnano`](https://github.com/cssnano/cssnano) is used to ensure that the final result is as small as possible for a production environment.

Create postcss config
```js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};
```

Compile
```
npx postcss src/main.css
```

It will print
```
html{color:blue}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.autocomplete{color:#777}
```

Add `--dist dist` to write the out put to the file `dist` folder
```
npx postcss src/main.css --dir dist
```

## Webpack integration

Install webpack
```
npm i webpack webpack-cli -D
```

Install webpack loader
```
npm i css-loader mini-css-extract-plugin postcss-loader -D
```

Create webpack config
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
    ],
}

```

create entry point
```js
/* src/index.js */
import "./main.css";
```

compile
```
npx webpack
```
Won Hacktoberfest 2021
Tags: hacktoberfest, github, opensource, programming
Published: 2021-10-16 10:29:25

I'm glad to say I'm in First 50,000 Participants to earn a T-shirt 
from Hacktoberfest and also got Hacktoberfest Exclusive badge from Dev.to 

ThankYou everyone who supports me for this event
How to code WhatsApp Spammer
Published: 2021-10-16 10:03:32

Hello & Welcome. I’m Sushant and in this post I am going to talk about how to code WhatsApp spammer in just 11 lines of code. I am going to use Python as programming language to make this spammer. So let’s get started.
[Read Complete Article Here](https://crunchythings.xyz/how-to-code-whatsapp-spammer/)
Is discuss useful for @dsabyte.com
Tags: nextjs, react, webdev, javascript
Published: 2021-10-16 09:35:51

## What is [@dsabyte](https://dsabyte.com)?
[@dsabyte](https://dsabyte.com) is a website under development and dedicated for data structure and algorithm community. 

## How many devs are working for [@dsabyte](https://dsabyte.com)
One and only me:)

## What this post is all about?
This post is all about keeping the discussion with students and engineers on blog.

So, usually blog post has a way to make user engagement by comments. 

So, i implemented comment system in  [@dsabyte](https://dsabyte.com).

Sometimes we feel that, we have a lot more to  write about the blog but we can not make it into comment. So, i decided to keep a section about discuss.

![https://dsabyte.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnfnr8e3xms7hnz4ui94.png)

You can see in the above image.

## What is discuss?
Discuss is way to add long comments with code blocks, images, etc in markdown format in the same blog post.

Discuss can have its own comments and threads. 

So, is this useful?
Python isupper(), islower(), lower() and upper() methods
Tags: python
Published: 2021-10-16 09:31:30

This python string tutorial help to learn some string methods(isupper(), islower(), lower() and upper()) with example.These methods are used to check string is uppercase, check string is lowercase, convert string to lowercase and string in uppercase.

https://www.pythonpip.com/python-tutorials/python-isupper-islower-lower-and-upper-methods/
Added comment and discuss to @dsabyte.com
Tags: javascript, webdev, programming, react
Published: 2021-10-16 09:25:43

![https://www.dsabyte.com/posts/sa/What-is-the-algorithm/615dee94b03c6af6e90461d8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8f8jdzm4fxktcqxip0m.png)

See from the above image, that i have added a way for users to add and edit comments. 

> To make any comment or discuss, you need to login first

After making comment, you can edit comment, see that author who made comment or discuss, etc.

## Next upcoming feature
- delete comment/discuss
- like and dis like comment/discuss
- mark as answer for discuss only
- make comment in thread
如何在 Jupyter Notebook 跑 Python 異步程式
Tags: jupyter, python
Published: 2021-10-16 09:10:48

異步是 Python 3.4 起引入的重大變革，透過 asyncio 模組與新的 `async`、`await` 語法達到與 JavaScript 類似的異步執行效果。

一個最簡單的異步程式例子：

```Python
import asyncio

async def do_something():
    await asyncio.sleep(1)

loop = asyncio.get_event_loop()
loop.run_until_complete(do_something())
```

在上面的例子內有幾個 Python 異步程式的特徵：

- 由 `async` 關鍵字定義 `do_something()` 為異步函式。
- 函式內有 `await` 關鍵字的敘述句表示該敘述可為異步執行。
- `await` 後呼叫的函式 `asyncio.sleep()` 為一個具有 awaitable 的函式，對 `await` 關鍵字來說，後面呼叫的函式有 awaitable 屬性是必須的，否則會引發錯誤。
- 取得一個 event loop 物件，並令此 event loop 物件去執行 `do_something()`。

Event loop 物件可以接受一系列的 async 函式，並互相調度，在上面的例子中，因為只有單個任務，所以用異步顯得脫褲子放屁，在真實的場景中，event loop 接受多個 async 函式後，當遇到第一個函式的 `await`，異步機制就會開始作用，讓第一個函式的 `await` 繼續跑，並開始讓下一個函式也跑起來，以此類推直到所有 event loop 內的異步函式都跑完。

## 當在 Jupyter Notebook 裡跑異步程式

在 Jupyter Notebook 內可以直接使用 `await` 語法呼叫異步函式：

```Python
import asyncio

await asyncio.sleep(1)
```

就這麼簡單。
CSS Grid
Tags: codepen, css, bootstrap, webdev
Published: 2021-10-16 09:10:12

Hereby I am sharing the code for making columns and rows of flexible width and height using CSS Grid.

Here I have shared the not so common property **grid-row** and **grid-column**. It has to be used in the child which needs to be expanded.

The complete code for it is attached below.

{% codepen https://codepen.io/harrsh/pen/mdMVPPM %}
Improving Code through Refactoring
Published: 2021-10-16 01:59:54

## For code improvements, I focused on the following points.

#### 1. Separate files according to functional criteria.
I divided the code related to HTML generation and the code related to the command line, split it into two files, and put it in a util folder. There was one error in this part, but it was removed by adding the following codes.

**command.js**
```javascript
module.exports = {
    getArgs
}
```
**html.js**
```javascript
module.exports = {
    isKeyInObject,
    HTMLgenerator
}
```
**index.js**
```javascript
const { getArgs } = require('./util/command');
const { isKeyInObject, HTMLgenerator } = require('./util/html');
```

#### 2. In each divided file, unnecessary code is removed and structurally modified to make it easier to read.
In my judgment, there were many unnecessary if statements, so I removed them. I removed them because I think it would be better if it showed the error message. Through the first and second processes, I increased the readability of my project.

The part I removed in index.js
```javascript
if(flags['inputFlag'] == false){
                  argv['input'] = "test/The Naval Treaty.txt"
                  argv['i'] = "test/The Naval Treaty.txt"
                  }
                  if(flags['langFlag'] == false){
                      argv['lang'] = "english"
                      argv['l'] = "english"
                      }
                  if(flags['outputFlag'] == false){
                          argv['output'] = "dist"
                          argv['o'] = "dist"
                          }
```

#### 3. Add the necessary parts due to the nature of the code function.
I have not previously added a -o, i.e. result value option. Since the output option was in the -config option, I decided that it was also necessary for the command line option and made it work by modifying the code. In addition, I also updated the README.md file according to the updates.

```javascript
 const output = argv.output ?? 'dist';
        if (!fs.existsSync(output)) {
            fs.mkdirSync(output);
        }
        await fs.promises.writeFile(`${output}/${filename}.html`, getHTML(filename, html, lang));
```

I committed to each of the above processes. And when I pushed it, there was a git error. Because among the codes I committed, there were overlapping code lines. So I made a manual correction after using fetch, pull git commands.
for of loop in JavaScript
Tags: javascript, beginners, tutorial
Published: 2021-10-16 07:57:06

*This post was originally published on [webinuse.com](https://webinuse.com/for-of-loop-in-javascript/)*

We have already written about loops in JavaScript in the article [JavaScript Arrays Loops](https://webinuse.com/javascript-arrays-loops/). Now we will introduce a new one – for of loop.

`for of loop` is similar to `forEach` loop, but with for of loop we can use `break` and continue. This is something that makes it even more appealing.

The syntax for `for of loop` is pretty simple and straightforward.

The first parameter of `for of loop` is the loop variable and the second parameter is the array that we are iterating through. If we want to break out from the loop, we have to use keyword `break`.

```javascript
const arr = [1, 2, 3];
 
for (const el of arr) {
   if (el === 3) break;
   console.log(el)
}
 
//Result
//1
//2
```

Also, we can skip iteration by using keyword `continue`.

```javascript
const arr = [1, 2, 3];
 
for (const el of arr) {
   if (el === 2) continue;
   console.log(el)
}
 
//Result
//1
//3
```

Often, while working with loops we need to know the current index. We can accomplish that, with for of loop, by using `entries()`.

```javascript
const arr = ['js', 'py', 'php'];
 
for (const el of arr.entries()) {
   console.log(el)
}
 
//Result:
//[0, 'js']
//[1, 'py']
//[2, 'php']

```

In the example above [`console.log`](https://webinuse.com/javascript-console-log-tips-tricks/) returned the index and value of the current index, in the form of an array. But we can simplify this even further by destructuring the array. This means that we can extract values from the array, along with the index, as separate variables.

```javascript

const arr = ['js', 'py', 'php'];
 
for (const [index, el] of arr.entries()) {
   console.log(index)
   console.log(el)
}
 
//Result:
//0
//js
//1
//py
//2
//php

```
But we have to be careful if we are using destructuring. ALWAYS `index` comes the first and `element` comes the second. Also, we can use `const` in this case, because every new iteration `for of loop` creates a new scope.

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [What is object destructuring in JavaScript?](https://webinuse.com/what-is-object-destructuring-in-javascript/).
Altеrnаtіvе Adѕ іnі Wаjіb dі Coba Selain Gооglе Adѕеnѕе 

Tags: ads, blogger, templates, writing
Published: 2021-10-16 07:52:47

Google AdSеnѕе mеmаng mеnjаdі ріlіhаn tеrаtаѕ bаgі реmіlіk blоg untuk mеndараtkаn uаng dаrі blоg mеrеkа. Nаmun, kаrеnа bеrbаgаі аlаѕаn —ѕереrtі ѕеlаlu dіtоlаk ѕааt реngаjuаn atau іngіn mеndараtkаn реnghаѕіlаn tаmbаhаn— Andа mеmutuѕkаn untuk mencari аltеrnаtіf Adѕеnѕе. 
 
Aрарun аlаѕаnnуа, Andа ѕudаh datang ke аrtіkеl уаng tераt. Dі ѕіnі kаmі akan mеngulаѕ 13 аltеrnаtіf AdSеnѕе terbaik untuk Andа. 
 
AdNоw 
MеdіаNеt 
Prореllеr Adѕ 
Infоlіnkѕ 
Rеvсоntеnt 
Adѕtеrrа 
PорAdѕ 
Evаdаv 
RеvеnuеHіtѕ 
уllіX 
Bidvertiser 
PорCаѕh 
OIO Publіѕhеr 

source : https://sangblogger007.blogspot.com/
Adding New SSG Feature
Tags: opensource
Published: 2021-10-08 06:29:23


In the week 5, the weekly assignment has been done with practicing a few new concepts of git command and implementing [new feature](https://github.com/Reza9472/StaticSiteGenerator/issues/20) of static site generator (SSG). In this week, I have a chance to work with Reza Poursafa's [repo](https://github.com/Reza9472/StaticSiteGenerator) for adding feature to his [code](https://github.com/Reza9472/StaticSiteGenerator), and [PR](https://github.com/Reza9472/StaticSiteGenerator/pull/21) and Eugene Chung for reviewing his [code](https://github.com/ycechungAI/kimchi-ssg) from my repo. Previous lab I had a change to work with JavaScript to implement converting Markdown file to HTML file. This time, I have chosen to work with JavaScript again. I thought the process of add new feature supposes to be straight forward. However, even though the same program and same feature has written in same programming language, it is totally different because of the coding style and usage of library. The Reza’s code, he used ‘commander’ which is the library for implementing command-line interfaces. Therefore, I had to review the Commander.js documents for understanding concepts and syntax. 

For the reviewing part, I have often used `git pull` to sync remote and my local repository in previous lab. In this lab, instead of using `git pull`, I use `git remote` to add remote repository where another student forked my repo to my local repository. Next, I have used ‘git fetch’ to download all the commits and branches in the remote repository to my local repository without merging. However I have an issue that I supposed to checkout the forked repository instead of `git checkout -b “issue repo”`. Therefore, I checked with ‘git log’ for checking commit number that my head is pointing the proper branch. Also, professor have me a tip which uses `git checkout -B “target repo”`. After reviewing, I have found an issue that the JSON configuration file includes output folder, but the HTML files create in default folder. I asked him to fix this problem. Everything works as expected. 

Throughout this lab, I have learned different approaches to review and test via remote by using various git commands and work with other people’s project to understand other people’s code and learn different approach methods for implementing same features in same programming language.
Tips for organizing your files on your Windows PC
Tags: windows, organizing
Published: 2021-10-16 07:33:01

Tired of searching where you put this one file? I will show you 3 tips how you can keep your files organized.

## 1. Use the library folders of Windows

![Liabraries in Windows 11](https://user-images.githubusercontent.com/58633848/137578152-f3a0434b-e20e-4957-955c-c8d1e30f354f.png)

In Windows there are some built-in library folders like images, documents, videos, etc. Use them! 

Also create subfolders in this library folders, so that it's easier to find what you are searching for (for example: "Programming Projects", "Official documents", "Family documents", etc.)

## 2. Icons for the folders

![image](https://user-images.githubusercontent.com/58633848/118086304-06901580-b3c4-11eb-822d-61da655f2d22.png)

You can set costume icons for your folders inside of your libraries. This helps keeping the overview.

You can change the icon by right clicking on the folder -> Properties -> Customize -> Change icon. You can choose between many built-in icons or your own ico files.

## 3. Hide folders from applications

Many applications create folders in documents for saving data. It's obvious that you can't just delete them. But you can hide them.

Windows 10:

1. Select all the files and folders you don't need.
2. Click on "view" in the menubar of the Explorer
3. Click "Hide selected files"
4. Select "Make changes only on this folder"

Windows 11:

1. Select the items you want to hide
2. Right click on the items
3. Click on properties
4. Check the "hidden" checkbox
5. Click ok

![Visualisatuion](https://user-images.githubusercontent.com/58633848/137578247-ec1e6fd2-1dc3-42df-8ac4-f467504c0803.png)

Of course, you need to deactivate show hidden items.

## (4.) No files/folders on the desktop

And something small for the end: I Found out for myself that putting folders or files onto the desktop just confuses me. Putting shortcuts there is ok.


I hope I could help you organizing your PC. If you have more tips, feel free to contact me on Twitter or write a comment.
Top 10 Java Articles for this week
Tags: java, programming, beginners, development
Published: 2021-10-16 07:06:43

---
title: Top 10 Java Articles for this week
published: true
description: Top 10 Java articles form Dev.to, Medium and other online portals
tags: java, programming, beginner, development
//cover_image: https://direct_url_to_image.jpg
---
Hello Java Devs, 
Being a Java programmer, editor of a Medium publication, and a Java blogger ([java67](java67.com/) and [Javarevisited](javarevisited.blogspot.com/), I love curation and I have been publishing Java articles since last 10 years.

This year, I haven't been regular to Dev.to and hardly publishes any posts here so I thought to start a weekly Java article round up on Dev.to. 

I plan to publish this kind of article every week to create a routing and going to include top Java articles from Dev.to, medium, and other popular Java blogs to share with you all devs who love Java. 

So here is our first edition. If you want to get included in this roundup, feel free to contact me. 

###1. Top 66 Object Oriented Programming Questions for Interviews
This is my article, where I have shared common OOP questions every Java programmer should know by heart before going into interviews. 

{% link https://dev.to/javinpaul/top-50-object-oriented-programming-questions-for-interviews-4po1 %}

###2. Stay in the L(OOP) with Object-Oriented Programming Basics by @jburroughs 


{% link https://dev.to/jburroughs/stay-in-the-l-oop-with-object-oriented-programming-basics-1dn %}

###3. Lambda Expressions in Java by @jryther 

{% link https://dev.to/jryther/lambda-expressions-in-java-5gme %}

###4. Faster Maven builds in Docker by @nfrankel  

{% link https://dev.to/nfrankel/faster-maven-builds-in-docker-2584 %}


### How to copy files in Java? Example

{% link https://dev.to/javinpaul/how-to-copy-files-in-java-example-3clf %}



### Be careful Of This Java Optional Method by @jarjanazy 

{% link https://dev.to/jarjanazy/be-careful-of-this-java-optional-method-439 %}

### What does <T> mean in Java?

{% link https://dev.to/maddy/what-does-t-mean-in-java-a2e %}

### Effective Java: Strive for Failure Atomicity

{% link https://dev.to/kylec32/effective-java-strive-for-failure-atomicity-4agd %}

### 5 DevOps books for Senior Developers

{% medium https://medium.com/javarevisited/5-best-devops-books-for-experienced-developers-78f9b4c5e4d5 %}
---

### Five Mistakes to Avoid in Reactive Java
How not to look like a noob.
{% medium https://medium.com/javarevisited/five-mistakes-to-avoid-in-reactive-java-786927ffd2f6 %}


### Introduction to Pragmatic Functional Java
{% link https://dev.to/siy/introduction-to-pragmatic-functional-java-142m %}

That's all for this week. If you have any good article which should be in this list, feel free to suggest in comments.
🔴 HTTP Request/Response Practical Workflow 🧐
Tags: beginners, computerscience, tutorial, webdev
Published: 2021-10-16 06:57:02

🔥 🔥 ALL ABOUT HTTP Packet INTERNAL DETAILS ARE SHARED  
HOW IT WORKS AND BEST PRACTICE TO IMPLEMENT WEBAPP 🤷‍♂️🔥🔥🔥  

{% youtube aGOXrQj93dI %}
Connect To Postgres database running on a Docker container using psql
Tags: postgres, docker, database
Published: 2021-10-16 05:54:44

Recently while working, I was required to connect to a database that was running on a docker container using psql.

If you are also dealing with something like this, then, follow along

1\. Start the docker container

```bash
$ docker run -d container_name
```

2\. Now run the following command

```bash
$ psql -h localhost -p 5432 -U username -d database_name
Password for user username:

psql (12.8 (Ubuntu 12.8-0ubuntu0.20.04.1))
Type "help" for help.
database_name=> 
```

And that's it
Thank you for reading!
Have a nice day!😇
300+ Bootstrap UI Components, Snippets and Blocks
Tags: webdev, css, beginners, html
Published: 2021-10-16 05:54:35

The UI components are the building blocks for user interfaces. They can be anything from navigation bars or buttons to menus or header. You can use different components for different purposes depending on what your user is trying to accomplish on your website.

Our team recently, built Ayro UI from scratch which offers 300+ Free and Premium Bootstrap UI Components and Snippets for almost any kind of website and landing pages.


![Ayro UI Features!](https://uideck.com/wp-content/uploads/2021/10/ayro-features.png)


We made [Ayro UI](https://ayroui.com) into - a complete UI toolkit that comes with a diverse collection of UI components, minimal design system and elements that are ready to use. Just copy-paste and you are done.

*If you are wondering what are the main features of [Ayro UI](https://ayroui.com) here are the feature highlights -*

## UI Components and Snippets:
Massive collection of [UI Components](https://ayroui.com/components) categorized into 3 different categories such as - Application UI, Marketing and Core Components.


[![App UI Components](https://uideck.com/wp-content/uploads/2021/10/application.png)](https://ayroui.com/components)


## Website Sections & Blocks :
Essential sections and blocks for different kind of websites. All you need to copy-paste on your HTML file to start using!.
[![Marketing UI Components](https://uideck.com/wp-content/uploads/2021/10/marketing.png)](https://ayroui.com/components)


## Free and Premium Components:
Ayro UI is free and premium component library, its free Core version is available on [GitHub](https://github.com/ayroui/free-ui-components). All core components are 100% free and open-source, including 50+ Application and Marketing UI.
![Core Components](https://uideck.com/wp-content/uploads/2021/10/ayroui-core-gh.png)


## UI Library:
Yes, it also follows a consistent and minimal design system that you can discover when you start using it.
[![Marketing UI Components](https://uideck.com/wp-content/uploads/2021/10/core.png)](https://ayroui.com/components)


## 4 Example Templates and Counting:
![Ayro UI Templates](https://uideck.com/wp-content/uploads/2021/10/bonus-templates.png)
Packed with 4 example templates for - App, SaaS, Startup and Business websites. More than enough to kickstart web projects with Ayro UI and explore the library.


## Bootstrap 5 Based:
Built-with [Bootstrap 5](https://getbootstrap.com/) most popular front-end framework in developer community. So, you will have more flexibility and freedom while using these components or developing a site.