teleren/devto huggingface dataset:
The Notion of Logical Time
Published: 2023-02-23 12:52:40

In the previous two articles, we learned about [Physical Time](https://dev.to/sriramr98/physical-time-1nm9) and the nuances of time.

We concluded the thought by attempting to synchronise two clocks, but this presents a new challenge.

The very idea of synchronising time means that when a drift is found, time can jump forward or backward depending on the drift.

Consider the following scenario:
![[Screenshot 2023-02-19 at 7.47.25 PM.png]]

We wanted to calculate the time it takes to execute a function, but NTP intervenes and pushes time back.
Now, when we figure out how much time has passed, startTime is greater than endTime, so the amount of time that has passed is negative.

This is a significant issue because many critical usecases rely on calculating the time elapsed between two events.
1. Use of timeouts
2. TTL expiration
3. Retry Timers
4. Performance Evaluation, and so on.

## Logical Time

Looking at the usecase, all we need to know is how long something took. When we think about it, it has nothing to do with the exact date and time. We only need something like 'This function took 100ms to execute'.

As a result, we created Logical Time. The time measured from an arbitrary point is known as logical time. In a computer, for example, we can consider booting up to be an initial action with time 'T=0' and increment this by one every second.

This time does not indicate the date or time. It only knows that *X* time has passed since something happened.

This concept, it turns out, is very useful in detecting time differences between two points because there is no concept of time drift or skew here. This time can only go up and never down.

We also discussed how to order events in [Message Ordering](https://dev.to/sriramr98/message-ordering-23k8) and how [Physical Time](https://dev.to/sriramr98/physical-time-1nm9) is ineffective for determining the order of two messages.

Because logical time is only incremental, we can deduce that Event A occurs before Event B if Event A's logical timestamp is less than Event B's.

Logical Time can also be used to detect Causality between two messages.

There are two major algorithms of Logical Time
1. Lamport Clocks
2. Vector Clocks


Both clocks will be examined in depth in subsequent articles.
The Technology Behind Augmented Reality: A Deep Dive
Tags: gamedev, programming, productivity, webdev
Published: 2023-02-23 12:51:05

Augmented Reality (AR) is a rapidly-evolving technology that allows users to experience a blend of digital and physical worlds in real-time. AR is made possible by a complex set of technologies that work together to create a seamless and immersive experience.

One of the core technologies behind AR is computer vision. Computer vision involves using algorithms and techniques to enable computers to interpret visual information from the real world. In AR, computer vision is used to track the user's movements and the objects in the real world, allowing the virtual objects to be anchored and rendered in the correct location.

Another important technology in AR is machine learning. Machine learning involves training algorithms to recognize patterns and make predictions based on large amounts of data. In AR, machine learning is used to improve object recognition and tracking, making the AR experience more accurate and responsive.

Sensor technologies are also crucial to AR. Sensors such as gyroscopes, accelerometers, and magnetometers are used to track the user's movements and the orientation of their device. This information is used to determine the user's position and movement in the real world, which is necessary for creating the virtual overlays in the correct location.

AR also relies on sophisticated rendering technologies to create the virtual objects that are overlaid on the real world. These technologies use techniques such as lighting, shading, and 3D modeling to create realistic and immersive virtual objects that blend seamlessly with the real world.

Finally, AR depends on powerful hardware to provide the necessary processing power and capabilities. Smartphones, tablets, and AR-enabled devices such as smart glasses and headsets all require specialized hardware such as high-resolution cameras, sensors, and processors to provide a seamless and immersive AR experience.

In conclusion, Augmented Reality is an exciting and rapidly-evolving technology that is transforming the way we interact with the world around us. By leveraging computer vision, machine learning, sensor technologies, rendering technologies, and powerful hardware, AR is creating new opportunities in a wide range of industries, from entertainment and gaming to healthcare and manufacturing
Unleashing the Full Potential of JavaScript: Exploring Its Overlooked Features
Tags: webdev, javascript, beginners, programming
Published: 2023-02-23 12:46:18

You all know how widely Javascript is used in programming. While some of its features are well-known and widely used, there are a host of hidden features within the language that can make a significant impact on your coding skills.

From advanced **string manipulation** to **array manipulation**, working with **numbers** and **floating** points to dealing with **Promises**, we’ll cover a range of topics that are often overlooked by developers. 

With these functionalities, you can optimize your code and streamline your development workflow.

Whether you’re a seasoned developer or just getting started with JavaScript, this blog post will provide valuable insights for improving your coding skills. 

So, let’s dive in and explore these functionalities of JavaScript!

Table of contents:

- Arrays
  - Array.flat()
  - Array.flatMap()
  - Array.reduceRight()
  - Array.reduce()
  - Array.some()
  - Array.every()
- Objects
  - Object.fromEntries()
  - Object.freeze()
- Strings
  - String.padStart() and String.padEnd()
- Promise
  - Promise.allSettled()
  - Promise.race()
- Others 
  - Object.is()
  - Number.isFinite()
- Conclusion

We encourage you to continue exploring the many capabilities of the language and discover even more features to help you become a more efficient and effective developer.

For detailed post with examples, check out [Canopas Blog](https://blog.canopas.com/javascript-development-hacks-13-hidden-gems-you-need-to-know-e273cf662266).
Read All Files of Directory and Subdirectories with Recursive Generators in JavaScript
Tags: node, javascript, typescript, tutorial
Published: 2023-02-23 12:29:14

Reading all files from a directory and its subdirectories is a common requirement in many projects. While there are several ways to accomplish this, one approach is to use a recursive generator function to create a sequence of file paths. 

Let's start by taking a look at the code:

```ts
import fs from 'fs';
import path from 'path';

export function* readAllFiles(dir: string): Generator<string> {
  const files = fs.readdirSync(dir, { withFileTypes: true });

  for (const file of files) {
    if (file.isDirectory()) {
      yield* readAllFiles(path.join(dir, file.name));
    } else {
      yield path.join(dir, file.name);
    }
  }
}
```

The function `readAllFiles` takes a directory path as input and returns a generator object that creates a sequence of file paths.

Inside the function, we first use `fs.readdirSync` to read all files and directories in the specified directory. We pass the `withFileTypes` option to get `fs.Dirent` objects instead of filenames.

Then we loop through each file or directory with a `for..of` loop. If the current item is a directory, we recursively call the `readAllFiles` function with the new directory path using the `yield*` syntax. This creates a nested sequence of file paths for each subdirectory.

If the current item is a file, we use the `path.join` function to construct the full path of the file and yield it.

Now that we have our generator function, let's see how we can use it to read all the files in a directory and its subdirectories.

```js
for (const file of readAllFiles('/path/to/directory')) {
  console.log(file);
}
```

We can simply use a `for..of` loop to iterate through the generator object and print each file path to the console. 

Using a recursive generator function to read all the files in a directory and its subdirectories has several benefits over other approaches. Instead of pushing all file paths into an array, the generator yields each path one at a time. This means that only one file path is kept in memory at a time, making it more memory efficient. Moreover, the generator only generates file paths when they are requested by the consuming code. This means that if we only need to process a subset of the files, we don't waste time and resources generating paths for files we don't need.
Howto migrate from Webpacker to jsbundling-rails in Ruby on Rails
Tags: ruby, webpack, javascript, rails
Published: 2023-02-23 12:18:18

A lot of Ruby on Rails applications created with Ruby on Rails version 5.x or 6.x or even upgraded from the previous versions are using webpacker as their primary asset pipeline. But now as webpacker has retired, it is time to move on. jsbundling-rails is or will be the most obvious step to go. Don’t try to move to importmap-rails directly, as you may encounter more problems you have to solve.

If you are using webpack(er) for CSS too as I did, I recommend moving your CSS pipeline to an alternative before moving your JavaScript setup to an alternative like jsbundling-rails or importmap-rails. Check this: Howto migrate from Webpacker to cssbundling-rails in Ruby on Rails for CSS.

Read the full tutorial on my site: 

[Howto migrate from Webpacker to jsbundling-rails in Ruby on Rails](https://qameta.com/posts/howto-migrate-from-webpacker-to-jsbundling-rails-in-ruby-on-rails/)
Highlight Text in React Native [but with a twist]
Tags: reactnative, javascript, productivity, tutorial
Published: 2023-02-23 12:00:36

Now i came across this issue and i thought it something i should share after getting past it.

## A little back story
So, i am working on a chat platform using react native and i have to integrate the search in chat logic but the _twist to it_ is that the text i am searching through is in an HTML form which makes it require a different approach.

So now you get the point, let's go straight to the code.

```
...
  const {width} = useWindowDimensions();
  const escapeRegExp = (text: string) => {
    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  };
  const replaceAll = (str: string, match: string, replacement: any) => {
    if (str === undefined || str === null) {
      return '';
    }
    return str.replace(new RegExp(escapeRegExp(match), 'g'), () => replacement);
  };
  let txt = replaceAll(textProps?.text, '\n\n', '<br><br>');
  txt = replaceAll(textProps?.text, '\n', '<br>');

  const highlightedText = txt
    .replace(
      new RegExp(textProps?.searchedWord, 'gi'),
      `<span style="background-color: #FF842D;">${textProps?.searchedWord}</span>`,
    );

...
  return (
  <View>
    <HTML
          contentWidth={width}
          source={{html: `<div style="color:white;">${highlightedText}</div>`}}
        />
    </View>
  );
};

...
```
So the escapeRegExp function is replacing all of the characters in text except for letters, numbers, and symbols.

The replaceAll function: The first line checks if str is undefined or null.
 If it's not then it continues on to the next line where it performs a search and replace operation on str using escapeRegExp() and new RegExp().

Then we have the highlightedText constant which searches through to get the searched word and replace with a new span with a background color. Which is further put in the HTML tag from the react-native-render-html package. And there you have it. Leave a like if you think this is helpful. Thanks.

![Image Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x86uhem0q05c2wxk6q9w.png)
Trying to make static clone website
Tags: html, css
Published: 2023-02-23 11:55:41

I have never made a static website with just HTML and CSS (_usually I make use of frameworks like Bootstrap and Materialize_). I thought it would be easy but I am terribly wrong. I am going to finish doing at least two static websites in a week. I'll write about my progress here. 


**Made YouTube!**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9awr569koccee1aw0q6.png)
Free VS Code Extensions for Web Developers
Tags: webdev, programming, vscode
Published: 2023-02-23 11:55:25

## 1. Auto Rename Tag

Auto rename paired HTML/XML tag.

## 2. Live Server
Launch a development local Server with a live reload feature for static & dynamic pages.

## 3. Visual Studio IntelliCode

AI-assisted development

## 4. Project Manager

Easily switch between projects.

## 5. Prettier - Code Formatter

Code formatter using prettier.
Navigating lock files: best practices and tips
Tags: javascript, npm, packagemanagement
Published: 2023-02-23 11:51:24

If you are unsure about how to manage the package-lock.json (or yarn.lock) file in your project, you're not alone. This file is essential for ensuring that your project's dependencies are restored to the same versions on any machine where you run `npm install`(or `yarn`). This is important because without a lock file, legacy projects may break if a dependency version is changed between installations. Here are some best practices and tips for working with lock files:

* **Merge conflicts:** Do not manually resolve merge conflicts in lock files. npm and yarn can do it for you automatically! If there are merge conflicts in the package.json file, first resolve them manually and then run the `npm install` (or `yarn`) command to automatically fix any corresponding conflicts in the lock file. See [this gist](https://gist.github.com/szemate/6fb69c8e3d8cce3efa9a6c922b337d98) for more details.

* **Use in CI:** In CI environments, it is best to use `npm ci` (*clean install*) instead of `npm install`. `npm ci` will ensure a clean installation of dependencies by deleting the previous node_modules and by never making changes to package.json. `npm install`, on the other hand, may update the package-lock.json file if it is inconsistent with package.json. The yarn equivalent of `npm ci` is `yarn install --immutable --immutable-cache --check-cache` (See [https://stackoverflow.com/a/69944063](https://stackoverflow.com/a/69944063) for more details)

* **Converting between yarn.lock and package-lock.json:** yarn uses yarn.lock and npm uses package-lock.json. You can convert a yarn.lock file to a package-lock.json using the `yarn import` command. Use [synp](https://github.com/imsnif/synp) to convert yarn.lock files to package-lock.json.

* **Don’t change lock files manually:** Use `npm update` and `npm install` to add and update packages.

Lock files can be intimidating, but they are easy to work with as long as you avoid manually editing them. Following these practices will help ensure that your project runs smoothly.
Editing and using a command quite some time ago on Bash
Tags: bash, zsh, history
Published: 2023-02-23 11:41:21

In Bash or Zsh, we can in general use the up arrow to get back the command line some 20 or 25 lines ago, edit the command, press Enter and execute it.

However, pressing the up arrow key 20 or 25 times can be tedious, and we need to look closely when we get that exact line, which can be tiring on the eyes.

One quicker way is this:

1. Use `h` or `history` to look at the list of past commands. When needed, use `history -300` to look at 300 lines of history
2. Use `!127` to execute the command line 127 as shown above "as is" with no editing, but to edit it, then:
3. Use `!127:p` to just print that command line without executing it, and put it into history
4. Then, use the up arrow once and you can get that command, and edit it as you wish (using left, right arrow, CTRL-A to go to the beginning, or CTRL-R to search backward, etc, depending on your settings)
Liman MYS Ağ İzleme Eklentisi - Linux Cihazı SNMPv3 kullanarak izleme
Tags: liman, agizleme, snmp
Published: 2023-02-23 11:32:54

Liman MYS üzerinden Ağ izleme eklentisine girelim ve "Configuration→ Create Host" yolunu takip edelim.

SNMPv2 & SNMPv3 yapılandırması için →https://dev.to/aciklab/ubuntu-uzerinde-snmp-servisi-kurulumu-47d8 adresinden yardım alabilirsiniz.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9h8799xxdut6874ufis.png)

- Hostname: hostumuza isim verelim.
- Groups: Hostumuzun dahil olacağı grup(lar)ı seçelim.
- Templates: Hostumuz için uygun SNMP şablonunu seçelim.
- Type: SNMP seçelim.
- Version: SNMPv3 seçelim.

**Security level'de 3 seçeneğimiz var, burada SNMPv3 yapılandırması yaptığımız makinede yaptığımız konfigürasyonları baz alacağız.**
- 1) noAuthNopriv;
Bu seçenekte sadece security name bölümünü doldurmamız yeterlidir.
- 2) authNoPriv;
Bu seçenekte security name bölümüyle birlikte Authentication protocol ve authencitation passphrase bölümleri de doldurulmalıdır.
- 3) authPriv;
Bu seçenekte ise tüm bölümleri doldurmalıyız.
   - Security Level: noAuthNopriv, authNoPriv, authPriv seçeneklerinden birini seçelim.
   - Security Name: SNMP konfigüsaryonu yaparken oluşturduğumuz kullanıcı adını girelim. 
   - Context Name: zorunlu değildir boş bırakılabilir.
   - Authentication protocol: kimlik doğrulama protokolümüzü seçelim.
   - Authentication passphrase: kimlik doğrulama protokolümüzün parolasını girelim.
   - Privacy protocol: gizlilik protokolümüzü seçelim.
   - Privacy passphrase: gizlilik protokolümüzün parolasını girelim
   - Use bulk request: SNMP hostumuzdan veri talep ederken her seferinde birden fazla değer geri döndürmek istiyosak bu seçeneği aktifleştirmeliyiz.
How to Write Good Commit Messages: A Guide for Developers
Published: 2023-02-23 11:01:17

As a developer, writing good commit messages is an important skill to have. Not only does it help to keep your codebase organized, but it also makes it easier for you and your team to understand changes made to the code over time. In this post, we'll go over some tips on how to write good commit messages.

1. Be concise
The first tip is to keep your commit messages short and to the point. A good commit message should summarize the changes made in the commit in a single line, and provide more detail in the body of the message if necessary. This helps to make your commit messages easy to read and understand.

2. Use imperative mood
When writing your commit messages, use the imperative mood (e.g. "Fix bug" instead of "Fixed bug" or "Fixes bug") to describe what the commit does, as if you're giving a command. This makes your commit messages more clear and actionable.

3. Include a summary
The first line of your commit message should be a short summary of the changes made in the commit. This should be no longer than 50 characters, and should be followed by a blank line. The summary should be descriptive enough to give a high-level overview of the changes made.

4. Provide context
In the body of the commit message, provide context for the changes made. This could include a brief explanation of why the change was made, any relevant background information, or a description of the approach taken to make the change. This helps to give your team a better understanding of the changes made.

5. Be consistent
Establish a consistent style for your commit messages across your project, so that everyone on your team knows what to expect. This could include using a specific format for the summary, or using specific keywords to indicate the type of change being made (e.g. "feat" for a new feature, "fix" for a bug fix). Consistency helps to make your commit messages easier to read and understand.

6. Edit your message
Before committing your changes, take a moment to review your commit message and make sure it accurately describes the changes you've made. If you realize there's something you've missed, don't be afraid to amend your commit message to provide more information.

By following these tips, you can write clear, concise commit messages that help to keep your codebase organized and easy to understand. Writing good commit messages may seem like a small thing, but it can have a big impact on your team's productivity and efficiency. So, take the time to craft good commit messages - your future self (and your team) will thank you!
JavaScript —— Collections
Tags: javascript
Published: 2023-02-23 11:26:32

## Map

> 保证顺序的 key-value 映射集合.

### 实例属性

- `size`: 成员数量

### 实例方法

- `get()`: 根据 key 获取 value
- `set()`: 根据 key 设置 value
- `has()`: 是否存在 key
- `delete()`: 根据 key 删除
- `clear()`: 清空
- `forEach()`: 遍历
- `entries()`: 返回 [key, value] 迭代器
- `keys()`: 返回 key 迭代器
- `values()`: 返回 value 迭代器

> 1. `Object` 的 key 必须为 `String` 类型, `Map` 的 key 为任意类型.
> 2. `Object` 的成员数量需要手动计算, `Map` 可以通过 `size` 属性读取.
> 3. `Object` 遍历不能保证顺序, `Map` 遍历和插入顺序一直.
> 4. `Object` 有原型, 存在原型链上的 key.
> 5. `WeakMap` 的 key 必须为对象类型, 没有遍历和清空方法.

---

## Set

> 存储任意类型的唯一值且保证顺序, 常用于去重.

### 实例属性

- `size`: 成员数量

### 实例方法

- `add()`: 新增 value
- `has()`: 是否存在 value
- `delete()`: 删除 value
- `clear()`: 清空
- `forEach()`: 遍历
- `entries()`: 返回 [value, value] 迭代器
- `keys()`: 返回 value 迭代器
- `values()`: 返回 value 迭代器

> `WeakSet` 的 key 必须为对象类型, 没有遍历和清空方法.
All About ES6 & Why it is so Popular
Tags: webdev, javascript, beginners, react
Published: 2023-02-23 11:22:22

## What is ES6🤔?

ES6, or ECMAScript 6, is the sixth version of the ECMAScript language specification. It is also known as ES2015 because it was released in 2015. ES6 is a significant update to the language and introduced many new features, syntax improvements, and improvements to the way JavaScript works.

## Why it is so Popular🤔

ES6 is popular for several reasons. Here are some of the main Reasons:

* ### New features and improvements:
    
    ES6 introduced many new features and syntax improvements to the language, such as arrow functions, template literals, let and const variables, classes, destructuring, and more. These improvements make the language more efficient, readable, and easier to maintain, which has made it more popular among developers.
    
* ### Better browser support:
    
    Many modern browsers now support ES6 features, which means that developers can use these features without worrying about compatibility issues with older browsers. This has made it easier for developers to adopt ES6 and take advantage of its benefits.
    
* ### Improved developer productivity:
    
    The new features and improvements in ES6 have made it easier for developers to write more concise and readable code. This, in turn, has improved developer productivity and reduced the amount of time required to write and maintain code.
    
* ### Community adoption:
    
    The JavaScript community has widely adopted ES6, with many popular frameworks and libraries such as React, Angular, and Vue.js using ES6 features extensively. This has made it more attractive for developers to learn and use ES6, as they can take advantage of these popular frameworks and libraries.
    

## Features introduced in ES6🎉

* Block-scoped variables.
    
* Arrow functions.
    
* Template literals.
    
* Destructuring.
    
* Classes.
    
* Default function parameters.
    
* Rest and spread operators.
    
* Promises.
    
* Async/await.
    
* Modules.
    
* Enhanced object literals.
    
* Iterators and generators.
    
* Maps and sets.
    
* String methods.
    
* Proxies.
    
* Symbols.
    
* Typed Arrays.
    
* & many more..................
    

*<mark>We will discuss as these features in Detail.</mark>*

If you enjoyed this article and would like to read more, Be sure to [*<mark>Follow me</mark>*](https://dev.to/amansingh) for regular updates.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676822924698/387161d0-5209-41c0-846e-c343a03f8482.gif align="center")


[Read Article on HashNode](https://amansingh-me.hashnode.dev/all-about-es6-why-it-is-so-popular)