Skip to content

Commit

Permalink
format lint (#1237)
Browse files Browse the repository at this point in the history
  • Loading branch information
Liumingxun committed Apr 27, 2024
1 parent 08a8659 commit edc00d7
Show file tree
Hide file tree
Showing 44 changed files with 1,419 additions and 1,419 deletions.
Expand Up @@ -133,7 +133,7 @@ Furthermore, rookie mistakes like assigning values directly to the _state_ objec

Pretty simple, follow the [10 minute interactive introduction](https://mobxjs.github.io/mobx/getting-started.html) or watch the aforementioned video. You can simply take a single component from your code base, slap _@observer_ on it and introduce some _@observable_ properties. You don’t even have to replace your existing _setState_ calls, they continue to work while using MobX. Although, within a few minutes you might find them so convoluted that you will replace them anyway :). (Oh, and if you don’t like decorators, no worries, it works with [good ol’ ES5 as well](https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/syntax.md#react-components)).

## TL;DR:
## TL;DR

I’ve stopped using React to manage local component state. I use MobX instead. Now React is truly “just the view” :). MobX now manages both local component state and state in stores. It is concise, synchronous, efficient and uniform. From experience, I’ve learned that MobX is even easier to explain to React beginners than React’s own _setState._ It keeps our components clean and simple.

Expand Down
38 changes: 19 additions & 19 deletions chinese/articles/advanced-prompt-engineering-handbook.md

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions chinese/articles/blender-three-js-react-js.md
Expand Up @@ -8,13 +8,13 @@
在这个分步指南中,你将学习如何建立一个带有基本动画的 Blender 文件。之后,你还将学习如何使用 React Three Fiber 来将 Three.js 集成到 React 应用程序中。
熟悉这些概念可以帮助你以后开发的 React.js 应用程序脱颖而出。

## ******🔐****** 以下是我们将涵盖的内容
## ******🔐****** 以下是我们将涵盖的内容

- 制作一个包括动画、材质和导出过程的 Blender 模型。
- 使用 React Three Fiber 构建与 Three.js 集成的 React.js 应用程序。
- 将个人创建的 Blender 模型整合到 React.js 应用程序中。

## **************📝************** 先决条件
## **************📝************** 先决条件

- 建议对 3D 软件 Blender 有基本了解。
- 要求具备对 React.js 的基本熟悉。
Expand All @@ -32,7 +32,7 @@

## 💭 Three.js 和 Blender 是什么?

Three.js 是一个 JavaScript 的库,通过提供的API可以让你在 Web 浏览器中展示 3D 模型。
Three.js 是一个 JavaScript 的库,通过提供的 API 可以让你在 Web 浏览器中展示 3D 模型。

利用 Three.js 可以帮助您将互动性和独特的功能无缝集成到您的网站中。

Expand All @@ -52,7 +52,7 @@ Blender 是一款专为制作和完善 3D 模型而定制的强大软件。它

`npm install three @react-three/fiber`

为了丰富 Three.js 体验,我们还将集成 [React Three Drei](https://www.npmjs.com/package/@react-three/drei), 该包引入了各种适用于不同 Three 的帮助程序.js场景,包括几个摄像头控件,例如:
为了丰富 Three.js 体验,我们还将集成 [React Three Drei](https://www.npmjs.com/package/@react-three/drei), 该包引入了各种适用于不同 Three 的帮助程序.js 场景,包括几个摄像头控件,例如:

`npm install @react-three/drei`

Expand Down Expand Up @@ -215,7 +215,7 @@ package.json 文件中的依赖项,包括 React Three Fiber 和 React Three Dr

简而言之,Blender 提供了使用程序节点处理材质的灵活性。虽然这些节点在 Blender 中可以无缝运行,但它们与其他游戏引擎或软件框架(如 Three.js )并不直接兼容。

要了解更多信息,请考虑观看以下视频。 在短短10分钟内演示了纹理烘焙的过程,有效解决了当前的问题。
要了解更多信息,请考虑观看以下视频。 在短短 10 分钟内演示了纹理烘焙的过程,有效解决了当前的问题。

程序材质纹理烘焙教程

Expand Down
20 changes: 10 additions & 10 deletions chinese/articles/chrome-devtools.md
Expand Up @@ -25,7 +25,7 @@ It doesn't matter if you're just starting out or have been coding for years. Kno

All major browsers have their own DevTools that let you examine the code of a webpage, evaluate its metrics, and run some tests alongside. This article will discuss Chrome's DevTools, as it's the industry standard.

## Table of contents:
## Table of contents

- [What is Chrome DevTools?][3]
- [How to Open Chrome DevTools][4]
Expand Down Expand Up @@ -177,11 +177,11 @@ Modal CSS classes Code

In our modal's HTML code above, we've added the class name 'modal hidden' which has a corresponding styling with the CSS property of `display:none` that is set to hide the modal when the page is loaded initially and only display it when the button is clicked.

### ✅ Step 1 - Initial inspection:
### ✅ Step 1 - Initial inspection

Attempt to trigger the modal by clicking on the 'Click me to learn a secret' button. Since we've set that up not to work, right-click on the area where the modal should appear and choose "Inspect" to open DevTools' Elements Panel.

### ✅ Step 2 - Diagnose visibility issues:
### ✅ Step 2 - Diagnose visibility issues

In the Elements Panel, locate the modal in the DOM to see that the modal is present but not visible. This confirms that the bug is caused within our CSS code `display: hidden`.

Expand All @@ -193,13 +193,13 @@ Manually change the class name from `modal hidden` to `modal block` to trigger t

A screenshot of debugging the modal's HTML, CSS in Elements panel

### ✅ Step 3 - Center the modal:
### ✅ Step 3 - Center the modal

Now the modal is visible, but it's displayed at the top – which is different from where we'd like it to be (that is, in the center of the page).

To change this, modify the `transform` property to `translate(-50%, -50%)` by adding the second `-50%` and ensure that `top: 50%`, and `left: 50%` are correctly set to center the modal on the screen.

### ✅ Step 4 - Enhance the appearance:
### ✅ Step 4 - Enhance the appearance

You can go further to refine the modal's appearance by tweaking its `background-color`, `padding`, or other stylistic properties directly within the Styles to achieve the desired look and feel.

Expand Down Expand Up @@ -227,7 +227,7 @@ const openModal = function () {

Modal bug JavaScript code

### ✅ Step 1 - Set up breakpoints:
### ✅ Step 1 - Set up breakpoints

Open Chrome DevTools and navigate to the Sources Panel. Here, find the JavaScript file that includes the modal functionality (in our example its pen.js).

Expand All @@ -241,7 +241,7 @@ A screenshot of setting breakpoints the modal's JS in Sources panel

Breakpoints pause code execution at critical points, allowing you to inspect the current state of variables and understand the flow of execution. This step is crucial for identifying where the code deviates from expected behaviour.

### ✅ Step 2 - Examine the code execution flow:
### ✅ Step 2 - Examine the code execution flow

With our breakpoint in place, try to open the modal by clicking on its button. Execution of our JavaScript code now pauses at our breakpoint, which enables us to step through the code line by line.

Expand Down Expand Up @@ -270,19 +270,19 @@ const openModal = function () {

API call JavaScript code

### ✅ Step 1 - Initiate the API call:
### ✅ Step 1 - Initiate the API call

On the modal project UI, click on the 'Click me to learn a secret' button. Though the modal does not visibly activate, because of the fetch logic within the openModal function, an API call will be made.

### ✅ Step 2 - Network Panel Inspection:
### ✅ Step 2 - Network Panel Inspection

Ideally, your Network Panel should be open before clicking the button, but you can also reverse the steps. Detailed insights on your API request such as the request's method, status code, response and the time it took to complete, will be available under headers, preview, response, initiator and timing tabs respectively.

![netscreenshot](https://www.freecodecamp.org/news/content/images/2024/02/netscreenshot.png)

A screenshot overview of API request in Network panel

### ✅ Step 3 - Simulating Network Conditions:
### ✅ Step 3 - Simulating Network Conditions

Use the Network Panel's throttling feature to mimic various network speeds like offline or slow 3G to see how the API request behaves under constrained conditions.

Expand Down
Expand Up @@ -1170,7 +1170,7 @@ In this article, we discuss the differences between CSS transitions and animatio

Thanks for reading.

### And here's a useful React TypeScript resource:
### And here's a useful React TypeScript resource

I wrote a book about [Creating NPM Packages][72]!

Expand Down
38 changes: 19 additions & 19 deletions chinese/articles/data-structures-the-key-to-scalable-software.md
Expand Up @@ -19,11 +19,11 @@ November 22, 2023 / [#Data Structures][1]

![Data Structures Handbook – The Key to Scalable Software](https://www.freecodecamp.org/news/content/images/size/w2000/2023/11/The-Data-Structures-Handbook-Cover.png)

If you're regularly confronted by the complexity of modern data, you’re not alone. In our data-centric world, understanding data structures isn’t optional — it’s essential.
If you're regularly confronted by the complexity of modern data, you’re not alone. In our data-centric world, understanding data structures isn’t optionalit’s essential.

Whether you’re a novice coder or an experienced developer, this handbook is your concise guide to the critical skill of data management through data structures.

Data today isn’t just vast – it’s also complex. Organizing, retrieving, and manipulating this data efficiently is key. Enter data structures — the backbone of effective data management.
Data today isn’t just vast – it’s also complex. Organizing, retrieving, and manipulating this data efficiently is key. Enter data structuresthe backbone of effective data management.

This guide cuts through the complexity of arrays, linked lists, stacks, queues, trees, and graphs. You’ll gain insights into each type’s strengths, limitations, and practical applications, backed by real-world examples.

Expand Down Expand Up @@ -1613,31 +1613,31 @@ Data structures are the cornerstone of programming, transforming good code into

In programming, mastering data structures is akin to wielding a strategic superpower, elevating your software's speed, efficiency, and intelligence. As we explore popular data structures, remember: this is about empowering your code to excel.

### Supercharge Your Code's Efficiency:
### Supercharge Your Code's Efficiency

Data structures are all about doing more with less. They're the key to turbocharging your code's performance.

Think about it: using a hash table can turn a sluggish search operation into a lightning-fast retrieval. Or consider a linked list, which can make adding or removing elements a breeze. It's like having a high-speed train instead of a horse cart for your data.

### Solve Problems Like a Pro:
### Solve Problems Like a Pro

Data structures are your Swiss Army knife for tackling complex challenges. They give you a way to break down and organize data that makes even the toughest problems manageable.

Need to map out a hierarchy? Trees have got your back. Dealing with networked data? Graphs are your go-to. It's about having the right tool for the job.

### Flexibility at Your Fingertips:
### Flexibility at Your Fingertips

The beauty of data structures lies in their variety. Each one comes with its own set of abilities, ready to be deployed as per your program's needs.

This means you can tailor your approach to fit the task at hand, making your software more adaptable and robust. It's like being a chef with a full spice rack – the possibilities are endless.

### Optimize Memory:
### Optimize Memory

In the world of programming, memory is gold, and data structures help you spend it wisely. They're the architects of memory, building and managing it efficiently.

Dynamic arrays, for example, are like expandable storage units, growing and shrinking as needed. By mastering data structures, you become a steward of memory, ensuring not a byte goes to waste.

### Scale Up Without Breaking a Sweat:
### Scale Up Without Breaking a Sweat

As your software grows, so do its demands. This is where data structures come into their own. They're built for scale.

Expand Down Expand Up @@ -1783,27 +1783,27 @@ Data structures are not just theoretical concepts; they are the silent powerhous

Let's explore how these unsung heroes of the tech world make a real impact in various applications.

### Undo Feature in Text Editors:
### Undo Feature in Text Editors

Ever hit 'undo' in a text editor and marveled at how it retrieves your last action? That's a stack data structure at work. Each action you take is 'pushed' onto the stack. Hit 'undo', and the stack 'pops' the most recent action, reverting your document to its prior state. Simple, yet ingenious.

### Social Networking Platforms:
### Social Networking Platforms

Platforms like Facebook and Twitter are not just about connecting people – they're about managing colossal data networks. Here, graph data structures come into play. They map out the complex web of user connections and interactions, making features like friend suggestions and relationship tracking not just possible but incredibly efficient.

### GPS Navigation Systems:
### GPS Navigation Systems

Ever wondered how your GPS calculates the quickest route? It uses graphs and trees to represent road networks, with algorithms traversing this data to find the shortest path. This isn't just about getting you from point A to B – it's about doing it in the most efficient way possible.

### E-commerce Recommendation Engines:
### E-commerce Recommendation Engines

When an online store seems to read your mind with perfect product suggestions, thank data structures like hash tables and trees. They analyze your shopping habits, preferences, and history, using this data to tailor recommendations that often seem uncannily accurate.

### File System Organization:
### File System Organization

Your computer's ability to store and retrieve files swiftly is courtesy of data structures. Trees help in organizing directories, making file navigation a breeze. Meanwhile, methods like linked lists and bitmaps keep track of storage space, ensuring efficient file management.

### Search Engine Indexing:
### Search Engine Indexing

The speed at which search engines like Google deliver relevant results is all thanks to data structures. Inverted indexes link keywords to web pages containing them, while trees and hash tables store this information for rapid retrieval. This isn't just searching – it's finding needles in digital haystacks at lightning speed.

Expand Down Expand Up @@ -1842,23 +1842,23 @@ Armed with a comprehensive grasp of data structures, you're now poised to levera

Apply your knowledge by implementing various data structures across different programming languages. This practical approach solidifies your understanding and enhances problem-solving skills.

### Explore Advanced Structures:
### Explore Advanced Structures

Venture beyond the basics into more complex data structures like trees, graphs, and hash tables. Understanding their nuances will significantly boost your ability to tackle sophisticated programming challenges.

### Deep Dive into Algorithms:
### Deep Dive into Algorithms

Pair your data structure knowledge with a study of algorithms. Familiarize yourself with sorting, searching, and graph traversal techniques to optimize your code and efficiently solve complex computational problems.

### Stay Informed and Engaged:
### Stay Informed and Engaged

Keep abreast of the ever-evolving software engineering landscape. Follow industry blogs, attend tech conferences, and engage in programming communities to stay ahead of the curve.

### Collaborate and Share:
### Collaborate and Share

Join forces with peers in development communities. Working on coding projects together offers new perspectives and sharpens your skills. Contributing to open-source projects is also a great way to give back and cement your expertise.

### Showcase Your Skills:
### Showcase Your Skills

Build a portfolio that highlights your proficiency in using data structures to solve real-world problems. This tangible showcase of your skills is invaluable for impressing potential employers or clients.

Expand Down Expand Up @@ -1887,7 +1887,7 @@ Additionally, for more practice in data structures, explore these resources on o

Visit our website for these resources and more information on the [bootcamp][48].

### **Connect with Me:**
### **Connect with Me**

- [Follow me on LinkedIn for a ton of Free Resources in CS, ML and AI][49]
- [Visit my Personal Website][50]
Expand Down
Expand Up @@ -551,7 +551,7 @@ Backpropogation is an efficient algorithm for computing the gradient of the cost

So, to be clear, backpropagation is the actual process of calculating the gradients in the model, and then Gradient Descent is the algorithm that takes the gradients as input and updates the parameters.

When we compute the gradients and use them to update the parameters in the model, this helps us update the parameters and direct them towards more correct direction towards finding the global optimum to minimize. This helps further minimize the loss function and improve prediction accuracy of the model.
When we compute the gradients and use them to update the parameters in the model, this helps us update the parameters and direct them towards more correct direction towards finding the global optimum to minimize. This helps further minimize the loss function and improve prediction accuracy of the model.

In each pass, after forward propagation is completed, the gradients should be obtained. Then we use them to obtain the model parameters, such as the weight and the bias parameters.

Expand Down Expand Up @@ -1296,7 +1296,7 @@ Figure above, visualizes the idea behind Batch Normalization, which shows that n

This is achieved by adjusting and scaling the activations during training. Batch normalization allows each layer of a network to learn by itself a little more independently of other layers. Let's see how it works in more detail.

#### Step 1: Mini-batch Mean & Variance:
#### Step 1: Mini-batch Mean & Variance

Compute the mean of the activations for a mini-batch using the following equation:

Expand Down Expand Up @@ -1573,7 +1573,7 @@ LSTM Architecture (Image Source: [LunarTech.ai][62])

This diagram represents the architecture of an LSTM (Long Short-Term Memory) network, visualizing the flow of data through its components at different time steps, let's dive deeper into each of this sates and the process behind them:

**Cell States:** At the top row, we have rectangles in yellow labeled C\_(_t−1)_, _C\_(t)​_, … _C\_(t+1)_​. These represent the cell states of LSTM at consecutive time steps.
**Cell States:** At the top row, we have rectangles in yellow labeled C\_(_t−1)_, _C\_(t)​_, … _C\_(t+1)_​. These represent the cell states of LSTM at consecutive time steps.

These cell states are a key component of the LSTM as they carry relevant information throughout processing of the sequence. They hold the information of what information to use, what to forget and what to output.

Expand Down

0 comments on commit edc00d7

Please sign in to comment.