teleren/devto huggingface dataset:
How to study programming correctly?
Tags: javascript, html, css, learning
Published: 2023-10-10 03:18:02

I would like to count on your help to discover which study methodologies are effective for each person. I'm looking for an approach that actually works and allows me to learn the content more effectively. I'm currently studying programming, but I feel like my learning curve is too low, like I'm going down the wrong path. I'm not sure if I should use mind maps, flashcards, or another specific strategy. If you can share your experiences and recommendations, I would be very grateful. At the moment I'm trying to learn HTML + CSS, to move on to JavaScript and then to PHP. Remembering that I have ADHD, and it is quite strong, hindering me a lot in my learning and making me procrastinate.

I tried just watching video classes and answering exercises, but the learning curve is very low. So I feel unmotivated and feel incapable of learning programming.
Notification List - inbox list Webview
Tags: flutter, webview, vue, notification
Published: 2023-10-10 03:00:01

When you create a mobile application and you has feature like create a inbox list for user but you want to save some time.
You think about using webview to display it, but looking on google you can't find anything.
Here's a post for you.

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

- [git document](https://github.com/vhgah/Notification-List-Webview)
Optimizing and Reducing AWS Glue Costs!
Tags: aws, beginners, tutorial, cloud
Published: 2023-10-10 02:39:42

Enhancing and Enhancing Glue Effectively!

Uncover the secret to maximizing efficiency and reducing your operational costs with AWS Glue: best practices and strategies that will make all the difference in your data infrastructure!

Discover more at

https://jlgjosue.medium.com/optimizing-and-reducing-aws-glue-costs-e7426fa732af


 Thank you for reading; share this post, please! } :)
Transforming Figma Designs into a Flutter App: A Journey
Tags: flutter, opensource, beginners, programming
Published: 2023-10-10 02:30:00

Introduction:
Designing a mobile application is an intricate process that begins with a vision. In our case, the vision was a sleek and intuitive cycling application. To bring this vision to life, we embarked on a journey that started in Figma and ended in Flutter, and we're excited to share our experience with you.

Designing in Figma:
We began by crafting the user interface (UI) and user experience (UX) in Figma. This stage allowed us to meticulously plan every element of our cycling app, from the onboarding screens to the in-ride statistics display. Figma provided a collaborative platform for our team to iterate and refine the design until it was just right.

Translating to Flutter:
Once our Figma designs were finalized, it was time to make them a reality. Flutter, Google's UI toolkit for building natively compiled applications, was our tool of choice. We started by creating widgets that mirrored our Figma components, ensuring pixel-perfect precision in the transition from design to development.

Challenges and Solutions:
Of course, no journey is without its challenges. We encountered issues with responsiveness, animations, and state management along the way. However, through research, experimentation, and collaboration, we overcame these obstacles and learned valuable lessons that we share in this post.

Open Source Collaboration:
Our project is open source, meaning you can access the codebase on GitHub and even contribute if you'd like. We believe in the power of community-driven development, and we invite developers and designers alike to join us in perfecting our cycling app.

Conclusion:
The transformation from Figma designs to a fully functional Flutter app was a rewarding experience. We've not only created a user-friendly cycling application but also enriched our knowledge in design, development, and open-source collaboration.

Explore the Project:

GitHub Repository: https://github.com/raman04-byte

Video Tutorial: https://youtu.be/ATIymbA_sYo

We hope this blog post provides insight into our journey and inspires you in your own design-development endeavors. Thank you for joining us on this ride!
Open github repo in Visual studio code without cloning or downloading on local
Tags: vscode, github, visualstudiocode, git
Published: 2023-10-10 02:23:58

Hey guys, many times we need to just download or clone the repo which we are not even going to keep in local for long time and delete it after checking the code in our IDE. So to remove all these and just review the github repo code online itself in popular VSCode editor we have a trick which can save a lot of your time.

**Step 1:** Click on the URL bar in your browser. (it should be editable now)
**Step 2:** Replace https://github.com/ with https://github1s.com/ and hit enter

And that's it 🤯😲.

now you can view all repo files and folders just like you view in your local vscode.

Hope that helped you 😊
Tauri: 10 Minute Docs Audits
Tags: rust, javascript, documentation, docsaudits
Published: 2023-10-10 02:19:10

Tauri is a UI framework. It's written in Rust and allows users to create desktop applications.

{% embed https://youtu.be/q-MDAG-2FTk %}

I run a technical documentation business specializing in writing and editing documentation. I made this series to share my insights and help projects craft impactful documentation.

## What's The Criteria?


3- Excellent
2 - OK
1 - Poor

**Purposeful:** Does the QuickStart explain what problem it's trying to solve? Who is the intended audience?

**UX Experience:** How seamless is the experience? Must the user create an account to get through the Quickstart? Does the Quickstart elicit a sense of joy and achievement?

**Accurate:** Are the instructions correct? Are they complete?

## [The Results](https://www.loom.com/share/61318e03bb354a85ba1b92cafa4ec340?sid=1f97658f-ffa8-474b-ab97-3b56724d6de6)

Tauri's Quickstart is *impressive*. I could get an app up and running in less than 10 minutes. The instructions were clear and accurate. Tauri should be proud of their docs. I rarely come across a Quickstart that made me feel accomplished so quickly. 


|               | Score |
|---------------|-------|
| Purposeful    | 2     |
| UX Experience | 3     |
| Accurate      | 3     |


Are you interested in a FREE Quickstart audit for your company? [Start here](https://forms.gle/5jDeuQraBwahkjT16).
Belajar Docker #3
Tags: docker, devops
Published: 2023-10-10 02:10:04

## Cara Download Docker di Linux ( Khusunya Linux LubuntuEenvirontment LXQT atau Non GNOME, KDE, MATE)

1. Kunjungi situs docker
2. Klik tombol download for linux
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gwjnq3qiyvmqs9bt2c.png)
3. Setelah klik download, akan diarahkan ke dokumentasinya, lalu scroll dikit, maka akan menemukan ini
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ive04gowk7y1qt444ozn.png)
lalu klik ubuntu tersebut
4. Setelah itu akan diarahkan ke halaman lain, anda akan menemukan ini.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkbrzy5b8fpltzyfduo5.png)
klik tembol tersebut, maka akan mendownload file docker sebesar 400++ mb.
5. Karena environtmentnya buka gnome, maka jalankan command ini
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kkgme0djy77tzipwaww.png)
Tunggu lanjutnnya :)
Web Scraping
Published: 2023-10-10 01:44:47

## Web Scraping

Web scraping, web harvesting, or web data extraction is data scraping used for extracting data from websites.

## Web Crawling

A **Web crawler**, sometimes called a **spider **or **spiderbot **and often shortened to crawler, is an Internet bot that systematically browses the World Wide Web and that is typically operated by search engines for the purpose of Web indexing (web spidering).

- Prosecuting Computer Crimes

## Robots.txt

robots.txt is the filename used for implementing the Robots Exclusion Protocol, a standard used by websites to indicate to visiting web crawlers and other web robots which portions of the website they are allowed to visit.

Example: https://booking.com/robots.txt

[Web Scraping Sandbox](https://toscrape.com/)

download_page.py

```python
import requests
from bs4 import BeautifulSoup

URL = 'https://toscrape.com/'

web_scraping_sandbox = requests.get(URL)
```

```python
web_scraping_sandbox.status_code 
# output --> 200
```

```python
web_scraping_sandbox.text

# output -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Scraping Sandbox</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link href="./css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                .
                .
                .
            </div>
        </div>
    </body>
</html>
```

```python
web_scraping_sandbox.headers
# output --> 
{'Date': 'Fri, 13 Oct 2023 02:20:03 GMT', 'Content-Type': 'text/html', 'Content-Length': '3939', 'Connection': 'keep-alive', 'Last-Modified': 'Wed, 08 Feb 2023 21:02:33 GMT', 'ETag': '"63e40de9-f63"', 'Accept-Ranges': 'bytes', 'Strict-Transport-Security': 'max-age=0; includeSubDomains; preload'}
```

```python
web_scraping_sandbox.request.method
# output --> Method: GET
```

Adding BeautifulSoup

```python
soap = BeautifulSoup(web_scraping_sandbox.text, 'lxml')
print(type(soap))
# output --> <class 'bs4.BeautifulSoup'>

print(soap.find('h2'))
# output --> <h2>Books</h2>
```

Under Construction


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79tbxaj9gmj1wubz8nxp.png)
Tantas opções... O que eu faço?
Tags: beginners, webdev, development
Published: 2023-10-10 01:20:52

O melhor conselho que eu posso te dar é: 

Conclua o que você iniciou. Termine seus cursos, termine seu livro, termine seu projeto... Apenas termine! Enquanto você evolui dentro do seu curso, ou do seu método de estudo, poste isso em algum lugar. Coloque-se em evidência. Mostre o que você está aprendendo ou o que você está construindo. Escreva suas opiniões sobre aquilo ou faça um artigo sobre. 

**Pare de pensar tanto!**

Não tem problema aprender Javascript e em seguida começar um novo curso de Python, é uma ferramenta, afinal, mais uma das milhares que talvez você possa conhecer durante sua carreira. Você não tá arruinando sua carreira em estudar front e em seguida estudar backend, você está construindo cada vez mais repertório. 

**Eu quero um emprego**

Adapte seu curriculo para a vaga, converse com recrutadores, entre em contato com a empresa deixando claro seu interesse pela vaga. Mostre projetos que você já construiu naquela linguagem e utilize o que você sabe além do que foi pedido como um diferencial. Use as ferramentas ao seu favor. 

**Continue estudando**

Não desista. É um papo chato, talvez, mas o que me faz impedir de desistir é o fato que estou mais perto a cada dia e se eu parar agora posso me arrepender profundamente. Vai dar certo, sim. Você vai conseguir! 

E lembre-se, comece e termine.
Introducing react-store-js: A State Management Library Tailored for React inspire in Svelte store
Tags: react, nextjs, svelte, store
Published: 2023-10-10 01:10:57


As developers in the ever-evolving landscape of web development, we are constantly seeking efficient tools that seamlessly integrate with our preferred frameworks. One such tool that caters to the React community is **[react-store-js](https://github.com/crewdevio/react-store)** – a state management library inspired by *svelte/store* but designed with the React philosophy in mind.

## Installation

Getting started with **react-store-js** is a breeze. Simply install it using npm:

```sh
npm i react-store-js
```

## Usage
**Initializing Global State**
To begin, initialize your global state using the createWritableStore function:

```javascript
// counter.store.ts

import { createWritableStore } from "react-store-js";

export const counter = createWritableStore(0);
```

## Using in Components

Now, in your React component, import the created store and employ the useWritable hook to interact with the state:
```typescript
// App.tsx

import { useWritable } from "react-store-js";
import { counter } from "./counter.store";

export default function App() {
  const $counter = useWritable(counter);

  return (
    <div>
      <button onClick={() => $counter.update(($counter) => $counter + 1)}>
        Count is {$counter.value}
      </button>
    </div>
  );
}
```

## Features
**_Type-Safety and Generics_**
react-store-js is fully type-safe, allowing you to leverage TypeScript's power. Generics can be utilized to enhance the typing of your states.


**_createWritableStore_**: Creates a mutable state for reading and updating.

**_createReadableStore_**: Creates a read-only state.

**_getStore_**: Retrieves the state directly.

## Hooks
- **_useWritable_**: Mutate, update, and read the state.

- **_useReadable_**: Read from read-only states.

- **_useDerived_**: Create a state based on other states.

- **_useSubscriber_**: Listen for state changes.

## Advanced Examples
**Inside Mutation with _createReadableStore_:**
```typescript
// time.store.ts
export const time = createReadableStore(0, (set) => {
  const intervalId = setInterval(() => set(Date.now()), 1000);
  return () => clearInterval(intervalId);
});
```
**Inside Mutation with _createWritableStore_:**
```typescript
// time.store.ts
export const time = createWritableStore(0, (set) => {
  const intervalId = setInterval(() => set(Date.now()), 1000);
  return () => clearInterval(intervalId);
});
```

react-store-js empowers React developers with a flexible and intuitive state management solution. Its simplicity, coupled with advanced features, makes it a valuable addition to your toolkit. Give it a try and elevate your React application's state management to the next level!
"Programmer need a learn Math"
Tags: programming, programmers
Published: 2023-10-10 00:50:39

# "Programmer need a learn Math", "Hey, if you want to learn code or script you need Math", this affirmative really seems like fallacy

Always, you really need Math for learning programming? 
**The answer: MAYBE!**

Math in programming is like a similar physic or chemistry in our life, because in programming we learning math abstractions like geometry(x, y, ~~maybe z~~), Sum. See this example:

**Sum in the normal case**

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

*This operation, intuitive remember one "classic loop for"*

**Sum in Java:**
```java
public class SumDemonstration {
    public static void main(String[] args) {
        int n = 10;
        int m = 0;

        for (int i = 1; i <= n; i++) {
            m += i;
        }

        System.out.println("The sum of numbers from 1 to " + n + " is: " + m);
    }
}
```

---

***"WOW this loop for I use the all times"***
- Yeah this intuitive math in programming. But this concepts abstract like a enough.

### The math importance! 
**Obviously math have a great importance in the many software development, why? Games, Great Apps(COMPLEX), BigData and all software. But, not all software needs advanced mathematics, but at least the basics will be in the code!**
Jmeter 테스트
Tags: jmeter, performance, testing
Published: 2023-10-10 00:49:13


###로컬에서 분산 테스트를 위한 설정(마스터)

- Jmeter.properties 수정

```
# 슬레이브 설정
# Remot Hosts - comma delimited
remote_hosts=localhost:1099,localhost:1100 # ip or domain
```

###로컬에서 분산 테스트를 위한 설정(슬레이브)

1. jmeter-server.bat 복사하여 jmeter-server1.bat,jmeter-server2.bat 생성
2. jmeter-server1.bat, jmeter-server2.bat 수정

```
# 1번 슬레이브
@echo off
set SERVER_PORT=1099

# 2번 슬레이브
@echo off
set SERVER_PORT=1100
```

###로컬에서 실행 (마스터)
```
# 로컬 테스트
$ jmeter -n -t 스크립트명.jmx -R localhost:1099,localhost:1100
```

###스크립트구성
- Thread Group 우클릭 >Sampler>HTTP Request 추가

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

- Http Request 우클릭 > Add> Listener> Summary Report, View Results Tree 추가
DNA 安吉数字游民公社体验报告
Published: 2023-10-10 00:21:14


- **1、偏僻**：
> 相当偏僻，做好心理准备，周边啥都没有，想好吃好喝的是不可能的；
而且周边仅有的几家饭店价格是相当的昂贵，比杭州贵，价格与上海差不多，附近有一家做西式烧烤的，价格比上海还贵；
附近有一家大食堂，味道一般，餐品相当少，没人吃，基本也就DNA的人；

- **2、脏乱**：
> 大部分公共区域稍脏，非常乱，厨房更是像粪堆一样，我是无法忍受;
关于这个问题和我管理方的小客服反馈过，大概意思是不能管的太严，管的太严伤害大家的情感；
大致的管理理念是村民自治；
其实有大概4-5个阿姨每天会清理打扫的，但是偏“自治”的管理理念造成的结果是脏乱；

- **3、宿舍**：
> 有个肮脏的舍友，宿舍味道啊，真是一言难尽；
霉味夹杂着馊味，还有狗味（其实狗味比较淡我都还能接受）；
在这秋高气爽20度左右的天气，还要开空调，并且是一天24小时开，人不在也开，我只要是给关了，他一定会给开开，并且人离开了也是保持开放；
窗户一直关闭，从来不开，我只要打开，那他一定会把他关上；
本来就臭，你能想象在一个从来不通风的密闭小空间，并且空调吹着暖风，这屋子该是什么滋味！
煮饭的锅具是从来不洗的（或是好几天洗一次）;宿舍里到处都是乱起八遭堆得他的东西，衣服鞋子一堆一堆（臭味的主要来源），园区是有免费的洗衣机烘干机的，不懂为何不清洁；

- **4、对于社区管理的看法**：
> 这种偏自治的管理方式是行不通的，具体道理我就不展开说了，只要看看现在的结果，管理方也该清醒清醒；
共产主义实践在N年前就已经失败了，何必重蹈覆辙；
人性本恶，相信每个人是善良的使我们的愿景，是我们与人打交道该有的友好信念；但是如果把相信每个人都是善良的，积极的，利他的，乐于奉献的，这种理念运用于管理，利用他们的崇高的品质“自制”一定会失败
A sample project showing ElysiaJS running as the Next.JS custom server
Tags: nextjs
Published: 2023-10-28 15:13:03

---
title: A sample project showing ElysiaJS running as the Next.JS custom server
published: true
date: 2023-10-10 00:14:00 UTC
tags: Nextjs
canonical_url: https://reactjsexample.com/a-sample-project-showing-elysiajs-running-as-the-next-js-custom-server/
---

# Bun + ElysiaJS + NextJS
# ![A sample project showing ElysiaJS running as the Next.JS custom server](https://reactjsexample.com/content/images/2023/10/Code_2023-10_11-09-49.jpg)

demo-video-bun.mp4

<video src="https://user-images.githubusercontent.com/14848722/272983772-5f1c9e70-f2fd-4e21-ae03-4bdbad8215db.mp4" data-canonical-src="https://user-images.githubusercontent.com/14848722/272983772-5f1c9e70-f2fd-4e21-ae03-4bdbad8215db.mp4" controls="controls" muted="muted" style="max-width:100%;min-height: 200px"></video>

[Demo Deployment](https://bun-elysia-nextjs-production.up.railway.app/)

A sample project showing ElysiaJS running as the Next.JS custom server with full end-to-end typesafety similar to tRPC and ts-rest. You get to define the route paths (unlike with tRPC) and no extra boilerplate is needed (unlike with ts-rest contracts). All running on the fast bun runtime.

You can access Bun globals in React Server Components (for example, Bun.password, Bun.file). Hot Module Reloading is also supported.

Tested with bun v1.0.4

## Production Deployment

Simply run `bun build` and wait for NextJS to build the pages. Then you can start the server in production mode with `bun start` or run the entrypoint with `NODE_ENV` set to `production`. This will serve the built NextJS pages from the .next folder in the process’s cwd.

Based on my measurements, this basic app uses 0% CPU on idle and ~280MB of RAM on start. This is compared to normal Node.JS which uses ~400MB for a similar sized app.

### On Railway (nixpacks)

[Railway](https://railway.app?referralCode=ESBdK3) is a simple cloud deployment platform and with their Nixpacks builder, you can deploy this project with a single click. On their dashboard, just connect your GitHub repo and sit back and relax.

### With Docker

soon™️

## GitHub

[View Github](https://github.com/ItzDerock/bun-elysia-nextjs?ref=reactjsexample.com)
Which Skill Has the Potential to Change Your Life?
Tags: discuss, codenewbie, beginner
Published: 2023-10-10 00:00:00

---
published_at : 2023-10-10 00:00 +0000
---
What skill do you believe has the potential to transform your life, and how will you approach mastering it?
Dive into the profound impact a specific skill could have on your life and your strategy for acquiring it.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Which Beliefs or Practices Have You Reevaluated Over Time?
Tags: discuss
Published: 2023-10-10 00:00:00

---
published_at : 2023-10-10 00:00 +0000
---
Discuss any ideas or habits you've reconsidered in your life's journey, from multitasking to low carb diets. How have your perspectives evolved?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Does anyone else hate Jest?
Tags: discuss, javascript
Published: 2023-10-09 23:38:37

I'm usually not this full of hatred, I promise, but lately I've realized that I really hate Jest.

Whenever I have a choice, I use Mocha for new projects, and find it a breeze to use.

As far as I can tell, the root cause of my hatred is Jest's custom module loader, causing my modules to get loaded in a completely different way when running under Jest compared to running under ts-node or node. This leads to many scenarios where if I configure my project a certain way, I have to go and configure Jest in some different, non-obvious way, often involving installing Jest plugins, leading to a giant, un-updatable dependency tree of plugins. Or sometimes I just can't get it to work, period.

One lasting problem, and maybe it's fixed by now (I've long since given up), is that it's somewhere between very hard and impossible to use ES modules with Jest, especially if you've got TypeScript in the mix too. Just can't make it work. Even the Stackoverflow gods didn't have a solution.

So now I've got a CJS project with Jest. That's fine I guess. Until I want to use an NPM module that only supports ESM. But I can use dynamic import, right? Wrong. Works fine when I run my code with ts-node, but Jest chokes on it and can't load the module. Once again even the great Stackoverflow gods can't help me. I swear nothing brings me groveling to their altar as often as Jest does. And all for naught.

With Mocha, I remember it wasn't super simple at the beginning, but with some effort I was able to crack the code, so-to-speak. I have a project template with Mocha that supports ES modules just fine. Supports the VS Code debugger just fine. Supports TypeScript just fine no matter how I configure it. I haven't been able to achieve hardly any of that with Jest.

I realize Jest has some cool features like parallelism, but I've rarely if ever had a Node.js project that benefited from them. I know it has a lot built in for testing React and other frontend code as well, maybe it's great for that, I've never used it for that purpose, so I am simply ignorant there.

I'll end my rant there. Has anyone else had similar struggles? Have you cracked the code with Jest? If so, please, show me!