teleren/devto huggingface dataset:
JS Study Notes(1) CN
Published: 2024-04-10 05:55:25

study note. study from: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript

## 一、 什么是JS

高层定义：

1. 有了JS，网页展示的信息不再是简单的静态信息，而是实时的内容更新（i.e. 交互式的地图，滚动播放的视频）
2. HTML/CSS/JS的层次结构

- HTML 会将文本标记，赋予结构和目的
- CSS用来装饰，让文本变得更好看
- JS用来实现动态行为

## 二、 它到底可以做什么

### 2.1 可以做到普通的编程特性

1. 在变量中储存有用的值e.g. 请求客户输入一个变量名，将这个名字输入到name变量中
2. 操作一段文本，e.g.将两个字符串结合起来
3. 运行代码以响应网页中发生的特定事件。

### 2.2 令人兴奋的功能

1. 应用程序接口 API-Application Programming Interface
    
    ### API分为两类：
    
    - 浏览器API：
    1. ！！文档对象模型DOM(document obj model) e.g. 某个页面出现了一个弹窗，或者显示了一些新内容
    2. 地理位置API： 获取地理信息
    3. 影音类API： 利用多媒体，在网页中直接播放音乐和影片
    - 第三方API- 没有默认嵌入浏览器，一般要从网上获取他们的信息：
    1. 推特API： 可以在网站上展示最新推文
    2. 谷歌地图API： 可以在网站嵌入定制的API
    
    # 三、 JS在页面上做了什么/JS运行时，背后发生的事情
    
    ### 3.1 过程
    
    浏览器在读取一个网页时，代码(HTML/CSS/JS)将在一个运行环境(浏览器标签页)中得到执行。
    
    - 注意！： 网页文档的代码需要按照其在页面上出现的顺序加载和执行。e.g. 如果JS先于要修改的HTML和CSS加载和运行，则可能发生错误。
    - 每个标签页中的代码独立运行。一个标签页的代码不影响另一个。
    
    ### 3.2 JS运行次序
    
    - 引用对象前，必须确保对象已经存在：
    
    ```jsx
    const para = document.querySelector("p");
    
    para.addEventListener("click", updateName);
    
    function updateName() {
      const name = prompt("输入一个新的名字：");
      para.textContent = `玩家 1：${name}`;
    }
    ```
    
    比如调用第三行代码的时候，必须确保第一行代码已经存在。
    
    ## 3.3 编译代码(Compile) vs解释代码(Interpret)
    
    ### 1. 区别：
    
    解释型语言
    
    - 在解释型语言中，代码自上而下运行，且实时返回运行结果。
    - 代码由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式被接收和处理。
    
    编译型语言
    
    - 代码需要转化/编译成另一种形式才能运行
    - 比如C/C++先被编译成机器码，然后再由计算机运行。
    - 程序将以二进制（由程序的源代码产生）的格式运行
    
    ### 2. JS是什么
    
    - JS是轻量级解释型语言。
    - 浏览器接收到JS代码，并以代码自身的文本格式运行。所有的JS转换器，都运用了一种叫做即时编译(just-in-time compiling)的技术.
    - JS会被编译成二进制格式。但是因为编译过程在代码运行中，而不是之前，所以JS仍然是一门解释型语言
    
    ### 3. 服务器代码 vs客户端代码（取决于代码在哪里运行）
    
    JS既可以作为服务器端代码，也可以作为客户端代码
    
    - 客户端代码是在用户的电脑上运行的代码。i.e. 在浏览一个网页时，网页的客户端代码会被下载，然后由浏览器来运行并展示。
    - 服务器端的代码，在服务器上运行，然后运行结果，由浏览器下载并展示出来。
Next js Styling
Tags: nextjs, react, webdev, softwaredevelopment
Published: 2024-04-10 05:52:00


### Basic CSS styling in Next.js

Next.js supports traditional CSS styling methodologies. You can include CSS files directly into your components or pages, and Next.js takes care of bundling and optimization during the build process.

```css
/* styles.css */
.container {
  max-width: 960px;
  margin: 0 auto;
}

.title {
  font size: 2rem;
  color: #333;
}
```

```javascript
// pages/index.js
import React from 'react';
import styles from './styles.module.css';

const HomePage = () => (
  <div className={styles.container}>
    <h1 className={styles.heading}>Welcome to Next.js</h1>
    <p>This is a basic example of CSS styles in Next.js.</p>
  </div>
);

export default homepage;
```

### CSS modules

CSS modules offer a modular approach to styling that allows you to encapsulate styles within individual components. Next.js provides built-in support for CSS modules, allowing scoped styling without the risk of class name collisions.

```css
/* button.module.css */
.button {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}
```

```javascript
// components/Button.js
import React from 'react';
import styles from './button.module.css';

const Button = ({ children }) => (
  <button className={styles.button}>{children}</button>
);

export default button;
```

### CSS-in-JS with styled components

For those who prefer a more dynamic and expressive approach to styling, Next.js integrates seamlessly with popular CSS-in-JS libraries such as Styled Components. Styled components allow you to write CSS directly into your JavaScript files using tagged template literals.

```javascript
// components/Button.js
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = ({ children }) => (
  <StyledButton>{children}</StyledButton>
);

export default button;
```

### Global styles

Next.js also supports global styles, allowing you to define styles that apply to your entire application. You can include global styles by importing CSS files into the `_app.js` file, which acts as an entry point for your Next.js application.

```javascript
// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;
```

### Conclusion

Styling in Next.js offers a plethora of options to suit different preferences and requirements. Whether you opt for traditional CSS, CSS modules, or CSS-in-JS solutions like Styled Components, Next.js provides a flexible and intuitive platform for efficient style management.
Promise in Javascript
Tags: webdev, javascript, programming, node
Published: 2024-04-10 05:41:15

Description
A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

---

A Promise is in one of these states:

While a Promise object is "pending" (working), the result is undefined.
When a Promise object is "fulfilled", the result is a value.
When a Promise object is "rejected", the result is an error object.

myPromise.state	myPromise.result :
"pending"  ->	undefined
"fulfilled" ->	a result value
"rejected"  ->	an error object

Exmample :

```
[Promises](function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);)
```
789betat
Tags: webdev, javascript, beginners, programming
Published: 2024-04-10 05:37:52

789bet.at là nhà cái có giấy phép cá cược trực tuyến hợp pháp bởi Isle of Man và Khu kinh tế Cagayan and Freeport cấp. Với kinh nghiệm cùng danh tiếng phục vụ hơn 10 triệu người chơi, 789bet ngày càng khẳng định vị thế của mình trên thị trường cá cược trực tuyến. Là một công ty trực thuộc tập đoàn OKVIP , chúng tôi sở hữu đội ngũ nhân tài chuyên nghiệp cung cấp cho người chơi sản phẩm chất lượng cao.Hastag: #789bet #789betat #789betcasino #trangchu789bet #nhacai789betPhone :0819.406.822Địa chỉ : 26 Ng. 15 P. Tạ Quang Bửu, Bách Khoa, Hai Bà Trưng, Hà Nội [https://789bet.at/](https://789bet.at/)
Controlled and Uncontrolled components in react
Tags: react, beginners, webdev, javascript
Published: 2024-04-10 05:33:07

In the realm of React development, understanding the concepts of `controlled` and `uncontrolled` components is essential for building robust and maintainable applications. In this blog, we'll explore the differences between controlled and uncontrolled components in React and discuss when to use each approach effectively.

In react, there are two main approaches to handling form inputs:

- **Controlled** components

- **Uncontrolled** components

### Controlled components
Controlled components are form inputs whose values are controlled by React state. The state variables are updated whenever the value of the input changes, and the value of the input is set explicitly through the value prop.
The `onChange` event handler is used to update the state.

Example:

```javascript
import React, { useState } from "react";

function ControlledComponent() {
  const [name, setName] = useState("");
  
  const handleChange = (e) => {
    setName(e.target.value);
   }

  return ( 
   <input type="text"
    value={name}
    onChange={handleChange}
    />
   );
}
```
In the example, the name state variable is used to control the value of the input field. The `handleChange` function updates the name state whenever the input value changes.
The value of the input is set to the current value of the name state variable through the value prop.


### Uncontrolled components
Uncontrolled components are form inputs that manage their own state internally, rather than being controlled by React state.
You can access the current value of the input using a `ref` after the form is submitted or whenever needed.

Example:

```javascript
import React, { useRef } from "react";

function UncontrolledComponent() { 
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
     e.preventDefault();
     console.log(inputRef.current.value);
  };

 return (
 <form onSubmit={handleSubmit}>
  <input
   type="text"
   ref={inputRef}
   />
  <button type="submit">Submit</button>
 </form>
 );

}
```
In the example, the `inputRef` is used to create a `ref` for the input field. The `handleSubmit` function accesses the current value of the input using `inputRef.current.value`.
The form submission logic can be implemented to utilize the input value as required.

Stay tuned for more insights and practical examples of React! 🚀


<a href="https://www.buymeacoffee.com/vishnusatheesh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
I built an PWA in 1 week
Tags: app, web, react, productivity
Published: 2024-04-10 05:24:29

Last month i had this idea of building an app that can connect people who are working on different tech domains such as 

- AI
- Blockchain
- App development 
- Web development etc

so i thought of building the app in a PWA form which took me about 1 week to finish 

**Features** 

1. Connecting with people
2. Chatting with people 
3. Posting 
4. Profile Creation etc

so after building it i Presented it in my class and surprisingly I had 50 downloads in a day.

But now when i look at the app there is not much activity going on and kind of feeling that not much can be done on the app. coz the social media market is so much dominated by apps like **instagram**, **snapchat**, **X** , etc 

But it was an amazing experience gave me the hope that i can do better in this field and can make apps that really fit into people's life , and help them .
Laptop repair shop in Pune
Tags: laptop, reair
Published: 2024-04-10 05:16:08

🖥️ Looking for Reliable Laptop Service in Pimpri Chinchwad? Look No Further! 🔧🖥️

If your laptop is acting up or in need of repair, fret not! Our Laptop Service Center in Pimpri Chinchwad is here to provide you with top-notch service and get your device back to its optimal condition.

Why choose us?
1️⃣ Experienced Technicians: Our team consists of skilled technicians who are well-versed in diagnosing and repairing various laptop issues.
2️⃣ Quick Turnaround Time: We understand the importance of your laptop in your daily life or business operations. That's why we strive to provide quick and efficient service, ensuring minimal downtime.
3️⃣ Genuine Parts: We use only genuine parts for replacements to ensure the quality and longevity of your laptop.
4️⃣ Affordable Pricing: We offer competitive pricing for our services, ensuring that you get the best value for your money.
5️⃣ Wide Range of Services: Whether it's a hardware issue, software problem, or any other laptop-related issue, we've got you covered with our comprehensive range of services.

Services offered:

Laptop Repair
Screen Replacement
Keyboard Replacement
Battery Replacement
Virus Removal
Data Recovery
Software Installation
And much more!
Don't let a malfunctioning laptop slow you down. Visit our Laptop Service Center in Pimpri Chinchwad today and let our experts take care of all your laptop repair needs. Customer satisfaction is our top priority, and we're committed to providing you with the best service possible. Reach out to us now to schedule an appointment or inquire about our services. Your laptop will thank you! 💻🛠️
Build Scalable Web Apps with Our Expert Django Development Team
Tags: django, djangocms, djangodevelopment, djangodeveloper
Published: 2024-04-10 05:15:29

CodeTrade provides access to a network of highly skilled and vetted [Django developers](https://www.codetrade.io/hire-django-dedicated-developers/). Our team leverages the power of Django to create robust, secure, and scalable web applications that perfectly align with your unique business requirements.


![Hire Django Developer from CodeTrade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoql4dfivd79x4afo1n7.png)

Benefits of Partnering with CodeTrade:

- **Custom Solutions:** We craft bespoke web applications that address your specific needs and deliver exceptional user experiences.
- **Unparalleled Expertise:** Our Django developers possess in-depth knowledge and experience to ensure efficient and secure development.
- **Flexible Engagement Models:** We offer various collaboration options to best suit your project workflow and budget.
- **Innovation & Excellence:** Our developers are passionate about bringing cutting-edge solutions and achieving superior results for your projects.

Let's collaborate and shape the future of your web application together. Contact [CodeTrade](https://www.codetrade.io) today to discuss your project requirements.
Day 23: Unveiling the Magic of INTRODUCTION in Java, C++, Python, and Kotlin! 🚀
Tags: programming, coders, developer, webdev
Published: 2024-04-10 05:15:19

DAY - 23


Today’s Learning :-  

Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It is efficient for sorting small datasets or nearly sorted datasets. The basic idea behind 
Insertion Sort is to iterate through the array, starting from the second element (index 1), and for each element, place it in its correct position among the previously sorted elements.



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

Here's how the Insertion Sort algorithm works:
Start with the second element (index 1) and compare it with the first element (index 0).

If the second element is smaller, swap it with the first element.
Move to the third element (index 2) and compare it with the elements before it (starting from the second element). Insert the third element into its correct position among the previously sorted elements.

Repeat this process for each subsequent element in the array until the entire array is sorted.

Insertion Sort is an in-place algorithm, meaning it doesn't require additional memory to perform sorting. However, it has a time complexity of O(n^2) in the worst case scenario, making it less efficient than more advanced sorting algorithms like Merge Sort or Quick Sort for large datasets.

Despite its relatively high time complexity, Insertion Sort can be efficient for small datasets or nearly sorted datasets due to its simplicity and low overhead.



Feel free to share this post to enhance awareness and understanding of these fundamental concepts in statistical analysis!
 



🙏 Thank you all for your time and support! 🙏
Don't forget to catch me daily for the latest updates on my programming journey! Let's continue to learn, grow, and inspire together! 💻✨
Laptop Mall-Laptop Repair Shop in Pune
Tags: laptop, laptoprepair
Published: 2024-04-10 05:06:42

🔧💻 Looking for Reliable Laptop Repair Services in Pune? Look No Further! 💻🔧

If you're facing issues with your laptop and need quick, efficient, and affordable repair services in Pune, you've come to the right place! Our Laptop Repair Shop is your one-stop destination for all your laptop repair needs.

Why Choose Us?

Expert Technicians: Our team consists of skilled technicians who are experts in diagnosing and repairing all kinds of laptop problems. Whether it's a hardware issue like a broken screen or a software problem like virus removal, we've got you covered.

Quick Turnaround Time: We understand the importance of your laptop in your daily life or business operations. That's why we strive to provide fast turnaround times, ensuring you get your laptop back up and running as soon as possible.

Quality Service: We believe in delivering high-quality repair services using genuine parts to ensure the longevity and performance of your laptop. You can trust us to provide reliable solutions that meet your needs.

Affordable Pricing: We offer competitive pricing for all our repair services without compromising on quality. We believe in transparent pricing, so you can rest assured knowing you're getting the best value for your money.

Convenient Location: Our repair shop is conveniently located in Pune, making it easy for you to drop off your laptop for repairs. We also offer pickup and delivery services for added convenience.

Services We Offer:

Laptop screen repair and replacement
Keyboard repair and replacement
Battery replacement
Hard drive upgrade and replacement
Data recovery
Virus and malware removal
Software installation and troubleshooting
And much more!
Don't let laptop issues slow you down! Visit our Laptop Repair Shop in Pune today or give us a call to schedule an appointment. Our friendly team will be happy to assist you with all your laptop repair needs. Trust us to get your laptop back in top condition in no time! 💼🔍
The Config File Of Tailwind CSS
Tags: tailwindcss, react, nextjs, javascript
Published: 2024-04-10 04:30:37

```
module.exports = {
  // Paths to scan for classes to purge unused styles in production builds
  purge: ['./src/**/*.html', './src/**/*.js'],
  
  // Configuration for dark mode
  darkMode: 'class', // 'class' will enable dark mode by adding a class to the <body>, can also be 'media' or 'false'
  
  // Theme customization
  theme: {
    extend: {
      // Extend default color palette with custom colors
      colors: {
        primary: '#FF0000',
        secondary: '#00FF00',
      },
      // Extend default font family with custom fonts
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
      },
    },
  },
  
  // Variants customization
  variants: {
    extend: {
      // Extend variants for backgroundColor utility class to include responsive, hover, focus, and active states
      backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    },
  },
  
  // Additional plugins to enhance Tailwind's functionality
  plugins: [
    require('@tailwindcss/forms'), // Plugin for styling form elements
    require('@tailwindcss/typography'), // Plugin for styling typography
  ],
}

```
Front-End Developers' Loss of Autonomy
Tags: webdev, programming, react, career
Published: 2024-04-10 04:21:54

In this day and age, technology is constantly growing, sometimes even at a rate that we cannot adapt. As technology continues to develop, employees are expected to adapt at a rate that they are not prepared to. Despite the many revolutions technology may bring, it can pose many challenges to the workforce. 

In reading _Front-end Development’s Identity Crisis _, it has been brought to my attention that technology can cause unprecedented circumstances in the workforce. Nowadays, front-end developers are synonymous with full-stack developers and are expected to learn how to develop the back-end of websites when the need arises.

The author of the article discusses the emerging issues with being a front-end developer and advises its readers to develop skills beyond what is expected out of their expertise. The reason for this is that technology is growing at a rate beyond our comprehension and so employees are being asked to pick up skills on the job. 

This article made me learn to anticipate anything and to come prepared when it comes to working in the technology industry. Technology is growing at a volatile rate and we must know how to respond to times of change, as its impacts on employees will only continue to intensify. While technological disruptions bring challenges, they also offer opportunities for innovation and growth. 

Article can be found here: https://www.ellyloel.com/blog/front-end-development-s-identity-crisis/
Start with Python if-else Conditions
Tags: webdev, python, programming, coding
Published: 2024-04-10 04:09:00

Understanding if-else conditions in Python is fundamental for controlling the flow of your program based on certain conditions.

## What are If-Else Conditions?

If-else conditions in Python allow you to execute different blocks of code based on whether a specified condition is true or false. These conditions help you control the flow of your program, enabling it to make decisions dynamically.

## Syntax of If-Else Conditions

The syntax of if-else conditions in Python is straight forward:

```
if condition:
    # Code block executed if condition is true
    statement1
    statement2
    ...
else:
    # Code block executed if condition is false
    statement3
    statement4
    ...
```

## Example of If-Else Conditions

Let's consider an example where we want to check if a number is even or odd:

```
num = 10

if num % 2 == 0:
    print("The number is even.")
else:
    print("The number is odd.")
```

## Nested If-Else Conditions

You can also nest if-else conditions to create more complex decision-making structures:

```
num = 10

if num > 0:
    if num % 2 == 0:
        print("The number is a positive even number.")
    else:
        print("The number is a positive odd number.")
else:
    print("The number is not positive.")
```

## Chained If-Else Conditions

Chained if-else conditions, also known as elif statements, allow you to specify multiple conditions:

```
num = 10

if num > 0:
    print("The number is positive.")
elif num < 0:
    print("The number is negative.")
else:
    print("The number is zero.")
```

## Ternary Operator

Python also supports a ternary operator for simple if-else conditions in a single line:

```
num = 10
result = "even" if num % 2 == 0 else "odd"
print(f"The number is {result}.")
```

If-else conditions in Python are essential for controlling the flow of your program based on specific conditions. By understanding how to use if-else conditions, you can create dynamic and flexible programs that respond to different situations appropriately. Whether you're checking conditions, nesting if-else statements, or using the ternary operator, if-else conditions are a fundamental aspect of Python programming.
My experience on the integration of mercado pago in Laravel and vue
Tags: backend, programming, laravel, vue
Published: 2024-04-10 03:09:48

As the title say today we're going to talk about mercado pago and the experience of integration in Laravel and vuejs.

## What is Mercado pago?

Mercado pago is a payment platform similar to stripe or PayPal. Its used a lot in latin America.

## Integration in laravel

Start with the easy part first, we need to define one route to generate the `payment preference` and one for the `webhook`.

The preference id is used in the frontend part by the mercadopagojs. And the webhook for getting notifications about the payments.

The first thing that I did was to create a controller to handle the creation of the preference id.

After having the method for the implementation about the creation of the preference id, I pass to the webhook route and handle all the data to create a table in the db for handle a log of the transactions being executed.

## Integration in vuejs

Vue js was in my opinion a bit more complicated that the laravel part, because I haven’t made a implementation of a payment platform in vue. In short what we need to do is create the routes for the `success` , `failure` and `pending`  states.

Recieve the query params in our component and with that updating the necesary tables in the db.

Another thing is that using the js package that provides mercado pago made the integration a really nice experience of do.

## Conclusion

In short the integration of a payment platform was a interesting and growing experience for me, beacuse I could understand and face the challenges to implement things like a webhook, transaction, etc.