teleren/devto huggingface dataset:
The Basics: synchronous and asynchronous JavaScript
Published: 2023-07-04 12:29:49

JavaScript is a powerful programming language that enables developers to create dynamic and interactive web applications. JavaScript is also commonly referred to as a single-threaded language. This means that it has a single execution thread, which allows it to execute only one piece of code at a time.
Asynchronous JavaScript
By default, JavaScript is designed to be non-blocking and asynchronous. This means that when JavaScript encounters an asynchronous operation, such as making an HTTP request or fetching data from a server, it doesn't wait for the operation to complete before moving on to the next line of code. Instead, it registers a callback function or uses Promises or async/await to handle the result of the asynchronous operation once it finishes. Asynchronous JavaScript is particularly useful in scenarios where you don't want to block the execution of other operations. For example, when making an API call, it allows the browser to continue rendering the page or responding to user input while the request is being made in the background.
Synchronous JavaScript:
Asynchronous JavaScript, synchronous JavaScript executes code in a blocking manner. When an operation is performed synchronously, the program halts and waits until the operation is completed before moving on to the next line of code. This ensures that the execution order remains sequential and predictable.
While asynchronous JavaScript is the recommended approach for most scenarios, synchronous JavaScript can be useful in certain situations:
Simplifying Control Flow: In complex algorithms or when dealing with interdependent operations, synchronous JavaScript can provide a straightforward and sequential control flow, making the code easier to read and reason about.
Resource Synchronization: Synchronous execution ensures that critical resources are accessed or modified in a controlled manner. For example, when multiple operations need to update a shared variable, synchronous execution prevents race conditions and ensures data integrity.
Testing and Debugging: Synchronous code is often easier to test and debug compared to asynchronous code. By removing the complexities introduced by asynchronous callbacks or promises, you can more easily reason about the state and behavior of your code during testing or debugging sessions.
Synchronous JavaScript provides a way to execute code in a blocking manner, ensuring that operations complete before moving on to the next line. While asynchronous JavaScript is the default and recommended approach for most scenarios, there are situations where synchronous execution.
Choosing the Right AWS Region: Considerations for Cost, Latency, and Service Availability
Tags: aws, cloud, infrastructure
Published: 2023-07-04 12:07:48


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

## Introduction

When deploying your applications on AWS, selecting the appropriate region is an essential decision that can impact factors such as cost, latency, and service availability. In this blog post, we will explore how to make an informed choice by considering these critical aspects.

## Cost Considerations:

Determining the cost of running your application in different regions is crucial for optimizing your expenses. 
AWS provides a pricing calculator that enables you to estimate the costs of various resources. 
For example, you can use AWS calculator to evaluate the pricing for an EC2 m5.2xlarge instance in multiple regions.
https://calculator.aws/

## Latency Considerations:

Reducing latency is crucial for ensuring optimal application performance. To evaluate latency from different regions, you can check links such as  https://aws-latency-test.com/ and CloudPing.info 
These platforms allow you to measure network latency and determine the best regions based on your specific requirements.
By leveraging these tools, you can gain insights into network performance and select regions that offer lower latency, thereby enhancing the user experience for your application's target audience.

## Service Availability by Region:

AWS's global infrastructure is spread across multiple regions, each providing a different set of services. To identify the availability of specific AWS services in different regions, you can refer to the official AWS Regional Services List.
https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/
By exploring this resource, you can ensure that the services required by your application are accessible and supported in the regions you are considering. This information allows you to make informed decisions and avoid potential limitations or constraints that may arise from service unavailability in specific regions.

## Conclusion:

Choosing the right AWS region involves considering several factors such as cost, latency, and service availability. By utilizing tools like the AWS pricing calculator, aws-latency-test.com, and the AWS Regional Services List, you can gather the necessary information to make informed decisions.

**Remember to** evaluate your specific requirements and priorities when selecting an AWS region. By doing so, you can optimize costs, minimize latency, and ensure that the required services are available to support your application's successful deployment and performance.
Expand Your Monitoring Capabilities with AppSignal's Standalone Agent Docker Image
Tags: docker, elixir, ruby, node
Published: 2023-07-04 11:44:14

Want to monitor all of your application's services? Our Standalone Agent allows you to monitor processes our standard integrations don't monitor by default, helping you effortlessly expand your monitoring capabilities.

To help simplify the process of configuring our standalone agent, we're excited to announce the launch of our Standalone Agent's Docker image, available on Docker Hub under the name [appsignal/agent](https://hub.docker.com/r/appsignal/agent).

## What Is the AppSignal Standalone Agent?

Based on the same software that powers our Ruby, Elixir, and JavaScript integrations, the standalone agent can be used to monitor:

- **Infrastructure:** machines that are part of our system but do not run application code.
- **Background jobs:** Think intensive cron jobs or long-running data-processing scripts. You can use the standard integration if these background jobs are written in a supported language (Ruby, Elixir, or Node.js).
- **More languages:** Programs written in languages other than those supported by an AppSignal integration.

For instance, with the standalone agent, you can track a machine learning model written in Java, instrument backup scripts, or monitor Kafka brokers.

## Monitor Traces, Custom Metrics, and More

The AppSignal standalone agent is a powerful addition to monitoring your applications. With the standalone agent Docker image, you can report OpenTelemetry traces, StatsD metrics, and NGINX metrics to a single endpoint within your internal network.

You can view all this information on AppSignal alongside your application's core metrics, giving you a bird's eye view of the performance of your application and its services.

![StatsD Metrics](https://blog.appsignal.com/images/blog/2023-06/statsd-metrics.png)

## Getting Started with AppSignal's Docker Image

Previously, running the AppSignal standalone agent required running it as another process on a Docker container for your application or infrastructure like NGINX. However, with our new docker image, you can run the AppSignal standalone agent in an isolated container, making it easier to manage and more efficient to use.

Ready to get started? You can find more information on how to install and configure the AppSignal standalone docker image in our [installation](https://docs.appsignal.com/standalone-agent/installation/docker-image.html) and [configuration](https://docs.appsignal.com/standalone-agent/configuration/options.html) documentation.

## AppSignal, The Developer Driven APM

AppSignal's standalone agent is just one of our many developer-driven tools designed to help you to monitor your application. Developers also enjoy using our monitoring because we have:

- An intuitive interface that is easy to navigate.
- Simple and predictable pricing.
- Developer-to-developer support.

If you're new to AppSignal, remember to <a href="mailto:support@appsignal.com">ask us</a> for some free stroopwafels! They taste almost as good as it feels to have all of your application's metrics at your fingertips 😉🍪
Introducing Operator-Caska: The Perfect Blend of CaskaydiaCove and Operator Mono
Tags: programming, ui, vscode, design
Published: 2023-07-04 11:40:46

Fonts play a crucial role in the coding and development process, making the text more readable and aesthetically pleasing. Today, I am excited to introduce **Operator-Caska**, a unique cursive font which combines the elegance of CaskaydiaCove Nerd Font with the sophistication of Operator Mono.

![Operator-Caska](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht03br55fau2d1l0rrsw.png)


Operator-Caska offers **ligature and cursive support**, making it an excellent choice for developers who appreciate both style and functionality in their coding environment. In this blog post, we'll delve into how you can integrate it into your preferred code editor.

## Installation and Usage:

### Download Operator-Caska
 Visit the [GitHub repository](https://github.com/Anant-mishra1729/Operator-caska-Font) and download the Operator-Caska font files.
{% embed https://github.com/Anant-mishra1729/Operator-caska-Font %}
```bash
git clone https://github.com/Anant-mishra1729/Operator-caska-Font.git
```
#### Linux
Move both files `Operator-Caska Italic.ttf` and `Operator-Caska Regular.ttf` fonts inside directory `~/.fonts`, create `.fonts` directory in your HOME if it does not exists.
 
#### Windows
Right click both .ttf files and install them.

### Configure your Code Editor
Open your preferred code editor and navigate to the settings or preferences menu. Locate the "Font" or "Typography" section and set the font family to **`Operator-Caska`**. Adjust the font size and line spacing to your liking.


### Enable Ligatures
If your code editor supports ligatures, ensure that the ligature option is enabled.

In VsCode you can paste this in _settings.json_ to activate both features:
```json
    "editor.fontFamily": "'Operator-Caska'",
    "editor.fontLigatures": true
```


### Apply theme
If you haven't already, install and apply the Monokai Pro/One monokai italic or any other theme with supports italics in your code editor. Configure the theme's settings to match your preferences, and enjoy the perfect combination of Operator-Caska's elegance.
How to Debug CSS (using CSS)
Tags: css, html, webdev, tutorial
Published: 2023-07-04 11:21:40

Sometimes when you're working with CSS you may face some issues that are not very easy to debug, like having horizontal scrolls, overlapping elements, and margins that are more or less than the value that you set.

Even after changing attribute's values and re-writing elements, you're still seeing that strange behavior that you're desperately trying to get rid of.

So you go to Dev Tools and inspect the element, and there's nothing wrong with it, or with its parent elements. Then you start to get crazy because there's no other way to debug the issue and you tried every possibility so far!

CSS doesn't have a debugger like programming languages, so **we need to rely on our own abilities to do it manually.**

**I usually have two approaches to do it: border and background color.**

## The `border` approach

This is pretty simple and works for more basic scenarios. You just need to add a colored border `*` the elements on the screen and see what may be causing issues:

```css
* {
  border: 1px solid green;
}
```

![Border approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j16qa3qawffnxexxrk5b.png)

This approach is good to check isolated groups of elements like headers, footers, lists and so on. For whole layouts it's not ideal because the `border` property adds some spacing between elements so it may cause inconsistencies on the page layout.

## The `background-color` approach

This approach is more useful to more complex scenarios where border is not a good option, like whole pages and complex components. It's also pretty simple to use it:

```css
* {
  background-color: rgba(0 255 0 / 5%);
}
```


![Background approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3145fpk6gif1e40ee85.png)

Now you can clearly see any overlapping elements and identify issues that aren't easy to identify reading the CSS or via Dev Tools!

## Wrapping up

Since CSS runs on the browser, we need to be creative to debug it and identify problems.

If you're working with React, you can take advantage of tools like [Storybook](https://storybook.js.org/) which enables you to progressively build isolated components.

But without React this may be a tricky task. In these situations you can use the solutions above.

Hope that helps!

---

If you have any feedback or suggestions, [send me an email](mailto:lucashwolff@gmail.com)

Great coding!
How to Change Date Format in Excel using Openpyxl?
Tags: excel, openpyxl, pandas, python
Published: 2023-07-04 11:20:15


## How to Change Date Format in Excel using Openpyxl

When working with date data in Excel using the `openpyxl` library, you may need to change the date format to a specific format before writing it to an Excel file. In this tutorial, we will guide you through the process of changing the date format and writing it to an Excel file using `openpyxl`.

### Step 1: Import the required libraries

To begin, we need to import the necessary libraries: `pandas`, `openpyxl`, and `openpyxl.styles`.

```python
import pandas as pd
from openpyxl import Workbook
from openpyxl.styles import NamedStyle
```

### Step 2: Create a DataFrame with date column

Next, we'll create a DataFrame with a column of dates. In this example, we'll generate a range of dates from '2018-1-1' to '2019-1-1'.

```python
df = pd.DataFrame({'DATE': pd.date_range(start='2018-1-1', end='2019-1-1')})
```

### Step 3: Assign the date column to multiple columns in the DataFrame

To demonstrate different date formats, we'll assign the date column to multiple new columns in the DataFrame.

```python
df = df.assign(DATE2=df["DATE"])
df = df.assign(DATE3=df["DATE"])
```

### Step 4: Create an Excel workbook and named styles

We'll create an Excel workbook using `pd.ExcelWriter` and specify the engine as "openpyxl". Additionally, we'll define three named styles with different date formats.

```python
ewb = pd.ExcelWriter('test.xlsx', engine="openpyxl")
nsmmyy = NamedStyle(name="cd1", number_format="MM-YY")
nsmmmyy = NamedStyle(name="cd2", number_format="MMM-YY")
nsbyy = NamedStyle(name="cd3", number_format="MMMM-YY")
```

### Step 5: Write the DataFrame to the workbook

We'll write the DataFrame to the Excel workbook using the `to_excel` method of the Excel writer.

```python
df.to_excel(excel_writer=ewb, sheet_name="SHT1")
```

### Step 6: Apply named styles to the date columns

To change the date format in Excel, we'll iterate over each cell in the date columns and apply the appropriate named style.

```python
ws = ewb.book["SHT1"]
for i in range(1, len(df) + 2):
    ws.cell(row=i, column=2).style = nsmmyy
    ws.cell(row=i, column=3).style = nsmmmyy
    ws.cell(row=i, column=4).style = nsbyy
```

### Step 7: Save the workbook

Finally, we'll save the workbook using the `save` method of the Excel writer.

```python
ewb.save()
```

### How the result will look like?

![Resultant excel document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmh10cjlkvvzphvr684m.png)
Nos Couleurs De Granit Préférées Pour Un Bureau À Domicile Contemporain Et Épuré
Tags: comptoir, comptoirengranit, comptoirenquartz, comptoirdecuisine
Published: 2023-07-04 11:19:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxxx3f6zb2qpn2enlk39.png)
Nous savons tous que le ton de notre maison influe sur notre humeur, mais qu'en est-il de notre espace de travail ? Sans l'ombre d'un doute, nous entendons par là notre espace de travail, la surface dure où vous passez probablement la majeure partie de votre journée à rédiger des documents importants, à composer et à comprendre des messages et à prendre note d'appels importants.

Pour plus d'informations, visitez notre site [**Granite4less**](https://granite4less.ca/Nos-couleurs-de-granit-prfres-pour-un-bureau-domicile-contemporain-et-pur)
To Monorepo or not to Monorepo: Which is right for you and your organization?
Published: 2023-07-04 11:16:23

Just shared a blog post exploring the pros and cons of monorepos. If you're contemplating their use, you might find it useful. Check it out and share your thoughts>> https://medium.com/lightricks-tech-blog/to-monorepo-or-not-to-monorepo-which-is-right-for-you-and-your-organization-6abb00c725a6
Zeroscope v2 XL: From Text to High Resolution Video The Future of Cinema!
Tags: node, ai, zeroscope, opensource
Published: 2023-07-04 10:46:33


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k62guyxsw9q93tkucd8.png)
Today we want to tell you about a breakthrough that is revolutionizing the way we create video content: Zeroscope v2 XL. This incredible tool not only generates and enhances high quality videos, but also creates them from text. Yes, you read that right, text transformed into video! Let's see how this is redefining the boundaries of creativity and bringing us closer to a future where even movies could be generated this way.

## What is Zeroscope v2 XL and how can it turn text into video?

Zeroscope v2 XL is an amazing Modelscope-based tool capable of generating high-resolution (1024 x 576) watermark-free videos from simple text. Trained with over 9,923 clips and almost 30,000 tagged frames at 24 frames per second, Zeroscope v2 XL uses the 1111 text2video extension to transform your written ideas into stunning visualizations.

Imagine having an idea for a movie scene and being able to see it come to life in real time. You can start exploring your ideas at lower resolutions (576x320 or even 448x256) and then, with the power of Zeroscope v2 XL, enhance your video to a higher resolution.

## The Future of Cinema: Movies generated from text?

Although we are still in the early stages, the possibilities opened up by Zeroscope v2 XL are truly exciting. Today, the model can generate short videos from text, but who's to say that in the future we won't be able to generate entire movies this way? The consistency and length of the generated videos are areas that are constantly being worked on and improved.

## Usage and Recommendations

To get the most out of Zeroscope v2 XL, we recommend using the 1111 text2video extension. This plug-in works best at a resolution of 1024x576 with a noise reduction strength between 0.66 and 0.85. When rendering 30 frames at this resolution, Zeroscope v2 XL will use 15.3 GB of VRAM memory, so make sure you have enough space available.

## In Conclusion

Zeroscope v2 XL is a big step forward in the field of video creation. Although it still has some challenges to overcome, such as improving the consistency and length of the generated videos, the potential is immense. It brings us closer to a future where we could turn any idea into a movie just by writing it down.

Special thanks to camenduru, kabachuha, ExponentialML, dotsimulate, VANYA, polyware, tin2tin for their contribution to this fascinating project - let's keep pushing the boundaries of creativity and exploring the possibilities of the future of cinema!

[Attached article](https://makiai.com/en/from-text-to-video-with-ai-zeroscope/): Example videos I have created with this model(they are very very short), and link to the model in Replicate and HuggingFace,

**PS.** I put the tag "nodejs" to the article because it can be used from nodejs with the Replicate library, as explained in the attached article.
Multi-engine site search
Tags: search, html
Published: 2023-07-04 08:52:26

---
title: "Multi-engine site search"
published: true
description: "I added the /search page to my site with a form supporting multiple search engines."
tags: search, html
canonical_url: https://www.ciccarello.me/blog/2023/07/04/multi-engine-site-search/
---


I added the [/search](https://www.ciccarello.me/search/) page to my site with a form supporting multiple search engines. The hope is to give visitors a bit more choice in what companies to interact with.

The challenge was managing different query param for different sites.

- DuckDuckGo doesn't support multiple `q=` params, but does accept `sites=`
- Ecosia doesn't support a `sites=` param but does support multiple `q=` params (albeit with an extra comma requiring a space)
- Google does support a `as_sitesearch=` param but that was dropped with the addition of another `q=` param.

By adding several different hidden form fields, I was able to cover each engine (almost) seamlessly.
Then the only difference was the form action would could be defined on the button.
The final result is as follows:

```html
<form rel="search" method="get">
    <input type="hidden" name="sites" value="ciccarello.me"/>
    <input type="hidden" name="q" value="site:ciccarello.me "/>
    <input type="text" name="q" placeholder="Search"/>
    <button type="submit" formaction="https://ecosia.com/search">Search with Ecosia</button>
    <button type="submit" formaction="https://www.google.com/search">Search with Google</button>
    <button type="submit" formaction="https://duckduckgo.com/">Search with DuckDuckGo</button>
</form>
```