teleren/devto huggingface dataset:
Visual Studio Pros and Cons?
Tags: visualstudio, code
Published: 2023-08-13 17:13:23

"Visual Studio" is a widely used integrated development environment (IDE) developed by Microsoft. As of my last knowledge update in September 2021, I can provide you with some of the pros and cons that were associated with Visual Studio at that time. Keep in mind that there may have been updates or changes since then, so I recommend checking for the most current information.

## Pros of Visual Studio:

**Rich Feature Set:** Visual Studio is known for its extensive feature set, making it suitable for a wide range of development tasks. It supports various programming languages, frameworks, and technologies.

**Productivity:** Visual Studio offers a highly productive development environment with features like IntelliSense (code completion), debugging tools, and project management features.

**Ecosystem:** Being developed by Microsoft, Visual Studio integrates well with other Microsoft technologies and services, such as Azure, GitHub, and Azure DevOps, providing a comprehensive development ecosystem.

**Extensibility:** Visual Studio supports extensions and plugins, which allow developers to customize and enhance the IDE to suit their specific needs.

**Strong Community:** Visual Studio has a large and active user community, which means you can find plenty of resources, tutorials, and community support online.

**Cross-platform Development:** Visual Studio has been expanding its support for cross-platform development, allowing developers to build applications for various platforms, including Windows, web, mobile, and cloud.

## Cons of Visual Studio:

**Resource Intensive:** Visual Studio can be resource-intensive, especially for large projects, which might lead to slower performance on lower-end machines.

**Learning Curve:** Due to its extensive feature set, Visual Studio can have a steep learning curve for beginners or those transitioning from simpler IDEs.

**Cost:** The full-featured version of Visual Studio, especially the Enterprise edition, can be expensive. However, Microsoft also provides free editions like Visual Studio Community, which has limitations on usage for certain scenarios.

**Updates and Compatibility:** Sometimes, updates to Visual Studio can introduce compatibility issues with existing projects or extensions.

**Size: **The installation size of Visual Studio, especially with additional components, can be quite large.

**Lack of Some Features for Non-Microsoft Technologies:** While Visual Studio has improved its support for non-Microsoft technologies, some specialized features for certain platforms may be better supported by other IDEs.

Also Learn [Android studio vs visual studio code: which is better?](https://instructivetech.com/flutter-for-android-studio-vs-vs-code/)
Redefining List Design: A Bold Approach
Tags: ui, mobile, ux, uxdesign
Published: 2023-08-13 17:12:24

I asked friends what a line above the blocks signifies. 
![list with line above clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwykyhlmpmntzs7b9ims.png)
On one hand, everyone guessed what I meant, but on the other, they all said it's very unintuitive. I agree with that sentiment. I've never come across such a solution before. 

Here's one of the responses:

> When a programmer comes up with a design, it ends up looking something like when a designer codes algorithms.

Most likely, such a list looks unintuitive because people aren't used to it. I hope over time it will become more familiar, because otherwise I can't fit enough information on a mobile screen.
For instance, compare:

![comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3sog9y5v7lf7ywfjxpr.png)

As you can see, on a mobile device with a narrow screen, the fourth level barely fits, and the text is so short that its meaning gets lost. There's no even talking about the fifth level. With my approach, the space for text doesn't decrease.

Essentially, we split the list into two layers and then merge them:

![schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4imr6a3gnru5l0kzkpun.png)

Here are a few more experiments with layering levels onto blocks:

![variants 1-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz44sxv39re1vceny4ry.png)

And a few more:

![variants 4-6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd8bth7fgy0md4lfbteu.png)

A designer showed me a similar approach on some website, but there the level was shown as a number, not a line. I believe lines are still more illustrative.

I liked this version the most:

![I liked this version the most](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uvunnwf5bcy946y9c56.png)

Judging by the feedback, it's still too early to use such an approach in a commercial project. But I'll give it a try in my personal project.

What do you think about this method of displaying levels?
Using the MPA Plugin in Vite: A Step-by-Step Guide
Tags: vite, mpa, plugin
Published: 2023-08-13 17:04:37

Using the MPA Plugin in Vite: A Step-by-Step Guide
--------------------------------------------------

Are you a software developer looking to build a multi-page application (MPA) using Vite? Well, you're in luck! In this step-by-step guide, we'll walk you through the process of using the MPA plugin in Vite to create a fantastic multi-page application. So, let's get started!

### Step 1: Setting up Vite

Before we dive into using the MPA plugin, you'll need to set up Vite in your development environment. If you haven't done so yet, head over to the Vite documentation and follow the installation instructions. Trust me, it's as easy as pie!

### Step 2: Installing the MPA Plugin

Once you have Vite up and running, it's time to install the MPA plugin. Open up your terminal and navigate to your project directory. Run the following command to install the plugin:

`npm install vite-plugin-mpa --save-dev`

Wait a few moments for the installation to complete. While you're waiting, you can make yourself a cup of coffee or do a little dance to keep the excitement going!

### Step 3: Configuring Vite

Now that the MPA plugin is installed, it's time to configure Vite to use it. Open up your `vite.config.js` file and add the following code:

`import { defineConfig } from 'vite'; import mpa from 'vite-plugin-mpa'; export default defineConfig({ plugins: \[ mpa() \] });`

Save the file, and you're good to go! Vite is now set up to build your multi-page application using the MPA plugin.

### Step 4: Creating Your Pages

It's time to get creative and start building your pages! Create a new folder called `pages` in your project directory. Inside this folder, you can create individual HTML files for each of your pages. Don't forget to add some funny phrases to keep things interesting!

### Step 5: Running Your Application

Once you're done creating your pages, it's time to run your application. In your terminal, run the following command:

`npm run dev`

Vite will now compile your multi-page application and start a development server. Open up your favorite browser and navigate to `http://localhost:3000`. Voila! Your multi-page application is up and running!

### Conclusion

Using the MPA plugin in Vite makes building multi-page applications a breeze. With just a few simple steps, you can create fantastic and hilarious applications that will leave your users in stitches. So go ahead, give it a try, and let your creativity run wild!

### References:

*   Vite Documentation: [https://vitejs.dev/](https://vitejs.dev/)
*   Vite MPA Plugin: [https://www.npmjs.com/package/vite-plugin-mpa](https://www.npmjs.com/package/vite-plugin-mpa)
PostgreSQL And Apache-Age. Part-2
Published: 2023-08-13 16:14:31

## Apache-Age
 
As a user-friendly extension to the Apache Spark ecosystem, Apache AGE provides an innovative way to execute complex graph queries directly on data stored in a PostgreSQL database. This open-source project, currently in the incubation stage, is being developed by the Apache Software Foundation.

What sets Apache AGE apart is that it eliminates the need for transferring data from PostgreSQL into a separate graph database. This not only streamlines the process of executing graph queries but also reduces the complexity and cost associated with managing multiple data storage.

With Apache AGE, users can perform sophisticated graph queries, including path queries, pattern matching, and sub graph queries, with greater ease and efficiency. The extension leverages Spark's distributed computing capabilities, making it a scalable solution for handling large datasets.

Overall, Apache AGE provides a powerful yet user-friendly solution for executing graph queries on PostgreSQL data. As a result, it has become a popular choice for data scientists, researchers, and developers looking to optimize their graph analytics workflows.

Apache-Age:(https://age.apache.org/)
[GitHub:-https://github.com/apache/age](https://github.com/apache/age)
Career building
Tags: weeklyblog, dsa
Published: 2023-08-13 16:53:20

The things which I done in this week is done some DSA questions from hackerrank and studies some concepts in mongodb, I'm trying to maintain an streak which is trying to learn new things in an week. For the DSA section, which is done to improving the coding skill basically done questions from hackerrank, If any one want to refer it the github repo link : https://github.com/Z-M-Zero-to-Mastery/DSA-problem_solving 
In this repo which consist of problems and solutions for it in different ways both efficient, non-efficient, shorthand way etc. In mongodb section, which I'm trying to learn some more advance topics in it like, normalization and denormalization , database design, relations, aggregation, scaling of the db etc. where I'm currently in my learning path. the topic which I learned in this week is about relations like one to one, one to many etc. For the next week I'm planning to cover more topics....
It was already indexed!
Published: 2023-08-13 16:48:52

I recently had the pleasure of chatting with @dmitrykan on his  [Vector Podcast](https://dmitry-kan.medium.com/vector-podcast-e27d83ecd0be). Check it out: [https://dmitry-kan.medium.com/vector-podcast-with-sid-probstein-search-in-siloed-data-with-swirl-f2b9595a2715](https://dmitry-kan.medium.com/vector-podcast-with-sid-probstein-search-in-siloed-data-with-swirl-f2b9595a2715)

We talked about quite a few things, including: 

- The challenges of enterprise search in the post-cloud era

- How cross-silo search is particularlyt tricky because of entitlements (aka permissions) across silos

- Zero-code configuration of connectors in Swirl, where JSON path and developer API doc get the job done 

- How large language models contextually re-rank disparate search results

There was an interesting twist at the end of the call. Dmitry uses a service called [Clearword](https://clearword.com/) to transcribe recordings. Dmitry asked: “how quickly can you index the transcript and search it with Swirl?” 

Here is my answer: [It was already indexed!](https://www.youtube.com/watch?v=WMHnb_6Wf50)

{% embed https://www.youtube.com/watch?v=WMHnb_6Wf50 %}

Since there is no audio and it goes by quickly, let me explain ... Clearword emailed the transcript to both of us shortly after recording ended. It was indexed by Microsoft Outlook within seconds of arriving in my inbox. 

To verify this, I copied some text from the middle of the transcript and pasted it into Swirl, which returned the link to the email message with the transcript and the phrase I searched for. 

That simple truth - that the average enterprise is awash in search forms - is the entire reason metasearch is such a game-changing approach. Instead of making yet another repository, Swirl sends queries to existing search APIs and re-ranks the results from everything. It saves users a huge amount of time without a major IT project. 

Want to see for yourself? git it going with 2 commands via Docker here: https://github.com/swirlai/swirl-search
Unblocked Games Premium
Tags: games
Published: 2023-08-13 16:35:57

Unblocked Games Premium is dedicated to keeping you informed about the latest premium unblocked games, all accessible for free. Stay updated with the freshest information on a variety of games that guarantee top-tier entertainment. We're committed to delivering the best gaming experiences, all unblocked and all for free.

https://unblockedgamespremium.org/
Codemirror with Vue 2: Addons
Tags: webdev, vue, codemirror, javascript
Published: 2023-08-13 16:21:00

In the world of web development, integrating powerful tools into your projects can greatly enhance the user experience and streamline your workflow. If you're currently utilizing a fundamental CodeMirror setup within the Vue 2 framework (if you haven't, you can find a guide on setting up CodeMirror with Vue 2 [here](https://dev.to/dinkarsharma/codemirror-with-vue-2-539f)), you might have encountered a common predicament. Unlike the conventional code editors you're accustomed to, the integrated code editor might not be exhibiting the anticipated behavior. This discrepancy can lead to frustration, but fear not, as this post will delve into the intricacies of this issue and provide insights on how to overcome it.

**Following are some of the functionalities that you should really add to your code editor:**

### Auto Close Brackets:

Brackets should be automatically closed while typing. This can be done as following: 
- First import closebrackets addon, like this:
`import 'codemirror/addon/edit/closebrackets.js'
`
- Then add autoCloseBrackets inside configuration options like this:

```
 Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
        })
```
- That's it now autoCloseBrackets functionality is enabled in your code editor


### Match Tags and Auto Close Tags:
If you are enabling a language which includes tags like HTML then these are useful. 

- First import them from addons folder:
`import 'codemirror/addon/edit/matchtags.js'`
`import 'codemirror/addon/edit/closetag.js'`

- Then add them to configuration options:

```
Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
            matchTags: true,
            autoCloseTags: true,
        })
```

Similarly you can add many more addons. Now that you know how you can include addons to your code editor, you should go through this part of the documentation: [Link](https://codemirror.net/5/doc/manual.html#addons), here all the other addons are given with there details.
How to Make Keyboard Show Up Without TextField in Flutter
Tags: flutter, dart, keyboard, focus
Published: 2023-08-13 16:07:00

How to Make Keyboard Show Up Without TextField in Flutter
---------------------------------------------------------

As a software developer, you may have encountered situations where you want the keyboard to appear on the screen without having a text field selected. In Flutter, this can be a bit tricky, but fear not! In this article, we will explore a simple workaround to achieve this.

First, let's understand why the keyboard usually appears only when a text field is selected. This behavior is a default feature in Flutter to ensure a seamless user experience. However, there may be cases where you want to show the keyboard without a text field, such as when you need to capture user input in a different way or display a custom input interface.

To make the keyboard appear without a text field, we can make use of the `FocusNode` class provided by Flutter. The `FocusNode` represents a node in the focus hierarchy and can be used to control the focus and keyboard behavior.

Here's a step-by-step guide on how to achieve this:

1.  Create a new `FocusNode` instance:

    FocusNode _focusNode = FocusNode();

3.  In your widget's `build` method, wrap the desired widget that should trigger the keyboard with a `GestureDetector`:

    GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(_focusNode);
      },
      child: YourWidget(),
    )

5.  Finally, in your `initState` method, add a listener to the `FocusNode` to show the keyboard when it gains focus:

    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        FocusScope.of(context).requestFocus(FocusNode());
        // Show the keyboard using platform-specific code
        // For example, you can use the Flutter Keyboard Visibility package
      }
    });

That's it! With these simple steps, you can make the keyboard show up without a text field in Flutter. Feel free to customize the behavior based on your specific requirements.

Remember, it's always important to consider the user experience when implementing such features. Make sure to provide clear instructions or visual cues to let users know why the keyboard is appearing without a text field.

We hope you found this article helpful and entertaining! Happy coding!

### References:

*   [Flutter API Documentation - FocusNode](https://api.flutter.dev/flutter/widgets/FocusNode-class.html)
*   [Flutter Keyboard Visibility package](https://pub.dev/packages/flutter_keyboard_visibility)
Criando um hello world para micro controladores Atmel usando o avr-gcc
Tags: arduino, maker, cpp, tutorial
Published: 2023-08-13 16:00:29

Afinal, o que é um [Arduino](https://www.arduino.cc/ "What is Arduino?")?
De forma simpllificada, o arduino é um jeito muito simples de se usar microcontroladores da família Atmel.
Nesse  texto, eu proponho a criação de um hello world (blink) utilizando apenas o [avr-gcc](https://gcc.gnu.org/wiki/avr-gcc "avr-gcc") e a libc de microcontroladores RISC no lugar de utilizar a Arduino-IDE e suas bibliotecas.

```cpp
#ifndef F_CPU
#define F_CPU 4000000L
#endif

#include <avr/io.h>
#include <util/delay.h>

int main(void)
{
	PORTB = 0b00000001;
	DDRB = 0b00000000;

	while(1)
	{
		! PORTB;
		_delay_ms(125);
	}

	return 0;
}
```

Nesse código simples,  modificamos o registrador de dados da porta B (PORTB, definindo o estado da porta com o [pullup](https://docs.arduino.cc/tutorials/generic/digital-input-pullup "pullup") ativo.
DDRB se refere ao registrador da direção dos bits da porta B, de forma que essa porta fica configurada como entrada. 
```cpp
	while(1)
	{
		! PORTB;
		_delay_ms(125);
	}
```
Esse trecho de código alterna o estado da porta, de forma que o led embutido do arduino fique piscando após o delay.

Agora temos que usar o avr-gcc para o nosso microcontrolador presente no arduino:

```sh
avr-gcc -Os \
-DF=4000000 \
-mmcu = attiny2313a \
-c blink.c
```
```sh
avr-gcc -DF=4000000 \
-mmcu=attiny2313a \
-o blink blink.o
```
Os parâmetros DF e mmcu dependem do microcontrolador e mais informações podem ser encontradas respectivamente nos links [AVR-Options](https://gcc.gnu.org/onlinedocs/gcc/AVR-Options.html "AVR-Options") e [Arduino Memory Guide
](https://docs.arduino.cc/learn/programming/memory-guide "Arduino Memory Guide")

Agora, o avr-objecopy cria o arquivo hexadecimal a partir do arquivo binário. Note que você poderia criar o arquivo executável diretamente caso exista somente um objeto a ser adicionado a esse executável:

```sh
avr-objcopy \ 
-j .text .data \ 
-O ihex blink.hex
```
Por fim, podemos usar o avrdude para fazer o flash no dispositivo destino: 
```sh
avrdude -c arduino \
-p attiny2313a \
-P /dev/ttyACM0 \
-U flash:w:blink.hex
```

Eu criei um [Makefile](https://github.com/x86girl/blink_avr/blob/main/Makefile "blink_avr project")  para simplificar todas essas etapas de forma mais limpa e didática.

O projeto inteiro está disponibilizado no meu [Github](https://github.com/x86girl/blink_avr "blink_avr project").

Eu sugiro esse excelente livro [ARDUINO - Guia Avançado para Projetos](https://www.editorainterciencia.com.br/index.asp?pg=prodDetalhado.asp&idprod=499&token= "
ARDUINO - Guia Avançado para Projetos") para quem quiser se aprofundar mais.
Example of using Apache Age with PostgreSQL
Published: 2023-08-13 15:57:41

We are going to see an example of using Apache Age with PostgreSQL. Starting with:
**Creating a graph schema:**
```
CREATE TABLE person (id int PRIMARY KEY, name text);
CREATE TABLE knows (src int REFERENCES person(id), dst int REFERENCES person(id));
```
**Adding nodes and edges to the graph:**
```
INSERT INTO person (id, name) VALUES (1, 'Ammar');
INSERT INTO person (id, name) VALUES (2, 'Ahmad');
INSERT INTO knows (src, dst) VALUES (1, 2);
```
**Querying the graph using GSQL:**

```
SELECT p.name, k.dst FROM person p, knows k WHERE p.id=k.src;
```
This query returns the names of people who know each other.

**Visualizing the Graph with GAdmin**
Once you have created your graph schema and added nodes and edges to the graph, you can use GAdmin to visualize the graph. GAdmin provides a visual representation of the graph, with nodes and edges displayed as circles and lines. You can use the visualization to explore the relationships between nodes and edges, and to identify patterns in the graph data.

**Conclusion**
These are just a few examples of how you can use Apache Age with PostgreSQL to model, query, and visualize graph data. The possibilities are endless, and you can use Apache Age to model and query any type of graph data.

Apache-Age:(https://age.apache.org/)
[GitHub:-https://github.com/apache/age](https://github.com/apache/age)
Mouldes, Common j's module and ES module
Tags: javascript, beginners, react, typescript
Published: 2023-08-13 15:52:55

JavaScript modules: You can divide your JavaScript code into various files using modules. This makes maintaining a code base simpler. Modules also rely on the script> tag's type = "module" attribute. 

modules: is Just a file, a module.One module is one script. Modules can load one another and employ specialised directives in that manner. To exchange functionality, call functions from one module into another using export and import.

The export keyword: Variables and functions marked with the export keyword should be used outside of the current module.

The import keyword: enables the importation of features from other modules.

Common j's module: The original method of packaging JavaScript code for Node.js was using Common J's module.
Common j's all of the dependencies for project are stored in one file or together in one file called node modules.

ES module: This standard, which debuted with ES6, was introduced in 2015. The goal was to provide these functionality in browsers while standardising how Js module operate

ES module each dependency is stored in its files