teleren/devto huggingface dataset:
The Zhihui Platform
Tags: vite, vue, programming, rust
Published: 2022-08-29 00:10:00

It is a platform for schools, and it can post data, etc., faster and safer.

Here is not a flag, because I have created the plan for this platform. However, as you know, I am a student in Junior 3, and will join the high school entrance examination soon. So I have little spare time to develop this.

As a chairman in the student union of my school, I have some experience when administrating and so on. I can put these exp on this platform so that the platform can help us more.

This platform's biggest feature is *simple but strong*. What "simple" means is that it can use the least memory, time to finish the most task. Sometimes, we may go through whole school, from west to east, to report a message, or put a deduction table.
Through this platform, things becomes more easy. We can only edit a "message" or edit a "deduction table", and click the "Submit" button, the message will autoly send to the target.

At the same time, we are putting our heart to solve the problems of the instant communication application in *DLAN*, such as *RTX*. For the most reason, these app is old and ugly. Also, these old app cannot adapt for the communicate env **now**. So, we will put a communication product in this platform natively, and use the same design & develop & operation style to contribute it.

We are designing the icon of this platform, and it must be Chinese. "智会" is the origin name for this platform. "智" in Chinese means **smart**, and "会" in Chinese means "can".
The pronunciation of "智会" is same as "智慧" which means things that full of knowledge. I think this platform will also full of knowledge when we finally have produced it.
"会" is similar to the school in simple drawing. So we might use the school icon to replace the "会", and it must be great. It expresses not only "会" that means "can", but also it is a platform for schools, for more easy and direct school administration.
How To Push Array Element In Node.js
Tags: javascript, node, array, jquery
Published: 2022-08-29 03:12:17

In this article, we will see how to push array elements in the node js example. Also, learn how to push objects in an array in node.js. The push() method adds new items to the end of an array. The push() method changes the length of the array. The push() method returns the new length.

So, let's see node js array push key value, and how to push element in the array in javascript.

> Example 1: push() function

push() is an array function from node.js that is used to add element to the end of an array.

Syntax:

```
array_name.push(element)
```

```
push_array = [2, 4, 6, 8, 10, 12];
  
push_array.push(14);
  
console.log(push_array);
```

Output:
```
[ 2, 4, 6, 8, 10, 12, 14 ]
```

---
 
**_[Read Also: Laravel 8 Eloquent whereHas Condition](https://techsolutionstuff.com/post/laravel-8-eloquent-wherehas-condition)_**

---
 
> Example 2 : Key and Value

Now, we will see key and value push in an array object.

```
key_val_arr = [
    {id: 1, name: "dell" },
    {id: 2, name: "apple" },
    {id: 3, name: "hp" }
];
  
key_val_arr.push({id: 4, name: "acer"});
  
console.log(key_val_arr);
```

Output :
```
[

{ id: 1, name: 'dell' },

{ id: 2, name: 'apple' },

{ id: 3, name: 'hp' },

{ id: 4, name: 'acer' }

]
```
 
> Example 3: unshift() function

In this example, we will add key and value in the first position of the array object using unshift() function.

```
key_val_arr = [
    { id: 1, name: "dell" },
    { id: 2, name: "apple" },
    { id: 3, name: "hp" }
];
  
key_val_arr.unshift({id: 4, name: "acer"});
  
console.log(key_val_arr);
```

Output :

```
[

{ id: 4, name: 'acer' },

{ id: 1, name: 'dell' },

{ id: 2, name: 'apple' },

{ id: 3, name: 'hp' }

]
```
VS Code Tip of the Week: Exclude Git Ignore
Tags: vscode, vscodetips, git
Published: 2022-08-29 03:10:00

This week's tip is the Exclude Git Ignore user setting. This is a great feature to declutter the tree explorer of VS Code with files your project ignores via its `.gitignore` file.

The setting can be enabled/disabled in your user settings for VS Code. You can open the settings starting the command palette and searching for settings.

![VS Code command palette open with the search term settings entered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joetfhq6eij4ikvh0jjv.png)

The user settings window opens. Search for `gitignore` and press the <kbd>ENTER</kbd> key or use the filter button. Ensure the Explorer: Exclude Git Ignore option is checked.

![VS Code user settings user interface open and filtered on the word gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdmc4fiaxbnpyyclmize.png)
 
You can also change the settings in `settings.json`. Open the command palette again and search for settings. This time select Settings (JSON).

![VS Code command palette open with the search term settings entered and Settings (JSON) is selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4stn97fb36eqvheamry.png)
 
In the settings.json file, add the following key/value pair:

`"explorer.excludeGitIgnore": true`

And that's it!

{%embed https://youtu.be/WKkkgK4FqvM %}

Happy VS Coding!
Data Types in Java
Tags: javascript, webdev, programming, tutorial
Published: 2022-08-29 02:59:19


**Data types specify the different sizes and values that can be stored in the variable. There are two types of data types in Java:**

## Primitive data types:
 The primitive data types include boolean, char, byte, short, int, long, float and double.

## Non-primitive data types:
 The non-primitive data types include Classes, Interfaces, and Arrays
Print Alternate elements in array...
Published: 2022-08-29 02:47:27

The Idea is simple to print the Alternate elements in array for that as beginner who have to hands on some traverse an array using for loop so if you have that idea how to traverse an array then it is easy to you find alternates elements in array if you dont have knowledge about how to traverse an array then here is some resources where you can learn basic of programming [LINK](https://practice.geeksforgeeks.org/referral/ROSHAA037Y)

Now come for solutions i explained solutions in some steps follow this steps to understand the idea
**Step 1** Using For Loop Traverse an array throughout its size or leneght

**Step 2** Increment array by two number using ** i = i + 2**

thats all you need to know for print alernate elements in array

Now Lets Check The code, and you will get complete clearance about the logic 

`class Test {
Public static void main(String args[]) {
int arr[] = {1, 2, 3, 4, 5};
int sizeOfArray = arr.length;
for(int i = 0; i<sizeOfArray; i = i + 2) {
System.out.print(arr[i]+" ");
  }
 }
}`

**the output will : 1, 3, 5**
Array Partition - I
Tags: javascript, leetcode
Published: 2022-08-29 02:45:09

```
var arrayPairSum = function(nums) {
     nums = nums.sort((a,b) => a - b);
    let output = 0;
    
    for (let i = 0; i < nums.length; i++) {
        output += Math.min(nums[i], nums[i+1]);
        i++;
    }
    
    return output;
};
```
Redis Light, Green Light
Tags: redishackathon, redis, flask, socketio
Published: 2022-08-29 02:44:40

---
title: Redis Light, Green Light
published: true
description: My submission to the Redis Hackathon on DEV!
tags: redishackathon, redis, flask, socketio
---

### Overview of My Submission

I recreated the game "Red Light, Green Light" using Python, TypeScript and Redis!

One day in early August I was browsing DEV while re-watching MrBeast's Squid Game recreation video in the background when I came across the Redis Hackathon article. Then I got a crazy, random idea: **Redis Light, Green Light**! 

![Redis Light, Green Light](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3rqy7eqz40nqk1e04jj.png)

I became determined to create my own online, real-time, multi-player version of Red Light, Green Light powered by Redis and submit it to the Wacky Wildcard project category for my chance to win the hackathon!

I used my favorite languages and frameworks for rapid prototyping: Python with Flask to power the backend and TypeScript with the Nuxt.js framework to build the frontend components for my game.

For real-time communication I added the `Flask-SocketIO` library to my Flask app and the `socket.io-client` library to my Nuxt app. I also added celery for scheduling and processing async tasks. Redis was used as the message queue for websocket messages and it was also used as the broker for celery tasks.

This was my first project working with Redis Stack and Redis OM and I really liked using these tools. I stored most of my data in hashes, and the Redis OM library is perfect for using this data type. I also used Redis streams for the first time which was a lot of fun.

The backend application services include:

- Flask server (for API endpoints and Websocket handlers)
- Celery beat task scheduler (for scheduling tasks to change the light color in each room)
- Celery worker (to change the light color for a room and to update that players in that room via Websocket)

![Project Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0egpm1igfqyon5kjtujv.png)

Please check out the video below for more details about how the project works.

### Submission Category

Wacky Wildcards

### Redis Light, Green Light YouTube Video

{% youtube BoalZKmgoEU %}

### Language Used

Python. Honorable mention for JavaScript.

### Link to Code

{% embed https://github.com/briancaffey/redis-light-green-light-dev-to-hackathon %}

### Additional Resources / Info

![Redis Light, Green Light gameplay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkmgiz8wtq484rn6dmfc.png)

![Redis Streams](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujjvd5vjqcotjxn2jcms.png)

- - -

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Install TailwindCSS di Vue 3
Tags: tailwindcss, vue, javascript
Published: 2022-08-29 00:06:38

1. Pertama install tailwind dengan dependensi-nya dengan perintah berikut.

```
npm install -D tailwindcss postcss autoprefixer
```
![Install TailwindCSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w28owqiz8zhyyv98jstd.png)
 
2.Lalu buat file confignya dengan perintah berikut

```
npx tailwindcss init -p
```
![Generate tailwind Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xkhb8enivfrreiqlpv4.png)
 
3.Lalu lakukan config tailwind sebagai berikut di file `tailwind.config.js`
Ubah

```
content: [],
```
Menjadi

```
content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
```
4.Buatlah sebuah file `src/assets/css/tailwind.css` lalu isikan sebagai berikut 

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
5.Import **tailwind.css** di file **main.js** dengan code berikut

```
import '@/assets/css/tailwind.css'; 
```
![Import tailwind.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jg4nplqqlebqslh7kkzl.png)
 
6.Buka file App.vue dan ubah semua isinya dengan code berikut

```
<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<script>

export default {
  name: 'App',
}
</script>
```
7.Jalankan perintah berikut

```
npm run serve
```
![Run VueJS di Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bos2l1jvzhwg4u3nutss.png)
 
8.Lalu buka di browser, maka hasilnya seperti berikut
![VueJS Running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51obccz3p55f241gx0zm.png)
The Has Selector in CSS
Tags: css, beginners, html
Published: 2022-08-29 02:39:53

This is a selector that I've been looking forward to for a long time!

The ability to trigger some css based on if something else is happening on the page is pretty useful.

One quick example that came up on my own site was to style the filenames I have above my code snippets.

It follows the format of:

``` html
<p>hoc.y</p>
<pre>
...
</pre>
```

I want to be able to style the p tags that have a pre that follows them. The other p tags should be left alone.

Now with the has selector this is possible!

``` css
p:has(+ pre) {
    font-style: italic;
    margin-bottom: 5px;
}
```

This will style just the p tags that are followed by a pre.

You can start using this but currently it is in the Chrome beta for version 105 and Firefox is still gated behind an about:config option but I haven't been able to get it to work yet.

MDN link:

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Chrome link:

https://www.google.com/chrome/beta/
🤝 Alternatives of Heroku
Tags: paas, heroku
Published: 2022-08-29 02:39:35

Published an article about alternatives on medium.
https://medium.com/p/a0b378528fd1

This is a simple version of that.

Fly.io https://fly.io/
render https://render.com/
Railway https://railway.app/
Nopeus https://nopeus.co/
pythonanywhere www.pythonanywhere.com
APPLIKU https://appliku.com/
Adaptable https://adaptable.io/
Qoddi https://qoddi.com/
Deta Cloud https://www.deta.sh/
Glitch https://glitch.com/
replit https://replit.com/
Engine Yard https://www.engineyard.com/
OCI Cloud https://www.oracle.com/cloud/free/ 

### self-host
Coolify https://coolify.io/
Capover https://caprover.com/
dokku https://dokku.com/
piku https://github.com/piku/piku
kubero https://github.com/kubero-dev/kubero
Authorization In Node.js, All You Need To Know
Tags: javascript, webdev, beginners, tutorial
Published: 2022-08-29 02:19:39

#What Is Authorization?🤔🤔🤔
 Authorization is a security mechanism used to determine user/client privileges or access levels related to system resources, including computer programs, files, services, data, and application features. Authorization is normally preceded by authentication for user identity verification. Or 
Authorization is simply a process of granting or denying access to resources. Which comes after Authentication 

####So What's Authentication
In simple terms, it's the process of verifying the identity of a user.
-----
Then Authorization gives you access to pages either as a user or an admin.

##How Do I Do This On Node.js?😣😣
*No need to worry it's quite simple*
The package popularly used for Authorization is the JSONWEBTOKEN (JWT) 
####JSONWEBTOKEN(JWT)
JSON Web Token is a proposed Internet standard for creating data with optional signature and/or optional encryption whose payload holds JSON that asserts some number of claims. The tokens are signed either using a private secret or a public/private key.
This means that JWT produces a token for you as a user or admin when you are authenticated. Now, a SECRET key will be compared to your generated token every time you attempt to access a route. You won't be granted access to this page if this doesn't match or the token is invalid.
-----
_____
I used the BEARER token for my project but we also have the OAuth2.
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzMGE3MjQxNGE3MzFjZWY2MTE3NGY4MyIsImlhdCI6MTY2MTYyOTA5NiwiZXhwIjoxNjYxNzE1NDk2fQ.QYFUATkHwoXCO7x8-588KjLGnfy6OgG740OScGxCz6o => This is what a bearer token looks like.
----
````Javascript
exports.isAuth = async (req, res, next) => {
  try {
    const token = req.headers.authorization.split(' ')[1];

    if (!token) {
      return res.status(401).json({ message: 'Token Is missing' });
    }

    const decoded = await jwt.verify(token, process.env.SECRET_KEY);
    if (!decoded) {
      throw new Error();
    }
    req.user = decoded;
    next();
  } catch (e) {
    return res.status(401).json({ message: 'Token expired' });
  }
};
```
This is an example of how your Authorization file will look 

####Now you import the block of codes in your routes
````Javascript
const express = require("express");
const { addHouse } = require("../controllers/house.controller");
const { isAuth } = require("../middleware/isAuth");

const router = express.Router();

router.post("/create", isAuth, addHouse);
module.exports = router;
````
####And there you have it you just secured your routes by adding AUTHORIZATION.
Redesigning Layout / Git setup - Day 5(ish) of coding
Published: 2022-08-29 02:17:43

Back after a minute hiatus, I had some time today to really sit down and work on the friend manager app. 

I decided last time I want to try something new with the layout resembling a computer desktop, with icons that can be moved around and a status bar of some sort. 

Accomplished:
* Set the project up on [git](https://github.com/booleanings/friend-mgr) 
* Created new branch for the desktop view changes
* Moved around the friends list to be the full width
     * Still trying to figure out how I can use z-index to layer the windows on top of the desktop.
* Created new status/toolbar component fixed at the bottom with save button and search bar 
     * Want to animate these more in the future and make them more compact.

Getting a little bit closer to what I want.

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

For next time, I want to:
* Figure out layering of the windows on top of the desktop
* Create bounds for the draggable windows - so they can't be dragged onto the status bar
* Style the status bar better - possibly with a clock & icon
* Get context menus working
Not Fancy Countdown Timer (Vue)
Tags: codepen
Published: 2022-08-29 01:52:33

<p>A simple, not fancy at all,  Countdown Timer. Part of the #NotFancyAppChallenge. </p>

<p>Features include:</p>

<ul>
<li>Select desired countdown time</li>
<li>Display countdown time</li>
<li>Display countdown end time</li>
</ul>

{% codepen https://codepen.io/harunpehlivan/pen/wvmLEbq %}
HTML - como deixar seu website Acessível
Published: 2022-08-29 00:44:00

O desenvolvedor web tem uma grande relevância quando o assunto é acessibilidade, pois ele tem o poder de democratizar as informações e pode usar uma simples ferramenta que pode mudar por completo a interação do usuário em um website.

Por isso quero falar do texto alternativo que é utilizado para descrever o conteúdo de uma imagem. Ele é inserido através do atributo 'alt' na tag <img->. 

Além de auxiliar o usuário em situações, como um erro no carregamento da imagem devido a uma conexão ruim ou até um erro na url da imagem, é também de suma importância para as pessoas com deficiência visual. 
Visto que é pela descrição da imagem que as pessoas cegas conseguem identificar do que se trata o “gráfico” (nome dado pelos leitores de tela para sinalizar que naquele local existe uma imagem, mesmo quando não existe o alt na tag img).

É isso mesmo! Quando não colocamos um 'alt' em nossa tag, as pessoas com deficiência visual sabem que existe uma imagem no conteúdo do seu site, porém, não sabem do que se refere, o que traz uma experiência muito ruim para o usuário.

Dicas de como fazer um atributo 'alt' de qualidade.

Procure ser deixar tudo claro e objetivo. 

Por exemplo, um site de notícias, neste site existe um artigo que conta sobre uma ONG que ajudou uma comunidade carente com agasalhos e alimentos. 

Dentro deste conteúdo temos uma imagem que mostra as pessoas da ONG X entregando as doações para a comunidade, neste caso, criamos um 'alt' com a seguinte descrição: “Responsáveis da ONG X entregam doações à comunidade carente”.

O texto deve ser simples e direto a respeito do que se trata a figura, porém, quando a imagem tem mais um objetivo, como trabalhar a palavra-chave: “São Paulo” e “Amigos do bem”, neste exemplo, a palavra “São Paulo” teria o intuito de que o Google indexasse a notícia para esta região e já a palavra “Amigos do Bem”, seria mais um nome popular da ONG, como as pessoas da região conhecem. Como faríamos neste caso? A descrição poderia ser: “Amigos do bem (ONG X) entregam doações à comunidade carente em São Paulo”.

**Exemplos de um HTML de imagem:**

**Exemplo 1 (Certo!)**: Com alt declarado e preenchido de vazio
_

<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ /->
_

**Exemplo 2 (Certo!):** Com alt declarado e preenchido
_<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” /->_

**Exemplo 3 (ERRADO):**  Com alt declarado, mas nulo
_<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” /->_

**Exemplo 4 (ERRADO):** Sem alt declarado
_<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” /->_

Ao criar o atributo 'alt' para suas imagens, sempre lembre que o objetivo é descrever a imagem para aqueles que podem não são capazes de vê-la. Deve-se levar em consideração que o SEO e as palavras-chave são definitivamente importantes.
Chrome插件开发 - Using storage
Published: 2023-08-13 02:16:32

---
title: Chrome插件开发 - Using storage
published: true
date: 2022-08-29 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/using-storage
---

在这篇文章，我们将把我们已经非常出色的弹出式浏览器扩展变得更加个性化。

为了维护用户选择的内容，我们将利用 chrome 的存储能力。

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/storage_fdefvm.webm"
  autoPlay
></video>

## 增加浏览器扩展存储权限

修改`manifest.json`，在权限数组新增`storage`

```json
{
  "permissions": ["alarms", "notifications", "storage"]
}
```

编写扩展主体

```jsx
import {useState} from 'react'

const colorMatch = {
  indigo: 'bg-indigo-400',
  pink: 'bg-pink-400',
  purple: 'bg-purple-400'
}

export function App() {
  const [color, setColor] = useState('indigo')

  const createNotification = () => {
    chrome.alarms.create('motivation_alarm', {
      periodInMinutes: 60
    })
    window.close()
  }

  const stopNotification = () => {
    chrome.alarms.clearAll()
    window.close()
  }

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color)
  })

  const pickColor = (pickedValue) => {
    setColor(pickedValue)
    chrome.storage.sync.set({color: pickedValue})
  }

  return (
    <div
      className={`flex flex-col items-center justify-center w-screen h-auto ${colorMatch[color]} p-4`}
    >
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
      >
        <option>Pick a color</option>
        <option value="indigo">Indigo</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
      </select>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Motivate me 🎉
      </button>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={stopNotification}
      >
        Stop motivating me 😅
      </button>
    </div>
  )
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/storage)
How to Build a CRUD App with React and ButterCMS
Tags: crud, webdev, react, headlesscms
Published: 2022-08-28 23:48:37

Interested in seeing a #CRUD app in action? Learn how to perform CRUD operations by building a simple employee payroll application powered by #react + ButterCMS!

https://bit.ly/3AqCuU7

#headless #cms #developers