teleren/devto huggingface dataset:
About Eslint configuration (Airbnb style option for a Typescript project)
Tags: eslint, typescript, airbnb, webdev
Published: 2022-09-04 06:12:40

Since my team recently has decided to introduce Eslint (Typescript + Airbnb style), I was researching how to set up yesterday.

When I read some articles about the configuration, some of the authors directed to choose the Airbnb option during initialization with an image like below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezksixr3emny0kk6gczp.png)


However, I found that the "Airbnb" option didn't appear when I was initializing the configuration. Only "Standard" and "XO" are available on the latest version (8.23.0): 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1pqbioyrsir6mq2exj9.png)

Curious to say, the "Airbnb" option appeared when I answered "No" to a question, "Does your project use Typescript?":


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9agzx7bifgjbmb419q9k.png)

So, what was wrong? This took me a while to figure out why.

After I did some research on the cause, I realized that the version of my Eslint was the cause. In short, the "Airbnb" and  "Google" style options are gone from 8.7.0 for some reason; meanwhile 8.6.0 or before, these were okay:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6xwfzyskios0x5ysvm0.png) 

As you can see, even if I select "Yes" to Typescript, the options are selectable. Nice.

But, I'm still in the middle of the configuration, so there is no guarantee that this is the correct way to go, but I just wanted to share this finding.
Find The largest Element In the array
Published: 2022-09-04 05:57:07

For Finding The largest Element In array you have knowledge array traveling and some condition statements like if and else for solving this we are not using else statements but as beginner you have knowledge of if and else statements

**Going Forward follow below mentioned steps**

**Step:- 1** Define the size of array As a N = arr.length;
**Step:- 2** Now Travels To whole Array Using for loop
**Step:- 3** Now Inside for loop use if statements where you can add some conditions like if(arr[i] > max) **note** the max variable you have to define in beginning of program like **int max= arr[0]**
**Step:-4** now if our above conditions is true then assign max value to arr[i] using equals operater 

**Step:- 5** Now Print the max value of arr using System.out.println();

**Above Steps Implement below programs**

`class FindLargestElementInTheArray {
    public static void main(string args[]) {
        int arr[] = {10, 20, 50, 30, 60};
        int N = arr.length;
        int max = arr[0];
        for(int i = 0; i<N; i++) {
            if(arr[i]>max) {
               max = arr[i];
            }
        }
        System.out.println(max);
    }
}`

**OUTPUT:- 60**
CSS Battle: #15 - Overlap
Tags: css, webdev, beginners, tutorial
Published: 2022-09-04 05:53:42



In this article, I will solve a [Overlap](https://cssbattle.dev/play/15) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Overlap](https://cssbattle.dev/targets/15.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{% youtube https://youtu.be/fTlNwTeVVA0 %}

### HTML


```html
<p> 
<a> 
```


- `<p>` : Circles
- `<a>` : overlap of both circles


### CSS

Now let's style the containers. 

```css
* {
  background: #09042a;
}

body {
  margin: 75;
}

p, a {
  border-radius: 1in;
  width: 150;
  height: 150;
}
p {
  background: #7b3f61;
  position: relative;
  overflow: hidden;
  box-shadow: 100px 0 #e78481;
}

a {
  position: absolute;
  left: 100;
}
```


><small>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)</small>

><small>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.</small>

**Minified Version:**
```
<p><a><style>*{background:#09042A}body{margin:75}p,a{border-radius:1in;width:150;height:150}p{background:#7B3F61;position:relative;overflow:hidden;box-shadow:100px 0 #E78481}a{position:absolute;left:100}
```

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
How to upgrade Node.js on Centos
Tags: node, centos, systems, tutorial
Published: 2022-09-04 05:45:21

This blog I want upgrade Node.js to current statble version on Centos. Here is step by step.
**Check existing node.js version on machine**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut9e3j78ttq8pksju50t.png)

**Following step with command line**
clear cache
```
sudo rm -rf /var/cache/yum
sudo yum remove -y nodejs
```
and also remove node.js directory 

```
sudo rm -rf /usr/local/lib/node*
sudo rm -rf /usr/local/include/node*
sudo rm -rf /usr/local/bin/node*
```

**Install latest version**
I need install stable of Node 16.x LTS.
Add NodeSource yum repository

```
curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -
```

and the output like here

```
## Run `sudo yum install -y nodejs` to install Node.js 16.x and npm.
## You may run dnf if yum is not available:
     sudo dnf install -y nodejs
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn
```

Install package

```
sudo yum install -y nodejs
```

Check node.js and npm version

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k56ore3m4bse02qpv26v.png)

Cheer!!!
อธิบาย package fmt เบื้องต้นในภาษา Go
Tags: go
Published: 2022-09-04 05:16:11

สำหรับคนที่เพิ่งเริ่มต้นเขียนภาษา Go ใหม่ๆ อาจจะยังไม่คุ้นชินกับการใช้ package fmt [https://pkg.go.dev/fmt](https://pkg.go.dev/fmt) ยกตัวอย่างเช่น

```go
import "fmt"

func main() {
    var a any
    a = 10
    fmt.Printf("%T %v\n", a, a)
}
```

คำอธิบายของ package นี้ เขาบอกว่ามันใช้สำหรับการจัดการรูปแบบการแสดงผล และการรับข้อมูลผ่าน I/O ที่มีลักษณะการใช้งานคล้ายกับ printf และ scanf ในภาษา C

โดยการใช้งาน fmt ที่ง่ายสุดและไม่ต้องคิดอะไรมาก ก็คือการใส่ของที่ต้องการให้แสดงผลลงไปตรงๆเช่น

```go
    a := 10
    b := true
    c := "test"
    fmt.Println(a, b, c)
```

การที่ Println สามารถรับตัวแปรประเภทใดก็ได้เข้าไปเป็น parameter คือการที่มันรับ type เข้าไปเป็น `...any` หรือ `...interface{}` นั่นเอง แต่นั่นก็ทำให้ฟังก์ชั่นนี้ จะต้องทำงานหนักขึ้น เพราะการจะแสดงผลออกไปให้ถูกต้องตาม type ที่แท้จริงของค่านั้นๆ มันจำเป็นจะต้องทำการ reflect ของทั้งหมดอย่างละเอียดไปจนกว่าจะพบ interface ที่จะสามารถทำงานกับ type นั้นได้

แต่ที่ส่วนมากเราจะติดกัน มักจะเป็นฟังก์ชั่นที่ชื่อลงท้ายด้วย `f` เช่น `Printf` เพราะเจ้าพวกนี้ เราจะต้องเล่นกับตัว specifier พวกที่ขึ้นต้นด้วยเครื่องหมาย `%` และ `\` เช่น

```go
fmt.Printf("%s\n", s)
```

โดยการวาง specifier จะต้องวางค่าเรียงลำดับจากซ้ายไปขวา เทียบกับตัวแปร หรือ constant ใดๆ ตั้งแต่ parameter ตัวที่ 2 เป็นต้นไปให้ตรงกัน โดยในที่นี้

`%s` จะถูกแทนด้วยค่าในตัวแปร s
หรือ `fmt.Printf("%s %d %t", name, num, ok)`
%s จะถูกแทนด้วยค่า name
%d จะถูกแทนด้วยค่า num
%t จะถูกแทนด้วยค่า ok

โดยจะขออธิบายบางส่วนของการใช้สัญลักษณ์เหล่านี้คร่าวๆ

%d - ใช้แสดงผลตัวเลขแบบ decimal (ฐาน 10) กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16
%o - ใช้แสดงผลตัวเลขแบบ octal (ฐาน 8) กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16
%o - ใช้แสดงผลตัวเลขแบบ octal (ฐาน 8) กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16 โดยจะแสดงแบบมี 0o นำหน้าเลข
%o - ใช้แสดงผลตัวเลขแบบ binary กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16
%x - ใช้แสดงผลตัวเลขแบบ hexadecimal กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16 โดยแสดงเป็นอักษรพิมพ์เล็ก
%X - ใช้แสดงผลตัวเลขแบบ hexadecimal กับตัวแปร type int, uint ทั้งหมด เช่น int8, uint16 โดยแสดงเป็นอักษรพิมพ์ใหญ่
%f - แสดงเลขฐาน 10 แบบมีทศนิยม ใช้กับตัวแปร float32 และ float64 โดยสามารถกำหนด digit ได้เช่น "%.3f"
%s - แสดงข้อความจาก type string หรือ []byte
%q - แสดงข้อความแบบเดียวกับ %s และมี double quote ครอบ เช่น "test"
%t - แสดงค่า true/false จาก type bool
%v - แสดงค่า default format ของ type นั้นๆ
%#v - แสดงค่า default format พร้อมกับ โครงสร้างของ type ด้วย
%T - แสดง type ของค่านั้น
%p - แสดงค่า address ของ type ที่เป็น pointer
\n - new line

นี่คือบางส่วนที่เราจะได้ใช้กันค่อนข้างบ่อย โดยอาจจะมีลูกเล่นบางอย่างเพิ่มเช่น
ถ้าอยากแสดงค่า integer แบบกำหนดจำนวน digit โดยค่าที่จำนวน digit ไม่ครบ ให้แสดงเลข 0 ข้างหน้าเช่น 003

```go
fmt.Printf("%3d\n", 3)
```

หรือแสดงข้อความให้ชิดซ้าย หรือชิดขวา

```go
fmt.Printf("%10s\n", "test...")
fmt.Printf("%-10s\n", "test...")
```

นี่เป็นการใช้งานพื้นฐานเบื้องต้นมากๆ และทั้งหมดนี้มีอธิบายใน [https://pkg.go.dev/fmt](https://pkg.go.dev/fmt) อยู่แล้ว สามารถอ่านและทดลองด้วยตัวเองได้ไม่ยากครับ
987. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-09-04 05:10:07

```
class Solution {
 public:
  vector<vector<int>> verticalTraversal(TreeNode* root) {
    vector<vector<int>> ans;
    map<int, multiset<pair<int, int>>> xToSortedPairs;  // {x: {(-y, val)}}

    dfs(root, 0, 0, xToSortedPairs);

    for (const auto& [_, pairs] : xToSortedPairs) {
      vector<int> vals;
      for (const auto& pair : pairs)
        vals.push_back(pair.second);
      ans.push_back(vals);
    }

    return ans;
  }

 private:
  void dfs(TreeNode* root, int x, int y,
           map<int, multiset<pair<int, int>>>& xToSortedPairs) {
    if (!root)
      return;

    xToSortedPairs[x].emplace(y, root->val);
    dfs(root->left, x - 1, y + 1, xToSortedPairs);
    dfs(root->right, x + 1, y + 1, xToSortedPairs);
  }
};

```
#leetcode
#challenge 
Here is the link for the problem:
https://leetcode.com/problems/vertical-order-traversal-of-a-binary-tree/
JSON Parameters in Bicep Template
Tags: azure, armtemplate, devops, bicep
Published: 2022-09-04 05:02:18

Hello Techies,

I am sure you all must have heard **Bicep** new kid around the Microsoft Block to do Infrastructure As Code (IAC) (Domain Specific Language) to manage the deployments of Azure Resources. [This is great learning module from Microsoft which covers basics to advanced](https://docs.microsoft.com/en-us/azure/azure-resource-manager/bicep/learn-bicep)

One thing I like about it is there are [many ways to pass the parameters](https://ochzhen.com/blog/azure-bicep-parameters) to the Bicep Template. [Check out his blog, he has got some amazing content on Azure DevOps] Long story short you can pass parameters through param files, same like the way we pass to Arm Templates, or they can be inline through az deployment group command or it can be combination.

Scenario: Lets say you want different environments to have different Storage Account Skus (Standard LRS for DEV and Standard RAGZRS for Production) Although bicep object param can do similar job but it is not as flexible as plain JSON. It is not possible to pass the Object Param through command inline (Atleast I didnt find a way).  JSON string can be minified and can be managed through Azure DevOps variables.

We can acheieve this by using json [Bicep Functions](https://docs.microsoft.com/en-us/azure/azure-resource-manager/bicep/bicep-functions)

Below example is to pass normal JSON Object(Not Arm Schema based) to the Bicep Template as inline Parameter.  

```
param storageJsonString string
param location string = resourceGroup().location

#Using Json Function to parse the Json string to json object
var storageConfig = json(storageJsonString)

resource storage_account 'Microsoft.Storage/storageAccounts@2021-09-01'= {
  kind: storageConfig.kind
  name: storageConfig.name
  location: location
  sku: {
    name: storageConfig.sku
  }
  properties: {
    allowBlobPublicAccess: true
    accessTier: 'Hot'
  }
}

```
Call this from PowerShell by passing inline JSON string parameter to this template.

```
$stg = '{\"name\":\"pa1pocstg\",\"sku\":\"Standard_LRS\",\"kind\":\"StorageV2\"}'
az deployment group create --resource-group $rg `
--template-file .\Bicep101\bicep-json.bicep `
--parameters storageJsonString=$stg

```

Let me know what you think.
What is #Node.js? Basic meaning. #Node Quick notes
Tags: node, javascript, beginners, nodequicknotes
Published: 2022-09-04 05:01:43

Remember the term that browser support javascript - which we call browser runtime.

For an example we can open a browser console and can execute javascript code in it.

**What if we want to run same javascript out of Browser?**
That is when #Node.js comes in.

**Node.js is javascript runtime enviornment out of browser.**

**But why we need it out of browser?**
Your computer has lots of applications and it handles it very smoothly while browser it self is an application so instead of running javascript into browser we can run it directly in system and can take all benefits of system memory and performance in addition we get access to filesystem and database as well!

Now you know, what exectly #Node.js is for.
[SwiftUI] How to set custom font to NavigationBarTitle
Published: 2022-09-04 04:36:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlheeo8kniea2b5ekgix.png)



You need to install `Introspect` [library](https://github.com/siteline/SwiftUI-Introspect).

## How to use
It should be used on root of navigationView. If you use
```
NavigationView {
    VStack { ... }
        // ↓ set custom font
        .navigationTitleFont(font: UIFont.custom.extraBold(ofSize: 20))
}
```

---

## 3 Steps

1. Create ViewModifier
2. Add extension method to UIFont
3. Add extension method to View


**Step1: Create ViewModifier**
```
import SwiftUI
import Introspect

public struct NavigationTitleFontModifier: ViewModifier {
    public var font: UIFont

    public func body(content: Content) -> some View {
        content
            .introspectNavigationController {
                $0.navigationBar.titleTextAttributes = [.font:font]
            }
    }
}
```

**Step2: Add extension method to UIFont**
This is unnecessary. It just for make call custom font easily.
```
extension UIFont {
    public struct custom {
        static func extraBold(ofSize size: CGFloat) -> UIFont {
            return UIFont(name: "BoldCustomFontName", size: size) ?? UIFont.systemFont(ofSize: size, weight: .bold)
        }
    }
}
```

**Step3: Add extension method to View**
```
public extension View {
    func navigationTitleFont(font: UIFont) -> some View {
        self.modifier(NavigationTitleFontModifier(font: font))
    }
}
```
Battery level alert
Tags: programming, python, shell, ubuntu
Published: 2022-09-04 04:23:55

Hi dear developers. 

Here I want to share with you a small script that will help us make better use of our main working tool: *our lovely computers :).

As you know, nowadays, most computer batteries are lithium-ion ones. So they have a maximal cycle of discharging-recharging. When this number of cycles is reached, the battery is no longer able to efficiently store energy for a long time, and thus his autonomy goes down to a critical level. 

To avoid this we can try to maintain the level of charge of the battery in a given interval ([20%, 80%] for example), avoiding complete discharge and also letting the battery in charge for too long, which is also not good for his lifetime.
Sometimes we are so engrossed by our work that we don't notice when the battery level is too low or when it is already full. 

So I wrote a small customizable script that will vocally alert us of the level of the battery, asking us to plug or unplug it. The script is working on Debian based OS such as Ubuntu.

You can find the source code of the program [here](https://github.com/1001pepi/battery_level_alert) on my GitHub with all the instructions on how to run it and customize it as you want. 

I hope it will be useful for you, and I am also waiting for your feedback.

Thanks for reading...

1001pepi
Create A Responsive Grid In CSS
Tags: webdev, beginners, javascript, tutorial
Published: 2022-09-04 01:25:59


![Create A Responsive Grid In CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41idjxkneua5sd5t644p.jpg)
How to Create a responsive grid in CSS for your website is essential if you want to show multiple grids to attract the user. So, are you trying to create responsive grid elements?

As you know one size can’t adjust every screen size. Now, the current solution is a responsive grid that will modify based on the size of the screen by bearing a view on a screen. Developers begin to design a website framework for responsive grid requirements. But it might not be difficult as you think to code your own.

## How to create a responsive grid in CSS.

So, let’s start to write a few lines HTML code that will help to create a responsive grid.

```html
<div class="grids">
  <div class="grid">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
  <div class="grid">9</div>
</div>
```
CSS Code:
```CSS
html { 
font-size: 22px; 
}
body {
 padding: 1rem;
 }

.grid {
  background-color: blue;
  color: white;
  padding: 1rem;
  height: 4rem;
  font-size:50px;
}

.grids {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .grids { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .grids { grid-template-columns: repeat(3, 1fr); }
}
 
```

Well, you have all done now a time to check what your grid looks like save your file with the .html extension open this file to your web browser you will see the result.

Read More: [Create A Responsive Grid In CSS](https://softcodeon.com/tutorials/how-to-create-a-responsive-grid-in-css.htm)
Lets Start JavaScript With Me.
Tags: javascript, webdev, beginners, programming
Published: 2022-09-04 04:09:49

Hey 👋 , I am Muhammad Zubair. 

I am a computer science student. I am learning Full Stack (MERN) web development. Currently, I am making projects to practice, what I have learned throughout my Full Stack web development learning journey. 

This is actually an introductory post about what we are going to start learning together. We, will, be learning some core concepts of basic and advanced JavaScript. I will try my best to deliver my 100%. This will help us to keep our programming basics strong. Because as you know JavaScript is fundamental of web development. If we don't have much grip on JavaScript, then we won't be able to build beautiful dynamic websites

I will meet you in the next post with something new to learn. 

**Happy Coding !!** ⚡
Docker-based User-Profile handler JS Application
Tags: docker, beginners
Published: 2022-09-04 03:25:23

Hello Amazing people :wave: Here's a JavaScript application I built based on Docker containerized services for user-profile management purposes.

### GitHub 
[Code](https://github.com/miihirsawant-git/userprofile-DockerJS.git)

### Tools
-   Docker
-   HTML, CSS
-   MongoDB, Mongo-Express data storage
-   Nodejs backend

#### Building the application
-   Pull the images for `mongodb` and `mongo-express`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/decdyckatwhbm4emzu1i.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99930ss6r4qtrc48byft.png)


-   Create `docker network`


-   Start `mongodb inside docker container`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0vyvi2t8jbbp19fgs76.png)

- Start `mongo-express inside docker container`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2jzcy9b214zwz9dv4c8.png)


-   Open mongo-express from browser
  ```
    http://localhost:8081
  ```

-   Create `my-db` database in mongo-express dashboard.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dukk7iwqidpkx0wo5a4w.png)

-   Create `users` collection inside the database

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kxuokeled2w4hu0gawh.png)


- Start your nodejs application locally - go to `app` directory of project 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57vrlcomq621r68wb2o3.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx22hhxys1yhd3t4sa29.png)


- Access you nodejs application UI from browser
  ```
    http://localhost:3000
  ```
- Add a user profile in application UI

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch5p6evd3u2t27eo7s9z.png)


- Go to mongo-express dashboard and ensure addition of credentials


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0mpzp3xpi09nmh25epj.png)

### Completion
That's it, the Docker-based User-Profile handler JS Application is up and running!:partying_face: 

Feel free to add as many entries as you want, which can all be managed with the mongo-express dashboard.
Build A Hello World API With Node.js And Express.Js + Postman
Tags: javascript, node, tutorial, beginners
Published: 2022-09-04 02:06:48

## **Getting Started**

To get started create a new folder on any directory and call it hello_world.

`$ mkdir hello_world`

To move to that folder use this command.

`$ cd hello_world`


In your hello_world folder create a new file called app.js

`$ touch app.js`

The next step for us to do is to install Node. You can install node [here](https://nodejs.org/en/).

We are close to create the app.

After node has been installed then we’ll install express with npm. Node comes with npm so we won’t need to install npm.

`npm init`

Click the return key repeatedly for every questions asked of you on the command line.


## **Install Dependencies**

`npm install express —-save`

## **Setup The App And Create Our First Endpoint**
Now let’s get started creating our `hello_world` API in the app.js file.

`const express = require('express');
const app = express();`

## **Setting Server Port**
Add more code in our app.js file.

`const port =8000;
app.listen(port,()=> {
console.log(`Server is listening on port ${port}`);
})`

## **Create API**
Let's start writing code for our first API.

`app.get('/hello_world', (req, res)=>{
res.send('Hello World');
})`

get shows the HTTP GET 
First parameter is our API path
Second parameter a callback function
Callback function first request shorthand req
Callback function first response shorthand res

## **Start Server**
Hurrah...! We are just created the server with hello world API next step is pretty easy to start the server run that command.

`$ npm start`

## **Check postman**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmwo2b2b9u7m10q86i6o.png)

**Pretty Easy Congrats you tested it....?**

## **_Follow For more update and stay connected_**





![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w96a48b4wgf7nnu5zfll.gif)
Welcome to the Fediverse
Published: 2022-09-04 01:22:31

Here's a little app I threw together (link below), called **Quanta**, that allows you to doom scroll thru the Fediverse. For those who don't know, the Fediverse is kind of like an open source version of social media, that runs on a protocol called ActivityPub.

## [Quanta](https://quanta.wiki/tab/feed)
Fix: tailwind not working on Laravel 9 with Vite
Tags: laravel, php, tailwindcss, webdev
Published: 2022-09-04 01:06:52

If you having trouble loading your tailwind styles and everything looks fine. 

Try to add **this line** on your vite.config.js, it solve the problem for me. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6afd2924wu5anpztya5.png)

This error happens when Vite doenst recognize the localhost as a server/host.