teleren/devto huggingface dataset:
How to connect wordpress user and Ojbect storage?
Tags: help, docker, wordpress, javascript
Published: 2022-05-11 07:08:49

Hi,
I have a wordpress site(running in docker container) where users register. I have object storage S3 server running in another container. I create bucket(object storage)for each wordpress user. 
How to allow users to upload files to their bucket from their wordpress page. 

I am a beginner and my question is surely naïve. I need help in this regard. what should be the overall application architecture to achieve this?

Best Wishes,
RAM
Why Your :hover Selector isn't Working
Tags: css, html, webdev, beginners
Published: 2022-05-11 07:05:26

> The post is suitable for anyone with a basic knowledge of CSS

Have you ever tried to use the CSS `hover` selector but it just doesn't seem to work for you ? Or worse yet it applies to the *wrong* elements ?!? 

If you're like me then it has happened a lot.

And for a long time I was stumped. 

That is, until now. 

### **Its in the Details**
Lets take a look at an example of a hover effect: 
````css
.parent1 :hover{
  background-color:red;
}
```

You'd guess that class would change the background colour of the parent1 class to red on hover right ? 

Well you'd be wrong. 

Now take a look at this one : 
````css
.parent1:hover{
  background-color:red;
}
```

Would you believe that this one would change the background colour of the parent1 class to red ? 

If so, you'd be correct.

But what is the difference ?  You'd be forgiven if you can't  tell the difference - I know I didn't at first. 

It's the *space* character before the `:hover`. 

The space character in CSS is a [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) ,which in this case means it will apply the hover effect to all the child elements of the element - not the element itself. 

That's a pretty big difference for such a seemingly innocuous space. 

### **Comparison**  
Take a look at the below examples to see what I mean. 

{% jsfiddle https://jsfiddle.net/nu9h2gvd/3/ result,html,css %}
The Moral of the Story ? 

**Mind The Gap !**

#### Slán go fóill
I hope this has cleared up any confusion about why your hover effects weren't working for you ! 
 
Feel free to ask questions, comment or contribute below!

And if you're feeling generous you can buy me a coffee with the link below ( and yes its all for coffee,  I drink a copious amount of it while writing ☕ )  


[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/SUKaQp9)
Devlog: Mushroom-series
Tags: opensource, typescript, devlog, github
Published: 2022-05-11 06:55:10

Hi, everybody!

I am going to be doing some devlogs on my open source coding series mushroom-series. Every project is going to be open source so everybody can help. I don't really know how to format this text but I am doing my best so if you have any suggestions you can leave them in the discussion.

Right now the only project is mushroom-server which is an open source alternative to firebase and more cloud providers.

The changes I have made that havent been committed yet are changing from express and javascript to nest js and typescript. And also planning to make it able to compile to docker. So you can run:
`Docker run -name mushroom-server`
Or something else.

If you have any suggestions you can leave them in the discussion or in issues in github. The new version with the change from express to nest js and typescript will be up close to the weekend on possibly 15 may or earlier.

Thank you for reading! :)

[Github](https://github.com/VpgMackan/mushroom-server)
Commenting: where?
Tags: programming, discuss, beginners, python
Published: 2022-05-11 06:52:47

Some people comment on the line after the code is done:

```py
print(“hello”) # printing hello
```

---

and some people comment on the line after:

```py
print(“hello”)
# printing hello
```

---

I personally comment on the line after.

---


Which way do you do it?
Express doesn't save cookie
Tags: react, node, express, javascript
Published: 2022-05-11 06:36:07

Although the response header has 'Set-Cookie: ...' but I didn't see anything at Application -> Cookie in Developer tool of the browser. So I fixed something at the backend (express) and frontend (React and axios) too.

## Step 1: Update configuration credentials at Backend side

Currently, I was use the cors() package. So I update credentials for cors()

```javascript
const app = express();

// Setting credentials
app.use(cors({
  origin: 'http://localhost:3000', // it depends on your site
  credentials: true,
}));

// Setting cookies
res.cookie('cookie-for-me', 'hello-world');
```

## Step 2: Update configuration credentials at Backend side

It almost done after this step. 

```javascript
axios.defaults.withCredentials = true
```

## Final: Run and checking your cookie

You can check by enter `document.cookie` at the console of the developer tool of a browser to see the result.

If you have any suggestion about the way saving the cookie, please feel free comment as the following the post :)
Learn Azure Static Web Apps the fun way with #30DaysOfSWA !!
Tags: staticwebapps, webdev, javascript, event
Published: 2022-05-11 06:33:16

Join @nitya and the rest of the Static Web Apps team on a 30-Day journey of learning Azure Static Web Apps in a fun and engaging way!! Have a quick short lesson everyday with an easy-to-do hands-on exercise. Got questions? Shoot them out and get them answered by the product team!😁

{% link https://dev.to/azure/kicking-off-30daysofswa-2d8g %}

**So, what are you waiting for? Let's get kicking with #30DaysOfSWA!** 🎉🎉
Rendering markdown in Remix
Tags: react
Published: 2022-05-11 06:15:28

Another cool out-of-the-box feature of Remix is that it supports markdown.

Both plain markdown and MDX format.

This article will show you how easy it is to get started with markdown for your remix project.

## Using plain markdown files in Remix

Let's create a new directory for our project to get started with plain markdown files in Remix.
We'll call this folder `blog`. (Since we want to keep our posts for now)

Inside this folder, create a `my-first-article.md` file and place the following contents inside of it.

```md
---
meta:
  title: My first article
  description: Fully powered by Markdown
---

# Hello World!

I'm amazing markdown content

## How cool!
```

Now simply run your website and visit the `/blog/my-first-article` endpoint!

You'll be welcomed by the markdown fully rendered!

![Markdown rendered in HTML](https://cdn.hashnode.com/res/hashnode/image/upload/v1651416424240/HbxYetkw2.png)

You might wonder why it all looks the same?
Our source code has all the heading elements, but since we added zero styling, we see everything without it.

I'll tell you more about adding the typography plugin in a follow-up article.

## Rendering MDX in Remix

Besides plain markdown we can also opt for MDX, like super cool, slightly more dynamic version of markdown.

Start by creating an `mdx-sample.mdx` file in the blog directory.

```md
---
componentData:
  name: Chris
---

import Name from "~/components/name";

# Hello MDX!

<Name {...attributes.componentData} />
```

As you can see, we set some component data at the top section and then import a component.

This component then renders this component data.

Let's quickly set up this super basic component.
Create a `components` directory inside your `app` folder.

Create the `name.tsx` file and paste the following component into it.

```js
const Name = ({ name }: { name: string }) => <div>Hello {name}</div>;
export default Name;
```

A super simple component that renders a div that states `hello {name}`.

The name will be received from the markdown file.

Let's look at how it looks when we open this file.

![MDX in Remix](https://cdn.hashnode.com/res/hashnode/image/upload/v1651417117033/NdpjBE8iP.png)

You can also find the complete code samples on [GitHub](https://github.com/rebelchris/remix-starter/tree/markdown).

### 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)
Bubble Sort
Tags: javascript, programming, algorithms
Published: 2022-05-11 06:14:58

What do we understand about Bubble Sort?
 - It uses 2 for-loops
    - outer loop loops **DECREMENTALLY**
    - inner loop loops **INCREMENTALLY**
        - it is also the loop that does the swapping
 - The check for swap is simple
    - it does the comparison in the inner loop
    - it compares the current to 1 position next to the current
    - bigger goes to the right, smaller or equals we skip 
 - Time complexity 
    - O(n^2)
 - Space complexity
    - O(1)
```js
    function BubbleSort(arr) {
        for (let i = arr.length; i >= 0; i--) {
            //! condition to check if we still proceed with the inner loop
            let alreadySorted = true;
            
            //! NOTE:
            //! Since the previous loops already pushed the largest number to the right of the loop
            //! the inner loop does not need to loop all the way to the end again.
            for (let j = 0; i < i - 1; j++) {

                //! compare left to right
                if (arr[j] > arr[j + 1]) {
                    //! if nothing comes thru the if condition
                    //! means everything behind are already sorted
                    //! stop looping and break from the outer loop
                    alreadySorted = false;

                    //! SWAP
                    // this is the es6 syntax for swapping
                    // other languages may have the same
                    // I know Golang has something similar
                    [arr[j], arr[j+1]] = [arr[j+1], arr[ij];
                }
            }

            if (alreadySorted) {
                break;
            }
        }
        
        //* return the result after all the loops have been done.
        return arr;
    }
```

> NOTE: There is a way of writing the swap logic in a more universal way for most other languages to implement as well.
```js
// a more universal swap logic
const temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
```
Fortune telling
Tags: statictyping
Published: 2022-05-11 06:10:57

---
title: Fortune telling
published: true
description: 
tags: statictyping
//cover_image: https://direct_url_to_image.jpg
---

I was in a world where a code describing type signature was longer than a code telling what a program does. I don't want to bring that situation back.

I expect AI code completion to replace static typing. Ruby Type Signature (RBS) and similar things must be inferred automatically from a database or other data sources.
JAVA 基础
Published: 2022-05-11 05:57:59

JAVA 反射基础
https://www.cnblogs.com/guangshan/p/4886029.html
https://www.cnblogs.com/guangshan/p/4888656.html
https://www.cnblogs.com/guangshan/p/4891715.html
https://www.cnblogs.com/guangshan/p/4893490.html
What "second" language would you recommend a JS Full-Stack Developer?
Tags: webdev, discuss
Published: 2022-05-11 05:36:58

Hey friends! Nice to meet you :)
I primarily work as a frontend developer, but have already gained some experience in backend development with JavaScript - mostly in side-projects.

Recently, I'm feeling kinda interested in learning another server-side language for web development. Plus, I want to increase my backend skills in general.

Apart from JavaScript, what is your server-side language of choice? Or what language would you recommend me?
How to Gzip - compress a gcp file while uploading to google cloud , AWS for better SEO
Tags: seo, html, css, javascript
Published: 2022-05-11 05:36:34


## Why you need to enable gzip or anyother compression to increase the page speed?
[check thi sout !!](https://www.pingdom.com/blog/can-gzip-compression-really-improve-web-performance/)

## Now lets's get started 

Google Cloud Storage (GCS) by default serves files uncompressed. There is however an option to enable gzip compression for selected files. There is a catch though. It’s only possible to use static compression which means that the files need to be uploaded already compressed to the storage. Some servers allow you to use dynamic compression which means that they will compress files on the fly when the files are requested by a client but unfortunately GCS, as I mentioned, doesn't do this.
**There are two ways to upload multiple files to gcp , we will use `gsutil`**

```
gsutil -m cp -r -z css,js,map [LOCAL_DIR] gs://[BUCKET]/[REMOTE_DIR]
```

`-z` this z will take care of compressing your files before uploading to gcp and it will serve compressed files to user so that the page speed will be increased

## To increase page speed more use cache control also

```
gsutil -h "Content-Type:text/html" \
       -h "Cache-Control:public, max-age=3600" cp -r images \
       gs://bucket/images
```

this will helps reduce the image dowloading time and also increase your page speed

## You can see what metadata is currently set on an object by using

`gsutil ls -L gs://the_bucket/the_object`

## check if the gzip compression enabled or not on your website
and checking (for example, by using the web browser's development tools) if the response contains **content-encoding: gzip** and **content-type: application/javascript** (for JS) headers, e.g.:

![console image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gzsomrl3d117pnwc96a.png)


## For Aws Cloud front
open up the CloudFront Console, locate your distribution, and set Compress Objects Automatically to Yes in the Behavior options

Now enjoy the light house Score 

**Save this post for future reference**
Data Structure & Algorithms
Tags: javascript, algorithms, programming
Published: 2022-05-11 05:30:18

## The why
I'm currently studying and practising Data Structure and Algorithms on my own and when time permits, I'll also be studying some Object Oriented Programming knowledge alongside Systems Design and Architecturing.

As you can already tell, all of the topics above are all very theoretical and abstract and very very dry. But I have a love-hate relationship with them. Every time I go to work and see people quarrelling about different software opinions and whenever I come across any I would think to myself,

"So what exactly is the better practice?"
"Is it true that on some occasions it is good and some not?"
"How do we identify when and what to use then?"

## The Realisation
After half a decade of pondering and observing others and thinking I’ve realised that many of these topics are mainly just concepts. Concepts that once you’ve honed it implementation become not only easier to write but also easier to explain or to convey as a reference to others.

## The Motivation
FIghts become redundant when explained with information and knowledge backed from decades of research and implementation from past masters of the given field.

Opinions can be respectfully challenged with concrete proof of concepts and theory and research backed evidence.

## The How
### My Personal Learning
I would be documenting what I am currently learning and practising in Data Structure and Algorithms using JavaScript as my main proficient language and whenever possible I would hopefully be implementing the same in another language as a form of knowledge transfer by making references back and forth with JavaScript.

I would also share knowledge I’ve gained from learning Microservice Architecture designs from NestJS.

To give a little bit more info, NestJS in Node.js is like the Spring Boot of Java world or the .NET of the C# world.

You can visit their [website](https://docs.nestjs.com/) to find out more.

### My Personal Sharing
Would be starting this series with Sorting Algorithms first since they are mostly needed in coding interviews and also a great place to practise on many of the coding concepts.

So what are we waiting for? Let’s get started.
🚀 The Ultimate Monorepo Starter for Node.js Serverless Applications
Tags: aws, lambda, node, javascript
Published: 2022-05-11 05:16:56

---
title: 🚀 The Ultimate Monorepo Starter for Node.js Serverless Applications
published: true
description: 
tags: aws, lambda, nodejs, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pojamrwao2paunzpe8iw.png
---

I am happy to announce the release of "The Ultimate Monorepo Starter for Node.js Serverless Applications."

## Features
✅ First-Class Typescript Support
✅ DynamoDB Single Table Design
✅ Shared API Gateway
✅ Environments Configuration
✅ JWT Auth Middleware
✅ Http Params Validation
✅ Typed Proxy Handlers
✅ Auto Generators
✅ Localstack
✅ ESLint
✅ Jest

https://github.com/ngneat/nx-serverless
Kesalahan menggunakan pattern matching not like any di PostgreSQL
Tags: postgres, patternmatching
Published: 2022-05-11 04:58:48

Biasanya saya menggunakan pattern matching menggunakan keyword "not in". 
```
SELECT kolom1 from tabel where kategori not in ('A', 'B')
```
Kemudian saya mencoba menggunakan keyword "not like any"
```
SELECT kolom1 from tabel where kategori not like any (array['A', 'B'])
```
Menurut saya, hasilnya akan sama. Tetapi setelah dijalankan hasilnya berbeda. Saya penasaran kenapa hasil berbeda dan setelah saya cari tahu, cara kerja keyword any itu adalah akan bernilai benar jika salah satu elemen terpenuhi. Jadi jika elemen A dibandingkan ke keyword not like any akan bernilai true karena memenuhi kriteria bukan memenuhi salah satu elemen di dalam array yaitu B. Begitu juga sebaliknya. Sementara hasil yang diinginkan adalah bukan elemen A dan juga bukan elemen B. Untuk menjawab masalah ini digunakan keyword "not like all"
```
SELECT kolom1 from tabel where kategori not like all (array['A', 'B'])
```

Referensi
[stackoverflow](https://stackoverflow.com/questions/49557830/understanding-ilike-any-element-of-an-array-postgresql)
Git: Commit (and ignore files from commit)
Tags: git, beginners
Published: 2022-05-11 04:57:16

##The Basic Git Commit Workflow
1. Make Changes
2. Add Changes
3. Commit

## 1. Make Changes
Make new files, edit files, delete files, etc. in a  location that is tracked by Git.

## 2. Add Changes
Group specific changes together, in preparation of committing. <u>The changes added in this step are not committed yet to the repo</u>. Consider this step as a Staging step/area.
`git add [file1] [file2]`
<sub>_Explicitly add the files to be added._</sub>
`git add .`
<sub>_Stage ALL changes at once._</sub>

## 3. Commit
Commit everything that was previously added.
`git commit -m "Describe the commit here"`
<sub>_The `-m` flag is to pass an inline commit message. Without this flag, a text editor will be launched to give a commit message._</sub>

## Ignoring Files
There are some files that should not be committed such as:

- Temporary files, build results, and files generated by an IDE
- Secrets, API keys, credentials, etc.
- Log files
- Dependencies & packages

To ignore those files create **.gitignore** file in the root of a repo. Inside the file, write patterns to tell git which files & folders to ignore.

See [this example](https://github.com/github/gitignore/blob/main/VisualStudio.gitignore) of ignoring files generated by Visual Studio.
Create your first npm package!
Published: 2022-05-11 04:41:39

## What is npm?

npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages. you can create your own npm package for personal use, at the same time other developers can use it!

---

## SO... HOW?

1. Create the code that you want to publish in npm, it could be a javascript function or a react component. anything that you think can be useful for you and to others.

example: 

> this function is going to generate random number with letters in it that can be use as ID


```javascript
const generateID = () => {
  const alphabetArray =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXWZ".split("");
  const numberArray = "1234567890".split("");
  let ID = [];
  for (let i in alphabetArray) {
    const random = Math.floor(Math.random() * i + 1);
    if (ID.length <= 5 && numberArray[i]) {
      ID.push(numberArray[random] + alphabetArray[random]);
    }
  }
  return `0x-${ID.join("-")}`;
};

export default generateID;
```
> make sure the name of the file is `index.js` or it could be anything just edit your `package.json` file.

> as you can see the code is exported using module.exports, this step is really important for you to use your package in other place.
---




2. 

## Create a github repo for your npm package. the reason why we are creating a github repo is for the package.json file to have all of the github information linked inside of it.

> make sure to change the "repo-link" with your own repo.

 
```shell
echo "# repo-link" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add repo-link
git push -u origin main
```
---



3. 

##  Now, initialize the npm, your terminal will ask you about the information of your package, but we are able to initialize it earlier. Just enter the name of your package on the first question and the rest is optional.

```shell
npm init

```
---


4. 

## test your package.

example:

> make sure to import your package like so.
```javascript

const generateID = require('generateID');

//ES2015
import generateID from 'generateID';

```

---

5. Create your npm account at 
[](https://www.npmjs.com/). after that you can login using`

---
```shell
npm login
```
---
> make sure to verify your account first or else later on there will be an error while publishing.

6. 

## Now you can publish your first npm package like so.

```shell
npm publish
```
---
**Possible errors while publishing**

- The name of the package already exist

fix:

> in your `package.json` file you can edit the name of your package to @name_of_your_account/package_name like so.
--- 

```json

 "name": "@name_of_your_npm_account/package_name"

```

> and also on publishing it you have to define that it's a public package because automatically npm will tag it as a private package which will cause an error publishing it because you have to be a premium user to use this feature.
publish it like so.

```shell
npm publish --access=public

```

- mostly possible problem can be your account is not yet verified
Elixir Today: Create a Left Triangle Pattern using Elixir
Tags: elixir, functional, programming, tutorial
Published: 2022-05-11 04:38:07

### Process

- create a file named `left_triangle.ex`
- write the code

```
left_triangle = fn n ->
  for i <- 0..n do
    for _ <- 0..i do
      "*"
    end
  end
  |> Enum.into("", fn string ->
    string = Enum.join(string)
    "#{string}\n"
  end)
end

IO.puts(left_triangle.(10))
IO.puts(left_triangle.(5))
```

- run `elixir left_triangle.ex`

### Result


```
*
**
***
****
*****
******
*******
********
*********
**********
***********

*
**
***
****
*****
******

```

> Happy Coding!