teleren/devto huggingface dataset:
Amazon S3 – Delete File SpringBoot RestAPI
Tags: springboot, amazon, s3, restapi
Published: 2021-05-06 16:35:25

https://grokonez.com/aws/amazon-s3/amazon-s3-delete-file-springboot-restapi

Amazon S3 – Delete File SpringBoot RestAPI

In the tutorial, we build a SpringBoot RestAPIs to Delete files in a Amazon S3 bucket.

Previous post:
– <a href="https://grokonez.com/aws/amazon-s3/amazon-s3-springboot-restapis-upload-download-file-image-to-s3">Amazon S3 – SpringBoot RestAPIs Upload/Download File/Image to S3</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Java 8</li>
<li>Maven 3.6.1</li>
<li>Spring Tool Suite: 3.9.4.RELEASE</li>
<li>Spring Boot: 2.0.4.RELEASE</li>
<li>Amazon S3</li>
</ul>
<h2>AmazonS3 Delete File API</h2>
We use delete API in <code>com.amazonaws.services.s3.AmazonS3.java</code> ->

<pre><code class="language-java">
public void deleteObject(DeleteObjectRequest deleteObjectRequest)
	throws SdkClientException, AmazonServiceException;
</code></pre>

<ul>
<li><code>@param deleteObjectRequest</code>: The request object containing all options for deleting an Amazon S3 object.</li>
<li><code>@throws SdkClientException</code>: If any errors are encountered in the client while making the request or handling the response.</li>
<li><code>@throws AmazonServiceException</code>: If any errors occurred in Amazon S3 while processing the request.</li>
</ul>
<h2>Practice</h2>
We re-use all the sourcecode of the previous tutorial:

-> <a href="https://grokonez.com/aws/amazon-s3/amazon-s3-springboot-restapis-upload-download-file-image-to-s3">Amazon S3 – SpringBoot RestAPIs Upload/Download File/Image to S3</a>

<img src="https://grokonez.com/wp-content/uploads/2018/08/spring-boot-restapi-delete-files-amazon-s3-project-structure.png" alt="spring-boot-restapi-delete-files-amazon-s3 + project-structure" width="293" height="239" class="alignnone size-full wp-image-14047" />

What we build more? ->

<ul>
<li>Implement deleteFile service</li>
<li>Expose deleteFile RestAPI</li>
</ul>

More at:

https://grokonez.com/aws/amazon-s3/amazon-s3-delete-file-springboot-restapi

Amazon S3 – Delete File SpringBoot RestAPI
best online compiler for python
Tags: python, python3, programming
Published: 2021-05-06 16:19:23

Python Compiler Explained
We know that most of the student looking for compile there program in online mode 
In this article we will see How to run program online.
open below link to run your code
<a href="https://pythonslearning.com/2020/07/tutorials-point-online-compiler-python.html">Free online compiler for python</a>
Three useful pathlib snippets
Tags: python, pathlib
Published: 2021-05-06 16:19:19

```py
from pathlib import Path
p = Path('/foo/bar')


# Read in a text file
text = (p / 'file.txt').read_text()

# Recursively list all .csv files in directory
csvs = list(p.rglob('*.csv'))

# Iterate files or subdirectories
files = [i for i in p.iterdir() if i.is_file()]
subdirs = [i for i in p.iterdir() if i.is_dir()]
```
Pathlib Cheat Sheet
Tags: python, pathlib
Published: 2021-05-06 16:18:16

```py
>>> from pathlib import Path
>>> f = Path.home() / 'foo.tar.gz'
# same as f = Path('/home/chris/foo.tar.gz')

>>> f.is_file()
True

>>> f.is_dir()
False

>>> f.exists()
True

>>> f.absolute()
PosixPath('/home/chris/foo.tar.gz')

>>> f.as_uri()
'file:///home/chris/foo.tar.gz'

>>> f.as_posix()
'/home/chris/foo.tar.gz'

>>> f.parts
('/', 'home', 'chris', 'foo.tar.gz')

>>> f.suffix
'.gz'

>>> f.suffixes
['.tar', '.gz']

>>> f.parent
PosixPath('/home/chris')
```
Responsive fix for the Next.js Image component
Tags: javascript, nextjs, react, webdev
Published: 2021-05-06 16:01:02

---
title: Responsive fix for the Next.js Image component
published: true
description: I found myself in the situation where I wanted to have real responsive images without providing height or width to the Image component.
tags: javascript, next, react, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2tom81mn4zsw1yfet4.jpg
---

Currently, `layout="responsive"` requires you to set **width** and **height** which you don't want to set because you **don't know what the aspect ratio** is going to be.

This is a new change since version *10.0.1* where the team around Next deprecated the `unsized` prop, replacing it with `layout="fill"` – which doesn't gives you the same functionality.

Also, if you're going to set `layout="fill"` and `objectFit="cover"` on the Image component you will get a strange behavior. There are cases in which you can fix this with position: relative on the parent item, but then you also have to set `width` and `height` which you don't want in case of a responsive image.

There is an **easy fix** to this problem, you only have to set a wrapper around the Image component to give a bit of extra styling.

First, we have to add the wrapping item with the class image-container. Please adjust this to fit your styling needs, e.g. if you're using styled-components the syntax will look slightly different.


```jsx
<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>
```


For this to work, it's important that you add two classes: image-container to the parent element and image to the Image component. After adding these classes, you should add this styling.


```css
.image-container {

  width: 100%;

  > div {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
}
```


And that's it! 🎉


Your images should now display with the right dimensions and should scale up to 100% width and at the same time having the correct height.
Some Issues in JS
Published: 2021-05-06 15:49:50

Hello, Dear Dev Community
Greetings!

Let's start to talk about JS function in a brief. 

aa. Functions are mainly two types. 

01. Built-in functions like toString(), indexOf(), map() and so many....

02. User defined functions

# Built-in functions are the functions which do not need to declare/ define but can be used from anywhere of the by calling them only.

# User defined functions are the functions which is defined by the user and can be used by calling them.

User defined function details:

01. The name of the function which should be followed by the keyword "function".
02. A list of parameters to the function, enclosed in parentheses () and separated by commas.
03. The JavaScript statements that define the function, enclosed in curly brackets {...}.

For example
function addition(number1, number2) {
    return number1 + number2;
}
addition(10, 20);
// output should be 30

bb. Function expression:
function expression is almost like variable declaration where the function name is optional.
const addition = function(number1, number2 ) { 
   return (number1 + number2) 
}
var x = addition(10, 20);
// output should be 30


cc. Now let's see the arrow function

const addition = (number1, number2) => {
   return (number1 + number2); 
}

addition(10, 20);
// output should be 30


dd. Block Scope

The block is delimited by a pair of braces ("curly brackets") 

If a variable is can only be accessible inside the {} is called block scope. Like 

 const addition = () => {
   let a = 10;
   let b = 20;
   let result = a + b;
   console.log(result);
}

addition();
// output should be 30
Here the variable a, b or result can not be accessed out side the unction addition declaration.

ee. Error Handling with Try and Catch 
If any error occurs then it is difficult to find where the error happened. To solve this kind of problem JavaScript has brought to us the try and catch method.

Try and Catch method has two main blocks

try {
//  some code
} 
catch(error) {
// Error handling
} 
Built-in errors, the error object has two main properties: error.name which shows the error name;
error.message which shows the error message.

try {
  blabla; // error, variable is not defined!
} catch (err) {
  alert(err.name); // ReferenceError
  alert(err.message); // blabla is not defined
}

ff. Now let's talk about spread operator which is introduced in ES6.

It looks something like this 
var newValue = [...value];
All the values of value variable is copied to newValue.

With the help of spread operator the more values or variable can be add. 
var value = ["Asmin", "Jara", "Asif"];
var newValue = [...value, "Rahin", "Jubin"]
the output of the newValue is // [""Asmin", "Jara", "Asif", "Rahin", "Jubin"];

Beside this spread operator can be used over object.
Advance JavaScript ( new for me) 
Published: 2021-05-06 15:44:28

•JavaScript try-catch

1.The try statement allows to the definition of a block code to be tested for errors while it is run, normally it interrupts the full application and shows errors, if run same code with the Try statement it is not happening.

2.The catch statement allows showing if any error occurs in the try block.

•Error handling
   We can give a custom error with the throw statement. 

•Coding style 
Today I learn the right way to write JavaScript Code. When we add one space and when we add two spaces, likes. After for/if/while we add one space. 

•Var Declarations and Hoisting
Write a variable name without value it’s called variable declaration and write a variable with the value it’s called variable initialization.
Ex: var a ;
Var a = 10;
When a JavaScript file run it scan whole page and all variable get in the top of the page, that’s why we can use a variable before it has been declared.

•Cross Browser Testing
Cross-browser testing means testing how to perform our site on all of the web browsers, find the bug and fix it. It happens sometimes code not run the same in all of the web browsers, sometime we should add some CSS code to fix the UI. 

•Block Level Declarations
For block level declarations variable should be declare with “let” or “const” , this two keyword make a variable block level. This variable can not be accessible outside the block.

•Function with Default Parameter Values

JavaScript Function has one default value "undefined" 
when we do multiplay or add or divided if no value provided then the default value would be undefined.
Working with Unnamed Parameters 
Unnamed parameter use for less coding, when function parameter passed without necessarily defining each parameter individually, now passed a parameter with … is means rest of all parameter. We see it in creating Private Route using React Router Dom in React.
 
 there ...rest is the parameter.
see it from here.  https://reactrouter.com/web/example/auth-workflow


•The Spread Operator
When All elements to need from an array or object then a spread operator used.
Example: const friends= [nazmul, murshed, hridoy, delowar, nadim, emran];

Const friends2 = […frends];

Console.log(friends2); // [nazmul, murshed, hridoy, delowar, nadim, emran];
Browser JavaScript and the secure website (HTTPS included)
Tags: javascript, webdev, programming, frontend
Published: 2021-05-06 15:34:54

# Trusting the website

Today's computer browsers have settings for website security, within that framework there is a setting for JavaScript that is most likely referred to as Script. If those settings run in a state of high security, JavaScript and cookies are disabled, and at that point a frontend programming project from Awwshop has ended. You can create a no JavaScript website using a backend programming project with only HTML and CSS, so browsers are still useful in a no JavaScript state. The only way I would use HTML with a backend project is in that scenario, I believe backend projects should only return data.

The no JavaScript security model is important because of the way it is presented in browsers but I suspect a HTTP website may be the reason JavaScript would be a security issue. I'm not quite sure how JavaScript is the cause of malware, if a page hangs close the tab.

# HTTPS is just like JavaScript, it should be used at a website

[Cloudflare](https://cloudflare.com) DNS provides free HTTPS, I learned about this in 2021. Before 2021 website encryption was not a pressing need but today it can be because the technology is free, and so today that's not something to worry about, but have you ever thought about what it would be like if JavaScript was the security risk or if that is even a valid point of view?

Security settings for the make-belief bunker is a poor reason to not use JavaScript when you create a website, so this next bit is for people not using JavaScript that may want to try it: Awwshop frontend programming projects start with the addition of JavaScript to a HTML and CSS only website, it's called Anchor Project. Find all of that and more at [Awwshop](https://www.awwshop.com/frontend:projects/).

All I did to get HTTPS was set my domain DNS to Cloudflare, added one A record to skirbunk.com for the service IP in DNS, and added one CNAME record to www for @ in DNS.

# Frontend programming is HTML, CSS, and JavaScript

Visitors surfing the web with enhanced browser settings need to trust websites before anything at a JavaScript website can happen. Upon your first visit to a website, if you trust the source, allowing that website to run like they do out of the box with phones is something computer users have the option to filter themselves. Awwshop content is code, technical, and free, people will not have a problem trusting a source that is working for them.

How you use JavaScript is something you need to analyze. I'm sure there can be situations where traffic mandates that you don't use JavaScript because that's the greater type of traffic, but as a general rule I would say that a frontend programming project is the fiscally responsible method in creating a website.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/talu0itf34xdmyf0z7up.jpg)

Find your frontend [service](https://www.awwshop.com/operations:services/) and/or [app](https://www.awwshop.com/frontend:applications/) at Awwshop.
I created modern flashcard system with spaced repetition - WordTester
Tags: showdev, opensource, blazor, csharp
Published: 2021-05-06 15:31:07

There are several tools for learning foreign words using flashcards and spaced repetition, but I found that most of them don't include the functionality of learning in context. As a result, I remember a lot of foreign words but I have difficulty to use them. One day, I decided to create a system that can resolve this issue - [WordTester](http://wordtester.org).

#Why?
The main goal was to create an application that requires to specify not only translated word but also a definition and example of the use of the given word. Thanks to it, I believe that the quality of learning and memorization will be increased. Also, I wanted to implement modern flashcards - not flashcards that only have two sides (original word and translated word). WordTester provides flashcards with 11 sides! 

#How? 
I decided that it would be beneficial for me to learn new technology, that is why I chose Blazor for frontend (it turned out to be really great). Backend is implemented in .NET 5.

#Some screens
![WordTester](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaedb46cu9jtxnzodhif.png)![WordTester](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v7wo0eqvjteinlrjr6u.png)![WordTester](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk3wxs6ptzf44yndtowp.png)![WordTester](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c84n9s0pus5e8pd7n6n.png)

Useful links:
[Website](http://wordtester.org)
[Repository](https://github.com/KamilBugnoKrk/WordTester)

I hope that thanks to WordTester process of learning a foreign language will be more comfortable and easier for you. Let me know what do you think about my first side project!

Edit: I received feedback from you that the UI is not very good, so a new version has been deployed:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywpfhn6uwjif0bdwmyhy.gif)
A cleaner approach to write JavaScript (Bonus tips in the end.)
Published: 2021-05-06 15:29:18

The best kind of code is a code that is easily readable by humans and can be executed by machines without any errors. When coding you don't want to sacrifice functionality over readability or vice versa. You should code in a way that other developers can read it without chugging two cups of coffee before going through your code. So, here are some tips to make your code cleaner -(These are not ancient rules that are written in gold or on pieces of rocks, that you must follow. But if you follow them you can achieve an easy-to-read code.)

* Use a single space between parameters.

```javascript
//Don't 
function add(numb1,numb2,numb3,numb4){...}

//Do
function add(numb1, numb2, numb3, numb4){...}
```

* Use a single space between arguments.

```javascript
//Don't 
let result = add(3,2,1)

//Do
let result = add(3, 2, 1)
```

* Don't use space between function name and opening parenthesis.

```javascript
//Don't 
function add (numb1,numb2){...}

//Do
function add(numb1, numb2){...}
```

* For better readability you can indent your code. Use 2 Spaces or  1 Tab. 4 Spaces or 2 Tabs are overkill.

```javascript
//Don't 
function add(numb1,numb2){
return numb1 + numb2;
}

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}
```

* Use the opening curly brace on the same line as your function.

```javascript
//Don't 
function add(numb1,numb2)
{ return numb1 + numb2 }

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}
```

* Use a single space around your operators ( + - * / ).

```javascript
//Don't 
function add(numb1,numb2,numb3){
return numb1+numb2+numb3;
}

//Do
function add(numb1, numb2, numb3){
  return numb1 + numb2 + numb3;
}
```

* An empty line is a good choice to increase readability, but make sure you don't overdo it. You can use an empty line between two logical blocks.

```javascript
//Don't 
function add(numb1,numb2){
  return numb1 + numb2;
}
let result = potato(2, 3);

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}

let result = add(2, 3);
```

8. Use a single space after for/while/if.

* If you have more than 2 conditions in your if statement breaks them down into individual lines.

```javascript
//Don't
if (id === 001 && color === "black" && category === "shoe")

//DO
if (
  id === 001 && 
  color === "black" && 
  category === "shoe"
)
```
* Avoiding 'else' is a good practice (Why you may ask?? That is a topic for another post.) But if you want to use 'else', use it without a line break.

```javascript
//Don't 
if(...){
  ...........
}

else {.......} 

//Do
if(...){
  ........
} else { 
  ......
}

```

##Bonus

If you want to learn more you can read [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#formatting-braces)

Or if you are a work-shy developer like me you can use an extension called [prettier- code format](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). It will format your code in a standard manner.
What I learned after failing to build a Project
Tags: discuss, watercooler, productivity, react
Published: 2021-05-06 15:26:39

So I have been working on an Image-Editor for react for past few days. And just to clear I have dropped the idea for time being due to lot of reasons. Firstly I was not enjoying the process of developing it anymore. Other reasons were that canvas API is very hard to work in with react. Also I am very aware of all the libraries that make it easier to use but then the application had nothing to offer if it was build on something as Konva or Toast-image-editor. It is very true that I worked on the project for 5 days in row and therefore it was more disappointing to drop the project.

But the project taught me a lot of stuff including how to manage uploading of image files in react,Using context api, how to convert them to base64 and even how to manipulate them. Project also taught me to keep some general things in mind. They are:

1. Build UI first - Prior to functionality building UI must be given importance. This is so because a well developed UI can help you remain motivated and support the development. Also a good UI is a great step towards clearing the thoughts for further development in my opinion.

2. Always Plan Well Before Project - So It was not like I did not planned well before developing it was more like I was confused. Well since I had already made the test version in vanilla javascript. I was confident or overconfident to step directly without doing proper research. So an Important take-back is that research. Even if you have the idea. Plan the stack or library you were going to use.

3. If It’s not working then don’t stress - Yes if it does not work give up on it for the time being and pick it later. Maybe you are just tired of looking at same thing, change the pace, work on something else.

And I guess those were it. I was really disappointed in myself because I was building it since long back. Well I will make sure to pick this up again someday in future till then I will keep up the hardwork on other projects. If you want to share your experiences with failed projects then please do.✌️
Coding Style
Tags: help, coadingstyle, coading, styling
Published: 2021-05-06 15:18:37

Coding Style
Our code must be as clean and easy to read as possible.

That is actually the art of programming – to take a complex task and code it in a way that is both correct and human-readable. A good code style greatly assists in that.

Syntax
Here is a cheat sheet with some suggested rules (see below for more detail
Animated Navbar
Tags: webdev, html, css, 100daysofcode
Published: 2021-05-06 15:13:16

today made a small animated navbar with pure css:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdl1vqq0484665078rz9.gif)

Codepen: https://codepen.io/Abdullah_Noor/pen/LYWYLvE

Follow me on twitter:https://twitter.com/ANoorDev
Consumiento la API REST de WordPress con JavaScript con método FETCH
Tags: javascript, api, wordpress
Published: 2021-05-06 15:10:31

Hacer para aprender.
Un ejemplo de lo que podes hacer dice más que mil diplomas.
Por esa razón, me propuse realizar un ejemplo práctico del uso de consumo de la API de WordPress usando el método FETCH de JavaScript.

Obviamente, con las API en general, se pueden lograr muchas más cosas increíbles. 

En este ejemplo sólo consumí los endpoints de post y "pinté" con HTML5 y CSS3(BOOTSTRAP) la estructura de los post del sitio dietadelhuevo.com, un blog relacionado con el consumo de huevo de gallina. 

Mi objetivo a mediano plazo (al menos a finales del 2021) es poder consumir la API de Amazon Afiliados (para un proyecto personal de marketing afiliados). 

Además, tengo como objetivo personal aprender JavaScript y React, tecnologías de mucha importancia para complementar mi perfil profesional. 

Puedes ver el ejemplo en: [API WordPress con JavaScript](https://fetch-rest-api-wordpress.netlify.app/)

A medida que vaya creando ejercicios iré compartiendo por acá.

¡Hasta entonces!
Error Handling(try...catch)
Tags: errors, help, trycatch, javascript
Published: 2021-05-06 14:53:20

Hey todays topic is very intersting, today we will learn about error handling.
Accualy it dosen't matter how great we are at programming , sometime our script have error. Error may occur because of our mistake , an unknown code, an unexpected user input , and for a  thousand reason we can have error. Usually a script stop due to error.
The “try…catch” syntax
The try...catch construct has two main blocks: try, and then catch:

try {

  // code...

} catch (err) {

  // error handling

}
It works like this:
1. First the try code is executed. if there is no error then code is run avoiding the catch error.
2. if try code executed and get some problem , cod stop and catch function catch the error with out kill the script so we have chance to handle it.