teleren/devto huggingface dataset:
IGCSE Economics tutor
Tags: webdev, javascript
Published: 2023-04-03 10:49:37

[IGCSE economics tutor](https://www.baccalaureateacademy.in/igcse-economics-tutors)s at Baccalaureate Academy are selected through rigorous interview processes that carefully assess their specialization level, teaching approach, experience, background, and behaviour. Our committed faculty of IGCSE Economics tutors have in-depth knowledge on every topic mentioned above and, after completion of every topic, our highly accomplished faculty of IGCSE economics tutors conduct tests and hand over assignments to the students for a comprehensive assessment of their strengths and weaknesses, their potential to grasp upon a topic and interpretation level.
services: [IGCSE Tuition](https://www.baccalaureateacademy.in/online-igcse-tutors) |[ IGCSE Chemistry Tutor](https://www.baccalaureateacademy.in/igcse-chemistry-tutors)
The Importance of Doing Code Reviews
Tags: github, programming, reviews
Published: 2023-04-03 10:31:55

As a software engineering team, you want to produce high-quality code that is efficient, maintainable, and scalable. Achieving this goal is not just about writing code, it's also about reviewing it. Code review is an essential part of the development process, and it can help raise productivity in your team. In this article, we'll explore why code review is important and how it can help your team produce better software.

## Why is code review important?

Code review is the process of reviewing code written by other team members to ensure that it meets certain standards, adheres to best practices, and is free of bugs and other issues. It's an essential part of the development process because it helps catch errors and bugs before they become bigger problems that could cause application failures or even security vulnerabilities. Here are some benefits of code review:

1. Finding bugs and errors: Code review helps identify bugs, errors, and other issues in the code. By reviewing each other's code, engineers can catch mistakes before they become bigger problems.

2. Improving code quality: Reviewing code helps ensure that best practices are being followed, that the code is readable, maintainable, and efficient. This, in turn, leads to better-quality code that is easier to maintain and modify.

3. Knowledge sharing: Code reviews provide a great opportunity for engineers to learn from each other. By reading and reviewing code written by others, engineers can learn new techniques and approaches to coding that they can apply to their own work.

4. Encouraging collaboration: Code reviews encourage collaboration among team members. By reviewing each other's code, engineers can work together to solve problems, share knowledge, and improve the overall quality of the codebase.

5. Meeting standards and requirements: Code reviews can help ensure that code meets industry standards, company guidelines, and regulatory requirements. This can help avoid compliance issues and legal problems down the line.

## 10x teammate > 10x developer

While the popular idea of the 10x developer may suggest that certain individuals can produce 10 times as much output as their peers, the reality is that producing high-quality code is a team effort. Even the most talented individual cannot produce high-quality code in isolation. 

Code review is an essential part of the development process not just rapidly programming, and it's critical to have a culture of frequent reviews in order to produce high-quality software. 

This means that it's more valuable to be a 10x teammate who can collaborate effectively, provide valuable feedback, and participate in code review than a 10x developer who works in isolation and produces code without seeking feedback and input from others.
Vite.js: The Speedy Build Tool Revolutionizing JavaScript Development
Tags: javascript, webdev, react, vite
Published: 2023-04-03 10:00:00

> Vite.js is a modern build tool for JavaScript applications. It was developed by Evan You, the creator of the popular front-end framework Vue.js. Vite.js focuses on speed and developer experience, offering a blazing-fast development server and an optimized build process. In this article, we will explore the good and the bad of Vite.js.

## **Pros**

### **1- Fast Development Server**:
Vite.js comes with a development server that is optimized for speed. It leverages the native ES modules in modern browsers to serve the application without the need for bundling. This makes the development experience much faster than traditional build tools like Webpack.

### **2- Build Optimizations**:
Vite.js uses a highly optimized build process that leverages the latest features of modern browsers. It generates highly optimized code, resulting in faster load times and smaller bundle sizes.

### **3- Vue.js Integration**:
Vite.js was developed by the creator of Vue.js, so it naturally has excellent integration with the Vue.js framework. Vite.js supports Vue.js single-file components out of the box, making it a great choice for Vue.js developers.

### **4- Plugin System**:
Vite.js has a powerful plugin system that allows developers to extend its functionality. There are already many plugins available, including ones for TypeScript, CSS preprocessors, and more.

### **5- Customizable Configuration**:
Vite.js provides a simple and intuitive configuration file that allows developers to customize their build process. This makes it easy to tailor the build process to the needs of the application.

## **Cons**

### 1- Limited Browser Support:
Vite.js leverages the latest features of modern browsers, so it has limited support for older browsers. This may be a concern for applications that need to support older browsers.

### 2- Limited Language Support:
Vite.js is primarily designed for JavaScript applications, so it has limited support for other languages like TypeScript, although there are plugins available to address this.

### 3- Immaturity:
Vite.js is a relatively new build tool, so it may lack some of the features and stability of more established build tools like Webpack. However, it has gained a lot of popularity and momentum in the community.

## **Conclusion**

Vite.js is a modern and fast build tool that offers a great development experience for JavaScript applications. Its focus on speed and developer experience makes it a popular choice for many developers, particularly those using Vue.js. While it may have some limitations, its strengths make it a great choice for modern web development projects.


`Do not forget to follow me for more technical post 🥰 ✅`
Video: Accelerating Stable Diffusion Inference on Intel CPUs with Hugging Face (part 2)
Tags: hardware, diffusers, deeplearning, generativeai
Published: 2023-04-05 20:40:10

---
title: Video: Accelerating Stable Diffusion Inference on Intel CPUs with Hugging Face (part 2)
published: true
date: 2023-04-03 09:55:39 UTC
tags: hardware,diffusers,deeplearning,generativeai
canonical_url: https://julsimon.medium.com/video-accelerating-stable-diffusion-inference-on-intel-cpus-with-hugging-face-part-2-2cedbae2575c
---

More speed! In this video, you will learn how to accelerate image generation with an Intel Sapphire Rapids server. Using Stable Diffusion models, the Hugging Face Diffusers library, the Intel Extension for PyTorch and system-level optimizations, we’re going to cut inference latency from 36+ seconds to 5 seconds!

{% youtube 78gE0CHxDbo %}
Simple port scanning without a port scanner
Tags: linux, configuration, troubleshooting, tutorial
Published: 2023-04-03 09:46:05

We all been in the situation where we need to understand if a port on a server can be reached, reachability is unsure, and no port scanner such as [nmap](https://nmap.org) is available, nor install is allowed.

## ping
Please mind this is not about if the host in general can be reached. This generally can be done using the `ping` command. Although it should be considered that ping generally uses a specific protocol (ICMP), which is different from the generally used TCP protocol for encrypted and unencrypted communication.

## TCP port scanning
The port state of a TCP port on an host can be determined if the `openssl` utility is available on the machine that needs to connect to the host. Nowadays, SSL/encryption almost always is a requirement, which makes it very likely the openssl package is installed, which contains the `openssl` utility.

A TCP port on a host can have 3 principal states:

1. Unreachable/firewalled
  If a host or hostname is specified that does not exist, then obviously it's impossible to connect to a port on that host, and there will be no communication back. The same happens when a host or hostname does exist, but is unreachable, or if the entire host (all ports) or the specific port is firewalled. 
2. Open
  If a host or hostname does allow communication with a specific port, and an executable is listening on that port, then communication can happen. 
3. Closed
  If a host or hostname does allow communication with a specific port, but no executable is listening on that port, then communication with that executable cannot happen. In such a case, the TCP/IP (network) stack will respond to the request by refusing the connection.

Now with these 3 states in mind, you can use the `openssl` utility to obtain the exact state of a hostname and port combination. This is how that looks like:

## Unreachable 
```
➜ openssl s_client -connect 192.168.66.79:80
```
If a host is unreachable, it will not, and cannot respond. In that case, the utility will not produce any response for a long time, because it's waiting for the response. Eventually it will time out:
```
connect: Operation timed out
connect:errno=60
```

## Open
```
➜ openssl s_client -connect 192.168.66.80:7000
CONNECTED(00000003)
...much more output related to SSL...
```
If a host is reachable, and has an executable listening on the port on the port specified, it will be able to connect, which is what the `CONNECTED(00000003)` message means. This means the port is open, and can interact with the executable.

All the other output that follows is related to SSL, and might or might not be relevant. It is not for determining the port state.

## Closed
```
➜ openssl s_client -connect 192.168.66.80:7001
connect: Connection refused
connect:errno=61
```
If a host is reachable, but has no executable listening on the port specified, the message will specify 'Connection refused'.
Damian's theory
Published: 2023-04-03 09:06:27

[https://www.bankfanz.com/first-bank-transfer-code/](https://www.bankfanz.com/first-bank-transfer-code/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)
https://plaza.rakuten.co.jp/firstbankcode001/diary/202304030000/
https://peatix.com/user/16688092/
https://www.provenexpert.com/what-is-firstbank-transfer-code-202319/
https://www.producthunt.com/@dhotspeed77147
https://www.divephotoguide.com/user/Firstbanktranfercode19
https://wakelet.com/@Whatisfirstbanktransfercode2023951
https://vocal.media/authors/what-is-firstbank-transfer-code-2023-kb4i0lbc
https://www.lifeofpix.com/photographers/firstbanktransfercode19/
https://seedandspark.com/user/what-is-firstbank-transfer-code-2023-17
https://rosalind.info/users/Firstbanktransfercode19/
http://phillipsservices.net/UserProfile/tabid/43/ctl/Profile/userId/209807/pageno/3/Default.aspx
https://app.roll20.net/users/11813453/what-is-firstbank-transfer-c
https://speakerdeck.com/firstbanktransfercode19
https://social.msdn.microsoft.com/profile/what%20is%20firstbank%20transfer%20code%202023%2019/
https://camp-fire.jp/profile/Firstbanktransfercode19
https://plazapublica.cdmx.gob.mx/profiles/Firstbankcode19/activity
https://www.metal-archives.com/users/Firstbanktranfercode19
https://storium.com/user/firstbanktransfercode19
https://trabajo.merca20.com/author/firstbanktransfercode19/
https://www.intensedebate.com/people/Firstbankcode19
https://www.mifare.net/support/forum/users/firstbanktranfercode19/
https://pinshape.com/users/2606549-firstbank19
http://foxsheets.com/UserProfile/tabid/57/userId/126606/Default.aspx
https://www.kompasiana.com/firstbankcode19
https://leanin.org/circles/what-is-firstbank-transfer-code-19
https://www.credly.com/users/what-is-firstbank-transfer-code.acd47318/badges
https://www.myminifactory.com/users/Firstbanktranfercode19
https://www.sqlservercentral.com/forums/user/firstbanktransfercode19
https://www.longisland.com/profile/Firstbanktransfercode19
https://guides.co/a/damian-hotspeed
https://myanimelist.net/profile/Firstbankcode19
Props drilling and context api
Tags: react
Published: 2023-04-03 08:37:28

Hello Guys,

In this article we will see what is props drilling and how we can use context api to avoid it.

Props drilling happens when we pass props to the destination components through the intermediate components. These intermediate components just forward the props deep down the component tree without actually using them.

Let's understand with the help of an example.

```javascript
function App() {
  const [searchText, setSearchText] = useState('');

  const handleChange = (e) => {
    setSearchText(e.target.value);
  }

  return (
    <div className="App">
      <input onChange={handleChange} value={searchText}/>
      <List searchText={searchText} />
    </div>
  )
}

const List = ({searchText }) => {
// This component just forwards the searchText to the ListItems component
  return <ListItems searchText={searchText} />
}

const ListItems = ({ searchText }) => {
  const filteredName = names.filter(name => name.includes(searchText));

  return (
    <ul>
      {filteredName.map(name => <li>{name}</li>)}
    </ul>
  )
}


```

Here we have searchText which is passed to the List component and the **List** component forwards the searchText to the **ListItems** component. This is what we call props drilling.

Even though the List component doesnot use the searchText and just forwards it to the ListItems component, it still rerenders and that is unnecessary.

With context api, we donot have to pass the props to the intermediate components and the components that are wrapped inside the context provider can use the props directly inside them. Let's see how we can achieve this.

```javascript
export const AppContext = createContext({})

function App() {
  const [searchText, setSearchText] = useState('');

  const handleChange = (e) => {
    setSearchText(e.target.value);
  }

  return (
    <AppContext.Provider value={{ searchText }}>
      <div className="App">
        <input onChange={handleChange} value={searchText}/>
        <List /> // we didn't pass the search text
      </div>
    </AppContext.Provider>
  )
}

const List = () => {
  return <ListItems /> // we didn't pass the searchText
}

const ListItems = () => {
  const { searchText } = useContext(AppContext);
  const filteredName = names.filter(name => name.includes(searchText));

  return (
    <ul>
      {filteredName.map(name => <li>{name}</li>)}
    </ul>
  )
}
```

As you can see from the above code, we created App context(**AppContext**) using **createContext** and wrapped everything inside App component with **AppContext.Provider** and passed a value(whatever data that needs to be sent to the child components) prop. Inside ListItem component, we used **useContext** hook and passed the **AppContext** to it and extracted the searchText. It is interesting to notice that we didn't pass the searchText to the List and ListItems components.

That's all for this article.
Thank you.
"Exploring YouTube Vanced: A Comprehensive Review of the Modified YouTube App"
Tags: vanced, revanced
Published: 2023-04-03 08:18:29

YouTube Vanced is a popular modified version of the official YouTube app that provides additional features that the standard version doesn't offer. These features include ad-blocking, background playback, and the ability to download videos for offline viewing. Many users appreciate the ad-blocking feature as it provides a more seamless and uninterrupted viewing experience.

However, some users have reported issues with the app's stability and compatibility with certain devices. As YouTube Vanced is not an official app and is not available on the Google Play Store, some users may have difficulty downloading or installing the app, and some may be wary of using an unofficial app.

YouTube Vanced is a popular alternative to the standard YouTube app, offering additional features that users may find useful. However, users should exercise caution when downloading and using the app as it is not an official app and may be against YouTube's terms of service.

Users started looking for substitutes once YouTube Vanced was shut down owing to legal difficulties. And in this piece, we present to you the greatest replacement software for the popular Vanced Youtube app, the freshly released ReVanced app. To begin, let's define YouTube Vanced. It was a specialised YouTube client with several added capabilities.

They included SponsorBlock, an ad blocker, PIP, background playback, an AMOLED dark theme, and more. This article will explain how to get the new [Revanced](https://androjungle.com/youtube-revanced-apk-download-latest-version/) app, which is functionally equivalent to Vanced. Recently, Google forced the premium YouTube app YouTube Vanced to shut down by threatening legal action. YouTube Vanced, a viable substitute for YouTube Premium, was relied on by a sizable audience.

The software violated YouTube's terms of service in a few key ways. Thus, YouTube Vanced was disabled. Many people were outraged by this, but a separate group of developers, who had no connection to YouTube Vanced, took up the project and created a new app called ReVanced.

ReVanced is an independent continuation of Vanced with the intention of delivering additional features in addition to those previously present in Vanced. the following fixes were provided: microg-patch, amoled, minimized-playback, old-quality-layout, disable-create-button, general-ads, video-ads, seekbar-tapping, background-play.
Onelogix chooses Bryntum to power its scheduling functionality
Tags: onelogix, bryntum, klarit, devtools
Published: 2023-04-03 08:08:44

**About Onelogix**

We are a leading transportation and logistics company based in South Africa. We provide a range of logistics services, including warehousing, distribution, and transportation.

**Our Use of the Bryntum Scheduler and Grid**

As a transportation company, efficient planning is essential to our operations. We needed a tool to build a planning board for our planners, allowing them to plan loads on trucks and schedule truck departures and arrivals. After evaluating various options, we decided to use the Bryntum Scheduler and Grid components. These components provided the flexibility and customization options that we needed for our specific use case.
Implementing Bryntum Scheduler and Grid in Onelogix's Planning Board
Our tech stack consists of a frontend application built using Angular, and a backend API built using .NET. We integrated the Bryntum Scheduler and Grid components into our frontend application, allowing planners to view and modify load and truck schedules. With these components, we were able to create a custom layout that perfectly suited our needs. Here is a screenshot of our planning board using the Bryntum components.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0b70h1crcqcsh1l02tc.png)
 
**What Our End-Users Think**

The feedback from our planners has been overwhelmingly positive. They appreciate the ease of use and the ability to view and modify schedules in real-time. Our planners have also commented on how much faster it is to plan loads using the Bryntum Scheduler and Grid components compared to our previous solution.

**Satisfaction and Experience**

We are extremely satisfied with our experience using the Bryntum Scheduler and Grid components. The components are flexible and provide all the customization options we needed to create a solution that fits our requirements perfectly. The support from the Bryntum team has also been excellent. We would highly recommend the Bryntum Scheduler and Grid components to anyone looking for a powerful and flexible scheduling solution.

**Further Reading**

Learn more about Onelogix by visiting our website. To learn more about Bryntum products, visit their website at https://www.bryntum.com.
Professional ways to center a div
Published: 2023-04-03 07:58:16


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

There are several ways to center an div in CSS. Here are some _professional_ ways:

**1.Using Flexbox:**

```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

**2. Using Grid:**

```
.container {
  display: grid;
  place-items: center;
}
```
**3. Using Absolute Positioning:**

```
.container {
  position: relative;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
**4. Using Text-align Property:**

```
.container {
  text-align: center;
}
```

**5. Using Margin Property:**

```
.container {
  width: 50%; /* or any other fixed width */
  margin: 0 auto;
}
```

**6. Using Table-cell Display:**

```
.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
```

**7. Using Line-height Property:**

```
.container {
  height: 100px; /* or any other fixed height */
  line-height: 100px;
  text-align: center;
}
```

I hope the methods provided for centering a div in CSS are useful to you in achieving your desired layout for your project.
Java 複合運算的陷阱
Tags: java
Published: 2023-04-03 07:57:23

Java 的[複合運算](https://docs.oracle.com/javase/specs/jls/se20/html/jls-15.html#jls-15.26.2)是大家常用的運算, 不過有一個細節可能一般的教學文章不會提到, 這可能會讓你遇到莫名其妙的錯誤。

## 複合運算並不等於一般運算加設定運算

有些教學文章會說複合運算就等於拆解開來的一般運算加上設定運算, 例如 `a+=b` 就等同於 `a = a + b`, 不過這是有問題的, 請看以下範例：

```java
jshell> short s = 2
s ==> 2

jshell> s = s + 2
|  Error:
|  incompatible types: possible lossy conversion from int to short
|  s = s + 2
|      ^---^

jshell>

jshell> s += 2
$36 ==> 4
```

你可以看到應該是同樣的運算以複合運算沒問題, 但是不用複合運算卻出錯？從錯誤訊息可以看出來, 因為 2 是 `int`, 所以進行加法運算時, 會把 short 型別的 s 放寬轉型成 int, 但是當要把計算結果放回 s 時, 就會發生無法自動從 int 縮窄轉成 short 的錯誤。

但是複合運算卻不會發生這樣的問題, 這很明顯告訴我們兩種運算並不完全相同。

## 複合運算隱含了強制轉型

如果你查看 Java 語言的規格書, 就會發現[複合運算](https://docs.oracle.com/javase/specs/jls/se20/html/jls-15.html#jls-15.26.2)的說明如下：

> A compound assignment expression of the form E1 op= E2 is equivalent to E1 = (T) ((E1) op (E2)), where T is the type of E1, except that E1 is evaluated only once.

也就是說, 複合運算在設定之前, 會強制將運算結果轉型回變數的型別, 因此前面複合運算的版本其實等同以下程式碼：

```java
jshell> s = (short)(s + 2)
```

由於加上了強制運算, 所以原本 int 型別的計算結果就會被強制轉回範圍較窄的 short 型別, 不會發生錯誤了。

當然, 因為這樣的機制, 也要注意複合運算可能會溢位, 例如：

```java
jshell> s *= 10000
$39 ==> -5536

jshell> s
s ==> -5536
```

## 小結

學習程式語言時, 很容易因為程式可以得到正確結果而忽略了其中的細節, 本文僅是其中的一個小例子, 提醒大家要多留意, 否則遇到錯誤時往往無法找出真正的原因。
theo to scss
Tags: css, sass, javascript, scss
Published: 2023-04-03 07:25:21

You may have a JSON file of the following form which is called `plasmic-tokens.theo.json`:

```
{
  "props": [
    {
      "name": "96",
      "type": "spacing",
      "value": "24rem",
      "category": "spacing",
      "meta": {
        "projectId": "…",
        "id": "…"
      }
    },
    {
      "name": "Black-050",
      "type": "color",
      "value": "#F6F7F7",
      "category": "color",
      "meta": {
        "projectId": "…",
        "id": "…"
      }
    },
    …
  ]
}
```

This is file has been baked by [Salesforce theo](https://github.com/salesforce-ux/theo).

If you want to extract the colors for SASS, then you can use the command line tool:

```
yarn theo app/javascript/plasmic-tokens.theo.json --transform web --format sass
```

or if this doesn't work like in my case (`Cannot find module 'optimist'`), use the following one-liner to extract all colors:

```
jq -r '.props[] | select(.type == "color") | "$" + .name + ": " + .value + ";"' app/javascript/components/plasmic-tokens.theo.json | tr '[:upper:]' '[:lower:]'
```