teleren/devto huggingface dataset:
Code Reading Docusaurus
Published: 2023-11-01 01:26:43


## Docusaurus feature


For this week, I found a couple of nice features from [Docusaurus](https://docusaurus.io/) and I thought [Code blocks](https://docusaurus.io/docs/markdown-features/code-blocks) feature is pretty cool and I'd like to add the feature to my [static website general](https://github.com/seog-jun/til-tool). For example, if you write 3 backticks with code in `.md` file, you will see code blocks below:


```typescript
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}
```


## Code Blocks source code in Docusaurus

Fist, I got into [Docusaurus Repo](https://github.com/facebook/docusaurus) and searched codes that I was looking for, my keyword was `codeblocks` and there were some files involved with codeblocks. I could find the test file as well. 

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

I found the `unwrapMdxCodeBlocks` function under `packages/docusaurus-utils/src/markdownUtils.ts`, and it returns code blocks after unwrapping the triple backticks. 

```typescript
export function unwrapMdxCodeBlocks(content: string): string {
  // We only support 3/4 backticks on purpose, should be good enough
  const regexp3 =
    /(?<begin>^|\n)```mdx-code-block\n(?<children>.*?)\n```(?<end>\n|$)/gs;
  const regexp4 =
    /(?<begin>^|\n)````mdx-code-block\n(?<children>.*?)\n````(?<end>\n|$)/gs;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const replacer = (substring: string, ...args: any[]) => {
    const groups = args.at(-1);
    return `${groups.begin}${groups.children}${groups.end}`;
  };

  return content.replaceAll(regexp3, replacer).replaceAll(regexp4, replacer);
}
```

I guess this function is used to unwrap code blocks and return to `preprocessor.ts`, and also, `Docusaurus` automatically picks up syntax highlighting and this is powered by `Prism React Renderer`. However, I didn't really figure out how to convert that content into `.html` file with using `Prism React Renderer`. 

I'm trying to implement the new feature in a similar way, but not exactly the same, so my plan is going to modify `unwrapMdxCodeBlocks` function and apply [Prism](https://prismjs.com/) to highlight the code blocks.
Inicio estudos React Native
Tags: reactnative, javascript, programming, beginners
Published: 2023-11-01 01:04:14

**Introdução**
Inicio dos estudos em React Native.

**Aprendizado**
Foi instalado e preparado o ambiente de desenvolvimento em RN.

**Execução**
Configuração do ambiente de desenvolvimento:
Instalação do Nodejs, python2, JDK8 e Android Studio.
Configuração do emulador.
Criação do projeto - Meu App.
![Imagem do primeiro app padrão do React Native](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2ur84zx9fmjd9m8z7r7.png)
Use C in your React
Tags: developertool
Published: 2023-11-01 06:42:27

---
title: Use C in your React
published: true
date: 2023-11-01 00:08:00 UTC
tags: DeveloperTool
canonical_url: https://reactjsexample.com/use-c-in-your-react/
---

# React `use c`
 ![Use C in your React](https://reactjsexample.com/content/images/2023/10/Code_2023-10_21-03-20.jpg)

Use C in your React!

[![Use C in your React](https://user-images.githubusercontent.com/8999001/278796293-495c39d6-3fb1-437d-9af0-03020c215159.png)](https://user-images.githubusercontent.com/8999001/278796293-495c39d6-3fb1-437d-9af0-03020c215159.png)

#

Screen.Recording.2023-10-28.at.2.32.49.AM.mov

<video src="https://user-images.githubusercontent.com/8999001/278795827-24a433d9-af89-4962-a0a1-ba6533092d0b.mov" data-canonical-src="https://user-images.githubusercontent.com/8999001/278795827-24a433d9-af89-4962-a0a1-ba6533092d0b.mov" controls="controls" muted="muted" style="max-width:100%;min-height: 200px"></video>

## TODO

- Add more folders and files with code that does nothing to look more professional
- Create `create-react-use-c` package cuz this ecosystem is broken
- Add typescript support
- Make somebody else figure out publishing this to npm (I am still not over it)
- Remove typescript support
- Tell windows ppl to just use WSL
- esbuild is not cursed enough, gotta switch to something else

## GitHub

[View Github](https://github.com/elnardu/react-use-c?ref=reactjsexample.com)
Browser based Python playground made using ReactJS with MicroPIP
Tags: browser
Published: 2023-11-01 06:42:19

---
title: Browser based Python playground made using ReactJS with MicroPIP
published: true
date: 2023-11-01 00:08:00 UTC
tags: Browser
canonical_url: https://reactjsexample.com/browser-based-python-playground-made-using-reactjs-with-micropip/
---

# python-playground
 ![Browser based Python playground made using ReactJS with MicroPIP](https://reactjsexample.com/content/images/2023/10/Code_2023-10_21-02-48.jpg)

Browser based Python playground Made using (Web Assembly [Pyodide](https://pyodide.org/en/stable/)) and ReactJS

## Features

- You can install libraries from [MicroPIP](https://pyodide.org/en/stable/usage/loading-packages.html#micropip)
- Easy to use, Syntax highlight

* * *

1. **Clone the Repository**

2. **Install Dependencies**

3. **Start the Development Server**

![Browser based Python playground made using ReactJS with MicroPIP](https://camo.githubusercontent.com/4de0b9013c062c7b8da4cdb51ed53ef6c2eed5449004dd07ff6136c4c828abd2/68747470733a2f2f692e6962622e636f2f306e64597478322f436170747572652e706e67)

## GitHub

[View Github](https://github.com/TeaByte/python-playground?ref=reactjsexample.com)
Connect VSCode and EC2 using SSH
Tags: vscode, ssh, ec2, aws
Published: 2023-11-01 00:04:41

I assume that you have VSCode installed.

## 1. Install an OpenSSH compatible SSH client

| OS | Instructions |
| --- | --- |
| Windows 10 1803+ / Server 2016/2019 1803+ | Install the https://learn.microsoft.com/windows-server/administration/openssh/openssh_install_firstuse. |
| Earlier Windows | Install https://git-scm.com/download/win. |
| macOS | Comes pre-installed. |
| Debian/Ubuntu | Run sudo apt-get install openssh-client |
| RHEL / Fedora / CentOS | Run sudo yum install openssh-clients |

<aside>
💡  If you do not have a SSH host set up, follow the directions for [Linux](https://aka.ms/vscode-remote/ssh/ssh-server), [Windows 10 / Server (1803+)](https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_install_firstuse), or [macOS](https://support.apple.com/guide/mac-help/allow-a-remote-computer-to-access-your-mac-mchlp1066/mac) or create a [VM on Azure](https://docs.microsoft.com/azure/virtual-machines/linux/quick-create-portal?toc=%2fazure%2fvirtual-machines%2flinux%2ftoc.json).

</aside>

## 2. Install `Remote - SSH` extension on VSCode

[VSCode Market Place Link](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)

## 3. Configure

1. Open command palette: `cmd + shift + p`
2. Select `**Remote-SSH: Open SSH Configuration File**`
3. Select one of your config location, I’ll just pick the first one

![Select SSH configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjql2fuhewvdvkqkpfdl.png)

1. Update the values
    
    ```
    Host alias-you-will-use
        HostName Public-IPv4-DNS-of-Your-EC2-instance
        User ec2-user # default user name
        IdentityFile path/to/your/pem/file
    ```
    

### Note

<aside>
💡 When you create a new EC2 instance, you create a new Key pair and the pem file will be automatically downloaded via the browser.

![EC2 setup key pair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpwl4qvxv4ft5zun81kq.png)





</aside>

## 4. Connect

1. Open command palette: `cmd + shift + p`
2. Select **`Remote-SSH: Connect to Host`**
3. You will find the alias you set on the list
4. Select the alias
5. (I didn’t have this case but,) when it connects, there’s a chance you see a prompt to enter a passphrase for the key
    1. Check out [this video](https://youtu.be/R7cUtQu7jww?si=qwKb3v_2oAjsB1Ss&t=70) if it happens

## 5. Open File or Folder

You can click the `Open Folder` button on the explorer or press `cmd + o` to open file or folders you want to work with.

You can install other VSCode extensions in SSH.
Contenda Studio Update
Published: 2023-11-03 00:31:57

---
title: Contenda Studio Update
published: true
date: 2023-11-01 00:00:00 UTC
tags: 
canonical_url: https://blog.brainstory.ai/contenda-update/
---

![Image of Contenda and Brainstory logos](https://blog.contenda.co/blogimages/contendaxbrainstory.png)

Today we’re announcing some changes to Contenda’s portfolio of apps and pricing. We’re retiring Contenda Studio’s free tier, so we can focus on integrating its best features into Brainstory. Brainstory will now offer a free tier for all users, at a significantly lower price point than Contenda Studio. Our other products like Common Essay and Build-A-Bard will be turned off. Our open source projects will continue to be maintained!

## Why the Change?

- **Sustainability:** We’re a small team. We want to be proud that everything we ship is going to be awesome. Consolidating our products into our favorite child (Brainstory) will go a long way to ensuring long-term excellence.

- **Product Philosophy:** With Brainstory, we’re challenging the concept of Generative AI with Iterative AI. Instead of trying to “automate more stuff”, we wanted a product that says “think smarter, not harder”.

We’re excited about Brainstory’s potential and are committed to delivering the best solutions. Stay tuned for more updates on this exciting transition. Start using Brainstory for free at [app.brainstory.ai](https://app.brainstory.ai/) & learn more about Brainstory [here](https://www.brainstory.ai/)!
Book review: A Philosophy of Software Design
Tags: architecture, software, books
Published: 2023-10-31 23:45:04

This book is about complexity in software and how avoid it. I think the ideas are reasonable and match my experience in general. For example, I do believe that:

* A good test suite is crucial for a maintainable software. 
* Naming things right and comments are really important, it helps a lot when you are reading software (which is most of the time)
* A variable with a wider scope should have a name that is more expressive that one with a narrower scope (and usually will be longer for this reason).
* High cohesion (things that are related should be close together) and low coupling (minimize dependencies between modules) matter a lot.
* Code should look like it has been written by the same person. Using formatters and linters help us somewhat with this.
* Knowing about design patters help us having a common vocabulary and understand code easily.
* TDD is great for bugs but not so much for software design IMO.
* Having at least two possible design options before writing code is a good practice.
* Writing comments or how you intend to use the software before writing it is also a good practice.

I would also add the following:

* The flow of the code should go on one direction through the  layers. For example, controllers call services and services interact with the DB. Controllers never call the DB directly nor they call each other. 
* Every line of code is a liability, the best code is the one you don’t write. In this regard every line you add will increase complexity. Once you grasp this, it changes the way you write code.
* The same can be said about libraries. You should be really careful with the libraries you add, you will have to update them and update your code accordingly every time they change. Sometimes it is better to duplicate the functionality to avoid the dependency.
* Every external system adds complexity (e.g. having to work on a browser environment adds a ton of complexity, using a Database adds complexity, and so on).

Complexity is not something you should avoid, but you should definitely try to minimize.

I would have appreciated if the author had discussed what Software Design is, and what is the difference with Software Architecture. 

In my opinion Software Design is about how to structure your code, while Software Architecture is about the system in general: what are the main components and how they are going to communicate between each other (e.g we’ll have a SPA with a GraphQL API and a Relational Database, etc.), which architecture are we going to use: monolith, micro services or serverless, what kind of pipeline are we going to use to process from devices, etc.
Search Engine Optimization (SEO) #2 - URL Structure
Tags: seo, webdev, google, html
Published: 2023-10-31 23:34:04

Search Engine Optimization (SEO) #2 - URL Structure
SEO is an incredibly important topic in web development!
Being well-positioned on Google (or other search engines) is undeniably a crucial goal for a website. Improving your website's position from 8 to 4 in a Google search can lead to an average of four times more visitors, and if you reach position 1, it's an additional twelvefold increase! [1], [2]

In this series of posts, I want to show you what you can do to optimize your site for search engines.

Each post will explain a "to-do" for your website's SEO.

The prerequisite is always that the absolute basics of your website are in place! This means you have relevant content, well-written texts, appropriate keywords for your target audience in your texts, and a clear and appealing website design. This also includes a proper navigation system to make all content easily accessible. If these basics are not in place, further tricks won't do much for your SEO.

Let's start with To-Do #2 for your SEO - A good URL structure!

Read the full post [on my website](https://perstarke-webdev.de/posts/seo-two-en)
Search Engine Optimization (SEO) #2 - URL-Struktur
Tags: seo, webdev, google, html
Published: 2023-10-31 23:33:18

Search Engine Optimization (SEO) #2 - URL-Struktur
SEO ist ein unfassbar wichtiges Thema im Web Development!
Bei Google (oder anderen Suchmaschinen) gut gefunden zu werden, ist ohne Zweifel ein wichtiges Ziel einer Website. Wenn du die Position deiner Website bei einer Google Suchanfrage von 8 auf 4 verbesserst, besuchen im Schnitt 4x mehr Personen deine Seite - wenn du auf Position 1 kommst, sind es nochmals 12x so viele! [1], [2]

In den Posts dieser Reihe möchte ich euch zeigen, was ihr tun könnt, um eure Seite für Suchmaschinen zu optimieren.

Jeder Post soll dabei ein „To-Do“ für die SEO eurer Website erklären.

Voraussetzung ist immer, dass die absoluten Basics eurer Website schon stimmen! Das heißt, ihr habt relevante Inhalte, gut formulierte Texte, verwendet für eure Zielgruppe passende Keywords in euren Texten, und der Aufbau und das Design der Website sind übersichtlich und ansprechend. Dazu gehört vor allem auch eine vernünftige Navigation, sodass alle Inhalte leicht zu finden sind. Ist das nicht gegeben, bringen auch weitere Tricks nicht viel für eure SEO.

Starten wir mit To-Do # 2 für eure SEO - Eine vernünftige URL-Struktur!

Den ganzen Artikel gibt es [auf meiner Website](https://perstarke-webdev.de/posts/seo-two).
Meetup #56: Controlando bluetooth desde 0
Tags: android, meetup, kotlin, design
Published: 2023-10-31 23:15:10


El 30 de octubre, tuvimos una charla virtual!, en nuestro meetup #56 de las comunidad Android Dev Perú y Perú KUG (Kotlin User Group).

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


🗣️ Expositor: Hansy Schmitt 🇵🇪 (síguelo en [Twitter](https://twitter.com/0xhacksy))
🗒️ Tema: "Controlando bluetooth desde 0" - minuto 3:25 ([video](https://www.youtube.com/watch?v=ngPK0OtffPg))

Hansy nos cuenta:

- Los tipos de protocolos de conexión bluetooth.
- Los GATT (Generic Attribute Profile).
- Bluetooth no es multiproceso, ejecuta operaciones en forma serial. 

Para más detalles, pueden ver la charla en [youtube](https://www.youtube.com/watch?v=ngPK0OtffPg)


No olviden de suscribirse al [canal de la comunidad](https://www.youtube.com/@AndroidDevPeru) en youtube.
![Expositor mostrando código de ejemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd3pk3kbay51di61bkiv.jpeg)
Syntax Highlighting Feature in "text2page" Project:
Tags: beginners, programming, opensource, productivity
Published: 2023-10-31 22:31:19

**Feature Description**

The "text2page" project's syntax highlighting function is intended to improve the readability of code on documentation pages.
It colourizes code snippets to make them stand out visually and be easier for readers to understand.
Enhancing code understanding and presenting code in an aesthetically pleasant manner are the main objectives of the feature.

**How It Works**

The syntax highlighting functionality examines the content of a code block that it finds in the documentation text.
The programming language used in the code block is identified by the feature.
It uses syntax highlighting conventions, including comments, strings, and keywords, that are exclusive to that programming language.
The code's visual attractiveness is enhanced by colorization based on the syntax highlighting theme or style selected.

**Purpose and Problem Solving**

Technical documentation frequently contains code samples, which might be difficult to comprehend if they are not formatted properly.
This issue is resolved by the syntax highlighting feature, which gives code a more orderly and aesthetically beautiful representation.
By streamlining the process of identifying code components, it facilitates users' ability to discern between variables, keywords, and other code elements.

**Inspiration from Docusaurus**

Technical documentation frequently contains code samples, which might be difficult to comprehend if they are not formatted properly.
This issue is resolved by the syntax highlighting feature, which gives code a more orderly and aesthetically beautiful representation.
By streamlining the process of identifying code components, it facilitates users' ability to discern between variables, keywords, and other code elements.


**Commonalities with Docusaurus**

"text2page" recognizes code blocks in the documentation, much like Docusaurus does.
The use of themes and styles results in code that is rendered with improved visual clarity.
The method of implementing syntax highlighting rules and language recognition is consistent with Docusaurus practice's.

**Points of Distinction from Docusaurus**

Taking cues from Docusaurus, "text2page" could provide distinctive code display themes or styles.
It may come with unique configuration options that let users alter how code blocks look.
Depending on who the project is intended for, the available programming languages may change.
Motivation to Contribute
Tags: hack23contributor, hacktoberfest
Published: 2023-10-31 22:10:18

Hello I'm Dina 👋, a senior backend developer primarily working with Node.js. Today, I want to share my thoughts on Hacktoberfest and my recent experiences contributing to open source projects.

In our fast-paced lives, it can be challenging to find the time to give back to the open source community. While it's relatively easy to get started with open source contributions, making a meaningful impact often requires a substantial commitment of time and effort. Understanding the project and effectively communicating with maintainers are important components of successful open source contributions.

This year, my motivation for Hacktoberfest was to learn and contribute to a simple Swift/SwiftUI related project that I stumbled upon. While I'm excited about this endeavor, I also realize that it will take some time for me to complete my pull request and truly make a difference in the project.

In addition, I made contributions to two other projects during the time. First, I contributed to [Verto.sh](https://www.verto.sh/), which is an excellent resource for finding popular open source projects with beginner-friendly issues. It simplifies the process of discovering new projects and making your first contributions.

I also made a small contribution to [Verdaccio](www.verdaccio.org/), a lightweight Node.js private proxy registry. While it may not be a massive contribution, it's a part of my journey to give back to the open source community and contribute in ways that align with my skills and interests. *It's the hours that dedicate to the tool/project of your choice that matters. It gives me a sense of fulfilment.*

Hacktoberfest is a fantastic opportunity to engage with open source projects, learn new things, and connect with the global developer community. It's a reminder that every contribution, no matter how big or small, is valuable and appreciated by maintainers and fellow developers. As we wrap up this year's Hacktoberfest, I'm **grateful** for the chance to give back and look forward to more open source adventures in the future.

Let's keep the spirit of open source alive, learn, and grow together. Happy hacking!
Enlightening Syntax Highlighting in Docusaurus
Tags: javascript, tutorial, programming, opensource
Published: 2023-10-31 21:58:47

Docusaurus is a dynamic platform that works wonders for improving your project webpages and documentation. It's more than simply a static site generator. 

**Syntax Highlighting: Shedding Light on the Code**

The technique of highlighting particular words and characters in source code to make it easier to read and comprehend is known as syntax highlighting. 

**The Anatomy of Syntax Highlighting**

1. Including Prism.js
The renowned Prism.js package is used by Docusaurus to highlight syntax. The open-source syntax highlighter Prism.js is renowned for its versatility and wide language support.

2. Plugin Docusaurus
Very an exclusive plugin, Docusaurus integrates Prism.js with ease. Prism.js must be configured by the plugin in order for it to function with your documentation.

3. Component of a Code Block
Docusaurus makes use of a unique code block component to implement syntax highlighting. Code samples in your Markdown files are processed by this component, which then applies the proper syntax highlighting depending on the code language.

4. Code Blocks in Markdown

```javascript
function greet() {
  console.log("Hello, world!");
}
```

**Peeking into the Code**
Let's now investigate how Docusaurus handles syntax highlighting inside the source. Here are a few salient points:
- The Docusaurus configuration file, usually called `docusaurus.config.js}, contains the configuration for the Prism.js plugin.
- Docusaurus interfaces with Prism.js by developing a unique code block component. This part is contained in the source code of Docusaurus.
- To provide syntax highlighting, the code block component searches your code blocks for language tags and applies the appropriate Prism.js style.
- To fit the aesthetics of your project, you may even add your own code themes and modify the Prism.js styles.
Meshery, the collaborative Kubernetes manager
Tags: kubernetes, meshery, devops, opensource
Published: 2023-10-31 21:53:21

Layer5, a leading cloud native management, company announced this week the public availability [MeshMap](https://layer5.io/meshmap) - a groundbreaking product built on top of an award-winning, open source project, [Meshery](https://meshery.io) that will revolutionize the way enterprises manage their cloud-native applications. Still in beta, MeshMap is a visual canvas that provides a comprehensive view of the Kubernetes topology, workload performance, and a multi-player configuration. Meshery v0.7 is the latest version of the popular cloud native management platform, which offers enhanced features such as multi-cluster support, cloud native pattern validation, and observability integration. Together, these products enable you to easily deploy, configure, monitor, and troubleshoot across multiple clusters and environments.

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