teleren/devto huggingface dataset:
How to Upload an Image in S3 Bucket using PHP/Laravel
Tags: laravel, aws, php, tutorial
Published: 2021-01-01 13:18:03

{% youtube FmspC3e2LEU %}

In this tutorial, you will learn how to upload an image S3 bucket using PHP/Laravel

I assume you have installed laravel in your server.

**Install S3 dependencies in laravel**

```
composer require league/flysystem-aws-s3-v3~1
```

**Update .env file**

```
AWS_ACCESS_KEY_ID=AKIA4BIXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY=Ff8J1EQ74YowQxOhWxxxxxxxxxxxxxxx2
AWS_DEFAULT_REGION=ap-south-1
AWS_BUCKET=demo.codingx.in
```

**Route:(web.php)**

```
Route::get('/fileupload','FileUploadController@index');
Route::post('/save-image','FileUploadController@saveImage');
```

**View:(fileupload.blade.php)**

```
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>File Upload to S3</title>

    </head>
<body>

	<form method="POST" action="/save-image" enctype="multipart/form-data">
		@csrf
		<input type="file" name="image">

		<button type="submit">Upload</button>

	</form>
        
</body>
</html>
```

**Controller:(FileUploadController.php)**

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class FileUploadController extends Controller
{
   

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */

    public function index()
    {
    	return view('fileupload');
    }

    public function saveImage(Request $request)
    {
    	$this->validate($request,[
    		'image' => 'required|image|max:2048'
    	]);

    	if($request->hasFile('image')){
    		$file = $request->file('image');

    		$name = time().$file->getClientOriginalName();

    		$filepath = $name;

    		Storage::disk('s3')->put($filepath,file_get_contents($file));

    	}

    	return back()->with('success', 'Image uploaded successfully');
    }
    
}

```
Architecture documentation series
Tags: architecture, series
Published: 2021-01-01 13:07:36

---
title: Architecture documentation series
published: true
description: series about architecture documentation
tags: #architecture, #series, 
//cover_image: https://direct_url_to_image.jpg
---

For a while, I found a list of articles from [Nikolay Ashanin](https://medium.com/@nvashanin) about [software architect role](https://medium.com/@nvashanin/the-path-to-becoming-a-software-architect-de53f1cb310a) and software architecture in general, and I encourage any software engineer to have a look at those. It gave me the idea to share my experience with a series of posts on how I envisage software architecture and, in particular, the documentation. Within the next articles, I will describe topics:
- [around documentation dissemination](https://dev.to/sebastienandreo/architecture-documentation-authoring-and-dissemination-53gg), then
- [how to deal with diagrams](https://dev.to/sebastienandreo/diagram-as-code-2b6f)

I hope you will enjoy that series, waiting for your comments.
JavaScript - Recent Parts
Tags: javascript, webdev, tutorial
Published: 2021-01-01 13:01:29

 
I am writing this post in order to highlight some of the recent parts of the modern JavaScript that have solved many problems of JavaScript that many JavaScript developers were waiting for.
So without any further chitchat let's get straight into the topic.
## Template Strings
Template Strings have made it very easy to embedded variables into the Strings and also working with Strings have become easy as well. 
In the following example we can easily use variables into the Strings.
![Template Strings Example](https://dev-to-uploads.s3.amazonaws.com/i/xkfa9c2uaxgsi3px9qo6.png)
## Destructuring
One of my  favourite feature of modern JavaScript. This feature allows the developer focused on what instead of how.
Destructuring allows to extract that data that is required to complete or do any specific work.
This feature of JavaScript requires another separate article because there are several types of Destructuring such as Array Destructuring and Object Destructuring. 
Let's try to understand Object Destructuring by the means of the following example.
![Destruct Example](https://dev-to-uploads.s3.amazonaws.com/i/mb1dji7bvr7d2o2yg08h.png)
Now What we are doing here is that **getusers()** will be returning the array os JSON objects that contains the information regarding the users, but we do not to have to completed response and we want only specific things to work with for example the **First Name, Last Name and Profession.** so by the Object Destructuring we can only receive array of objects having only these properties.
## Array.flat()
The Array.flat() method on arrays allow to convert any Dimensional Array into one less dimensional array by default and if to a specific given value as well.. 
For example we have a 2D Array the Array.flat() will convert that 2D Array into 1D Array and so on.
So Let's have a look at the example of flat() function in action.
![Flat Example](https://dev-to-uploads.s3.amazonaws.com/i/2m985b4xzk76rektm5jj.png)
There are some other new methods related to Arrays as well such as find(), findIndex(), includes() as well. These methods are also very useful in order to do some common work related to Arrays as well.
## Iterators and Generators
The JavaScript has provided us a way to consume the data inside a Data-source one by one until we have not reached to the end of that Data-Source.
Let's get on the example to understand this concept better and have a look at the Iterator and how we can work with it as well.
![Iterator Example](https://dev-to-uploads.s3.amazonaws.com/i/0tbb186wm47xqamy86ex.png)

So these were the some of the most simple and mine favourite JavaScript features that came out recently.
forEach(), map(), filter() What's the difference?

Tags: javascript, typescript, node, beginners
Published: 2021-01-01 13:00:26

# The map() method

The `map()` method loops through each element in array and calls the provided function for each element. This method creates a new array and doesn’t alter the original array.
```
const numbers = [5, 6, 8, 14, 32];

const updatedNumbers = numbers.map((number) => {
    return number + 10;
});

console.log(updatedNumbers); // [15, 16, 18, 24, 42]
```

# The filter() method

The `filter()` method in JavaScript creates a new array with the elements that satisfies the provided condition. This method calls a provided function for each element in array and verifies the condition given in the provided function and passes only those elements that satisfy the given condition.
```
const numbers = [5, 6, 9, 32, 14];

const even = numbers.filter((number) => {
     return number % 2 === 0;
});

console.log(even); // [6, 32, 14]
```
# The forEach() method

`forEach()` is used to execute the same code on every element in an array but does not change the array and it returns undefined.
**Example:**
In the example below we would use .forEach() to iterate over an array of food and log that we would want to eat each of them.
```
let food = ['mango','rice','pepper','pear'];

food.forEach(function(foodItem){ 

console.log('I want to eat '+foodItem);
});

```

Hope you have got a clear idea about both JavaScript array methods `map()` `filter()` and `forEach()`.
Daily Developer Jokes - Friday, Jan 1, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-01 13:00:07

---
title: "Daily Developer Jokes - Friday, Jan 1, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Jan%201%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b057385.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the functions stop calling each other?

___A:___ Because they had constant arguments.
 -->
Joplin note sharing tool(generate blog)
Tags: joplin
Published: 2021-01-01 12:47:35

# joplin-blog

> [GitHub](https://github.com/rxliuli/joplin-blog)

## Scenario

Are you as annoyed as I am with the trouble of maintaining notes and blogs in sync at the same time? If you use joplin as a note taking tool and hexo/vuepress as a blog generator, you can choose this tool to connect them.

## Use

Way 1

1. add the configuration file `.joplin-blog.json` (refer to [configuration](#configuration) for details)
2. export notes as a blog using the command `npx joplin-blog`

Way 2

1. navigate to the hexo blog directory at the command line
2. add dependency `yarn add -D joplin-blog` 3. add configuration file `.joplin-blog`
3. add a configuration file `.joplin-blog.json` (refer to [configuration](#configuration) for details)
4. add an npm script file `"imp": "joplin-hexo"` 5.
5. Run the command `yarn imp` 6.
6. You can see that the `source/_posts` directory already contains all the exported notes

## Example

- [hexo](https://github.com/rxliuli/joplin-blog/tree/master/tutorials/hexo-example)
- [vuepress](https://github.com/rxliuli/joplin-blog/tree/master/tutorials/vuepress-example)

## Configuration

public

| configuration       | type            | description                                           |
| ------------------- | --------------- | ----------------------------------------------------- |
| `type`              | `hexo/vuepress` | type of integrated blog                               |
| `rootPath`          | `string`        | hexo/vuepress directory, which should normally be `.` |
| `joplinProfilePath` | `string`        | joplin personal folder                                |
| `token`             | `string`        | token for joplin web service                          |
| `port`              | `number`        | joplin web service's port                             |
| `tag`               | `string`        | joplin's blog tag                                     |

hexo

| configuration     | type       | description                                 |
| ----------------- | ---------- | ------------------------------------------- |
| `stickyTopIdList` | `string[]` | top note ids (only works with fluid topics) |

I used this tool to share 170+ notes, blog address (Chinese)
https://blog.rxliuli.com/
My Keyoxide Proof
Published: 2021-01-01 12:31:51

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/5E01152B845947865EC492EC29660CF356D4508A) to [this dev.to account](https://dev.to/vegadodo). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:5E01152B845947865EC492EC29660CF356D4508A]
Why I'm Learning Python in 2021
Tags: automation, cloudskills, python, googlecloud
Published: 2021-01-01 12:28:39

So a new year means a new me.For a couple of months I was a computer repair and refurbishment technician. Don't let the title fool you, my job duties mostly entailed replacing hard-drive, ram and operating systems. Though I was greatful for an opportunity to work with tech, there would be no long term career in a warehousing position.

Fortunately during this internship,I was given an  opportunity to learn and prepare for Google's Associate Cloud Engineer Certification. As of writing I've completed the "Architecting with Google Cloud Platform" specialization and  scheduled my certification exam for March 26th, 2021. During that time, I'll be  doing practice questions ,reading the study guide and completing guided projects through Coursera Plus.

Since automation scripting is one of the skills I'm supposed to have as Cloud Engineer, now seems like an excellent time to pick up Python again. While industries are preparing for a no-code future, it is still essential to learn core programming concepts.

I've taken the intiative by enrolling in "Google's IT Automation with Python" professional certificate. This course will also complement the Google's IT Support Professional specialzation that I completed in 2018.

With the IT Support Dual accreditation, Associate Cloud Engineer certification and Python Automation certification; it is my hope that I turn what I've in these course as degree equivalent experience. As a person from an underserved demographic, this provides me with an alternative route to a fufilling career without the extra financial and social strain of institutionalized learning.


I'm spending this weekend going through the first course of the specialzation, "Crash Course Python". As I work through each course, I'll write about my experiences while balancing my new job as a Desktop Support Technician. I can't wait to share what I've learned.

Thanks for reading
My personal experience with XState
Tags: learning, codenewbie
Published: 2021-01-01 12:17:31

---
description: My experience learning the XState library with React, Vue and TypeScript
---

{% twitter 1344502932704788480 %}

Over the Christmas holiday, I dove into [finite state machines](https://xstate.js.org/docs/about/concepts.html#finite-state-machines) because I was intrigued by its popularity. I built a couple of small apps using [XState](https://xstate.js.org/docs/) with React hooks, Vue 2 and Vue 3 (composition API), using TypeScript for every project.

I was seduced by the concept of finite state machines. For example, in my project with Vue 2 I was dealing with multiple intricate states, and I was eager to clear things out thanks to XState. It took me a while to get a grasp on how to use that library, which has a large surface area and is not easy to get started with. I took [a course on Udemy](https://www.udemy.com/course/introduction-to-state-machines-with-xstate-and-react), which provided me with a solid foundation.

However, I quickly found out that XState doesn't play well with Vue 2 and that I would need to use [Vuex](https://vuex.vuejs.org/) anyway. . My original thought was to replace Vuex with XState and I don't see the point of having to state management solutions.

Then I built a second, smaller project with Vue 3 and its composition API. This time, the integration of XState was smooth and I was able to manage my data globally thanks to XState context. Since the project was quite small, I can't really tell if this approach would scale well in a larger codebase.

The experience with React Hooks was very similar to Vue 3 Composition API. I also would like to say that XState integrates very well with TypeScript.

In conclusion, I think that XState is not a good fit for the websites I usually build for clients, which are JAMstack websites with simple state logic. But it's true that XState forces developers to think of all the possible outcomes and a seemingly simple state logic can actually hide complex workflows and possible paths. However, covering all those paths takes time, and time is money for the client. It's sad, but it's not rare that I have to build forms where in case of an error I just log it to the console.

However, if I had more time, I wouldn't implement XState, but rather add a bug tracking solution (LogRocket, Sentry, Bugsnap, etc.) or write E2E tests.

I'm persuaded that XState is the perfect tool for specific applications, but it definitely doesn't make sense to use it every time. For example, I find the [TodoMVC example on the XState website](https://xstate.js.org/docs/examples/todomvc.html) to be incredibly complex and convoluted.

_[More opinions on XState on Reddit](https://www.reddit.com/r/reactjs/comments/ilfi4c/my_experience_with_using_state_machines_xstate_in/)_
Variable in C language 
Tags: beginners, c, variable, programming
Published: 2021-01-01 12:13:33

Variable is nothing but it is just like containers which store value.

Conditions for Naming a variable -:

1. First character must be alphabets or underscore (_).

2. Space , comma is not allowed.

3. No special characters are allowed otherwise underscore (_).

4. Variable names are case sensitive.

Valid Examples -: aaaa , _aaaa , aaa12 , aaa_bbb etc

Invalid Examples -: 1aaa , a b , a@b etc
Calculating Run Time of a function using Python Decorators
Tags: python, tutorial, todayilearned, beginners
Published: 2021-01-01 11:32:49

Many times we need to check the running time of a function, so that we can see which functions are taking a lot of time and improve them. 
In this post I'm writing about a simple but elegant way to do this using Python Decorators. 

### But, What is a Decorator?
Decorators are a design pattern in python that lets us modify the functionality of an object without changing its structure. Here I'll use this to modify a function to also print the time taken by it. 

Lets see how I'm using this to track function run time: 

###1. Target Function: 
Suppose we have a basic function which reads a csv and returns the pd.DataFrame. Now depending on the size of the csv, it can take some time to run.

![image](https://user-images.githubusercontent.com/13352807/103288112-2b35b300-4a0a-11eb-89e1-7d13598487de.png)

###2. Decorator Function:
Here we can define the function `calc_runtime` which will act as a decorator for calculating runtime. This function will take a function `f` as input and will return an updated version of the same function. 

![image](https://user-images.githubusercontent.com/13352807/103288177-54eeda00-4a0a-11eb-859e-16c0ac4fe4d6.png)

###3. Using the Decorator over target function:
As the decorator is ready, we can simply call this over any function to print its runtime. Here we are calling over our target function like this :

![image](https://user-images.githubusercontent.com/13352807/103288303-94b5c180-4a0a-11eb-9a07-acc3eeaad4f7.png)

Basically the `load_csv` gets passed on as an argument to the `calc_runtime`, there we handle its arguments by using `args`
and `kwargs` easily. Finally we return the value to the calling space. 

By using this kind of decorators, its straightforward to change the return value of a function, or print some additional layers over a function.
Streaming video to browser via Amazon Elastic Transcoder
Tags: laravel, aws, elastictranscoder, php
Published: 2021-01-01 11:29:26

I'm going to stream videos from S3. I know it is simple. I did it with putting presigned url inside video src attributes. There is no problem. Everything is being displayed. But, if I visit my vebsite via IDM+ app's browser for android, my videos can be downloaded. But I don't want it. So I want to transcode the videos(adding watermark to video, making video partion's extension .ts)*. After that, I think, videos can not be easily downloaded via IDM+(because of multiple video portions).

How can I display transcoded video file in browser? I only found checking job status, creating jobs and etc via amazon elastic transcoder. But nothing about displaying transcoded video in browser in laravel/php.

*as I known, if video is transcoded, video extension would be .ts or something else. I'm new in video streaming sphere. Take it into account :) Thank you!

Technology: Laravel 8, AWS S3, Amazon Elastic Transcoder.

Thank you in advance.
You attempted to overwrite the built-in helper "array"
Tags: ember
Published: 2021-01-01 11:24:30

## The problem

Recently I [updated](https://github.com/ember-cli/ember-cli-update) one of my EmberJS projects (v3.15.1...v3.23.0). And I got quite an unexpected error saying:

```log
Error occurred while rendering:

- While rendering:
  application
    authenticated
      authenticated.admin
        authenticated.admin.items
          tabs
            authenticated.admin.items.stock
              form-radio
                form-field

Uncaught Error: Assertion Failed: You attempted to 
overwrite the built-in helper "array" which is 
not allowed. Please rename the helper.
```

## The search

OK, I was pretty sure I did not write the helper myself. So since I knew that `form-field` and `form-radio` are from the amazing [frontile](https://frontile.dev/) addon, I tried to look there. I found [the usage of array helper](https://github.com/josemarluedke/frontile/blob/9cc18d53292f09efc51002b9b54f64ce2da91fb7/packages/forms/addon/components/form-radio.hbs#L3), but no definition.

So it _either_ came from an addon _or_ is native to respective Ember version. Since I did not know how to check the former, I went with the latter. And it turned out that Ember has [native template array helper](https://api.emberjs.com/ember/3.23/classes/Ember.Templates.helpers/methods/array?anchor=array) since version *3.8.0*. So not much of a help here.

Luckily I remembered that since the beginning of the project I was using [ember-composable-helpers addon](https://github.com/DockYard/ember-composable-helpers) that back in the days used to have also *array template helper*. So after a little bit of digging I found a PR with title: [\[Breaking Change\] Refactor helpers for Octane \(Ember 3.13+\)](https://github.com/DockYard/ember-composable-helpers/pull/321), which landed in [v3.0.0 of ember-composable-helpers](https://github.com/DockYard/ember-composable-helpers/compare/v2.4.0...3.0.0).

So next stop `package.json` files in my project and indeed I have found a pre v3.0.0 version:

```
"ember-composable-helpers": "^2.2.0",
```

## Solution

tl;dr: If you bump into a *"Uncaught Error: Assertion Failed: You attempted to overwrite the built-in helper "array" which is not allowed. Please rename the helper."* error in your ember app/addon, chances are that you just need to run following command to make it work again:

```
ember install ember-composable-helpers
```

-----

<span>Photo by <a href="https://unsplash.com/@rojekilian?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sarah Kilian</a> on <a href="https://unsplash.com/s/photos/error?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Cartoonate: Part 1 (Introduction)
Tags: digitalocean, dohackathon, flutter, ai
Published: 2021-01-01 11:18:40

**INTRODUCTION**

Short form Videos have become very common, people are looking for entertainment in the shortest possible time and different variations of this can be seen across social media which includes: TikTok, Whatsapp Status, Instagram reels, etc.

**PRODUCT**

I am creating a web app that enables people to simply upload a pic of themselves and then the app converts the picture to a cartoon version and then brings it to like by mimicking a funny video, users would be allowed to select the art style of their choice, such as Pixar, Zombie, Family Guy, etc and then outputs the video which they can share on social media and download.Users would also be able to view what others created in the share page on the app. 

**TOOLS**

The app would be built using the following:
1. flutter framework for web app
2. DigitalOcean for deployment using App platform, Storage. 
3. Google Cloud Platform For animation AI, Database and User Authentication.
4. Github for Version Control.

**NEXT**

I would document all the processes and code used in creating the webApp. Join me in this journey!!
How to remove the first character of a string in Python?
Tags: python
Published: 2021-02-28 18:58:29

---
title: How to remove the first character of a string in Python?
published: true
date: 2021-01-01 11:00:00 UTC
tags: python
canonical_url: https://blog.murtajaziad.xyz/how-to-remove-the-first-character-of-a-string-in-python/
---

You can remove the first character of a string using Python easily by removing the first index of the string.

```py
string = "abcdef"
print(string[1:]) # bcdef
```

`[1:]` means _get the string starting from index 1 to the end_. Also, you can use it with any index using this syntax: `string[start:stop]`.