teleren/devto huggingface dataset:
Make AWS S3 bucket public accessible
Published: 2022-07-06 04:55:19

## Introduction
When you use AWS S3 for the first time, you may encounter access deny issues.
This issue occurs when you open the object URL in the browser.

![image](https://oranges-buckets.s3.us-west-2.amazonaws.com/image/tutorial/aws/s3-access-deny.png)

The two most likely causes of this problem are the following.
1. Amazon S3 Block Public Access is disabled
2. The bucket policy denies public visit <br/>

Here is how to solve this problem.

## Solve problem
### 1. Unchecking "block all public access"

(a). Goto permissions tab in your bucket and click edit in the block public access section


![image](https://oranges-buckets.s3.us-west-2.amazonaws.com/image/tutorial/aws/s3-permission.png)

(b). Make sure "block all public access" is off

![image](https://oranges-buckets.s3.us-west-2.amazonaws.com/image/tutorial/aws/s3-access.png)

### 2. Apply a new bucket policy to your bucket

(a). Click edit in the bucket policy section

![image](https://oranges-buckets.s3.us-west-2.amazonaws.com/image/tutorial/aws/s3-policy.png)

(b). Add the following bucket policy to your bucket

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "{Bucket-ARN}/*",
        }
    ]
}
```
(Remember to change `{Bucket-ARN}` to your own.)

## Success
After these two steps, you may notice an additional “Publicly accessible” icon under your bucket.<br/>
When we open the object URL in the browser, we will see that it is now accessible properly.


![image](https://oranges-buckets.s3.us-west-2.amazonaws.com/image/tutorial/aws/s3-success.png)
Appwrite: Get it cause we write Apps
Tags: opensource, javascript
Published: 2022-07-06 03:44:30

Let's pretend that today's my birthday and completely ignore what I did today to focus on an intriguing framework I came across recently, Appwrite. It's suppose to be an alternative to Supabase as another open source framework to setup a secure backend for you. It includes all the usual stuff such as:

- Database
- Authentication 
- Storage
- Serverless functions
- Security

It even includes the ability to get GEO related user data, something I've been wanting to work with for some time.

Having worked with Supabase on personal stuff, and not getting to work with JS recently as my internship mainly uses Java, this really caught my eye. You can read more about Appwrite [here](https://appwrite.io/) but I want to focus on the simplicity of getting it setup and using it.

The service is self-hosted, something we can take advantage of using Docker (which I recommend any developer learn even if you won't ever use it, it's an amazing tool) and as for setting it up to run, even easier. Here's the example code shown on their site:

```js
// Init your Web SDK
const client = new Client();
client
    .setEndpoint('http://localhost/v1')
    .setProject('455x34dfkj')

// Register User
const account = new Account(client);
account.create('unique()', 'me@example.com', 'password', 'Jane Doe')
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        });
```

As you can see, we just setup the client object, then we can do whatever we want. Whether it's creating a new account, a new session, or even a new JWT token, it's all done here. It even can connect with your preferred oAuth of your choice which is amazing.
Their README and documentation is amazing by the way. [See what I mean here](https://github.com/appwrite/appwrite)

While geared mainly to mobile developers (Flutter specifically targeted), any web developer can also taken advantage of Appwrite to create a secure backend for their purposes. Really makes it an easy decision to focus on the frontend. Now, services like this and Supabase are generally made with the intention of hiding the complexity of creating a backend service so you miss out on learning exactly how web servers are made. If you know how they're generally operated however, this service enhances that developer experience tenfolds. I plan on trying this out on a future project whenever I get the motivation to get back into web development. In the meantime, give it a try. You won't be disappointed.
Laravel Custom Export Button In Datatable
Tags: laravel, export, datatable, jquery
Published: 2022-07-06 03:24:19

In this article, we will see laravel custom export button in datatable. Datatable provides inbuilt button functionality and also provides html5 buttons. So, as per your requirement, you can add datatable export button in your table. Datatable also provides many customization functionalities. So, in this example, we will see how to add datatable export button outside the table. many times we required these types of requirements.

So, let's see how to add a datatable custom export button example, datatable custom export button in laravel 8, datatable export button outside table, laravel 8 export button, custom button in datatable, laravel 8 custom export button

In your HTML file add div with id or class out of table like below code :

```
<div id="buttons"></div>
<table id="example" class="table">
...
</table>
```

---
 
**_[Read Also : PHP Array Functions With Example](https://techsolutionstuff.com/post/php-array-functions-with-example)_**

---
 
> buttons().containers()

Using buttons().containers() function you can add buttons anywhere outside of the datatable.

In this step, we initialize the datatable.

```
var table = $('#example').DataTable();
```

After that, using the datatable button function we can add a button outside the table like the below code.

```
var buttons = new $.fn.dataTable.Buttons(table, {
     buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
}).container().appendTo($('#buttons'));
```

---
 
**_[Read Also : Datatable Server Side Custom Search/Filter In Laravel](https://techsolutionstuff.com/post/datatable-server-side-custom-search-filter-in-laravel)_**

---
 

Example : 

Directly apply buttons to datatable like below code :

So, both ways to you can implement a custom export button outside datatable.

```
var table = $('#example').DataTable({
    buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
});

table.buttons().container().appendTo($('#buttons'))
```
 
---

You might also like :

- **_[Read Also : Pagination Example In Laravel 7/8](https://techsolutionstuff.com/post/pagination-example-in-laravel-7-8)_**

- **_[Read Also : Laravel 8 CRUD Operation Example](https://techsolutionstuff.com/post/laravel-8-crud-operation-example)_**

- **_[Read Also : Laravel 8 Yajra Datatable Example Tutorial](https://techsolutionstuff.com/post/laravel-8-yajra-datatable-example-tutorial)_**
Check repo package detail as quick as possible
Tags: chrome, npm, readme
Published: 2022-07-06 03:21:35

Recently I meet a problem, sometimes I will read some awesome repos' source code to improve my code skills.

Also I will read `package.json` file, find some useful and interesting packages. However, npm packages listed in `package.json` in Github never display npm readme. It is difficult to infer from the npm package name what function it has.

I always copy npm package name, and search in google(or in alfred npm workflow). It's really annoying. Is there anyway to list all npm readme at once?

As a front-end developer, I know npm provide public `npm-package-info` API, also fetch Github repo `package.json` detail api is public. **So why not create a web extensions to save my time?**

This Web extension should as simple as possible, it should only contains **A simple button, click it, then show me all npm package readme.** 

After spending almost a week time, include off-hours and weekends. Now, It launches in the chrome webstore, you can click [here](https://chrome.google.com/webstore/detail/repo-stack/cgakjpmmkidebbfdjmolbenhnpibgekc?hl=zh-CN&authuser=0) to install it.

Usage is very simple.

1. Go to any Github repo page (which include at least a `package.json` file)
2. Click web extensions popup Icon (on the right top of the chrome browser).

![screenshot](https://user-images.githubusercontent.com/6839576/177183917-ebfe1d26-96d8-4a58-b4c3-8a64a251b31a.png)

It displays all npm package readme in a modal page, by default, it ignores `@types/*` packages.

Also it supports monorepo, you can switch different `package.json` file on the right top of the modal.

Welcome to send feedback in comments or open Github issue

{% embed https://github.com/JiangWeixian/repo-stack.ext %}
CSSBattle | #23 Boxception
Tags: css, challenge, cssbattle, boxception
Published: 2022-07-06 03:20:13

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #23 Boxception](https://cssbattle.dev/play/23) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Boxception Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9up39c84xbsx4lt1zmz.png)

---

> #### Solution:

```html
<div class="container flex bg-gold">
  <div class="green-square flex">
    <div class="lightyellow-square flex">
      <div class="gold-square bg-gold"></div>
    </div>
  </div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .flex {
    display: flex;
  }
  .bg-gold {
    background: #f3ac3c;
  }
  .container {
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  .green-square {
    width: 200px;
    height: 200px;
    background: #1a4341;
    align-items: flex-end;
  }
  .lightyellow-square {
    width: 100px;
    height: 100px;
    background: #998235;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .gold-square {
    width: 50px;
    height: 50px;
  }
</style>
```

---

> #### Key Takeaway(s):
- using display flex can be super useful to position nested children elements to certain corners within the parent container

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Building gRPC Microservices in Spring Boot — Part 1
Tags: grpc, java, microservices, spring
Published: 2022-07-06 02:55:00

[https://medium.com/p/building-grpc-microservices-in-spring-boot-part-1-6d68078b16e7](https://medium.com/p/building-grpc-microservices-in-spring-boot-part-1-6d68078b16e7)
picoCTF 2022 ~morse-code writeup~
Tags: security, ctf
Published: 2022-07-06 02:12:17

# Description

>Morse code is well known. Can you decrypt this? Download the file here. Wrap your answer with picoCTF{}, put underscores in place of pauses, and use all lowercase.

# Solution

Reading the description, the contents of the file must be written with morse code.
Morse code" is a combination of codes of different lengths, such as "・・・--・, ・-・," to represent letters and numbers.
It can be solved quickly using the following site.

<!---descriptionを読むと，ファイルの内容はモールス信号であることがすぐわかりますね．以下のサイトを使ってすぐに解けます．-->


https://morsecode.world/international/decoder/audio-decoder-adaptive.html

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

Now you have a flag. Please replay several times to avoid accidental conversions. Don't forget to lowercase the string and replace spaces with underscores (_).

<!---これでフラグゲットです．何度かplayをやり直さないと誤って変換されることがありました．文字列を小文字にするのと，スペースをアンダースコア(_)に置換するのをお忘れなく．-->

Enclose `wh47_h47h_90d_w20u9h7` with picoCTF{} and submit it.

<!---`wh47_h47h_90d_w20u9h7`をpicoCTF{}で囲んでサブミットです．-->
Realizar deploy de una app web en flask con heroku
Tags: webdev, python, flask, heroku
Published: 2022-07-06 02:01:16

Buenas a tod@s, aquí les dejo un pequeño tutorial para realizar deployment de sus aplicaciones web realizadas con flask de una forma sencilla y rápida a través de heroku.

{% embed https://www.youtube.com/watch?v=XfY1YU4UD4Y %}
CosmicBreak Metaverse - New P2E Japanese MMORPG!
Published: 2022-07-06 01:59:37

Sharing a cool project I stumbled across!

CosmicBreak Metaverse is an MMORPG third person shooter that takes place in a parallel dimension in outer space known as the Cosmic Ark. This game heralds a new age of mecha-themed blockchain games with beautiful anime-themed art and rich lore. Fans of third person shooters, mecha and anime will all be able to find something in common as they embark into battle on the Cosmic Ark.

Team is doxxed and has years of experience in gaming & blockchain industry.
Game has been running for 10+ yrs with dedicated fanbase.
IP infrastructure already built.

Mint details: TBD
Website: https://cosmicbreak.io/
WL + OG roles are currently being given away! Join the discord: https://discord.gg/cosmicbreak
9301c0aaf5106b95991dc0f26e2c021f.jpg?siz
Github Repositories to learn Javascript
Tags: webdev, javascript, beginners, tutorial
Published: 2022-07-06 01:03:26

Here are few Github Repositories to indulge in if you're looking to learn Javascript:

🐾https://github.com/trekhleb/javascript-algorithms
    Algorithms and data structures implemented in JavaScript with explanations and links to further readings
    143k stars
🐾https://github.com/ryanmcdermott/clean-code-javascript
    Clean Code concepts adapted for JavaScript
    68.4 stars
🐾https://github.com/leonardomso/33-js-concepts
    33 JavaScript concepts every developer should know.
    49.3k stars
🐾https://github.com/getify/You-Dont-Know-JS
    A book series on JavaScript
    154k stars
🐾https://github.com/lydiahallie/javascript-questions
    A long list of (advanced) JavaScript questions, and their explanations 
    44.3k stars
🐾https://github.com/wesbos/JavaScript30
    A long list of (advanced) JavaScript questions, and their explanations 
    19.8k stars
🐾https://github.com/verekia/js-stack-from-scratch
    Step-by-step tutorial to build a modern JavaScript stack.
    19.1k stars
🐾https://github.com/sorrycc/awesome-javascript
    A collection of awesome browser-side JavaScript libraries, resources and shiny things
    27.9k stars
🐾https://github.com/Asabeneh/30-Days-Of-JavaScript
    30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days
    22.3k stars
🐾https://github.com/denysdovhan/wtfjs
    A list of funny and tricky JavaScript examples
    26.6k stars
Prisma-ORM e NodeJS
Published: 2022-07-06 00:40:08

**Iniciando com Prisma ORM**

**Introdução**
Este é um documento para iniciantes conseguirem fazer a utilização de do ORM Prisma no dia a dia. Este documento terá um código simples que também estará disponível no github.

**Início**
Para iniciar com o prisma ORM é bem simple primeiro vamos colocar um **yarn add prisma ou npm install prisma && yarn add @prisma/client ou npm install @prisma/client** e depois só utilizar a linha de comando **npx  prisma init** . esse comando irá criar alguns arquivos no seu projeto, sendo eles uma pasta chamada prisma (aqui irá ficar as migrations e o arquivos chamando schema.prisma)
No arquivo de schema que foi criado vamos iniciar os nossos schemas das tabelas do banco. Ex.

```
model Authors {
  id    String  @id @default(uuid())
  name  String  @db.Text
  email String  @db.Text
  books Books[]
 
  created_at DateTime @default(now())
  updated_at DateTime @default(now())
 
  @@map("authors")
}
 
model Books {
  id          String  @id @default(uuid())
  title       String  @db.Text
  description String? @db.Text
 
  created_at DateTime @default(now())
  updated_at DateTime @default(now())
 
  Authors   Authors @relation(fields: [author_id], references: [id])
  author_id String
  @@map("books")
}
```

O Relacionamento acima é feito de One to Many (um para muitos) ou seja 1 autor pode ter vários livros. Abaixo estarei mostrando como fazer a inserção de um autor criando 1 livro.
A parte de que coloquei no model de Author o books do Tipo Books[] significa que o author terá varios livro e abaixo coloquei @@map(“authors”) que será como nossa tabela sera chamada no banco de dados

**Inserindo dados dados no banco**
	é muito fácil inserir só instanciar o PrismaCliente usando o new PrismaClient() usar o create como no exemplo a baixo

```
    async create(data: IData) {
        return await prisma.authors.create({ data })
    }
```

outro comando é o de find:

```
async findById(id: string) {
        return await prisma.authors.findFirst({
            where: {
                id
            }
        })
    }
```
aqui outros comando dos prisma na documentação [click aqui pra ver o crud](https://www.prisma.io/docs/concepts/components/prisma-client/crud)
inserindo uma example de projeto com node e prisma: [Prisma e Nodejs](https://github.com/devMarcos24/prisma_nodejs)
My First One Year Experience in the US Start-Up Company! 🏉
Tags: devjournal, yearinreview, motivation
Published: 2022-07-06 00:31:14

Just took a moment to reflect what I have done in my first year at VitusVet.
I summarized 5 important things What I learn after Working at VitusVet for a year 🔥:

## 1️⃣ Peer Review. ✅
   I had never done any peer review in my previous company before I joined VitusVet. I know that doing peer review is good to prevent a bug in our code base. However, there are a lot of benefits when we are doing peer review.
   🔶 We could reduce the possibility of defect/bug
   🔶 I learn many things from someone's code.
   🔶 When we need to change people's codes, we already get some ideas because of peer review.
   🔶 It makes me realized that writing a code is not solving a problem, but we must think about how other people could read your code.

## 2️⃣ One-on-one Meeting. 🧑‍🤝‍🧑
   This is also something new for me at VitusVet. I didn't expect that a One-on-one meeting with my manager could be so important for me. I believe everyone has experienced imposter syndrome. My imposter syndrome is about my communication in English. I remembered when I had a one-on-one meeting with my manager, I shared with him what I felt about my weakness. Therefore, he encouraged me that my English is fine. That helped me a lot to boost my confidence. I'm grateful to have had this session because it gives me a lot of improvements.

## 3️⃣ The Benefit of mentorship. 👨‍🏫
   It has been a pleasure to have a chance mentoring someone in VitusVet. I thought I would not qualify to mentor and improve someone's quality. As a mentor, I realize that the responsibility to teach someone could push me to learn the basics again. If we don't really understand the basics, it is difficult to help someone understand them. Mentorship is not beneficial only for the mentee but for the mentor as well.

## 4️⃣ Being Consistent. 📈
   I learned this from my ex-colleague at VitusVet. He doesn't have an IT background, but he could change his career just by being consistent to learn code every day. I started to put the "Consistent" word into my head. Not only for coding but also for my table tennis practice. A small step every day gives so much powerful impact on your ability. 

## 5️⃣ Planning before Code. 📅
   When I started my career as a software engineer, I thought finishing tickets as soon as possible is the thing that I should achieve. After one year in VitusVet, I understand that it's not about speed, but it's about the quality of your code. Planning is not only for solving your problem, but it should be thinking about clean code scalability for your system. Writing a bad code in your code is similar to bringing garbage in your bag for your whole life. Your bad code might be there forever until someone realizes and refactor your code. Take your time to plan everything before you start writing a code.
Binary Search Technique
Tags: leetcode, algorithms, java, womenintech
Published: 2022-07-06 00:19:27

**When to use:** Used for searching for an element in a sorted list or array. Reduces the time complexity from O(n) to O(log n). 

**Conditions:**
Input must be sorted. 

**Steps:**
1. Set the left index = 0, right index = length - 1. 
2. Get middle index: (left - right) / 2. Make sure that middle index is inside the iteration so it can change and calculate for every left and right index.
3. Check if middle element is equal to the target, if it is return and end search.
4. If middle element is less than target, search right side of the list. Set the left index to be at the middle + 1. 
5. If middle element is greater than target, search left side of the list. Set the right index to be at the middle - 1. 
6. Iterate until match is found or left index is greater than right index. 

**Two Types of Approach: Recursive and Iterative**

**Recursive Approach:**
```java
class Solution {
    public int search(int[] nums, int target) {
        int left = 0;
        int right = nums.length -1;

        return binarySearch(nums, target, left, right);
        
    }
    
    public int binarySearch(int[] nums, int target, int left, int right){
        int middle = (right + left) / 2;
        
        if(right < left){ 
            return -1;
        }
        
        if(target == nums[middle]){ 
            return middle;
        }
        
        if(target < nums[middle]){
            return binarySearch(nums, target, left, middle - 1);
        } else {
            return binarySearch(nums, target, middle + 1, right);
        }
    }
}
```

**Iterative Approach:**
```java
class Solution {
    public int search(int[] nums, int target) {
        int left = 0;
        int right = nums.length -1;
  
        while (right >= left){
            int middle = (right + left) / 2;
            if(target == nums[middle]){ 
                return middle;
            }
            if(target < nums[middle]){
                right = middle - 1;
            } else {
                left = middle + 1;
            }
        }
        return -1; 
    }
}
```
07: A Closed Captioning Example on RaspberryPi using Azure Cognitive services
Tags: 30days, iot, iot4b
Published: 2022-07-06 23:58:44

---
title: 07: A Closed Captioning Example on RaspberryPi using Azure Cognitive services
published: true
date: 2022-07-06 00:00:00 UTC
tags: 30days,iot,iot4b
canonical_url: https://JulyOT.dev/blog/07-closed-captioning-rpi
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-7-closed-captioning-75ac3dc342a459b423a1cdb0faa6de88.png
series: JulyOT 2022
---

_Build a close captioning tool using a Raspberry Pi and Azure_

## The project[​](#the-project "Direct link to heading")

Check out this cool GitHub repo that shows you how to use the Azure Cognitive services from Microsoft and build an example of the Speech to text on a IoT device like raspberry. We will be using youtube videos for our source of speech which would be the input, we will consume the speech data via Mic connected to raspberry and display the converted text in real time over a LCD screen.

### See it in action[​](#see-it-in-action "Direct link to heading")

Check out this video to see this project in action.

<video width="640" height="480" controls=""><source src="https://user-images.githubusercontent.com/46184494/172901241-2b21438e-2600-4397-a6b6-4cd5b5c7c63d.mp4" type="video/mp4"></source></video>
### Get the instructions[​](#get-the-instructions "Direct link to heading")

Check out the [GitHub repo](https://github.com/m-mohsin-ali/closed-captioning-azure-speech-ai) for all the instructions.

<form action="https://github.com/m-mohsin-ali/closed-captioning-azure-speech-ai" target="_blank"><input type="submit" value="GitHub repo"></form>