teleren/devto huggingface dataset:
MakerBox | Made with Next JS
Published: 2022-06-27 22:57:02

![MakerBox | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655734942/large_maker_box_made_with_next_js_92c5643b84.png "MakerBox | Made with Javascript | Next JS")


### The best free tools for Indie Entrepreneurs in 2022. Focus on building, not searching for the right tool. Download it now.

> ### Focus on building, not searching for the right tool
> Save your time with MakerBox. Get the list of 600 products with generous Free plans.
> 
> Grow your product with battle-tested tools. Hand-picked by Indie Entrepreneurs for Indie Entrepreneurs 🔥
> 
> Never spend hours searching for free tools again
> We already did that for you
> 
> #### 13 Categories to choose
> Find apps from designing and coding to selling and analyzing.
> We have an app for every stage of the Indie Journey.
> 
> #### 600 Gems to discover
> From "Free feedback collection system" to a "list of 8000 Royalty-free icons".
> Every month we add new Free tools.
> 
> #### 10 Columns to sort
> Make yourself at home. Filter and sort Airtable to your needs.
> All data is updated for 2022.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [MakerBox on Twitter](https://twitter.com/withjavascript/status/1541555964167524353?s=20&t=11sGDUeL3d2i7XHXKZmqaQ)
 |
| Medium | [MakerBox on Medium](https://medium.com/@madewithjavascript/makerbox-made-with-next-js-c90febd387c6)
 |
| Facebook | [MakerBox on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0crYq2NQHD6oe3hUqxLbwA3RHUmDiEupcVyG9jGQuUnSsd4gPM5y5hXBz35CvPjkTl)
 |
| Tumblr | [MakerBox on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688254314794336256?source=share)
 |
| LinkedIn | [MakerBox on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6947320851952259072)
 |
| Pinterest | [MakerBox on Pinterest](https://pin.it/4fRSopk)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
2 steps to display cache tables data on the web by using jquery datatable and embedded python
Tags: javascript, database, python, sql
Published: 2022-06-27 22:20:10

Hi, Community,

This post will demonstrate how to display data on the web by using <a href="https://docs.intersystems.com/iris20212/csp/docbook/DocBook.UI.Page.cls?KEY=AFL_epython" rel="nofollow">Embedded Python</a> , <a href="https://flask.palletsprojects.com/" rel="nofollow">Python Flask Web Framework</a> and <a href="https://datatables.net/" rel="nofollow">Jquery datatable</a>  

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

We will display processes from %SYS.ProcessQuery table.

 

### Step 1: Add table to HTML page and write below javascript code to display passed data from app.py :

#### HTML

      &lt;table id="myTable" class="table table-bordered table-striped">                 
       &lt;/table>

#### Javascript

    ```        
    $(document).ready(function() {
          // parse the data to local variable passed from app.py file
          let my_data = JSON.parse('{{ my_data | tojson }}');
          let my_cols = JSON.parse('{{ my_cols | tojson }}');
    
          $('#myTable').DataTable( {
              "data": my_data,
              "columns": my_cols,"} );
         } ); 
    ```
 

### Step 2: Create python function in app.py file and define the route as defined below e.g we are creating processes function and defining /processes in the route:

#### App.py

    from flask import Flask, jsonify, render_template
    import iris
    
    app = Flask(__name__) 
    
    @app.route("/")
    def index():   
        #to render main index page
        return render_template('index.html')
    
    @app.route("/processes")
     def processes():
       #Define sql statement 
       mySql = '''
            SELECT ID, NameSpace, Routine, LinesExecuted, GlobalReferences,
            state, PidExternal, UserName, ClientIPAddress FROM %SYS.ProcessQuery ORDER BY NameSpace desc        
            '''
       #Calling embedded python iris.sql.exec class to get result set
       resultSet = iris.sql.exec(mySql)
       #Get dataframe by calling resultset dataframe function 
       dataframe = statement.dataframe()
       #Convert and data to Json by using to_json dataframe method and json loads function
       my_data=json.loads(dataframe.to_json(orient="split"))["data"]
       #Get columns details
       my_cols=[{"title": str(col)} for col in json.loads(df.to_json(orient="split"))["columns"]]  
       #render html by passing my_data and my_cols variables which will be used to generate datatable
       return render_template('tablesdata.html',  my_data = my_data, my_cols = my_cols)    

That's it.  By using these 2 steps cache table data can be display on the web.

###  
Read related documentations <a href="https://docs.intersystems.com/iris20212/csp/docbook/DocBook.UI.Page.cls?KEY=AFL_epython" rel="nofollow">Embedded Python Overview</a>.  
  
For more details please review my openexchange <a href="https://openexchange.intersystems.com/package/iris-python-apps" rel="nofollow">iris-python-apps </a>application

 

Thanks
Day 581 : Good Times
Tags: hiphop, code, coding, lifelongdev
Published: 2022-06-27 21:52:23

_liner notes_:
- Saturday : For some reason, my blog post from Friday didn't go out. I must not have hit publish. Just did that. So, Saturday, I went to the station to do the radio show. Had a good time as usual. Kind of went on a rant about how crappy politicians are in light of the overturning of Roe v. Wade. Good times. You can hear that plus new music on the recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a tweet from Barack Obama talking about how horrible the Suprene Court's decision was to overturn Roe v. Wade with a title from a news article underneath saying how Obama promised to do something, but didn't with the words June 25th 2022 Boo, Vote and Strike](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lruvk5jing67zgvjqrku.jpg)

- Sunday : Did my https://untilit.works cyphers and got some stuff done. Not a bad day. Ended it off watching an episode of "The Umbrella Academy".

- Professional : Got some news that a project I was working on needed some updates as soon as possible because some things are finally in motion. Did some screenshots, made some changes to text, updated some dependencies, submitted some pull requests, did a couple of releases, and verified that everything still works. I got a couple of things left to do and it should be good to go.

- Personal : So, I worked out the keyboard navigation for my new side project's homepage layout. It's working pretty well. I have been working on it in an online code editor, so I could experiment without having to load things on my local machine. I'm going to start componentize some code. Once I get that done, I'll bring it to my local machine and start hooking it up to real data. Really want to get it to the point I can show others and see if they would be interested in being a part of it. Hopefully it can make a little money for folks.

![Looks like a temple with large stone bell like structures in a dense misty rain forest with a mountain in the distance in Wanurejo, Indonesia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ninmnnc44n0s4gi6bnxd.jpg)

Going to finish up the stuff for the work project because there's other stuff I need to get done this week. Plus, I'm looking to maybe take Friday off. Going to eat dinner and get back at it.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube gpwYTeRSgc8 %}
Hoisting in Javascript
Published: 2022-06-27 21:34:49

Hoisting is the ability of javascript interpreter to call functions,variables or classes before they appear in the code or before execution of the code. 
Hoisting allows you to use functions, variables or classes before declaring them.

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

How you would write the same code without HOISTING

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/keb94gzf2qdwvw2pllrc.png)
How to use Linear-Gradient in CSS
Tags: html, css, webdev
Published: 2022-06-27 21:31:18

The CSS `linear-gradient` function creates an image that consists of a progressive transition between two or more colors along a straight line. The result is a data type object `gradient`, which is a special type `image`.

## Top to Bottom
In this example shows a linear gradient that starts at the top. It starts blue, transitioning green:

```css
background-image: linear-gradient(to bottom, blue, green);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peojlhke1mxezd9zhaxn.png)
 
## Left to Right
In this example shows a linear gradient that begins on the left. It starts blue, transitioning yellow:

```css
background-image: linear-gradient(to right, blue, green);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofv8leikwgra8jbsapl5.png)
 

## Diagonal
You can make a gradient diagonally by specifying the horizontal and vertical starting position.

In this example shows a linear gradient that starts at the top left (and goes to the bottom right). It starts blue, transitioning yellow:

```css
background-image: linear-gradient(to bottom right, blue, green);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd89zj7fds8ztshv6aak.png)
 
If you want to control the direction of the gradient more, you can define the angle instead of predefined directions (bottom, up, right, left, bottom right, etc.). A value of `0deg` is equivalent to to top. A value of `90deg` is equivalent `to right`. A value of `180deg` is equivalent `to bottom`.

```css
background-image: linear-gradient(135deg, blue, green);
```

## Multiple Color
In this example shows a linear gradient (from top to bottom) with multiple color stops:

```css
background-image: linear-gradient(to bottom, blue, yellow, green);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqmbg7soofy5t6ufj8yk.png)
Expo TypeScript ESLint Prettier initial setup
Tags: expo, eslint, typescript, prettier
Published: 2022-06-27 21:15:21

Expo is great platform on top of React Native. Which is great out of box and simplify your life a lot. But there are things I'm missing from React Native setup when I'm creating new project with Expo. So I decided to make this post with initial setup to use it as personal documentation. 

Also, you can find how to wrap this boileplate with bash script in this [post](https://dev.to/dimaportenko/prepare-expo-project-with-bash-script-to-setup-typescript-eslint-prettier-1n3k).

### Expo template
First of all, I'm creating project with [expo-cli](https://docs.expo.dev/workflow/expo-cli/) and TypeScript template. 
```bash
expo init -t expo-template-blank-typescript your-project-name
```
     
### Resolve TS2786: 'Animated.View' cannot be used as a JSX component
Now I added some code and see following error 

![ScreenShot of error TS2786: 'Animated.View' cannot be used as a JSX component
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj05wyg8pliu8h0koz0f.png)

So I'm following solution from the [GitHub](https://github.com/software-mansion/react-native-reanimated/issues/3291#issuecomment-1154821360).
```json
// package.json
"resolutions": { "@types/react": "^17" }
```

### TypeScript, ESLint, Prettier dependencies
Basically following React Native TypeScript template, I'm using following dependencies 

```bash
yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier
```

### ESLint config
Let's add ESLint config in `.eslintrc.js`
```json
module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}
```

### TS config
Add `compileOptions` to existing config `tsconfig.json`
```json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "module": "es6"
  }
}
```

### Update .gitignore
I'm using WebStorm IDE. So I likely want to have following addition in my `.gitignore`
```
# WebStorm
.idea
```

### Code reformat and commit changes
And final stroke to reformat our template code according to our new setup with prettier. 
```bash
./node_modules/prettier/bin-prettier.js --write .
```
And commit changes
```bash
git add .
git commit -m 'expo template config'
```

This small already helps me each time I setup new expo project. Hope it will help someone else as well.
Day 580 : Changing World
Tags: hiphop, code, coding, lifelongdev
Published: 2022-06-27 21:02:48

_liner notes_:
- Professional : Pretty chill day. Reviewed a blog post from a team member. It was pretty cool because it's on a new product I've been looking to build with. Took a while to understand the concepts, then figure out what the post was saying, and then try to make some suggestions. Got it done though and sent off to the original author. Going to get feedback on my suggestions next week, do some more fine tuning, and get it published. Not a bad way to end out the week.

- Personal : Last night, I went through a bunch of tracks for the radio show this week. I think that was it. I really need to start using my own app https://WhatYouDo.in . I can't really remember what else I did. haha I don't think I really did anything else. Oh, I met with the other key holders of the office space I've been a part of. Good catching up with them.

![A series of pointy sharp gray stone looking structures sticking up out of the forest in Mulu Pinnacles, Malaysia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pshcmzsli3pexqpjn8zt.jpg)

With the announcement to the Roe v. Wade overturning kind of took the energy out of me today. We're living in a changing world and I'm not sure it's changing in a good direction. Going to finish putting together the radio show and watch the new episode of "The Boys" and maybe "The Umbrella Academy".

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube HQKz76O1GLg %}
The forgotten Skill 'Testing'
Tags: testing, unittests, qualityassurance, programming
Published: 2022-06-27 20:46:59


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w65ljjnpcfnzgojcjzkk.jpg)
let's discuss about a professional subject who can strength your programming profil skill set , its an important thing that you must discover and practice,
The QA/QC:
You need to learn Testing to enhance your coding skills in a collaborative work .

the purpose of this proccesses is to prevent any further issues , bugs, in your future software aswell as reduce any potential maintenances costs.

It becomes as a standard for a professional software creation cycle that everyone need to know.

1)QA- Quality assurance
we can say it's a team of people who check all teams, tools, technologies,methodologies, testing types, coding techniques, everything is invloving in this software building process, to choose the most quality items for it.

2)QC - Quality control
we can say its and extending process who come up after the first step of making a software until the end of it before delivery to the final customer so it focus to verify any potential bugs or errors, and the software is able to fit the required needs of the client, its also called testing so what are all type of tests in the QC.

3)Testing:
as i said its a subset process of QC, and there is three types :
-Functional testing, those tests have a direct relationship with the software itself and check if its fully functional without any bugs, there is many testing methods for different purposes for example, unit testing to test a small piece of code and for people asks about TDD so it is the most relevant to it because you write the test code before the code itself. there is also the integration test to test a bunch of modules either from UI or other, there is other functional tests aswell.

-non functional testing, is related to the environement and anything will be in contact with this software so things like security, performace, compatibilty and there is also many others...

by final we have the automated test which mean we use those previous test in an automated way to gain time and money. and they are done using many softwares ex: cypress, selenium, junit...

that's all i hope that i could write the right things i did an effort to collect those information and write them in easier way for understanding.

Notice that the QA/QC can be applied for many sectors not only in IT.

you can leave your feedback inorder to make this topic more rich.
happy coding🧑‍💻
Tipos de armazenamento AWS
Tags: aws, devops
Published: 2022-06-27 20:40:31

Este artigo pretende ser mais um da série de resumos para aqueles que pensam em fazer o exame de AWS Certified Cloud Practitioner. Mais informações encontram-se ao fim do artigo. O assunto desse artigo é armazenamento.

Existem 3 tipos de armazenamento dentro do AWS.

- Armazenamento em blocos
- Armazenamento de objetos
- Armazenamento de arquivos

## Armazenamento em blocos (EBS)
* No armazenamento em blocos, os arquivos são separados em partes iguais (blocos) de dados.
* O armazenamento em bloco é usado para aplicações executadas em instâncias do EC2.
* De acordo com a necessidade pode ser usado um bloco HDD-based ou SSD-based.
* Podem ser associados volumes EBS extras ao seu EC2 de acordo com a demanda.
* Pode ser criado um snapshot, um "momento", uma "fotografia" para ser armazenado e replicado esse momento do EBS em novos blocos.

## Armazenamento de objetos (S3)
* Cada objeto consiste em dados, metadados e uma chave
* Numa associação com uma biblioteca, o objeto é um livro, onde os dados são os capítulos, os metadados serão as informações do livro como nome e ISBN e a chave é a referência cadastrada desse livro.

Esses objetos são armazenados no Amazon Simple Storage Service (S3). Dentro do S3 o local de armazenamento dos objetos é chamado de bucket, onde o limite de armazenamento é virtualmente ilimitado.

São definidas permissões para o controle de acesso a esses objetos.

### Classes de armazenamento do Amazon S3
- STANDARD: 
  * Acessado com grande frequência
  * Armazenado em no mínimo três zonas de disponilidade, para replicação de informações
- STANDARD - IA (Infrequent Access):
  * Acessado com pouca frequência
- S3 One Zone - IA
  * Apenas em uma zona de disponibilidade
- S3 Glacier
  * Baixo custo para arquivamento de dados
  * Capaz de recuperar em alguns minutos ou horas
- S3 Glacier Deep Archive
  * Menor custo para arquivamento de dados
  * Capaz de recuperar em dentro de 12 horas
- S3 Intelligent - Tiering
  * Padrão de acesso desconhecidos ou alterados
  * Pode armazenar em acesso frequente ou infrequente
  * Automação para definição da disponibilidade


## Armazenamento de arquivos (EFS)
- Armazenamento dados em sistema de arquivos escalável
- Aumenta e diminui automaticamente conforme você adiciona e remove arquivos, sem a necessidade de gerenciamento ou provisionamento.


Mais informações: 
https://aws.amazon.com/pt/ebs/
https://aws.amazon.com/pt/s3/storage-classes/
https://aws.amazon.com/pt/efs/
INTRODUCTION TO DATA STRUCTURES AND ALGORITHMS
Tags: algorithms, computerscience, beginners
Published: 2022-06-27 20:36:54

Data Structures and Algorithms is such an essential unit in computer science and programming because it helps us understand the nature of a programming problem at a deeper level. 
The name Data basically means a collection of Information, while structure would mean someplace holding in things.
So therefore **data structure** in technical terms translates to a named place that can be used for storing,organizing,manipulating data.
An **Algorithm** is simply a set of finite steps or instructions to solve a particular problem.
Let us take for example that our goal is bake a cake, the algorithm to it would probably look like:
_Mix up dry ingredients
Mix up wet ingredients
Mix-up the dry and wet ingredients 
Preheat oven
Put cake in the oven for 45 minutes at 400 degrees celsius_
There are two main types of data structures. These include:
**Primitive Data structures**- They store data in one type.
**Non-Primitive Data Structures**-These store data of different types in a single unit.They  are further divided into two categories:
**LINEAR DATA STRUCTURES**
These are those that are arranged in a line form. Meaning items come one after the other. Examples : Arrays,Queues,Stacks and Linked Lists
**NON-LINEAR DATA STRUCTURES**
For these items are not arranged sequentially rather they are arranged in a hierarchical manner using nodes. Each node may be connected to two or more items. They are majorly categorized into two types, that is trees and graphs.

![primitive and non primitive data structures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6kqr2us0sc389lk2i9z.png)

**REAL LIFE APPLICATIONS DATA STRUCTURES**

- Online bus booking systems
- Web Browsers
- Music player applications
- Google Maps

**CHARACTERISTICS OF AN ALGORITHM**

**Finiteness** - An algorithm must always stop after a finite number of steps.
**Definiteness** - Each step of an algorithm must be precisely defined,put in a clear and concise manner.
**Input** -An algorithm has zero or more inputs.
**Output**- An algorithm has one or more outputs.
**Effectiveness**- An algorithm is also generally expected to be effective. 

An algorithm’s performance is tested against two major metrics:
The amount it takes to run- **Time complexity**
The amount of space it uses up during its execution- **space complexity**
**Guidelines of writing a good algorithm are:**

- An algorithm will be enclosed by START (or BEGIN) and STOP (or END).
- To accept user input we use statements such as INPUT, READ.
- To showcase results/ outputs  we use statements such as  PRINT, DISPLAY
- COMPUTE or CALCULATE is used while describing mathematical expressions and based on situation relevant operators can be used.

```
Step 1: Start
Step 2: Declare variables num1, num2 and multiple.
Step 3: Read values num1 and num2.
Step 4: Multiply num1 and num2 and assign the result to multiple.
       multiple←num1*num2
Step 5: Display multiple
Step 6: Stop

```