teleren/devto huggingface dataset:
Introduction to the Principles of JavaScript Encryption and JavaScript Obfuscation
Tags: javascript, obfuscate, encrypt
Published: 2023-10-08 01:16:50

Introduction to the Principles of JavaScript Encryption and JavaScript Obfuscation 

JavaScript encryption, JavaScript obfuscation, and JavaScript obfuscation encryption all refer to the process of encrypting JavaScript code to make it unreadable and thereby protect its integrity. 

The principles can be roughly divided into two categories, as outlined below. 

The first involves direct character replacement, such as Eval encryption or JJEncode encryption. This approach involves directly processing JavaScript code and is reversible. When executed, encrypted code undergoes decryption algorithms to restore the original code for execution. This is a simple form of encryption obfuscation that is reversible and easy to decrypt, resulting in low security. 

The second category differs greatly from the first in that it does not directly analyze and encrypt JavaScript code, but instead performs low-level processing. It first performs lexical analysis and syntax analysis of JavaScript code to convert it into an AST (Abstract Syntax Tree). After obtaining the AST, obfuscation and encryption operations are performed within the AST, and after completing the encrypted AST, the original code is regenerated based on the AST to create a new ciphertext JavaScript code. Professional JavaScript code encryption obfuscation tools, such as JShaman and JScrambler, fall into this category. Obfuscated JavaScript code cannot be understood by humans but can be recognized and executed by machines without undergoing decryption. Therefore, there is no issue with reversing the code through decryption, resulting in high security. This method is widely recognized and used in the industry.
New Series: 10 Minute Docs Audits
Tags: writing, quickstartaudits, documentation, webdev
Published: 2023-10-08 01:00:07


{% embed https://youtu.be/GlCm8MPQ2H8 %}

QuickStarts are the first thing that your users interact with. It's important to make a good impression. In this series, we are going to spend 15 minutes with a Quickstart and give you our review. 

For many tech companies, QuickStarts are the landing page in the documentation world. You are more likely to persuade users to sign up for a demo or implement your software when you give them a good experience. 

The problem is there aren't many resources that explain how to distinguish a good Quickstart from a bad one. That's where this series comes in. Starting on October 9th, we're going to spend 30 days reviewing different Getting Started Guides. 



## What's The Criteria?

*- Excellent*
*- OK*
*- Poor*

**Purposeful:** Does the QuickStart explain what problem it's trying to solve? Who is the intended audience?

**UX Experience:** How seamless is the experience? Must the user create an account to get through the Quickstart? Does the Quickstart elicit a sense of joy and achievement? 

**Accurate:** Are the instructions correct? Are they complete?

The purpose of this series is for the tech community to gain clarity on how to create a great Getting Started Experience. We'll learn what works, and what we can improve upon together as a community. 


![DocumentWrite QuickStart audit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5kgh6ne0yrpt2vtked7.jpeg)

If you're interested in a *FREE* Getting Started audit for your company, please [fill out this form](https://forms.gle/FRJJptVrypmLRNLt8).
A straightforward image gallery built using React
Tags: gallery, images
Published: 2023-10-27 06:38:35

---
title: A straightforward image gallery built using React
published: true
date: 2023-10-08 00:57:00 UTC
tags: Gallery,Images
canonical_url: https://reactjsexample.com/a-straightforward-image-gallery-built-using-react/
---

# React Image Gallery
 ![A straightforward image gallery built using React](https://reactjsexample.com/content/images/2023/10/Code_2023-10_20-52-10.jpg)

Welcome to the React Image Gallery project! This is a straightforward image gallery built using React, allowing users to select images from their file explorer and view them in a gallery, full-screen mode, or as a slideshow.

## Features

- **Image Selection** : Users can easily select images from their local file explorer to add them to the gallery.

- **Gallery View** : View selected images in a grid-style gallery for easy navigation.

- **Fullscreen Mode** : Clicking on an image allows users to view it in full-screen mode for a closer look.

- **Slideshow** : Enjoy a slideshow of the images, with customizable time intervals between slides.

## Installation

Follow these steps to set up and run the project locally:

```
git clone https://github.com/edilson258/react-gallery.git
cd react-gallery
yarn
yarn run dev
```

then access the app using `http://127.0.0.1:3000/`

## GitHub

[View Github](https://github.com/edilson258/react-gallery?ref=reactjsexample.com)
local installation of Open Journal Systems (OJS) with DDEV
Published: 2023-10-08 00:55:55

Like some know DDEV is an open source tool for launching local web development environments. DDev work by default to install Drupal sites, Wordpress, Typo3 and Laravel (and other cms projects) but OJS is not in the list. OJS is a specialized CMS to publish scientific journals.

To get a local installation this is the steps:
1-Get OJS 3.4 program for the [pkp site](https://pkp.sfu.ca/software/ojs/download/).
2-Locally create a directory and get there all OJS files, this is the directory where you will run the ddev project.
Actually go inside it using terminal 

3- Follow the [DDEV instructions](https://ddev.readthedocs.io/en/latest/users/project/) to begin with a PHP project

3.1 Write the command: `ddev config` to begin the project. DDEV will give you the kind of project you can begin with it.
Choose (write) PHP. DDev will ask for another information like project name etc. DDEV begin downloading and creating docker images to run the project.
3.2 Type the command: `CD .ddev` to go inside the ddev project folder.
Then type the command: `nano config.yaml` (or vim or the editor you like to use) to change the configuration of project.
3.3 You need to change the php, web server and database the project use, to get the closer you can, to OJS requirements. This is the configuration I use:

`name: ojs
type: php
docroot: ""
php_version: "8.0"
webserver_type: apache-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: postgres
    version: "10"`

Check your configuration very carefully before copying this config. The most important part is to get a php 8.0, apache-fpm and postgres 10.

do the change and save configuration file.
Return to main directory (where you copy ojs files)

Dont modify any other information insde conf file.

4- Type the command: `ddev start` to run DDEV. If all the configuration change are correct you will get a OJS ready to install.
Type the command: `ddev launch `to open the browser and get the OJS installation page.

5- The OJS installation page will ask for all the information require to install, like a username and a password and database information.
The basic problem I get to install OJS was to get all the requirements needed, many of the version of database OJS ask for are old. I try but cant install the program with mysql, but I get a installation with postgress.
It is important to get database information to not get frustrated. The fast answer is DDEV create a database with name `DB` a user `DB` with a password `DB` and dont write `localhost` to find the database, type `DB`, really easy dont? if you want to know more about what DDEV is running just type the command: `ddev describe` to get all the information of the project.
After all this configuration you will get a OJS site to test local.
React Native Theming 2023!
Tags: reactnative, react, javascript, programming
Published: 2023-10-08 00:46:38

Good day, everyone! Today we'll talk about theme-csx, a new react native theming library that was created to alleviate the pain that developers may experience when attempting to add dark mode support to mobile apps.

**Github Link:** https://github.com/KJ-GM/theme-csx 

### Without further ado, let's get started: 

Theme-csx focuses on providing an easy and simple way to add dark mode support to our mobile apps. With three simple steps, your app will be set up and ready to go!

You may wonder what makes this library special than other libraries such as styled-components, react native paper...

1) Similar to standard react native styling

2) Light & Fast

3) Expo & React Native

4) Supports React Navigation

**System**: changes to the phone _`appearance`_ preference while the app is running will be applied dynamically. - **IOS:** changes will be shown immediately without the need to reopen the app
 
let's go over the steps very briefly: 

> **StyleSheet**

- Is similar to the usual styling format, but now you have additional props to make style themeable.

> **T() Function** - _Themed_

- Apply **only** your themed styles using the T() function wrapper.

> **TV() Function** - _Themed Value_

- Is an extra helper function that can be used to theme a specific value. (this becomes helpful with react navigation)

> **appearanceHook**

- Use the appearanceHook to switch theme from anywhere in your app.



## Usage ❓

```js
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';

// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';

const DemoComponent = () => {
  // Theme switch
  const switchTheme = () => {
    appearanceHook.switch(
      appearanceHook.activeTheme === 'dark' ? 'light' : 'dark'
    );
  };

  return (
    <View style={T(styles.THEMED_CONTAINER)}>
      <Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>

      <Text style={T(styles.THEMED_TEXT)}>Hey, I am themed text</Text>

      <Button text={'Switch theme'} onPress={switchTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  THEMED_CONTAINER: {
    flex: 1,
    backgroundColor: 'white',
    backgroundDark: 'gray', // backgroundDark prop was added to make it themeable
    alignItems: 'center',
    justifyContent: 'center',
  },
  NORMAL_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'green',
  },
  THEMED_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'black',
    colorDark: 'white', // colorDark prop was added to make it themeable
  },
});
```
The Thrill of Coin Flip: Can You Beat the Odds?
Published: 2023-10-08 00:39:41

Imagine the excitement of a casino, the anticipation of a roulette wheel, distilled into a simple Python program. In this blog post, we present a fun and interactive Python game called "Coin Flip." It's a game of chance that allows you to test your luck and intuition by guessing the outcome of a coin flip. Can you correctly predict whether it will be "heads" or "tails"? Join us in exploring the code behind this game and see if you have what it takes to beat the odds!

Here's the Python code that powers the Coin Flip game:

```
import random

def coin_flip():
    random_chance = random.randint(0, 1)
    if random_chance == 0:
        return "heads"
    elif random_chance == 1:
        return "tails"
    else:
        ValueError("Not a valid option")

print("This is the game of Coin Flip! The game is simple.")
print("Enter a guess of 'heads' or 'tails'. If you're right, you win!")

while True:
    accepted_guesses = ['heads', 'tails']  # Define accepted guesses here
    accepted_retry = ["Y", "N"]
    guess = input("Enter your guess of 'heads' or 'tails': ").strip().lower()

    while guess not in accepted_guesses:
        guess = input(
            "Your guess must be 'heads' or 'tails'. Please try again: ").strip().lower()

    flip = coin_flip()
    if flip == guess:
        outcome = "You won!"
    else:
        outcome = "You lost."
    print(outcome)

    retry = input("Want to try again? Y or N: ").strip().upper()
    while retry not in accepted_retry:
        retry = input(
            "Your response must be 'Y' or 'N'. Please try again: ").strip().upper()
    if retry == "N":
        break
```

You can find the complete code for the Coin Flip game on GitHub: [Coin Flip GitHub Repository](https://github.com/NvrgonStp/CS-101/blob/main/coin_flip.py)

The Coin Flip game is not just about luck; it's about taking risks and making educated guesses. Whether you're a seasoned gambler or someone looking for a fun way to test your intuition, this Python program provides an exciting experience. Give it a try, challenge your friends, and see who can predict the coin flip outcomes more accurately. Will you emerge as the ultimate coin-flipping champion? The only way to find out is to play the game and embrace the thrill of the coin flip!
Can You -- and Should You -- Stop Caring What Others Think?
Tags: discuss
Published: 2023-10-08 00:00:00

---
published_at : 2023-10-08 00:00 +0000
---
What are your personal experiences and tips on building self-confidence and reducing the impact of others' opinions on your life?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Introdução ao .NET com Visual Studio Code
Tags: csharp, dotnet, vscode
Published: 2023-10-07 23:48:01

Sou um desenvolvedor em desenvolvimento na principal ferramenta da Microsoft para desenvolvedor, o dotnet. 
Hoje será um rápido tutorial de como ter tudo necessário para rodar a plataforma .NET em seu Visual Studio Code.

**1 - Instalar o Visual Studio Code**

Primeiramente é necessário instalar o VSCode se você não tiver instalado.

Link: https://code.visualstudio.com/

É um programa super leve e você não deve ter problemas para a instalação.

**2 - Instalar o SDK do .NET**

.NET é a plataforma de desenvolvimento multiplataforma que permite vocÊ desenvolver para diversas aplicações.

Link para instalação do .NET SDK: https://dotnet.microsoft.com/en-us/download
Instale a versão e depois execute o instalador. 

A instalação deve ser rápida e feita sem dificuldade.

Após a instalação, verifique se tudo ocorreu normalmente. Abra o terminal e execute o seguinte comando:

```
dotnet --version
```
Deve ser exibido um numero representando a versão atual. Algo como:

```
7.4.401
```
Que é a versão atual no momento que estou escrevendo esse post.
E isso é tudo o que você precisa para poder desenvolver na plataforma .NET

**Extensões**
Na página de extensões devemos buscar por "C#"

![Extensão C#](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a810qtcjt6c4gx96zpaz.png)

O Kit de desenvolvimento em C# instala as seguintes extensões:

- Kit de Desenvolvimento em C# – extensão oficial de C# da Microsoft.
- C# – suporte à linguagem base para C#.
- IntelliCode para C# – desenvolvimento assistido por IA para Kit de desenvolvimento em C#.
- Ferramenta de instalação do .NET para autores de extensão.

Agora nós podemos criar nossa primeira aplicação.
Dentro do terminal do Visual Studio Code execute o seguinte comando:

```
dotnet new console
```
dentro do seu `Program.cs`
substitua seu `Console.WriteLine("");` para o texto de sua preferência

Depois execute os seguintes comandos:

```
dotnet build
dotnet run
```
Agora o texto que você digitou no método WriteLine deve estar sendo exibido no terminal.

Esse é o meu primeiro post. Espero que tenha sido útil de alguma maneira. Agradeço a leitura!
What is a Higher-Order Component (HOC) in React ? (Bite-size Article)
Tags: hoc, react, beginners
Published: 2023-10-07 22:30:21

#Introduction
In this article, I will briefly summarize **Higher-Order Components (HOC)** in React.

HOC is a concept that has been around for some time, but personally, I recently knew it. From what I've researched, it seems that alternative methods like **Hooks** have emerged in recent years, and factors such as the complexity of HOC itself have led to its reduced usage.

I may not have many personal opportunities to use it, but I felt like writing an article about it as part of my learning process.

If you are interested, please take a look (and if there is any incorrect information, please let me know!).

#What is a Higher-Order Component (HOC)?
In general, a Higher-Order Component (HOC) can be used as a design pattern in React's component architecture used to reuse component logic. HOCs wrap or enhance components and add new functionality.


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


#Case Study

HOCs are typically defined as functions. The following is an example showing the basic usage of HOC.

```jsx
import React from 'react';

// define
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log(`component is rendered: ${WrappedComponent.name}`);
    return <WrappedComponent {...props} />;
  };
}

// use HOC
const MyComponentWithLogger = withLogger(MyComponent);

```

In this example, a HOC called `withLogger` is defined. This HOC takes a `WrappedComponent` and wraps that component. Each time the wrapped component is rendered, a log message is displayed.


#Why Use HOC?
The main reason for using HOC is to facilitate code reuse and sharing. For example, HOC is very useful when creating components that have common logic throughout an application, such as authentication, logging, routing, etc.

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

#Conclusion
High-Order Components (HOCs) are powerful tools for React application development. By using HOCs, you can reuse component logic and efficiently manage your applications.

The concepts introduced in this article are based on simple code examples, but if you're interested, I encourage you to explore further and consider applying them in your own projects.

Thank you for reading!
Why Weather Buddy was a bad idea for a SaaS
Tags: saas, webdev, javascript, buildinpublic
Published: 2023-10-07 22:14:05

Hey y'all, hope you are having an amazing day when reading this 😊

So a while ago I made a tweet stating that the demand for Weather Buddy is very low and almost non-existent. And I promised to do a breakdown of my market research and how I came to this conclusion.

{% twitter 1699560454664720698 %}

I'm going to keep things simple as this is my first dev article.

Before we go further, I want to clarify that I have already built the service and implemented certain SaaS features before doing any market research whatsoever.

> 👀: Hey, you can try out Weather Buddy with this [exclusive invite](https://weather-buddy.ck.page/exclusive).


## My research
During my research what did I look for?

1. <u>**Who are my users**</u>
After building the MVP, I didn't know who I was going to market it to, who would be my users, and why they would use the service. Let's face the facts nobody really needs another weather app (free or paid), after all, anyone who owns a mobile device can easily check the weather on it. This made me question whether such a service is necessary.

2. <u>**Where my users were hanging out**</u>
This was the one that came as a shock the most. You know the saying "Build it and they will come". I took that approach and I regret it. When I asked myself the question "Where will the come from" I came up short with no answer. I was able to find possible niches where they could come from, but it won't be a small feat to get into the niche and get them to use the product.

3. <u>**Is anyone even looking?**</u>
I recently found out about [Google Trends](https://trends.google.com/trends/) - A google service that gives some insight into what people are searching for and when. I did a deep dive into weather-related searches and I almost lost motivation from the results 😓. Here's a snippet of the search results for people searching about anything **weather** _in the whole **United States**_.

![snippet of the search result for people searching about anything weather in the whole **United States**.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzaf18ek87hqsvdo7de9.png)

Compared to the 100 million plus people in the United States, it is such a small fraction of people which signifies that the demand for the service will be extremely low.

## Lessons learned
- Do not build a product without knowing the audience you're building for.
- Market research is the most important aspect of a product.

## Conclusion
Now, I'm actually a novice when it comes to market research so I might be underselling how beneficial Weather Buddy is or could be in the future. That's why I won't abandon it completely, I will work on it, update it, try hard to make it a profitable service, and share my progress with you from time to time.

> _You can reach me on Twitter [here](https://twitter.com/i_am_meph)_

> _You can also look at the Weather Buddy source code [here](https://github.com/codedcontent/weather-buddy)_
Data visualizing
Tags: beginners, datascience, python, ai
Published: 2023-10-07 22:05:17

Data visualization is a powerful tool in data analysis. It involves the representation of information and data using visual tools like charts, graphs, maps, and more. This technique allows us to easily understand any patterns, trends, or outliers in a dataset. It's particularly useful for presenting data to the general public or specific audiences without technical knowledge in an accessible manner.

The purpose of data visualization is to help drive informed decision-making and to add colorful meaning to an otherwise bland database
. It can be used in many contexts in nearly every field, like public policy, finance, marketing, retail, education, sports, history, and more.

Here are some benefits of data visualization:
- **Storytelling**: Colors and patterns allow us to visualize the story within the data.
- **Accessibility**: Information is shared in an accessible, easy-to-understand manner for a variety of audiences.
- **Visualize relationships**: It’s easier to spot the relationships and patterns within a dataset when the information is presented in a graph or chart.
- **Exploration**: More accessible data means more opportunities to explore, collaborate, and inform actionable decisions.

In the context of big data, companies collect large amounts of data and synthesize it into information. Data visualization helps portray significant insights—like a heat map to illustrate regions where individuals search for mental health assistance.

Python offers a variety of libraries for data visualization, each with its own strengths and capabilities. Here are some common types of data visualizations you can create in Python using these libraries:

1. **Scatterplot**: This is used to find a relationship in bivariate data. It is most commonly used to find correlations between two continuous variables.

2. **Histograms**: These are used to plot the frequency of score occurrences in a continuous dataset that has been divided into classes, called bins.

3. **Bar charts**: These are used to compare quantities of different categories or groups.

4. **Pie charts**: These are used to show the proportion of whole categories or groups.

5. **Line graphs**: These are used to display information that changes over time.

6. **Box plots**: These are used to show the spread and skewness of data set. It represents the minimum, maximum, median, first quartile and third quartile in the data set.

7. **Heatmaps**: These are used to represent magnitude of phenomena as color in two dimensions. It's useful for visualizing variance across multiple variables.

8. **Geographical maps**: These are used when we want to plot data that is related to geographical locations.

Popular libraries for creating these visualizations in Python include Matplotlib, Seaborn, Pandas, and Plotly. Each of these libraries has its own syntax and way of creating visualizations, so you'll want to explore each one to see which fits your needs best.
Microphone Input Animation - CSS
Tags: codepen, css, webaudioapi, webdev
Published: 2023-10-07 21:46:20

Check out this Pen I made!
Uses the Web Audio API to capture audio input from the microphone and then use this input to trigger CSS animations. 


{% codepen https://codepen.io/Vaishnavi-Rangarajan/pen/VwqqmJB %}